Free trial
A Free plan at $0 per month is available for experimenting, with limited AI chat tokens, up to 3 private files, 100 shaders and 25 MB image uploads. No time-limited trial is described.
Learn moreWonder
AI design canvas whose output is real React and Tailwind code
Intermediate API
What is Wonder?
Wonder is an AI design canvas where generated and hand-edited screens are backed by real code. Designers can copy React and Tailwind output or connect coding agents through MCP, with a free plan and a per-seat Pro tier.
Wonder is a design tool that places AI generation, manual editing and code context on a single canvas. Rather than producing static mockups that a developer later rebuilds, it uses a design format that maps one to one to code, so a finished screen can be copied out as React and Tailwind or handed to a coding agent. It is published by Aquila Labs and runs in the browser, with a downloadable app offered as well. In practice, a designer describes what is needed in a chat panel, picks a model (the homepage shows Claude Opus 4.6), and the agent generates screens, such as a complete set of mobile app views. From there the familiar editing surface takes over: a layers panel, a properties panel and a toolbar. Quick actions cover changing a theme, creating variants, swapping images, adjusting spacing and editing copy. Images can be generated directly on the canvas instead of leaving placeholders, and a shader library adds interactive visual effects. Earlier designs act as context for later ones, which supports exploring iterations without starting over. The code link goes both ways. Wonder MCP connects the canvas to coding agents including Claude Code, Cursor and Codex, so a team can start from what is already built, iterate visually and push the result back toward production. This targets product designers, design engineers and small product teams who want to remove the handoff step between design and implementation. Pricing follows a three tier model. The Free plan limits AI chat tokens and caps private files at three. Pro costs $16 per user per month billed yearly and adds $20 of monthly AI tokens, unlimited private files, full editor collaboration and priority support. Enterprise adds SAML/SSO and admin controls. Among alternatives, Wonder sits between traditional vector design tools and AI app generators: it keeps a visual canvas for precise edits while treating code as the underlying source rather than an export afterthought.
How do you use Wonder?
1Open Wonder in the browser or install the app
Start in the browser editor or download the desktop app. The Free plan needs no payment to begin experimenting.
2Describe the screens you want
Type a prompt in the chat panel, such as a set of app screens, and choose the AI model. The agent builds the layout on the canvas.
3Refine with canvas tools and quick actions
Use the layers and properties panels for precise edits, or quick actions to create variants, change the theme, swap images and edit copy.4Generate images and add shaders
Replace placeholders by describing images to generate on the canvas, then apply shaders for interactive visual effects.5Connect a coding agent through MCP
Follow the MCP guide to link Claude Code, Cursor or Codex to Wonder, then send designs to code or pull in existing work.
6Export the code
Copy the React and Tailwind output or send it to your agent so the design ships without a rebuild.
Pros and cons
Pros
- Designs map one to one to code, so React and Tailwind can be copied out without a separate handoffAI
- MCP connection links the canvas to coding agents such as Claude Code, Cursor and CodexAI
- Combines AI chat generation with precise manual editing in a familiar layers and properties interfaceAI
- Generates images on the canvas, removing placeholder assets from mockupsAI
- Free plan includes unlimited generation via MCP and access to 100 shadersAI
Cons
- Free plan allows only three private files and limited AI chat tokens, which constrains real projectsAI
- Code output is shown as React and Tailwind only, so teams on other stacks get less valueAI
- AI usage beyond the included $20 monthly Pro tokens may require extra spend; overage terms are not statedAI
- Collaboration is limited on Free and advanced team analytics are reserved for paid plansAI
- Value depends on an existing coding agent workflow, which designers without developers nearby may not haveAI
How much does Wonder cost?
Pricing
Free is $0 per month with limited AI chat tokens and up to 3 private files. Pro is $16 per user per month billed yearly (save 20%), adding $20 monthly AI tokens, unlimited private files and priority support. Enterprise is custom, with SAML/SSO and admin controls.
Learn moreSupport
Free users get community support through Slack and Discord. Pro adds priority support, and Enterprise includes dedicated support and priority onboarding.
Integrations
Wonder MCP connects the canvas to coding agents including Claude Code, Cursor and Codex. The AI chat offers models such as Anthropic's Claude Opus 4.6.
Learn moreFeatures
AI agent that generates screens from prompts, a canvas with layers and properties panels, quick actions for variants and themes, on-canvas image generation, a shader library, design to React and Tailwind code export, and an MCP connection to coding agents.
Frequently asked questions about Wonder
How much does Wonder cost?
Free is $0 per month with limited AI chat tokens and up to 3 private files. Pro is $16 per user per month billed yearly (save 20%), adding $20 monthly AI tokens, unlimited private files and priority support. Enterprise is custom, with SAML/SSO and admin controls.Does Wonder offer a free trial?
A Free plan at $0 per month is available for experimenting, with limited AI chat tokens, up to 3 private files, 100 shaders and 25 MB image uploads. No time-limited trial is described.Does Wonder have an API?
Yes, Wonder offers an API.How do you use Wonder?
The walkthrough on this page covers 6 steps: 1. Open Wonder in the browser or install the app 2. Describe the screens you want 3. Refine with canvas tools and quick actions 4. Generate images and add shaders 5. Connect a coding agent through MCP 6. Export the code.What platforms does Wonder support?
Wonder is available on Web App.What does Wonder integrate with?
Wonder MCP connects the canvas to coding agents including Claude Code, Cursor and Codex. The AI chat offers models such as Anthropic's Claude Opus 4.6.
