Rosemary, made readable by agents

## project

Rosemary is the design system this site is built on. I wrote it for the people and the AI agents who build with it, then measured whether the agents follow it.

## evidence

guidance

The project's agent instructions tell Claude which tokens, text styles, motion, layers and components to use, and what to do when something is missing.

check

A script flags any color, font size, spacing, radius, motion or z-index value that bypasses a token, and the site will not build until every one is fixed.

eval

I gave Claude 9 everyday requests, such as a filter, a dialog and a newsletter sign-up. Each one was built by a fresh Claude agent in its own copy of the site, once with the Rosemary guidance removed and once with it in place.

result

Off-system values fell from 6.3 to 0.0 per 100 CSS declarations. The agent used the right Rosemary component in 27 of 27 runs with the guidance and 9 of 27 without it. The site still built after 27 of 27 runs with the guidance and 26 of 27 without it.

method

Each task ran three times in each version with Claude Sonnet, and the same check scored both. I dropped a tenth task because the site already did what it asked. I built the eval with Claude Code.

## related projects

• - CityScout, from idea to enterprise
• - Theming at enterprise scale