design-md-libraryLibrary of 74 ready-to-use DESIGN.md files — complete design systems (color tokens, type scale, components, layout, motion, do's/don'ts) reverse-engineered from real product and brand websites like Stripe, Linear, Vercel, Notion, Apple, Tesla, WIRED, and Nintendo-2001. Use when a UI task names a reference brand or an aesthetic ("make it look like Linear", "…
Independent GitHub snapshot · Automated classification · Original documentation governs
74 complete, ready-to-use DESIGN.md design systems extracted from real websites.
Each one is a single self-contained markdown file: YAML token block (colors,
typography, spacing, radii, shadows) followed by prose sections an agent can follow
directly when generating UI.
Vendored from VoltAgent/awesome-design-md
@ 8147538 (2026-07-31), MIT. Local copies live in designs/<site>/DESIGN.md.
DESIGN.md isA convention from Google Stitch:
plain-markdown design system doc that lives at a project root, the visual counterpart
to AGENTS.md.
| File | Defines |
|---|---|
AGENTS.md | how to build the project |
DESIGN.md | how the project should look and feel |
Use it when the desired look can be named — a brand ("like Vercel"), a category ("crypto trading dashboard", "luxury automotive", "Y2K retro"), or an adjective set that maps onto one of the catalog entries. A vendored file gives you a coherent, already-calibrated token set instead of a palette invented on the spot.
Do not use it for:
DESIGN.md for a project with its own identity → stitch-design-taste
(generator; this skill is the reference library).design-taste-frontend,
high-end-visual-design, or web-design-guidelines.theme-factory.redesign-existing-projects.These compose: pick a file here for the token vocabulary, then follow
frontend-ui-engineering / ui-css-primitives for the implementation.
cp designs/<site>/DESIGN.md ./DESIGN.md, then tell the
agent (or Stitch) to build against it. It stays in the repo as the source of truth.## Components
entry into context; don't paste the whole file into code comments.---
version / name / description # one-paragraph statement of the design language
colors: semantic-name: "#hex" # primary, ink, canvas, hairline, accents…
typography: role: {fontFamily, fontSize, fontWeight, lineHeight, letterSpacing}
spacing / radii / shadows / motion
---
## Overview mood, density, philosophy
## Colors each hex + its functional role
## Typography full hierarchy table
## Layout grid, spacing scale, whitespace philosophy
## Elevation & Depth shadow system, surface hierarchy
## Shapes radii, borders, geometry
## Components buttons, cards, inputs, nav — with states
## Do's and Don'ts guardrails and anti-patterns
## Responsive Behavior breakpoints, touch targets, collapse strategy
## Iteration Guide quick color reference, ready-to-use prompts
The ## Do's and Don'ts section is the highest-value part and the one most often
skipped — it is what keeps generated UI from drifting into generic-AI look.
Legitimate, but keep it disciplined: take the color system from one file and the typography + spacing from the other, never half of each. Mixing accent colors across two systems is what produces incoherent output.
Stripi, Slacc) and states it captures
publicly visible CSS values without claiming ownership of any visual identity.fontFamily ships a
fallback stack — use the fallback, or substitute a licensed near-match, unless the
project actually owns the font.Path is designs/<slug>/DESIGN.md.
claude — Warm terracotta accent, clean editorial layoutcohere — Vibrant gradients, data-rich dashboard aestheticelevenlabs — Dark cinematic UI, audio-waveform aestheticsminimax — Bold dark interface with neon accentsmistral.ai — French-engineered minimalism, purple-tonedollama — Terminal-first, monochrome simplicityopencode.ai — Developer-centric dark themereplicate — Clean white canvas, code-forwardrunwayml — Editorial film-festival: cinematic dark heroes, paper-white reading bands, pure black pill CTAstogether.ai — Technical, blueprint-style designvoltagent — Void-black canvas, emerald accent, terminal-nativex.ai — Stark monochrome, futuristic minimalismcursor — Sleek dark interface, gradient accentsexpo — Dark theme, tight letter-spacing, code-centriclovable — Playful gradients, friendly dev aestheticraycast — Sleek dark chrome, vibrant gradient accentssuperhuman — Premium dark UI, keyboard-first, purple glowvercel — Black and white precision, Geist fontwarp — Dark IDE-like interface, block-based command UIclickhouse — Yellow-accented, technical documentation stylecomposio — Modern dark with colorful integration iconshashicorp — Enterprise-clean, black and whitemongodb — Green leaf branding, developer documentation focusposthog — Playful branding, developer-friendly dark UIsanity — Dark-first editorial: 112px display type, IBM Plex Mono eyebrows, single coral-red CTA accentsentry — Dark dashboard, data-dense, pink-purple accentsupabase — Dark emerald theme, code-firstcal — Clean neutral UI, developer-oriented simplicityintercom — Friendly blue palette, conversational UI patternslinear.app — Ultra-minimal, precise, purple accentmintlify — Clean, green-accented, reading-optimizednotion — Warm minimalism, serif headings, soft surfacesresend — Minimal dark theme, monospace accentsslack — Deep aubergine primary, cream-lavender hero gradients, pastel-mesh product mockupszapier — Warm orange, friendly illustration-drivenairtable — Colorful, friendly, structured data aestheticclay — Organic shapes, soft gradients, art-directed layoutfigma — Vibrant multi-color, playful yet professionalframer — Bold black and blue, motion-first, design-forwardmiro — Bright yellow accent, infinite canvas aestheticwebflow — Blue-accented, polished marketing site aestheticbinance — Bold yellow on monochrome, trading-floor urgencycoinbase — Clean blue identity, trust-focused, institutionalkraken — Purple-accented dark UI, data-dense dashboardsmastercard — Warm cream canvas, orbital pill shapes, editorial warmthrevolut — Sleek dark interface, gradient cards, fintech precisionstripe — Indigo primary, atmospheric gradient mesh, weight-300 elegancewise — Bright green accent, friendly and clearairbnb — Warm coral accent, photography-driven, rounded UImeta — Photography-first, binary light/dark surfaces, blue CTAsnike — Monochrome UI, massive uppercase Futura, full-bleed photographyshopify — Dark-first cinematic, neon green accent, ultra-light display typestarbucks — Four-tier earth-green system, warm cream canvasapple — Premium white space, SF Pro, cinematic imageryhp — Pure white canvas, electric-blue signal CTA, geometric sans, chevron decorationsibm — Carbon design system, structured blue palettenvidia — Green-black energy, technical power aestheticpinterest — Red accent, masonry grid, image-firstplaystation — Three-surface channel layout, cyan hover-scale interactionspacex — Stark black and white, full-bleed imagery, futuristicspotify — Vibrant green on dark, bold type, album-art-driventheverge — Acid-mint and ultraviolet accents, Manuka display typeuber — Bold black and white, tight type, urban energyvodafone — Monumental uppercase display, red chapter bandswired — Paper-white broadsheet density, custom serif, ink-blue linksbmw — Dark premium surfaces, precise German engineering aestheticbmw-m — Motorsport contrast, M color accents, precision-driven layoutbugatti — Cinema-black canvas, monochrome austerity, monumental display typeferrari — Chiaroscuro black-white editorial, red accent, extreme sparsenesslamborghini — True black cathedral, gold accent, custom Neo-Groteskrenault — Vivid aurora gradients, proprietary typeface, zero-radius buttonstesla — Radical subtraction, cinematic full-viewport photographydell-1996 — Catalog-era enterprise web: black page frame, flat color-block ribbon cards, Helvetica-Black over Times Roman, hand-cut GIF stickersnintendo-2001 — Y2K console chrome: brushed-periwinkle beveled panels, halftone carbon nav, outlined Arial-Black wordmarkscd $(mktemp -d) && git clone --depth 1 https://github.com/VoltAgent/awesome-design-md.git
cd awesome-design-md && git log -1 --format=%h # note the SHA for SKILL.md
for d in design-md/*/; do
s=$(basename "$d")
mkdir -p ~/.agents/skills/design-md-library/designs/"$s"
cp "$d/DESIGN.md" ~/.agents/skills/design-md-library/designs/"$s"/DESIGN.md
done
Then refresh the catalog above from upstream's README.md (its Collection section
occasionally lags the folder list — slack was present as a folder but missing from
the README at 8147538) and update the vendored commit SHA.