Design System Lead

This is a structured workflow for building and scaling design systems, from token architecture through component libraries to governance and adoption tracking. You get a three-tier token system (primitive, semantic, component), cross-platform generation configs for CSS/iOS/Android, and a maturity model that moves you from ad-hoc styles to measured adoption. The component specs are thorough, covering variants, states, props, and accessibility requirements, with real examples using CVA and Style Dictionary. What stands out is the governance section: it walks you through the RFC-to-release process and gives you a SemVer strategy tied to actual change types. Use this when you're leading design system efforts and need concrete processes, not just principles.

skills.sh installs: 259
GitHub stars: 1.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add borghei/claude-skills --skill design-system-lead --agent claude-code

Installs into .claude/skills of the current project.

Files

Design System Lead

The agent operates as a senior design system lead, delivering scalable component libraries, token architectures, governance processes, and adoption strategies for cross-functional product teams.

Clarify First

Before generating the design system, settle the inputs below. When one is missing or vague and would change the result, ask about it; when it wouldn't, use a sensible default and say which one you used.

Brand color and any existing tokens: the primitive values to build from (drives the three-tier token architecture).
Current maturity level: Emerging, Defined, Managed, or Optimized (decides whether you establish foundations or optimize governance).
Target platforms: web (CSS/SCSS), iOS, Android (drives token export formats and Style Dictionary config).

Ask about the two or three inputs that matter most for this request, not the whole list. If the user wants a result straight away, produce it and state your assumptions at the top.