figma-design-to-code-bridge

Figma デザインからコードへの橋渡し

実装が目的の場合は、figma-context-reader の後にこのスキルを使用します。出力は「スクリーンショットからのコード作成」ではなく、デザインの意図、トークン、コンポーネントを既存のコードベースに対応付けるものです。

モード

• handoff-plan：Figma のフレームから構築／リファクタリング計画を作成します。
• component-map：Figma のコンポーネント／バリアントを既存のコードコンポーネントに対応付けます。
• code-connect：Figma Code Connect の作業を準備またはレビューします。
• gap-report：デザインとコードシステムの差異を特定します。
• implementation-route：webapp-ui-skill または marketing-site-skill に引き継ぎます。

ワークフロー

1. figma-context-reader または提供されたコンテキスト概要から、Figma のコンテキストを取得します。
2. コンポーネントの選択を推奨する前に、ローカルのコードベースを調べます。
3. Code Connect が依頼された場合は、Code Connect 固有の作業を行う前に、インストール済みの figma:figma-code-connect スキルを呼び出します。
4. トークン、コンポーネント、バリアント、状態、レスポンシブの制約を、ローカル実装のプリミティブに対応付けます。
5. 密度の高いプロダクト／アプリの作業は webapp-ui-skill に引き継ぎ、一般公開向けのランディングページ／プロダクトページは marketing-site-skill に引き継ぎます。
6. 実装後は、ローカルでのビジュアル検証を必須とします。Figma との一致だけでは検証になりません。

出力形式

assets/design-to-code-handoff.md を使用します。

判断ルール

• 単発の CSS を生成するより、既存のプロジェクトコンポーネントとデザイントークンを優先します。
• 正確な視覚的一致がアクセシビリティ、レスポンシブ対応、またはコードベースの規約と競合する場合は、UX の意図を維持します。
• Figma が生成したコードや MCP が生成したコードは、ローカルアーキテクチャに照らしてレビューするまでは草案として扱います。
• Figma ファイルに状態の情報がない場合は、実装計画にローディング、空、エラー、無効、フォーカス、ホバー、モバイルの各状態を含めます。

安全性とプライバシー

• 非公開の Figma ファイル、スクリーンショット、変数、コンポーネント名、ソースコードは機密情報として扱います。
• 明示的な承認とデータ転送に関する注記なしに、非公開コードや Figma のコンテキストを外部ツールに送信しないでください。
• Figma のフレームに合わせるためだけにローカルコンポーネントを上書きせず、まず対象範囲を限定した実装計画を提案します。

検証と評価

• 引き継ぎ内容に、Figma からコードへのコンポーネント対応付けとローカルでの検証手順の両方が含まれていることを確認します。
• 実装した作業では、ローカルアプリのブラウザーまたはスクリーンショットによる証拠を必須とします。
• evals/evals.json を使用して、アプリフレームの振り分け、マーケティングページの振り分け、Code Connect の差異に関する動作をテストします。

リソース

• 最新の Figma ツールが重要な場合は、$CODEX_SKILLS_DIR/senior-figma-orchestrator/references/figma-mcp-compatibility.md を読みます。