让 AI 替你做设计！GitHub 官方出品 Penpot UI/UX 设计 Skill 来了

做设计最累的是什么？不是画图，是反复改稿。

「这个间距再大一点」「按钮颜色不对」「这里要加个下拉菜单」——每次需求过来，设计师都要在 Penpot 里手动操作半天，改完还要截图给甲方确认，效率低到想哭。

现在，GitHub 官方 awesome-copilot 项目给我们带来一个超级工具——penpot-uiux-design，让 AI 直接帮你操控 Penpot 做 UI/UX 设计！

🎯 这个 Skill 是什么？

简单说，这是一个把 AI 和 Penpot 无缝连接的 MCP（Model Context Protocol）工具。它提供 4 个核心能力：

• 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 里执行。设计师从操作者变成了审核者，效率直接起飞。

⚡ 能做什么场景？

1. 快速生成 UI 界面
告诉 AI「帮我设计一个 Dashboard，要有用户列表、数据图表和导航栏」，几秒钟就能在 Penpot 里生成完整界面，然后你再微调细节。

2. 建立设计系统
用它自动生成按钮、表单、导航等组件库，确保整个设计风格高度统一——再也不用手动一个个画了。

3. 响应式布局检查
支持移动端（375×812）、桌面端（1440×900）等多种尺寸，AI 自动帮你检查在不同设备上的显示效果。

4. 无障碍设计验证
内置 WCAG 标准检查，帮你确保设计符合无障碍要求，不会把有视觉障碍的用户忘掉。

5. 平台规范对齐
iOS、Android、Material Design 平台指南都有覆盖，做跨平台设计时不再手忙脚乱。

📦 怎么安装使用？

第一步：安装 Penpot MCP Server

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

第二步：在 Penpot 里加载插件
打开 Penpot → Plugins → Load plugin from URL → 输入 http://localhost:4400/manifest.json

第三步：在 VS Code 或 Claude 里配置

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

第四步：开用！
直接跟 AI 说「帮我设计一个登录页面，要有邮箱和密码输入框」，AI 就会在 Penpot 里帮你完成。

💡 我的感受

这个 Skill 最戳我的点是把 AI 从「生成图片」升级到「真正操控设计工具」。以前那些 AI 绘图工具，画出来的图你还得手动搬到设计软件里标注，而现在 AI 直接帮你操作 Penpot——这才是设计工作流的真正革命。

而且这是 GitHub 官方 awesome-copilot 项目的一部分，背靠 33k+ stars 的优质开源项目，质量有保证。

如果你用 Penpot 做设计，或者想体验 AI 操控设计工具的感觉，这个 Skill 强烈建议试试！

GitHub 地址：https://github.com/github/awesome-copilot
对应的 Penpot MCP Server：https://github.com/penpot/penpot-mcp

GitHub: https://github.com/github/awesome-copilot