> ## 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.

# Design is code

> Code is just a material that allows you to create something.

For years, design and code have lived apart. A design gets handed off, re-implemented in code, and from the first change onward the two drift, leaving designers to maintain a second version of a product they can't actually touch.

We're closing that gap. In Wonder you work directly with the medium you're designing for: no handoff, and no being pushed off the canvas you love into a terminal or some other developer environment. The canvas is built on real code, so everything you design is ready to ship.

## One source of truth

The real source of truth is the product itself: the live, user-facing interface your code ships. Your codebase always holds the latest and greatest version of it, yet for a long time that surface was uneditable for designers.

AI is changing that. Designers increasingly have the power to shape the real interface directly, without the handoff. But working in code usually means leaving the canvas behind. Wonder brings your codebase to the canvas instead: you work with the actual components, tokens, icons, and screens from your repository, and Wonder reads from GitHub directly, so there's no second tool to keep in sync.

## It works both ways

The connection runs in both directions:

| Direction | What happens |
| - | - |
| **Pull** | Bring code onto the canvas, so your designs reflect what's actually built. |
| **Push** | Send approved canvas changes back to your repository as a pull request. |

## Why it matters

We believe designers should be the advocates for users across the whole product-building lifecycle, and that means shaping the user-facing interface exactly as it ships, not a mockup of it. Wonder closes gaps designers and developers have lived with for years:

* **No drift**: one source of truth, not two sides of the same coin to keep reconciled.
* **Real building blocks**: you design with your actual components and tokens, right on the canvas.
* **Faster to ship**: what you sign off on the canvas is what ends up in the product.

## Where this shows up

You'll see this idea throughout Wonder:

* [Variables](https://wonder.design/docs/variables.md) stay in sync with the values in your codebase.
* [Bring your code onto the canvas](https://wonder.design/docs/bring-your-code-onto-the-canvas.md) shows how to design with your real components, tokens, and icons.
* [MCP](https://wonder.design/docs/wonder-mcp.md) lets your coding agent read and write the canvas.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.