はじめに

Figma で実装対象を正確に選択すると、Codex はプロジェクトですでに確立されているパターンを踏まえながら、そのデザインを洗練された UI として実装できます。

Figma スキルを使うと、Codex は Figma MCP サーバーを介して、構造化されたデザインコンテキスト、変数、アセット、実装対象となる正確なバリアントを取得できます。

Playwright インタラクティブスキルを使うと、Codex はアプリを実際のブラウザで開き、実装を Figma の参照デザインと比較し、結果が目標に近づくまでレイアウトや動作を繰り返し調整できます。

Figma プロジェクトの準備

Figma ファイルが整理されているほど、初回実装の品質も高まります。引き継ぎをよりスムーズにするには、次の点に注意してください：

• 特に色、タイポグラフィ、間隔には、可能な限り変数またはデザイントークンを使用する
• 切り離されたレイヤーを繰り返し使うのではなく、再利用可能な UI 要素をコンポーネント化する
• 手動配置ではなく、可能な限り自動レイアウトを使用する
• メイン画面、状態、バリアントが明確に分かるよう、フレーム名とレイヤー名を分かりやすくする
• Codex が推測せずに済むよう、可能な限り実際に使用するアイコンや画像をファイルに残す

これにより、Codex は整理された構造を基に、堅牢で本番環境に対応した UI を構築できます。

具体的な指示

期待するインタラクションパターンや希望するスタイルを具体的に伝えるほど、より良い結果が得られます。

特定の状態、ブレークポイント、インタラクションが重要なら、その点を明記してください。ファイルによく似たバリアントが複数含まれる場合は、どれを正として扱うべきか Codex に伝えてください。

厳密に一致させる必要がある箇所と、リポジトリの規約を優先すべき箇所を明確にするほど、Codex は適切なトレードオフを判断しやすくなります。

デザインシステムの準備

対象リポジトリに明確なコンポーネントレイヤーがすでに用意されていると、Codex は最大限に力を発揮します。Codex はコンポーネントやデザインシステムを一から作り直すのではなく、既存のものを自動的に利用できます。

必要に応じて、再利用するプリミティブ、トークンの保存場所、およびボタン、入力欄、カード、タイポグラフィ、アイコンについてリポジトリで標準とされるものを Codex に指定してください。

React と Tailwind を組み合わせたような形式になることの多い Figma MCP の出力は、最終的なコードスタイルとしてではなく、構造を把握するための参考情報として扱ってください。その出力を、プロジェクトで実際に使用するユーティリティ、コンポーネントラッパー、カラーシステム、タイポグラフィスケール、スペーシングトークン、ルーティング、状態管理、データ取得パターンに合わせて変換するよう Codex に依頼してください。

ワークフロー

Figma の選択項目を起点に

実装したい Figma のフレーム、コンポーネント、またはバリアントそのものへのリンクをコピーします。Figma MCP のフローはリンクを基準に動作するため、近くにある親フレームではなく、対象のノードを直接指すリンクが必要です。

Figma を使うよう Codex に指示

初回実装は Figma を基準に進めます。実装を開始する前に Figma MCP のフローに従うよう、Codex に指示してください。

プロンプトに含める項目：

初回実装ができたら、Codex は Playwright を使って実際のブラウザで UI を検証し、残っている見た目やインタラクションの不一致を解消していきます。