Author of Correct by Design: A new standard in agent-ready design systems
20 years in design, 12 leading teams. I set the design strategy, build the team, create the system and own the outcome. AI-native stack now, and still close enough to ship.
On screen: the Correct by Design site at correctby.design, headline “The design function moves into the code.”, then pages from the standard: the files in the repository, how the system ships as a package, and “Five reads, then a screen”, the path an agent reads through before it builds anything.
This is Correct by Design, a standard I've written for agent-ready design systems, built out into a reusable framework that can be applied to any organisation.
Most of what ships now is built by an agent, and design judgement needs to be codified within a system that carries not just the component library, but also the thinking. The agent traverses the repository as it is signposted progressively deeper towards its target.
On screen: a diagram, “The agent inside the system”. The agent sits at the centre. Parts from the system are accepted: Button/secondary, --space-3, --ink, Card. Off-system choices are rejected at the boundary: a made-up token, a raw hex colour (#3a7bd5), a raw <button>, 13px, the wrong component, an invented variant.
Rather than issuing design guidelines, clear boundaries are set, and any design system drift fails the build process, making the wrong implementation impossible.
On screen: the ClarityAI docs site at clarityai.design. The home page (“Clarity is an AI-first design system”), the “Built for agents” principles page, then the Toaster component page and its agent spec, the Markdown file an agent reads before it uses the component.
In the ClarityAI design system I led at Nivoda, built to the Correct by Design standard, design principles are detailed inside the system.
Components are tightly coupled with specific agent documentation: what it's for, when to use it, and when not to use it. A designer, an engineer, and an agent all read the same thing.
On screen: a Claude Code session, “Set up studs demo from scratch”. The agent asks which category to launch (studs, chains, pendants, tennis bracelets, wedding bands) and which range filters to include. Then the result, running locally: a studs listing page and a product page for “0.75ct Princess Sapphire Studs, 14k Rose Gold” in the Nivoda marketplace.
Here, an agent is building a new part of the Nivoda marketplace, using a skill and the agent-ready design system to deliver near-production-grade code. The new category was built out from the precedent of the existing codebase, and with the use of this design system, without looking at screen designs themselves.
On screen: a diagram, “The design function in the delivery chain”, running from inception to production. Before: design, a long gap, then several rounds of design QA. Now: design, system, build, then one short QA step. Design QA is marked 3 days before and 3 hours now.
Nivoda's design function's role fundamentally changed. From purely focusing on upfront experience design, it expanded up the delivery chain through to owning the system that engineering used to implement the UI correctly first time.
Following this method, we were able to reduce design QA from a three-day back-and-forth between designer and engineer to just three hours.
On screen: the Nivoda brand guidelines site, “The Nivoda brand system”, with its logo, print applications and colour pages.
The design function was able to dramatically increase its impact by allowing members of the wider organisation, beyond engineering, to also use this new system effectively.
Anyone can build with it, but crucially, the agent can deliver a reliable outcome.
