AI 辅助产品需求与原型设计工作流教程

工作流全景图

四个阶段,四种工具,完整覆盖从需求采集到原型交付的全流程

采集层

豆包 App

会议录音转文字,快速清洗原始需求

逻辑层

Google AI Studio

2M token 长窗口,支持分支功能

定义层

Claude Code CLI

本地文件级操作,生成标准 PRD

表现层

UI-UX-Pro-Max

生成可交互 HTML 原型

详细步骤与交互工具

每个阶段都可以直接在页面上操作,自动生成 Prompt 和文件

1

第一阶段:需求采集与清洗

豆包 App 场景:客户/内部需求会议

操作步骤:

1. 会议全程开启豆包录音
2. 会议结束后,使用豆包生成"智能总结"
3. 使用豆包的 Prompt 功能整理出需求清单(见下方模板)

📋 豆包 Prompt 模板

角色设定: 你是一位拥有 10 年经验的资深产品经理,擅长从混乱的会议讨论中提炼出清晰的业务需求。任务背景: 我刚刚参加了一场产品需求讨论会议,会议录音已转为文字。现在需要你帮我从中提取出可落地的功能需求清单。输入材料: - 会议转写文稿(见上文) - 项目背景补充: [在此粘贴: 目标用户、业务场景、技术栈限制等] 输出要求: 1. 内容清洗: 去除所有寒暄、跑题、重复内容,只保留与产品功能相关的需求描述 2. 结构分类: 按以下维度组织需求 - 【核心业务流程】: 端到端的主流程(如: 用户注册→登录→下单→支付) - 【用户端功能】: C端用户可见的功能模块 - 【管理端功能】: B端/运营后台功能 - 【技术需求】: 性能、安全、兼容性等非功能性需求 3. 优先级标注: 用 🔴 P0(必须有) / 🟡 P1(重要) / 🟢 P2(优化项) 标记 4. 痛点标记: 用 ⚠️ 标注客户反复强调或情绪激动时提到的需求 5. 格式规范: 使用 Markdown 无序列表,每个功能一行,格式为 [优先级] 功能名称: 功能描述示例输出格式: ## 核心业务流程 - 🔴 P0 用户注册流程: 支持手机号+验证码注册,需校验手机号真实性 - 🔴 P0 ⚠️ 快速下单: 客户强调必须 3 步内完成下单,不能有繁琐表单 ## 用户端功能 - 🟡 P1 订单列表筛选: 按时间、状态、金额区间筛选 - 🟢 P2 优惠券领取: 支持手动领取和自动推荐

2

第二阶段:Feature List 生成 (交互式)

Google AI Studio → 打开工具

💡 使用说明: 在下方填写豆包整理的内容和项目背景,点击"生成 Prompt"按钮,即可自动生成完整的提示词,复制后粘贴到 Gemini 中使用。

1. 豆包整理的需求清单

2. 项目背景信息

🔍 Prompt 2: 反向推演（查漏补缺）

(在 Gemini 生成 Feature List 后,使用此 Prompt 进行多角色检查)

多角色挑刺检查

角色切换指令: 现在请切换为以下四个角色,分别对上述 Feature List 进行"挑刺": 1. 技术负责人: 从技术实现难度、系统性能、安全风险角度提出 3 个尖锐问题 - 示例: "如果用户在支付过程中网络断开,订单状态如何处理?是否有幂等性设计?" 2. 挑剔的用户: 从操作便捷性、流程合理性角度提出 3 个质疑 - 示例: "为什么修改收货地址要跳转三个页面?能不能在订单确认页直接编辑?" 3. 运营负责人: 从数据分析、营销推广角度提出 2 个需求补充 - 示例: "是否有用户行为埋点?如何追踪营销活动的转化效果?" 4. 测试工程师: 从异常场景覆盖角度提出 2 个边界问题 - 示例: "如果用户重复点击提交按钮会怎样?是否有防重复提交机制?" 输出格式: - 每个角色的问题单独列出 - 每个问题后面给出你的建议解决方案 - 标注出哪些问题需要补充到 Feature List 中

💡 提示: 在 Gemini 中可以使用分支功能创建多个讨论路径,探索不同的解决方案

3

第三阶段:PRD 文档生成 (交互式)

Claude Code CLI 本地终端

💡 使用说明: 将 Gemini 整理好的 Feature List 粘贴到下方,点击下载按钮保存为 MD 文件,然后使用 Claude Code 进行文档生成。

Gemini 生成的 Feature List

🚀 使用 Claude Code 的步骤:

1. 在终端进入下载文件所在的文件夹
2. 运行命令启动 Claude Code: claude
3. 在 Claude Code 中输入以下 Prompt:

Claude Code Prompt

指令: 请读取 feature_list.md,我需要你帮我生成一份标准的 PRD(产品需求文档)。任务: 1. 在当前目录创建 PRD.md 文件(如已存在则读取后更新) 2. 按照以下结构组织文档内容: # [项目名称] 产品需求文档 (PRD) ## 1. 文档信息 - 产品名称: [自动提取] - 文档版本: V1.0 - 编写日期: [当前日期] - 编写人: [我的名字] - 最后更新: [当前日期] ## 2. 项目背景 ### 2.1 业务目标 [根据 Feature List 推断出核心业务目标] ### 2.2 目标用户 [根据功能特性推断出主要用户画像] ### 2.3 核心价值主张 [总结该产品解决的核心问题] ## 3. 产品架构 ### 3.1 功能架构图 [使用 Mermaid mindmap 语法绘制功能模块树] ### 3.2 用户角色定义 | 角色名称 | 角色描述 | 主要权限 | |---------|---------|---------| | 普通用户 | ... | ... | | 管理员 | ... | ... | ## 4. 核心业务流程 [使用 Mermaid flowchart 语法绘制主流程图] ## 5. 详细功能说明 [按模块组织,每个功能包含: 功能描述、前置条件、页面元素、交互逻辑、异常处理] ## 6. 非功能需求 - 性能要求: [接口响应时间、并发用户数等] - 安全要求: [数据加密、权限校验等] - 兼容性要求: [浏览器、设备、操作系统等] ## 7. 迭代规划 | 版本 | 包含功能 | 预计上线时间 | |-----|---------|-------------| | MVP | ... | ... | | V1.1 | ... | ... | 要求: 1. 自动推断项目类型(电商/CRM/内容平台等),选择合适的文档模板 2. Mermaid 图表必须语法正确,可直接在支持 Mermaid 的 Markdown 编辑器中渲染 3. 如有信息不足,标注 [待补充] 占位符,我稍后手动填写 4. 文档完成后自动保存并告诉我文件路径

4

第四阶段:原型设计

UI-UX-Pro-Max Claude Code 插件

📖 插件说明文档:

https://ui.cod.ndjp.net/

(包含详细的安装指南、使用说明、设计风格示例和最佳实践)

📦 本地安装 UI-UX-Pro-Max 插件

如果你需要在本地使用 Claude Code 集成该功能,请按以下步骤安装:

步骤 1: 全局安装 CLI 工具

npm install -g uipro-cli

步骤 2: 进入项目目录

cd /path/to/your/project

步骤 3: 为 Claude Code 安装技能

uipro init --ai claude

其他 AI: cursor, windsurf, antigravity, copilot, kiro

💬 原型生成 Prompt

生成高保真原型

指令: 请使用 UI-UX-Pro-Max 技能,请基于 PRD.md,生成一个高保真可交互原型: 设计要求: 1. 平台类型: [Web 端(桌面) / 移动端(响应式) / 移动端(原生风格)] 2. 设计风格: [选择一个: Glassmorphism / Minimalism / Material Design / Brutalism] 3. 配色方案: [选择一个: Corporate Blue / Vibrant Orange / Dark Mode / 或自定义主色调 #0055FF] 4. 技术栈: 生成单文件 HTML(使用 Tailwind CSS + 原生 JavaScript) 交互需求: • 支持页面间跳转(使用 Tab 切换或路由模拟) • 表单输入需有实时校验反馈 • 按钮点击需有 loading 状态和禁用态 • 列表数据支持滚动加载(模拟数据) • 弹窗、Toast 提示等反馈组件特殊说明: - 请严格参考 PRD.md 中定义的页面元素和字段 - 如果 PRD 中有 Mermaid 流程图,按流程图的步骤生成对应页面 - 模拟数据可以使用 Mock.js 或硬编码 JSON 数据 - 确保在 Chrome 浏览器中可直接打开运行(无需启动服务器) 输出文件: - 主文件名: prototype.html (如: prototype.html) - 如果页面较多,可拆分为多个 HTML 文件,使用标签链接 - 在文件开头添加注释,说明设计思路和交互逻辑完成后请告诉我: 1. 生成的文件路径 2. 如何在浏览器中打开预览 3. 该原型包含哪些页面/功能点

🔄 Prompt 2: 迭代优化

(在浏览器中测试生成的原型后,可使用此 Prompt 进行精细化调整)

基于反馈精细化调整

# 背景: 我已经在浏览器中测试了刚才生成的原型文件 prototype.html,有以下调整需求。 # 修改清单: ## 视觉调整(样式层) - "提交订单"按钮不够显眼 → 改为底部悬浮,背景色改为品牌蓝 #0055FF,圆角 8px - 列表卡片间距太紧凑 → 卡片之间增加 16px 垂直间距,去掉阴影效果 - 顶部导航栏高度太矮 → 从 48px 改为 64px,Logo 左对齐,用户头像右对齐 ## 交互调整(行为层) - 点击"查看详情"时,不要直接跳转页面 → 改为从右侧滑出抽屉(Drawer)组件,动画时间 300ms - 表单提交时,按钮文字改为"提交中...",并显示 loading 转圈图标 - 列表为空时,显示空状态插画和引导文案: "暂无数据,点击右上角添加" ## 功能补充(逻辑层) - 增加"筛选"功能: 顶部添加筛选栏,支持按日期、状态、金额区间筛选(使用下拉菜单和输入框组件) - 增加"搜索"功能: 右上角添加搜索框,输入关键词后实时过滤列表(前端模糊匹配即可) - 增加"批量操作": 列表项左侧添加复选框,底部显示"批量删除"按钮 ## 适配调整(响应式) - 在移动端(屏幕宽度 < 768px)时,顶部导航栏改为汉堡菜单 - 表格在移动端改为卡片列表展示 # 操作要求: - 直接修改 prototype.html 文件(不要创建新文件) - 每完成一项修改,在清单中标注 ✅ - 修改完成后,输出一份"修改日志"(列出改动的文件位置和代码行数) # 注意事项: - 保持现有功能不被破坏 - 动画效果使用 CSS transition,不要使用复杂的 JS 动画库 - 确保修改后代码仍然可以在浏览器中直接打开运行

💡 使用建议: 查看插件说明文档了解完整功能和最佳实践。按照上述步骤安装后,即可在 Claude Code 中使用 UI-UX-Pro-Max 技能快速生成高保真原型。

提效技巧与注意事项

掌握这些技巧,让你的工作流更加流畅高效

善用 Gemini 的分支功能

对于重要决策(如技术方案、功能优先级),可以在 Gemini 中创建多个分支,分别探索不同方案,最后横向对比选出最优解。避免在一条错误路线上越走越远。

使用 Git 管理文档版本

在让 Claude Code 修改文件前,先用 git 提交一个版本,防止 AI 改坏文档无法恢复。


                                    git add . && git commit -m "save: AI 修改前快照"

原型快速预览与迭代

HTML 单文件原型可直接用浏览器打开,方便快速预览和收集反馈。也可以部署到 Vercel/Netlify,分享给团队成员或客户,比静态的 PDF/Figma 更直观。

🌟 进阶案例推荐

从需求到落地的完整工作流

真实案例展示：投教客户互动游戏需求 → 32分钟完成原型验证

亮点案例：AI + Openclaw Agent 实战

本案例展示如何使用 Claude Code + Openclaw Agent 在 32 分钟内完成从需求探索到原型落地的全过程。核心特色是阶段2-5在同一个Agent中连续执行，保持上下文，无需重复输入。

⚡ 99.5% 提效

从 2-3 周缩短到 32 分钟

🤖 单Agent连续

保持上下文，一气呵成

📸 远程可视化

截图预览，无需本地运行

🔍 GitHub搜索

MCP openclaw 自动检索

💡 核心流程： 需求探索（主对话）→ 启动Agent → 搜索项目 → 克隆代码 → 定制主题 → 优化样式 → 推送GitHub → 本地测试

查看完整案例文档

适合场景：

✅ 快速验证需求 ✅ 开源项目改造 ✅ 学习Agent用法 ✅ 远程开发流程

AI 辅助产品需求与
原型设计工作流