> ## Documentation Index
> Fetch the complete documentation index at: https://wonder.design/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Apply a design to your code
> Add a design from the canvas to your chat and have your agent build it in your app, check the result in the Preview, or hand the design to a coding agent outside Wonder.
Once a design looks right on the canvas, your agent builds it in your app. There's no separate apply button: you add the design to your chat and ask for it, then check the result in the Preview next to the design.
**Before you start** · Desktop app or any MCP client · Free plan
To build in your code from Wonder, you need the desktop app, a repository and a chat with Claude Code or Codex signed in. To use another coding agent, such as Cursor, you need the [Wonder MCP](https://wonder.design/docs/wonder-mcp.md) installed in it.
## Ask your agent to build a design
1. Open a chat in the worktree of the repository you want to change.
2. Select the frames or layers you want to build on the canvas.
3. Press ⌘ L, or click the button at the selection's top-right corner. Its tooltip says **Add to chat**. Each frame or layer gets a chip in your message.
4. Say what to build and where, for example "Apply this design to the book page", and send.
Your agent reads each frame or layer you added from the canvas and changes your code to match it. It treats the design as a picture of what to build, not code to paste:
* It reuses the components your app already has. Where the design differs from one, it adds an option to that component rather than making a copy, and tells you when it had to make a new one.
* It uses your code's own colors, spacing, fonts and icons instead of the design's raw values.
* It follows the way your project already organizes its files and data.
See [Add to chat from the canvas](https://wonder.design/docs/add-to-chat-from-the-canvas.md) for every way to attach a design, including attaching your selection automatically.
## Check the result in the Preview
1. Start the Preview of the chat's worktree. See [Preview your running app](https://wonder.design/docs/preview-your-running-app.md).
2. Put the Preview next to your design on the canvas and open the same page in both.
3. If something doesn't match, tell your agent what's different. Add the design to the message again so it compares against the right frame.
The Preview runs the code in the worktree, so it shows your agent's changes as soon as your app reloads them.
## Fix details in your running app
To point at what's wrong in the app itself rather than in the design, use Inspect in the Preview:
1. Select the Preview, then click **Inspect** in the bar at the bottom of the canvas, or press ⌘ ⇧ I.
2. Click the element that's off. Hold ⌥ over it to check its size and spacing.
3. Click **Add to chat** next to it, or press ⌘ L.
4. Say what should change, for example "match the padding of the card in my design", and send.
Inspect doesn't change your app: your agent makes the change in your code. Your agent gets the element, the page it's on and, when Wonder can tell, the file and line it comes from. See [Inspect your running app](https://wonder.design/docs/inspect-your-running-app.md).
## Use a coding agent outside Wonder
You can hand a design to any coding agent that has the [Wonder MCP](https://wonder.design/docs/wonder-mcp.md), such as Cursor, Claude Code in your terminal or Codex.
1. Select the frames or layers on the canvas.
2. Right-click and choose **Copy as > Copy prompt**, or press ⌘ ⇧ ⌥ C. You can also find **Copy prompt** in ⌘ K. Wonder says **Prompt copied to clipboard**.
3. Paste the prompt into your coding agent and send it.
The prompt links to each frame or layer you selected and asks the agent to read them through the Wonder MCP and build them with your app's own components and tokens. It also carries a code snapshot of the design, as a fallback. For a large design the snapshot is left out, and the agent reads the design through the Wonder MCP instead.
When your repository is also open in Wonder, check the result in the [Preview](#check-the-result-in-the-preview) the same way.
## What your agent does without asking
Building a design changes files in the chat's worktree. Your agent creates a branch, commits, pushes or opens a pull request only when you ask it to, and it never force-pushes or changes commits that are already on GitHub unless you ask.
To review what changed and keep it, see [Files, changes and terminal](https://wonder.design/docs/files-changes-and-terminal.md) and [Commit, push and pull requests](https://wonder.design/docs/commit-push-and-pull-requests.md).
## If something goes wrong
* **"Select a chat first".** No chat is open to add the design to. Open or start a chat in the repository's worktree, then press ⌘ L again.
* **There's no Add to chat button.** Adding to chat needs the desktop app with Claude Code or Codex signed in, and edit access to the file. See [Add to chat from the canvas](https://wonder.design/docs/add-to-chat-from-the-canvas.md#if-something-goes-wrong).
* **"Failed to copy prompt to clipboard".** Wonder couldn't write to your clipboard. Click the canvas and copy the prompt again.
* **Copy prompt is missing.** It isn't offered for a prototype. Select the frames or layers themselves.
* **Your outside agent can't read the design.** It doesn't have the Wonder MCP, or isn't signed in to it. See [Install](https://wonder.design/docs/wonder-mcp.md#install) and [Wonder MCP troubleshooting](https://wonder.design/docs/wonder-mcp-troubleshooting.md).
* **The app doesn't match the design.** Add the design again, or use [Inspect](#fix-details-in-your-running-app) to point at the part that's off, and say exactly what differs.
## Related
* [Add to chat from the canvas](https://wonder.design/docs/add-to-chat-from-the-canvas.md)
* [Inspect your running app](https://wonder.design/docs/inspect-your-running-app.md)
* [Files, changes and terminal](https://wonder.design/docs/files-changes-and-terminal.md)
* [Commit, push and pull requests](https://wonder.design/docs/commit-push-and-pull-requests.md)
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.