Penpot + MCP 做 UI/UX 设计？这个开源 Skill 让设计师直接用自然语言出图！

说实话，每次要做 UI 设计我都头疼——不是因为没想法，是因为工具链太碎：Figma 贵、Sketch 要装插件、团队协作还要对版本……最近发现了一个让我眼前一亮的 Skill：penpot-uiux-design，基于开源设计工具 Penpot + MCP 协议，做 UI/UX 设计从来没这么顺过。

为什么是 Penpot？

Penpot 是少数几个真正开源的设计工具之一，支持 Web端直接用、不用下载、团队实时协作。以前很多人拿它和 Figma 比，主要差距在插件生态和 AI 能力。现在配合这个 Skill，MCP 协议直接把 AI 接入设计流程，差距一下子缩小了。

这个 Skill 的核心价值：把 Claude 的理解能力 + Penpot 的可视化能力串联起来。你描述一个界面，AI 直接在 Penpot 里把框架拉出来，还能自动遵守你的设计系统规范。

核心功能一览

MCP 工具集：共 4 个关键工具——

• mcp__penpot__execute_code：在 Penpot 插件上下文里运行 JavaScript，直接创建/修改设计元素。相当于 AI 有了”画笔”
• mcp__penpot__export_shape：把设计导出为 PNG/SVG，方便视觉检查和交付
• mcp__penpot__import_image：把图标、照片、Logo 导入设计文件
• mcp__penpot__penpot_api_info：随时查询 Penpot API 文档

设计系统支持：动手前先问”有没有现成的设计规范”，然后 AI 会自动读取当前文件的颜色、字体、组件库——直接复用，而不是重新发明轮子。

完整的组件规范：内置按钮、表单、导航的设计 checklist，包括：
– 最小触控目标 44×44px
– WCAG AA 色对比度（文字 4.5:1，大字 3:1）
– 响应式布局参考（移动端 375×812、桌面端 1440×900）

怎么安装？

需要先装 penpot/penpot-mcp 这个 MCP Server：

git clone https://github.com/penpot/penpot-mcp.git
cd penpot-mcp && npm install && npm run bootstrap

然后在 Penpot 里：Plugins → Load plugin from URL → 填入 http://localhost:4400/manifest.json，点”Connect to MCP server”。

VS Code 用户在 settings.json 里加一行：

{ "mcp": { "servers": { "penpot": { "url": "http://localhost:4401/sse" } } } }

安装包里有完整的排错指南，端口被占、浏览器拦截、插件连不上等各种坑都有对应解法。

适合谁用？

• UX 设计师：想快速出原型、对接开发的设计稿，直接导出 CSS 给前端
• 产品经理：自己画流程图和原型，不求人
• AI 开发者：想用自然语言生成 UI，接入 MCP 工作流
• 开源爱好者：Penpot 本身免费，这个 Skill 也开源，可以魔改

实际体验

我最惊讶的是”Board 定位”这个细节：AI 在创建新画板之前，会先扫描已有画板的位置和间距，自动计算最优坐标，避免重叠或留白不均。这种细节在 Figma 里要手动调半天才行，这里一个命令就搞定。

另一个是”Design Review Checklist”——做完后 AI 会用 penpotUtils 做自动化检查：元素是否溢出边界、文字是否小于 12px、对比度是否达标……省去了大量人工 review 的时间。

GitHub 链接：github/awesome-copilot/skills/penpot-uiux-design

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