check-design-parity-figma

check-design-parity-figma — デザインとコードの差分チェッカー

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 に渡すコード側のアクセシビリティ → 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 を設定し、scripts/check-parity.js に codeSpec を貼り付けます。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 の範囲です。スクリプトは比較前に色を hex に変換し、両方を正規化します。
• 入力された codeSpec のセクションだけが比較対象です。 セクションを省略すると比較対象から外れるため、指定していないデータによる誤検出はありません。
• 数値の許容誤差：幅／高さは小さな誤差（約 2px）、透明度は 0.01 の許容差を使って比較するため、サブピクセルの丸めが差分として検出されることはありません。
• 重要度がスコアを左右します：色／間隔の不一致は major（−8）、角丸／境界線の幅／透明度は minor（−3）です。重み付けの詳細は parity-scoring.md を参照してください。