Codex でデザイン：OpenAI Codex で UI を作る

OpenAI Codex とは実際に何か（そして何でないか）

まず、「Codex」を検索するほぼ全員がつまずく区別から。元々の OpenAI Codex は、初期の GitHub Copilot を支えた 2021 年のコード補完モデルで、2023 年に提供終了しました。本ページが扱うのはそれではありません。今日の Codex は OpenAI のエージェント型コーディングツールであり、自然言語のタスクから計画・記述・実行・検証を行います。

現代の Codex は 4 つの面で提供されます: ターミナル CLI（Rust で書き直され、Apache-2.0 ライセンス）、VS Code・Cursor・Windsurf 向けの IDE 拡張機能、委任された非同期タスク向けのクラウド/Web 体験、そしてアプリ内ブラウザと Computer Use を備えたデスクトップアプリ。

もうひとつ整理しておきたいのが「Codex UI」という検索の二つの意味です。ひとつは Codex 自身のインターフェース、つまり OpenAI がエージェントを動かすために提供しているデスクトップアプリと Web アプリ。もうひとつが、このページで扱う意味、Codex を使ってあなたが作る UI、つまり自分のプロダクトのコンポーネント・レイアウト・画面です。

• デフォルトモデル: 2026 年半ば時点で推奨モデルは gpt-5.5 で、gpt-5.4 は OpenAI がフロントエンドと computer use のために明示的に訓練したモデルです。
• 指示ファイル: Codex はプロジェクト内の AGENTS.md ファイル（ツール横断の標準）をプロジェクトルールとして読み込みます、デザインの規約を記述する自然な場所です。
• サンドボックス: カーネルレベルのサンドボックス（デフォルトは workspace-write）で動作するため、UI を編集するエージェントがプロジェクトの外をさまようことはありません。

• ベンダー: OpenAI
• 認証情報: OpenAI API キー（BYOK）または ChatGPT サブスクリプション（Free / Go / Plus / Pro / Business / Enterprise）
• CLI のライセンス: Apache-2.0、オープンソース

なぜ Codex は今やデザインが得意なのか

2026 年初頭、3 つの要素が重なり、Codex はありきたりなコードジェネレーターではなく本物のデザインツールになりました。

• フロントエンド向けに訓練されたモデル: OpenAI は GPT-5.4 を投入しました。これはフロントエンドと computer use のために訓練された初の主力モデルで、デザインワークフロー全体で画像理解が大幅に向上し、自己検証も強化されています。最終アセットを確定する前に、ムードボードやビジュアルの選択肢を生成することさえできます。
• 公式の frontend design skill: openai/skills カタログには、本物のセンスを強制する厳選された frontend design skill が用意されています。カードを使わないレイアウト、画面いっぱいの hero、ブランドを最優先にした階層、抑制されたモーション、書体は最大 2 種類・アクセントカラーは 1 色のみ、さらに Codex に、作り始める前に「ビジュアルの主張（visual thesis）」を書かせます。この frontend design skill を追加することが、Codex の出力を引き上げる最速の一手です。
• ブラウザ検証: Playwright skill を使えば、Codex は実際のブラウザを開き、ブレークポイントへリサイズし、ビルドが通ることだけを確認するのではなく、出力をリファレンスと照合し直します。

3 つすべての背後にある教訓: Codex はデフォルトではセンスを持っていません。制約、デザインシステム、美的な skill、具体的なリファレンス、を与えたときに良いデザインを生み出します。Open Design はまさにそれらの入力をパッケージ化しており、だからこそ両者は噛み合うのです（詳細は後述）。

デザイン作業のために Codex をゼロからセットアップする

まっさらなマシンから、UI を構築・検証できる Codex までの全行程はこちらです。

ワンクリックで始めたいですか？Open Design デスクトップアプリをダウンロード、Codex を厳選された skill とデザインシステムライブラリと一緒にまとめてあるので、Codex を agent として選ぶだけで、CLI のセットアップは一切不要でデザインを始められます。以下の手順は、Codex を自分でつなぎ込みたい場合の手動ルートです。

# 1. Codex CLI をインストール
npm install -g @openai/codex
# または: brew install --cask codex
# または: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. 認証（上限を上げるため ChatGPT ログイン推奨）
codex            # そのあと “Sign in with ChatGPT” を選択

# 3. プロジェクトコンテキストを生成
codex            # プロジェクト内で /init を実行し AGENTS.md を作成

# 4. 公式フロントエンド skill を追加し、Codex を再起動
# （Codex アプリ内で）$skill-installer frontend-skill

# 5. Figma MCP サーバーを接続（任意、デザイン連携用）
codex mcp add figma --url https://mcp.figma.com/mcp

• デザインルールを記述する: tokens、プリミティブ、規約を AGENTS.md または DESIGN.md に書き、Codex にそれを参照させましょう。そうすれば出力がありきたりな見た目に落ち着かず、ブランドに沿ったものになります。
• 適切な reasoning レベルを選ぶ: OpenAI は、最高設定よりも低〜中程度の reasoning レベルのほうがフロントエンドの結果が優れることが多いと指摘しています。

スクリーンショットから UI へのワークフロー

Codex で最も効果の高いデザインのループは、リファレンス画像を動作するレスポンシブな UI に変え、一致するまで反復することです。OpenAI 自身のガイダンスは 5 つのステップに集約されます。

1. 手元にある最も明確なビジュアルリファレンスから始めましょう、そして 1 枚のヒーローショットだけでなく、複数の状態（デスクトップとモバイル、ホバー、空、ローディング）を含めます。
2. プロンプトでは具体的に。曖昧なプロンプトはありきたりな UI を生みます。
3. デザインシステムを用意し、tokens と正規のプリミティブがどこにあるかを Codex に伝えます。
4. Playwright のインタラクティブ skill を有効にし、Codex が実際のブラウザで描画し、ブレークポイントへリサイズするようにします。
5. Codex に実装をスクリーンショットと照合し直させて反復します、単にビルドが通ることを確認するだけにしないようにします。

スクリーンショットをターミナルにドラッグするか image フラグで画像を渡し、具体的な制約を添えてプロンプトを出します:

codex -i reference-desktop.png -i reference-mobile.png \
  "このデザインを React + Vite + Tailwind + TypeScript で実装して。
   既存のデザインシステムのコンポーネントと token を再利用して。
   余白・レイアウト・階層を合わせ、レスポンシブにして。
   Playwright skill で UI が参考画像と一致するか検証し、
   一致するまで反復して。"

2 つ目のターミナルで dev サーバーを動かし、プロンプトを小さく焦点を絞って保ち、良い反復はコミットし、悪い反復は元に戻す（戻したことを Codex に伝える）ことで、各パスがクリーンなベースの上に積み上がるようにします。

Codex UI デザイン：コンポーネントから実運用のフロントエンドまで

Codex は三種類の入力から UI を作れます。文章による説明、参考スクリーンショット、あるいは Figma のフレームです。デザインシステムをコンテキストに与え、Playwright skill を有効にすれば、レスポンシブでコンポーネント単位のフロントエンドを生成し、実際のブラウザで自ら結果を検証します。

1 枚のスクリーンショットを 1 ページに変えるのはデモに過ぎません。本物のフロントエンドを出荷するのが本番の仕事です。Codex での UI デザイン作業は、単一のヒーローショットではなくシステムを構築するものとして扱ったときに良くなります、再利用可能なコンポーネント、レスポンシブなレイアウト、そしてあらゆるインタラクション状態です。GPT-5.4 の強化された画像理解と自己検証がこれを現実的にしますが、構造を与えるのは依然としてあなたです。

• まずコンポーネントから: ページ全体を組み立てる前に、tokens に沿った原子的で再利用可能なコンポーネント（ボタン、入力欄、カード、ナビ）を Codex に構築させましょう。そうすればフロントエンドが場当たり的にならず一貫性を保てます。
• デフォルトでレスポンシブに: デスクトップとモバイルのリファレンスを与え、ブレークポイントに名前を付けます。単一のビューポートを信じるのではなく、Codex に実際のブラウザでリサイズさせ、崩れるレイアウトを修正させましょう。
• あらゆるインタラクション状態: ホバー、フォーカス、アクティブ、空、ローディング、エラーの各状態を明示します、UI を完成された印象にし、ありきたりな AI の出力がたいてい飛ばしてしまう状態です。
• アクセシブルなマークアップ: セマンティックな HTML、ラベル付きのコントロール、目に見えるフォーカスリング、十分なコントラストを求め、それらを構築の一環として Codex にチェックさせます。

コンポーネントとその状態を明示的にプロンプトで指定し、そのうえで Codex にリファレンスと照合させて検証させましょう:

codex "React + Tailwind + TypeScript でレスポンシブな料金セクションを構築して。
   私のデザインシステムの tokens と Button/Card コンポーネントを再利用すること。
   ホバー、フォーカス、モバイルで縦積みになる状態を含めて。
   Playwright skill を使って pricing-desktop.png と pricing-mobile.png に対し
   375px と 1280px で照合し、一致するまで反復して。"

優れたフロントエンドの出力を「AI スロップ」から分けるパターンは検証です: Codex は UI を描画し、複数のブレークポイントにわたってあなたのリファレンスと比較し、反復します、単にビルドが通ることを確認するだけではありません。

Codex でデザインシステムを構築する

デザインシステムは出力品質に対する最大のレバーです、ありきたりな Inter と紫の見た目にデフォルトで落ち着くのではなく、あなたの色、タイプスケール、余白、コンポーネントを Codex が知る手段です。Codex に参照させるデザインシステムを与えれば、それが生み出すあらゆる画面が同じセンスを受け継ぎます。

• tokens を定義する: 色、タイポグラフィ、余白、角丸、影を名前付きの tokens として記述します、Codex が画面ごとに値を発明するのではなく再利用する語彙です。
• プリミティブを取り込む: あなたの正規のコンポーネント（Button、Input、Card、Modal）を Codex に指し示し、それぞれを描き直すのではなくそこから組み立てさせましょう。
• Codex が読む場所に記述する: エージェントが毎回読み込む AGENTS.md や DESIGN.md にルールを記述します: ヒーローカードなし、書体は最大 2 つ、アクセントカラーは 1 つ、ブランド優先の階層。
• すべてのパスで徹底する: 新しい UI をシステムと照合してドリフトを指摘するよう Codex に依頼します。そうすればデザインシステムが最初の画面のあとで形骸化せず、実体を保てます。

逆方向に進めることもできます: いくつかのリファレンス画面を Codex に渡し、出発点となるデザインシステム、tokens とプリミティブ、を抽出させ、それをあとから整えるのです。いずれにせよ、システムこそが結果を再現可能にする成果物です。

Codex + Figma: デザイン ↔ コードの往復

2026 年 2 月、OpenAI と Figma は公式パートナーシップを発表し、以前の Figma MCP ベータを第一級の双方向連携へと進化させました。これは両方向で機能します。

• デザイン → コード: Figma でフレームの「link to selection」をコピーし、それを get_design_context とともに Codex に貼り付け、既存のコンポーネントライブラリを使って実装するよう依頼します。
• コード → デザイン: generate_figma_design ツール（「Code to Canvas」）は、ライブで動作中の UI を編集可能な Figma フレームへ戻します、画面全体、選択した要素、ファイル全体のいずれでも可能です。

Figma MCP はリモートサーバーとして動作し、レート制限の対象外です。一度追加すれば、Codex、Claude Code、Cursor、VS Code などで利用できます、まさに Open Design が編成するために作られた、ポータブルでマルチエージェントな機能です。

デザインにおける Codex vs Cursor vs Claude Code

デザイン作業に唯一の勝者は存在しません、各エージェントには異なる強みがあり、経験豊富なチームはそれらを重ねて使います。公平にまとめると:

コミュニティで繰り返される結論は、センスは人間から生まれるということです: 3 つとも、skills・リファレンス・制約がなければありきたりな美意識へと落ち着きます。それこそが解くべき本当の問題であり、それはモデルの形ではなく、デザインツールの形をしています。

Codex のデザインプラグイン比較（Open Design を含む）

Codex のデザイン能力は、ほぼすべて何をプラグインするかで決まります。現在 Codex と組み合わせて使える主なデザインプラグインとツール、そしてその中で Open Design がどこに位置づけられるかを以下にまとめます：

選び方：Codex 内で OpenAI 自身のデザインフローを使いたいなら、Product Design plugin が方向性の探索、フローの監査、ライブ URL からのプロトタイピングをカバーします。素の出力品質を上げるには、frontend design skill が最もレバレッジの高い追加要素です。公式の Figma 連携 はチームが Figma を中心に働くなら必須です、しかも持ち運び可能なので、Claude Code や Cursor を含む他のどれとでも組み合わせられます。

この中で、最初から最後までオープンソース・ローカルファースト・BYOK なのは Open Design だけです。Codex を厳選された skill とデザインシステムライブラリ、構造化されたレンダーパイプライン、ローカルのデスクトップ UI で包み込みます、だから Codex を優秀にするデザインコンテキストが初回起動から揃っていて、プロジェクトごとに手作業で組み立てる必要がなく、すべての成果物が自分のリポジトリに残ります。

コードを書かないデザイナーのための Codex

Codex でデザインするのにエンジニアである必要はありません。エージェントは平易な言葉で表した意図と本物のリファレンスを受け取り、動作するレスポンシブな UI を返します、これは Codex を、フロントエンド開発者だけでなくデザイナーやプロダクト担当者にとっての本物のツールにします。コツは、コーディングのセッションではなくデザインブリーフのように使うことです。

• 平易な言葉で説明する: レイアウト、階層、トーン、感触といったデザインの言葉で欲しいものを伝え、Codex にそれをマークアップへ翻訳させましょう。
• リファレンスから作業する: スクリーンショット、ムードボード、あるいはブランドのサイトを渡します。見た目を正しくするには、どれだけの散文よりも具体的なリファレンスのほうが効きます。
• 実際のブラウザでプレビューする: Codex に結果を描画・表示させ、自分の目で判断し、リサイズし、ずれている箇所を指し示しましょう。
• 安全に反復して元に戻す: エージェントはサンドボックスで動作するので、ある方向を試し、良いパスは残し、悪いパスは何も壊さずに元に戻せます。

落とし穴、そして「AI スロップ」っぽい見た目を避ける方法

Codex 生成デザインへの最もよくある不満は、ありきたりに見えるというものです、柔らかいグラデーション、浮いたパネル、過大な角丸、ドラマチックな影、「いかにも AI が作りました」と叫ぶような Inter と紫の雰囲気。ほかにも、モバイルレイアウトの崩れ、指示が UI のコピーに漏れ出すこと、利用上限にすぐ達することが報告されています。

• フロントエンド skill をインストールする: 厳選された美的な skill は、Codex にデフォルトの見た目ではなく本物の方向性へコミットさせます。
• Playwright 検証を有効化する: Codex にブレークポイントをまたいで描画と自己チェックをさせ、レイアウトがモバイルで黙って崩れないようにします。
• tokens とリファレンスを供給する: 本物のデザイン tokens とリファレンスのスクリーンショットは、出力品質に対する最大の単一のレバーです。
• ルールを AGENTS.md に記述する: 「ヒーローカードなし、書体は最大 2 つ、ブランド優先の階層」といったスタイルルールを、エージェントが毎回読む場所に置きます。

どの対策も、エージェントに厳選されたデザインコンテキストを与えることが要だと気づくでしょう。そのコンテキストをプロジェクトごとに手作業で維持する手間こそ、Open Design が取り除くものです。

BYOK: あなたの OpenAI キー、あなたの ChatGPT プラン、あなたの上限

Codex は bring-your-own-key（BYOK）です: あなた自身の OpenAI API キーまたは ChatGPT サブスクリプションで認証し、認証情報はあなたのものです。これはコスト管理とプライバシーにとって重要です、あなたのキーや作業に関する何ひとつ、第三者を経由する必要はありません。

• 適切な reasoning レベルを選ぶ: OpenAI は、最高設定よりも低〜中程度の reasoning のほうがフロントエンドで優れた結果を出すことが多く、しかも安上がりだと指摘しています。
• プロンプトは小さく焦点を絞る: 短く具体的なタスクは、1 つの巨大なプロンプトよりも消費 token が少なく、よりクリーンな差分を生みます。
• 良い反復はコミットする: うまくいったパスを保存し、残りは元に戻します。そうすればクリーンなベースを毎回作り直すために課金される必要がなくなります。

Open Design の中で Codex を使ってデザインする

Open Design は、上記のワークフローが繰り返し求めてくるオープンソースのデザインレイヤーです。Codex を第一級のアダプターとして扱い、厳選された skill とデザインシステムのライブラリ、構造化されたレンダーパイプライン、ローカルなデスクトップ UI でそれを包みます、そのため、Codex を優れたものにするデザインコンテキストが、毎回手作業で組み立てるのではなく、最初の実行から揃っています。

1. Open Design をインストールし、エージェントとして Codex を選びます。
2. OpenAI API キー（BYOK）または ChatGPT サブスクリプションで認証します、認証情報はあなたのマシンに留まり、私たちを経由してプロキシされることは決してありません。
3. デザインシステムと skill を選び、一貫したセンスでデッキ、プロトタイプ、ランディングページを生成します。
4. あらゆる成果物と DESIGN.md ファイルは、ホスト型クラウドではなくあなた自身のリポジトリに置かれます。

同じ Codex エージェント、同じキー、それに加えて、それを取り巻く本物でポータブルなオープンソースのデザインワークフロー。ローカルファーストで Apache-2.0 なので、あなたの作業も認証情報も、マシンの外へ出ることはありません。

よくある質問

1. 01 OpenAI Codex は本当にデザイン作業ができますか？ +

   はい、フロントエンド skill、デザインシステム、本物のリファレンス画像をコンテキストに与えれば、Codex（特に GPT-5.4）は本番品質でレスポンシブな UI を生み出し、ブラウザで検証できます。そのコンテキストがなければありきたりな見た目に落ち着きがちで、それこそ Open Design が埋めるギャップです。

2. 02 これは OpenAI Codex の Product Design プラグインですか？ +

   いいえ。Open Design は Codex をエージェントとして統合する、独立したオープンソースプロジェクトです。OpenAI 自身のツールを、ローカルファーストでオープンな skill とデザインシステムのライブラリで補完します。

3. 03 Codex でデザインするには ChatGPT サブスクリプションが必要ですか？ +

   OpenAI API キー（BYOK）か ChatGPT サブスクリプションのどちらでも使えます。ChatGPT でのサインインのほうが一般的に上限が寛大ですが、いずれの場合も Open Design があなたの認証情報をプロキシすることはありません。

4. 04 フロントエンドデザインには Codex と Claude Code のどちらがよいですか？ +

   どちらも強力です。Claude Code は具体的でコードベースを踏まえたデザイン判断で知られ、Codex は GPT-5.4 以降の高いビジュアルの仕上がりを持ち、委任されたサンドボックス化ビルドに優れます。多くのチームが両方を使います、Open Design ならデザインワークフローを変えずにエージェントを切り替えられます。

5. 05 Codex を Figma に接続するには？ +

   公式の Figma MCP サーバーを追加します（codex mcp add figma --url https://mcp.figma.com/mcp）。その後、get_design_context で Figma フレームをコードで実装でき、generate_figma_design で動作中の UI を編集可能な Figma フレームへ戻せます。

6. 06 ありきたりな「AI スロップ」の美意識を避けるには？ +

   フロントエンド skill をインストールし、本物のデザイン tokens とリファレンスのスクリーンショットを供給し、ブランドルールを AGENTS.md に記述し、Playwright 検証を有効にします。Open Design はこれらを厳選されたライブラリとして提供するので、プロジェクトごとのセットアップを省けます。

7. 07 Open Design は OpenAI と提携していますか？ +

   いいえ。Codex は OpenAI の製品であり、Open Design はそれを第一級のアダプターとしてサポートする、独立したオープンソースプロジェクトです。OpenAI と Codex は OpenAI の商標です。

8. 08 私のファイルと認証情報は安全ですか？ +

   はい、Open Design はローカルファーストです。あなたのファイル、成果物、DESIGN.md はあなた自身のリポジトリに留まり、OpenAI の認証情報はあなたのエージェントが直接使い、Open Design のサーバーを経由してルーティングされることは決してありません。

9. 09 Codex はレスポンシブなフロントエンド UI を構築できますか？ +

   はい。デスクトップとモバイルのリファレンスと Playwright skill があれば、Codex はレスポンシブなフロントエンド UI を構築し、各ブレークポイントで実際のブラウザに描画し、一致するまで反復します、コンポーネント、レイアウト、インタラクション状態を含みます。デザインシステムの tokens を与えることこそ、出力をありきたりでなく一貫させる鍵です。

10. 10 Codex にデザインシステムを与えるには？ +

    あなたの tokens（色、タイプ、余白）と正規のコンポーネントを、Codex が毎回読む AGENTS.md や DESIGN.md ファイルに記述し、それに沿って構築するよう依頼します。Open Design は厳選されたデザインシステムのライブラリを備えているので、ゼロから書く代わりにシステムを選ぶだけで、Codex はあらゆる画面をそれに沿って構築します。

11. 11 コードが書けなくても Codex をデザインに使えますか？ +

    はい。Codex は平易な言葉のブリーフとリファレンス画像を動作する UI に変えるので、デザイナーやプロダクト担当者はコードを書かずに使えます。Open Design のデスクトップアプリはターミナルとセットアップを完全に取り除きます、エージェント、デザインシステム、skill を選び、ローカルな UI で生成・プレビューできます。

12. 12 Open Design は Codex での BYOK に対応していますか？ +

    はい。Open Design は bring-your-own-key です: あなた自身の OpenAI API キーまたは ChatGPT サブスクリプションで Codex を認証すると、認証情報はあなたのエージェントが直接使い、Open Design を経由してプロキシされることは決してありません。ローカルファーストなので、あなたのファイルと DESIGN.md はあなた自身のリポジトリに留まります。

13. 13 Codex に frontend design skill を追加するには？ +

    openai/skills カタログから公式の frontend design skill をインストールします。Codex アプリで frontend-skill 用の skill インストーラーを実行し、Codex を再起動してください。この frontend design skill によって、Codex はありきたりなデフォルトの見た目ではなく、本物の美学、カードを使わないレイアウト、ブランド最優先の階層、書体は最大 2 種類・アクセントカラーは 1 色、にコミットするようになります。これは Codex のデザイン品質にとって最大のレバーです。

14. 14 Codex はゼロから UI を作れますか？ +

    作れます。文章による説明、参考スクリーンショット、Figma のフレームのいずれかを渡せば、Codex がコンポーネント・レイアウト・各インタラクション状態を生成します。出力の質は与えるコンテキスト次第です。実際のトークンを持つデザインシステム、美的方向性を固定するフロントエンドの skill、そしてビルドが通ったことを確認するだけでなくブラウザでレンダリングして結果を比較させるための Playwright skill が効きます。

15. 15 「Codex UI」とは Codex アプリのことですか、それとも Codex で作る UI のことですか？ +

    どちらもそう呼ばれるため、分けて考える価値があります。Codex アプリは OpenAI がエージェントを動かすために提供する公式のインターフェースで、デスクトップと Web で利用できます。一方 Codex で作る UI とは、あなたのプロダクトのフロントエンド、つまり Codex が生成し検証するコンポーネント・レイアウト・画面のことです。このページは後者を扱います。