I asked an AI editor to build a pricing page "like Stripe's" and got back something purple, rounded, and generous with shadows. Stripe is none of those things.
The model was not wrong exactly. It had a vague memory of a clean fintech site and filled the gaps with the average of everything it had ever seen. Averages are the enemy of brand.
That is the problem this library exists to fix. Not more prompting, just a file the agent can read.
What a documented system actually contains
Every entry in the library follows the same DESIGN.md structure, so once you can read one, you can read all of them.
A typical file opens with a description of the visual character in plain language, then gets specific:
- Colors with token names, not just hex values.
primary,primary-active,hairline,surface-soft. - Typography as a real scale. Family, size, weight, line height, letter spacing, per role.
- Geometry covering radius, border widths, and the spacing steps the system actually uses.
- Component rules for buttons, cards, inputs, and tables, including states and density.
- Signature moves, the two or three things that make the brand recognisable.
That last section is the one people underestimate. Tokens tell an agent what is allowed. Signature moves tell it what the brand actually does, which is a different question.
The range is the point
The catalogue is not just developer tools, and that turned out to matter more than I expected.
Developer and SaaS: Stripe, Linear, Vercel, Supabase, Resend, Warp, Raycast, Replicate, PostHog, Sentry, Shopify, Intercom, Cursor, Figma, Framer, Webflow, Notion, Airtable.
AI labs: Claude, Mistral, Cohere, MiniMax, Ollama, Together, xAI.
Consumer and marketplace: Airbnb, Uber, Pinterest, Spotify, Nike, Starbucks, Meta.
Finance: Coinbase, Kraken, Binance, Revolut, Wise, Mastercard.
Automotive and industrial: BMW, BMW M, Ferrari, Lamborghini, Bugatti, Renault, Tesla, NVIDIA, IBM, HP.
Editorial: The Verge, Wired.
Historical: a 1996 Dell homepage and Nintendo.com circa 2001.
Here is why the spread matters. If every reference in your library is a dark developer tool, every project you build will look like a dark developer tool. Having Airbnb's warm marketplace system and Wired's editorial chaos in the same catalogue gives you somewhere else to start.
The two historical entries are genuinely useful too, and not only as a joke. They document a set of visual conventions that no current site uses, which makes them a clean reference when you actually want something to look period-correct rather than retro-flavoured.
Why a file beats a prompt
A prompt is a suggestion that lives for one conversation. A file is a constraint that lives in the repository.
The practical differences show up fast:
| Prompt | DESIGN.md file | |
|---|---|---|
| Survives a new session | No | Yes |
| Shared with teammates | No | Yes, it is in git |
| Works across tools | Retyped each time | One file, every tool |
| Reviewable in a PR | No | Yes |
| Drifts over a long session | Often | Only if you let it |
The tool support is the part that changed my mind. Claude Code reads CLAUDE.md, Cursor reads .cursor/rules, Codex and Devin read AGENTS.md, Copilot reads .github/copilot-instructions.md, Kiro reads .kiro/steering. Every one of those can point at the same DESIGN.md.
Write the design contract once, and each tool picks it up through its own convention.
How I actually use these
Not by copying a brand verbatim. That is a trademark problem and, more practically, a bad product decision. Your app should not be a Stripe clone.
What works is using them as a starting structure:
- Find the closest fit. Building a data-dense internal tool? Start from Retool or Attio rather than from Airbnb.
- Swap the identity. Replace the brand colors and the font family with yours. Keep the structure, the scale, and the ratios.
- Keep the signature moves you like. Maybe you want Linear's keyboard-first density but not its violet. That is a legitimate edit.
- Delete what you will not enforce. A rule nobody checks is noise in the context window.
Step four is the one I skipped for months. A 40 KB design document costs tokens on every single request, and the sections you never enforce are pure overhead.
The honest limitation
These files describe what a brand's public surface looks like, read from its own site. They are not the internal design system documentation of those companies, and they will drift as brands redesign.
Treat them as well-researched observations rather than official specifications. For the purpose of giving an AI editor concrete taste instead of an average, that is more than enough.
What this means for you
The gap between "make it look professional" and a shipped interface that matches your product is mostly a context gap. You know what you want, the model does not, and no amount of adjectives closes that.
A documented system closes it in one file. Pick the entry closest to what you are building, copy it, change the identity to yours, and point your editor at it.
The next component you generate will already be on brand, and you will not have to say the word "minimal" again.