让AI直接在你的设计稿上作画——Penpot MCP也太秀了吧！

让AI直接在你的设计稿上作画——Penpot MCP也太秀了吧！

你有没有过这种崩溃时刻：设计师扔过来一个Figma稿，你对着像素眼馋了半天，结果AI画出来的界面跟原版完全不像——按钮歪了、圆角对不上、间距更是一言难尽。

现在，有个新玩具可以彻底解决这个问题：Penpot MCP。

它是什么？说白了，就是让AI编程助手直接”长在”你的设计文件里——能读你的设计稿、能看懂你的组件、还能量产代码。

为什么有意思？

以前AI画界面，全靠你用嘴描述。设计师给了个高保真稿？不好意思，AI看不见，只能靠你”翻译”成文字喂给它。翻译一次漏一次信息，画出来当然走样。

Penpot MCP直接打了个穿：AI通过MCP协议连接Penpot设计文件，能读取组件结构、颜色、字体、间距——真正”看到”你在画什么，然后再生成代码。

具体能做这些事：

• 设计稿→代码：AI读取你的Penpot设计，直接生成对应代码，不靠截图
• 代码→设计稿：把你写的代码反向渲染进Penpot，对比审查哪里不对
• 直接操控设计文件：创建画板、修改组件、导出SVG/PNG，全都可以用自然语言指挥

怎么装？

在MCP客户端里加一行配置：

{
  "mcpServers": {
    "penpot": {
      "command": "npx",
      "args": ["-y", "@penpot/penpot-mcp"]
    }
  }
}

然后给AI下指令，比如：”帮我把这个登录页的按钮改成蓝色，看看效果”，AI就会直接在Penpot里改，然后给你看渲染结果——不是截图，是真真实实的画板修改。

谁用得上？

• 前端开发：设计师改了稿？AI直接同步到代码，不用手动对
• 产品经理：想要快速原型？用嘴描述，AI在Penpot里生出来
• 设计交接：AI能同时看懂设计和代码，让两边的沟通损耗降到最低

GitHub仓库戳这里：https://github.com/penpot/penpot-mcp

说实话，用了一段时间感觉这玩意儿还很新，偶尔会遇到连接不稳定的问题，但方向太对了——让AI真正”看见”你的设计，而不是靠猜。这个赛道今年应该会火起来，建议先上车占坑。

GitHub: https://github.com/penpot/penpot-mcp