8种原型图的高效方法

01​

PART Prompt 直出 HTML原型​

打开 Codex，把页面结构描述出来就行：​

​

代码块​

Plain Text

左侧导航栏五个菜单项、右侧三栏看板、顶部搜索框加用户头像​

​

几分钟 AI 给一段 HTML 代码，浏览器打开就能看。不满意追加修改，AI 增量改不会整个重写。不用懂代码，页面讲清楚就够了。​

​

​

​

​

58%

​

​

​

​

42%

​

​

💡 重点在prompt描述，说做一个登录页，AI 给的是平庸默认款。说做一个登录页，左半屏品牌插画区，右半屏顶端 logo，中间邮箱密码输入框，底部第三方登录，拿到的版本就完全不一样了。​

02​

PART GPT-Image-2 直接出PNG原型​

打开 ChatGPT 网页选 GPT 模型，在对话框里说要一张什么样的图，GPT 自动调起图像生成。不满意就追加说这次怎么改，GPT 在同上下文里重新出。批量调可以走 APImart 或 OpenAI 官方 API，本文这 10 张配图就是 API 批量出的，平均每张 50 秒。​

适合不需要可交互、只看视觉的场景。竞品风格图、Banner 草稿、UI 概念图、需求评审用的视觉示意、PRD 里要插的配图，GPT-Image-2 都能出。​

​

​

​

​

46%

​

​

​

​

54%

​

​

GPT-Image-2 在产品经理手里用的人不多。还有人在用 Midjourney 出竞品风格图，但 Midjourney 出的是艺术海报，GPT-Image-2 出的才是能贴进 PRD 的 UI 概念图，信息密度和文字识别度都更高。拿来出 PRD 配图、做选题封面草稿，差不多直接能用。​

03​

PART 截图喂 GPT，反推新图​

现成截图丢给 GPT，让它在原图上改局部，或者反推出代码。截图自带 90% 的上下文，比用文字从零描述精度高得多。​

跟装修一样，拿现成照片用红笔圈出要改的地方、标注怎么改，师傅按标注改，其他地方一动不动。GPT-5.5 的图像编辑就是这个思路，对现有截图改局部而不是从零生成，产物是 PNG 位图，直接贴进 PRD 或评审稿。​

​

​

操作也简单。先截要改的界面，用 PPT在图上画红圈、加文字说明改成什么样。​

标注后的图拖进 ChatGPT，选 GPT-5.5 模型，让它按红圈改、其他不动。可以让它一次出三个方向的版本对比。​

适合在已有界面上做局部改造、做 A/B 视觉对比、给设计师演示改动方向。​

老王踩过两个坑。一个是觉得 AI 这么强，直接从零 prompt 重画不就好了。后来发现重画的代价是要把原图所有版式、配色、细节用文字重新描述一遍，描述精度永远不如原图本身。改局部就是利用原图自带 90% 上下文的红利。​

另一个是反推出来的代码看着对，实际跑起来字段对不齐、间距不准。后来意识到截图分辨率很关键，2 倍以上 AI 才能看清细节。模型选择上，Claude 还原版式更稳，GPT 还原配色更准，要求高的时候各跑一版对比。​

04​

PART Excalidraw AI 白板出图​

Excalidraw 是个手绘风格的白板工具，Obsidian 里有插件可以直接用。描述一个流程或架构，Excalidraw 的 AI 功能直接生成手绘风格的图表，节点、箭头、文字框都能拖拽改。​

方法 1 出页面，Excalidraw 出图表。流程图、架构图、关系图这类结构化信息，用它比用 HTML 合适。产物是矢量格式，放大不糊，导出 PNG 或 SVG 都行。​

适合需求评审前快速画一张流程图、系统架构图、用户路径图。手画怕丑，Visio 太重，Excalidraw 的手绘风格反而让草稿看起来就是草稿，不会让人觉得这是终稿。老王拿它出过不少架构示意图，手绘风格放进 PPT 比 Visio 的方块图更有演示效果。​

局限是 AI 生成的图表复杂度有上限，超过 15 个节点就容易乱。复杂系统架构还是得手动调整布局。​

​

​

05​

PART Drawio 加 AI 在 Obsidian 插件流里跑​

让 Cursor 或 Claude Code 里的 AI 直接产出 .drawio 图纸文件，进 drawio 编辑器接着改，不用从空白画布拖方块。​

Obsidian 装 Diagrams 社区插件，库里的 .drawio 文件点开就能编辑，Markdown 笔记用双中括号引用嵌入。​

​

​

​

不用 Obsidian 也行，把 AI 给的 XML 导入 app.diagrams.net 在浏览器里改。​

drawio 走可视化编辑，拖节点、调间距、换样式都在编辑器里完成，AI 吐的第一版当底稿，人工精修余地大得多了。​

PRD 里要长期跟着版本走的系统架构图、服务依赖图，用 drawio 文件和笔记放同一个 Obsidian 库，改完保存就在原位替换掉，非常方便。​

老王在 Cursor 里写了一个 drawio 生成 skill，描述清楚要什么图，文件落到笔记目录，点开 Diagrams 调编辑器，改完双中括号引用进去。​

​

​

06​

PART v0 / Bolt / Lovable 在线出原型​

v0.dev 是 Vercel 做的，Bolt.new 和 Lovable 思路类似，都是在浏览器里描述要什么页面，AI 直接出一个能点的交互原型。产物不是 demo 级别，是能直接部署的 React 代码，用了 Shadcn、Tailwind 这类组件库，看起来和生产环境差不多。​

方法 1 出的是裸 HTML，样式粗糙。这几个工具出来的原型精度高很多，有真实的组件交互、响应式布局、暗色模式切换。给老板看方案，丢过去一个链接，比截图有说服力。​

有免费额度，v0 每天能生成几次，Bolt 和 Lovable 的免费额度更少。深度使用要付费。另一个问题是出来的代码量比较重，适合做单页面验证，不适合快速出十几个方案对比。​

适合产品评审、投资人演示、内部 demo day 这种需要看起来像真产品的场景。​

​

​

07​

PART Figma AI 和设计工具插件​

Google Stitch 和 Figma 自己做的 AI，出来的东西就是 Figma 设计稿。图层、组件、Auto Layout 都在，设计师打开直接改。​

前面那些方法出的是 HTML、截图、手绘草稿，设计师拿到手要么改不动，要么不想接。这两个工具出来的格式直接落设计师工作台上，不用转一道。​

Stitch 入口在 stitch.withgoogle.com，Google 账号登进去，告诉它你要什么页面、什么 App 流程，它直接出设计稿。导出到 Google AI Studio 还能接着写前端代码。​

​

​

​

Figma Make 另一条路。就在 figma.com 里面，右边有个 AI Make 面板，生成的东西直接就在你的 Figma 文件里，不用导来导去。团队本来就在 Figma 里干活的，用这个最顺。​

​

前期拿 v0 出概念跑方向，方向定了用 Stitch 转成 Figma 稿交给设计师精修。这条接力路线成本最低。​

Stitch 做多语言、做移动端适配最顺手，App 原型出多语言版本是它的强项。Figma Make 赢在组件库直接在 Figma 生态里，团队已经重度用 Figma 的直接上手。​

08​

PART Pencil MCP​

让 AI 不只画图，还能调用一个工厂的全套生产线，定义零件规格、装配规则，再批量生产符合规范的成品。这种方法生成的产物不是一次性页面，是基于变量和组件的页面，改一次主色所有页面同步变，改一次按钮样式整个产品同步变。​

MCP 协议是 Model Context Protocol 的缩写，让 AI 能直接读写设计工具的内部数据结构，而不是只能输出代码或图片。​

我们可以直接在 VS Code 里装 Pencil 插件，账号登录后就能用。然后在 Claude Code 里把页面需求描述清楚，跟 ChatGPT 聊天一样把要做什么说明白，Claude Code 会调用 Pencil 插件直接生成 .pen 文件，自带变量系统和布局系统。​

适合需要严格设计系统的场景。比如已经有一套企业 UI 规范，要新增 50 个后台页面，人工搭建要两周，基于 AI 加设计系统批量生成几小时搞定，生成的页面天然符合规范不用返工。​

这种方法目前在国内还很冷门，但代表了 AI 原型工具的真正未来。前面七种方法本质是 AI 协助画图，这种方法是 AI 在设计系统的约束里生成图。学习成本不低，但一旦搭起来，后续效率高得多。​

​

​

8 种方法摆在面前，真正的问题不是哪种最强，是手头这个具体的需求，匹配的是哪一档。匹配错了再贵的工具也是浪费，匹配对了一行 prompt 就够。​