Wonder

What is Wonder?

Wonder is a design tool that combines AI design generation, chat-based iteration, and editing in a single canvas. Its core purpose is to help teams move from early ideas to production-ready UI without relying on a separate handoff step.

Wonder is built around real code as the design format. The page positions Wonder as a workflow where what you create on the canvas maps to the code you ship, including the ability to copy React + Tailwind.

Key Features

• Generate designs with AI directly on a canvas: Start by describing what you want to design, then generate visuals in-place to reduce back-and-forth.
• Chat with the design system while editing: Use a chat interface to iterate and refine alongside the work on the same canvas.
• Precise edits and variants: Change styles, create variants, adjust spacing, and swap image assets as part of the same workflow.
• Build with code, ready for production: Designs are “real code” and can be copied as React + Tailwind, aiming to avoid manual rebuilds.
• Iterate using prior work (flow state preserved): Build on previous designs to explore options without losing the ongoing editing context.
• Work with your code context and agent workflows: The page describes “Code and Canvas, Finally connected,” including exporting or sending to an agent; it also mentions an “Explore Wonder MCP” and “Wonder Toolkit.”

How to Use Wonder

1. Start a new design project in the app (from the public alpha entry point).
2. Describe what you want to design and generate the initial layout on the canvas.
3. Refine through chat and direct edits—for example, adjust spacing, change theme/styles, and create variants.
4. Copy or export the result to React + Tailwind (or send the work back to your coding agent) so the design and implementation stay aligned.

Use Cases

• 0-to-1 UI layout creation: Generate a first version of a new flow quickly by describing the desired design, then iterate until it matches the intended direction.
• Design iteration without losing context: Revisit earlier options and explore new variants while preserving the editing/flow state from the prior canvas work.
• Designer-led production handoff reduction: Move from design to implementable code by copying React + Tailwind directly from what was created in Wonder.
• Variant production for different themes or styles: Create multiple versions by changing theme and styles and then adjusting layout details like spacing.
• Agent-assisted design-to-code workflow: Use Wonder alongside a coding agent by exporting or sending work back to continue implementation in the same project.

FAQ

• What does “what you see is what you ship” mean in Wonder? The page states that the design format maps 1:1 to code and that designs are real code you can copy (React + Tailwind) to ship, aiming to reduce rebuilds and handoff.

• Can I edit designs after generating them? Yes. The tool is described as supporting precise edits alongside AI, including changing styles, creating variants, adjusting spacing, and swapping image content.

• Is Wonder only for designers, or does it involve developers? The page highlights a workflow where designers own the full loop and also emphasizes working with code context and agents, suggesting both roles can use the same workflow.

• Does Wonder support iterative workflows across multiple versions? It’s described as letting you build on previous designs to explore iterations without losing flow state.

Alternatives

• Web-based UI design tools with design-to-code exporters: These focus on designing in a dedicated canvas and then exporting assets or code later; the key difference is that the design/code mapping may require additional steps compared with Wonder’s “real code” approach.
• AI-assisted design and prototyping tools: These typically generate mockups or prototypes from prompts and then require separate implementation; Wonder instead emphasizes code-backed design that can be shipped directly.
• Component-driven UI development workflows (e.g., design systems and code-first approaches): Teams may start from code components rather than a design canvas; compared to Wonder, the workflow may be less chat-and-canvas driven and more implementation-first.
• IDE + UI libraries with automated code generation: These help generate or modify UI code in a developer environment; Wonder’s positioning centers on doing generation and edits on a shared canvas that maps back to code.