AI 现在能帮你直接在 Penpot 里画专业 UI 了

设计师要失业了？AI 现在能帮你直接在 Penpot 里画 UI 了

昨天看到 Figma 在疯狂卷 AI 功能，今天发现 GitHub 悄悄放出一个大招——penpot-uiux-design，一个让 AI Agent 直接在 Penpot 里画专业 UI 的 Skill。

说实话，我一开始是怀疑的。设计这东西，AI 能做好吗？但看完这个 Skill 的文档，我服了——它不是让 AI 随便画，而是有一套完整的 UI/UX 设计方法论。

这个 Skill 能做什么？

简单说，它给 AI Agent 提供了一套在 Penpot 里执行 UI 设计的工具链：

• mcp__penpot__execute_code：在 Penpot 插件环境里跑 JavaScript，创建或修改设计
• mcp__penpot__export_shape：把设计导出成 PNG/SVG，可视化检查
• mcp__penpot__import_image：把图标、图片、Logo 导入设计
• mcp__penpot__penpot_api_info：获取 Penpot API 文档

配合这套工具，AI 能在 Penpot 里完成从创建画板、放置元素、应用布局到导出验证的全流程。

设计原则才是核心

让我真正意外的是这个 Skill 不只是工具调用，它内置了一套设计规范：

• 视觉层次：尺寸 > 颜色/对比度 > 位置 > 留白 > 字体粗细
• 间距体系：8px 基准，xs(4px) / sm(8px) / md(16px) / lg(24px) / xl(32px) / 2xl(48px)
• 移动端基准：375×812（iPhone 尺寸）；桌面端基准：1440×900
• 无障碍要求：文字对比度 4.5:1，大文字 3:1，触控目标最小 44×44px

这套规范直接可以拿来当设计系统的起点用。

使用体验怎么样？

需要先装 penpot/penpot-mcp 服务端，在 Penpot 里加载插件，然后配置 VS Code 或你用的 AI 工具。文档里有完整的故障排除指南，常见问题基本都覆盖了。

适合人群：

• 设计师想快速出原型
• 产品经理需要自己画 UI 验证想法
• 开发者想用代码自动化生成设计

值不值得用？

Penpot 本身就是 Figma 的开源替代，这个 Skill 让它的可用性直接上了一个台阶。虽然需要一点配置成本，但考虑到它是免费开源的，这波不亏。

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