Nox-Lumen Autofigma-design-review
能力
把 Figma 设计稿与前端实现做三层对比，输出结构化合规报告。
三层比对
| 层次 | 比对内容 |
|---|---|
| Token 级 | Design Tokens（色值 / 字号 / 圆角 / 间距 / 阴影）是否一致 |
| 像素级 | 截图像素差异 / Diff 覆盖率 / 偏移量 |
| 语义级 | 组件结构 / 层级关系 / 交互状态是否对应 |
输出
结构化合规报告：
- Token 一致率
% - 像素差异率
% - 语义差异项 列表
- 按严重度分级的问题清单
- 截图前后对比（可选：
html-report生成可视化看板）
适用场景
| 场景 | 说明 |
|---|---|
| 还原度验收 | 开发交付前自动走查 |
| 回归检测 | 发布前确认没有意外 UI 变动 |
| 设计系统一致性 | 检查多个页面是否都用了正确的 Design Tokens |
不适用：Figma 文件编辑、UI 代码生成、或非 Figma 设计工具（Sketch / XD）。
触发方式
自然语言示例：
- "审核 Figma 还原度"
- "设计稿对比前端"
- "Figma 合规检查"
- "pixel diff"
- "Token 对比"
- "设计走查"
与其他技能的配合
| 搭配 | 场景 |
|---|---|
| gstack-browser | 浏览器自动截图前端页面 |
| html-report | 生成可视化合规看板 |