design-system-generator — Claude Code skill: tokens and components
Builds a design system from tokens, base components and docs. Useful once a second screen shows up and your colors start drifting.
npx skills add OneWave-AI/claude-skills --skill design-system-generator -a claude-codeWhat design-system-generator does
The skill walks the agent through six steps. First it creates a tokens/ folder with color, typography, spacing and effect files — shadows and radii. You swap the reference values for your own palette, otherwise you ship someone else's brand.
Next come CSS custom properties for :root and .dark in globals.css, the cn class-merge helper, and a Tailwind theme extended from the token files. Then the agent writes Button, Input and Card and re-exports everything from components/ui/index.ts. Each component gets its variants, sizes, props and accessibility behavior written down.
Three references ship with it: references/design-tokens.md, references/components.md and references/config-and-utilities.md. The stack assumes Tailwind and CSS variables, so on CSS-in-JS or plain SCSS you rewrite those steps yourself. The base set is also small — Button, Input, Card — and you extend it as the product needs.
What it helps with
- keep colors, typography and spacing in one token folder
- wire up a dark theme with CSS variables
- ship Button, Input and Card with variants and sizes
- connect Tailwind to the token files
- document props and accessibility for the team
Example prompts for the agent
- Generate a design system: tokens, base components and docs
- Create color and typography tokens in
tokens/for our palette - Add Button, Input and Card and export them from
components/ui/index.ts
How to install design-system-generator
1Skills CLI (Vercel)
npx skills add OneWave-AI/claude-skills --skill design-system-generator -a claude-code2Manually: put the files in place
~/.claude/skills/design-system-generator/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/design-system-generator/
1Skills CLI (Vercel)
npx skills add OneWave-AI/claude-skills --skill design-system-generator -a codex2Manually: put the files in place
.agents/skills/design-system-generator/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add OneWave-AI/claude-skills --skill design-system-generator -a cursor2Manually: put the files in place
.cursor/skills/design-system-generator/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install OneWave-AI/claude-skills design-system-generator2Manually: put the files in place
.github/skills/design-system-generator/SKILL.md1Skills CLI (Vercel)
npx skills add OneWave-AI/claude-skills --skill design-system-generator -a gemini-cli2Platform CLI
gemini skills install https://github.com/OneWave-AI/claude-skills --path design-system-generatorManually: put the files in place
.devin/skills/design-system-generator/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add OneWave-AI/claude-skills --skill design-system-generator -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about design-system-generator
How do I install design-system-generator in Claude?
Run npx skills add OneWave-AI/claude-skills --skill design-system-generator -a claude-code. The skill lands at ~/.claude/skills/design-system-generator/SKILL.md.
What does design-system-generator do?
It steps the agent through tokens, CSS variables, Tailwind config, base components, a barrel export and documentation. The result is a token-driven design system.
Does it require Tailwind?
Yes, the config and cn helper step targets Tailwind. Without it you rewrite that part of the workflow.
Source text
SKILL.md · MIT
--- 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.
© OneWave-AI · MIT · OneWave-AI/claude-skills
