| name | design-md-library |
| description | Curated library of 74 real-world DESIGN.md files (Apple, Stripe, Linear, Vercel, Notion, Airbnb, etc.). Use when the user wants a design system, says 'make it look like [brand]', or asks for design tokens/colors/typography for a named brand. |
| version | 1.0.0 |
| author | Hermes Agent (adapted from VoltAgent/awesome-design-md, MIT) |
| license | MIT |
| platforms | ["linux","macos","windows"] |
| metadata | {"hermes":{"tags":["design","UI","design-system","tokens","typography","colors","branding"],"related_skills":["hallmark","popular-web-designs","design-md"]}} |
design-md-library
Index into the awesome-design-md collection (VoltAgent/awesome-design-md, MIT).
74 DESIGN.md files extracted from real websites, each following the Google Stitch
DESIGN.md spec (9 sections: visual theme, color palette, typography, components,
layout, depth, do/don'ts, responsive, agent prompt guide).
Where the files live
The fork mirror is at:
~/dev/forks/JZKK720/awesome-design-md/design-md/<site>/DESIGN.md
Each <site>/ dir also has a README.md with a one-line description. Read the
DESIGN.md for the full design system; the README is just a label.
How to use
- Identify the brand/site the user wants to emulate (e.g. "make it look like Stripe",
"use the Linear design system", "build a page in the Vercel style").
- Check if that site is in the index below. If yes,
read_file the DESIGN.md at the
path shown and apply it verbatim — it already contains the agent prompt guide.
- If the user names a brand NOT in the index, tell them it's not in the library and
either (a) fall back to the closest match by category, or (b) ask if they want a
generic design system instead. Do not fabricate a DESIGN.md.
- Do NOT copy the DESIGN.md into the project unless the user asks. Just read it and
follow its rules when generating UI.
Categories (for fallback matching)
- AI & LLM Platforms: claude, cohere, elevenlabs, minimax, mistral.ai, ollama, opencode.ai, replicate, runway, together.ai, voltagent, x.ai
- Developer Tools & IDEs: cursor, expo, lovable, raycast, superhuman, vercel, warp
- Backend, Database & DevOps: clickhouse, composio, hashicorp, mongodb, posthog, sanity, sentry, supabase
- Productivity & SaaS: cal, intercom, linear, mintlify, notion, resend, zapier
- Design & Creative Tools: airtable, clay, figma, framer, miro, webflow
- Fintech & Crypto: binance, coinbase, kraken, mastercard, revolut, stripe, wise
- E-commerce & Retail: airbnb, meta, nike, shopify, starbucks
- Media & Consumer Tech: apple, hp, ibm, nvidia, pinterest, playstation, spacex, spotify, theverge, uber, vodafone, wired
- Automotive: bmw, bmw-m, bugatti, ferrari, lamborghini, renault, tesla
- Retro Web: dell-1996, nintendo-2001
Full index (site → path)
For any <site> below, the DESIGN.md is at
~/dev/forks/JZKK720/awesome-design-md/design-md/<site>/DESIGN.md.
ai-&-llm-platforms: claude, cohere, elevenlabs, minimax, mistral.ai, ollama, opencode.ai, replicate, runway, together.ai, voltagent, x.ai
developer-tools: cursor, expo, lovable, raycast, superhuman, vercel, warp
backend-devops: clickhouse, composio, hashicorp, mongodb, posthog, sanity, sentry, supabase
productivity-saas: cal, intercom, linear, mintlify, notion, resend, zapier
design-creative: airtable, clay, figma, framer, miro, webflow
fintech-crypto: binance, coinbase, kraken, mastercard, revolut, stripe, wise
ecommerce-retail: airbnb, meta, nike, shopify, starbucks
media-consumer: apple, hp, ibm, nvidia, pinterest, playstation, spacex, spotify, theverge, uber, vodafone, wired
automotive: bmw, bmw-m, bugatti, ferrari, lamborghini, renault, tesla
retro-web: dell-1996, nintendo-2001
Hermes Integration
- Use
read_file to read DESIGN.md files from the fork mirror
- Use
search_files to find design tokens in existing project code
- Combine with
hallmark skill for full design workflow
- Combine with
popular-web-designs skill for additional design references
- Use
browser_navigate + browser_snapshot to study live sites when DESIGN.md is unavailable
