Wonder

Wonder is an AI-powered design tool that bridges the gap between design and production code. It lets designers generate UI designs with an AI agent, iterate on a canvas, and export real React + Tailwind code — eliminating the traditional handoff process. Every design in Wonder maps 1:1 to code, so what you see is literally what you ship.

• AI Design Agent — Start new flows and generate full design projects from a text prompt directly on the canvas, reducing time from idea to first draft.
• Code-backed canvas — Every element on the canvas is real code; copy React + Tailwind and ship without any rebuilding or handoff.
• Iterative design context — Build on previous designs to explore variants and iterations without losing flow state.
• Wonder MCP integration — Connect Wonder to coding agents like Claude Code, Cursor, and Codex so designers own the full design-to-production loop.
• Image generation — Generate placeholder-free assets directly on the canvas by describing what you need.
• Shader support — Add interactive, high-quality visual effects to designs using built-in shaders.
• Familiar toolkit — Tools for changing styles, creating variants, making flows, adjusting spacing, and editing copy feel intuitive from day one.
• Credits-based usage — Plans scale from 300 credits/month on Free up to 60,000 credits/month on Max, with priority queues and support on paid tiers.