SuperAPI AI 工具集

design-to-code-fidelity

前端与建站

查看项目

更新于 10-16 06:44

技能介绍

用途:评估已实现 UI 与设计参考的匹配程度,并报告所达到的最高证据等级。技能保持通用,不绑定某一产品、仓库、Figma 文件、渲染器或设计工具厂商。

主要能力:定义四类适配器链路——设计参考适配器、实现捕获适配器、对比适配器、证据报告;并划分证据层级:T1 严格栅格差异校验、T2 无严格门的视觉捕获、T3 静态设计对代码审计、T4 受阻未校验。只有 T1 可称为严格栅格差异校验,且仅限声明的参考、捕获、视口、裁剪、状态、掩码与容差范围,不代表整体设计正确。T2/T3 可产出可信的 PR/Issue 候选,但不得称为已验证。实现捕获缺失时,仅在设计与源码证据足够时用 T3,否则用 T4 并指明缺失的适配器。

使用方式:内置脚本包括 scripts/figma-export.sh <file-key> <node-ids> <out-dir> [scale](导出 Figma 节点为 PNG 参考图,依赖 curl、python3、FIGMA_TOKEN 或 FIGMA_API_KEY)、scripts/figma-spacing.mjs <file-key> <node-ids> [depth](提取布局数据,需 Node 18+ 与 Figma token)、scripts/render-capture.mjs <url> <out.png> [w] [h] [scale](按目标视口与设备缩放捕获网页/Storybook/本地路由,依赖 Playwright,支持 INIT_SCRIPT、NEUTRALIZE_CSS、ALLOW_ANIMATION=1、ALLOW_INSECURE_HTTPS=1)、scripts/visual-diff.sh <ref.png> <render.png> [diff.png](比较参考与实现截图,依赖 ImageMagick,输出 AE、AE_RATIO、STATUS、STRUCT、MAX_BLOCK、STRUCT_RATIO、REGION、MAX_AE)。跨渲染器比对可加容差与结构门,例如:AE_FUZZ=10% STRUCT_GATE=1 bash scripts/visual-diff.sh ref.png impl.png diff.png。产物应使用运行级目录 artifacts/<slug>/,含 design.json、ref/、impl/、diff/、report.md|json,并记录视口、DPR、主题、语言、夹具、浏览器/设备、chrome 策略及掩码排除项。

适用场景与限制:适用于前端还原度审查、视觉回归门、PR 缺陷判定。需固定时间、动画、API 夹具、语言、主题、特性开关、会话、视口、字体与网络资源;参考图与实现图的尺寸、裁剪、滚动原点、chrome 与安全区策略、状态须一致。掩码必须记录原因,未记录的掩码将降级为 T2。不适用于从记忆做视觉判断、裁剪或状态不匹配、加载/字体/定时漂移、未记录掩码、把 T3/T4 当作像素证据,或无实测还原度变化的组件抽取偏好。翻译文案溢出与 RTL 镜像见 i18n-copy-and-layout;近重复组件是否合并或抽取见 component-extraction-judgment。非 Web 捕获需按平台适配器处理,不在资料中提供具体平台清单。