Design System Architect
This one walks you through building a production design system from tokens to components. It starts with the fundamentals: setting up design tokens with Style Dictionary, structuring primitives vs semantic values, and handling theme switching. Then it moves into atomic design patterns with practical component architecture, complete with TypeScript types and folder structures. The coverage of token transformation is especially solid, showing how raw JSON becomes CSS variables and JavaScript exports. If you're inheriting a mess of inconsistent components or starting a system from scratch, this gives you the blueprints. It's opinionated about structure but flexible enough to adapt, and the examples are concrete enough to copy and modify immediately.
- GitHub stars
- 33
- last updated
- Aug 21, 2026
Install
$ npx -y skills add daffy0208/ai-dev-standards --skill design-system-architect --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/daffy0208/ai-dev-standards
- Categories
- Frontend Development, DevOps & CI/CD, Code Review & Quality, AI & Agent Building, Design & UI/UX
- First seen
- Jun 3, 2026
More from daffy0208/ai-dev-standards
All 49- Figma Developer
- Focus Session Manager
- Frontend Builder
- Knowledge Base Manager
- Knowledge Graph Builder
- Multi Agent Architect
- MVP Builder
- Performance Optimizer
- Product Strategist
- Prototype Designer
- PRP Generator
- Quality Assurance
- RAG Implementer
- Security Architect
- Security Engineer
- Supabase Developer
- Testing Strategist
- UX Designer
- Visual Designer
- Animation Designer1.9K
- Brand Designer1.3K
- 3d Visualizer670
- Data Visualizer576
- Video Producer454
Recommended
More Frontend Development
product-appeal-analyzererichowens/some_claude_skillsEvaluate product desirability, market positioning, and emotional resonance—the complement to friction analysis. Assess whether users will WANT a product (not ju0skills.sh installs
theme-creationetewiah/property_web_builderCreate new themes for PropertyWebBuilder. Use when creating custom themes, styling websites, or modifying theme templates. Handles theme registration, view temp0skills.sh installs
remotionjdrhyne/agent-skillsBest practices for Remotion video creation in React — compositions, sequences, animation, timing, and rendering. Use when building, reviewing, or debugging Remo0skills.sh installs
privacy-jpkimlawtech/korean-privacy-terms日本サービス向け（일본 서비스용） プライバシーポリシー・利用規約・同意モーダル・Cookieバナー 자동 생성. 個人情報保護法(APPI)·消費者契約法·特定商取引法 반영. Next.js 13~16 프로젝트 대상.0skills.sh installs
architecturenativewind/nativewindExplain the Nativewind v5 architecture, CSS pipeline, and key files. Use when a contributor wants to understand how the codebase works.0skills.sh installs
video-script-writernicepkg/ai-workflowWrite engaging video scripts for YouTube, TikTok, and other platforms. Creates complete scripts with hooks, main content, and CTAs. Supports various formats inc0skills.sh installs