让AI直接操刀设计稿！GitHub官方这个Skill让Penpot秒变智能助手

你有没有过这种时刻——脑子里有一个超棒的产品 idea，画了个草图，结果跟设计师沟通了三遍，对方还是做出了一个完全不一样的东西？

或者你本身就是设计师，天天被 PM 和开发追着问”这个间距多少””这个颜色是什么”，重复劳动做到吐。

penpot-uiux-design 就是来解决这个问题的。

这是一个专门给 AI Agent 用的 Penpot UI/UX 设计指南 Skill，来自 GitHub 官方维护的 awesome-copilot 仓库。它不是让你去打开 Figma 手动拖拽，而是教 AI 怎么通过 MCP（Model Context Protocol）协议直接操控 Penpot——全球最火的开源设计工具——帮你创建设计、修改组件、导出资源。

它能做什么？

核心是 4 个 MCP 工具：
– 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 说”帮我设计一个移动端登录页，要包含邮箱登录和第三方登录两种方式”，AI 就能直接在你的 Penpot 文件里生成对应画板、输入框、按钮、图标，还能按你的设计系统（颜色、间距、字体）来干活。

跟别的 Skill 比，它好在哪？

它不只是”生成代码”，而是真正接入了设计工具的工作流。你不需要在设计稿和代码之间来回横跳——AI 可以直接改设计稿，你直接看效果，改满意了再导出 CSS 给开发。

而且它内置了完整的设计规范：8px 基准的间距系统、移动端/桌面端的典型布局尺寸、WCAG 无障碍标准（颜色对比度、触摸目标大小），以及按钮、表单、导航的检查清单。

适合谁用？

• 设计师：让 AI 帮你生成设计稿初稿，你来微调，省去重复性操作
• PM / 创业者：快速做出产品原型，不用等设计师排期
• 全栈开发者：直接用自然语言改 UI，减少和设计师的沟通成本

安装也不复杂：先装 penpot/penpot-mcp 服务端，再在 Penpot 里加载插件指向 http://localhost:4400/manifest.json，VS Code 里配好 MCP 链接就行。

38 次安装不算多，但这恰好是一个被严重低估的 Skill——Penpot 本身已经开源且社区活跃，配合 AI Agent 简直是设计和开发工作流的王炸组合。

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