用你的编码代理在画布上创建和编辑设计，每个设计都是真实代码。Wonder 插件可用于光标、Claude Code 和 Codex。

安装

光标

1. 在光标侧边栏打开自定义。

2. 搜索 Wonder，选择 Install，然后选择用户或项目范围。

3. 在光标中，输入如下提示，并用你其中一个Wonder文件的名称：

Wonder 应用不需要打开。你的经纪人会找到文件并在后台处理。

4. 首次使用时，Cursor 会提示 Wonder MCP 需要认证并显示一个 URL。在浏览器中打开它进行授权，然后返回 Cursor 并重新发送同样的提示。在 Wonder 中打开文件查看结果，或者保持开启以实时观看其绘制过程。

克劳德·科德

1. 打开终端并运行claude以启动Claude代码。

2. 添加市场：

3. 安装插件：

4. 装填以激活：

5. 用Claude代码，输入类似这样的提示，并以你其中一个Wonder文件的名称命名：

Wonder 应用不需要打开。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.