Generate and edit on one canvas
Start new design projects with AI, then refine them directly on the same canvas instead of moving between separate tools.
Wonder
Wonder is a web-based design tool for AI layouts, shared-canvas editing, and code-aware export or sync with supported coding agents.
What Wonder is
Wonder is a design tool that combines AI generation, canvas-based editing, and code-aware workflows. It is built for people who want to move from idea to design and then into production without treating design and code as separate handoffs.
The product positions itself around a single working surface: you can generate new designs, make precise edits, work with code context, and export or send output back to code. Its MCP docs extend that workflow by letting supported coding agents read and write Wonder canvas content through the Wonder MCP server.
Core capabilities
Precise iterative editing
Make targeted changes such as style updates, spacing adjustments, copy edits, layout generation, and variant creation without leaving the design surface.
Code-backed design output
Work from actual code context and copy React + Tailwind from the design so the output stays close to what can be shipped.
MCP integration with agents
Connect Wonder to supported coding agents through MCP so the agent can read and write Wonder canvas content in both directions.
Workflow tools for longer sessions
Use chat history, command palette navigation, layer search, and message editing to keep longer design sessions organized.
Built-in asset and visual generation
Generate images and shader-based visuals directly on the canvas when placeholder assets are not enough.
When to use Wonder
From idea to first canvas
Use Wonder when you want to start from a prompt, generate an initial design, and continue editing in the same workspace instead of handing work off to another tool.
Iterating on an existing design
Use the product when a design already exists but needs fine-grained changes such as spacing, copy, layout, or component variants.
Designing for production code
Use Wonder if you want your design output to stay close to implementation, including code export paths like React + Tailwind and direct connection to coding agents through MCP.
Collaborating with coding agents
Use Wonder in agent-assisted workflows where a Claude, Cursor, Codex, or similar client needs to read or update Wonder canvas content as part of the build process.
Exploring multiple directions
Use the canvas tools for longer exploration sessions when you need to compare versions, revisit prior prompts, and manage layers and chats more deliberately.
Pros and Cons
Pros
- Combines design generation, editing, and code context on one canvas.
- Supports direct export paths such as React + Tailwind, Tailwind, CSS, and PNG.
- MCP docs provide a concrete bridge to several coding agents and custom MCP clients.
- The pricing page shows a free entry tier plus paid plans for heavier usage.
Cons
- Pricing details shown in the sources are limited to plan names, monthly prices, and credit limits; there is no fuller billing explanation in the provided material.
- The public docs emphasize supported agents and MCP setup, but broader third-party integrations beyond those listed are not documented in the collected sources.
FAQ
How does Wonder connect to coding agents?
Wonder provides an MCP server at `https://mcp.wonder.so/mcp` that connects design files to agents such as Claude, Cursor, Codex, Antigravity, Lovable, and custom MCP clients. Setup is described through plugin-based and manual flows depending on the client.
Which agents and clients does Wonder support?
The MCP docs say Wonder supports Cursor, Claude Code, Claude Desktop, Codex, Antigravity, Lovable, and custom MCP clients. For Cursor, Claude Code, and Codex, the docs recommend using the official Wonder plugin where supported.
What can you export from Wonder?
The changelog shows Wonder can export sections as Tailwind or CSS, copy selections as PNG, and export code directly from the canvas. The homepage also says designs can be copied as React + Tailwind.
Does Wonder have a free plan?
The pricing page shows a free plan and paid plans. Free starts at $0/month, while paid tiers include Pro, Pro+, and Max with higher credit limits and additional features.
Who is Wonder for?
Wonder is presented as a design tool for generating designs with AI, making precise edits on a canvas, and working with real code context in the same workflow. The homepage and docs position it for people who want design and code to stay connected.
Quick Facts
- Category
- Design Tool
- Website
- wonder.design
- Platform
- Web app
- Primary workflow
- AI design generation, canvas editing, and code export
- Integrations
- Wonder MCP for agents such as Cursor, Claude Code, Claude Desktop, Codex, Antigravity, Lovable, and custom MCP clients
- Pricing
- Free plan plus Pro, Pro+, and Max plans
Wonder Alternatives
ByteAsk
ByteAsk is a terminal-first AI coding agent for C and C++ that edits repos and verifies changes with compilers, debuggers, sanitizers, and tests.
CreateOS Sandbox
CreateOS Sandbox is an isolated compute environment for running code and agent workloads in Firecracker micro-VMs with private networking and SDK, CLI, or MCP control.
hob
hob is an independent workspace for coding agents, with local control over sessions, terminals, history, routing, and follow-up work.
Ably Chat
Ably Chat is a chat API platform for custom realtime chat apps, with rooms, typing indicators, presence, reactions, message updates and usage-based pricing.
Make Real
Make Real is a Next.js app that turns hand-drawn wireframes into HTML prototypes with the tldraw SDK and AI models, with canvas sketching and embedded preview.
Manta AI
Manta AI is an autonomous web app testing tool that maps app behavior, catches regressions, and generates tests from a URL, no scripts or selectors needed.