# Wonder

> Wonder is a design tool where what you design is the code you ship — design with AI on a canvas and export production-ready React + Tailwind.

Wonder connects to coding agents over MCP so design changes and code changes stay in sync.

## Product

- [Homepage](https://wonder.design/): product overview and pricing.
- [Sign up](https://app.wonder.so/): create a Wonder account.
- [Documentation](https://wonder.design/docs): guides and reference.
- [MCP documentation](https://wonder.design/docs/mcp): connect Wonder to a coding agent.
- [Downloads](https://wonder.design/downloads): the Wonder desktop app for macOS and Windows.
- [Changelog](https://wonder.design/changelog): recent features, improvements, and fixes.
- [Blog](https://wonder.design/blog): writing from the Wonder team.

## Documentation

- [What is Wonder](https://wonder.design/docs/what-is-wonder): The big idea: a canvas where you design with AI, and what you design is real, shippable code.
- [Design is code](https://wonder.design/docs/design-is-code): How Wonder keeps your canvas and your codebase as two views of the same source.
- [Designing with AI](https://wonder.design/docs/ideate-on-the-canvas): Prompt Wonder to ideate, explore directions, and refine designs directly on the canvas.
- [Variables & tokens](https://wonder.design/docs/variables): Define and manage design tokens for color, typography, and spacing, kept in sync with code.
- [Icons](https://wonder.design/docs/icons): Browse, add, and manage icons in your Wonder files.
- [Vectors](https://wonder.design/docs/generate-vectors): Create and edit vector graphics on the canvas.
- [Shaders](https://wonder.design/docs/shaders): Add shaders for rich, dynamic visual effects.
- [From Figma](https://wonder.design/docs/bring-your-designs): Paste existing Figma frames straight onto the canvas: layouts and components intact.
- [From the browser](https://wonder.design/docs/wonder-capture): Grab designs and inspiration from any webpage with the Wonder Capture extension.
- [From your codebase](https://wonder.design/docs/from-your-codebase): Connect a repository to bring your real components, tokens, and icons onto the canvas.
- [MCP](https://wonder.design/docs/mcp): Connect Wonder to your coding agent.
- [GitHub](https://wonder.design/docs/github): Bring repository code into Wonder and export pull requests.
- [Full docs (llms-full.txt)](https://wonder.design/llms-full.txt): every documentation page concatenated into one plain-text file.

## Machine-readable surfaces

- [Sitemap](https://wonder.design/sitemap.xml)
- [API catalog](https://wonder.design/.well-known/api-catalog)
- [Robots policy](https://wonder.design/robots.txt): search=yes, ai-input=yes, ai-train=no
- Markdown: send `Accept: text/markdown` to home, docs, changelog, and blog pages for a plain-text version.