用途:pixel-audit 针对单个页面或路由做视觉一致性审计,对照 Figma 节点或参考截图找出差异,用项目 UI 库修复,并在元素级别验证每处修复后才可声称“已验证”。它不同于 /design-system(项目开始时整体检查组件库),本技能在功能开发期间检查单个产品页面,只引用项目库,不在此重建组件。
主要能力:推断或询问目标项目代码、审计范围(单页面/路由及状态,如列表/详情、弹窗、表单、空/错误/加载、响应式断点、明暗主题)、真实来源(Figma MCP 节点或参考截图/实现)、登录与环境。先加载 GLOSSARY.md、相关 ADR 和项目 UI 技能。流程包括:映射页面、追踪资源管线、采集像素清单(记录 x/y、尺寸、间距、字体、颜色、边框、圆角、图标、对齐、透明度、阴影等)、逐节点比对期望与实际,将差异分类为 MISSING 或 EXTRA。缺陷清单写入 <artifacts-root>/specs/pixel-audit/<TARGET-PROJECT-CODE>-<page-slug>-defects.md,清单与截图放在同目录。
使用方式:一次只修一个节点/页面/状态,不批量处理无关修复;复用项目 UI 库组件,不写一次性 UI;共享组件需改动时建议 /design-system extend 并先与用户确认;EXTRA 项只报告不擅自决定。验证门要求说明环境、跨构建管线确认资源已更新、用选择器/getBoundingClientRect()/计算样式/DOM/裁剪截图提供元素级证据;未满足全部条件不得标记 verified。完成后建议 /code-review 再 /commit-push-*,并停止。
适用场景:功能开发中单个页面的视觉走查与修复。限制:仅本地凭据与本地浏览器,不使用云代理;范围是硬边界,不得编辑其他页面;无 Figma 或参考截图时必须停下询问,不得凭记忆审计;子代理仅执行第 1 步映射页面,修复与验证由主代理完成;不得添加任何 AI/工具署名。