Penpot + AI 设计工作流，这个 Skill 让我放弃了 Figma

Penpot + AI 设计工作流，这个 Skill 让我放弃了 Figma

先说个真实的场景：你是不是也这样——对着 Figma 熬夜拉控件，好不容易画完一套界面，发现 AI 根本不认识你画的是什么？想用 AI 辅助做设计，但工具和工具之间鸡同鸭讲？

今天想聊的这个 Skill，叫 penpot-uiux-design。它解决的就是这个问题——让 Claude（或者说任何接了 MCP 的 AI Agent）真正”读懂”你的 Penpot 设计稿，然后帮你改、帮你评、帮你完善。

Penpot 是什么？

Penpot 是西班牙团队做的开源设计工具，定位类似 Figma，但最大优势是完全开源、数据自主。很多追求数据合规的团队已经开始迁移到 Penpot 了——尤其是信创环境，国产麒麟、统信系统都能跑。

但 Penpot 本身的痛点是：设计师和开发者之间的协作断层。你在 Penpot 里画好了组件，工程师还是得手动”翻译”成代码。

这个 Skill 怎么破局？

penpot-uiux-design 的核心思路是——用 MCP（Model Context Protocol）把 AI 和 Penpot 彻底打通。

装上这个 Skill 后，Claude 能直接调用 Penpot 的 MCP 工具，包括：

• mcp__penpot__execute_code：在 Penpot 插件上下文里跑 JavaScript，直接创建或修改设计元素
• mcp__penpot__export_shape：把设计稿导出为 PNG/SVG，方便视觉检查
• mcp__penpot__import_image：把图标、图片、Logo 导入设计稿
• mcp__penpot__penpot_api_info：读取 Penpot API 文档

换句话说，你可以在对话框里说”帮我把登录页的按钮改成圆角 12px，主色调换成蓝色”，Claude 就能直接操作你的 Penpot 画板。

用起来是什么体验？

官方给了个典型工作流：

• 先问设计系统：Claude 会先问你”有没有现成的 design token 或品牌规范”，如果有就直接用，没有才用默认的 8px 间距体系
• 读取现有画板：用 penpotUtils.shapeStructure() 读取当前设计稿的层级结构
• 定位元素：用 penpotUtils.findShapes() 按类型或名称找元素
• 创建/修改：调用 penpot.createBoard()、penpot.createRectangle() 等 API 改设计
• 导出验证：用 mcp__penpot__export_shape 导出视觉稿，你来确认

整个过程是”AI 动手 + 人工复验”，不是纯自动化但效率翻倍。

适合谁用？

这个 Skill 对两类人最有价值：

• UI/UX 设计师：想让 AI 帮你做重复性设计调整（改间距、调颜色、批量替换组件），而不是每次都从头画
• 前端开发者：可以直接在对话里让 Claude 读你的 Penpot 设计稿，然后生成对应的 HTML/CSS 或组件代码

安装门槛高吗？

需要先装好 penpot/penpot-mcp 这个 MCP Server，在本地跑起来之后，配置一下 VS Code 或你用的 Agent 客户端就好了。官方有详细的安装文档，网络上也有中文社区教程。

有一点要注意：Smithery 显示这个 Skill 在 awesome-copilot 仓库里，GitHub 星标 20.5k，说明它是 GitHub 官方力推的设计类 Skill 之一，不是野路子项目。

说在最后

Figma 很强，但它是闭源的、数据在别人服务器上。Penpot + AI 这个组合，对于重视数据自主的团队来说是更干净的方案。如果你正好在用 Penpot，这个 Skill 值得装上试试——它不是让 AI 取代设计师，而是让设计师少做机械活，把时间花在真正的创意决策上。

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

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