Codex 
OpenDesign OpenDesignでOpenAI Codexを使ってインターフェースをデザインする方法：セットアップ、ブリーフからレビュー済みファイルまでの完全な一つのタスク、そして始める前に知っておくべき制限事項です。
Codexによる1つの完全な設計タスク
1 つのデザインジョブを引き継ぎまで追います。あなたが提供するブリーフと制約、Codex が返すファイル、完了と言う前に残るチェックです。以下のインターフェースはこのページ用の例として構成されたもので、キャプチャされた Codex セッションではありません。
ブリーフ小規模なプロダクトチーム向けのプロジェクト進捗ボードを作成してください。全体の進捗、次のマイルストーン、ブロックされた作業を一目でわかるように表示します。タスクは To do、In progress、Done を移動します。デスクトップとモバイルで動作する必要があります。
data-od-idフックを持つ、自己完結型のHTMLファイル1つあなたはブリーフを書き、デザインシステムを選び、受け入れ基準を設定します。
Codex はレイアウトを計画し、HTML、CSS、JavaScript を書き、ファイルを実行し、あなたの依頼に応じて修正します。
OpenDesign はデザインシステムとスキルを提供し、プレビューをレンダリングし、各バージョンをプロジェクト内のファイルとして保持します。
引き継ぎ前に、視覚的階層、8px グリッド上のスペーシング、両方のブレークポイント、すべてのインタラクションを確認します。
サイドバー、ヘッダー、統計、列は 8px グリッドに整列し、1440 または 390 で重なりはありません。
進捗、次のマイルストーン、ブロック件数は列ヘッダーより優先され、アクセントは 1 つのマイルストーンラベルにのみ表示されます。
モバイル幅では、列はセグメント化スイッチになり、マイルストーンバーは残り、サイドバーはタブバーに折りたたまれます。
このページでプレビューをデスクトップとモバイルで切り替えます。自分の成果物では、タスクを開き、フィルター、キーボードナビゲーション、フォーカス動作を試します。
適合性
互換性
このページはローカル Codex についてです。他のモードはセットアップと請求が異なります。参照確認日：2026 年 9 月 11 日。
OpenAI Codex、コーディングエージェント — 古いコード補完モデルではありません。このページは Codex を使ったインターフェース設計についてであり、Codex アプリ自体の UI についてではありません。OpenDesign の セットアップノート では Codex を利用可能なエージェントの 1 つとして挙げています。
ローカル Codex では、ChatGPT でサインインするか、OpenAI API キーを使用します。この 2 つは請求とポリシーへの影響が異なります。OpenAI の認証手順 に従ってください。このページはクォータや価格について何も約束しません。
デスクトップビルドについては、ダウンロードページ を参照してください。ソースクイックスタート の Node.js と pnpm の要件は、ソースから実行する場合に適用され、デスクトップパッケージをインストールする場合には適用されません。互換性のある最小 Codex バージョン：ここでは未確認。
インストールされているバージョンに表示される接続手順を使用し、小さなタスクを実行します。意図したエージェントが処理し、成果物が開くことを確認します。ダウンロードをインストールしただけでは、接続が機能する証明にはなりません。
デスクトップアプリから始める
ダウンロードから始め、インストールしたバージョンの Codex セットアップを完了し、小さな結果を確認します。このパスに従う場合、OpenDesign をソースからビルドする必要はありません。
お使いのマシン用のパッケージを選び、インストールし、アプリを開きます。
OpenDesignをダウンロードインストールしたバージョンに同梱されている Codex の指示を実行します。ローカル Codex では、タスクを送信する前に ChatGPT サインインまたは API キー認証を完了してください。
Codex の認証に関するメモを読む最初のブリーフは、1 回の修正を含む完全なループを判断できる程度に小さく保ちます。
プロフィールフォームと保存確認を備えた設定画面を作成してください。私のデザインルールに従ってください。デスクトップとモバイルの幅で確認してください。
代わりにソースから実行するには、テクニカルクイックスタート に従ってください。Codex にプラグインをインストールするには、以下の インストール項目 を使用します。
Codex デザインワークフロー
最初のプロンプトからレビュー済み HTML まで追跡した進捗ボードのブリーフ。各段階で、あなたの入力、Codex の動き、OpenDesign の役割、そしてあなたが引き続き担うチェックを示します。
短く平易な言葉のブリーフ — 3 ～ 6 行。誰が画面を使うか、何をする必要があるか、どのプラットフォームが重要かを述べます。
AGENTS.md を読みます。曖昧な要件を推測する前に質問します。デザインシステムといくつかの厳格なルール。その組み合わせにより、Codex の出力が一般的な見た目にデフォルトするのではなく、ブランドに沿ったものになります。
Codex は自己完結型の HTML ファイルを 1 つ生成します。レイアウト、スタイル、インタラクション、安定したフックを含みます。
OpenDesign は指定した幅でファイルをレンダリングします。ここでデザインが評価されます。
data-od-id ターゲットを公開します。プレビュー内の要素を指定して変更をリクエストします。各リビジョンは新しいファイルになり、何も黙って上書きされません。
リソース
Codex が読むことを目的としたインストール手順を含むプレーンテキストのアドレスであり、視覚的なウォークスルーではありません。プロンプトを Codex に貼り付けると、エージェントがエントリ自体を読み取ります。
Codex に OpenDesign をインストールします: https://open-design.ai/codex-plugin/ を読み、そのインストール手順に従ってください。構成を変更する前に確認してください。
Codex 用に構築されたフロントエンドおよびデザインシステムのプラグインで、それぞれに独自のソースとセットアップ手順があります。
Codex が OpenDesign 内で生成できる成果物のタイプで、タイプごとに 1 つのスキルが対応しています。
Codex が画面を生成する前にバインドするブランドトークンとコンポーネント。
デッキには独自のガイドがあり、その出力とワークフローはプロダクト UI の作業とは異なります。
制限事項
よくある質問
AGENTS.md や DESIGN.md などのプロジェクト指示にブランドルールを明記し、対象のブレークポイントでレンダリングされたページを確認します。フロントエンドデザインのスキルも、より意図的な視覚的方向性を提供できます。結果は自分でレビューしてください。ブラウザチェックはデザインの判断を置き換えるものではありません。DESIGN.md や AGENTS.md などのプロジェクト指示で提供し、Codex にそれらに従うように指示します。OpenDesign にも デザインシステムライブラリ があり、インターフェースを生成する前に選択できます。# 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/mcpcodex -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."codex "Build a responsive pricing section in React + Tailwind + TypeScript.
Reuse my design-system tokens and Button/Card components.
Include hover, focus, and mobile-stacked states.
Use the Playwright skill to check it against pricing-desktop.png
and pricing-mobile.png at 375px and 1280px, and iterate until it matches."