一条主流水线:一句话需求 → AI 拷问 → PRD → DRD + 编程提示词 → Figma Make / Claude 出 demo → 反馈迭代 → 发布到手机 → 视觉换皮。每步都是「你说人话、AI 干活」,你的全部工作是把上一步的产出复制粘贴成下一步的输入。
何时打开:
- 你有一个产品点子(哪怕只有一句话),想在不写代码的前提下做出能在手机上点的原型给老板/用户看
- 你不知道「拿到一句话需求后,第一句 prompt 该怎么打」
- 你想要一套可直接抄的提示词模板(拷问器 / PRD / DRD / 出产品 / 审查迭代)
- 你想搞清 Figma Make 和 Claude 在这条链路里分别该用在哪一步
分工:newtype · AI Coding 实战与工具栈演化 讲「工具栈怎么选、心法是什么」(Cursor / Claude Code / Codex 的取舍);本篇讲「非技术 PM 从零跑一个原型的具体动作 + 提示词」。视觉/交互细节见 AI 时代的 UX 交互范式(传统界面嵌AI/Agentive代理型/对话式/人机协同/超个性化/多模态/趋势 七种),交付阶段见 AI 辅助 UX·交付阶段(用 AI 做排版设计·板式转代码Figma·方案评审·展示AI价值 + will 自制 UX 指标拆解 skill)。
0. 全景:为什么是「思考层 + 编程层」两段
一句话主流程(贯穿全篇):
描述想法 → AI 结构化 → PRD → AI 交互文档(DRD) → 氛围编程提示词 → Figma Make / Claude → 生成产品 → 反馈与迭代
Why 这么拆:把「写 PRD、搭架构、定流程、生成代码片段、讨论交互、出设计初稿」这些思考层的活,交给会自然语言对话的 AI(ChatGPT / Claude / Figma Make);它们是 PM + UX 的最优搭子。但它们不是真正的 vibe coding——真正的 vibe coding(如 Claude Code + Cursor)能读整个代码库、建文件、跑命令、跑测试、debug 修 bug。所以:
- 只想出个能演示、能点的原型 → 思考层工具(本篇主线)就够,不用懂代码。
- 想做能上线、跑 MVP 的真产品 → 还要上 Claude Code,且得补一点研发知识。
翻译:别指望一个工具从想法干到上线。早期出原型用「说话型 AI」,要放量上线再请「编码型 Agent」。这与 newtype · AI Coding 实战与工具栈演化 §2「v0 设计 / Claude 架构 / Cursor 实现,各管一段」是同一条反 pattern。
生活类比:盖房子。Method 1 是先画好「需求说明书 + 户型图 + 装修风格手册」,再让施工队照着盖(文档驱动,质量最稳);你前面想得越清楚,施工就越少返工。
本篇把 Will 的三套并行做法收成一条主流程 + 两条变体:
| 路线 | 入口工具 | 出什么 | 适合 |
|---|---|---|---|
| Method 1(主线) | ChatGPT/Claude 对话 | DRD + 编程提示词 → Figma Make demo | 想要「想清楚再动手」的标准流水线 |
| Method 2 | Claude 对话 | 直接出可运行 HTML → 发手机 | 想跳过 Figma、直接拿到能跑的东西 |
| Method 3 | GPT + Figma 连接 | 自然语言在 Figma 里搭 UI | 重 UI、想用 iOS 液态玻璃等成品设计系统 |
下面按主流程逐步走,变体在对应步骤里标出。
1. 第一步:把「一句话想法」写成结构化输入
Why:AI 生成质量 = 你给的信息量。一句「我想做个聊天 App」会让 AI 全靠猜方向。这一步是把脑子里模糊的东西先压成文字,按你想清楚的程度选模板,不是所有字段都必填。
三档模板(按思路清晰度递增):
档 1 — 想法还很模糊,用最简表达
骨架 A(用户 + 需求 + 困难): 「我想做一款 App,给 [谁] 用,他们需要 [什么] 来 [做什么]。」 例:给想和家人同事保持高频联系的人用,他们需要简单稳定的熟人社交 App 来发消息、建群、分享文件。
骨架 B(If / Then,以用户行为为中心): 「如果用户 [做某动作],那么他们可以 [得到某结果]。」 例:如果用户登录并导入通讯录,那么他们能快速找到熟人并一键发起聊天。
档 2 — 五问式模板(最常用,推荐起步用这个)
1 你想做的产品是干嘛的? (像微信一样聊天 / 帮我整理视频内容)
2 谁会用?在什么情况下用? (小团队远程协作 / 学生刷视频后整理笔记)
3 现在他们怎么解决?有什么不爽? (用微信群 + Notion,很乱)
4 最核心的 1–3 个功能是什么? (聊天、自动整理任务、提醒)
5 有没有「必须有」的特别点?(可选)(AI 自动帮我做 / 不用手动整理)
档 3 — 复杂产品框架(思路已清晰时,信息密度最高)
按四块写,字段可选填:
- 业务约束(Why):产品目标 / 业务目标(转化·留存·收入)/ 当前问题 / 成功指标(必须量化,如 7 日留存 ≥ 25%)
- 用户结构(Who + When):核心用户 / 使用场景(必须具体)/ 用户任务 / 当前行为路径
- 问题定义(Problem):具体问题(可观察)/ 影响(指标·行为)/ 可能原因(假设)
- 解决策略(Strategy):设计目标 / 核心策略(是思路不是功能)/ 为什么有效
- 产品结构(What):功能模块 / 页面结构 / 用户流程 / 状态变化
坑:档 3 字段多,别强行填满。能填档 2 就先填档 2——模糊的地方正是下一步「AI 拷问」要帮你逼出来的,不必现在硬憋。
2. 第二步:让 AI 当「需求拷问器」逼出 Grill Summary
Why:这是唯一一步你「被动回答」的环节。产品定位不清时,直接让 AI 生成等于让它替你拍脑袋。改成让它当审讯官连环追问(用户 / 场景 / 规模 / 边界 / 目标),把你自己都没想清的东西一条条逼出来,最后产出一份「拷问总结(Grill Summary)」。没有这一步,后面全是猜。
可复用提示词骨架(拷问器):
你现在不是生成产品,而是「需求拷问器」(requirements interrogator)。
目标:确保需求被完全澄清,不能有模糊。
行为:
- 连续追问直到问题清晰
- 使用决策树深入
- 覆盖:用户、场景、规模、边界、目标
输出:生成一份完整的需求总结(Grill Summary)。
操作链:贴上面 prompt → 用一段自然语言说你的产品 → 依次回答它抛的每个问题 → 它输出最终 Grill Summary。
收尾:把总结「压成给下一棒的输入」。Grill Summary 往往很长,要根据「下一步喂给谁」生成精简版:
给 Figma Make(出可交互原型): 「把它写成能让 Figma Make coding 出 demo 的描述,保持所有功能和内容清晰,尽量压到最少字数。」
给 Claude(出真实可上线产品): 「把它写成能让 Claude coding 出真实 demo 的描述,保持所有功能和内容清晰,尽量压到最少字数。」
关键区别:Figma Make 出的是「能点的演示」;Claude 调用 API、能在本地浏览器跑出真实可用的程序。下一步喂哪个,这里就生成哪个版本的精简描述。详版(字多)和精简版都留着,PRD 步可二选一。
3. 第三步:把 5 个回答扩写成投资级 PRD
Why:Grill Summary 还停在「用户说了啥」层面。PRD 这一步要把它做产品级推演 + 系统级补全——自动补上用户没讲清的行为、场景、系统结构、数据结构、AI 能力、技术实现,达到「可直接开发」的颗粒度。关键是给 AI 一个高规格角色(产品架构师 + UX + AI 产品设计师 + 技术负责人),它才会按专业 PRD 的密度输出。
可复用提示词骨架(PRD 生成,精简版):
你是「顶级产品架构师 + UX 专家 + AI 产品设计师 + 技术负责人」。
基于我下面 5 个简要回答,生成一份完整、可直接开发的 PRD。
硬要求:
- 不许停在用户输入层 → 必须做产品级推演 + 系统级补全
- 自动补全:用户行为 / 使用场景 / 系统结构 / AI 能力 / 数据结构 / 技术实现
- 输出要达到:投资级 + 架构级 + 可开发级
- 不要解释推理过程,直接输出最终 PRD
输出结构(严格按序):
1 产品哲学(为什么存在 / 现有方案问题 / 范式改变 / 一句话 Slogan)
2 问题陈述(当前真实行为 / 为什么低效 / 典型失败场景,要有画面感)
3 目标用户(核心用户 + 使用动机 + 明确的「非目标用户」)
4 核心用户场景(用「时间线 + 对话 + 状态变化」写,≥3 个:正常 / 异常 / 协作断层)
5 产品定位(一句话 + Slogan + 竞品对比表)
6 核心概念模型(定义核心实体 + 实体关系)
7 数据模型(TypeScript 风格字段 + 状态流 + 依赖关系)
8 UX 架构(导航 / 核心页面 / 页面职责 / 视图逻辑)
9 AI 行为系统(若涉及 AI:触发机制 / 提取生成能力 / 主动行为)
10 协作与同步机制(信息怎么流 / 谁要知道 / 被动·主动·强制同步)
11 技术架构(前端 / 后端 / 数据库 / 实时通信 / AI 调用方式)
12 商业模式(收费 / 成本结构尤其 AI 成本 / 扩展路径)
13 开发路线图(MVP 拆解 + 每阶段交付)
14 设计原则(3–5 条,每条对应实现方式)
输出风格:必须是「已经想清楚的产品」,禁止出现「可能 / 建议 / 假设」,
专业 PRD 语气,信息密度高。
输入(5 个问题的回答):
{{在这里粘贴 §1 五问式的回答}}
坑(Will 强调):AI 出的 PRD 只是初稿和结构参考,别直接套用。一定要对着你的真实产品想法逐条校准——否则需求偏差会被后续每一步放大,最终产出走样。把「改 PRD」当成必做环节,迭代到与真实场景一致再往下走。
4. 第四步:PRD → 多方案 DRD → 编程提示词
这一步分两小步:先从 PRD 长出多个交互方案(DRD,Design Requirement Doc),再把选中的方案转成能直接出产品的编程提示词。
Why 要「多方案」:同一份 PRD 能有完全不同的交互骨架(比如聊天为主 vs 内容流为主)。让 AI 一次发散出 3 个互不重叠的方案,你横向比完再挑一个,比 AI 闷头给一个、你将就用要好得多。
4.1 出三个 DRD
从 PRD 中系统提取功能点、用户路径与页面内容,输出可直接执行的 DRD;
同时围绕产品目标,发散出 3 个思路完全不同、互不重叠的交互框架方案。
每个 DRD 都以完整的产品用户体验设计视角呈现。
→ 输入:PRD;输出:3 套 DRD。读完挑出最契合目标的那套(下面叫「方案 1」)。
4.2 把选中方案转成编程提示词
将方案 1 转为一个可直接生成产品的提示词。
→ 输出:一段「氛围编程提示词(vibe coding prompt)」,这就是喂给 Figma Make / Claude 的最终弹药。
生活类比:DRD 是「三种户型图任你挑」,编程提示词是「把选中那张户型图翻译成施工队能照着干的施工单」。
5. 第五步:出 demo —— Figma Make(可交互演示) / Claude(真实产品)
把 §4.2 的编程提示词喂给生成工具,拿到第一版原型。用哪个,取决于你 §2 收尾时生成的是哪种精简描述:
| 工具 | 产出 | 何时用 |
|---|---|---|
| Figma Make | 多个可交互 demo(能点,偏演示) | 给老板/用户看效果、快速对比交互方案 |
| Claude | 真实可上线产品(调 API,本地浏览器能跑) | 想要能真用、准备往 MVP 走 |
操作:把提示词丢进去 → 它生成原型 → 截图,进入 §6 迭代。Figma Make 通常一次给多个方案 demo,可横向比。
坑:Figma Make 的可交互 demo ≠ 能上线的产品。要真用,把 §2 的精简描述生成「Claude 版」,改走 Claude 出真实程序(再接 §7 发布)。
6. 第六步:反馈迭代 —— 让 AI 看截图自己挑错
Why:生成的第一版总有偏差。别肉眼一个个挑——把截图回灌给 AI,让它对照产品文档自己列「问题 + 改法」,你只做裁判。这一步成本极低、强烈建议做。
6.1 让 AI 出修改意见
按照我们的产品文档,你觉得这个设计图需要怎么调整?
[附:PRD + 当前 UI 截图]
→ 输出:一份修改清单。
6.2 把修改意见再转成编程提示词
将这些解决方案转换为一个可以直接生成产品的提示词。
6.3 回灌迭代:把这条新提示词发给 Figma Make / Claude → 再生成 → 再截图 → 再 Review,循环到满意。也可以上传真实数据、SVG 图标,让 Claude 替换占位素材。
闭环:§5 出 demo → §6 截图挑错 → 回 §5 重生成,是整个流程的「迭代飞轮」。每圈你只动「截图 + 一句反馈」,代码 AI 改。
7. 第七步:发布到手机/电脑运行
Why:原型躺在浏览器里没人能体验。这一步把它变成手机上点得开、像 App 一样的东西,发给老板/用户真机试用。
电脑端运行:直接跟 Claude 说「在真实环境中运行,数据调取真实场景」→ AI 生成一个本地跑的包;跑不起来就截图 + 自然语言问,Claude 边 debug 边给运行步骤。
手机端运行(Netlify Drop 零配置托管):
- Claude 生成一个可运行的 HTML
- 电脑打开 app.netlify.com/drop
- 把 HTML 拖进网页
- 几秒后自动生成链接,如
https://random-name-123.netlify.app(若设了密码记得一并给,如示例My-Drop-Site) - 把链接发到手机微信,点开即用
- 手机 Safari/Chrome 里 分享 → 添加到主屏幕,桌面出现图标,跟 App 一样能点开运行
生活类比:Netlify Drop = 「把做好的网页文件像拖照片一样拖上去,它当场给你一个能发出去的网址」。非技术 PM 不用碰服务器、域名、部署命令。
8. 视觉换皮:ReferoStyle Renew UI(一键改风格)
Why:产品逻辑跑通后,默认样式往往「能用但不好看」。这一步不动功能、只换皮肤——拿现成的设计风格库,让 AI 把 UI 视觉整体升级。属于「锦上添花」步,与主流程解耦,随时可做。
做法:从设计风格站(如 styles.refero.design、getdesign.md)拿一套 ReferoStyle 扩展代码 → 连同你的 vibe coding HTML 一起喂 AI:
运行代码,更新优化 UI。
（输入:Vibe Coding 的 HTML + ReferoStyle 扩展代码 + 这句 prompt）
→ 输出:换好风格的界面。
生活类比:房子盖好了换一套软装风格手册,让装修队照着重新铺一遍——结构不动,观感焕新。
9. 变体方法对照
主流程是 Method 1(文档驱动 → Figma Make)。另两条变体共享「先拷问、先想清楚」的内核,只在出原型的工具和颗粒度上不同:
9.1 Method 2 — 文档驱动直接出 HTML(5 步精简版)
把 §1–§7 压成 5 步,3 步你要对话、2 步 AI 全自动:
| 步 | 你做 | AI 做 |
|---|---|---|
| 1 需求澄清 | 被追问、回答 | 输出需求总结 |
| 2 信息架构(IA) | 确认即可(单页可跳过) | 自动出页面清单 + 跳转关系 + 各页核心模块 |
| 3 视觉决策 | 丢 1–2 张参考图 + 需求总结 | 输出 DESIGN_BRIEF.md + tokens.css(把「感觉」变成颜色/字体/间距规则) |
| 4 生成代码 | 把前 3 步所有文档喂进去 | 照文档一次性出完整可运行代码 |
| 5 审查修改 | 丢截图 | 输出问题清单,你逐条让它改,再截图再 Review |
关键提示词骨架:
需求澄清:「你现在是需求拷问器,不是执行者。我要做的产品是:[一句话]。请追问我,直到这些清晰:目标用户 / 核心场景 / 功能边界(有什么·没什么)/ 成功标准。追问完毕,输出需求总结。」
信息架构:「这是需求总结:[粘贴]。基于此输出信息架构文档:① 页面清单(每页一句话用途)② 页面跳转关系 ③ 各页核心模块(只要模块名)。输出 Markdown。」
视觉决策(唯一要参考图的步):「[上传参考图 1 整体风格 / 参考图 2 组件细节(可选)] 这是需求总结 + 信息架构:[粘贴]。① 从参考图提取视觉决策:想借鉴的(色调/空间感/组件风格)、不想照搬的[你填]、情绪基调[你填,如专业·克制·现代];② 据此生成 Design Tokens:主色/辅色/背景/文字色、字号层级、间距、圆角、阴影。输出
DESIGN_BRIEF.md+tokens.css。」
生成代码:「基于以下所有文档生成前端代码:需求总结[粘贴]/ 信息架构[粘贴]/ Design Brief[粘贴]/ Tokens[粘贴 tokens.css]。要求:严格遵循 tokens 的颜色字体间距;页面结构按 IA 执行;不许发明文档里没有的模块;输出完整可运行代码。」
审查修改:「[上传当前 UI 截图] 设计标准:[粘贴 DESIGN_BRIEF.md 关键部分]。请审查:视觉是否符合 Brief / 信息层级是否清晰 / 间距对齐是否一致 / 有无明显可访问性问题。输出问题清单 + 每条的具体改法。」
Why Method 2 的「Design Tokens」是精髓:把「我想要专业克制的感觉」这种主观词,固化成一组颜色/字号/间距变量;后面每次生成代码都引用同一套 tokens,视觉就自动统一,不会这页蓝那页绿。产出物
phonics-app-v7.html(本区内一个自然拼读 App 成品)即走这条链路。
9.2 Method 3 — GPT + Figma 自然语言搭 UI(重 UI 路线)
适合「想直接用 iOS 26 液态玻璃(Liquid Glass)等成品设计系统、重视觉」的场景。前置:先把 GPT 与 Figma 连接。
| 步 | Prompt(说人话) |
|---|---|
| 1 项目简介 | 「我在做一个 AI 聚合新闻的移动 App。先问我问题,再根据我的回答给一份简洁项目简介。」 |
| 2 功能清单 | 「给我一个可供选择的功能列表。」(勾选要的) |
| 3 流程图 | 「基于这些功能,在 Figma 里为完整 App 创建用户流程图。」 |
| 4 UI 组件 | 「给我构建移动 App 主页的说明,采用液态玻璃 UI,包含所有需要的元素和组件。」→ 去掉提示词头尾,复制给 Figma Make + 选 iOS26 UI Kit library |
| 5 逐页搭建 | 「继续制作搜索页面 / do the same for search page」(一页页扩) |
Method 3 的「UI 组件/kit」是什么:把你的设计系统、组件库、npm 包、设计规范打包成「AI 能读懂的上下文」,让 Figma Make 按你公司的设计规范自动出页面和代码。Figma 官方 Make kits 在迭代,具体配置以官网为准。
坑(Will 实测):Figma Make 生成的液态玻璃效果经常不到位(玻璃感没起作用),需要回 Figma 手动重新调试;细节仍有瑕疵要自己修。AI 出 UI≠ 像素级完美,留出手动收尾的预期。
10. 反 pattern 总结
| ❌ | ✅ |
|---|---|
| 拿到一句话想法直接让 AI「生成产品」 | 先让 AI 当拷问器逼出 Grill Summary,想清楚再动手 |
| 指望一个工具从想法干到上线 | 思考层(说话型 AI)出原型,放量上线再上 Claude Code |
| AI 出的 PRD 直接套用 | PRD 当初稿,对着真实产品逐条校准,否则偏差被放大 |
| 让 AI 闷头给一个交互方案 | 要 3 个互不重叠的 DRD 横向比再挑 |
| 肉眼一条条挑 UI 问题 | 回灌截图让 AI 自己列「问题 + 改法」,你当裁判 |
| 不给参考图就指望视觉统一 | Method 2 先出 Design Tokens,把「感觉」固化成变量复用 |
| 以为 Figma Make 出的 demo 就能上线 | demo = 可交互演示;真实可用要走 Claude 出程序 + 发布 |
| 以为 AI 出的 UI 像素级完美 | 液态玻璃等复杂视觉常需回 Figma 手动收尾 |
| 发布要懂服务器/部署 | Netlify Drop 拖个 HTML 就给链接,加到主屏当 App |
引用与延伸
主要来源:sources/reference/will-ai-note/VibeCoding/(父 intro + 12 篇步骤文档:1 描述想法 / 2 需求拷问 / 3 PRD + Prompt CN·EN / 4 DRD + 编程提示词 / 5 Figma Make / 6 反馈迭代 / AI 驱动设计流程(Method 2)/ 发布到手机 / 项目背景到 UI(Method 3)/ ReferoStyle 换皮)。本区还含 phonics-app-v7.html 成品(Method 2 产物)。
配套 wiki:
- newtype · AI Coding 实战与工具栈演化 — 工具栈选型与心法(Cursor / Claude Code / Codex 怎么选、Ultra think、Plan Mode);本篇是「非技术 PM 跑通原型的具体动作 + 提示词」,那篇是「工具与心法」。
- 王凯 AI Coding 实操：从 Cursor 到 Claude Code 终端工作流 — 另一位作者的 AI Coding 实战,可交叉对照工具观。
- AI 时代的 UX 交互范式(传统界面嵌AI/Agentive代理型/对话式/人机协同/超个性化/多模态/趋势 七种) — 同属 will-ai-note 的交互/视觉细节。
- AI 辅助 UX·交付阶段(用 AI 做排版设计·板式转代码Figma·方案评审·展示AI价值 + will 自制 UX 指标拆解 skill) — 同属 will-ai-note 的交付阶段方法。
History
- 2026-06-03 v1.0 创建 — full_scan 12 篇 VibeCoding 文档 + 父 intro。重组为一条主流程(需求拷问→PRD→DRD+编程提示词→Figma Make/Claude→反馈迭代→发布→视觉换皮)+ 两条变体(Method 2 出 HTML / Method 3 GPT+Figma)。每步给可复用提示词骨架 + Why + 坑。面向非技术 PM。