一文 讲透 AI 画原型的 8 种方法

实际上 AI 画原型这件事，会打字就能开始上手。最简单的玩法是打开对话框，把要的页面描述出来，几秒就有一张能看的图；最难的能按设计规范批量生成几十个页面。中间是一整段门槛梯度，大多数产品经理连最入门那种都还没碰过。

老王把目前真正能落地的 8 种 AI 画原型方法盘了一遍，从对话框直出 HTML 到 MCP 协议生成设计系统节点，按上手成本和产物形态分了四档。这份内容原本是老王给课程学员的内部材料，这次整理成可分享文档，给所有想入门 AI 画原型但不知道从哪起步的产品经理一份完整路线图。

另外，老王给大家准备了一整套原型库和PRD模板，公众号私信：原型图

让 AI 当你的 HTML 实习生，听你口述页面结构，几分钟敲一个能在浏览器打开的页面。你不需要懂代码，只需要把页面讲清楚。怎么上手，打开 ChatGPT 或 Claude，把页面结构和交互直接描述给 AI，比如左侧导航栏放五个菜单项、右侧三栏看板、顶部搜索框加用户头像。AI 会返回一段单文件 HTML 代码，点击预览就能在浏览器打开。不满意就在对话框追加修改，AI 会增量改不重写。

适合早期方案对比。老王要评估三种导航布局，直接让 AI 出三版 HTML，浏览器三个标签页一开，优劣立刻能看出来。手画三版要半天，Figma 拖三版也要半小时，AI 半分钟搞定。

老王发现这种方法的卡点不在 AI，在描述本身。说做一个登录页 AI 给的是平庸的默认款，说做一个登录页，左半屏是品牌插画区，右半屏顶端是 logo，中间是邮箱密码输入框，底部有第三方登录，才能拿到能用的版本。描述精度直接等于产物精度。

跟方法 1 不同，这个产物是图片不是代码。你描述要什么画面，GPT-Image-2 几十秒后给你一张能直接贴到 PRD 里的位图，中文文字识别几乎不出错。

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

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

GPT-Image-2 在国内产品经理手里被严重低估。很多人还在用 Midjourney 出竞品风格图，Midjourney 出的是艺术海报，GPT-Image-2 出的才是真正能贴到 PRD 里的 UI 概念图，信息密度和文字识别度都更高，产品经理拿来出 PRD 配图、做选题封面草稿，几乎就是直接可用。

把现成截图丢给 GPT，可以让它在原图上改局部，也可以让它反推出代码。区别只在你怎么用、要什么产物。共同的逻辑是，截图自带 90% 的上下文，比你用文字从零描述精度高得多。

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

怎么上手，先截要改的界面，Mac 用 Cmd+Shift+4，Win 用截图工具。再用 PicPick、Snipaste 或者 PowerPoint 在图上画红圈、加文字说明改成什么样。把标注后的图拖进 ChatGPT，选 GPT-5.5 模型，让它按红圈改、其他不动，可以让它一次出三个不同方向版本对比。

适合在已有界面上做局部改造、做 A/B 视觉对比、给设计师演示要改成什么样。

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

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

excalidraw.com 自带的 AI 功能，输入文字描述，直接生成手绘风线框图。手绘风是刻意的视觉降级，所有线条带轻微抖动、字体像手写，目的是声明这只是草图，别杠细节。

还有更方便的方法是，你把它做成一个 skill 可以直接在 coding agent 里边跟大模型对话，让你生成一个 excalidraw的文件。

方法很简单。打开 excalidraw.com，免费无需注册，但 AI 功能要订阅 Excalidraw+。点右下角的 AI 按钮选 Text to Diagram，输入流程描述。AI 出图后在画布上拖动节点、改文字，跟普通画图一样。完成后导出 PNG 或 SVG，也可以直接复制粘贴到 Notion、Obsidian、Confluence，不用导出图片。

适合早期讨论稿、需求评审会的临时配图、PRD 里概念示意位置的占位图。

老王见过一些同学，需求阶段就让设计师出高保真稿，结果一改方向几天工作量打水漂。手绘风的视觉信号在告诉所有看图的人一句话，这只是想法，别杠细节。这种反精致的设计哲学反而能加快讨论。

让 AI 直接吐 drawio 的图纸文件，你拿到这个文件在 drawio 里继续编辑，不用从零开始了。老王自己用 Obsidian 插件流让图和笔记同库管理。

先在 Obsidian 装 Diagrams 社区插件，支持 .drawio 文件原生编辑。让 AI 在 Cursor 或 Claude Code 里写一个 drawio 生成 skill，直接产出 .drawio 文件，落到 Obsidian 库的笔记目录里。

点开自动调起编辑器，改完保存，Markdown 笔记里用双中括号引用即可。不用 Obsidian 也行，把 AI 给的 XML 导入 app.diagrams.net 编辑。

适合后续要长期维护、嵌入笔记里的流程图和架构图。要持续演化的图用 drawio 才划算，drawio 的节点样式和布局调整能力、加上跟笔记同库的版本演化能力，是其他轻量工具给不了的。

老王发现这套流程最大的红利不在画图速度，在图的连续性。一张架构图随着系统演化要改十次，前九次都是 AI 生成新的不带历史，只有 AI 生成加人工编辑的混合模式，才能让一张图的版本演化轨迹被保留下来。

专用 AI 原型 IDE，自带组件库、实时预览、一键部署。跟方法 1 的对话框直出比，持续迭代成本低一档。对话框直出适合一次出一个版本，改一次重出一次；原型 IDE 适合一份原型连续改 20 轮，每次只改增量不重写全文，产物有 git 历史可以回滚。

优先 v0，打开 v0.dev，Vercel 账号登录。首页对话框直接描述要做什么页面，v0 实时生成可点击预览。不满意追加修改，v0 增量改。满意后点 Publish，自动部署到 vercel.app，转 URL 给团队远程评审。

Bolt 在 bolt.new、Lovable 在 lovable.dev，都是同样的对话式入口，Bolt 工程化更强，Lovable 适合做多页面应用。

老王给学员演示 AI 原型流程优先用 v0，因为 v0 有一个杀手特性，生成完直接给一个 vercel.app 的 URL，转发给任何人打开都能用，演示完关掉链接也不用清理。

需要注意的是，这些工具生成的代码看着像生产代码，但默认没有任何后端、没有数据库、没有鉴权，只是前端原型。把它直接推到生产是踩坑的开始，可点击不等于可上线。

Google Stitch 和 Figma 官方的 AI 工具，直接产出 Figma 格式设计稿，可以在 Figma 里继续二次编辑，所有设计师熟悉的图层、组件、Auto Layout 一应俱全。前面六种方法的产物要么是 HTML、要么是图片、要么是手绘草图，设计师拿到要么改不动、要么不愿意接手。Figma 格式直接落到设计师工具里，无缝交给人工继续打磨。

stitch 入口是 stitch.withgoogle.com，Google 账号登录后，在对话框里描述要做的页面或 App 流程，Stitch 直接产出设计稿，导出到 Google ai studio 可以直接写前端代码。

Figma Make 走另一条路，直接在 figma.com 里调右侧 AI Make 面板，生成的节点天然落在 Figma 工作流里，适合已经在 Figma 里重度使用的团队。

前期大家可以用 v0 出概念，后期定方向后用 Stitch 转成 Figma 稿交给设计师精修，这是一条成本最低的接力链路。

Stitch 在多语言支持、移动端适配上做得最顺手，做 App 原型、出多语言版本是它的主战场。Figma Make 优势是组件库背靠 Figma 生态最全，适合已经在 Figma 里重度使用的团队接力。

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

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

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

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

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

不是每个产品经理都要把 8 种方法全装进工具箱，实际上老王学员里使用高频用的就 3 种。

文字 prompt 直出 HTML，日常出方案对比稿，几乎每天用。

GPT Image，出 PRD 配图、出概念图、出竞品风格图，从 Midjourney 完全切到 GPT Image。

drawio 加 AI（Obsidian 插件流，长期维护的架构图，跟笔记一起演化。

剩下 5 种是按需上的工具。需求评审之前用 Excalidraw 出几张草图，看到竞品想复现用截图喂 GPT 反推代码，要给学员演示用 v0 发 URL，要交付给设计师用 Figma Make。

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

扫码咨询老王

定制个人转行产品经理方案