I run design systems as products.

My latest replaced a component library with a specification that AI coding agents build from, across a portfolio of 60+ products.

{  "primitive": {    "teal-400": { "value": "#2EC4B6" }  },  "color": {    "interactive": { "ref": "teal-400" }  },  "radius": {    "control": { "value": "10px" }  },  "space": [4, 8, 12, 16, 24, 32, 48, 64, 96]}
tokens.json, excerpt. Press "Show the spec" to see it on the page, or read the full spec.
  • 60+

    products in the portfolio the spec serves

  • 117

    accessibility failures blocked before merge since July 2026

  • 71%

    first-run gate pass rate across 186 pilot builds

  • 3

    products in production on a pinned release

Work

One case study and two short reads, all from the same project.

I replaced my own component library with a spec AI builds from

Why I retired the library I built, what replaced it and how teams adopted it.

Case study, 2026, 8 minute read

Gate run on a deliberately broken test fixture
$ node src/cli.js --config fixtures/violating/gate.config.json gate — validated against pinned spec v0.31.0 (manifest sha256 verified)passes: staticchecked 7 governed file(s) bad.css  bad.css:2  [colour]  raw hex colour `#ff0000` — use a semantic `--color-*` token  bad.css:4  [spacing]  off-scale spacing `15px` — not a scale step; nearest is `16px` (use its `--spacing-*` / `--space-*` token)bad.html  bad.html:5  [a11y]  <img> is missing required "alt" attribute (wcag/h37)  [… 55 further findings omitted …] FAIL — 58 violation(s): 13 colour, 16 spacing, 15 tokenisable, 3 undefined-token, 6 a11y, 1 bad-exception, 1 ancestor-custom-property, 2 logical-properties, 1 typographyEXIT=1

Run on 13 October 2026. The fixture pins spec v0.31.0 and the current spec is v0.93.0, so this shows how the gate behaves on a fixed test case. It is not a check of production code. Findings trimmed and product names removed.

About

I'm a design operations manager in Nottingham. I started as a junior UI designer in March 2020, and I now run the design system for a portfolio of 60+ products.

For three years I led a multidisciplinary team on our first design system. When both team members moved on, I was running it alone, and a library that needed every component built three times stopped being feasible for one person.

That library had 45 components in React, Vue and Angular, and I delivered it in four stages against a roadmap I presented at CTO level. I retired it and replaced it with a specification that AI coding agents build from. I own its strategy, roadmap, backlog, releases and adoption, and colleagues come to me for anything concerning the design system.

Skills I use in my role

  • Roadmapping
  • Backlog ownership
  • Prioritisation
  • Discovery
  • Stakeholder management
  • Metrics
  • Release planning
  • Design tokens
  • Accessibility
  • Claude Code

From first component to running the system

  1. March 2020

    Junior UI designer

    Started the company design system

  2. June 2021

    UX/UI designer

    Designed and documented our first design system

  3. August 2022 to February 2026

    Design operations manager

    Led a front-end engineer and a UI designer on the design system and its roadmap

  4. From July 2026

    Design operations manager

    Running the spec solo, with a 15-agent harness

Download my CV

Fancy a chat?

I'm always happy to talk about anything in product design, development or management.