Export

The AI Package

Q: What is an AI Package?

An AI Package is a downloadable bundle — design tokens, a context file, per-component specs, and accessibility and coding guidelines — that you give to an AI coding assistant as project context so it builds interfaces consistent with your design system.

Q: How do I use an AI Package with Claude Code or Cursor?

Drop the package folder into your repository and reference design-system-context.md from your CLAUDE.md or .cursorrules. The assistant then follows your tokens and component specs when generating UI.

A validated design system, packaged as context an AI assistant can actually read. Tokens, per-component specs, accessibility rules, and coding standards — zipped and ready to drop into any project.

Why assistants need structured context

An AI coding assistant is only as consistent as the context it's given. Ask one to "add a pricing table" with no design context and it will reach for plausible defaults — a different blue, a different radius, a different button than the one you shipped last week. The code works; the system erodes.

Structured context flips that. Instead of relying on the model's priors, you hand it your decisions: the exact tokens, the rules for each component, the accessibility floor every element must clear. Now "on-brand" is something it can verify against, not infer.

What's inside the package

design-tokens.json — colors, type, radius, elevation
design-system-context.md — usage rules + the full token table
components/ — one spec per component: variants, states, tokens, a11y, a build prompt
guidelines/accessibility.md — WCAG-aligned rules
guidelines/coding-standards.md — implementation conventions
README.md — how to wire it into your AI tool

Every file is generated from the theme you validated — so the package reflects the brand you actually approved, down to the hex.

Dropping it into your workflow

Claude Code

Copy the folder into your repo and add a line to CLAUDE.md: "Follow the design system in ai-package/design-system-context.md; component specs live in ai-package/components/."

Cursor & Copilot

Reference the files from .cursorrules, or @-mention design-system-context.md in chat. Ask for a component by its spec: "Build the modal per components/modal.md."

From then on, generated UI references your tokens and follows your component specs by default.

Frequently asked questions

What is an AI Package?

A downloadable bundle — design tokens, a context file, per-component specs, and accessibility and coding guidelines — that you give an AI coding assistant as project context so it builds interfaces consistent with your design system.

Why do AI coding assistants need structured context?

Without it, assistants improvise styling and patterns. Structured context replaces guesswork with your real tokens, component rules, and standards — dramatically improving consistency.

How do I use it with Claude Code or Cursor?

Drop the folder into your repository and reference design-system-context.md from your CLAUDE.md or .cursorrules. The assistant then follows your tokens and specs.

Does exporting require an account?

Exporting an AI Package requires a free Google sign-in. Browsing the library, previewing components, copying prompts, and downloading individual theme files stay open to everyone.

Export your AI Package

Validate a theme across the library, then export everything an assistant needs in one click.

Open the AI Design System →