01
先定义要验证的关键假设
不要一开始就生成整套复杂系统。先选择一条核心任务，例如“用户能否在三分钟内创建项目并邀请成员”，然后列出完成任务所需的页面和状态。明确哪些内容必须真实，哪些可以使用模拟数据。
把需求写成可观察的用户动作，而不是抽象功能名称。“项目管理”过于宽泛，“从项目列表创建项目，填写名称与截止日期，成功后进入详情页”更适合生成和评审。
02
描述页面结构、数据与交互状态
提示词中说明技术栈、页面区域、组件和交互。例如要求 Vite + React + TypeScript，包含侧边导航、筛选器、项目表格与新建弹窗，并定义加载、空数据、成功和错误状态。视觉参考可以描述密度、配色和氛围，不必堆叠大量风格标签。
通过智页实验室 AI PageLab 生成第一版后，先确认主要流程能否走通，再调整间距、颜色和微动效。交互逻辑与视觉细节分开迭代，通常更容易得到稳定结果。
03
用真实任务进行原型评审
给测试者一个目标，让他自行操作，不要边演示边解释。记录停顿、误点和无法理解的文案。评审重点应包括信息是否找得到、操作结果是否可预期、错误是否能恢复，以及手机或小屏幕下是否仍能完成任务。
把反馈转换成具体修改，例如“保存按钮移动到表单底部并在提交中禁用”，而不是“让体验更高级”。每轮只处理一组相关问题，并保留版本记录，方便比较变化。
04
把原型安全地交给开发
下载工程后先运行安装、类型检查和生产构建，确认依赖与脚本完整。区分演示数据和真实 API，避免把密钥、个人信息或测试账号写入前端代码。为核心组件补充清楚的命名和必要说明。
原型代码是否直接进入生产，需要根据质量评估决定。即使需要重构，它仍能作为可操作的需求说明，帮助设计、产品和开发围绕同一个实际界面讨论。
完成前检查
- 核心用户任务和成功标准明确
- 页面、数据及异常状态已列出
- 主要流程可以实际点击完成
- 已用真实任务进行评审
- 移动端和无障碍基础已检查
- 下载后通过类型检查和生产构建
常见问题
React 原型与静态设计稿有什么区别？
React 原型可以真实运行交互、状态和响应式布局，更适合验证流程；静态稿更适合快速讨论单个视觉画面。
AI 生成的 React 原型可以直接上线吗？
应先完成代码审查、测试、安全配置、真实数据接入和生产构建。简单页面可能只需小幅调整，复杂业务通常还需要工程化完善。