Agent skill · design visual · erichowens
design-system-creator
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,
Why this skill is useful
Provides domain-specific knowledge on design token architecture and CSS best practices that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
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: → 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) 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/design-system-creator