design-md-hub

Real brand design systems, captured as plain text your AI agents can read.

120 brands, each reverse engineered from its live production site: the real colors, fonts, components and guardrails, captured in a single DESIGN.md (plus a self contained preview.html you can open to feel the identity). Fully open source. No paywalls, no signups, no API keys. Point your coding agent at one and ship on brand UI.

→ Browse the live gallery

Drop a DESIGN.md into your project and let coding agents generate a matching interface.

What is a DESIGN.md?

A DESIGN.md is a single markdown file that describes a brand's visual language:

• Color palettes & semantic tokens
• Typography scale & font choices
• Component patterns & variants
• Spacing, shadows, border radius
• Layout principles & responsive behavior
• Tone, guardrails & dos/don'ts

AI coding agents read this file to generate UI that matches the real thing.

Every spec is built from the brand's live production site: real fonts, exact hex values, real logos and copy. If a value cannot be confirmed from the live source, it is left out rather than guessed.

How it works

flowchart LR
    A[Live brand site] -->|fetch HTML + CSS + fonts| B[Extract real tokens]
    B --> C[DESIGN.md<br/>plain text spec]
    B --> D[preview.html<br/>self contained demo]
    C -->|copy into your repo| E[Your coding agent]
    E --> F[On brand UI]
    D -->|open in a browser| G[Feel the identity]

1. Every brand is fetched from its live production site so tokens are ground truth, never guessed.
2. The real colors, fonts, components and guardrails become a plain text DESIGN.md.
3. A matching preview.html ships alongside it, so you can open the identity in a browser with no build step.
4. Your coding agent reads the DESIGN.md and generates UI in that brand's voice.

Browse the Collection

#	Brand	Category	Preview
1	Clerk	Auth	preview
2	Cursor	Developer Tools	preview
3	Figma	Design Tools	preview
4	GitHub	Developer Tools	preview
5	Linear	Developer Tools	preview
6	Neon	Developer Tools	preview
7	Notion

Want a brand added? See CONTRIBUTING.md.

How to Use

1. Pick a DESIGN.md from the collection above
2. Copy it into the root of your project
3. Tell your coding agent: "Follow the DESIGN.md in the root of this project"
4. Generate UI components, pages, or entire apps with consistent styling

Contributing

Contributions are welcome. See CONTRIBUTING.md for guidelines on adding a new brand.

Disclaimer

These are unofficial references built for education and prototyping, reverse engineered from public brand sites, not endorsed by or affiliated with any brand. All trademarks and logos belong to their respective owners.

License

MIT, see LICENSE

---

Built by Dhananjay Aggarwal · LinkedIn · Portfolio