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. デザインの仕様を読み取ります。 scripts/check-parity.js で NODE_ID を設定し、codeSpec を貼り付けます。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 の範囲です。スクリプトは色を 16 進数に変換し、比較前に両方を正規化します。
• 値が入力された codeSpec セクションのみ比較されます。 セクションを省略すると、そのセクションは比較されません。入力していないデータによる誤検出はありません。
• 数値の許容誤差：寸法は小さな誤差（幅／高さは約 2px、不透明度は 0.01）を許容して比較するため、サブピクセルの丸めによる差異は乖離として検出されません。
• 重要度がスコアに影響します：色／間隔の不一致は major（−8）、半径／境界線の幅／不透明度の不一致は minor（−3）です。重み付けの詳細については parity-scoring.md を参照してください。