Give Claude a design system and the output stays on-brand and consistent. One page of tokens and components, a voice page, and examples: what to feed in so what comes out matches.
Bad design is the most visible failure mode of an AI-built site. Generic colors, default fonts, weak hierarchy, average-of-the-average output. Look at any one-shot prompt-to-website tool: the sites all look the same because the AI defaults to the same averages.
A design system fixes this in a single move. You hand Claude a brand/ folder: one page of tokens and components (colors, typography, spacing, buttons, cards), how you write, and a few finished pages. The output stays on-brand from then on. Same model. Same Claude. Different output because the folder told it what good looks like.
Most people imagine a design system as a 200-page Figma library. For an Infinite Leverage project, it is three things in a brand/ folder, all HTML, so the tokens and components render and you can see them. Together they change what the same Claude produces.
You do not start from a blank page. getdesign.md publishes a DESIGN.md for most well-known sites: the palette, type scale, spacing and component rules, written for a coding agent to read. Pull the one closest to the look you want, turn it into design.html, and change what is yours. Thirty minutes instead of a week.
Bad design is the most visible failure mode of an AI-built site. Generic colors. Default fonts. Average-of-the-average layouts. Look at any one-shot prompt-to-website tool: the sites all look the same because the AI defaults to the same averages.
A design system fixes this in a single move. You hand Claude the brand/ folder, and the output stays on-brand from then on. Same model. Same Claude. Different output, because the folder told it what good looks like.
The cost: 30 minutes once to write the three files. The return: every page from then on.
At the retreat we ship three or four design systems you can drop in: a bold one, a minimalist one, a corporate one. Each is a brand/ folder. Drop it in, the whole site re-skins.
This is the moment most participants stop missing Figma. You discover that the system is the source of truth and the visuals are a function of it.
Claude Design is the visual UI builder. It is slow, eats tokens, and pulls participants back toward the CMS instinct (drag-drop, point-click). Code-first plus a real design system beats it on every dimension that matters.
Once you have shipped one site with the file-based system, you will not go back.
Use your Hello World site from Protocol 02. You will set up a brand/ folder with a design.html, ask Claude to use it, then swap one token and watch every page change.
mkdir brand. Add design.html with the tokens as CSS variables on :root (--bg #ffffff, --ink #02081C, --accent #287BE8, --font-display "Inter Tight", --font-body "Inter") and one button and one card rendered with them. Or pull a DESIGN.md from getdesign.md and ask Claude to turn it into design.html.
In Claude Code: "Read brand/design.html. Apply these tokens across the site. Use --accent for buttons and links. Use --font-display for headings, --font-body for body copy."
Claude will refactor. Commit, push, wait for Vercel. Your site now uses the tokens consistently.
Change --accent in design.html from #287BE8 to #DC2626. Tell Claude: "Apply the updated token across the site." Watch every button and link change colour in one diff.
Tell Claude: "Add a Callout component to the design system: a card with a coloured left border, a title in --font-display, body in --font-body. Use --accent for the border." Drop one onto the homepage. Watch it match the system on the first try.
A working design system on your site, one token swap propagating everywhere, and a new component added that matches without manual styling. You have replaced the part of the CMS that everyone said was magic.
You swap one full design system for another and watch your site re-skin in 30 seconds. Then you add a new component that matches the new system on the first try.