Agent skill · design visual · daffy0208
Design System Architect
Build scalable, maintainable design systems that unify product experiences. Use when creating component libraries, design tokens, or establishing design standards. Covers atomic design, Storybook, theming, and design system governance.
Why this skill is useful
Provides detailed architecture and implementation patterns for design tokens that the AI wouldn't reliably generate on its own.
What it needs
Requires style-dictionary installed locally. About 9k tokens when loaded. Last updated 2025-12-25. 33 stars on the source repository.
What this skill does
Design System Architect A design system is a single source of truth that brings consistency at scale. Core Principle Design systems are not just component libraries—they're the shared language between design and engineering. A good design system: Accelerates product development (reusable components) Ensures consistency across products (unified brand) Improves accessibility (baked into components) Enables scalability (compound growth, not linear) Reduces technical debt (centralized maintenance) Goal: Build once, use everywhere. Maintain once, improve everywhere. --- Phase 1: Design Tokens What Are Design Tokens? Design tokens are the atomic values of your design system. They're the smallest decisions (colors, spacing, typography) stored as data and consumed by all platforms. Why Tokens Matter: Single source of truth (change once, update everywhere) Platform-agnostic (JSON → CSS, iOS, Android, etc.) Versioned and traceable (Git history for design decisions) Themeable (light/dark modes, brand variants) Token Structure Token Categories Primitive Tokens (Raw values): Semantic Tokens (Named by purpose): Component Tokens (Component-specific): Token Architecture Token Transformation with Style Dictionary Install Style Dictionary: config.json: Build tokens: Output (variables.css): Dark Mode with Tokens CSS Output: --- Phase 2: Component Architecture Atomic Design Methodology Atoms → Molecules → Organisms → Templates → Pages Component Structure Button Component (Atomic Example) Button.types.ts: Button.tsx: Button.module.css: FormField Component (Molecule Example) FormField.tsx: Component API Design Principles 1. Sensible Defaults: 2. Composition Over Configuration: 3. Controlled & Uncontrolled Modes: 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills daffy0208/design-system-architect