모든 디자인이 실제 코드인 캔버스에 코딩 에이전트와 디자인을 만들고 편집합니다. Wonder 플러그인은 Cursor, Claude Code 및 Codex에서 사용할 수 있습니다.

설치

# # # 커서

1. 오픈 ** 커서 사이드바에서 ** 사용자 정의.

2. Wonder를 검색하고 Install를 선택하고 사용자 또는 프로젝트 범위를 선택하십시오.

3. Cursor에서는 Wonder 파일의 이름과 같은 프롬프트를 입력합니다.

Wonder 앱이 열릴 필요가 없습니다. 귀하의 에이전트는 파일을 찾아 배경에서 작동합니다.

4. 첫 번째 사용에서 Cursor는 Wonder MCP가 인증하고 URL을 표시합니다. 브라우저에서 권한으로 열고, Cursor로 돌아와 같은 프롬프트를 다시 종료합니다. 결과를 보시려면 Wonder의 파일을 열고, 실제 시간에 그리기 위해 엽니다.

Claude 코드

1. 터미널을 열고 claude을 실행합니다.

2. 시장 추가:

3. 플러그인 설치:

4. 그것을 활성화하는 Reload:

5. Claude 코드에서, 이 같은 프롬프트를 입력, 당신의 Wonder 파일의 이름:

Wonder 앱이 열릴 필요가 없습니다. Claude는 파일을 찾아 배경에서 작동합니다.

6. 명세.

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.