Wuizard for vibe-coders: polished UI without a designer
Building with Claude Code or Cursor and no designer? Give your agent a design system it follows, so your app stops looking like every other AI-built app.
The Wuizard team4 min read
On this page
If you build by describing what you want to an AI agent, you know the pattern. The app works, the flows make sense, and it still looks like a template: the same blue buttons, the same grey cards, the same soft fade on everything. Show it to anyone who has used a few AI-built apps and they can tell.
That isn't a skill problem on the agent's side. Nobody told it what your product looks like, so it falls back on the most common choices it has seen. Wuizard gives it something better to fall back on: your own design system, in a form it can read and follow exactly.
Why AI-built screens drift#
Without a source of truth, each request starts from scratch. Ask for a settings page on Monday and a billing page on Thursday and you get two slightly different button styles, two shadow depths and two ideas of how a modal should open. Each screen is fine on its own. Together they don't feel like one product.
Prompting harder rarely fixes it. "Make it look premium" means something different every time the model reads it, and the instructions you gave last week aren't in this week's conversation. What helps is a fixed set of values and components the agent can look up, the same way it looks up an API.
What a sheet gives your agent#
A sheet is one project's design system, and it has three parts:
- Foundations. Colour, type, radius, spacing, shadows and a motion spring, as CSS variables and a Tailwind theme.
- Slots. One chosen component for each kind of UI, such as
button.primary,transition.modalorfeedback.toast. The agent doesn't pick a button; it uses the one in the slot. - Rules. Short instructions like "never introduce colours outside the foundations" that the agent follows on every screen.
Once your agent is connected over MCP, it calls get_sheet before building UI and get_slot for each component it needs, and gets back code with your values already filled in. The setup guide walks through connecting Claude Code, Cursor and others.
Getting a design system without design skills#
You don't need to know what a type scale is to end up with a good one. There are three ways to start a sheet, and all of them can be changed afterwards:
- Pick a starter vibe. Each starter sheet comes with colours, type, motion and a component in every starter slot that fits its look. Browse them by vibe to see the difference.
- Paste a site you love. Give Wuizard its URL and it reads the colours, type, radii and motion into a starting sheet. A screenshot gives just the colours. It copies values, never code.
- Describe your app. Tell the sheet designer what you're building and who it's for, and it sets the colours, fonts, radius and motion and suggests components for your slots.
A typical first session#
- Start a sheet from a vibe, a website or a description.
- Open the library and fill the slots you'll use most: primary button, inputs, cards, modal and page transitions, toasts.
- Connect your agent and ask it to summarise your sheet, so you know it can see it.
- Ask for a real screen, such as your onboarding or pricing page, and tell it to use your sheet.
- Before you accept the screen, ask the agent to run
check_ui. It points out anything that drifted from your foundations.
From then on, every new screen starts from the same foundations, which is the whole point. If you want a whole page at once, fill the section.* slots and your agent can assemble a landing, pricing or about page with get_page.
What you don't have to learn#
You don't write tokens by hand, set up a component library or keep a style guide up to date. The sheet is the style guide, and the agent reads it directly. The components handle the details that are easy to miss: focus states, reduced-motion fallbacks and springs that match each other.
You also don't have to stay on React. translate_asset returns any slot in Vue, Svelte, SwiftUI or vanilla JS, with the same motion and your values.
When it isn't the right fit#
Wuizard is built for people whose agent writes most of their UI. If your team already maintains a design system in code with a designer looking after it, your agent may be better served by reading that directly. And if your project has little or no interface, such as a CLI or a back-end service, there's nothing for a sheet to do.
If you're weighing it against installing a component library, component libraries vs a design sheet sets out the trade-offs honestly.
Where to start#
Sign up, make a sheet from whichever starting point feels easiest, and connect the agent you already use. The first screen it builds from your sheet is the quickest way to see whether this is for you.
Questions
Do I need to know React or Tailwind?
No. The library's components are React with Tailwind and Motion, and your agent does the wiring. If your project uses another framework, translate_asset returns a slot in Vue, Svelte, SwiftUI or vanilla JS with your values filled in.
Will my app look like every other app built with Wuizard?
Not if your sheet is yours. Every component is rendered with your sheet's colours, fonts, radii, shadows and motion, and you choose which component fills each slot, so two sheets using the same button still look like two different products.
Can I change the design later?
Yes. Edit the sheet and your agent picks up the new values the next time it reads it. Screens it already built keep their code until you ask it to update them.
Facts on this page were last checked on . Spotted something out of date? Tell us at the address on the docs page.
In the library