Your agent can build the feature. It can't guess your taste. A Taste Index is a brand guide written for an AI: a Markdown file of rules, a CSS file of tokens, a JavaScript file for motion, and one HTML page that shows it all working. Write it once and every new feature looks like it belongs.
In a hurry? Copy The Prompt, point it at a site you like, and save the four files it hands back. Want to know why it's four files? Start with What It Is.
A Taste Index is a folder you hand your coding agent before it builds anything people will see. It names your fonts, colors, spacing, components and motion, gives every value a token, and shows each one rendered on a page. It's a brand guide, but the reader takes everything literally and never asks what you meant. So it spells out the why as well as the what.
Ask an agent for a pricing page with no guide and you get the average of the internet:
Ask again next week and you get a different average. Ten features in, your product looks like ten products.
Words tell the agent what you want. Code means it doesn't have to guess. A Taste Index has both. The snippets below are from my Retro OS index, the style this page is built in.
A one-line brief, five to seven principles, then color, type, components and motion, ending in a Do and Don't list. The principles matter most. They're how the agent handles a case you never wrote down.
**The one-line brief:** An early-80s windowed OS laid over Swiss editorial type, printed on flat pink paper.
Colors, fonts, sizes, borders and shadows as CSS variables, plus classes for the components you reuse. The agent links the file instead of making up hex codes.
--pink: #F386A1; /* primary world */ --ink: #1E1E1E; /* never pure black */ --win: #DEDEDE; /* window body */
Loaders, hover states, the one animation that's always running. Motion is the hardest thing to describe in words, so don't. Write it once and let the agent reuse it.
data-ros="life" // Game of Life, 8–10 gen/sec data-ros="clock" // ticks every 1s, no tween data-ros="boot" // loader fills in jumps
Every swatch, type size and component, rendered with the real CSS and JS. You check the agent's work against it, and the agent looks at it when the words aren't enough.
<link rel="stylesheet" href="brand.css">
<script src="brand.js"></script>
<!-- swatches, type, windows, cards -->
I keep two. One for these resource pages and my reels, one for the main site. They have nothing in common visually, and that's the point: the format holds any taste you put in it.
DESIGN.md · retro-os.css · retro-os.js · index.html
STYLE-GUIDE.md · tokens.css · MOTION.md · PATTERNS.md
The main site's version swaps the JavaScript file for MOTION.md and PATTERNS.md, because its motion lives in React components and its patterns are copy-paste markup. Keep the four jobs. Name the files whatever fits your stack.
Paste this into Claude Code, Codex or Cursor. Swap in the URL. If you already have a Taste Index, attach it as the example. If you don't, delete that line.
Build me a Taste Index for [URL]: a brand guide an AI agent can follow, so every new feature I build looks like it came from the same designer. Go look at the site. Open a few different pages, not just the home page, and read the actual computed styles. Work out: - Fonts: families, weights, the type scale, tracking and line-height - Color: every background, text and accent value as hex, and where each is used - Shape: borders, radius, shadows, spacing and the layout grid - Components: buttons, links, cards, nav, anything that repeats - Motion: what moves, how long it takes, and the easing - Voice: how headlines, labels and buttons are written Then build four files: 1. DESIGN.md: a one-line brief, 5–7 principles, then color, type, components, motion and a Do / Don't list. Explain why, not just what, so I can handle cases you didn't cover. 2. brand.css: every value above as a CSS variable, plus classes for the core components. 3. brand.js: the motion and interactive behavior, no dependencies. 4. index.html: one page that uses the CSS and JS to show every swatch, type size and component, live. I've attached my Taste Index as an example. Match its structure and depth, not its look. Mark what you measured and what you made up. If a font is commercial, name the closest free substitute. Don't invent rules the site doesn't follow. When you're done, open index.html, tell me what you weren't sure about, and give me one line to add to CLAUDE.md so future agents read this before building anything.
Swap [URL] for the site. Keep or delete the example line. Leave the rest alone.
The agent should read the real computed styles, not guess from a screenshot. In Claude Code, turn on the Chrome extension or add a Playwright MCP server first.
Open index.html next to the site. Anything that looks off goes into DESIGN.md as a Don't.
One line is enough: "Before you build anything visual, read brand/DESIGN.md and use brand.css." If the agent doesn't know the folder exists, it won't open it.
When you reject a rounded corner or a gradient, write it down. Most of your taste lives in the Don't list, and it grows one rejection at a time.
Ten exact rules break on the eleventh case. Five good principles cover it. "Color is a place" tells the agent more than a table of section backgrounds does.
Studying a site you admire is fine. Copying its logo, its copy or fonts you haven't licensed isn't. My Retro OS index is modeled on typesafe.ai and says so on line one.