Make your agent build in your style

How it works

AI agents are good at building UI and bad at taste: left alone, every app gets the same buttons, the same 200 ms fades and whatever colours the model reaches for. Wuizard gives your agent a sheet: your design system, in a form it can follow exactly.

1. Browse the library of live components, animations and effects, and save the ones you like.
2. Put them in a sheet with your colours, type, radii and motion.
3. Connect your agent. When it builds a screen, it pulls your exact components with your values filled in.

Sheets, slots and rules

A sheet is one project’s design system. Most people have one per product or client. It has three parts:

• Foundations. Colour, type, radius, spacing, shadows and a motion spring. They’re CSS variables (and a Tailwind theme). The spacing unit drives every p-*, m-* and gap-*, and shadows come in three steps (shadow-sm, -md, -lg) drawn in a style: none, soft, crisp, hard offset or glow.
• Slots. One chosen component per kind of UI: button.primary, transition.modal, feedback.toast, nav.tabs and so on. The agent never has to choose; it uses what’s in the slot.
• Rules. Short instructions the agent follows, like “never introduce colours outside the foundations”.

A coherence check warns when assets clash (say, a bouncy spring in a strict editorial sheet) and offers a swap. The sheet’s live preview renders a demo app from your tokens as you edit.

Whole pages

Fill the section.* slots (hero, features, pricing, FAQ, CTA, footer and the rest) and your agent can ask for a whole page with get_page: a landing, pricing, about, contact, blog or 404 page, assembled from your sheet’s sections in a sensible order. It gets one page file that imports each section’s component, and fetches those with get_slot, so nothing is written twice.

A page is ready once its required sections are filled; until then the agent tells you which are missing instead of improvising. The sheet’s Pages tab previews each page live at desktop, tablet and phone widths. Sections ship with neutral placeholder copy (no made-up prices or claims) until your agent passes your real words, plans, customers and numbers; the preview can show them with sample copy so you can judge the look.

Starting a sheet

• From a vibe. Pick one of 24 starter sheets (Playful SaaS, Midnight, Editorial, Terminal, Swiss Grid…). Each comes with colours, type, motion and a curated asset in every starter slot that fits its vibe.
• From the library. Collect assets as you browse and fill slots as you go.
• From a website. Paste a URL (or a screenshot) and Wuizard reads its colours, type, radii and motion into a starting sheet. It copies values, never code.

Connect your agent

Wuizard is a remote MCP server. Claude, Claude Code and Cursor sign in with your Wuizard account; anything else can use a personal API key.

Claude (claude.ai and the desktop app)

In Claude, open Settings → Connectors → Add custom connector and paste the server address, then approve the connection on the Wuizard page that opens:

https://wuizard.com/mcp

Claude Code

Run this in your project, then use /mcp, choose wuizard and Authenticate:

claude mcp add --transport http wuizard https://wuizard.com/mcp

Cursor

Use the one-click install from Wuizard → Agents; Cursor opens, adds the server and asks you to sign in.

Windsurf and other MCP clients

Create a personal API key in Wuizard → Agents and add it to your client’s MCP config:

{
  "mcpServers": {
    "wuizard": {
      "url": "https://wuizard.com/mcp",
      "headers": { "Authorization": "Bearer $WUIZARD_KEY" }
    }
  }
}

Keys are shown once. You can rotate one at any time, and disconnect any signed-in app from the same page.

MCP tools

Lookups are free and unlimited. Only tools that run AI or search on our side are metered.

The sheet and its CLAUDE.md are also exposed as MCP resources, so clients that support resources can keep the sheet in context.

Not on React? translate_asset returns any slot or asset in Vue, Svelte, SwiftUI or vanilla JS (a framework-free custom element). AI translates the canonical source once per asset version, keeping the same motion, tokens and accessibility, then fills in your values, so only a brand-new translation counts against your allowance. SwiftUI components read WuizardTokens.swift, from get_tokens with format swift or the export. The same translations are on every asset page in the library.

Images and animations. generate_media makes app icons, logos, illustrations, photos, backgrounds and realistic UI screenshots in your sheet’s colours, plus ~5-second animations, and saves them to the sheet. The sheet designer can make them too. They’re made in the background: images are usually ready within a minute, animations in a few. get_media returns the file URLs to download into the project. Images and animations have separate allowances, and a request that fails doesn’t count.

Export instead of MCP

Prefer files? Open a sheet and press Export to download a zip with:

• CLAUDE.md and AGENTS.md: how the agent should build in this project
• tokens/: CSS variables, JSON, a Tailwind v4 @theme block, a Tailwind v3 config and WuizardTokens.swift
• components/wuizard/: every slot’s component, rendered with your values
• pages/: every whole page the sheet can already build
• slots.json and ATTRIBUTION.md

Credits and usage

Every AI action spends credits, charged at what it really costs (a short message costs less than a long one). Pro includes 1,500 credits a month and MAX 4,400; they reset on the day of the month your plan started, and unused ones don’t roll over. The free trial on annual plans comes with 600 credits. Bonus credits (from support or rewards) are spent after your monthly ones. Your credits show in the sidebar, on Home and in Usage & billing.

Pick the designer’s model, and the quality of images and animations, in Settings → Models: each model shows what a message costs on it. If your credits can’t cover an action, your agent gets a clear message (with the date they reset), the app offers more, and Usage & billing shows where you stand. A request that fails costs nothing.

Sharing

• Share links. Turn on a public link for a sheet or a collection. Anyone with the link sees it running and can copy it into their own account. Links can be reset at any time.

Plan and billing

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. Annual plans start with a 3-day free trial: 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. Without a plan, your library, sheets and connected agents keep working; the AI features need one. You can cancel in a couple of clicks from Usage & billing, switch plans or between monthly and annual, update your card and download invoices there too.

Getting help

Email support@wuizard.com and a person replies, usually within a day.