Penpot UI/UX 设计 Skill——让 GitHub Copilot 画出专业级设计稿

还在为设计稿的「土味配色」和「乱排布局」头疼？今天挖到一个超硬核的 GitHub Copilot Skill——penpot-uiux-design，专门教 AI 在 Penpot 里做出专业级 UI/UX 设计稿。

为什么值得看

Penpot 是开源设计工具，对标 Figma，但之前用 AI 生成设计稿总感觉”差点意思”——配色乱、间距不一致、组件不规范。这个 Skill 相当于给 AI 装了一套完整的设计规范，让它学会用 Penpot MCP 工具（mcp__penpot__execute_code、mcp__penpot__export_shape 等）精准操控设计文件。

核心亮点：
– 设计系统优先：先检查你的设计 token（颜色、字体、间距），AI 会主动复用你已有的设计规范，不是乱来
– MCP 工具链：通过 JavaScript 在 Penpot 里直接创建/修改设计元素，包括 Board、Rectangle、Text、Flex 布局
– 无障碍合规：内置 WCAG 对比度检查、触摸目标尺寸（44×44px 起步）等，设计出来就能过基础 accessibility 审查
– 布局排版：提供 Mobile（375×812）和 Desktop Dashboard（1440×900）两种模板，开箱即用

使用方式

前提：装好 penpot/penpot-mcp 服务器，在 Penpot 里加载插件。

安装命令：

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

然后在 VS Code 的 settings.json 加入：

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

装好后，直接跟 GitHub Copilot 说「帮我设计一个用户注册页面」，它就会在 Penpot 里生成完整的响应式设计稿，包括表单、按钮、错误提示状态。

个人评价

38 次安装不算多，但这个 Skill 的质量相当能打。设计规范写得很系统——从间距 token（8px 基准）、字体层级（Display/H1/H2/Body/Small/Caption）到颜色语义（Primary/Secondary/Success/Warning/Error），全套覆盖。

最实用的是组件检查清单（Buttons/Forms/Navigation 三件套），AI 每生成一个组件都会过一遍清单，确保状态完整（default/hover/active/disabled/loading）。

设计师用 Penpot + 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