Создавайте и редактируйте проекты с помощью своего агента кодирования на холсте, где каждый дизайн является реальным кодом. Плагины Wonder доступны для Cursor, Claude Code и Codex.

##Установка

Курсор

1.Откройте Customize на боковой панели курсора. 2.Поищите Чудо, выберите Установить и выберите область применения пользователя или проекта.

3.В Cursor введите такую подсказку с именем одного из ваших файлов Wonder:

Приложение Wonder не обязательно должно быть открытым. Ваш агент находит файл и работает над ним в фоновом режиме.

4 При первом использовании курсор скажет, что MCP Wonder нуждается в аутентификации и покажет URL-адрес. Откройте его в своем браузере для авторизации, затем вернитесь на Cursor и отправьте ту же самую подсказку. Откройте файл в Wonder, чтобы увидеть результат, или держите его открытым, чтобы посмотреть, как он рисует в режиме реального времени.

###Клауд Код

1.Откройте терминал и запустите claude, чтобы запустить код Клода. 2. Добавить рынок:

3.Установите плагин:

4. Перезагрузить, чтобы активировать:

5. В коде Клода введите запрос, похожий на этот, с именем одного из ваших файлов Wonder:

Приложение Wonder не обязательно должно быть открытым. Клод находит файл и работает над ним в фоновом режиме.

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.