# Wonder Wonder is an AI-native design tool for creating, editing, and syncing designs with code. - Findings24: - Website: - Pricing: Freemium - Categories: AI Design Assistant, AI Graphic Design ## What is Wonder? Wonder is an AI-native design tool built around a single canvas for generating layouts, making edits, and working with code context at the same time. The site positions it as a way to design with AI, chat with it, and keep the result aligned with real code. The product emphasizes a direct path from design to production. Wonder says designs are backed by code, can be copied as React + Tailwind, and can connect to coding agents through its MCP server so work can move between the canvas and a developer tool without a traditional handoff. Wonder also supports iterative exploration: you can start new design projects, create variants, adjust layout and spacing, edit copy, swap images, and generate assets on canvas. The MCP documentation extends that workflow into supported agents such as Cursor and Claude Code. The company’s terms describe Wonder as a tool for creating, editing, and collaborating on designs based on real HTML and CSS, with production-ready code export. The product is available on wonder.design and is offered with a Free tier plus paid plans for heavier usage. ## What can Wonder do? ### AI-assisted canvas design Generate designs on a visual canvas, then make precise changes without leaving the same workspace. ### Chat-driven iteration Edit designs through chat, with the product positioning design and AI interaction together on one canvas. ### Code-aligned output Map Wonder’s design format 1:1 to code so designs can move back into production without a separate handoff step. ### Export to production workflows Copy React + Tailwind from a design or send the result to your coding agent for further development. ### MCP-based agent connection Use the Wonder MCP server to let supported coding agents read and write canvas content in both directions. ### Visual asset generation Generate images and use shaders to create richer visual elements directly in the design flow. ## Use Cases ### Designing product UI from scratch Generate new layouts, make edits on the canvas, and keep the work aligned with the code that will eventually ship. ### Iterating on existing screens Adjust spacing, styles, copy, image choices, and variants while keeping the design in the same working context. ### Design-to-code collaboration Connect Wonder to a coding agent so the agent can read or update the canvas while you move between design and implementation. ### Producing visual assets Create images and shader-based visuals directly in the design flow when a project needs richer assets than placeholders. ### Evaluating the tool before adoption Use the Free plan to explore the workflow, then move to a paid tier if your team needs more credits or additional MCP tool calls. ## Frequently Asked Questions ### What is Wonder used for? Wonder uses a visual canvas where you can generate designs, make precise edits, and work alongside code context on the same screen. Its MCP server also lets supported coding agents read and write Wonder canvas content. ### Which coding agents can connect to Wonder? The documentation says Wonder currently supports Cursor, Claude Code, Claude Desktop, Codex, Antigravity, Lovable, and custom MCP clients, with the fastest path for Cursor, Claude Code, and Codex via the official plugin. ### What kind of output can Wonder produce? Wonder can export production-ready code, and the homepage says you can copy React + Tailwind from designs. The terms also state that users can export production-ready code. ### Does Wonder have a free plan? The pricing page shows a Free plan and paid Pro, Pro+, and Max plans. Free is listed at $0/month, while Pro is $20/month, Pro+ is $60/month, and Max is $200/month. ### How does Wonder MCP authentication work? The MCP docs describe OAuth-based sign-in with no API keys to manage, and tokens refresh automatically after authorization. ## Quick Facts - **Category**: Design Tool / Developer Tool - **Platform**: Web app at wonder.design - **Workflow**: Design on canvas, then export or sync with code - **Integrations**: MCP server for Cursor, Claude Code, Claude Desktop, Codex, Antigravity, Lovable, and custom clients - **Pricing**: Free plan plus Pro, Pro+, and Max paid plans - **Company**: Aquila Labs, Inc. d/b/a Wonder