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 generating layouts with AI, editing them on a shared canvas, and exporting or syncing work with code-aware workflows. Its MCP server connects Wonder canvases with supported coding agents, including Cursor, Claude Code, Claude Desktop, Codex, Antigravity, and Lovable.
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 替代品
Refero MCP
Refero MCP for AI agents connects an MCP-compatible agent to Refero’s curated library of web and iOS product interfaces and user flows. It helps agents research real design patterns before generating UI, with access included in the Refero Pro plan.
Ably Chat
Ably Chat is a chat API platform for building custom realtime chat applications. It supports room-based messaging, typing indicators, presence, reactions, and message updates, with usage-based pricing options for different deployment stages.
Make Real
Make Real is a Next.js app that turns hand-drawn wireframes into working HTML prototypes using the tldraw SDK and AI models. It helps users sketch on a canvas, generate code, and review the result in an embedded preview.
Ghost
Ghost 是一款基于终端的 AI 助手，可在命令行中聊天、生成代码并运行任务。内置免费模型，支持 Linux、macOS 和 Windows，且为开源项目。
AakarDev AI
AakarDev AI helps teams manage AI provider access, project-level setups, logs, and analytics from one dashboard. It supports BYOK workflows and lists providers including OpenAI, Google Gemini, Anthropic, Groq, Mistral AI, and Perplexity AI.
DeepMotion
DeepMotion 是一款基于网页的 AI 动作捕捉与 3D 动画平台，提供 Animate 3D 视频转动画和 SayMotion 文本生成动画，支持浏览器创作并导出常用制作格式。