デザインのための Codex。

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 を備えたデスクトップアプリ。

• デフォルトモデル: 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 のために訓練された初の主力モデルで、デザインワークフロー全体で画像理解が大幅に向上し、自己検証も強化されています。最終アセットを確定する前に、ムードボードやビジュアルの選択肢を生成することさえできます。
• 公式のフロントエンド skill: openai/skills カタログには、本物のセンスを徹底するフロントエンド skill が用意されています: カードレスなレイアウト、フルブリードのヒーロー、ブランド優先の階層、抑制されたモーション、最大 2 つの書体と 1 つのアクセントカラー — そして構築前に Codex にビジュアルのテーゼを書かせます。
• ブラウザ検証: Playwright skill を使えば、Codex は実際のブラウザを開き、ブレークポイントへリサイズし、ビルドが通ることだけを確認するのではなく、出力をリファレンスと照合し直します。

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

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

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

# 1. Install the Codex CLI
npm install -g @openai/codex
# or: brew install --cask codex
# or: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. Authenticate (ChatGPT sign-in recommended for higher limits)
codex            # then choose “Sign in with ChatGPT”

# 3. Generate project context
codex            # inside your project, run /init to create AGENTS.md

# 4. Add the official frontend skill, then restart Codex
# (in the Codex app) $skill-installer frontend-skill

# 5. Wire the Figma MCP server (optional, for design handoff)
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 \
  "Implement this design in React + Vite + Tailwind + TypeScript.
   Reuse my existing design-system components and tokens.
   Match spacing, layout, and hierarchy; make it responsive.
   Use the Playwright skill to verify the UI matches the
   references and iterate until it does."

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

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・リファレンス・制約がなければありきたりな美意識へと落ち着きます。それこそが解くべき本当の問題であり — それはモデルの形ではなく、デザインツールの形をしています。

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

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

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

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

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 のサーバーを経由してルーティングされることは決してありません。