Design System Creator

This builds production-ready design systems with the three-tier token architecture (primitive, semantic, component) and outputs a complete design bible with CSS. It's opinionated about OKLCH for colors instead of hex or HSL, follows ITCSS organization, and documents anti-patterns like token explosion and utility class overload. Use it when you need the full stack: tokens, component documentation, CSS architecture, and style guides. It won't do actual UI implementation or deep typography work, but pairs with those skills. The output is comprehensive: annotated CSS, component library with all states, and a markdown design bible you can hand to a team.

skills.sh installs: 134
GitHub stars: 113
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add erichowens/some_claude_skills --skill design-system-creator --agent claude-code

Installs into .claude/skills of the current project.

Files

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