Codex/ChatGPT 向け Open Design プラグイン

以下の指示を、お使いの ChatGPT デスクトップアプリの任意のタスクに入力してください

Read open-design.ai/codex-plugin to install the Open Design plugin and set up a new task for me.

一度インストールすれば、Codex/ChatGPT からそのまま制作。

まず Codex と Open Design のワークスペース全体を確認し、実際のインストールから完成までの流れを順番にたどれます。

Open Design プラグインを使う実際の Codex タスクと、完成した Goodfield カフェの Web サイト
実際の Codex タスク プロンプト、Open Design への引き継ぎ、生成ファイル、完成した Web サイトを、ひとつのワークスペースで確認できます。
  1. 01 インストール

    Codex にインストールを頼む

    この指示を Codex のタスクに貼り付けます。Codex がリポジトリのインストール手順を読み、公開マーケットプレイスに依存せず、プラグインとローカル MCP の設定を完了します。

    Read open-design.ai/codex-plugin to install the Open Design plugin and set up a new task for me.
  2. 02 使う

    新しい Codex タスクを始める

    インストールが完了したら、新しいタスクでインストール済みの Open Design プラグインを開き、「Try now」を選んで始めます。

    「Try now」ボタンが表示された、Codex の実際の Open Design プラグイン詳細画面
  3. 03 制作

    デザインブリーフを書く

    Open Design をメンションし、作りたい成果物、必要な内容、ビジュアルの方向性、レスポンシブ対応の要件を伝えます。

    Open Design に温かみのある街のカフェの Web サイト制作を依頼する、実際の Codex プロンプト
  4. 04 制作

    リアルタイムの引き継ぎを確認する

    Codex が方向性を確認してプロジェクトを作成し、Open Design へ作業を引き継ぎます。生成されたファイルもその場で表示されます。

    街のカフェの Web サイトを生成中の、実際の Codex と Open Design のワークスペース
  5. 05 制作

    完成した成果物を確認する

    同じタスク内に、レスポンシブな Goodfield カフェのランディングページ、生成画像、編集可能なファイルが返ってきます。

    Codex の Open Design プラグインで生成された、完成版 Goodfield 街のカフェのランディングページ

そのまま使えるプロンプトから始める。

Codex のプラグインメニューから Open Design を選び、作りたい成果物を説明します。同じタスクの中で、続けて調整を重ねられます。プラグインへのメンションは、Codex 上で Open Design のチップとして表示されます。

手触りのあるカッティングマットとコルクのオブジェを配した Oryzo の商品ランディングページ

プロダクトローンチ

@open-design Create a tactile product launch page for Oryzo, a sustainable rice-husk material. Use a cutting-mat grid, cork-toned product photography, oversized typography, technical labels, and a warm editorial layout.
タイポグラフィで地図を表現した Open Design Osaka のイベントランディングページ

イベントページ

@open-design Create an event landing page for Open Design Osaka. Lead with a typographic map of Japan, restrained ivory and olive colors, the date and location, speaker details, and a clear registration action.
ダークトーンのエディトリアルデザインによる Fable 5 のプロダクト Web サイト

エディトリアルサイト

@open-design Create a dark editorial website for Fable 5. Use a near-black canvas, small navigation, a bold serif headline, restrained white typography, and subtle interactive controls.
明るいキャンバス上に展開する Open Design のモデルタイムライン画面

インタラクティブストーリー

@open-design Create an interactive release story for Open Design 0.9.0. Visualize a model timeline on a bright canvas with floating cards, connecting lines, color-coded labels, and responsive horizontal exploration.

インストール前によくある質問

タスクの進行は Codex が担い、Open Design がビジュアル制作のワークフローを担当します。

  1. このプラグインを入れると、Codex で何ができるようになりますか?

    Web サイト、スライド、プロトタイプ、デザインシステムを作るための Open Design ワークフローが Codex に加わります。プラグインはローカルの Open Design MCP に接続し、ブリーフ作成、プロジェクト管理、成果物の生成を行います。

  2. どの Codex 製品に対応していますか?

    現在のパッケージは Codex Desktop と Codex CLI に対応しています。最初に対応するホストは Codex です。

  3. インストール前に何が必要ですか?

    Codex CLI 0.144.6 以降と Open Design 0.17.0 以降が必要です。ローカル MCP を登録する前に Open Design をインストールしてください。

  4. なぜ新しい Codex タスクを始める必要がありますか?

    Codex はタスクの開始時にプラグインと MCP の機能を読み込みます。新しいタスクを始めることで、インストールした Open Design Cloud プラグインが利用できるようになります。

  5. Open Design のウィンドウは開いたままにする必要がありますか?

    いいえ。登録済みのローカル MCP が必要に応じて、署名済みの Open Design ランタイムをバックグラウンドで起動できます。

次の Codex/ChatGPT タスクに Open Design を。

プラグインをインストールしてローカル MCP を接続し、 @open-designを呼び出します。

Open Design デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート/スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS、Windows、Linux に対応