Give Claude a design system and the output stays on-brand and consistent. Tokens, components, 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 small file describing your tokens (colors, typography, spacing, components), and 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 four files in a brand/ folder. Each one is plain text. All four together change what same Claude produces.
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 four 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 tokens, ask Claude to use it, then swap one token and watch every page change.
mkdir brand. Add tokens.md with: --bg #ffffff, --ink #02081C, --accent #287BE8, --font-display "Inter Tight", --font-body "Inter".
In Claude Code: "Read brand/tokens.md. 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 tokens.md 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.