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

写在最前​

01​

PART​

文字 prompt 直出 HTML​

让 AI 当你的 HTML 实习生，听你口述页面结构，几分钟敲一个能在浏览器打开的页面。你不需要懂代码，只需要把页面讲清楚。​

打开 ChatGPT 或 Claude，把页面结构和交互直接描述给 AI，比如左侧导航栏放五个菜单项、右侧三栏看板、顶部搜索框加用户头像。AI 会返回一段单文件 HTML 代码，点击预览就能在浏览器打开。不满意就在对话框追加修改，AI 会增量改不重写。​

​

​

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

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

​

​

02​

PART​

GPT-Image-2 直接出位图原型​

跟方法 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 配图、做选题封面草稿，几乎就是直接可用。​

​

​

03​

PART​

截图喂 GPT，改图或反推代码​

把现成截图丢给 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 还原配色更准，需要时各跑一版对比。​

​

​

04​

PART​

Excalidraw AI​

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

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

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

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

​

​

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

​

​

05​

PART​

Drawio 加 AI 在 Obsidian 插件流里跑​

让 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 生成加人工编辑的混合模式，才能让一张图的版本演化轨迹被保留下来。​

​

​

06​

PART​

v0、Bolt、Lovable​

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

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

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

​

​

​

适合做可交互可点击的原型，要发 URL 给团队远程评审，要直接拿这个原型上线做小流量测试。​

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

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

​

​

07​

PART​

Stitch、Figma Make​

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 里重度使用的团队接力。​

​

​

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 在设计系统的约束里生成图。学习成本不低，但一旦搭起来，后续效率高得多。​

​

​

09​

PART​

老王在用什么​

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

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

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

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

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

工具箱的建立逻辑不是听说有什么用什么,是先把高频场景的对应方法练到熟,再按低频场景按需补。​

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

​

​