UI Shots

上下游

• 前接：界面审查、改版、交付界面材料。
• 后接：逐张审查和改版走 frontend-design；截图中发现的应用 bug 走 diagnosing-bugs。

组成

• shots.mjs：截图程序。复制到项目的 scripts/。文件头 CONFIG 一段是项目相关的全部内容：测试页目录、服务器命令、入口页、页面启动前执行的脚本。
• shots.vite.config.js：Vite 项目用，在应用原配置上放行测试页目录。
• HARNESS.md：测试页和假数据的写法、其他技术栈的入口页、已知的坑。写测试页前读。

一个场景是 { id, title, harness, query?, eval?, size?, wait? }，按区域写在 <测试页目录>/scenes/*.mjs。id 用区域前缀（chat/…、settings/…），title 用界面语言写。

步骤

1. 接入：复制两个文件，按项目改 CONFIG；在 .gitignore 中加入 /.shots/ 和入口页路径。完成判据：一个最小测试页能用 node scripts/shots.mjs run --only <id> 出图。
2. 盘点：列出路由、页面、弹窗、面板和菜单，再列每项的状态：空、加载中、出错、各角色视角、窄窗口。完成判据：清单覆盖路由表和全部页面、弹窗、面板类组件，每项写明要截的状态。
3. 写测试页和场景：按 HARNESS.md 写。全项目共用一套连贯的假数据。区域多时，按区域分给并行子代理：每个子代理只改自己的测试页和场景文件，共用一个 serve，不各自启动服务器。完成判据：清单上每个状态都有一条场景，跑出的图都看过。
4. 全量运行：放到后台跑（run，几百个场景要二三十分钟）。完成判据：manifest.json 里每个场景的每种主题都有图，errors 为空；每个区域深浅两色各抽看至少一张。
5. 交付：报告总览页路径、场景数、未覆盖的状态及原因、截图中发现的应用问题。

复跑

改完一块界面，只重跑那一块：run --only '^settings/' --out .shots/<上次>。新结果按场景替换进原总览，其余场景保留。