implementing-figma-ui-tempad-dev

TemPad Dev：Figma から UI を実装する

このスキルには TemPad Dev MCP が必要です。tempad-dev:* ツールを利用できない、無効になっている、または認可されていない場合は、作業を中止し、TemPad Dev MCP をインストールして、Figma のデザインファイルにある TemPad Dev パネルで有効化するようユーザーに伝えてください。

TemPad Dev は JSX または Vue 形式の Tailwind 風 IR を出力します。MCP の出力はデザイン上の事実として扱ってください。重要なスタイルを推測してはいけません。

証拠のルール

優先順位：

1. tempad-dev:get_code（信頼できる情報源：明示的な値、レイアウトの意図、警告、アセット、トークン、コード生成、言語）
2. tempad-dev:get_structure（階層、重なり、境界の確認）

色、タイポグラフィ（サイズ／太さ／行の高さ／文字間隔）、余白、角丸、枠線、影、グラデーション、不透明度／オーバーレイ、ぼかしを決して作り出さないでください。

data-hint-* 属性を出力しないでください。

ワークフロー

1) リポジトリの規約を確認する

リポジトリを確認し（推測しないでください）、スムーズに統合するために必要な情報を特定します。

• フレームワーク／ランタイムとファイル規約（React／Vue、TS／JS、SFC の規約、命名）
• スタイリングの統合ルール（ユーティリティの使用可否、クラスの並べ替え、リンティング、抽出パターン）
• トークン／テーマの仕組み（CSS 変数、トークンファイル、命名、ダークモード／モード）
• アセットの方針（public フォルダーとインポートの使い分け、アイコンのパイプライン、ハッシュ化、ディレクトリのルール）
• 既存のプリミティブ／コンポーネント（ボタン、入力欄、タイポグラフィ、レイアウトラッパー）とインポートパスの規約

リポジトリで Tailwind（または Tailwind 互換のツール）が実際に使われている場合に限り、クラス構文や書式に影響する Tailwind のバージョンと規約も確認してください。

不明な点があれば、最小限の質問を最大 3 つまで行ってください。それ以外の場合は作業を進め、推測した箇所には注意を促してください。

2) デザインのベースラインスナップショットを取得する

次の設定で tempad-dev:get_code を呼び出します。

• resolveTokens: false
• ユーザーから nodeId が指定された場合のみ渡します。指定されていない場合は、ツールのデフォルト動作（現在の選択）を使用します。
• preferredLang：リポジトリに合うものを選びます（jsx または vue）

重要：get_code.lang は、TemPad Dev プラグイン／設定の優先順位を考慮した後に MCP が実際に使用した言語です。返された lang と codegen の情報に基づいて IR を解釈し、リポジトリで必要な形式に変換してください。

デザイン上の事実として、次の情報を記録します。

• code、lang
• warnings
• assets（存在する場合）
• tokens（存在する場合）
• codegen（例：スケール、長さの単位、rootRem、その他の正規化設定）

3) 警告と不確実性に対処する

警告が証拠の欠落、不完全さ、または不確実さを示す場合は、直ちに対処します。

• depth-cap：一覧にある各サブツリーのルート nodeId ごとに get_code を呼び出して結果をつなぎ合わせるか、対象範囲を絞って省略した部分を列挙します。
• truncated：対象範囲を絞り（選択範囲を小さくするか、主要なサブツリーを指定）、出力が部分的であることを警告します。
• レイアウト／重なりに関する不確実性：矛盾を解消するために get_structure を呼び出します。
  • get_structure の後も矛盾が残る場合（または対象範囲を絞れない場合）は、中止してください。

4) アセットの処理（assets が存在する場合のみ）

まずリポジトリのアセット方針に従います。

• TemPad が提供する asset.url からデータをダウンロードし、方針に適合するパスでリポジトリに保存して、リポジトリの規約に沿って参照します。
• アセットの保存が方針で禁止されている場合は、TemPad の URL を参照してもかまいませんが、出力がローカルの TemPad アセットサーバーに依存することを警告してください。

公開インターネットからアセットをダウンロードしてはいけません。TemPad が提供する asset.url のみを使用してください。

5) トークンのマッピング（tokens が存在する場合のみ）

トークンの形式：

• tokens は、正規の CSS 変数名（例：--...）をキーとするレコードです。
• 各トークンの値は、文字列または Collection:Mode 形式の文字列をキーとし、値に文字列を持つレコードです。
• 値の文字列は他の変数を参照している場合があります。参照はそのまま保持してください。

マッピングの目標：安全な場合はリポジトリのトークンに統合し、それ以外の場合は get_code の明示的な値を保持します。

ルール：

1. 値の同等性（参照を含む）とリポジトリ内での意味上の整合性を根拠として妥当と判断できる場合は、既存のリポジトリトークンを優先してください。 トークン名は補助的な根拠として使用できますが、名前が似ているという理由だけでマッピングしてはいけません。
2. リポジトリに確立されたトークンの運用方法がすでにあり、この変更が想定されている場合に限り、新しいトークンを追加してください。
3. モードの選択またはマッピングに曖昧さが残る場合は、明示的な値を保持し、警告してください。

ヒントは、存在する場合にモード選択を検討する目的に限って使用できます。ヒント属性は出力しないでください。

6) リポジトリに適したコードを実装する

TemPad Dev IR をリポジトリの規約に合わせて変換します。

• ユーティリティファーストのリポジトリ（Tailwind／UnoCSS）：ユーティリティクラスを維持し、リポジトリのルールに合うよう順序や書式を調整してください。Tailwind が使用されている場合は、クラス構文を変更する前にリポジトリの Tailwind のバージョンと設定を確認してください。
• 非ユーティリティ系のリポジトリ：明示的な値を維持しながら、ユーティリティをリポジトリのスタイリング方式（CSS Modules／スコープ付き CSS／Sass／CSS-in-JS）に変換してください。

制約：

• 新しいフレームワークやスタイリングシステムを導入しないでください。
• 新しいランタイム依存関係またはビルド依存関係の追加には、ユーザーの確認が必要です。ただし、ユーザーが確認不要と明示している場合を除きます。
• バリアントや状態がリポジトリの規約または根拠によって確認できる場合を除き、基本状態のみを実装してください。

コンポーネントの抽出とプリミティブ：

• 繰り返しがあり、リポジトリのパターンによって妥当と判断できる場合に限り、抽出してください。
• 意図されたセマンティクスに合致し、スタイルを推測する必要がない場合は、既存のリポジトリのプリミティブ／コンポーネントを優先してください。

7) セマンティクスとアクセシビリティの最低要件

IR のままでは単なるコンテナーのセマンティクス（クリック可能な div など）になり、適切なリポジトリのプリミティブ／コンポーネントをすでに使用していない場合に限り、適用してください。

• 適切な場合はネイティブ要素（button、a、input/label）を使用してください。
• キーボード操作とフォーカス可能な状態を確保してください。
• 必要に応じてアクセシブルな名前を付けてください（aria-label、alt）。

リポジトリに既存の CSS リセット／ノーマライズがあるものとします。リポジトリに確立されたパターンがすでにある場合を除き、新しいリセットライブラリやグローバル CSS を追加しないでください。

8) 終了とまとめ

以下の場合は停止してください（コードを提出しないでください）。

• TemPad Dev MCP を利用できない、または認可されていない場合、あるいは対象を読み取れない場合
• 根拠に矛盾があり、構造または対象範囲を絞っても解決できない場合
• 必要なアセットをリポジトリのポリシーに従って取得または保存できない場合

それ以外の場合は、根拠に基づく最善の基本実装を提出し、最後に以下を記載してください。

• 根拠に関する注意事項：warnings、省略事項、または推定したリポジトリ規約
• アセット：保存したものと TemPad URL、およびポリシー上の制約
• トークン：マッピングした値と明示的な値、および曖昧さ
• 依存関係：追加の有無（およびユーザーの確認を得たかどうか）
• 停止した場合：次に必要な情報（最大 3 項目）