Agent skill · design visual · borghei
design-system-lead
Design systems leadership across component libraries, design tokens, and design-dev collaboration. Use when architecting a token system, building a component library, defining governance, or generating cross-platform tokens.
Why this skill is useful
Provides a structured approach to building design systems, including governance and token architecture that the AI wouldn't reliably generate on its own.
What it needs
About 8k tokens when loaded. Last updated 2026-07-21. 462 stars on the source repository.
What this skill does
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, confirm these inputs. If any is unknown or vague, ASK — do not assume: [ ] 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) Stop rule: ask only the 2-3 that most change the output. If the user says "just draft it," proceed and list your assumptions at the top of the artifact. Workflow 1. Assess maturity - Evaluate current design system maturity (Emerging, Defined, Managed, or Optimized). Audit existing patterns, inconsistencies, and custom components. Checkpoint: maturity level is documented with evidence. 2. Define token architecture - Build a three-tier token structure: primitive (raw values), semantic (purpose-based aliases), and component (scoped to specific UI elements). Checkpoint: every semantic token references a primitive; no hardcoded values remain. 3. Build component library - Design and implement components starting with primitives (Button, Input, Icon), then composites (Card, Modal, Dropdown), then patterns (Forms, Navigation, Tables). Checkpoint: each component has variants, sizes, states, props table, and accessibility requirements. 4. Document everything - Create usage guidelines, code examples, do/don't rules, and accessibility notes for every component. Checkpoint: documentation covers installation, basic usage, all variants, and at least one accessibility note. 5. Establish governance - Define the RFC-to-release contribution process. Set versioning strategy (SemVer). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills borghei/design-system-lead