The practice

A design practice where the system is written down.

AI runs my delivery layer: design systems agents can read, automated gates on everything they ship, a knowledgebase that remembers why. One rule holds it: AI never drives a UX decision. It explores options, people decide.

01The PIV loop

Plan, implement, validate.

Every build runs the same loop: plan, implement, validate. The agent primes on the codebase, the system and the decision log; the plan is reviewed before any code; nothing ships until the checks pass. When one fails, the fix lands in the system, not just the code.

# a build, as the loop runs it

prime → the agent loads the codebase, the design system, the decision log

plan → an implementation plan, reviewed before any code exists

implement → task by task, each step checked before the next

validate → tests · type checks · lint · live smoke test

→ every rendered colour pair measured, on its real surface

→ flows driven end to end on Chromium, Firefox and WebKit

review → a second model critiques the diff before a human sees it

report → divergences from the plan feed back into the rules

fail? → fix the system, not just the code

02Design systems agents can read

The system is the brief.

A system that lives in a Figma library and a designer's head can't hold the bar when machines generate the screens. So I write it down as rules an agent loads before it touches a file: tokens, type, spacing, visual rules, voice. This page runs on the system below.

# the system, as an agent reads it

accent: #FB4F14 · 4.86:1 on white, 4.52:1 on cream — the orange weight that carries text

accent on dark: #FB4F14 · 5.37:1 on #161616 — the bright weight, never text on light

ctas: #AECACD powder, charcoal label · 10.45:1 — hover darkens to #104A65 peacock

exhibit colours are grounds, never ink: green 1.64:1 as text, 12.47:1 as a surface

radius: 8 / 16 / 24 · pill: 100 · gradients: none · emoji: none

one accent per headline: an orange underline, one phrase

voice: first person, sentence case, British English

banned: transform, leverage, unlock, supercharge

→ agent loads rules → ships screens → gate checks them

Underneath: primitives beneath a semantic contract, components above. Components touch only the contract, so a re-skin is a one-file swap.

Open the system map

03Quality gates

Craft held by machines.

I learned gates in email, where one broken render reaches three million people. And AI gets one shot: after one bad AI experience, people take around eight months to try again. My platform runs nine agents behind a ten-point gate; work ships when the checks pass, not when an agent sounds confident. A generated screen passes through:

01Token compliance: no value outside the system.
02Contrast and accessibility: WCAG AA, focus, labels, alt text.
03Spacing rhythm: the grid holds.
04Voice: copy checked against the register, banned words caught.
05Pattern reuse: an existing component beats a newly invented one.
06A judge pass: a second model critiques the screen before a human sees it.

04The design knowledgebase

Decisions that remember.

Every decision goes in as a record: the choice, why, the rejects, the number that judges it, and, once tested, what happened. Agents and designers query it first, so no idea dies twice for reasons nobody wrote down. One entry from the heavy month:

Nothing is pre-selected on the forbearance screen

Decision: Every way out of a missed payment carries its cost in pounds and months on its own card, and none of them is highlighted, ordered first or ticked.
Because: This is the one moment in the product where a default is indefensible: the designer does not know which option is right for this person, and a default communicates that they do.
Rejected: Recommending the cheapest option. Cheapest in total is not cheapest for someone who cannot make this month's payment at all.
Would measure: How many choose “pay as planned” after opening it. A high number is the good outcome, not a failed conversion.

05The cadence

From bet to live test.

The cadence runs on Ryan Singer's Shape Up: shape the work before anyone bets on it, give each bet an appetite, and let scope flex rather than time. The screens follow Luke Wroblewski: mobile first, and forms that ask only what changes the answer.

01
Shape the bet
What we believe, what would change our mind, the number that decides, and the appetite: how much time the question is worth. Written first.
02
Options in Figma
Competing directions and flows, cheap to make and cheap to kill. Where stakeholders walk the thinking.
03
Build in code
Agents read the system and the Figma file and build the chosen options as working prototypes.
04
Gate it
Every variant clears the automated checks before a human reviews it.
05
Live-test and decide
Real flows in front of real people, against the number from step one. Then invest, iterate or kill. When the appetite runs out, the bet ends rather than stretches.

06The three-year view

What a design team looks like when production is free.

Designers curate the knowledgebase

Production hands matter less; taste, framing and the judgement to say "no, again" matter more.

Every designer runs probes

When a live test is cheap, the roadmap becomes a portfolio of questions with honest numbers.

The system is the advantage

Encode your craft as rules and gates and you ship at machine speed and still read as one hand. Skip it and you just ship faster slop.