あらゆるデザインが実際のコードであるキャンバスに、コーディングエージェントでデザインを作成および編集します。 ワンダープラグインは、Cursor、Claudeコード、およびCodexで利用可能です。

インストール

カーソル

1. CursorのサイドバーのCustomizeを開きます。 2.Wonderを検索し、Installを選択し、ユーザーまたはプロジェクトスコープを選択します。

3。 Cursorでは、ワンダーファイルの1つの名前で、このようにプロンプトを入力します。

ワンダーアプリはオープンする必要はありません。 エージェントはファイルを見つけ、バックグラウンドで動作します。

4。 最初の使用では、CursorはWonder MCPが認証を必要とし、URLが表示されます。 ブラウザで開くと、承認し、Cursorに戻り、同じプロンプトを再送信します。 結果を見るためにWonderでファイルを開くか、それを開いたままにしてリアルタイムで描画します。

##Claudeコード

1。 ターミナルを開き、[claudeを実行して、Claudeコードを開始します。 2. マーケットプレースを追加します。

3. プラグインをインストールします。

4. 活性化するためにリロード:

5。 クロードコードでは、ワンダーファイルの1つの名前で、このようなプロンプトを入力します。

ワンダーアプリはオープンする必要はありません。 Claude はファイルを見つけ、バックグラウンドで動作します。

Wonder plugins

Create and edit designs with your coding agent on a canvas where every design is real code. Wonder plugins are available for Cursor, Claude Code, and Codex.

Install

Cursor

1. Open Customize in the Cursor sidebar.

2. Search for Wonder, select Install, and choose a user or project scope.

3. In Cursor, type a prompt like this, with the name of one of your Wonder files:

   Generate a purple button in my Wonder file "Landing page"
   

   The Wonder app doesn’t need to be open. Your agent finds the file and works on it in the background.

4. On first use, Cursor will say the Wonder MCP needs authentication and show a URL. Open it in your browser to authorize, then come back to Cursor and re-send the same prompt. Open the file in Wonder to see the result, or keep it open to watch it draw in real time.

Claude Code

1. Open your terminal and run claude to start Claude Code.

2. Add the marketplace:

   /plugin marketplace add aquila-lab/wonder-plugins
   

3. Install the plugin:

   /plugin install wonder@wonder
   

4. Reload to activate it:

   /reload-plugins
   

5. In Claude Code, type a prompt like this, with the name of one of your Wonder files:

   Generate a purple button in my Wonder file "Landing page"
   

   The Wonder app doesn’t need to be open. Claude finds the file and works on it in the background.

6. On first use, Claude will say the Wonder MCP needs authentication and print a URL. Open that link in your browser to authorize, then come back to Claude Code and re-send the same prompt. Open the file in Wonder to see the result, or keep it open to watch it draw in real time.

Codex

1. With the Codex CLI installed, add the Wonder marketplace from your terminal:

   codex plugin marketplace add aquila-lab/wonder-plugins
   

2. Install the plugin:

   codex plugin add wonder@wonder
   

3. Restart Codex and start a new chat. Type @wonder and select the installed Wonder plugin. The Wonder · Computer use entry starts desktop automation.

4. Send this read-only connection check in Codex. The Wonder app doesn’t need to be open:

   Use Wonder MCP to list my Wonder files without changing anything. If MCP is unavailable or authentication fails, stop and explain how to connect it. Do not use computer use.
   

5. Complete Wonder sign-in when Codex prompts you, then retry the connection check. Confirm Codex calls a Wonder MCP tool and returns your Wonder files before asking it to edit a design.

The bundled wonder-design skill guides Codex to use Wonder MCP for canvas operations and explain connection problems. Computer use requires an explicit user request. This guidance applies when the skill loads; app picker behavior and global tool routing are controlled by Codex.