用 AI 画原型的 8 种场景和方法，10x 提效

作为在一线干了七年多的产品经理，这一年我几乎没再打开过设计工具画原型。

之前分享过三个画原型的 Skill：image2proto、image2pencil、url2proto。

它们都是从一张截图或一个网址开始的。

但实际工作里，绘制原型的场景五花八门。

有时候只有脑子里的一个想法，有时候是白板上随手画的几个框，有时候是一份刚写完的 PRD。

起点不同，画法也不一样。

我把这一年画原型的方法，按来源整理成了 8 种方法：

1. 对话直接出原型

2. 手绘草图出原型

3. 截图出原型，再改

4. 网址出原型，再改

5. 代码复刻原型，再改

6. PRD 出原型

7. 通过 MCP 画进设计工具（Figma、Pencil、墨刀）

8. 生图模型直接出效果图

这篇里的 Agent，我依旧用豆包工作来演示，用豆包工作画完可以直接给一个公开的链接，还可以把文档和原型放在飞书文档里共享协同。

先回顾下传统画原型的流程：

打开设计工具 → 从组件库拖控件 → 对齐间距 → 标注交互 → 写设计说明 → 导出发给大家 → 评审。

现在的流程变成了：

在豆包工作里给一个描述 → 原型和设计文档一起出来 → 口头描述调细节 → 发一个链接 → 评审。

一个页面从半天压到几分钟。

01 对话直接出原型

这是最简单的一种，什么都不用准备，直接在豆包工作里说你要什么。

比如：

「帮我做一个记账 App 的原型，三个页面：首页显示本月收支和最近账单，记一笔页面能选分类和输入金额，统计页用饼图展示各分类占比。做成单个 HTML，页面之间能跳转。」

几分钟就能拿到一个能点的原型。

不过直接对话出来的原型，设计感一般，经常是一眼就能认出来的 AI 风格：蓝紫渐变、圆角卡片、居中大标题。

我的做法是给豆包工作装一个设计 Skill，出来的东西会好很多：

• frontend-design专门解决 AI 做的页面千篇一律的问题。/anthropics/skills

• ui-ux-pro-max一个设计知识库，管风格、配色、字体搭配和交互规则。/nextlevelbuilder/ui-ux-pro-max-skill

适合脑子里刚冒出一个想法，想先看看长什么样，可以用上面 skill 来做个 demo。

02 手绘草图出原型

很多想法是在白板或者纸上画出来的。

开会的时候大家围着白板画几个框、几根箭头，以前会后还得有人照着重新画一遍。

现在拍张照片丢给豆包工作就行。

发送：根据这种图片，用 image2proto 这个 skill ，来绘制原型

除了截图，也能识别手绘线框。它会认出哪里是标题、哪里是输入框、哪里是按钮，然后补全成一个能交互的 HTML 原型。

画草图的时候有个小技巧：框里直接写上文字，比如「搜索框」「商品列表」「立即购买」，识别会准很多。画得丑没关系，写清楚是什么就行。

适合头脑风暴和需求讨论之后，快速把白板上的东西变成能看的原型。

03 截图出原型，再改

这是我用得最多的一种。

产品经理的日常，大部分不是从零做新产品，而是在现有页面上改一块：加个筛选、改个字段、换个布局。

截一张现有页面，丢给豆包工作，用 image2proto 直接输出一个单 HTML 文件。Tab 能切换、弹窗能开关、筛选栏能展开，CSS 和 JS 都打包在一个文件里。

然后在这个基础上说要改什么。

我拿拼多多的一个页面试过，左边是原图，右边是改完的：

竞品截图也一样。看到别人家哪个页面做得好，截下来，让它复刻，再改成自己的业务。

改完直接生成公开链接发到群里，大家点开就能看。

Skill 地址：spacezephyr/pm-skills/tree/main/pm-image2proto

截图是产品经理手里最现成的素材，用好它，大部分原型需求就解决了。

04 网址出原型，再改

截图只能复刻一屏，网址能拿到的东西多得多。

给 url2proto 一个网址，它会抓取页面结构、设计 token、组件层级，然后用 React 组件重新搭成一个完整的 Next.js + Tailwind CSS 项目。

我拿小红书网页端试过。

它先读完整个页面的结构和样式，自己规划项目架构，初始化项目，然后一个组件一个组件地还原：导航栏、侧边栏、卡片列表。

中间几次样式对不上，它自己对比原页面和本地渲染的差异，调了布局参数。有个组件的响应式断点没处理好，它也自己排查修掉了，全程没问我。

大概跑了半个多小时，出来几十个代码文件，项目结构清晰，组件拆分合理，还附了一份设计文档，写了页面的布局逻辑、组件层级和交互说明。

这种长任务可以放到豆包工作的云电脑上跑，丢过去就去干别的，跑完再回来看。

Skill 地址：spacezephyr/pm-skills/tree/main/pm-url2proto

适合竞品深度复刻、多页面、要持续迭代的新产品原型。

05 代码复刻原型，再改

前面几种都是从看得到的页面出发。如果公司的产品代码就在手边，还有一种更便捷的办法：让 Agent 直接读代码。

做法是在豆包工作里切到本地电脑模式，打开前端代码所在的文件夹，告诉它：

「根据这段代码，把订单列表页复刻成一个独立的 HTML 原型，保留真实的字段、文案和交互，然后在表格上方加一个按状态筛选的下拉框。」

它读的是真实的组件和字段定义，复刻出来的原型跟线上几乎一样，连空状态、加载态、报错提示这些截图看不到的状态都能带上。

改完的原型拿去评审，研发一看就知道要动哪几个组件。

得到这样的原型界面，和生产环境一致，还能以链接形式分享出去。

有两点要注意：

• 代码在本地，用本地电脑模式，代码在 github，可以直接发仓库地址。

• 让它出独立的原型文件，别直接改仓库里的代码，原型和正式开发分开。

适合：在已有产品上做迭代，要求原型和线上高度一致。

代码里有截图看不到的东西，在老产品上改需求，这种方法最省返工。

06 PRD 出原型

有时候顺序是反过来的：需求文档先写完了，再补原型。

这种情况豆包工作连着飞书就很顺。我的做法分三步：

第一步，用 pm-prd-writer 把需求写成结构化的 PRD，存在飞书里。重点是页面清单、每个页面的字段、各种状态和跳转关系。

第二步，在豆包工作里让它读这份飞书文档，按页面清单逐页出原型，每个页面标上对应的 PRD 章节。

第三步，原型的 HTML 文件和设计说明存回飞书，让豆包工作把原型截图并存到文档对应位置。

反过来也行。原型画完了，让它以产品经理的角色反写一份说明文档，页面概述、交互逻辑、字段说明、测试用例都能出，直接写进飞书。

Skill：spacezephyr/pm-skills/tree/main/pm-prd-writer

适合需求已经想清楚，要一次性交付文档和原型。

07 通过 MCP 画进设计工具

前面几种出来的都是 HTML 或者代码。

但有些团队的流程是设计稿要进 Figma、墨刀这类工具里，设计师要接着改，评审要在上面批注。

这时候就要用 MCP，让 Agent 直接操作设计工具。在豆包工作的连接器里手动添加对应的 MCP 就能用。

1 Pencil

Pencil 是前段时间火起来的给 Agent 用的设计工具。

image2pencil 的 skill 就是基于它做的：一张截图进去，输出 Pencil 格式的 .pen 设计文件，同时在画布旁边生成结构化的设计文档。

我用了一张腾讯云的页面截图，跟它说：「把这个列表的字体改成蓝色，同时增加一个按价格筛选的框。」

出来的每一个元素都能在 Pencil 里单独修改，旁边还有一份字段说明、交互规则、视觉规范齐全的设计文档。

AI 先出 80%，人再改 20%。

使用步骤：

1. 安装 Pencil 客户端：在 openpencil.dev 下载。

2. 安装 Pencil 的 MCP，在终端输入：bun add -g @open-pencil/mcp

3. 在豆包工作的连接器里添加这个 MCP，本地电脑模式下就能在 Pencil 里画图。

Skill 地址：spacezephyr/pm-skills/tree/main/pm-image2pencil

2 Figma

Figma 官方的 MCP 现在能往画布上写东西了。

它会先读团队的组件库，再用现有的组件、变量和自动布局搭页面，出来的是真正的 Figma 图层，不是一张平铺的图。

团队已经有设计系统的话，这个最合适。出来的稿子还是要设计师再过一遍。

豆包工作的插件市场有很多可选择的第三方设计工具。

3 墨刀、MasterGO

这类国产的设计工具也有官方的 MCP，能根据描述生成 HTML 原型和设计说明，再导入到你的墨刀空间里接着编辑。配置时需要从墨刀拿一个 token。

国内团队协作多在墨刀上的话，可以走这条路。

这种方式适合要交付可编辑的设计稿、设计师要接手精修、团队评审在设计工具里做。

08 生图模型直接出效果图

最后一种最快，但也最受限。

在豆包里用生图模型，描述页面布局和风格，直接出一张界面效果图。

它出来的视觉效果往往比前面几种都好看，适合在项目早期定视觉方向，或者做提案的时候放几张图给老板看感觉。

在豆包工作里可以对生成的图片进一步编辑。

可以使用分图层、抠图、消除、 扩图、变清晰。这样也能做可以编辑的原型图了。

我一般会把它和第三种接起来用：先出几版效果图，和设计师讨论挑一张满意的，再丢给 image2proto 变成能点的原型。

适合：定视觉风格、做提案配图。

好看的图拿来定方向，真正拿去评审的，还是能点的那一版。

09 怎么选

按起点选就行：

再按场景补几条：

• 会议前 5 分钟要个 Demo → 截图 + image2proto，生成公开链接丢群里

• 需要精细化修改的原型 → image2pencil

• 多页面、要持续迭代的新产品 → url2proto，放云电脑跑

• 在老产品上改需求、要和线上一致 → 代码复刻，用本地电脑模式

文中提到的 PM Skill 都在这个仓库，除了画原型，竞品分析、数据分析、PRD、流程图也都有：

最后

8 种方法，起点各不相同，要解决的问题都一样：把脑子里的想法尽快变成别人能看、能点、能讨论的东西。

一年前画一个弹窗原型要半天，现在不管手上是一个想法、一张草图还是一份 PRD，在豆包工作里几分钟就能出一版，链接一发大家就能看，文件顺手存进飞书。

省下来的时间，拿去想清楚需求本身。

现在网页搜索豆包工作下载电脑端，还可以领取最高60天会员权益。

我是空格，持续分享 AI 产品的思考与实践。