Design System Creation

This creates the foundation layer for consistent UI development: color palettes, typography scales, spacing systems, and component documentation. You'd use it when starting a new product that needs design consistency or when multiple teams are building interfaces that should look and feel unified. It covers everything from CSS custom properties and design tokens to component variants, accessibility requirements, and governance processes. The approach is practical, starting with foundational tokens before moving to components, and includes real examples in React plus documentation templates. If you're tired of reinventing buttons and wondering why your app's spacing feels random, this gives you the structure to fix that.

skills.sh installs: 500
GitHub stars: 248
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add secondsky/claude-skills --skill design-system-creation --agent claude-code

Installs into .claude/skills of the current project.

Files

Design System Creation

Build comprehensive design systems for consistent UI development across teams.

Design System Layers

Foundation: Colors, typography, spacing, elevation
Components: Buttons, inputs, cards, navigation
Patterns: Forms, layouts, empty states

Foundation - Design Tokens

:root {
  /* Colors */
  --color-primary-50: #eff6ff;
  --color-primary-500: #3b82f6;
  --color-primary-900: #1e3a8a;

  /* Semantic colors */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-8: 2rem;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}