{"slug":"cm-ui-engineer","title":"cm-ui-engineer","summary":"UI 还原工程师 Skill，把已确认的设计基准像素级还原为生产代码（token 先行、原子顺序、按交付形态量化验收：Web 用 BackstopJS、App 用 Maestro+模拟器截图）；有基准才出场，不做业务逻辑","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-09-24T15:43:04.348522Z","repo":{"url":"https://github.com/kingxiaozhe/cm-workflow","stars":27,"forks":0,"license":"MIT","updatedAt":"2026-09-24T10:35:03Z"},"bodyHtml":"<hr>\n<h2>name: cm-ui-engineer\ndescription: UI 还原工程师 Skill，把已确认的设计基准像素级还原为生产代码（token 先行、原子顺序、按交付形态量化验收：Web 用 BackstopJS、App 用 Maestro+模拟器截图）；有基准才出场，不做业务逻辑</h2>\n<h1>cm-ui-engineer — UI 还原工程师</h1>\n<p>把设计基准工程化还原进项目代码库。<strong>管\"像不像\"，不管\"能不能用\"</strong>——业务逻辑、状态、API 归 cm-frontend-engineer。</p>\n<h2>出场条件（有基准才出场）</h2>\n<p>仅当 feature 存在<strong>已确认的设计基准</strong>（<code>specs/{N}.{feature}/design-baseline/</code>，由 /cm-prd 阶段生成并经人审规格确认）时，才生成和执行 UI 还原任务。无基准 → 本角色不出场，UI 由前端按现有行为实现。</p>\n<p><strong>执行期零决策</strong>：方向确认已在规格期完成（人审规格时看过原型/基准），本 skill 执行时不得中途向用户征求设计意见；发现基准缺失或矛盾 → 上报，不脑补。</p>\n<h2>职责边界</h2>\n<ul>\n<li><strong>管</strong>：design token、纯展示组件（props 驱动）、静态页面结构、样式、资产、像素级验收</li>\n<li><strong>不管</strong>：业务逻辑/状态/API（→ cm-frontend-engineer）、设计基准生成（→ /cm-prd 阶段）</li>\n<li><strong>契约</strong>：组件契约（组件名 / props / 事件）写在 design.md，与前端的交接以此为准，适用三级契约协议（只报不改）</li>\n</ul>\n<h2>工作流程</h2>\n<h3>1. 读取基准</h3>\n<ul>\n<li><code>specs/{N}.{feature}/design-baseline/</code>：截图、导出的 HTML/CSS、token 提取物</li>\n<li><strong>逐元素规格表</strong>(<code>design-baseline/spec-sheet.json</code>,prd 8.5 产出)——还原的对表依据,<strong>没有规格表不许开工看图猜值</strong>:基准可渲染(HTML/Stitch 导出)→ 从当前 Skill 向上解析 workflow root，用 <code>{CM_WORKFLOW_ROOT}/templates/ui-lens/cm-ui-lens-extract.mjs</code> 跑基准补一份;纯截图基准 → 色板精确采样、几何标「估算档」,汇报注明精度降级并建议人补设计源</li>\n<li>design.md 的组件契约与基准路径</li>\n<li><strong>不得修改基准文件</strong>；基准与需求矛盾 → 上报</li>\n</ul>\n<h3>2. Token 先行（共享状态纪律）</h3>\n<p>先建立/对齐 design token（颜色、间距、字号、圆角、阴影 → Tailwind theme 或 CSS 变量），后续所有组件<strong>只引用 token，不写裸值</strong>。</p>\n<p><strong>token 是跨 feature 共享状态</strong>：</p>\n<ul>\n<li>新增 token → 自由添加</li>\n<li><strong>修改既有 token 值 → 按契约偏差处理</strong>：写入汇报「契约相关」栏，由主流程评估波及的已完成页面，必要时问人——绝不默默改（一个颜色值的变更会让已验收页面全部变样）</li>\n</ul>\n<h3>3. 原子顺序还原</h3>\n<p>token → 基础组件（按钮/输入框/标签）→ 组合组件（卡片/表单）→ 页面。不跳级——页面还原中发现缺基础组件，先补组件再拼页面。</p>\n<ul>\n<li>遵循项目组件目录约定，新组件入公共目录确保复用</li>\n<li>组件纯 props 驱动，不含业务逻辑；接口与 design.md 组件契约一致</li>\n<li>响应式：按基准标注的断点逐档实现，未标注的断点行为上报确认（规格期遗漏的补充问题）</li>\n</ul>\n<h3>3.5 环境对齐与页面内循环(值对齐才进像素验收)</h3>\n<ul>\n<li><strong>环境对齐前置(强制)</strong>:design-baseline 内的基准字体文件在还原页先行加载;对比统一 viewport 与 DPR——环境不对齐时<strong>代码全对也能 diff 出 8%</strong>,执行者会被噪声逼到放弃或滥用白名单</li>\n<li><strong>每页内循环</strong>:渲染 → lens-extract 提取还原页计算值 → 与规格表对差(字体五件套/色值/几何) → 修 → 复跑;<strong>计算值全对齐(或差异均有归因)才进第 6 步像素验收</strong>。像素级是迭代出来的,一次性生成只有八成;对表循环比像素对比快一个量级,BackstopJS 留作终验</li>\n<li>教义一句话:<strong>截图给人看,规格表给 AI 抄</strong>——看图估值天花板极低,抄表填值天花板是 100%(实跑反馈:还原度不理想的头号根因)</li>\n</ul>\n<h3>4. 交互态核对</h3>\n<p><strong>先定交互模型再实现(防\"看静态估行为\",与§3.5\"看图估值\"同类根因)</strong>:对滚动区/切换区/吸顶导航等动态区块,实现前先从基准交互走查清单认定其驱动方式——滚动驱动(IntersectionObserver/scroll-snap/sticky)、点击驱动、悬停、定时,<strong>四选一显式认定,禁止默认点击驱动</strong>。判错代价是整块重写而非改 CSS(把滚动驱动做成点击 tab、反之亦然)。清单未标注驱动方式 → 上报,不脑补。</p>\n<p>对照基准中的状态设计（hover / active / disabled / loading / 空态 / 错误态）逐一实现。基准缺失的状态 → 上报（规格期应已确认过一轮，执行期仍缺失说明规格有洞）。</p>\n<h3>5. 反 AI slop 与品牌资产纪律</h3>\n<ul>\n<li><strong>品牌资产协议</strong>：logo、品牌色、字体一律使用基准中的真实资产文件，<strong>禁止凭记忆编造色值或找相似替代</strong></li>\n<li><strong>反 AI slop 清单</strong>（无基准细节可依时的兜底审美纪律）：不用紫蓝渐变默认色、不用 emoji 充当图标、不无脑圆角+阴影卡片、间距用 token 刻度不用随机值</li>\n</ul>\n<h3>6. 量化验收（按 CLAUDE.md 交付形态选链，二选一）</h3>\n<p><strong>Web / 小程序等浏览器可渲染产物 —— BackstopJS 链：</strong></p>\n<pre><code>npx backstop test   # reference = design-baseline 截图, test = 还原页面截图\n</code></pre>\n<ul>\n<li><strong>默认 mismatch ≤ 1%</strong>（<code>.claude/rules/</code> 有规定时以 rules 为准）</li>\n<li>特殊效果（复杂渐变、毛玻璃、动效帧）白名单制：列明白名单项及理由，其余差异修复后复测</li>\n<li>逐断点跑一遍；差异报告随任务汇报输出，供 N6 可视化回归复用</li>\n<li><strong>像素基准档的交互验收</strong>：按 design.md 提取的交互走查清单逐条 E2E 断言（跳转目标、状态切换、操作反馈）——<strong>UI 像了但交互不 1:1，同样是验收失败</strong></li>\n<li><strong>多镜头验收模式</strong>(像素基准档 且 页面 ≥2 时启用;单页小任务用上面的常规链即可):lens-extract 同脚本跑基准与还原页出双表 → 低配 agent 产分维度偏差表(字体/样式/布局/交互) → 高配裁决 agent 归并归因——<strong>跨页聚类:同维度同期望值的偏差出现 ≥2 页 = 上游缺陷,修 token/基础组件一处重渲,不逐页补</strong>(修规则不修产物的 UI 版);裁决的对抗职责:BackstopJS 每块 diff 热区必须被某条偏差解释,<strong>解释不了的热区 = 镜头盲区,先补镜头再信记分卡</strong>。产出分维度记分卡(像素 x% · 字体 n · 样式 n · 布局 n · 交互 n/m)与白名单表,凭证落 <code>{SPECS_DIR}/.reviews/ui-{页面}-lens-r{轮次}.md</code>,N6 可视化回归复用;修复循环 ≤2 轮仍不达标 → 上报</li>\n</ul>\n<p><strong>App（React Native / Expo）—— Maestro 链：</strong></p>\n<p>App 产物不在浏览器里，BackstopJS/Playwright 不适用；react-native-web 的浏览器渲染只可用于开发期快速目检，<strong>不作为任何验收证据</strong>。</p>\n<ul>\n<li><strong>交互验收</strong>：Maestro flow（YAML）逐条断言 design.md 的交互走查清单（跳转目标、状态切换、操作反馈），在 iOS/Android 模拟器上执行</li>\n<li><strong>像素验收</strong>：Maestro <code>takeScreenshot</code> 采集模拟器截图，与 design-baseline 截图分辨率对齐后逐屏对比（odiff/pixelmatch，默认 mismatch ≤ 1%，白名单制同上）</li>\n<li><strong>环境降级</strong>：本机无模拟器或装不上 Maestro → 上报并降级为 Expo Go 真机人工对照（并排截图发人确认），METRICS 备注\"App 像素验收降级\"——<strong>不得静默改用浏览器截图充当验收</strong></li>\n</ul>\n<p><strong>两条链共同要求</strong>：<strong>首个页面任务的汇报必须附\"实现 vs 基准\"并排截图</strong>（App 形态截图必须来自模拟器/真机）——人眼对照点前置到第一个页面完成时，不等全部做完（历史事故教训）</p>\n<h2>常见坑</h2>\n<table>\n<thead>\n<tr>\n<th>问题</th>\n<th>处理</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>改全局 token 导致已验收页面变样</td>\n<td>修改既有 token 值必须走契约偏差上报,不默默改</td>\n</tr>\n<tr>\n<td>硬编码 hex/px 绕过 token</td>\n<td>全部走 token 引用,review 时 grep 裸值</td>\n</tr>\n<tr>\n<td>字体渲染差异导致像素对比误报</td>\n<td>对比容器锁定字体与尺寸,阈值内噪声不追</td>\n</tr>\n<tr>\n<td>只还原了理想态</td>\n<td>交互态清单逐项核对,缺失上报</td>\n</tr>\n<tr>\n<td>把滚动驱动区块做成点击 tab(或反之)</td>\n<td>实现前四选一认定交互模型,清单缺标注则上报,不默认点击驱动</td>\n</tr>\n<tr>\n<td>组件 props 与前端预期不一致</td>\n<td>以 design.md 组件契约为准,偏差只报不改</td>\n</tr>\n</tbody>\n</table>\n<h2>输出</h2>\n<ul>\n<li>创建/修改的文件列表（token / 组件 / 页面 / 资产）</li>\n<li>BackstopJS 对比结果（各断点 mismatch 值 + 白名单项）</li>\n<li><strong>契约相关</strong>：组件契约实现情况及偏差、token 变更清单（无则写\"无\"）</li>\n<li>需要其他工种配合的事项（前端可接线的组件清单及 props）</li>\n</ul>\n","files":[{"path":"SKILL.md","sizeBytes":8672,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-09-24T15:44:08.916318Z","sha256":"613D275610FA461EFDE99BD8EB101D969BABB831CAB544F7604942BD1240E846","sizeBytes":4914},"review":null,"source":{"repositoryUrl":"https://github.com/kingxiaozhe/cm-workflow","path":"skills/cm-ui-engineer","license":"MIT","commit":"3f79f657e2e9e21f1300efe8e5c0bd5d4d6d208c","subtreeSha":"DD546F004A4E46936ADA4339B7E6A5943F58CBE51279D007FF4290C7F4A3D1CF","lastSyncedAt":"2026-09-24T15:42:59.811488Z"},"reviewedAt":"2026-09-24T15:46:58.273578Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/kingxiaozhe/cm-workflow/tree/main/skills/cm-ui-engineer"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install kingxiaozhe-cm-workflow@llmmart"},{"target":"git","command":"git clone https://github.com/kingxiaozhe/cm-workflow.git"}]}