Codex/ChatGPT 向け OpenDesign プラグイン

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

/goal Read https://open-design.ai/codex-plugin/ to install OpenDesign for Codex and set up a new task for me.

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

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

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

    Codex にインストールを頼む

    この指示を Codex のタスクに貼り付けます。Codex が正規の Git マーケットプレイスソースを追加し、プラグインが未インストールの場合にのみインストールして、公開カタログへの掲載を必要とせずにローカル MCP の設定を完了します。

    /goal Read https://open-design.ai/codex-plugin/ to install OpenDesign for Codex and set up a new task for me.
  2. 02 使う

    新しい Codex タスクを始める

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

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

    デザインブリーフを書く

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

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

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

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

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

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

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

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

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

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

手触りのあるカッティングマットとコルクのオブジェを配した 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.
タイポグラフィで地図を表現した OpenDesign Osaka のイベントランディングページ

イベントページ

@open-design Create an event landing page for OpenDesign 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.
明るいキャンバス上に展開する OpenDesign のモデルタイムライン画面

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次の Codex/ChatGPT タスクに OpenDesign を。

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

OpenDesign デスクトップ版

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

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

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

macOS と Windows に対応