はじめに

既存のアプリの UI をすばやく反復調整したい場合は、gpt-5.3-codex-spark を使って、UI に小規模で的を絞った変更を加えられます。 Codex-Spark は OpenAI のモデルの中で最速で、ほぼ瞬時に進むリアルタイムのコーディング反復作業に最適化されています。

この方法は、見た目に関する指摘を 1 件受け、的を絞って 1 回編集し、ブラウザで 1 回確認してから次の指摘に進む、という短いループで進めると最も効果的です。

モデルの選択

UI をすばやく反復調整するには、gpt-5.3-codex-spark を利用できる場合はまずこのモデルを使用します。このモデルの能力は汎用モデルに及びませんが、リアルタイムのコーディング反復作業向けに設計されています。利用できない場合は、gpt-5.6 を使用し、推論強度を medium または low に設定します。

このトレードオフは、UI の細かな調整に適しています。ボタンの移動、ブレークポイントの調整、コンポーネントの状態変更に、最も高度な推論を行うモデルは通常必要ありません。必要なのは、すばやく応答し、該当箇所のコードを理解して適切なファイルを編集し、反復作業の負担を増やすことなくこのループを繰り返せるモデルです。

開発フロー

1. 既存のアプリを開き、該当するルートまたはコンポーネントが表示されるようにします。
2. 現在の Codex チャットをポップアウトして フローティングウィンドウ にし、作業中はブラウザ、エディター、またはデザインプレビューの近くに置いておきます。
3. Codex には、一度に 1 つの具体的な UI 変更を依頼します。ルート、ビューポート、現在のスクリーンショット、目標のスクリーンショット、またはプロダクトに関する具体的な指摘があれば含めます。
4. Codex に、現在の実装を確認し、妥当な範囲で最小限の編集を行い、アプリの既存のコンポーネント、トークン、レイアウトプリミティブ、データフローを維持するよう依頼します。
5. 結果をレビューしてから、同じチャットで次の小さな調整を依頼します。

短いプロンプトの作成

UI の細かな変更を依頼するプロンプトは、端的で範囲を絞った内容にします。良いプロンプトでは、対象箇所、変更内容、期待する検証方法を明示します。

結果がほぼ期待どおりでも、まだ少しずれている場合は、次の依頼も同じように具体的にします：

慎重に進めるタイミング

タスクが細かな変更の範囲を超えた場合は、この高速なループを使い続けないでください。変更に、大規模なリファクタリング、デザインシステムの新しいプリミティブ、複雑なアクセシビリティ対応、または複数の画面に影響するプロダクト上の判断が必要な場合は、より高性能なモデルを使用し、プロンプトもより入念に練ってください。

UI の高速な反復調整は、Codex がアプリを一から再設計する場合ではなく、すでに把握している対象箇所を調整する場合に最も効果を発揮します。