交互原型

先定义核心流程

不要从屏幕列表开始。先写用户要完成的任务，例如「选择一本书，开始阅读，调整字号，查看统计」。每个屏幕和控件都应服务这条流程。

选择交付架构

• 单文件 HTML：易分享、易截图、适合 3-6 屏演示。
• React 项目：适合较多状态、组件复用和多页面流程。
• 真实产品代码：只有当任务明确要求进入生产工程时使用。

使用设备框架

仓库提供 ios_frame.jsx、android_frame.jsx、macos_window.jsx 与 browser_window.jsx。设备框架应帮助观众理解媒介，不要抢过产品内容。

状态设计

至少覆盖：初始、主要操作后、空状态、错误或限制状态。原型的价值在于体验流程，不只是展示成功页面。

图片和内容

使用真实图片、公共领域素材或明确占位。不要伪造看似真实的用户数据、交易记录或产品指标。

验证

python3 scripts/verify.py prototype.html \
  --viewports 390x844,1440x900 \
  --output ./screenshots

检查键盘焦点、点击热区、返回路径、视口裁切与控制台错误。

深入阅读：React 项目设置、验证流程。