Wonder

wonder.design/

Wonder is a design tool whose stated premise is that "what you design is the code you ship" — it outputs production-ready React and Tailwind (or plain CSS) directly, rather than handing a design file to developers, and connects to coding agents like Claude and Cursor via an MCP server. Pricing is published outright on the homepage: free, $16-$20/month Pro (which includes a monthly AI token allowance and 1,000+ shaders), and custom Enterprise with SSO/SAML. A small but specific privacy signal sits in its robots policy, which sets "ai-train=no." Beyond a changelog and Slack/Discord community links, the site shows no customer logos or case studies.

Category

Graphics & Design

Style

DarkMinimal

Stack

Next.jsTailwind CSS

Fonts

Uncut Sans VariableInter

Copy CSS

Palette

Copy allCopy CSS vars

Meta title

Wonder — What you see is what you ship

Sections

7

Updated

Sep 22, 2026