Notes

Page fifty should match page one

3 min read

What a design team quietly gives a product, and why I built Turtlekit to hand some of it to an AI coding agent.

“I’m not a designer, so just make it look good.”

If you build with an AI coding agent, you’ve probably typed some version of that line. What comes back works, and the first page usually looks fine. The trouble shows up around page ten. A button is a little taller than its twin on another screen. Two actions compete to be the main one. A field lost its label somewhere along the way. Nobody decided any of it. The agent filled each gap with the most common choice it had seen, one page at a time.

I build my own products with coding agents, and I’ve mostly stopped worrying about whether the code will work. What I watch for now is the drift. You feel it before you can name it, so you prompt again, and the next page drifts somewhere else.

What a design team quietly does

A team with a designer gets its decisions made once. How much space sits between a label and its field. Which button leads. What an empty screen says, and what a failed one says. How a table behaves on a phone. Then someone holds the line, so the fiftieth screen looks like it came from the same hands as the first.

An agent works without that team. Rules files help, and I keep mine, but they’re advice. A long session can lose them, and nothing checks the finished page against what they said.

So I built Turtlekit, a React design system that builds those decisions into the parts an agent uses. It’s two people’s work. A product designer shaped the design system, and I built it as its frontend engineer.

The button on page fifty

The first decision was to take className and style away from every component, so TypeScript turns down a one-off nudge before anything runs. That holds whether or not the agent remembers a single rule, so the button on page fifty is the one you started with. Pages still take their own CSS, built from the kit’s values. And since most people I’d want to help have a logo and a colour rather than a palette, the whole theme grows from that one colour.

That’s how Turtlereport, my other product, is built: its admin inside WordPress and each client’s login. It’s the closest thing I have to a page-fifty test. Every screen was built with agents, and they still read as one product.

Where it sits among good tools

There are good tools near this. AI app builders are the quickest way from an idea to a hosted app. Copy-in component libraries give you open code to reshape line by line, which is right when you or a designer want to own every part. Headless primitives handle behaviour and accessibility well and leave the look to you.

Turtlekit is for a narrower moment. You’re in your own React project, with the AI tool you already use, and you’d rather the design decisions were made once and held. The components are free on npm. The part I care most about is the checker. Your agent sends it the code and gets back each problem with its fix. It comes with Turtlekit MCP, which opens to its waitlist first.

I’m still working on it, and the case study goes into the decisions behind it. If something stands between you and a page you’re proud of, write to me.