> 关键工具：Vercel v0

> 技术栈阶：低阶（纯自然语言 + Markdown）

> 完整演示：构思 → 创建项目 → 提示词编写 → AI 制作 → 项目检验 → 落地

> 预计耗时：第一个可分享原型约 30~60 分钟

这一篇怎么读

目标产物：把一份 PRD 变成可点击、带状态、能发链接给老板和用户测试的真实原型。我们以"健身打卡 App 的新用户引导 + 首页"为例，完整走一遍。

阶段一 · 构思：先把交互想成"状态机"

v0 的产出质量，几乎完全由你 PRD 的质量决定。AI 不擅长猜你的交互逻辑，但极擅长把"写清楚的逻辑"变成漂亮界面。 所以构思阶段的关键，是把产品想成几个状态和它们之间的跳转：

  • 页面/状态：引导页（3 屏轮播）→ 首页（打卡按钮 + 连续天数 + 本周 7 格）。
  • 核心交互：点"今日打卡" → 今天格子变绿 + 连续天数 +1 + 按钮变"已打卡"且禁用。
  • 成功标准：原型能真的点、状态真的变、且边界正确（不能连点刷天数）。

构思产物：一句话规格

"一个移动端健身打卡原型：引导页只首次出现；首页能打卡，打卡后三处状态联动（格子/天数/按钮），一天只能打一次。"

阶段二 · 创建项目：打开 v0，建第一个工程

  1. 浏览器打开 v0.dev，用 Vercel 账号登录（落地部署时会用到同一账号）。
  2. 在 v0 的对话输入框里新建一个 Chat——v0 的"项目"就是一段对话，每次生成都基于上下文迭代。
  3. 这一步不需要本地装任何东西：v0 在云端生成 React 代码并实时预览。你要做的就是把下一阶段的 PRD 贴进去。

v0 的工作方式

v0 不是"一次成型"，而是"对话式迭代"——你先给完整 PRD，再针对预览里的问题逐条修。所以把对话当成项目本身，每一轮都在上一轮基础上改。

阶段三 · 具体提示词编写：把 PRD 写到没有歧义

提示词就是结构化的 PRD。重点把"一个操作引发多处状态变化"写明白——这正是 v0 最容易漏的地方。

主提示词 = 结构化 PRD（贴进 v0）

做一个"健身打卡"App 的可交互原型，React + Tailwind，移动端尺寸。
严格按下面 PRD 实现，所有交互都要真能点。

【页面与状态】
1. 引导页（首次打开显示）：3 屏轮播介绍卖点，底部"下一步"，
   最后一屏是"开始打卡" → 进入首页。
2. 首页：
   - 顶部"已连续打卡 N 天"（N 初始 0）。
   - 中间一个大的"今日打卡"按钮。
   - 下方本周 7 天格子（已打卡=绿色实心，未打卡=灰色空心）。

【交互逻辑——务必实现】
- 点"今日打卡"：今天格子变绿、连续天数 +1、按钮变"今日已打卡"且不可再点。
- 引导页只首次出现；点过"开始打卡"后再进直接到首页。
- 用 React state 管理，不要用浏览器存储。

【风格】活力年轻，主色渐变青绿，圆角卡片，适当留白。

阶段四 · AI 制作：看 v0 产出了什么（关键片段）

v0 几十秒交出一个相当精致的原型。状态管理的关键片段大致如下：

// 首页状态（v0 生成，关键片段）
const [streak, setStreak] = useState(0);
const [week, setWeek] = useState([false,false,false,false,false,false,false]);
const today = new Date().getDay(); // 0~6

function checkIn() {
  const next = [...week]; next[today] = true;
  setWeek(next);
  setStreak(s => s + 1);
}
// 渲染：7 个格子按 week[i] 上绿/灰；按钮 onClick={checkIn}

预览里点"今日打卡"，格子变绿、天数 +1，看起来很成功。但多点几下就暴露了问题——见下一步。

阶段五 · 项目检验（上）：逐条补上逻辑漏洞

5.1 坑①：边界——按钮能无限连点

打卡后按钮没禁用，能连点把天数刷到 99。PRD 里其实写了"不可再点"，但 AI 漏了。精确指出并给修法：

修正提示词

"今日打卡"按钮有 bug：打卡后还能重复点，天数被刷高。
修复：打卡后用 hasCheckedToday 状态把按钮设 disabled，
文案改"今日已打卡 ✓"、样式变灰，一天只能打一次。

5.2 坑②：需求洞——原型逼出"第二天"没定义

修完连点，又发现没法验证"连续打卡"——原型里没有时间推进。这不是 AI 的错，是 PRD 没定义"第二天"。做原型最大的价值就是逼出需求里没想清楚的洞。

补充提示词

为演示"连续打卡"，加一个仅用于原型的"模拟到第二天"按钮（标注 DEMO）。
点它：今天重置为可打卡、保留已积累的连续天数；
如果昨天没打卡，连续天数归零。正式版会用真实日期。

"昨天没打卡则归零"——这是把"连续"这个含糊词真正定义清楚。

5.3 坑③：条件分支——徽章弹窗只弹一次

加规则：连续满 7 天弹"解锁徽章"。这是"逻辑死锁"高发区，关键是边界精确：

条件弹窗提示词

当连续天数从 6 变到 7 的那一刻，弹一次祝贺弹窗"🎉 解锁'坚持一周'徽章"。
只在"刚好达到 7"那次触发一次，天数已是 7 以上时不要重复弹。

"恰好跨越 7 时触发一次"——若不写清，AI 很可能写成"≥7 就弹"，于是第 8、9 天每次都弹。这种边界精确性，是人必须替 AI 补的逻辑严密度。

阶段五 · 项目检验（下）：按交互严密性清单验收

检验项操作期望
防连点打卡后狂点按钮天数不再增加，按钮已禁用
徽章一次性打到第 7 天，再点第 8 天第 7 天弹一次，第 8 天不弹
连续/中断用 DEMO 按钮模拟连续与跳过天数累加 / 归零都正确
引导页走完引导再次进入直接到首页，不再显示引导

验收要点

原型的验收，重点不是"好不好看"（那是 70%），而是"交互逻辑边界对不对"（那是 30%，AI 最容易漏）。

阶段六 · 落地：发布原型，拿到可分享链接

原型的"落地"是把链接发出去做验证。v0 与 Vercel 无缝衔接：

  1. 在 v0 里点 Publish / Deploy，它把这个原型发布成一个公开可访问的页面（*.vercel.app）。
  2. 把链接发到群里，任何人用手机点开就能交互——这是相比静态线框图的碾压级优势。
  3. 若要继续做成真产品：v0 支持把代码导出 / 同步到一个 Vercel 项目和 GitHub 仓库，后续用 Cursor 等接着开发（把"原型"升级为"工程"）。

原型落地的目的

原型上线不是为了"完成"，而是为了尽早拿到真实反馈。发给 5 个人测，你会看到他们卡在你没想到的地方——这些才是 PRD 下一版要改的。

30% 复盘：人类到底守住了什么

v0 交付的"精美界面 + 基本能点"是 70%。人类补上的 30%，全是交互逻辑的严密性：

30% 工程点人类做了什么不做会怎样
边界状态打卡后禁用按钮、一天一次天数能无限连点刷高
需求补全逼出"第二天/连续"的精确定义演示不了核心卖点
条件触发徽章"恰好达到 7 触发一次"每次打卡都弹，体验崩坏

核心教训：界面好看靠 AI，逻辑正确靠你把 PRD 写到没有歧义。 PM 在 Vibe Coding 时代最值钱的能力，不是会用 v0，而是能把交互状态机想清楚、写明白——这恰是好 PM 的本分。

可复用心法与提示词模板

带得走的三条

  1. 把 PRD 写成状态机：列清"有哪些状态、每个操作触发什么跳转"。
  2. 视觉可凭氛围，逻辑必须显式：风格可感性，交互必须精确到边界。
  3. 善用原型逼出需求漏洞：做不出来处，往往是你没想清楚处。

通用"PRD → 交互原型"提示词骨架：

做一个 <产品> 的可交互原型，React+Tailwind，<端>尺寸，交互都要真能点。
【页面与状态】逐一列出页面及每个状态长什么样。
【交互逻辑】用"点击X → A变B、同时C变D、跳转E"的句式写清每个操作后果，
            尤其写明边界（不可重复、恰好达到、为空时）。
【状态管理】用 React state，不要浏览器存储。
【风格】感性描述视觉气质即可。