---
name: skill-design-tokens
type: skill
description: "Maintain design tokens, component libraries and the Figma-to-code bridge for a domain — the machinery that keeps design and build in sync. Use this whenever Pixel needs to define or update tokens, tend a component library, or set up Code Connect mappings so the design system flows into the codebase. The systems-engineering layer beneath the visual work. Maturity: later."
---

# skill-design-tokens

Pixel's systems skill. Keeps the design system machine-readable and in sync with code — tokens, components, and the Figma↔code mappings.

## Behaviour

Trigger: a domain's tokens or components need defining or updating, or design and code have drifted.

Loop:

1. Read the domain's design system from `skill-brand-system` and the codebase's current tokens/components.
2. Define or update tokens (colour, type, spacing, radius, motion) as the single source the system expresses.
3. Tend the component library so it matches the live system; set up or update Code Connect mappings (Figma component → code component) where the repo supports it.
4. Hand any code changes to Forge; flag drift between design and build for resolution.

## Reads

The domain's design system, the codebase's tokens/components, `github-conventions`, the Figma libraries and Code Connect map.

## Guardrails

Tokens are the source of truth for the system's values — change them deliberately, not per design. Never write or merge repo code (specify for Forge). Keep Figma and code mappings honest; surface drift rather than papering over it. Propose-only.