Turtlekit

People who build with an AI coding agent get pages that work and a design that drifts. Each page looks fine on its own, but by the tenth the spacing, the button sizes and the labels have stopped agreeing, because the agent settled every open decision where it stood. Without a designer, nobody holds those decisions together.

Turtlekit is the React design system I made for them. Its components come with the design decisions already made, and the whole theme grows from one brand colour. A product designer shaped the design system, and I’m the frontend engineer who built it. It’s my own product, public at turtlekit.dev with the components free on npm. Turtlekit MCP, the hosted server with the guidance and a checker that hands the agent each problem with its fix, opens to its waitlist first.

Components that refuse one-off styles

Give an agent className and style and it will fix a layout by nudging one button’s padding. That works on the screen in front of it, and it’s exactly where drift starts, because the fix lives in one place. So Turtlekit’s components take named options and nothing else, and TypeScript rejects the nudge before anything runs:

// error: no className prop
<Button className="primary">
// error: no style prop
<Button style={{ padding: 3 }}>
// error: no "fancy" variant
<Button variant="fancy">
// fine: a style the kit designed
<Button variant="soft">

Closing the parts also protects what’s inside them. Keyboard support, visible focus and contrast in light and dark are built into each component, and automated accessibility checks run on every one of them, in both themes, on every change.

Pages keep their own CSS

I could have closed pages as tightly as the components. But when a hero, a band or a frame around an illustration has no part in the kit, a closed page leaves the agent choosing between breaking a rule and shipping a worse page, and a rule that forces that choice is the wrong rule.

So a page can carry its own styles on its own class names, as long as every value comes from the kit’s tokens, and the checker holds that line. The parts stay consistent, and each site still gets a layout of its own.

A whole brand from one colour

I chose to ask for one colour, the one already in the logo, and build the rest from it, in light and dark. When that colour is too light to carry white text, the buttons take the nearest shade that can. Corners, typeface and scale stay theirs to choose.

Where the judgement lives

A project installs only the package. The page patterns, the guides, the rule book and the checker stay on my server, and the agent reaches them over MCP. I built that server as an MCP service on Cloudflare Workers, and I drew the line there for two reasons. Their app is ordinary React that never calls me, so if they stop paying, everything they built still builds and runs. And the judgement is the part I keep improving, so it’s the part Pro will charge for.

Every finding names the problem and the change that fixes it, so the agent can act on it without a person translating. In Turtlereport, the finding on a hand-built drawer pointed the agent to the kit’s Sheet, which already handles focus and Escape.

How I know it holds

Turtlereport is the proof I trust most. Its admin is an app inside someone else’s WordPress, where the kit’s isolated build keeps the two sets of styles apart, and every screen in it, along with each client’s login, is built from Turtlekit’s components. They look and behave like one product because they’re built from the same parts. The Turtlereport case study covers the plugin itself.

Coding agents write much of Turtlekit’s own code, and I decide what goes in. Anything people would notice starts as a written decision. Every change then meets thousands of tests, accessibility checks in both themes, layouts from a small phone to a wide screen in both reading directions, and a picture of every component set beside the one before, where any difference needs a reason. Nothing goes in until the checks pass and I’ve looked at it myself.

Turtlekit is at turtlekit.dev, and I wrote about why I built it in Page fifty should match page one.