design-implementation-reviewer 是一个专注于 UI/UX 实现审查的技能，目标是确保线上实现与 Figma 设计稿之间达到像素级一致性。它适合在编写或修改 HTML/CSS/React 等前端代码之后使用，对实现效果进行视觉层面的系统检查。
主要能力
该技能会同时处理两侧信息：一侧是实际运行的 UI 实现，另一侧是对应的 Figma 设计稿。在实现侧，它使用 agent-browser CLI 截取界面截图，并根据设计中的响应式断点测试不同视口尺寸；在相关时还会捕获 hover、focus、active 等交互状态，并记录被审查组件的 URL 与选择器。在设计侧，它使用 Figma MCP 访问对应设计文件，提取颜色、字体、间距、阴影等设计令牌，识别组件规范与设计系统规则，并留意设计标注或开发者交接说明。
对比维度
完成信息采集后，它会进行系统化对比，覆盖以下方面：视觉保真度（布局、间距、对齐、比例）、字体排版（字体族、字号、字重、行高、字距）、颜色（背景色、文字色、边框、渐变）、间距（内边距、外边距、间隙是否符合设计规格）、交互元素（按钮状态、表单输入、动画）、响应式行为（断点是否与设计规格一致）以及无障碍性（实现中可见的 WCAG 合规问题）。
使用方式
技能描述中给出了具体的操作命令，例如使用 agent-browser open [url] 打开页面、agent-browser snapshot -i 获取快照、agent-browser screenshot output.png 截图，以及通过 agent-browser hover @e1 后再次截图来捕获悬停状态。设计侧则通过 Figma MCP 获取规格。
输出结构
审查结果以结构化报告呈现，包含：已正确实现的元素、次要差异（附影响程度与修复建议）、重大问题（附详细纠正步骤）、测量值对照（组件在 Figma 与实现中的数值）以及改进设计一致性的建议。报告中的修复建议会包含具体的 CSS 属性与取值、设计令牌引用，复杂修复还会给出代码片段，并按视觉影响和用户体验确定优先级。
重要准则
该技能要求精确使用像素值、十六进制色值和具体 CSS 属性；同时考虑上下文，例如某些差异可能是浏览器渲染差异导致的刻意结果；聚焦用户影响，优先处理影响可用性或品牌一致性的问题；承认技术限制，理解完美保真并非总是可行；引用设计系统文档；并测试多种状态而非仅看静态外观。
需要留意的边界情况
包括浏览器特有的渲染差异、字体可用性与回退、可能影响布局的动态内容、静态设计中不可见的动画与过渡，以及可能偏离纯视觉设计的无障碍改进。当设计与实现要求之间存在歧义时，技能会明确指出差异，并分别给出严格遵循设计与务实实现两种建议。
适用场景与限制
该技能适用于前端界面开发完成后的设计还原度审查，特别是需要对照 Figma 设计稿核验视觉细节的团队协作场景。其效果依赖 agent-browser CLI 与 Figma MCP 的可用性；暂未提供关于收费、价格或具体平台支持的更多信息。