AI 直接在 Penpot 里画 UI，这个 Skill 把设计师和工程师的沟通省掉了

让 AI 直接在 Penpot 里画 UI，这一天终于来了

设计师和工程师之间的沟通成本有多高？光是把”我要一个不丑的仪表盘”这句话翻译成设计稿，中间要经历好几轮拉锯。而现在，有一个 skill 能让 AI 直接在 Penpot 里帮你把界面画出来——而且自带设计系统、无障碍检查和平台规范。

它叫 Penpot UI/UX Design，来自 GitHub 官方维护的 awesome-copilot 技能库。

它能做什么？

这个 skill 的核心逻辑是：把 AI 的生成能力和 Penpot 的 MCP（Model Context Protocol）接口打通，让 AI 能够程序化地操控 Penpot 里的每一个设计元素——创建形状、管理组件、应用设计令牌、导出 CSS、查询现有文件结构，全部可以由 AI 自动完成。

具体使用场景包括：

• 说一句话，生成完整的Dashboard、Form、Navigation 或 Landing Page布局
• 自动构建设计系统：组件库 + 设计令牌 + 统一的视觉规范
• 在设计过程中嵌入无障碍检查（WCAG 合规）
• 遵循iOS / Android / Material Design平台规范生成平台专用 UI
• 直接导出 CSS 代码，不用来回复制粘贴

安装方式

一行命令搞定：

npx -y skills add github/awesome-copilot --skill penpot-uiux-design --agent claude-code

前提是你已经装好了 Penpot MCP server（penpot/penpot-mcp），它在 Penpot 和 AI 之间搭了一座桥。

为什么值得试试？

Penpot 是开源的设计工具，对标 Figma但完全免费，而且支持 Web端。而这个 skill 把 AI 和 Penpot 的能力组合在一起，让设计师可以用自然语言驱动设计流程，不用手动一个个拖元素。

对于工程师来说，这意味着可以用 AI 做快速的原型设计，然后用真实的 CSS 代码交付给设计师审核——而不是丢一张截图说”大概长这样”。

项目地址：https://github.com/github/awesome-copilot（penpot-uiux-design 收录在 skills 子目录）

GitHub: https://github.com/github/awesome-copilot