案例 07 · PRD 需求文档一键闪变 React 交互原型

> 📘 本案例有深度详解（含真实提示词与全程调试）：案例07 · PRD 一键闪变 React 交互原型

【关键工具】 Vercel v0

【70% Vibe】

这大概是产品经理最想要的能力：把一份 Markdown 格式的 PRD（产品需求文档）复制粘贴进 v0，它直接吐出一个可点击、带状态模拟的精美 React 原型。不再是静态的线框图，而是真能点、能跳转、能看到交互反馈的"活"原型。拿去给老板演示、给用户测试，说服力天差地别。

【30% Engineering】

70% 的"界面好看"很容易，30% 的"复杂交互逻辑正确"很难。

难点集中在复杂交互状态的逻辑死锁。简单页面 AI 处理得很好，但一旦涉及多级联动表单（选了 A 才显示 B，B 的选项又取决于 C）、条件弹窗（满足某组条件才触发）、跨步骤的状态依赖，纯 AI 生成的代码经常会陷入逻辑打架——某个状态永远无法到达，或者两个条件互相锁死。这时候，你不能再"凭感觉"让 AI 重生成，而要像产品经理梳理需求一样，把交互的状态机理清楚，明确地告诉 AI"在什么状态下、什么操作、应该跳到什么状态"。