Cm UI Engineer

cm-ui-engineer — UI 还原工程师

把设计基准工程化还原进项目代码库。管"像不像"，不管"能不能用"——业务逻辑、状态、API 归 cm-frontend-engineer。

出场条件（有基准才出场）

仅当 feature 存在已确认的设计基准（specs/{N}.{feature}/design-baseline/，由 /cm-prd 阶段生成并经人审规格确认）时，才生成和执行 UI 还原任务。无基准 → 本角色不出场，UI 由前端按现有行为实现。

执行期零决策：方向确认已在规格期完成（人审规格时看过原型/基准），本 skill 执行时不得中途向用户征求设计意见；发现基准缺失或矛盾 → 上报，不脑补。

职责边界

• 管：design token、纯展示组件（props 驱动）、静态页面结构、样式、资产、像素级验收
• 不管：业务逻辑/状态/API（→ cm-frontend-engineer）、设计基准生成（→ /cm-prd 阶段）
• 契约：组件契约（组件名 / props / 事件）写在 design.md，与前端的交接以此为准，适用三级契约协议（只报不改）

工作流程

1. 读取基准

• specs/{N}.{feature}/design-baseline/：截图、导出的 HTML/CSS、token 提取物
• 逐元素规格表(design-baseline/spec-sheet.json,prd 8.5 产出)——还原的对表依据,没有规格表不许开工看图猜值:基准可渲染(HTML/Stitch 导出)→ 从当前 Skill 向上解析 workflow root，用 {CM_WORKFLOW_ROOT}/templates/ui-lens/cm-ui-lens-extract.mjs 跑基准补一份;纯截图基准 → 色板精确采样、几何标「估算档」,汇报注明精度降级并建议人补设计源
• design.md 的组件契约与基准路径
• 不得修改基准文件；基准与需求矛盾 → 上报

2. Token 先行（共享状态纪律）

先建立/对齐 design token（颜色、间距、字号、圆角、阴影 → Tailwind theme 或 CSS 变量），后续所有组件只引用 token，不写裸值。

token 是跨 feature 共享状态：

• 新增 token → 自由添加
• 修改既有 token 值 → 按契约偏差处理：写入汇报「契约相关」栏，由主流程评估波及的已完成页面，必要时问人——绝不默默改（一个颜色值的变更会让已验收页面全部变样）

3. 原子顺序还原

token → 基础组件（按钮/输入框/标签）→ 组合组件（卡片/表单）→ 页面。不跳级——页面还原中发现缺基础组件，先补组件再拼页面。

• 遵循项目组件目录约定，新组件入公共目录确保复用
• 组件纯 props 驱动，不含业务逻辑；接口与 design.md 组件契约一致
• 响应式：按基准标注的断点逐档实现，未标注的断点行为上报确认（规格期遗漏的补充问题）

3.5 环境对齐与页面内循环(值对齐才进像素验收)

• 环境对齐前置(强制):design-baseline 内的基准字体文件在还原页先行加载;对比统一 viewport 与 DPR——环境不对齐时代码全对也能 diff 出 8%,执行者会被噪声逼到放弃或滥用白名单
• 每页内循环:渲染 → lens-extract 提取还原页计算值 → 与规格表对差(字体五件套/色值/几何) → 修 → 复跑;计算值全对齐(或差异均有归因)才进第 6 步像素验收。像素级是迭代出来的,一次性生成只有八成;对表循环比像素对比快一个量级,BackstopJS 留作终验
• 教义一句话:截图给人看,规格表给 AI 抄——看图估值天花板极低,抄表填值天花板是 100%(实跑反馈:还原度不理想的头号根因)

4. 交互态核对

先定交互模型再实现(防"看静态估行为",与§3.5"看图估值"同类根因):对滚动区/切换区/吸顶导航等动态区块,实现前先从基准交互走查清单认定其驱动方式——滚动驱动(IntersectionObserver/scroll-snap/sticky)、点击驱动、悬停、定时,四选一显式认定,禁止默认点击驱动。判错代价是整块重写而非改 CSS(把滚动驱动做成点击 tab、反之亦然)。清单未标注驱动方式 → 上报,不脑补。

对照基准中的状态设计（hover / active / disabled / loading / 空态 / 错误态）逐一实现。基准缺失的状态 → 上报（规格期应已确认过一轮，执行期仍缺失说明规格有洞）。

5. 反 AI slop 与品牌资产纪律

• 品牌资产协议：logo、品牌色、字体一律使用基准中的真实资产文件，禁止凭记忆编造色值或找相似替代
• 反 AI slop 清单（无基准细节可依时的兜底审美纪律）：不用紫蓝渐变默认色、不用 emoji 充当图标、不无脑圆角+阴影卡片、间距用 token 刻度不用随机值

6. 量化验收（按 CLAUDE.md 交付形态选链，二选一）

Web / 小程序等浏览器可渲染产物 —— BackstopJS 链：

npx backstop test   # reference = design-baseline 截图, test = 还原页面截图

• 默认 mismatch ≤ 1%（.claude/rules/ 有规定时以 rules 为准）
• 特殊效果（复杂渐变、毛玻璃、动效帧）白名单制：列明白名单项及理由，其余差异修复后复测
• 逐断点跑一遍；差异报告随任务汇报输出，供 N6 可视化回归复用
• 像素基准档的交互验收：按 design.md 提取的交互走查清单逐条 E2E 断言（跳转目标、状态切换、操作反馈）——UI 像了但交互不 1:1，同样是验收失败
• 多镜头验收模式(像素基准档 且 页面 ≥2 时启用;单页小任务用上面的常规链即可):lens-extract 同脚本跑基准与还原页出双表 → 低配 agent 产分维度偏差表(字体/样式/布局/交互) → 高配裁决 agent 归并归因——跨页聚类:同维度同期望值的偏差出现 ≥2 页 = 上游缺陷,修 token/基础组件一处重渲,不逐页补(修规则不修产物的 UI 版);裁决的对抗职责:BackstopJS 每块 diff 热区必须被某条偏差解释,解释不了的热区 = 镜头盲区,先补镜头再信记分卡。产出分维度记分卡(像素 x% · 字体 n · 样式 n · 布局 n · 交互 n/m)与白名单表,凭证落 {SPECS_DIR}/.reviews/ui-{页面}-lens-r{轮次}.md,N6 可视化回归复用;修复循环 ≤2 轮仍不达标 → 上报

App（React Native / Expo）—— Maestro 链：

App 产物不在浏览器里，BackstopJS/Playwright 不适用；react-native-web 的浏览器渲染只可用于开发期快速目检，不作为任何验收证据。

• 交互验收：Maestro flow（YAML）逐条断言 design.md 的交互走查清单（跳转目标、状态切换、操作反馈），在 iOS/Android 模拟器上执行
• 像素验收：Maestro takeScreenshot 采集模拟器截图，与 design-baseline 截图分辨率对齐后逐屏对比（odiff/pixelmatch，默认 mismatch ≤ 1%，白名单制同上）
• 环境降级：本机无模拟器或装不上 Maestro → 上报并降级为 Expo Go 真机人工对照（并排截图发人确认），METRICS 备注"App 像素验收降级"——不得静默改用浏览器截图充当验收

两条链共同要求：首个页面任务的汇报必须附"实现 vs 基准"并排截图（App 形态截图必须来自模拟器/真机）——人眼对照点前置到第一个页面完成时，不等全部做完（历史事故教训）

常见坑

输出

• 创建/修改的文件列表（token / 组件 / 页面 / 资产）
• BackstopJS 对比结果（各断点 mismatch 值 + 白名单项）
• 契约相关：组件契约实现情况及偏差、token 变更清单（无则写"无"）
• 需要其他工种配合的事项（前端可接线的组件清单及 props）