夜雨聆风📌 这篇文章能帮你解决什么问题？
如果你也遇到过以下情况：
• 脑子里有个想法，但画出来的原型跟想的不一样
• 用Axure画原型，一个导入功能没俩小时下不来
• 老板说：下午开会先看看效果"，但你连原型框架都没搭好
• 设计师说：你这个原型太粗糙，我没法直接用来设计"
这篇文章里的方法，能帮你把原型设计的时间从"天"压缩到"小时"甚至"分钟"——而且产出的原型，从"能看"变成"能点能交互"。
这是「B端产品AI实战手册」第4课，也是46产品体系第二阶段（原型设计）的AI升级版。
先说一个我上周刚遇到的场景：
老板下午2点丢给我一句话：
"那个导入功能，你画个原型，明天的会我们一起看看效果。"
我思考了下，要是过去——
打开Axure → 拖组件 → 调交互 → 画字段映射界面 → 做错误提示 → 做导入进度 → 做结果页面……
没俩小时下不来。
但现在我用AI——
10分钟，出了一个能点的HTML原型。
第二天的会上，我不是拿着静态截图在讲，而是直接把HTML文件发给大家，每个人浏览器打开，自己点、自己试。
老板说了一句话："这个比上次那个Axure画的清楚多了，能点的和不能点的，一眼就能看出来。"
这件事让我意识到一个根本性的变化：
原型设计这件事，
从"产品经理画给设计师看"，
正在变成"产品经理用AI直接出可交互Demo，给所有人看"。
这一个变化，会重新定义"原型设计"在产品工作流里的位置！下面我把方法都交给大家
✻ ✻ ✻
第一章：原型设计这件事，AI改变了什么？
先说结论：AI没有改变"原型的目的"，但改变了"原型的形态"
原型设计的目的，从来没变过——
帮你自己想清楚（画的过程就是思考的过程） 帮团队对齐理解（大家看的是同一个东西） 帮研发评估工作量（有原型，估时更准确）
但AI出现之后，原型的形态，发生了五个根本变化：
| 交付物形态 | ||
| 制作时间 | 复杂页面：1-2天 | 复杂页面：1-2小时 |
| 修改成本 | ||
| 沟通效率 | ||
| 交付边界 |
这些变化，我发现：
AI原型设计的核心价值，
不是"画得快"——
而是"想法到验证"的距离，被压缩到了极致。
过去传统流程里，一个想法要经历：
想法 → 纸面草图 → Axure/Figma稿 → 评审会演示 → 开发实现
每一步之间，都有"翻译损耗"——你脑子里的想法，在纸面上变形一次，在Axure里再变形一次，讲给研发听时又变形一次。
AI辅助原型设计，把这条路压缩成了：
想法 → 截图/描述 → AI生成可交互Demo → 直接给研发/用户测试
少了两步"翻译"，想法的保真度就高了两级。
✻ ✻ ✻
第二章：AI画原型的4种工具路径
讲完"为什么要用AI画原型"，来讲"用什么工具画"。
目前真正能落地的AI原型工具，我按输出物形态分成4类——每种我都附上一个我细琢的Prompt模板，你可以直接复制去用。
路径1：截图→HTML原型（最快，10分钟出Demo）
核心工具：ClaudeCode/Cursor、国内Trae/WorkBuddy等这类AI IDE工具
（速度最快、可交互、无需设计基础）
工作流：截图（哪怕是手绘草图）→ 发给AI → AI生成单文件HTML → 浏览器打开即可交互
能做什么：Tab切换、弹窗开关、筛选展开、表单输入，都是真实交互（不是图片热区）
适合场景：会前快速出Demo、内部评审用可交互原型、给客户看产品概念
局限性：样式精度不如Figma稿，不适合直接交付设计师
我的Prompt模板：
请基于我提供的截图（或下面的详细描述），生成一个单文件HTML原型。 【页面需求描述】 （这里填写你的页面内容，例如：） 这是一个B端SaaS系统的"批量导入用户"功能原型，包含以下页面/状态： 1. 用户列表页：顶部有搜索框和"新建""导入"按钮，下方是用户表格 2. 导入弹窗：拖拽上传区域，支持点击选择文件，显示文件名和大小 3. 字段映射页：左侧显示Excel列名，右侧为系统字段下拉框，常用字段自动匹配 4. 导入进度页：进度条 + 已导入/总数显示 + 预计剩余时间 5. 导入结果页：成功N条/失败M条，失败的可下载错误报告 【样式要求】 - 使用Tailwind CSS CDN，确保样式美观、现代 - 主色调：#4F7CFF（蓝色系，企业级SaaS风格） - 字体：系统默认无衬线字体 - 圆角：8px（按钮、输入框、弹窗） - 阴影：轻微投影（类似shadow-sm） 【交互要求】 - Tab切换：真实可用，切换时有内容过渡 - 弹窗开关：点击按钮弹出，点击遮罩或X按钮关闭 - 表单验证：空值提交时红色提示，2秒后自动消失 - 进度更新：用setInterval模拟，每500ms更新一次进度 - 所有交互用原生JS实现，不依赖外部JS库（确保单文件可离线使用） 【输出要求】 请直接输出完整HTML代码（包含<style>和<script>），我可以保存为.html文件后在浏览器打开。 代码要完整、可直接运行，不要省略任何部分。
使用这个Prompt的关键：
"页面需求描述"这部分，越具体越好。如果你有截图，先发截图，再把这段描述补充进去——AI会先"看懂"截图，再用你的描述做补充，准确率比纯文字高很多。
路径2：截图→Figma稿（设计师可接力，精度最高）
核心工具：Figma Make
（精度高、设计师可接力）
工作流：在Figma里调出AI Make面板 → 描述页面需求或粘贴截图 → AI在Figma文档里直接生成可编辑的Frame
能做什么：生成的是真正的Figma组件，设计师可以直接在上面调整、接入设计系统
适合场景：已经有Figma设计系统的团队、需要设计师精修原型的场景
我的Prompt模板：
请用Figma Make帮我生成一个"用户管理"模块的完整设计稿。 【页面结构】 1. 用户列表页（/users） - 顶部导航：面包屑"首页 > 用户管理" - 操作栏：搜索框（支持按姓名/手机号搜索）、"新建用户"按钮（主按钮）、"批量导入"按钮（次按钮） - 表格列：姓名、手机号、角色、状态（启用/禁用）、操作（编辑/详情/更多） - 分页：每页20条，显示"共XX条，第X页" 2. 新建用户弹窗 - 字段：姓名（必填）、手机号（必填，格式校验）、邮箱、角色（下拉选择）、状态（开关） - 底部："取消"和"确定"按钮 - 错误提示：红色文字，出现在对应字段下方 3. 用户详情抽屉（从右侧滑出） - 显示用户所有字段（只读模式） - 顶部有"编辑"按钮，点击后变为可编辑状态 【设计系统要求】 - 主色：#4F7CFF - 辅助色：#52C41A（成功）、#FF4D4F（错误）、#FFA940（警告） - 字体：Inter（英文）/ 思源黑体（中文），正文14px - 圆角：Button 6px，Input 4px，Card 8px - 间距：组件之间16px，组内字段之间12px 【输出要求】 请在Figma当前Page里生成，每个页面一个Frame，命名规范为"页面名 - 状态"（例如："用户列表 - 默认"、"新建用户 - 填写中"）。 生成后，我会手动接入团队的设计系统Token。
使用这个Prompt的关键：
Figma Make对"设计系统要求"这部分非常敏感。如果你团队已经有设计系统，把Token（颜色、字体、间距）直接写进去，AI生成的稿子会非常接近最终设计效果，设计师只需要微调。
路径3：网址→完整前端项目（最硬核，直接出工程化代码）
核心工具：ClaudeCode/Cursor、国内Trae/WorkBuddy等这类AI IDE工具
（出代码、工程化、适合新产品起步）
工作流：给AI一个参考网址 → AI自己抓页面结构、设计Token、组件层级 → 生成完整的Next.js + Tailwind本地项目
能做什么：AI自己规划项目架构、初始化项目、配置Tailwind、拆组件还原，中间样式对不上会自己对比修正
适合场景：新产品原型起步、需要能真正跑起来的Demo（不是截图）、多页面大型项目
我的Prompt模板：
请用url2proto的方式，帮我生成一个完整的"B端用户管理"前端项目。 【参考网址】 （填写一个和你目标设计接近的已上线产品网址，例如：） https://example-saas-user-management.vercel.app/ 【请AI先分析参考网址的以下信息，再开始生成代码】 1. 整体页面结构：左侧导航、顶部Header、主内容区的布局方式 2. 设计Token：主色、辅助色、字体、圆角、阴影风格 3. 组件层级：Button、Input、Table、Modal等组件的封装方式 4. 响应式策略：在平板和手机上的布局变化 【生成要求】 基于以上分析，生成完整的Next.js + Tailwind CSS项目，包含： 1. 用户列表页（app/users/page.tsx） - 表格展示用户数据（用mock数据，10条） - 搜索框（按姓名搜索） - "新建用户"按钮，点击弹出Modal - 表格操作列：编辑（打开Drawer）、删除（确认弹窗） 2. 新建/编辑用户Modal（components/UserModal.tsx） - 表单字段：姓名、手机号、邮箱、角色（Select）、状态（Switch） - 表单验证：使用react-hook-form 3. 用户详情Drawer（components/UserDrawer.tsx） - 展示用户所有字段（只读） - 顶部"编辑"按钮，点击后Drawer内容变为可编辑表单 【项目工程化要求】 - 使用Next.js App Router（app/目录结构） - Tailwind CSS配置：在tailwind.config.ts里定义主色为#4F7CFF - TypeScript类型：在types/user.ts里定义User接口 - 组件拆分：每个独立功能模块一个文件，放在components/目录下 - Mock数据：放在lib/mock-data.ts里，导出users数组 【输出要求】 请按文件逐一输出代码，每个文件用"// === 文件路径 ==="标注。 确保我可以把代码直接复制粘贴到对应文件里，然后npm run dev能正常运行。
使用这个Prompt的关键：
路径4的核心是"AI自己看参考网址，自己提炼设计系统，再生成代码"。所以参考网址的质量直接决定生成结果的质量。
建议：找一个和设计目标接近的已上线产品，把网址贴进去，生成效果会比纯文字描述好很多。
路径4：自然语言→v0/Bolt.new可部署Demo（最无门槛）
核心工具：v0.dev / Bolt.new / Lovable
（无门槛、在线即用、可部署分享）
工作流：打开v0.dev → 用自然语言描述页面需求 → AI生成可交互预览 → 一键部署到Vercel获取分享链接
能做什么：生成完直接给一个.vercel.app的URL，转发给任何人打开都能用，演示完关掉链接不用清理
注意：v0/Bolt生成的是Demo级产品，不适合直接上线，但非常适合想法验证和原型演示
我的Prompt模板：
请帮我用Next.js + Tailwind CSS生成一个"批量导入用户"功能的完整可交互Demo，部署后可正常访问。 【功能需求（请逐一实现）】 1. 用户列表页（默认展示） - 表格展示10条mock用户数据（姓名、手机号、角色、状态） - 顶部有搜索框和"导入"按钮 - 点击"导入"按钮，弹出导入Modal 2. 导入Modal（第一步：上传文件） - 拖拽上传区域（支持点击选择文件） - 只接受.xlsx和.csv文件 - 上传成功后，显示文件名和"下一步"按钮 - 上传失败（非Excel文件），红色提示"仅支持.xlsx/.csv格式" 3. 导入Modal（第二步：字段映射） - 左侧显示Excel列名（用mock数据：姓名、手机号、邮箱、部门） - 右侧是系统字段下拉框（姓名、手机号、邮箱、所属部门、状态） - 常用字段自动匹配（姓名→姓名，手机号→手机号） - 底部"上一步"和"开始导入"按钮 4. 导入进度页 - 进度条（用setInterval模拟，从0%到100%，每300ms更新） - 显示"正在导入第X条，共Y条" - 完成后自动跳转到结果页 5. 导入结果页 - 成功N条，失败M条 - 失败的，显示错误原因（mock：第3行"手机号格式错误"，第7行"邮箱已存在"） - "下载错误报告"按钮（生成一个包含错误信息的mock Excel文件） 【样式要求】 - 使用Tailwind CSS CDN（在HTML的<head>里引入） - 主色调：#4F7CFF - 组件风格：shadcn/ui风格（圆角、轻微阴影、简洁） - 响应式：在手机上表格可横向滚动 【技术要求】 - 不需要真实后端，所有数据用前端state管理 - 用 Next.js App Router（如果是v0，直接生成可部署的项目） - 生成后提供完整的文件结构说明，我可以直接在v0里预览并一键部署 【输出要求】 请生成完整可运行的代码，我可以直接在v0.dev里粘贴这个Prompt并获取结果。
使用这个Prompt的关键：
v0/Bolt这类工具，在你明确告诉它"前端state管理""不需要真实后端""shadcn/ui风格"这些技术细节时，生成结果的可用性会大幅提升。
如果你不需要Next.js，把技术栈要求改成"用纯HTML+CSS+JS生成单文件"即可。
4种路径的选型建议
我的选型建议：
如果你现在急需一个Demo去开会 → 路径1
如果你有设计师配合，需要高精度稿子 → 路径2
如果你在做新产品，需要能跑起来的多页面Demo → 路径3
如果你没有代码基础，只想快速验证一个想法 → 路径4
✻ ✻ ✻
第三章：AI画原型的实战技巧
前面讲了方法和技巧，这一章讲实战技巧。
技巧1：AI画原型最不可控的是"局部微调"——用两个方法解决
痛点：
用AI生成一个页面，整体看起来不错，但有一个按钮位置不对、一个字段名称要改、一个颜色要调整。
你跟AI说"把按钮移到右边"，结果AI把整页布局都重新生成了一遍，原来对的地方也变错了。
这是用AI画原型最高频的坑——改一处，乱整页。
解决方法一：截图圈改法
不要只用文字描述修改，而是：
把AI生成的原型截图 用微信/QQ的截图工具，在截图上圈出要改的地方 把截图发给AI，同时说："只改我圈出来的地方，其他保持不变"
这个方法，能大幅降低AI"过度修改"的概率。
解决方法二：先选中元素再修改法
如果你用的是Claude Code/Cursor这类代码型工具：
先在生成的代码里，找到对应元素的代码段 把这段代码单独复制给AI，说："只修改这段代码里的XXX，其他逻辑不变" 让AI输出修改后的完整代码段，你手动替换回去
这个方法，比让AI重新生成整页要可控得多。
技巧2：让AI生成"带示例的Excel下载模板"
传统做法：
画一个"下载模板"按钮就完了。研发不知道模板里应该有什么字段、什么格式。
AI做法：
让AI直接生成一个带示例数据、字段说明、格式提示的Excel文件。
Prompt里加一句：
"模板文件要包含3行示例数据，加一个Sheet叫'填表说明'，标出必填项和格式要求"
这个技巧的好处是：
研发拿到Excel模板，直接知道要支持什么格式 用户拿到模板，看示例数据就知道怎么填 你不需要在PRD里用文字描述"模板格式"，一个Excel文件全说清楚了
技巧3：让AI自动画"字段映射界面"
这个是B端产品里非常常见、但用Axure画起来很麻烦的一个界面。
场景：
用户上传一个Excel文件后，需要弹出一个"字段映射"界面——左边是用户文件里的字段，右边是系统里的字段，让用户手动建立对应关系。
传统Axure做法：
一个个拖下拉框，调半天对齐，交互逻辑还要自己想。
AI做法：
一句话让AI生成"左侧用户字段、右侧系统字段"的映射界面，还能自动识别常用匹配。
Prompt示例：
上传文件后，弹出字段映射弹窗，自动匹配'姓名'对应'员工姓名'，用户可手动调整
技巧4：让AI做"按行标注错误"的导入结果页面
导入功能做完，错误处理是最容易被忽略、但用户最容易吐槽的部分。
传统做法：画个红框提示就完了。
AI做法：让AI生成"错误报告下载"功能——
导出的Excel里，错误行标红 旁边注明错误原因（如："工资不能为空"、"日期格式错误"） 用户下载后，改完可以直接重新上传
Prompt关键词：
"导入失败时，提供下载错误报告，报告里第N行标红并注明具体错误原因"
技巧5：让AI做"后台进度轮询"等存在你想法，但原型难实现的的真实交互效果
案例：大文件导入，不能让用户傻等着。
传统做法：画个进度条，但交互逻辑得自己想。
AI做法：让AI生成带真实进度更新的效果——
Prompt关键词：
导入按钮，页面显示实时进度条（如"正在导入 50/1000"）， 完成后弹出浏览器通知，失败时显示失败原因并提供重试入口。
AI生成的进度效果，通常包含：
前端轮询后端导入进度的完整逻辑 进度条动画 完成/失败的不同状态处理
这些逻辑，你如果用Axure画，根本画不出来（只能画个静态进度条）——但AI生成的HTML原型里，它们是真实可运行的。
✻ ✻ ✻
第四章：真实案例——用AI从0到1做一个"导入功能"的完整原型
前面讲了方法和技巧，如果你还有些犹豫，那现在我们一起用一个完整案例，把整个流程跑一遍。（可先收藏后实践）
📋 案例：B端SaaS系统的"批量导入用户"功能原型
需求背景：系统需要支持管理员批量导入用户，包含Excel上传、字段映射、错误反馈、进度展示、部分成功处理
时间限制：2小时内产出可交互原型（传统Axure做法需要1-2天）
产出要求：HTML可交互原型 + 配套PRD初稿
第一步：用AI生成原型框架（15分钟）
我先给AI发了一段需求描述：
请帮我生成一个"批量导入用户"功能的完整HTML原型。 【页面结构】 1. 用户列表页：顶部有"导入"按钮，点击后弹出导入弹窗 2. 导入弹窗：支持拖拽上传Excel文件，显示上传进度 3. 字段映射页：上传完成后，自动匹配常用字段，用户可手动调整 4. 导入进度页：显示实时导入进度（模拟后端处理） 5. 导入结果页：显示成功/失败统计，失败的可下载错误报告 【样式要求】 - 企业级SaaS风格，主色调用#4F7CFF（蓝色） - 使用Tailwind CSS - 所有交互真实可用（Tab切换、弹窗、进度更新） 请直接输出完整的单文件HTML代码。
AI输出了一个
点击"导入"按钮 → 弹窗正常弹出 ✅ 拖拽上传文件 → 显示上传进度 ✅ 上传完成后 → 自动跳到字段映射界面 ✅ 字段映射界面 → 左侧用户字段、右侧系统字段，常用字段已自动匹配 ✅
整个过程，从发Prompt到拿到可用的HTML文件，约15分钟。
第二步：用"截图圈改法"做局部调整（10分钟）
AI第一版输出后，有几处需要微调：
字段映射界面的"确认映射"按钮，位置不对（在左侧，应该在右侧） 错误报告里的"下载"按钮，颜色不够醒目 导入进度页的进度条，颜色要用橙色（对应"进行中"状态）
我用的是"截图圈改法"——
把HTML截图 → 用微信截图圈出要改的地方 → 发给AI → 说"只改圈出来的地方，其他不变"
AI输出了调整后的代码，这三处修改，总共花了约10分钟。
第三步：让AI同步生成PRD初稿（10分钟）
原型确定后，我让AI基于HTML原型，直接生成对应的PRD文档：
请基于刚才生成的"批量导入用户"HTML原型，撰写对应的PRD（产品需求文档）初稿。 【PRD章节要求】 1. 需求背景与价值 2. 目标用户与使用场景 3. 功能详细描述（按页面模块分节，包含正常流程和异常流程） 4. 验收标准（Given-When-Then格式，每条可验证） 5. 非功能需求（文件大小限制、支持格式、并发处理等） 【特别注意】 异常流程必须单独列出，不能省略。 包含以下异常场景： - 上传文件格式不正确 - 上传文件超过大小限制 - 字段映射后，部分行数据校验失败 - 导入过程中用户关闭页面
AI输出的PRD初稿，约2000字，覆盖了正常流程和5种异常流程。
我花了约
这个案例最终时间统计
| 节省85% | |||
| 节省75% | |||
| 合计 | 1-2天 | 约1.5小时 | 节省80%+ |
✻ ✻ ✻
第五章：AI辅助原型设计的2个"坑"——我替你先排了
前面讲的都是"能用AI做什么"，这一章讲什么情况下AI做不好。
坑1：AI生成的原型，"看起来很专业"，但可能漏掉关键的业务逻辑
这是最常见、也最隐蔽的一个坑。
AI训练数据里，有大量"通用后台界面"的代码片段，所以它生成的原型，视觉上非常专业——
该有的按钮都有，该有的列表都有，该有的表单都有。
但你仔细一看，会发现：
- 权限逻辑缺失
：没有区分管理员和普通用户能看到什么 - 数据边界缺失
：没有处理"数据为空时"的展示逻辑 - 业务规则缺失
：特定字段的特定校验规则（如：员工工号必须是数字且唯一），AI不会主动加
避坑方法：
在给AI的Prompt里，必须明确列出"业务约束条件"——
【重要：业务约束条件（AI必须严格遵守）】 - 只有超级管理员能看到"导入"按钮，普通管理员只能导出 - 员工工号字段：必须是数字，长度8位，全局唯一 - 导入时，工号重复的记录，默认为"更新"操作（不是新增） - 数据为空时，列表显示"暂无数据"并引导用户新增
坑2：AI不知道你的"设计系统"，出的原型跟你们产品风格不一致
如果你的产品已经有成熟的设计系统，直接用AI生成原型，出来的效果大概率跟你们现有产品风格不一致。
AI默认用的是"通用企业SaaS风格"——蓝色主色调、白色背景、标准圆角。
但你们的产品可能是：橙色主色、深色侧边栏、特定字体……
避坑方法：
在Prompt里附上你们的设计规范，或者：
给AI一个你们产品现有页面的截图，让它"参考这个风格" 在Prompt里明确写："配色方案参考：主色#XXX、辅色#XXX、背景色#XXX" 如果你们有Figma设计系统，用Figma Make路径，让它直接在你的设计系统上生成
✻ ✻ ✻
结语：原型设计这件事，AI改变的是"从想法到被理解"的距离
写完这一课，我想回到原型设计的本质：
原型不是"最终产出物"——
原型是"沟通工具"。
它的价值，不在于它画得有多精美，
而在于它能不能让看你原型的人，准确理解你的想法。
AI辅助原型设计，让这件事变得：
- 更快：想法到可交互Demo，从天压缩到分钟
- 更准：可交互Demo比静态截图，理解效率高得多
- 更低门槛：不需要会Axure、不需要会Figma，截图+描述就能出原型
但记住：
AI生成的原型，永远只是"第一版"。
真正的业务细节、权限逻辑、异常流程，还是需要你——人类产品经理——一笔一笔补上去的。
这也是我在第一课里说的：
AI不会替代产品经理，但会用AI的产品经理，会替代不会用AI的产品经理。
下一课，我们会聊一个更"硬核"的话题：
AI辅助产品文档写作——BRD/PRD/DRD，怎么用AI写得又快又好？
这一课里提到的所有Prompt模板和技巧，我已经整理成了一个工具包，关注公众号并在后台回复"原型设计AI"，我把它发给你。
如果有所启发，感谢点赞转发。
📌 关注公众号，不错过后续内容
