design-system-inventory-figma

design-system-inventory-figma — トークン＋コンポーネント＋スタイルの一括抽出

ファイル全体をたどり、構造化されたキットを返す use_figma の単一呼び出しです。 トークン（すべてのローカル変数をコレクションとモードごとにグループ化）、コンポーネント（単独コンポーネントとコンポーネントセット。プロパティ定義と、バリアントごとの簡潔な visualSpec を含む）、スタイル（解決済みの値を持つペイント／テキスト／エフェクトスタイル）を取得します。コード生成やライブラリ監査で「すべてを一度に読み取る」ための入り口です。

スキルの適用範囲

• use_figma のルール — まず公式の figma-use スキルを読み込んでください。これは Figma Plugin API の完全なリファレンスです。これらのスクリプトが前提とする重要事項：トップレベルの await と return を使うプレーンな JS（IIFE や figma.closePlugin() は使わない。console.log の出力は返されない）、各スクリプトの先頭で入力を const としてインライン化する、色は 0～1 の範囲で指定する、テキスト操作の前にフォントを読み込む、await figma.getNodeByIdAsync(...) を使う、アトミックなエラー処理（スクリプトが失敗すると何も適用されないため、エラーを読み、修正して再試行する）。
• 各 visualSpec の正確な形式 → references/visual-spec.md。
• 深さ無制限の単一コンポーネント（完全なツリー、リアクション、インスタンス参照）→ deep-component-figma を使います。CSS ステートマシンとしての単一バリアントセット → analyze-component-set-figma を使います。ディスク上のトークンファイル → export-tokens-figma を使います。
• これは、ネイティブ MCP にはないシステム全体のデザイン機能です。get_design_context は単一の選択範囲に対して動作し、get_metadata はフラットな構造を返します。どちらも、どのプランでも統合されたトークン＋コンポーネント＋スタイルのキットは提供しません。

ワークフロー

1. 大きなファイルでの応答サイズを制御するため、範囲と詳細度を選択します。scripts/inventory.js の定数を編集します。
   • INCLUDE — "tokens"、"components"、"styles" のいずれか（デフォルト：3 つすべて）。
   • VERBOSITY — "full"（バリアントごとのビジュアル仕様）、"summary"（コンポーネントのメタデータとプロパティ。バリアントごとの仕様はなし）、または "inventory"（名前／ID／件数のみ。非常に大きなファイル向け）。
   • COMPONENT_NAME_FILTER — コンポーネントを絞り込む部分文字列（例："Button"）。
2. use_figma を使って実行します（skillNames: "design-system-inventory-figma"）。変数は Plugin API 経由で読み取るため、Figma のすべてのプランで動作します（Enterprise REST は不要です）。
3. 結果を利用します。 色／スペーシング／タイポグラフィの値には tokens、コンポーネント API には components[].properties、状態ごとの外観には components[].variants[].visualSpec、スタイルベース（変数以外）の値には styles を使います。
4. 結果がまだ大きい場合は、VERBOSITY を下げるか、INCLUDE／COMPONENT_NAME_FILTER を絞り込んで再実行します。巨大な full 出力をページ分割しようとしないでください。

注意事項

• 色は 16 進数で出力されます（Figma は内部で RGBA を 0～1 の範囲で保存します）。スペーシング／サイズの値は px です。
• 変数は、可能な場合、エイリアスをトークン名（{Color.Brand.Primary} 形式）に解決します。
• バリアントごとのビジュアル仕様は、各バリアントのコンポーネントノードから取得します。フィールド（塗り、線、エフェクト、cornerRadius、不透明度、レイアウト／パディング／スペーシング、タイポグラフィ）については、references/visual-spec.md を参照してください。
• このスクリプトは、組み込みの figma_get_design_system_kit ツールに相当する、ルート＋第 1 階層の実装を use_figma のネイティブな形式で記述したもので、Desktop Bridge を使わずに動作します。各コンポーネント／バリアントのルートのビジュアル仕様と、その直接の子（childSpecs）を取得します。それより深い階層には再帰しません。