试完几种 AI 原型工具,我发现能编辑才是真的香

导语

做产品原型久了，总有一种感觉：

画图本身没什么。但有些重复劳动，明明可以省下来——比如改一个按钮文案，要在十几个页面里逐个手动改。

我对原型有个硬需求：界面上必须带注释。组件行为、边界情况、数据来源，都得直接标注在页面上——因为这份交付件要给 UED、开发、测试所有人看。

在 Axure 里，我的做法就是贴文本框。简陋，但够用。

真正让我受不了的是重复劳动。每做一个新页面都是从头画，组件复用基本靠 Ctrl+C / Ctrl+V。一个按钮改了文案，剩下十几个页面……

不过 Axure 有个难替代的优势：公司内部的协作平台支持 Axure 插件，上传后团队可以在线评审。这也是我一直没换的原因。

但我还是想找到一种方案：既能减少重复劳动，又能保持协作效率。

于是开始了我的探索。

方案一：Vibe Coding 搓 HTML Demo —— 好看，但不适用

Cursor、Claude Code 一句话出页面，视觉效果好得离谱。

但有两个硬伤：

第一，注释没法写。 HTML 上加标注文字，跟界面内容混在一起，分不清哪是注释、哪是内容。你说 HTML + Word 双份维护？那还不如回去用 Axure。

第二，不懂前端就没法微调。 按钮位置偏了 5px，只能写提示词让 AI 调——来回三四轮。没法直接拖拽，掌控感很差。

结论： Vibe Coding 适合快速验证想法，不适合团队交付。

方案二：Excalidraw + AI —— 复杂界面直接崩

我在 Obsidian 里用 Excalidraw 插件画原型，配合 AI 生成。

简单页面还行。界面一复杂就失控——表格行数列数一多，手绘线条直接变蜘蛛网。AI 也不听话，让它画个表单，它给你加一堆装饰元素。

而且没有组件体系。改一处 = 全部重画。

结论： 画流程图、线框图可以，做可交付原型不行。

方案三：Figma + AI —— 云端不稳定，浅尝辄止

Figma 确实是好工具。但它是纯云端。

我的网络环境需要挂梯子，不稳定的时候画布半天打不开。加上免费版有各种限制，就没有深入尝试。

方案四：Penpot —— 开源、本地部署、AI 原生

顺着 Figma 找开源平替，找到了 Penpot。

先踩了个坑：在线版 MCP 不稳

先试了在线版，跟 Figma 一样受网络拖累，MCP 连接时断时续。

切到 Docker 本地部署，问题彻底解决。

为什么它成了最终选择

本地部署，极致稳定。 Docker 一行命令跑起来，数据在自己电脑上。不需要梯子，不怕服务宕机。

AI 原生支持。 这是最打动我的一点——打开 Claude Code 或 WorkBuddy，描述界面，AI 直接在 Penpot 里生成设计文件。你可以拖拽手动调，也可以选中后用自然语言继续改。

用一句话总结就是："说原型"，而不是"画原型"。

开源免费。 无页面数限制，无协作者限制。

不足之处：协作

公司内部的协作平台暂不支持 .penpot 文件。我的替代方案：导出 PDF 上传，平台支持 PDF 预览，团队评审流程完全不受影响。

待探索：设计稿一键转前端代码

Penpot 支持将设计稿导出为前端代码。原型画完，离可运行界面只差一步。这个功能我计划后续单独研究。

实操指南：从零到生成第一个原型

Docker 部署（不会命令行也能搞定）

装好 Docker Desktop，打开 AI 编程工具，告诉它："帮我在本地用 Docker 部署 Penpot"。

AI 会自动拉镜像、配端口、挂数据卷。你只需要描述需求，全程不用敲一行命令。

部署完浏览器打开 http://localhost:9001，注册即用。

组件库

内置组件库够用，也可以自行导入。Penpot 基于 SVG + CSS 开放格式，和 Figma 组件库可以互相转换。

开启 MCP

三步搞定：

1. 进入「账户设置 → Integrations」
2. 开启「MCP」
3. 复制 MCP 配置 URL

配置 AI 工具

WorkBuddy、Claude Code、Codex 都支持。最简单的方式：把 MCP URL 粘贴到对话框，让 AI 帮你完成配置。

连接并生成

Penpot 里打开文件，点击「MCP Server → 连接」。

然后在 AI 工具里描述需求：

"画一个财税政策库的列表页。"

AI 会自动创建画板、放置组件、设置布局。生成的是真正的 Penpot 设计文件，每个元素都可以手动编辑。

选中组件，精准修改

选中某个按钮，直接说：

"改成圆角 8px、蓝底白字、加粗。"

只修改选中的组件，页面其他部分不受影响。

批量操作，效率炸裂

更进一步——五个页面里的同一个按钮，需要修改时让 AI 一次性全部更新，不用逐个去翻。

总结

回顾整个探索，Penpot + AI 恰好解决了我的两个核心诉求：

• 减少重复劳动。 组件体系 + AI 生成 + 批量修改，告别在几十个页面之间复制粘贴。
• 保留协作能力。 PDF 导出后上传团队协作平台，评审流程完全不变。

最关键的是——不需要会写代码。 想动手就拖拽调整，不想动手就用自然语言描述。原型上的注释，AI 也能一并生成。

对于既要交付质量、又要效率的产品原型场景，Penpot + AI 是我目前找到的最优解。

如果这篇文章对你有帮助，欢迎转发给同样在跟原型较劲的朋友。