Design a sheet from the library and fine-tune it

A sheet is one product's design system in a form your coding agent can follow exactly. It has three parts: foundations (colour, type, radius, spacing, shadows, icons and a motion spring), slots (one chosen component per kind of UI, like button.primary or transition.modal) and rules (short standing instructions). The docs describe each part.

This guide builds a sheet by hand, which gives you the most control. If you'd rather describe your app in a sentence, the sheet designer does the first draft for you. If there's a site whose look you like, extract it instead. You can fine-tune the result of either with the steps below.

Pick a starting point#

In the sidebar, use New sheet next to your sheets. Give it a name (the product's name works well), then choose where to start:

• Pick a preset vibe. A curated starter sheet with colours, type, motion and a component in every starter slot, chosen to fit that vibe. This is the quickest route to something that already looks finished.
• Browse and add. An empty sheet with the core slots. The library opens, and each asset you add drops into its slot.
• Extract from a URL. Takes you to Extract, which reads a site's colours, type, corners and motion into a starting sheet.

Not sure which vibe suits your product? The vibe pages, such as minimal and editorial, show what each one looks like with real components.

Collect components in the library#

The library holds live components, animations, transitions, text effects, backgrounds, colour palettes, type pairings, icon styles, cursor and scroll effects, and micro-interactions. Everything in it runs on the page, so you judge the real motion, not a screenshot.

Press the plus button on anything you like and it lands in the sheet builder, a panel that slides in from the side (a bottom sheet on phones). The builder checks what fits, what clashes and what's missing as you go:

• Into chooses whether the picks go into a new sheet or one you already have.
• Vibe chooses the foundations a new sheet starts from: Match my picks, or any preset.
• The essentials shows which core slots your picks cover. Anything you haven't picked comes from the vibe.
• Goes well with suggests assets that fit the vibe, one tap each.

When you're happy, click Create sheet (or Add to an existing one). Each slot holds one component, so a later pick for the same slot replaces the earlier one, and the builder tells you when that happens.

Open any asset to see it larger. Its page has a live preview with a Preview reduced motion switch, parameters you can tune while you watch, the code, and versions for other frameworks. To keep an asset for later without slotting it, save it to a collection.

Set the foundations#

Open the sheet and stay on the Foundations tab. The live preview on the right redraws a demo app from your values as you change them.

• Vibe. Switching vibe replaces the foundations with that vibe's and keeps your slots.
• Colour. Background, surface, foreground, muted, accent and the colour that sits on the accent. Browse palettes opens the palettes in the library; applying one replaces the sheet's colours.
• Type. A display face for headings and a body face, plus the display weight.
• Radius and spacing. Small, medium and large corner radii, and a spacing unit that drives every p-*, m-* and gap-* class your agent writes.
• Shadow. None, soft, crisp, hard offset or glow, in three steps from small to large.
• Icons. Lucide icons with your stroke width, line ends and a frame for standalone icons (bare, soft, outline, solid or circle).
• Motion. One spring, set by stiffness and damping, with its curve drawn as you drag. Every slot component uses it, so this one setting decides whether the product feels calm, crisp or bouncy.

Browse colour palettes, font pairings and icon styles for ideas you can apply in one go.

Fill the slots#

The Slots tab lists the sheet's slots in groups: buttons and controls, inputs and forms, navigation, motion and overlays, feedback and loading, and content and effects. Click a slot to choose its component. The picker shows Suggested assets for that slot first, with All one tap away, and checks each one's fit against your vibe.

An empty slot reads "Empty, so your agent will ask before improvising", which is exactly what happens. A warning sign on a slot means its component clashes with the vibe. Add an empty slot lists the slots the sheet doesn't have yet, Add from the library opens the library, and you can clear any slot you don't want.

Start with the pieces every screen uses: the primary button, inputs, the modal transition and toasts. Good places to look are button animations, modal and overlay animations and loaders and skeletons.

Add rules#

The Rules tab holds instructions your agent gets with the sheet, such as "Primary buttons are always full width on mobile". Type one and press Add. Each rule has a switch, so you can turn one off without deleting it. Rules are written into the sheet's CLAUDE.md and served over MCP with everything else.

Keep rules short and checkable. "Use generous spacing" is hard to follow; "Cards use the large radius and the medium shadow" is easy.

Check it in the live preview#

The preview renders a demo app from your tokens. Switch between desktop, tablet and phone widths, and use Try the modal to see your overlay motion. Under the preview, the coherence check confirms every asset fits the vibe, or names the one that doesn't and offers a one-click swap.

Build whole pages#

The Pages tab shows which whole pages (landing, pricing, about and more) the sheet can already build from its section.* slots, and what each still needs. Fill the missing sections and preview each page at three widths. Your agent then asks for a whole page with get_page. The docs explain how pages are assembled, and page sections has the sections to choose from.

Hand it to your agent#

The Connect agent button at the top of the sheet takes you to the Agents page. Follow the connection guide for Claude, Claude Code or Cursor, or use an API key for any other client. Export downloads the same sheet as files: see exporting a sheet.