Design systems

Finds near-duplicate UI components and one-off variants in a codebase, groups them by role, and proposes a consolidation plan with migration effort, without changing any code.

Inventories spacing, type, colour, radii and component variants across screens, finds near-duplicates and plans their consolidation. Use before building or cleaning up a design system.

Scans a codebase for hard-coded colours, spacing, radii and type sizes, maps each to the nearest design token, and proposes or applies replacements, listing values with no token.

Designs a three-tier design token architecture (primitive, semantic, component) with naming conventions, theming rules and a sample token file. Use when starting or restructuring a design system.

Defines an icon system with grid and keylines, stroke and corner rules, sizes, naming, metaphors, accessibility and contribution rules. Use when a design system creates or tidies up its icons.

Designs a dark theme from an existing light palette, covering surface elevation, semantic colour mapping, contrast checks, images, charts and token changes. Use when a design system adds dark mode.

Sets up a first design system in gated steps - UI audit, tokens, the first ten components, usage docs, a pilot with one product team and a governance plan.

Acts as a design systems lead who runs the system as a product, balances consistency with team autonomy, writes down decisions and judges success by adoption rather than component count.

Generates web, iOS and Android token files from a source token file, with naming transforms, theme variants and a check that every alias resolves and every token appears per platform.

Defines how to measure design system adoption with code and design-file coverage, detached instances, contribution rates and team satisfaction, plus a quarterly report format.

Plans how a design system is run, covering ownership, the contribution model, versioning, deprecation, adoption tracking and support. Use when setting up or fixing how a design system is run.

Annotates a screen design for engineering handoff with accessibility notes - headings, landmarks, focus order, accessible names, states, keyboard behaviour and announcements - mapped to WCAG.

Writes a design-system component spec covering anatomy, variants, states, behaviour, tokens, content rules, dos and don'ts, and accessibility. Use when adding or documenting a component.