AI 终于能帮你「真·做设计」了——Penpot UI/UX 设计技能评测

设计师们，AI 终于能帮你「真·做设计」了

以前我们总说 AI 能生成图片、生成海报，但一到「正儿八经做 UI/UX 设计」就歇菜——生成的东西要么是 Demo 级的框框，要么就是哪里哪里都不对劲。

但今天挖到的这个 Skill，有点不一样。

penpot-uiux-design 是一个专门给 AI Agent 用的 Penpot 设计指南。搭配 penpot/penpot-mcp 服务器，AI 可以直接操控 Penpot——创建画板、添加组件、调整布局、导出设计稿——全部在你的设计文件里完成，不是生成一张图糊弄你。

它能做什么？

• 创建专业 UI 界面：从移动端小屏到桌面 Dashboard，AI 按照标准的 8px 网格系统排版，不是随便拼凑
• 遵守你的设计系统：如果你的项目已经有品牌色、组件库、Typography 规范，AI 会优先使用你的 token，而不是自己瞎编
• 可访问性检查：自动验证色彩对比度、触摸目标大小、标题层级，确保设计对所有人友好
• 设计评审清单：AI 做完后会按清单逐项检查——视觉层级是否清晰、间距是否一致、交互元素是否明显
• 直接导出 CSS：选中元素，一键生成 CSS 代码，不用自己手动量

为什么我觉得它值得用？

最打动我的一点是它的设计工作流逻辑：

AI 不是上来就画，而是先了解你的设计系统 → 再理解页面结构 → 然后创建/修改元素 → 最后验证输出。这和真实设计师的工作方式是一致的，不会出现「你让它画个按钮，它给你整了个全屏海报」的崩溃场面。

它内置的设计 token（Spacing、Typography、Color）也很实用，8px 基准的间距系统、48-64px 的 Display 字体、WCAG AA 标准的色彩对比——都是拿来就能用的好东西。

适合谁用？

• 正在用 Penpot 做设计的团队，想让 AI 辅助做设计稿
• 需要快速出 MVP 原型的独立开发者或产品经理
• 想建立设计系统的团队，可以用它来规范 AI 生成物的质量

怎么安装？

需要先装 penpot/penpot-mcp 服务器，然后在 VS Code 或 Cursor 的 settings.json 里配一下 MCP 地址就行。官方文档有非常清晰的安装步骤，即使是第一次配置 MCP 的同学也能搞定。

GitHub 链接我放末尾了，有兴趣的可以去看看 SKILL.md，文档写得很详细，还附带了组件规范、无障碍指南、平台尺寸参考等实用文件。

总之，这是一款真正把 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