Export your sheet as CLAUDE.md, AGENTS.md and tokens

Connecting your agent over MCP is the live way to use a sheet. Exporting is the same thing as files: your agent instructions, design tokens, components and pages in a folder you drop into your repo. It suits projects where an MCP connection isn't an option, and it's a good companion to one, because the instructions then travel with the code.

Download the zip#

1. Open the sheet and click Export at the top. The export panel opens on that sheet. To export another sheet, open that one.
2. Check the file tree. It lists what the zip will hold, including how many components and which whole pages. Need one file only? The same panel downloads or copies CLAUDE.md, AGENTS.md or the tokens (CSS, Tailwind v4 or v3, JSON or SwiftUI) on their own.
3. Click the download button. The file is named after the sheet, such as my-app-wuizard.zip.

Exporting isn't metered. The zip is built when you ask for it, so it always reflects the sheet as it is at that moment.

What's inside#

Everything sits in one folder named after the sheet:

The pages/ and media/ folders only appear when the sheet has pages ready or media made.

Set it up in your project#

The README in the zip has these steps too.

1. Load the tokens once#

• Tailwind v4: paste tokens/tailwind-v4.css into your global CSS, after @import "tailwindcss";.
• Tailwind v3: merge tokens/tailwind.config.js into your config, and import tokens/tokens.css as well.
• Anything else: import tokens/tokens.css, or read tokens/tokens.json.
• SwiftUI: add tokens/WuizardTokens.swift to your project.

@import "tailwindcss";

/* paste the contents of tokens/tailwind-v4.css here */

2. Install the animation library#

The components are React with Tailwind and Motion, so install Motion if your project doesn't have it:

npm i motion

3. Copy the components#

Copy components/wuizard/ into your source tree. Use the components as they are: their values are the ones chosen in the sheet, and every one respects reduced motion.

4. Add the agent instructions#

Put CLAUDE.md or AGENTS.md at the root of your repo, so your coding agent reads it at the start of every session.

What CLAUDE.md tells your agent#

The file starts by saying the project's UI is defined by a Wuizard sheet, and that the agent should use the MCP server if it's connected and the exported files if not. Then it lists how to build UI in the project:

• Use only the sheet's tokens. Never introduce new colours, radii, fonts, spacing, shadows or springs.
• For anything that has a slot, call get_slot or use the exported file instead of writing it.
• For a whole page, call get_page.
• Not a React project? Use translate_asset for Vue, Svelte, SwiftUI or vanilla JS.
• Keep the reduced-motion fallback every component ships with.
• If something is missing, search the library and ask before adding to the sheet.
• Run check_ui on new components before finishing a screen.

After that come your own rules from the sheet, your foundations, the filled slots and any attribution. To grab just this file, open the sheet's CLAUDE.md tab, which has Copy and Download buttons. Connected agents can also read it as an MCP resource.

Whole pages and media#

A whole page is included once all its required sections are filled (the sheet's Pages tab shows which are ready). Page files import their sections from @/components/wuizard/, so point that alias at the components folder or edit the imports. Sections show neutral placeholder text until you pass your real copy, plans and numbers as props.

Generated images and animations come in media/, with readable file names. Copy them into public/ or your asset folder; media/media.json says what each one shows. The media guide covers making them.

Not on React?#

The tokens work anywhere: CSS variables, JSON or SwiftUI. The components in the zip are React. For Vue, Svelte, SwiftUI or plain JavaScript, a connected agent can call translate_asset for any slot, and every asset page in the library has the same translations. New translations are metered; ones already made are free. The docs have the details.

Keep the export up to date#

The zip is a snapshot. When you change the sheet, export again and replace the folder. Because slots.json records each asset's id and version, your diff shows exactly which components changed.

If your agent is also connected over MCP, it reads the live sheet whenever it calls a tool, so it stays current between exports. The connection guide sets that up. To understand why a sheet works better than pasting a component library into a project, read component libraries vs a design sheet.