figma-lint-design

figma-lint-design — ノードツリーに対する WCAG 2.2 ＋デザインシステムのリンティング

Figma ノード（または現在のページ全体）を走査し、アクセシビリティとデザイン品質の問題を一度に報告します。すべて use_figma を通じて実行するため、あらゆる Figma プランで動作し、生成コードではなく実際のデザイン（正確な色、実際のオートレイアウト、実際のバリアント名）を検査します。

この機能ならではの点： Figma のネイティブ MCP（get_design_context、get_metadata など）はコード生成のためにデザインを読み取りますが、リンティングは行いません。デザイン側には「これはアクセシブルか／トークンが適切に使われているか」を確認する組み込み機能がありません。このスキルは、14 個の WCAG 2.2 ルールと 6 個のデザインシステム／レイアウトルールを忠実に移植して、そのギャップを埋めます。

スキルの範囲

• use_figma のルール — まず公式の figma-use スキルを読み込んでください。Figma Plugin API のリファレンス全体が記載されています。これらのスクリプトで必要となる要点：トップレベルで await と return を使うプレーンな JS（IIFE や figma.closePlugin() は使わない。console.log の内容は戻り値になりません）、各スクリプトの先頭で入力値を const としてインラインで指定すること、色の範囲は 0～1 であること、テキスト操作の前にフォントを読み込むこと、await figma.getNodeByIdAsync(...) を使うこと、そしてアトミックエラー（スクリプトが失敗すると変更は一切適用されません。エラーを読み、修正して再試行してください）。
• コンポーネント単位の詳細なスコアカード（状態の網羅性、色覚シミュレーション、0～100 のスコア）→ figma-audit-accessibility を使用します。
• コード側の a11y（生成された HTML に対する axe-core）→ figma-scan-code-accessibility を使用します。
• デザインとコードの差異 → figma-check-design-parity を使用します。

ワークフロー

1. 対象範囲を選択します。 ユーザーの選択範囲または URL から、対象の NODE_ID（フレーム、コンポーネントセット、または画面）を取得します。現在のページ全体をリンティングする場合は null のままにします。
2. ルールを選択します。 RULES のデフォルト値は ['all'] です。ノイズを減らすには、グループ（'wcag'、'design-system'、'layout'）または特定のルール ID（例：'wcag-contrast'）に絞ります。全ルールの一覧は references/lint-rules.md にあります。
3. scripts/lint-design.js を use_figma 経由で実行します（skillNames: "figma-lint-design"）。最初に先頭の const 入力値を編集してください。
4. 重大度で優先順位を付けます。 結果はルールごとに検出項目をまとめ、それぞれに severity（critical／warning／info）と wcagLevel（a／aa／aaa／best-practice／design-system）を含みます。まず critical（コントラスト、ターゲットサイズ、フォーカス、色のみの使用）から対応します。
5. 修正して再度リンティングします。 修正を適用し（figma-manage-variables、figma-use などを使用）、同じ対象範囲を再実行して summary.total が減ったことを確認します。各検出項目には問題のある node.id が含まれているため、そのノードに直接移動できます。

主なルール

• 色は 0～1 の浮動小数点数です。 コントラストの計算には sRGB の線形化と相対輝度を使用します。スクリプトには独自のヘルパーが含まれているため、入力に 16 進数は不要です。
• 背景は祖先をたどって最も近い単色の塗りを推定します（デフォルトは白）。半透明の塗りに対するコントラストには approximate: true のフラグが付きます。
• MAX_DEPTH（デフォルトは 10）と MAX_FINDINGS（デフォルトは 100）で走査範囲を制限します。truncated が設定されている場合は、対象範囲を絞るか上限を引き上げてください。
• WCAG に即した重大度： テキストサイズ、行の高さ、文字間隔／段落間隔など、一部のルールは WCAG の明確な不適合ではなく best-practice として分類されます。各ルールの詳しい理由は lint-rules.md を参照してください。
• 検出項目は問題を説明するものであり、自動修正は行いません。デザインを一括編集する前に、意図を確認してください。