Describe your app to get a full design system

The quickest way to a complete design system is to describe your app. Open Home in Wuizard and you'll find a chat with the sheet designer. Write a sentence about what you're building, and it creates a sheet with colours, fonts, corner radii, a motion spring and a component in every starter slot. Then you shape it by talking to it, the way you'd brief a designer.

The result is an ordinary sheet. You can fine-tune it in the editor (see designing a sheet by hand) and connect it to your coding agent like any other.

Write your first message#

The box on Home asks you to describe the app you're building. A useful first message says:

• What it is. A habit tracker, an invoicing tool, a recipe site.
• Who it's for. Busy parents, finance teams, kids learning to read.
• How it should feel. Calm, playful, serious, premium, a bit retro.
• Anything you already know. A brand colour, light or dark, a font you love, a site whose feel you like.

One or two sentences is plenty. For example:

A calm journaling app for people who want to write a few lines each evening. Dark, with a soft green accent and a serif for headings.

Messages can be up to 2,000 characters, so you can paste a longer brief if you have one.

Watch it work#

While the designer works, it shows each real step as it happens: reading your message, thinking it through, creating the sheet, setting colours, pairing type, adjusting corners, choosing components, adding a rule and, if it decides an icon would help, starting an app icon. When it's done, the steps fold into a single line you can open again.

Then it replies in a few plain sentences, with a list of what changed and a card for the sheet that opens it in the editor. Underneath are a few follow-up suggestions, such as "Make it dark" or "Serif headlines", that you can tap instead of typing.

See the result live#

Next to the chat, a live panel shows the sheet as it changes, with four views:

• App: a demo app drawn from the sheet's values, components included.
• Landing: a landing page built from the same values.
• Tokens: the colours, radii and motion spring, side by side.
• Media: any images and animations made for the sheet.

On smaller screens the panel is hidden to give the chat room. Use the Live preview button at the top to open it.

Refine it by chatting#

Each later message changes the same sheet. Be as specific or as loose as you like:

• "Make the accent warmer and the corners sharper."
• "Use a bolder font for headings."
• "I want a button that feels more playful."
• "Slower, softer motion."
• "Add a rule: primary buttons are full width on mobile."
• "Make an app icon with a leaf in it, and a hero illustration."

Here's what the designer can change:

• Colours: background, surface, text, muted, borders, the accent and the text on it. When it changes the background, it works out matching surface, border and muted shades, and a new accent gets whichever of white or near-black reads better on it.
• Shape and space: small, medium and large radii, the spacing unit and the shadow style.
• Type: the display and body fonts, display weight and letter spacing.
• Motion: the spring's stiffness and damping.
• Icons: stroke width and the frame around standalone icons.
• Components: which library asset fills each slot, or clearing a slot.
• Rules and name: it adds rules and can rename the sheet.
• Images and animations: app icons, logos, illustrations, photos, backgrounds, UI screenshots and short animations in the sheet's colours, up to four images in one reply. The media guide covers these.

It adds rules but never deletes them. To turn one off, use the switch on the sheet's Rules tab.

One chat, one sheet#

A chat works on the sheet it created. To design something else, start a New chat from the top of Home, or ask for a new sheet in the conversation. Previous chats lists your recent conversations, and picking one opens it with its live preview, so you can carry on where you left off. The sheets themselves live under Sheets in the sidebar, whether a chat made them or you did.

When to switch to the editor#

Chatting is fastest for the big moves: the overall look, a new direction, swapping a component for one that feels different. The editor is better for exact values. Open the sheet from its card in the chat when you want to:

• type an exact hex colour or radius,
• compare several components for one slot side by side,
• fill the page sections for whole pages,
• check the preview at phone and tablet widths, or try the modal motion.

Both work on the same sheet, so you can move back and forth as often as you like.

What it costs#

Messages to the AI designer are metered, so on a trial each one spends credits, and paid plans include a monthly number of messages. Images and animations the designer starts count against their own allowances, separately from messages. If you run out, the chat shows a card saying why and what you can do, and everything you've made stays as it is. Current numbers are in the limits table.

Next steps#

When the sheet looks right, connect your agent so it builds with it: the connection guide takes about five minutes. Prefer files in the repo? Export the sheet instead. And if you're curious why this matters, why AI-built apps look the same explains the problem a sheet solves.