Code Review 有 design review 吗？这个 Skill 让 AI 替你做 UI/UX 设计

代码有 design review，设计稿凭什么没有？工程团队普遍会对代码做 lint、review、自动化测试，但对设计稿往往就是「看着差不多就行」——结果就是 UI 不一致、组件重复造轮子、上线后频繁改稿。

penpot-uiux-design 就是来解决这个问题的。它是 GitHub 官方 awesome-copilot 项目里的一个 Skill，专注用 AI + Penpot（开源设计工具）+ MCP 协议，让开发者在代码环境里直接驱动专业 UI/UX 设计流程。

这 Skill 到底能干什么？

简单说，它把设计工作变成可编程的：

• 设计系统构建：自动生成 Button、Form、Navigation 等组件规范，统一色彩 Token、字体层级，不用设计师反复沟通
• MCP 工具驱动：通过 mcp__penpot__execute_code 在 Penpot 里直接执行 JS 创建/修改设计元素，mcp__penpot__export_shape 导出 PNG/SVG，流程闭环
• accessibility 先 行：内置对比度检查、触控目标尺寸规范，不是事后补的，是设计流程内置的
• 多平台覆盖：iOS、Android、Material Design、Web 响应式，参考文档全提供

开发者视角最有价值的地方

传统流程是：设计师出图 → 开发照着实现 → 对齐靠 eye-ball。MCP 时代这个流程可以反过来：开发者用自然语言描述需求 → Skill 调 Penpot MCP 生成设计稿 → 直接导出给设计师 review。

更关键的是，这套东西是开源的。Penpot 是西班牙政府背书过的开源设计工具，MCP 协议是 Anthropic 推的开放标准，两者的组合意味着：不绑平台、不锁供应商。

怎么上手？

前提：本地跑 Penpot MCP Server（项目有完整安装脚本，一键 bootstrap），然后在 VS Code 或任意 MCP 客户端配置 penpot server URL。

之后就是典型的 Plan-Do 循环：描述设计目标 → AI 生成组件代码或设计建议 → 导出视觉稿 → 设计师或 PM review。整个过程在代码上下文里完成，不需要切换 Figma。

适合谁？

全栈工程师、自己做产品的 indie hacker、以及想打通设计-开发闭环的团队。如果你已经用 Claude Code 或 Cursor，这 Skill 直接补足了设计这块短板。

GitHub 仓库

GitHub: https://github.com/github/awesome-copilot/tree/main/skills/penpot-uiux-design