Design System Lead Skill: Tokens, Components, Governance

What is the design-system-lead skill?

Before producing anything, the design-system-lead skill has your agent confirm three inputs: brand color and existing tokens, current maturity level, and target platforms. If you say just draft it, the agent proceeds and lists its assumptions at the top.

It lives in the product-team folder of the borghei Claude-Skills repository, a large library covering many teams. This page covers only design-system-lead, which handles component libraries, design tokens and design-dev collaboration.

What changes in your agent's output

• A documented maturity level, Emerging, Defined, Managed or Optimized, backed by an audit of existing patterns and custom components.
• Tokens in three tiers: primitive values, semantic aliases and component-scoped tokens, with every semantic token pointing at a primitive.
• Components built from primitives such as Button, Input and Icon, then composites and patterns, each with variants, sizes, states, a props table and accessibility notes.
• A contribution process that runs from RFC to release, with SemVer versioning and a changelog.
• Adoption numbers for coverage, token compliance, build time and accessibility score.

How the three-tier tokens work

The token model separates raw values from meaning. A blue 600 primitive becomes a primary semantic token, and a button background component token then references primary. Change the primitive once and every dependent tier follows.

The maturity model it starts from

The helper scripts

• token_gen.py builds primitive, semantic and component tokens from one brand color, with a WCAG contrast check and CSS, SCSS or JSON output.
• component_scaffold.py writes a documentation scaffold for a named component: props table, variants, states, accessibility, anatomy and usage.
• adoption_analyzer.py reads a CSV of per-product adoption data and prints a health dashboard, with a flagging threshold you can change.

Who the design-system-lead skill is for

Best for

• Starting a token system from one brand color and getting CSS, SCSS or JSON files to review.
• Documenting components consistently, with one spec template per component.
• Teams that need a written governance process and a way to measure adoption across products.

Not for

• Visual regression testing. The skill points to Chromatic, Percy or BackstopJS for that.
• Figma plugin work. It points to Tokens Studio for syncing tokens between design and code.
• Icon libraries, motion design or runtime theme switching, which it lists as out of scope.
• Choosing a visual style from scratch. For taste-led frontend work, see design-taste-frontend.

Use it with UiChemy

UiChemy does not read token files directly. Apply the colors and spacing this skill defines in your Figma file, then convert with UiChemy Figma to WordPress into an editable Elementor or Gutenberg page. Click Get Started on uichemy.com.

How to install Design System Lead Skill: Tokens, Components, Governance

npx @borghei/claude-skills add design-system-lead

1. Run the installer

   The README documents npx @borghei/claude-skills add <skill name> and uses senior-fullstack as its example. Swap in design-system-lead. It needs Node 18 or newer and detects which assistant you use.

2. Or copy it by hand

   Run git clone https://github.com/borghei/Claude-Skills.git and copy the product-team/design-system-lead folder, scripts included, to wherever your agent loads skills from.

3. Try the scripts

   From the skill folder, run python scripts/token_gen.py --color "#0066CC" to see a token summary. The README says the Python tools use only the standard library.

4. Ask for a design system

   Describe your brand color and platforms and ask for a token system. Answer the clarifying questions, or say just draft it to get assumptions listed instead.

Check that it loaded

Ask the agent to set up a design system. It should ask about brand color, maturity and platforms before generating anything, or list its assumptions at the top if you tell it to just draft.

Read the official instructions on GitHub

Key features

• Clarify firstAsks for brand color and existing tokens, maturity level and target platforms. It asks only the two or three questions that most change the output.
• Six-step workflowAssess maturity, define tokens, build components, document, set governance, measure adoption. Every step ends with a checkpoint you can verify.
• Maturity assessmentPlaces the system at Emerging, Defined, Managed or Optimized and records the evidence, so the next step matches where the team actually is.
• Three-tier tokensPrimitive, semantic and component tokens. A checkpoint requires every semantic token to reference a primitive, with no hardcoded values left.
• Style Dictionary configIncludes a Style Dictionary configuration example that reads tokens/**/*.json and writes CSS variables, SCSS variables, iOS Swift color classes and Android colors.xml.
• Component spec templateThe Button spec lists four variants, sizes of 32, 40 and 48 pixels, six states, a props table and rules such as a 44 by 44 pixel touch target.
• RFC to release governanceRequest, review by design, engineering and accessibility, build, document, then release with a SemVer bump, changelog and announcement.
• Versioning rulesBreaking changes bump MAJOR, new components or tokens bump MINOR, fixes bump PATCH. Troubleshooting suggests codemods and a deprecation period of 2 minor versions.
• Adoption metricsTracks coverage, consistency, efficiency and quality, with a monthly dashboard update as the checkpoint for the measure step.
• Troubleshooting and targetsTables map common problems to fixes and set targets such as above 80 percent component coverage and above 90 percent token compliance.

Frequently asked questions