SuperAPI AI 工具集

check-design-parity-figma

设计与创作

查看项目

更新于 10-16 01:27

技能介绍

用途:把 Figma 节点的真实规格与代码实际渲染值(codeSpec)做差异比对,返回加权一致性评分、逐属性差异(含严重级别)和修复建议。它是代码生成的逆向:get_design_context 把设计变成代码,本技能确认代码没有偏离设计。所有设计读取通过 use_figma 完成,适用于任意 Figma 方案。

主要能力:提取节点的填充、描边、圆角、不透明度、内边距/间距和文本属性,与 codeSpec 比对。评分公式为 max(0, 100 − (critical×15 + major×8 + minor×3 + info×1));discrepancies[] 列出每处不匹配的 category、property、severity、designValue、codeValue 与 suggestion。颜色在 Figma 中为 0–1,脚本会转成十六进制并归一化后比较;尺寸有容差(宽高约 2px,不透明度 0.01),避免亚像素舍入被误判。只比较 codeSpec 中已填写的部分,省略某节即跳过,不会产生误报。

使用方式:先组装 codeSpec(完整结构见 references/parity-scoring.md),只需填写想比较的 visual、spacing、typography、accessibility 等节;可用 scan-code-accessibility-figma --map-to-codespec 自动生成 codeSpec.accessibility。然后设置 NODE_ID 并把 codeSpec 粘贴进 scripts/check-parity.js,通过 use_figma(skillNames: "check-design-parity-figma")运行。读取评分卡后决定修哪一侧:改代码对齐设计,或用 manage-variables-figma / figma-use 把设计改为有意变更,再重跑确认分数上升。

限制与边界:本技能只做校验,不生成代码;从设计生成代码请用原生 get_design_context。代码侧无障碍扫描用 scan-code-accessibility-figma,设计侧 WCAG 检查用 lint-design-figma。使用前需先加载官方 figma-use 技能,脚本依赖纯 JS 顶层 await + return(无 IIFE、无 figma.closePlugin(),console.log 不返回)、输入以 const 内联在脚本顶部、颜色 0–1、文本操作前加载字体、await figma.getNodeByIdAsync(...),且错误为原子性(脚本失败不应用任何改动)。