ui-walkthroughlisted

1. # UI 走查（UI 还原度走查 Skill） 研发把页面做上线后，用这个 skill 把 PM 提供的 UI 设计 HTML 和线上实现，同视口、同状态逐区块比对，产出可直接发研发的 UI 还原度差异清单。 判差异不靠肉眼猜——肉眼能看出"颜色不对"，但说不清"线上 #1677ff vs 设计 #fc7913"。每个可疑处都要在两边各读一次 computed style 实锤具体值，研发才能照着改。 2. ## 一、输入约定 每次启动走查，PM 给两样： 2.1. **设计 HTML 路径**：UI 设计好的那一份单文件 HTML（浏览器可直接打开）。**这是唯一参照系**——线上对不对，全看跟这份 HTML 一不一致，不引入其他设计规范、不掺个人审美。 2.2. **线上 URL**：研发部署好的页面入口。 只给了 PRD / 模块名没给 HTML：在 PRD 同目录的 `prototype/` 子目录里找对应 HTML，找到多个按文件名匹配，不确定就问 PM。 特殊情况： 2.3. **HTML 和线上 URL 明显不是同一个页面 / 功能**：停下来问 PM，不要硬比。 2.4. **一份 HTML 用 page-switch JS 承载多个状态**（列表 / 详情 / 弹窗 / 各 tab）：每个状态都是一个独立走查单元，比的时候两边都要切到对应状态。 3. ## 二、走查前准备 3.1. **摸清设计 HTML 有哪些状态** 先打开设计 HTML 看一遍：是单状态，还是用 page-switch JS / 多文件承载列表、详情、弹窗、多个 tab。把所有状态列出来——每个状态是一个走查单元，线上要逐个对上。 3.2. **统一视口宽度** 设计 HTML 一般按全视口设计、无 max-width。线上和 HTML **必须用同一视口宽度截图**，否则布局错位、留白这些差异全是假的，白费功夫。 默认 **1440 宽**（常用桌面断点）。如果设计稿明显是按别���断点画的（如内容在 1280 才不挤），跟着改，两边一起改。 3.3. **接管浏览器（默认 MCP，可选高速）** **默认路径：chrome-devtools MCP**。设计 HTML 用 `file://` 绝对路径 navigate，线上用 URL navigate；同一 Chrome 实例切换 tab 即可。MCP 是单 Chrome 天生串行，状态多的情况下逐个跑。 **可选高速路径：`browser-cap`**。装了 `BROWSER_CAP_DIR` 才能用。设计 HTML 和线上页面各开一个 Chrome 实例，互不干扰： 1. `bash ${BROWSER_CAP_DIR}/bin/cap-launch-chrome.sh <端口>`（端口 9222-9299，已占自动拒绝，换一个）。 2. `node ${BROWSER_CAP_DIR}/bin/capture.js <端口> <配方.json>` 驱动：导航 / 切状态 / 截图 / 读 computed style。 3. 截图先落临时目录，再 `bash ${BROWSER_CAP_DIR}/bin/stash-shots.sh <源> <目标>` 入库到 `<ACCEPTANCE_DIR>/.../screenshots/`。