让 AI 直接帮你「画」设计稿：penpot-uiux-design 来了

你有没有过这种感觉——跟 AI 描述一个界面，它给你一堆代码，但你根本不知道最后长什么样？特别是设计师和 PM，跟开发来回沟通 UI，一来一回改三版，半天就过去了。

GitHub 官方出的这个 penpot-uiux-design，就是来解决这个问题的。它把 AI 直接接进了 Penpot——那个开源的设计工具，让 AI 能「画」出真实的、可视化的界面，而不是只给你一坨代码。

它到底能做什么？

这个 Skill 通过 4 个 MCP 工具，把 Claude Code 和 Penpot 无缝打通：

• mcp__penpot__execute_code：在 Penpot 里直接跑 JavaScript，AI 可以「画」按钮、表格、导航——不是给你代码让你自己画，是 AI 替你把东西放进设计稿里
• mcp__penpot__export_shape：把做好的组件导出成 PNG/SVG，设计师直接检查，不需要再截图
• mcp__penpot__import_image：把图标、照片、Logo 导入设计稿，AI 帮你处理素材
• mcp__penpot__penpot_api_info：查 Penpot API 文档，让 AI 知道能用什么功能

为什么设计师和 PM 值得看？

最打动我的一个点：AI 帮你「读」设计文件。你有一个现有的设计稿，AI 可以分析里面有哪些组件、什么层级、用的是什么设计系统（如果没有，它会告诉你）。

然后你跟 AI 说「帮我把登录页改成暗色主题」，它不只是给你 CSS——它真的去改 Penpot 里的设计稿，改完你打开文件就能看到结果。这对设计师和 PM 来说，沟通成本直接降好几个等级。

另外它自带：

• 无障碍检查：WCAG 合规性自动验证，对比度、触摸目标大小都有覆盖
• 多平台适配：iOS、Android、Material Design 规范都有内置指导
• 响应式布局：移动端（375×812）、桌面端（1440×900）都有预设

怎么安装？

一行命令搞定（Claude Code / Cursor / Codex 均支持）：

curl -o ~/.claude/skills/penpot-uiux-design/SKILL.md 
  "https://raw.githubusercontent.com/github/awesome-copilot/main/skills/penpot-uiux-design/SKILL.md"

前提是你本地跑着 penpot/penpot-mcp 服务（官方有 Docker 部署指南），在 Penpot 里加载插件之后就能用。

适合谁用？

一句话：需要 AI 帮你出设计稿的人——产品设计师用它快速出 UI 稿，PM 用它验证产品原型，前端工程师用它把设计转成代码前的「中间态」。

最妙的是，整个 Skill 是 GitHub 官方维护，背靠 awesome-copilot 仓库（GitHub Stars 27K+），更新稳定，不是什么野路子项目。

GitHub 链接戳这里 → https://github.com/github/awesome-copilot

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