Design is code
Code is just a material that allows you to create something.
On this page
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 stay in sync with the values in your codebase.
- From your codebase brings your real components, tokens, and icons onto the canvas.
- GitHub connects a repository as the source of truth.
- MCP lets your coding agent read and write the canvas.