# Design System Generator

> Create design systems with tokens, components, and documentation. Use when building design systems, creating component libraries, or establishing design tokens.

- Skill: `onewave-ai/design-system-generator` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds add onewave-ai/design-system-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/onewave-ai/design-system-generator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: onewave-ai (https://skillmd.com/u/onewave-ai)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/onewave-ai/design-system-generator

---


# 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.