展开本页目录
开始前准备什么
- 下载独立练习包，使用 Node.js 20+；参考源码没有 npm 第三方依赖，React 库仅 W03/W11 随包提供。
- 在自己的独立目录中运行；所有业务和身份均为虚构教学数据。
- 目标 App、模型、账号授权与外部发布需按本页真实边界另行操作；不使用真实客户资料练习。
- 先定义三段明确的交互任务
- 在原创参考中完成同一操作顺序
- 录制输入时保留变化前后
- 确认录屏模式实际模型条件
- 对生成产物重新操作三种状态
- 保留空结果和切换恢复负例
- 保存原录屏、实际输出和验收表
独立原创源码、输入、逐步说明、运行脚本和真实本地检查；不含账号密钥或模型权重。
包含七步具体操作、来源与本题未执行范围。
真实执行本题纯函数/结构断言，不代替目标 App、模型、权限或发布测试。
离线 npm ci、check、build 与 HTTP 内容类型回读结果。
1. 先定义三段明确的交互任务
初始有 3 场活动；点“设计”后仅剩 2 场，展开“街角海报”应出现地点与说明，再切到“我的报名”显示 1 条独立记录。events.json 与 storyboard.json 记录输入和状态，不只要求“还原得像”。
bash
node verify.mjs
2. 在原创参考中完成同一操作顺序
打开 index.html，按脚本筛选、展开、切换，再返回全部活动。界面使用原生按钮与 details，键盘可操作；图中明确是本站手写参考，不是 screenshot-to-code 界面。
bash
npm run dev3. 录制输入时保留变化前后
自行录屏应让鼠标动作、筛选结果和展开内容可辨，避免只截到过渡动画。附上 storyboard.json 的文字说明；仅有三帧 PNG 不是连续录屏，不能把静态帧集合改名 MP4 充作输入。
bash
cat storyboard.json4. 确认录屏模式实际模型条件
官方仓库将录屏转交互原型列为独立能力，当前说明使用 Gemini。截图转 React 的 API 兼容配置不自动适用于视频；上传前核对所选工具版本、密钥、模型与格式。
5. 对生成产物重新操作三种状态
获得真实产物后依次检查：筛选后 2 条、展开地点文本、报名视图 1 条。不要只对比首屏图片，按钮必须真的改变可见数据，且返回时没有遗失状态。
6. 保留空结果和切换恢复负例
logic.mjs 的纯状态函数测试未知类别返回空、其他视图恢复、展开 ID 不属于当前列表时清除。本题 Node 实测这些逻辑；浏览器仍要检查焦点、展开行为与移动端布局。
bash
node verify.mjs
7. 保存原录屏、实际输出和验收表
本站包仅含手写参考和脚本，没有声称执行过录屏生成。你运行模型后分目录保存 input-video、generated 和 actual-checks，并记录未还原行为；apizt 通用接口入口不承诺托管此 Gemini 视频工作流。
bash
node verify.mjs
来自 verification.json、clean-room.json 的真实本地检查排版；仅证明本站参考工程，未运行目标 App/模型/外部发布。
横向滑动查看细节，或打开原图放大对照。
怎样确认已经完成
- 输入、实际输出和模型/工具未执行范围分开记录，不把手写参考当模型结果。
- 真实运行本题 npm ci / check / build，并回读独立目录的页面与资源。
- 按本题七步核对负例、手机布局、数据或路由；外部服务单独保存实际验证结果。
常见问题
录屏生成交互网页会自动理解所有按钮吗？
不保证。录屏应展示变化前后，还要用明确状态清单逐项重新操作，静态首屏相似不能证明交互还原。
三张截图可以当视频交给录屏模式吗？
截图与录屏是不同输入。三帧可作为需求说明，但不能伪造为实际连续录屏或宣称模型已接受。