はじめに

スクリーンショットや簡単なデザイン概要、着想を得るための参考資料があれば、Codex はプロジェクトですでに確立されているパターンを保ちながら、それらをレスポンシブな UI に落とし込むことができます。

Playwright スキルを使うと、Codex は実際のブラウザでアプリを開き、画面サイズごとに実装とスクリーンショットを比較して、目標に近づくまでレイアウトや動作を繰り返し調整できます。

参考資料を起点に

実現したい UI について、できるだけ明確な参考資料を Codex に提供してください。限定的なタスクなら 1 枚のスクリーンショットでも十分ですが、デスクトップとモバイルのレイアウト、ホバー時や選択時の状態、重要な空の状態や読み込み中の表示など、複数の状態を含めると意図がより正確に伝わります。

参考資料は、完成度の高いデザイン成果物である必要はありません。意図する階層構造、余白、方向性を、Codex が推測せずに済む程度に具体的に示せれば十分です。

具体的な指示

想定するインタラクションパターンや求めるスタイルを具体的に伝えるほど、仕上がりは良くなります。 モデルはよく見られるパターンやスタイルを選ぶ傾向があるため、別の方向性を求めていることが参考資料から明確に伝わらなければ、UI がありきたりな見た目になることがあります。 着想につながる参考資料を増やしたり、指示をより具体的にしたりするほど、独自性のある UI を実現しやすくなります。

デザインシステムの準備

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

標準的な技術スタックを使用していない場合など、必要に応じて、再利用すべきプリミティブ、トークンの格納場所、ボタン、入力欄、カード、タイポグラフィ、アイコンについてリポジトリで標準とされているものを Codex に指定してください。

既存のコードベースから始める場合、Codex はコンポーネントやデザインシステムの使い方を自ら把握できるでしょう。ただし、一から始める場合は、明示しておくことをおすすめします。

スクリーンショットは視覚的な目標として扱いつつ、その目標をプロジェクトで実際に使用しているユーティリティ、コンポーネントラッパー、カラーシステム、タイポグラフィスケール、スペーシングトークン、ルーティング、状態管理、データ取得パターンに落とし込むよう Codex に依頼してください。

Playwright の活用

Playwright は、Codex が UI を繰り返し調整するうえで非常に便利なツールです。Playwright を使うと、Codex は実際のブラウザでアプリを開き、実装と提供されたスクリーンショットを比較しながら、レイアウトや動作を調整できます。

Codex はブラウザウィンドウをさまざまな画面サイズに変更し、各ブレークポイントでレイアウトを確認できます。

Codex で Playwright のインタラクティブスキルが有効になっていることを確認してください。詳しくはスキルのドキュメントをご覧ください。

反復調整

最初の実装の時点で、スクリーンショットにおおむね近い仕上がりになるはずです。複雑なレイアウトやインタラクション、アニメーションを多用する UI の場合は、数回の調整が必要になることを想定してください。

ページがビルドできるかどうかだけでなく、実装をスクリーンショットと照らし合わせるよう Codex に依頼してください。食い違いがある場合は、リポジトリのデザインシステムのトークンを優先し、デザイン全体の見た目を保つために必要な余白やサイズの調整を最小限にとどめるよう伝えてください。

1 枚の画像だけでは分かりにくい状態を明確にするために、必要に応じて追加のスクリーンショットや短いメモを活用してください。

おすすめのフォローアッププロンプト