Codex 
OpenDesign OpenDesignでOpenAI Codexを使ってインターフェースをデザインする方法：セットアップ、ブリーフからレビュー済みファイルまでの完全な一つのタスク、そして始める前に知っておくべき制限事項です。
「もっと落ち着いたプロジェクトボード。
明確な優先順位。集中できる余白。」
Codexによる1つの完全な設計タスク
1つのタスクを最初から最後までご紹介します：お渡しするブリーフと制約条件、返ってくる成果物、そして完了前に実施するチェックです。以下のインターフェースはこのページ用に作成した説明用の例であり、実際に記録されたCodexの実行結果ではありません。
ブリーフ小規模なプロダクトチーム向けのプロジェクト進捗ボードを設計します。全体の進捗、次のマイルストーン、ブロックされているタスクを一目で確認できるようにします。タスクはToDo、進行中、完了の間を移動します。ボードはデスクトップとモバイルの両方で動作する必要があります。
data-od-idフックを持つ、自己完結型のHTMLファイル1つブリーフを作成し、デザインシステムを選択し、受け入れ基準を定義します。
レイアウトを計画し、HTML、CSS、JavaScriptを記述し、ファイルを実行して、依頼に応じて修正します。
デザインシステムとスキルを提供し、プレビューをレンダリングし、すべてのバージョンをプロジェクト内のファイルとして保存します。
ビジュアルの階層構造、8pxグリッドに基づく間隔、両方のブレークポイント、そしてすべてのインタラクションが、引き渡し前にチェックされます。
サイドバー、ヘッダー、統計情報、カラムは8pxグリッド上に配置され、1440や390でも重なりは発生しません。
進捗、次のマイルストーン、ブロック件数はカラムヘッダーより優先されます。アクセントカラーは1つのマイルストーンラベルのみに使用します。
カラムはセグメント切り替えに変わり、マイルストーンバーは維持されます。サイドバーはタブバーに折り込まれます。
ここでプレビューをデスクトップとモバイルで切り替えられます。自身の成果物では、タスクを開いてフィルター、キーボード操作、フォーカスの挙動をテストしてください。
適合性
互換性
このガイドでは、ローカル環境のCodexについて説明します。その他のモードでは、セットアップと課金方法が異なります。公開情報は2026年9月11日時点で確認済みです。
OpenAI Codex、コーディングエージェントのことです — 以前のコード補完モデルではありません。このページはCodexでインターフェースをデザインすることについてであり、Codexアプリ自体のUIについてではありません。OpenDesignのセットアップノートには、利用可能なエージェントの一つとしてCodexが挙げられています。
ローカルのCodexでは、ChatGPTでサインインするか、OpenAIのAPIキーを使用します。それぞれ課金とポリシー上の意味合いが異なります。OpenAIの認証手順に従ってください。このページはクォータや価格を保証するものではありません。
デスクトップ版のビルドについてはダウンロードページを確認してください。ソースからのクイックスタートにあるNode.jsとpnpmの要件は、ソースからの実行に適用されるものであり、デスクトップパッケージのインストールには適用されません。互換性のある最小Codexバージョン：ここでは確認されていません。
インストールしたバージョンに表示される接続手順に従い、小さなタスクを実行してください。意図したエージェントがそれを処理し、成果物が開くことを確認してください。ダウンロードだけでは、動作する接続は確立されません。
デスクトップアプリから始める
まずダウンロードし、インストールしたバージョンに合わせてCodexのセットアップを完了させ、その後小さな結果を確認してください。この手順に従うために、OpenDesignをソースからビルドする必要はありません。
お使いのコンピューターに合ったパッケージを選び、インストールしてアプリを開いてください。
OpenDesignをダウンロードインストールしたバージョンのCodexの手順に従ってください。ローカルのCodexでは、タスクを送信する前にChatGPTサインインまたはAPIキー認証を完了させてください。
Codex の認証に関するメモを読む全体のループを判断できるよう、1回の修正を含む小さなブリーフを使用してください。
プロフィールフォームと保存確認を備えた設定画面を作成してください。私のデザインルールを使用し、デスクトップとモバイルの幅で確認してください。
ソースから実行する場合は、代わりに技術クイックスタートを参照してください。Codex にプラグインをインストールするには、下記のインストール項目を使用してください。
Codex デザインワークフロー
同じ progress-board のタスクを、ブリーフから検証済みファイルまで追っていきます。各ステップでは、あなたが提供するもの、Codex が行うこと、OpenDesign が提供するもの、そして確認すべきことを示します。
平易な言葉で3〜6行。対象ユーザー、画面の役割、対象プラットフォームを明記します。
AGENTS.md を読み込み、不明な点があれば質問します。デザインシステムと少数の厳格なルールです。これがブランドに沿った出力と、ありふれた見た目とを分ける要因になります。
Codex は、レイアウト、スタイル、インタラクション、安定したフックを備えた単一の HTML ファイルを作成します。
ファイルは、指定した幅で OpenDesign 内にレンダリングされます。ここでデザインが判断されます。
data-od-id ターゲットを公開します。プレビュー内の要素を指し示して変更を依頼します。修正はすべて新しいファイルとして作成され、既存のものが黙って上書きされることはありません。
リソース
Codex が読み取るためのインストール手順を記載したプレーンテキストのアドレスであり、ビジュアルチュートリアルではありません。プロンプトを Codex にコピーすると、Codex 自身がこのエントリを読み込みます。
https://open-design.ai/codex-plugin/ を読み込み、そのインストール手順に従って Codex に OpenDesign をインストールしてください。設定を変更する前に確認を取ってください。
Codex 向けのフロントエンドおよびデザインシステム用プラグインで、それぞれに固有のソースとセットアップ手順があります。
Codex が OpenDesign 内で生成できる成果物のタイプで、タイプごとに 1 つのスキルが対応しています。
Codex が何かを生成する前に紐づけておくべきブランドトークンとコンポーネントです。
デッキには専用のガイドがあります。出力とワークフローはプロダクトUIとは異なります。
制限事項
よくある質問
まずは小さなタスクから始めて往復のやり取りを確認し、その後に本番のブリーフを持ち込んでください。ご自身の環境に合ったオプションを選択してください。このページは環境を自動検出しません。