# screenshot-to-code 录屏转原型：还原筛选、展开和切换状态

本题交互参考、状态截图与状态测试为本站手写；未向 screenshot-to-code 提交录屏，也未调用 Gemini，不能当作模型复刻结果。

## 本地运行

需要 Node.js 20+，本参考工程没有 npm 第三方运行依赖。

```sh
npm ci --ignore-scripts
npm run check
npm run dev
```

服务只绑定 127.0.0.1:8456；修改端口可运行 `PORT=8457 npm run dev`。W03 与 W11 包含随包本地 React 18.3.1 UMD 运行库及许可，前者 hash 路由不需要服务器路径回退。

## 七步操作

### 1. 先定义三段明确的交互任务

初始有 3 场活动；点“设计”后仅剩 2 场，展开“街角海报”应出现地点与说明，再切到“我的报名”显示 1 条独立记录。events.json 与 storyboard.json 记录输入和状态，不只要求“还原得像”。

```sh
node verify.mjs
```

### 2. 在原创参考中完成同一操作顺序

打开 index.html，按脚本筛选、展开、切换，再返回全部活动。界面使用原生按钮与 details，键盘可操作；图中明确是本站手写参考，不是 screenshot-to-code 界面。

```sh
npm run dev
```

### 3. 录制输入时保留变化前后

自行录屏应让鼠标动作、筛选结果和展开内容可辨，避免只截到过渡动画。附上 storyboard.json 的文字说明；仅有三帧 PNG 不是连续录屏，不能把静态帧集合改名 MP4 充作输入。

```sh
cat storyboard.json
```

### 4. 确认录屏模式实际模型条件

官方仓库将录屏转交互原型列为独立能力，当前说明使用 Gemini。截图转 React 的 API 兼容配置不自动适用于视频；上传前核对所选工具版本、密钥、模型与格式。

### 5. 对生成产物重新操作三种状态

获得真实产物后依次检查：筛选后 2 条、展开地点文本、报名视图 1 条。不要只对比首屏图片，按钮必须真的改变可见数据，且返回时没有遗失状态。

### 6. 保留空结果和切换恢复负例

logic.mjs 的纯状态函数测试未知类别返回空、其他视图恢复、展开 ID 不属于当前列表时清除。本题 Node 实测这些逻辑；浏览器仍要检查焦点、展开行为与移动端布局。

```sh
node verify.mjs
```

### 7. 保存原录屏、实际输出和验收表

本站包仅含手写参考和脚本，没有声称执行过录屏生成。你运行模型后分目录保存 input-video、generated 和 actual-checks，并记录未还原行为；apizt 通用接口入口不承诺托管此 Gemini 视频工作流。

```sh
node verify.mjs
```

## 输入与许可

虚构业务、客户、活动及几何插图均为本站原创教学输入；参考源码采用 MIT（见 LICENSE）。不是 Dyad/bolt.diy/screenshot-to-code UI 或模型输出。不包含真实 API 密钥、账号、发布 URL 或客户资料。

官方依据：
- https://github.com/abi/screenshot-to-code

查询词仅为任务意图，不是已验证 Google 月搜索量或抖音指数。