设计师的 AI 副手来了！这个 Skill 让 Penpot 直接听懂你的设计意图

设计师用 AI 更要「专业感」：这个 Skill 让 Penpot 直接听懂人话

做 UI/UX 设计的朋友，有没有遇到过这种情况——甲方说「把这个按钮调大一点、颜色再活泼点」，你改了三版他说「还是第一版好」。来回沟通成本高，自己也改到麻木。

如果现在告诉你：AI 可以直接帮你改 Penpot 里的设计稿，而且改法符合专业 UI/UX 规范——不是乱来，是真的按设计体系走——你会不会想试试？

penpot-uiux-design：给 AI 配一个懂设计规范的副手

这个 Skill 其实是给 Claude（以及 GitHub Copilot 等 AI 编程助手）用的一个提示词库，装上之后，AI 就知道怎么操作 Penpot 这个开源设计工具了。

它依赖 penpot/penpot-mcp 这个 MCP 服务器，让 AI 能够：

• 读取并分析你的 Penpot 设计稿结构
• 执行 JavaScript 代码来创建或修改设计元素
• 导出 PNG/SVG 让你直接看效果
• 导入图片（图标、照片、Logo）进设计稿

重点是：它不是帮你随便画个图，而是遵循一套完整的设计规范——从间距系统（8px 基准的 spacing scale）、字体层级（Display/H1/H2/Body/Small/Caption）到颜色规则（Primary/Secondary/Success/Warning/Error），全给你安排好了。

上手有多简单？

安装 penpot-mcp 服务器，跑起来，然后在 Penpot 里加载插件，填入本地地址 http://localhost:4400/manifest.json，点「Connect」就搞定了。之后跟 AI 说人话，比如「帮我把这个注册页面的表单改成更易读的样子，参考 Material Design 规范」，AI 就会自己去操作 Penpot 文件。

什么场景最适合？

我个人的感觉是——它最适合设计师在「探索阶段」用来快速出原型。比如你有个想法但不想从零画，可以用自然语言描述，AI 先给你跑一版，你再针对性调整。比手动拖拽快不少。

另外对于 设计系统一致性检查 也很有用——AI 可以扫描现有设计稿，告诉你哪些地方间距不对、字号不规范、对比度不达标。这比自己肉眼 review 省力多了。

当然，它不是来抢设计师饭碗的——最终审美决策和品牌把控，还是得靠人。但它可以让那些「重复劳动」快 3 倍。

总结

如果你已经在用 Penpot 做设计，这个 Skill 相当于给你配了一个 24 小时在线的设计助理——规范它帮你记、重复操作它帮你跑、你只需要专注创意决策。

安装方式直接去 GitHub，克隆 penpot-mcp 仓库，跑 npm install 再 npm run bootstrap 就好。

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