check-design-parity-figma

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

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

所有设计读取都通过 use_figma 完成，因此适用于任何 Figma 方案。

技能边界

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

工作流

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

关键规则

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