Wuizard

Stop shipping appsthat look AI-made.

Wuizard gives your coding agent your design system over MCP: the exact colours, fonts and components you pick. Every screen it builds matches.

Start free trialSee how it works

3 days free on annual plans. Card needed, cancel before it ends and pay nothing.

Works with the agents you already use

  • Claude Code
  • Cursor
  • Claude
  • VS Code
  • Codex
  • Gemini CLI
  • Antigravity
  • Windsurf
  • GitHub Copilot
  • Zed
  • JetBrains
  • Junie
  • Cline
  • Roo Code
  • Kilo Code
  • Continue
  • Augment
  • Amp
  • goose
  • Warp
  • Kiro
  • TRAE
  • OpenCode
  • Visual Studio
  • Any MCP client

Library

429 assets

Components, motion and styles that run for real and restyle to your sheet.

429 assets

Glow ring button

Buttons

Card tilt + cursor glow

Cards

Squash toggle

Inputs & controls

Staggered list in

Entrances

Scale-blur modal

Modals & overlays

Blur-in headline

Text effects

What Wuizard is

A design system your coding agent actually reads

AI agents build UI that works but looks generic, and every screen drifts a little. Wuizard is a live UI library that becomes your design sheet, and your agent builds with it over MCP.

Without a sheet

Screenshots in one tab, snippets in another, and a prompt that says “make it look premium”. Your agent guesses, and every screen comes out a little different.

make it feel premium?? and the modal feels off
screenshot_final_v3.png
transition: all .3s ease;
border-radius: 12px; /* or 8? */
SaveSaveSave
which one?

With Wuizard

One sheet holds your components, motion and tokens. Your agent pulls exact code from it on every screen.

Library
Designer
Coherence
MCP
Extract
Export
Slots

How it works

From a look you like to every screen your agent builds

Wuizard turns what you pick into a design sheet, then serves that sheet to your coding agent over MCP.

1Pick or describe

Save components from the library, describe your app to the designer, or paste a site you love. Each one starts a sheet.

2Preview

See your sheet on a real app as you change it: colours, type, corners and motion, with every component in place.

3Connect your agent

Add Wuizard to Claude, Cursor or any MCP client. Your agent pulls exact tokens and code from the sheet on every screen.

What you get

Everything your agent needs to build in your style

A library to pick from, a sheet that holds your choices, a designer that builds one for you, and an MCP server that hands it all to your agent.

Library

420+ live components, animations and styles

Every preview is real code running on the page, not a screenshot. Tune the springs and timing, watch the code change, then add it to your sheet.

  • Search by describing what you want
  • Tune springs, timing and stagger, with a reduced-motion fallback
  • Preview any asset in your own sheet’s style
wuizard · pro
Hover for tilt
spring 260/24 · 8° max
Animations / Card tilt + cursor glowv3
cinematicpremium

Card tilt + cursor glow

Wuizard original · Included in Pro

8°
260
24
220px
{
  "id": "wz_anim_card_tilt_glow",
  "type": "animation",
  "params": {
    "maxTiltDeg": 8,
    "spring": { "stiffness": 260, "damping": 24, "mass": 1 },
    "glowRadiusPx": 220,
    "glowColor": { "token": "color.accent" }
  },
  "reducedMotion": "disable tilt, keep static glow",
  "version": 3
}
Similar to this

Sheets

One sheet, and every screen matches

A sheet holds your tokens and one component for each part of the UI. Start from a vibe or change a value, and the preview app restyles as you go.

  • Colour, type, corners, spacing, shadows, icons and motion
  • Exactly one asset per slot: the button, the modal, the toast
  • A coherence check flags anything that clashes
habitual.sheetLive via MCP

Start from a vibe

Colour
bg
surface
fg
accent
Type
Bricolage Grotesque/ Inter
Radius
sm 10md 18lg 26
Motion
spring
320 / 14

Slots

  • button.primarySquishy pill v1
  • transition.modalPop + overshoot modal v1
  • transition.pageSlide-up stagger page v1
  • feedback.toastStacked toasts v1
Coherence check passed: every asset fits Playful SaaS.
Habitual

Good morning, Maya

4 of 6 habits done today

Read 20 min
12-day streak
Run 5k
4-day streak
Drink water
21-day streak
Last 4 weeks83% consistency

Designer

Describe your app. Get a full design system.

Tell the designer what you’re building. It sets the colours and type, tunes the motion, picks the components and saves the sheet, and you see each step as it happens.

  • Ask for changes in plain words
  • App icons and illustrations in your sheet’s style
  • The sheet updates live beside the chat
Ask for a change…

Extract

Paste a site you love. Get its design system.

Wuizard reads a public page’s colours, fonts, corners and motion from its CSS, then matches them to library assets for a starting sheet you can tweak.

  • A URL or a screenshot
  • Colour, type, spacing and motion
  • Values only, never their code
Try
Field NotesShopJournalAbout
Essays on slow design
Explore
  1. Fetching page
  2. Reading colour
  3. Measuring type & spacing
  4. Detecting motion
  5. Matching library assets

Paste a URL to build a starting sheet.

MCP server

Your AI follows your design system. Exactly.

Before it builds, your agent asks Wuizard for the exact code and values in your sheet, so it stops guessing. If something isn’t in the sheet, it asks you first.

  • One sign-in for Claude, Claude Code and Cursor
  • A personal API key for any other MCP client
  • Reading your sheet never costs a credit
Read the docs
Claude
Wuizard · habitual.sheet
Reply to Claude…

Generated media

Icons, logos, illustrations, backgrounds and short animations, made in your sheet’s colours. Ask the designer, or let your agent ask for them.

Whole pages

Your agent can ask for a landing, pricing, about or contact page and get one built from your sheet’s own sections.

UI reviews

Before it finishes a screen, your agent can check its code against the sheet and fix any colour, font or spring that drifted.

Share links

Send anyone a view-only page of your sheet with its components running live. They don’t need an account to see it.

Export

Prefer files? Download the sheet as CLAUDE.md, AGENTS.md, tokens.css and tokens.json, ready to drop into your repo.

Any framework

Assets ship in React, Vue, Svelte, SwiftUI or vanilla JS, and your agent can ask for a translation into another one.

Compared

Why a sheet beats screenshots and snippets

Screenshot libraries show your agent what an app looks like. Component libraries hand you code one piece at a time. A sheet gives your agent exact code and values, and keeps every screen consistent.

Screenshot librariesStatic

Show your agent what an app looks like. It imitates by eye, and every screen drifts a little further.

  • No code or motion values
  • Nothing keeps screens consistent
Component librariesCopy-paste
<Button variant="default"
transition: all .2s;
className="rounded-md"
import { Dialog } from …
transition: all .2s;
/* copy, paste, repeat */

Real code, one piece at a time, pasted in by you. No taste layer ties the pieces together.

  • Real, working code
  • Consistency is up to you
WuizardLive + MCP
get_slot → transition.modal

Exact code and motion values delivered to your agent over MCP, from one sheet for every screen.

  • Exact values, every time
  • One sheet for every screen

Pricing

Two plans, one design system for your agent

Pick Pro or MAX. Annual plans start with a 3-day free trial; monthly plans start today.

Pro

3-day free trialSave 40%

Everything you need to design and build with your agent.

$17.41/ month

Billed $209 yearly

Start 3-day free trial

Card needed. Cancel before it ends and pay nothing.

1,500 credits every month

about 83 designer messages, or 42 images, or 2 animations

MAX

3-day free trialSave 37%

More room for heavy design work and generated media.

$49.91/ month

Billed $599 yearly

Start 3-day free trial

Card needed. Cancel before it ends and pay nothing.

4,400 credits every month

about 244 designer messages, or 125 images, or 7 animations

  • 3 days free on AnnualWith 600 credits to try the AI features.
  • Your card is charged when it endsFor the year, unless you cancel first. We remind you the day before.
  • Cancel in one clickFrom Usage & billing, any time during the trial. Nothing is charged.

Every plan includes

The library, your sheets and MCP are unlimited. The AI features spend credits, and MAX has more of them.

  • Live library of 420+ assetsIncluded
  • Unlimited sheetsUnlimited
  • MCP for Claude, Cursor and moreFree to read
  • Export tokens, code and CLAUDE.mdIncluded
  • Public share linksIncluded
  • AI sheet designerabout 18 credits a message
  • Generated images and icons35 credits each
  • Generated animations560 credits each
  • URL and screenshot extraction5 credits each
  • AI library searchabout 2 credits each
  • Framework translationsabout 45 credits each
  • check_ui reviews1 credit each

What credits pay forcredits each

Designer message
about 18
AI library search
about 2
check_ui review
1
Framework translation
about 45
Extraction
5
Image or icon
35
Animation
560
Assistant step
about 7
Your agent reading your sheets
Free

Each action is charged at what it really costs, so a short message costs less than a long one. Pick a lighter model in Settings to make credits go further.

FAQ

Questions, answered

Your design system in one place: colour, type, corner, spacing, shadow, icon and motion tokens, one library asset for each slot (the primary button, the modal transition, the toast and so on) and a few plain rules. Your agent reads it before it builds anything.

Any agent that speaks MCP. Claude, Claude Code and Cursor connect with one sign-in; other clients (Windsurf, VS Code, Zed and more) use a personal API key. If your tool doesn't support MCP, export the sheet as a folder with CLAUDE.md, AGENTS.md and your tokens, and drop it into your repo.

Pro is $29 a month, or $209 a year. MAX is $79 a month, or $599 a year. Both include everything; MAX has more credits (4,400 a month against Pro's 1,500). Prices are in US dollars.

Yes, on annual plans: 3 days with 600 credits. It needs a card, and the card is charged for the year when the trial ends unless you cancel before then (we email you the day before). Monthly plans have no trial and start the day you pay.

The AI features spend credits, charged at what each action really costs. On the default models a designer message is about 18 credits, a generated image 35, an animation 560, an AI search about 2, an extraction 5 and a check_ui review 1. Your agent reading your sheet, tokens, slots and assets never costs anything. Credits reset each month on the day your plan started, and unused ones don't roll over.

Yes. In Settings, pick the model the designer uses, with what a message costs on each, and the quality for images and animations. A lighter model makes your credits go further.

No. It reads a public page's colours, fonts, corners and motion from its CSS, then matches them to assets in the library (a screenshot you drop in gives just the colours). You get values and a starting sheet, never their code.

Each asset lists the frameworks it ships in: React, Vue, Svelte, SwiftUI or vanilla JS. Your agent can ask for a translation into another one. Tokens export as CSS variables and JSON, so they fit any stack.

Your plan runs to the end of the period you've paid for (a trial just ends, with nothing charged). Your sheets and everything you made stay in your account, and your agent can still read them. The AI features need a plan.

Something else? The docs cover setup for each agent.

Give your agent your design system

Pick or describe a look, connect your agent, and every screen it builds after that matches. 3 days free on annual plans. Card needed, cancel before it ends and pay nothing.

Start free trialSee pricing