design-system-creator

Q: How do I install design-system-creator?

Run npx skills add https://github.com/curiositech/some_claude_skills --skill design-system-creator in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/design-system-creator/ (personal) or .claude/skills/design-system-creator/ (project).

by curiositechFrontend & Design

Builds comprehensive design systems and design bibles with production-ready CSS. Expert in design tokens, component libraries, CSS architecture. Use for design system creation, token architecture, component documentation, style guide generation. Activate on "design system", "design tokens", "CSS architecture", "component library", "style guide", "design bible". NOT for typography deep-dives (use typography-expert), color theory mathematics (use color-theory-palette-harmony-expert), brand identity strategy (use web-design-expert), or actual UI implementation (use web-design-expert or native-app-designer).

Installs: 239
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/curiositech/some_claude_skills --skill design-system-creator

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads design-system-creator automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Design System Creator

Design systems architect and CSS expert specializing in creating comprehensive, scalable design bibles.

When to Use This Skill

✅ Use for:

Creating design tokens from scratch (colors, spacing, typography scales)
Building CSS custom property architectures
Documenting component libraries with usage guidelines
Creating design bibles and style guides
Establishing naming conventions (BEM, OOCSS, SMACSS)
Auditing existing CSS for design system extraction
Theming and dark mode token systems
Multi-brand/white-label token structures

❌ Do NOT use for:

Typography selection and pairing → typography-expert
Color theory and palette generation → color-theory-palette-harmony-expert
Brand identity and visual direction → web-design-expert
Actual component implementation → web-design-expert or native-app-designer
Icon design → web-design-expert
Motion design principles → native-app-designer

Three-Tier Token Architecture

The foundation of scalable design systems:

:root {
  /* 1. PRIMITIVE - Raw values (ALWAYS use OKLCH for colors) */
  --color-blue-500: oklch(62.8% 0.195 252.5);
  --space-4: 1rem;

  /* 2. SEMANTIC - Purpose-driven */
  --color-primary: var(--color-blue-500);
  --space-component-padding: var(--space-4);

  /* 3. COMPONENT - Specific usage */
  --button-bg: var(--color-primary);
  --button-padding: var(--space-component-padding);
}

→ See references/token-architecture.md for dark mode, multi-brand, and complete examples.

OKLCH: The Modern Color Standard

⚠️ CRITICAL: Always use OKLCH for color tokens, not hex or HSL.

OKLCH is perceptually uniform - equal L values mean equal perceived lightness. This is essential for:

Generating harmonious color scales
Ensuring accessibility (L=50% is true middle gray)
Theming (adjust L for dark mode, C for brand intensity)

:root {
  /* OKLCH format: oklch(Lightness% Chroma Hue) */

  /* Primary scale - same hue, varying lightness */
  --color-primary-100: oklch(95% 0.05 252);
  --color-primary-500: oklch(62% 0.19 252);
  --color-primary-900: oklch(30% 0.15 252);

  /* Dark mode: reduce L uniformly */
  --color-bg-light: oklch(98% 0.01 252);
  --color-bg-dark: oklch(15% 0.02 252);
}

Essential OKLCH Resources:

Resource	Purpose
oklch.com	Interactive OKLCH color picker
Evil Martians: Why Quit RGB/HSL	Why OKLCH is the new standard
Harmonizer	Generate harmonious palettes in OKLCH

OKLCH Benefits for Design Systems:

Perceptual uniformity: L=70% always looks 70% light
Better contrast: APCA-ready lightness calculations
Easier scaling: Math operations work predictably
Native CSS: oklch() works in all modern browsers (2023+)

Design Bible Structure

1. Foundation

Brand Identity, Design Principles
Color System, Typography Scale
Spacing Scale, Grid System

2. Components

For each component document:

Purpose, Anatomy, Variants
States (default, hover, active, disabled, focus)
Responsive behavior
Accessibility (ARIA, keyboard, screen readers)
Code examples

3. Patterns

Page Layouts, Navigation
Forms, Data Display
Feedback (alerts, toasts, modals)

4. Guidelines

Writing (voice, tone)
Imagery, Motion, Accessibility

→ See references/component-documentation.md for templates.

CSS Organization (ITCSS)

styles/
├── 0-settings/     # Tokens, custom properties
├── 1-tools/        # Mixins, functions
├── 2-generic/      # Reset, normalize
├── 3-elements/     # Typography, forms (unclassed)
├── 4-objects/      # Layout patterns
├── 5-components/   # UI components
├── 6-utilities/    # Helpers, overrides
└── main.css        # Import all

→ See references/css-organization.md for BEM naming and full structure.

Anti-Patterns to Avoid

1. Token Explosion

What it looks like: 500+ tokens with overlapping purposes Why it's wrong: Defeats constraints; developers can't choose Fix: Limit to 6-8 spacing tokens. If you need more, fix the scale.

2. Missing Semantic Layer

What it looks like: Components reference primitives directly Why it's wrong: Can't theme, can't change brand without touching every component Fix: Three-tier tokens: Primitive → Semantic → Component

3. Documentation Drift

What it looks like: Design bible says one thing, CSS does another Why it's wrong: Developers stop trusting documentation Fix: Generate docs from CSS comments, or use Storybook

4. Utility Class Overload

What it looks like: class="p-4 m-2 bg-blue-500 text-white..." Why it's wrong: HTML unreadable, design intent lost Fix: Use utilities sparingly; most styles in semantic component classes

5. Breaking the Scale

What it looks like: padding: 13px; (why 13?) Why it's wrong: Every exception erodes the system Fix: If the scale doesn't work, fix the scale

6. No Version Control

What it looks like: "Which button is correct?" Why it's wrong: Multiple sources of truth Fix: Single source of truth with version numbers, deprecation warnings

Working Process

Audit: Review existing patterns and inconsistencies
Define: Establish tokens and foundational system
Build: Create component library with documentation
Document: Write comprehensive design bible
Test: Validate accessibility and responsiveness
Deliver: Package with examples and starter templates

MCP Integrations

MCP	Purpose
21st.dev	Scaffold components quickly with modern patterns
Storybook	Extract existing component structure (when available)
Figma	Sync design tokens from Figma variables (when available)
Stability AI	Generate placeholder images for documentation
Firecrawl	Research design system best practices

Output Deliverables

Design Bible Document: Complete markdown/HTML with visual examples
CSS Codebase: Well-commented, modular, production-ready
Component Library: Interactive examples with all variants
Quick Start Guide: Getting started, customization, common recipes

References

→ references/token-architecture.md - Three-tier tokens, dark mode, multi-brand → references/css-organization.md - ITCSS, BEM, component file structure → references/component-documentation.md - Doc templates, quick reference cards

Integrates With

typography-expert - Typography scale and font selection
color-theory-palette-harmony-expert - Color palette generation
web-design-expert - Brand identity and visual direction
adhd-design-expert - ADHD-friendly design tokens

Remember: A design system is a living product that serves products.

FAQ

What does the design-system-creator skill do?

How do I install design-system-creator?

Run npx skills add https://github.com/curiositech/some_claude_skills --skill design-system-creator in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/design-system-creator/ (personal) or .claude/skills/design-system-creator/ (project).

Which AI agents can use design-system-creator?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is design-system-creator safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains design-system-creator?

It is published by curiositech in curiositech/some_claude_skills. It has 239 recorded installs.