design-system-generator

---
name: design-system-generator
description: Create design systems with tokens, components, and documentation. Use when building design systems, creating component libraries, or establishing design tokens.
---

# Design System Generator

Generate a token-driven design system: tokens, base components, build config, and documentation.

## Contents

- `references/design-tokens.md` — color, typography, spacing, shadow, and radius token files plus CSS variable setup.
- `references/components.md` — Button, Input, Card implementations and the component barrel index.
- `references/config-and-utilities.md` — Tailwind config and the `cn` class-merge helper.

## Workflow

1. Define design tokens. Create `tokens/` with colors, typography, spacing, and effects (shadows, radii) per `references/design-tokens.md`. Replace the reference values with the project brand palette.
2. Add CSS variables. Set up `:root` and `.dark` custom properties in `globals.css` using the variable block in `references/design-tokens.md`.
3. Wire the build. Add the `cn` helper and extend the Tailwind theme from the token files following `references/config-and-utilities.md`.
4. Build base components. Implement Button, Input, and Card from `references/components.md`, then extend the set as the product requires.
5. Export a barrel. Re-export every shipped component from `components/ui/index.ts` (see `references/components.md`).
6. Document usage and variants. For each component, note its variants, sizes, props, and accessibility behavior so consumers apply it consistently.