Claude Code 直接操控 Penpot 画图！这个 Skill 把设计工具变成了 AI 的手脚

你有没有想过——让 AI 直接替你操控设计软件，不是生成图片，而是真的在 Figma/Penpot 里画图、做组件？

今天聊一个我刚发现的骚操作：Penpot UI/UX Design Skill。

它是什么

Penpot 是开源的设计工具（对标 Figma），而这个 Skill 把 Claude Code 直接变成了你的「Penpot 驾驶员」。装上之后，你说什么，Claude 就在 Penpot 里给你画出来。

不是那种「AI 画了个图，发你一个 PNG」的敷衍玩法——是真真切切在设计文件里操作图层、组件、响应式布局、交互原型。

怎么做到的

靠的是 Penpot 的 MCP（Model Context Protocol）接口。这个 Skill 背后有 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 文档，Claude 不会迷路

实际能干什么

举几个我看完文档直接种草的场景：

做 App 原型：告诉 Claude「做一个 SaaS 仪表盘，移动端优先，包含侧边导航和卡片列表」，它直接在 Penpot 里给你生成好所有屏幕，还能跑响应式检查。

建 Design System：Claude 会先问你团队有没有现成设计规范，没有的话它内置了一套完整的 Token 系统（间距、字体、颜色），直接套用。iOS/Android/Material Design 三大平台规范都有。

做可交互原型：加上交互动画（dissolve、slide、push）不在话下，Claude 帮你把 flow、modal、drawer 全都串起来。

设计合规性：内置 WCAG 可访问性检查——颜色对比度、触控目标大小，该有的护栏全都在。

安装有多简单

npx skills add https://github.com/github/awesome-copilot --skill penpot-uiux-design

一条命令，不需要下载任何设计资源。Penpot MCP Server 本地跑，数据不外传，隐私安全。

每周安装量 8,274 次，GitHub 27.4k stars——说实话这个数字比我预期的还要夸张。说明很多人真的在用它做生产级别的设计工作。

谁适合用

如果你每天在设计文件和代码之间来回切换，这个 Skill 能帮你省掉大量机械操作。把「把这个页面做成移动端适配」交给 Claude，你专注在真正的设计决策上。

想试的话，直接去 GitHub 仓库看文档，装完你发一句「帮我做一个登录页，需要响应式布局」，看看它画出来的是什么水平。

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

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