How our agents build on Brand pages with design

Pippa Okay so Vercel basically had to invent a whole eval harness just to ship a markdown file. And I mean that as a compliment.

Tyler Right, and that's the part that actually got me. The file is almost a footnote compared to the infrastructure they built around it.

Pippa How's your week going, by the way? You seem — I don't know, more alert than usual.

Tyler I've been reading too many eval papers. It's doing something to me. Anyway — design dot md. You want to set it up or should I?

Pippa I'll take it. So the backstory: Vercel already had something called product-design, which is a skill that lives inside each repo and teaches agents how Vercel designs things. Typography, color, composition, the works. It works well IN the repo because the agent is surrounded by real components and shipped pages while it reads the guidance.

Tyler Right.

Pippa But the moment you're outside that environment — building a one-off report, a renewal proposal, something in a tool that can't read those files — you lose all of that context. So their answer was one public file at a single URL that any agent can load regardless of where it's running.

Tyler And the first thing they tried was just… porting the existing skill into a public prompt. Which failed in a pretty instructive way. Every model read the same guidance and generated completely different pages. Because design language is subjective in a way that's really easy to underestimate — 'keep the layout clean' is not a constraint, it's a vibe.

Pippa Oh interesting.

Tyler The words described the visual language fine. The problem was that inside the repo, the agent is reading those words NEXT TO actual components and shipped examples. A public prompt has none of that scaffolding, so every model just reconstructs Vercel's style from scratch using whatever it associates with those phrases.

Pippa And they all associate different things. Which is — honestly, I think that's the underrated insight of this whole piece. The guidance wasn't wrong. The environment that made the guidance legible was just… gone.

Tyler Yeah. So they scrapped the port and built from scratch, and the thing that made it work was the eval loop. Seven scenarios, each one frozen — same prompt, same mock inputs, same viewport — and the file is the only variable. A renewal proposal always runs with the same fake customer data. A benchmark report always runs with the same numbers. So any change in output traces back to whatever they changed in the file.

Pippa Mm-hm.

Tyler They ran full rounds on both Claude Opus four point eight and Codex with G P T five point five. And the thing they were watching for wasn't just 'does it look more like Vercel' — it was whether a change that helped one scenario quietly broke another.

Pippa That second-order check is the part that takes real discipline. It's easy to iterate on one output and feel good about it. Running all seven every time and comparing side by side — that's a different commitment.

Tyler Right, right.

Pippa And then the three-part system itself: design dot md for judgment and guidance, a public stylesheet that packages the design system's primitives as C S S any page can load, and the eval loop to keep the other two honest. The stylesheet part is the move I want to highlight — they took layout decisions AWAY from the model entirely.

Tyler And the model never reads the stylesheet. It loads at render time in the browser, so none of that C S S ever enters the context window. The agent just uses the class names and tokens that design dot md documents, and the actual style definitions stay out of the way. Which means more room in context for the guidance that actually requires judgment.

Pippa There's also this thing they do in the guidance file where they explicitly NAME recurring bad patterns. Not just 'avoid this' — they give the anti-patterns names so the model can recognize them. And apparently that works substantially better than describing what you want without naming what you don't.

Tyler That tracks with how prompt sensitivity works in practice. Negative constraints with explicit labels are easier for a model to pattern-match against than vague positive goals. 'Don't do the squeezed-table thing' is more actionable than 'use full width when appropriate.'

Pippa Right — and they have a concrete example of exactly that. A renewal proposal kept coming back with the commercial terms table squeezed to the same width as the prose, even though the page had room to make it twice as wide. They flagged it in review, went back through previous outputs, and found the same failure everywhere.

Tyler That's the part I find most honest about this writeup. They're not pretending the guidance file alone is sufficient. The deterministic check is doing real work — it's the thing that catches mechanical failures so human review can stay focused on the stuff you actually can't automate, like whether the hierarchy serves the reader.

Pippa Okay but Tyler — can I push on something?

Tyler Yeah, go ahead.

Pippa This system is clearly working for Vercel. But Vercel has a very defined visual identity, a mature design system, and a team willing to run seven-scenario eval rounds and build a local review harness. I think most teams reading this are going to see 'one public markdown file' and miss the nine-tenths of the iceberg underneath it.

Tyler No, that's fair. And I'd actually extend it — the reason this works is that the eval loop gives them a ground truth signal that most teams don't have. They know when the guidance improved because they can compare outputs against fixed scenarios. Without that, you're just editing a prompt and hoping. The file is not the product. The loop is the product.

Pippa The loop is the product. Yeah. That's kind of what we keep landing on, isn't it — this is basically the control layer thesis again, just applied to design output instead of agent execution. The capability is the model. The governance is the eval harness and the stylesheet and the named anti-patterns.

Tyler We really do find our way back to that one.

Pippa Every time. Okay — one thing I genuinely love here: the pages they tested didn't all collapse into one template. The interactive planning page put its controls front and center because that's what someone opens a planning page to DO. The renewal proposal led with the recommendation because its reader is deciding whether to renew. Same Vercel typography and color, totally different structure. The guidance was shaping reader intent, not just visual style.

Tyler Which is actually the harder problem. Getting the colors right is table stakes. Encoding 'what is this reader here to accomplish' into a guidance file and having the model actually act on it — that's the thing I wasn't sure a single markdown file could do. Apparently it can, with enough eval rounds behind it.

Pippa Okay, I'll say it — I'm a little won over. I came into this thinking it was going to be a brand-guidelines post dressed up as an agent story.

Tyler And?

Pippa It's an eval infrastructure post dressed up as a brand-guidelines post. Which is much more interesting. Tyler, I think we've been doing this long enough that that sentence made complete sense to both of us.

Tyler Almost a year of Exploring Next and that's what we've become. Okay — genuinely though, if you're building with agents and you care about consistent output quality, the pattern here is worth stealing even if you never touch a stylesheet. Freeze your scenarios, fix your inputs, make the file the only variable. That's the move.

Pippa Exactly. And the file's public — vercel dot com slash design dot md — so you can just go read what they actually landed on. Alright, that's us. Go look at the harness, not just the markdown.