はじめに

スクリーンショット、デザインの概要、参考にしたいデザイン例などがあれば、Codex はそれらをもとに、プロジェクトで使われているパターンに沿ったレスポンシブな UI を実装できます。

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

参考資料の用意

手元の資料から、実現したい UI が最もよく伝わるものを選び、Codex に渡してください。作業範囲が限られていれば、スクリーンショットは 1 枚でも十分です。デスクトップとモバイルのレイアウト、ホバー時や選択時の状態、必要に応じてデータが空のときや読み込み中の表示も用意すると、実装してほしい内容がより正確に伝わります。

参考資料は、完成したデザインデータである必要はありません。要素の視覚的な優先順位や余白、デザインの方向性を、Codex が推測せずに済む程度に具体的に示せれば十分です。

具体的な指示

想定している操作と、それに対して UI がどう反応するか、どのような見た目にしたいかを具体的に伝えるほど、期待に近い仕上がりになります。 モデルはよく使われるパターンやスタイルを選ぶ傾向があります。参考資料から別の方向性を読み取れない場合は、ありふれた見た目の UI になることがあります。 参考にしたいデザイン例を増やしたり、指示をより具体的にしたりすることで、個性のある UI に仕上がりやすくなります。

デザインシステムの準備

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

標準的な技術スタックを使っていない場合など、必要に応じて、再利用するプリミティブやデザイントークンの定義場所を Codex に伝えてください。ボタン、入力欄、カード、タイポグラフィ、アイコンについても、リポジトリでどの実装や定義を標準としているかを明示してください。

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

スクリーンショットを見た目の目標とし、実装にはプロジェクトで実際に使っているユーティリティ、コンポーネントのラッパー、配色体系、タイポグラフィスケール、余白のトークンを使うよう Codex に指示してください。ルーティング、状態管理、データ取得についても、プロジェクトのパターンに従うよう伝えてください。

Playwright の活用

Playwright は、Codex が UI を繰り返し調整するのに役立ちます。Codex は実際のブラウザでアプリを開き、表示を提供されたスクリーンショットと見比べながら、レイアウトや動作を調整できます。

ブラウザのウィンドウをさまざまな画面サイズに合わせて変更し、ブレークポイントごとのレイアウトも確認できます。

Codex で Playwright の対話型スキルが有効になっていることを確認してください。詳しくは、スキルのドキュメントをご覧ください。

実装の調整

最初の実装で、全体の見た目はスクリーンショットに近くなるはずです。レイアウトや操作が複雑な場合や、アニメーションを多用する UI の場合は、数回の調整を見込んでください。

ページがビルドできるかどうかだけでなく、実際の表示がスクリーンショットと一致するかも確認するよう Codex に依頼してください。スクリーンショットとリポジトリのデザインシステムが食い違う場合は、デザインシステムのトークンを優先し、余白やサイズの調整はデザイン全体の印象を保つために必要な最小限にとどめるよう伝えてください。

1 枚の画像では伝わりにくい状態があれば、追加のスクリーンショットや短い説明で補ってください。

調整を依頼するプロンプト例