Claude Design, With a Brand Bible: Redesigning the curate-me.ai Marketing Page

Three nights ago I wrote about redesigning this blog with Claude Design. Tonight the pattern ran again — different URL, different stakes. The target was the curate-me.ai marketing page: the thing potential customers read before they decide whether to try the platform.

The workflow was identical. One design file. One prompt. One evening. The URL changed from its-boris.com to curate-me.ai. The lessons sharpened.

What changed between the two runs was not the tool. It was the input. The first time, design tokens emerged from Claude Design itself — it generated a palette and type scale, and they lived inside the HTML handoff. The second time, the tokens were pre-specified in a brand bible committed to the monorepo: apps/marketing/DESIGN.md. That file went into Claude Design before any prompt was written, as the design system. One upstream difference. Almost everything downstream shifted.

There is a version of this where I call that a minor workflow variation. Having done both, I do not. Uploading a brief before generating a design changes the nature of what you are iterating on. In round one I was discovering the design. In round two I was executing against one I had already decided.

Round one versus round two: what changed

The first run was a creative collaboration. The second was more like a code review — the design constraints were already written down, the tool executed against them, and the interesting friction surfaced in places the brief had not anticipated.

The anti-slop list does more work than the design

The apps/marketing/DESIGN.md brand bible opens with a ban list. Banned fonts: Inter, Roboto, Open Sans, Lato, Arial, Space Grotesk. Banned patterns: purple gradients on white, centered hero plus three icon cards, timid palettes, 1.5× size jumps, blinking dots.

That list sounds like aesthetics. It is not aesthetics. It is positioning. Every item on it is the default choice made by an AI tool rendering a "professional SaaS landing page" from a vague brief. The ban list is a filter that eliminates 2024's median output before the first prompt runs.

The fonts that shipped were Fraunces for display — 700, italic pivot on key verbs — IBM Plex Sans for body, and JetBrains Mono for eyebrows and latency pills. The palette: cream #FAF7F2 base, warm near-black #1A1815 ink, teal #0D9488 for CTAs, amber #C47D2E for active states, warm #E8E2D8 for rules. The H1 that shipped: "One URL change. Full agent governance." Fraunces 700, italic pivot on Full.

None of those choices required me to explain myself in the prompt. The brief already said no to everything they were competing against.

The voice rule in DESIGN.md was two words: magazine-calm, not breathless. That single phrase did more work than a three-paragraph tone guide would have. Every sentence that came out of the prompt loop either passed that test or failed it visibly.

Eighteen preview cards, all generated from the same brand bible.

The published Curate-Me Design System project is at claude.ai/design/p/70ccdd3e-1b41-49b0-a057-742ef039231e. The handoff file is ui_kits/marketing/index.html, accessible via the Claude Design API at https://api.anthropic.com/v1/design/h/G53PNfskHUmvx2sDQq_QEA?open_file=ui_kits%2Fmarketing%2Findex.html.

The hero as it shipped — Fraunces 700, italic pivot on "Full".

No mock data, round two: five new public endpoints

The same forcing function from the blog redesign applied here: no mock data. A marketing page with live platform stats is a different object than a marketing page with placeholder numbers. The design had slots for real throughput figures, active agents, model catalog coverage, and a sample request trace.

Wiring those slots forced five new routes under /gateway/public/*:

Each endpoint is aggregate-only. No org_id, no user_id, no prompts, no completions. The sample-request trace is a real gate sequence — PII scan, cost cap, rate limit, audit write, provider route, response — with org identifiers stripped before the response leaves the gateway. The 6-gate structure is the product. Showing it live is the demo.

The forcing function scales with the audience. Blog readers tolerate a broken data strip. Potential customers do not. The "no mock data" rule is the same rule; the compliance pressure is higher.

The section that got cut

The original landscape section was a competitor table. Portkey, Helicone, Langfuse, LiteLLM — rows measuring latency overhead, observability features, pricing model. It was a reasonable table. It was the wrong table.

Halfway through the session it became clear why. Those products sit between an app and a model provider. Curate-Me sits above agent harnesses — coordinating runners, governance, fleet management — not between the app and the LLM. Comparing against Portkey is like a fleet management system comparing against a fuel card processor. The category is adjacent; the function is not.

So the table came out of the design. The full section with it. No replacement competitor grid, no "here's where we differ" matrix, no rebuttal. The positioning that survived moved into a pillar section — "Open where it matters. A harness that learns from itself." — which makes a different argument entirely: every successful run graduates into a reusable skill; the governance chain is closed; everything else is open. The reader never sees a list of competitors. The reader sees what the product is for.

That is not a design change. That is a pitch change. The design iteration surfaced it because filling in real content revealed that the category framing was wrong. A marketing redesign that does not touch your positioning is a paint job. This one changed the argument and cut a whole section in the process.

The /v2 scaffold pattern

The existing marketing page lives at /. Rewriting / mid-iteration means every live visitor sees the work in progress. The safer pattern: build /v2 beside it.

The scaffold Claude Code generated was ten section stubs, a NavV2 component, a FooterV2 component, and a v2.css file with all custom properties scoped under .v2. The existing EditorialNav and EditorialFooter components are pathname-aware — they return null on any route matching /v2/*. No layout collisions. No shared global state.

The /v2 dev server, running beside the legacy page.

The practical effect: the /v2 page can ship to production and run behind a flag or a direct link while the existing page serves all traffic. AB testing is not a feature request — it is a consequence of the scaffold pattern. Redesigns are less risky when you can run both versions in production and measure the difference before cutting over.

The wall

Around midnight, Claude Design hit its usage limit. The Teams Adaptive Cards prototype — a notification design for the governance dashboard — was deferred to Saturday at 8:00 AM when the limit resets. There is a ceiling, and hitting it is a signal to stop generating and start reviewing. The eighteen preview cards were already more than I could evaluate in one sitting. The limit arrived at the right time.

What carries forward

Design system before first prompt. That is the rule. Not after, not alongside — before. The brand bible constrains the output before the output exists, which means the iteration loop runs against a moving target you have already defined rather than a moving target you are discovering mid-session.

No mock data stays a hard rule. On a marketing page the pressure is higher, not lower.

The iteration loop can change your product positioning. Let it. If filling in real content reveals that your category framing is wrong, the redesign did its job. The right response is to update the framing, not to preserve the original table because it was already designed.

The /v2 scaffold pattern is the one I will reach for on every future redesign. Legacy routes stay live. New work runs in parallel. Cutting over is a decision, not a deadline.

The session cost was 52 cents.