figma-check-design-parity

figma-check-design-parity — 设计与代码偏差检查器

获取 Figma 节点的实际规格，并与 codeSpec（实现实际渲染的内容）进行差异比较。返回加权一致性评分、按严重程度分类的属性差异，以及建议的修复方法。这与代码生成的方向相反：get_design_context 将设计转换为代码；此技能则确认代码没有偏离设计。

所有设计数据都通过 use_figma 读取，因此适用于任何 Figma 套餐。

技能边界

• use_figma 规则——先加载官方 figma-use 技能；它是完整的 Figma Plugin API 参考。这些脚本依赖的要点：使用带顶层 await 和 return 的普通 JS（不使用 IIFE 或 figma.closePlugin()；console.log 不会作为返回值），在每个脚本顶部用 const 内联输入，颜色值范围为 0–1，在任何文本操作前加载字体，使用 await figma.getNodeByIdAsync(...)，以及原子错误处理（脚本失败时不会应用任何内容——读取错误、修复后重试）。
• 根据设计生成代码 → 使用原生的 get_design_context；此技能用于验证，而非生成。
• 为 codeSpec.accessibility 提供代码侧无障碍数据 → 使用 figma-scan-code-accessibility （--map-to-codespec 会输出完全符合要求的对象）。
• 设计侧 WCAG 检查 → 使用 figma-lint-design。

工作流

1. 组装 codeSpec。 收集组件实际渲染的值，并填入 codeSpec 对象 （完整结构见 references/parity-scoring.md）。你只需填写想要比较的部分——visual、spacing、typography、accessibility。提示：figma-scan-code-accessibility --map-to-codespec 可自动生成 codeSpec.accessibility。
2. 读取设计规格。 设置 NODE_ID，并将 codeSpec 粘贴到 scripts/check-parity.js 中。通过 use_figma 运行（ skillNames: "figma-check-design-parity"）。脚本会提取节点的填充、描边、圆角半径、不透明度、内边距／间距和文本属性，再与 codeSpec 进行差异比较。
3. 读取评分卡。 summary.parityScore 的计算方式为 max(0, 100 − (critical×15 + major×8 + minor×3 + info×1))。discrepancies[] 会列出每项不匹配及其 category、property、severity、 designValue、codeValue 和 suggestion。
4. 决定修复哪一侧。 每项差异都会说明设计和代码各自的值。可以更新代码以匹配设计，也可以将设计调整为匹配有意修改的代码（通过 figma-manage-variables / figma-use），然后重新运行以确认评分有所提高。

关键规则

• Figma 中的颜色值范围为 0–1；脚本会将颜色转换为十六进制，并对两侧的数据进行标准化后再比较。
• 只比较已填写的 codeSpec 部分。 省略某个部分即可跳过该部分——不会因未提供的数据产生误报。
• 数值容差：尺寸比较会使用较小的误差范围（宽度／高度约为 2px，不透明度为 0.01），避免将亚像素舍入误判为偏差。
• 严重程度决定评分：颜色／间距不匹配属于 major（−8），圆角半径／边框宽度／不透明度不匹配属于 minor（−3）。完整权重请参见 parity-scoring.md。