Plays for every stage of design system work.

Establish Design System Context

Reads every existing project file before asking a single question — produces a complete picture of what exists, what decisions have been made, and what still needs to be answered.

Establish a Positioning Brief

Seeds the living brief with brand stance, audience, density target, and OKLCH commitment level — the inputs every color, type, and token play expects.

Establish Visual Language

Translates the positioning brief into a reviewable style tile covering color, typography, shape, and surface treatment — human approval required before tokens are generated.

Generate a DESIGN.md

A committed DESIGN.md tells every agent in your repo what the visual language is — drafted from your positioning brief, formatted for AI tooling.

Define Voice and Tone

Produces a VOICE_AND_TONE.md covering voice character, tone adjustments by context, writing mechanics, and UI copy patterns — the content equivalent of DESIGN.md.

Generate a Color Scheme

Starting from seed hex values, generates full OKLCH primitive ramps and maps each stop to a semantic role with contrast targets verified for both light and dark.

Generate a Type Scale

Named type roles with size, weight, line-height, and tracking — calibrated to your product's density and brand stance, not a generic modular ratio.

Generate Shape Tokens

Border radii as a personality decision, not a default — with a component mapping table so buttons, cards, inputs, and overlays stay visually consistent.

Generate Spacing Tokens

Generate Spacing Tokens

Map an Existing Palette to Semantic Roles

Takes any existing color values — Figma swatches, a Tailwind config, a brand palette — and assigns each to the correct semantic role with contrast verification.

Generate Dark Mode Token Values

Dark mode built on tonal mirroring, not lightness inversion — role assignments that hold up perceptually against dark surfaces, verified against WCAG.

Generate a Style Dictionary Config

Wires your semantic token JSON into a Style Dictionary v5 pipeline that outputs CSS custom properties, ESM, and platform targets from a single source.

Write a Component Specification

Before any code: states, anatomy, token slot assignments, and WCAG requirements — the contract between design intent and what gets implemented.

Implement a Component

Takes the component spec and produces working React code consuming your semantic tokens, following the patterns already established in DESIGN.md.

Scaffold a Core Component Set

Maps every component named in DESIGN.md to a spec skeleton — variants, states, and anatomy — so implementation has a defined scope before a line of code is written.

Generate Full-Page Examples

Generates 1–2 full-page HTML compositions showing the token system and component patterns applied to realistic, product-appropriate page types.

Set Up a Documentation Site

Produces a self-contained docs/index.html with token swatches, component gallery, and usage notes — no build step, openable from the filesystem.

Migrate a Tailwind Config to Semantic Tokens

Converts raw Tailwind color values into a two-tier token structure — existing stops become primitives, semantic roles get added — without touching component utility classes.

Audit a Component Against System Standards

Finds every hardcoded value, missing state, accessibility gap, and DESIGN.md divergence in an existing component — with specific, line-level fixes.

Start a Design System Work Session

Orients a fresh agent to where the system stands — reads DESIGN.md, surfaces open decisions, and confirms what's in scope before work begins.

Add a Component to the Design System

Specs and implements a new component within your established system — token assignments already defined, patterns already set, no blank-slate decisions required.

Audit Token Coverage Across the Codebase

Scans for hardcoded color, spacing, and type values that should be consuming tokens — grouped by category, with file and line references.

Audit Components Against the Accessibility Floor

Checks every semantic color pairing against WCAG 2.2 and APCA, flags non-compliant combinations, and produces token-level fixes rather than component-level workarounds.

Run a Design System Retrospective

Surfaces where code has drifted from DESIGN.md, which decisions no longer hold, and what should be formally reconsidered before the next iteration.

Plan the Next Design System Iteration

Turns retrospective findings and open DESIGN.md questions into a prioritized, scoped backlog — what to build, fix, or revisit, and in what order.