AI导哈

设计与多媒体

penpot-uiux-design

github/awesome-copilot

Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".

  • 1.3万 次安装
  • 4.1万 星标
  • 收录于

安装命令

npx skills add https://github.com/github/awesome-copilot --skill penpot-uiux-design

要点

Professional UI/UX design creation in Penpot with MCP tools, design systems, and accessibility standards.

  • Four MCP tools enable design creation, modification, export, and API access within Penpot's plugin context
  • Includes discovery workflow to identify existing design systems, components, and tokens before building new designs
  • Covers responsive layouts for mobile (375×812), desktop (1440×900), and platform-specific guidelines (iOS, Android, Material Design)
  • Provides default design tokens (spacing scale, typography, colors) and component patterns (buttons, forms, navigation) when no design system exists
  • Built-in accessibility validation, visual hierarchy principles, and design review checklist for WCAG compliance and usability

SKILL.md

Penpot UI/UX Design Guide

Create professional, user-centered designs in Penpot using the penpot/penpot-mcp MCP server and proven UI/UX principles.

Available MCP Tools

Tool Purpose
mcp__penpot__execute_code Run JavaScript in Penpot plugin context to create/modify designs
mcp__penpot__export_shape Export shapes as PNG/SVG for visual inspection
mcp__penpot__import_image Import images (icons, photos, logos) into designs
mcp__penpot__penpot_api_info Retrieve Penpot API documentation

MCP Server Setup

The Penpot MCP tools require the penpot/penpot-mcp server running locally. For detailed installation and troubleshooting, see setup-troubleshooting.md.

Before Setup: Check If Already Running

相关 Skills

git-commitgithub/awesome-copilotUse this skill when the user wants to make a Git commit or split changes into more than one commit. Also use it when the user types "/commit" or asks for a conventional commit. The skill examines the diff, stages the related files, writes a Conventional Commits message, and runs git commit. Do not use it when the user wants only a commit message and no commit. Do not use it to push, open a pull request, rebase, or change the commit history.其他4.8万excalidraw-diagram-generatorgithub/awesome-copilotGenerate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw.其他3.2万multi-stage-dockerfilegithub/awesome-copilotCreate optimized multi-stage Dockerfiles for any language or framework其他3万documentation-writergithub/awesome-copilotDiátaxis Documentation Expert. An expert technical writer specializing in creating high-quality software documentation, guided by the principles and structure of the Diátaxis technical documentation authoring framework.其他2.8万prdgithub/awesome-copilotGenerate high-quality Product Requirements Documents (PRDs) for software systems and AI-powered features. Includes executive summaries, user stories, technical specifications, and risk analysis.数据与研究2.4万refactorgithub/awesome-copilotSurgical code refactoring to improve maintainability without changing behavior. Covers extracting functions, renaming variables, breaking down god functions, improving type safety, eliminating code smells, and applying design patterns. Less drastic than repo-rebuilder; use for gradual improvements.设计与多媒体2.2万