Agent-Skills.md

Agent Skills: Design System Generator

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

UncategorizedID: onewave-ai/claude-skills/design-system-generator

Repository

onewave-ai/claude-skills
OneWave-AILicense: MIT
748

Install this agent skill to your local

pnpm dlx add-skill https://github.com/OneWave-AI/claude-skills/tree/HEAD/design-system-generator

Skill Files

Browse the full folder contents for design-system-generator.

Download Skill

Loading file tree…

design-system-generator/SKILL.md

Skill Metadata

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.