Design systems decoded for AI agents.
Curated DESIGN.md files auto-extracted from the world's best-designed websites.
Browse on sparkbites.dev • Get started • CLI • How it works • Twitter
A DESIGN.md file encodes a website's complete visual language in plain markdown so AI agents can generate consistent, on-brand UI — no Figma exports, no JSON tokens, no special tooling.
Introduced by Google Stitch, it follows the same convention as AGENTS.md:
| File | Read by | Defines |
|---|---|---|
AGENTS.md |
Coding agents | How to build the project |
DESIGN.md |
Design agents | How the project should look |
"Tell your AI agent to follow the DESIGN.md and watch it nail the visual language on the first try."
The fastest way. One command drops the file in your project root:
npx design-bites add linear.appSee the CLI section below for more commands.
Browse the full catalog on sparkbites.dev/design-bites — each website has a detail page with its design analysis, palette, fonts, and a one-click install command.
Or pull the file directly from GitHub:
curl -o DESIGN.md https://raw.githubusercontent.com/educlopez/design-bites/main/design-mds/linear.app/DESIGN.mdOnce the file is in your project root:
Use DESIGN.md as the design reference for this UI task.
Works with Claude, Cursor, GitHub Copilot, Google Stitch, and any AI tool that reads project files.
Install DESIGN.md files into any project with a single command. Zero dependencies, Node 18+.
# Install a design system
npx design-bites add linear.app
# List all available design systems
npx design-bites list
# Fuzzy search
npx design-bites search stripe
# Show help / version
npx design-bites --help
npx design-bites --version- Fetches the index of available domains from this repo
- Resolves the domain (case-insensitive, strips
www.) - If not found, suggests fuzzy matches
- Downloads the
DESIGN.mdfile - Writes it to
./DESIGN.md(or./{domain}/DESIGN.mdif one already exists)
The CLI sends an anonymous install ping to sparkbites.dev/api/cli/installs so each design system shows how many times it has been installed. No personal data, no tracking cookies — just a count per domain.
Disable with:
DESIGN_BITES_TELEMETRY_DISABLED=1 npx design-bites add linear.app270+ design systems auto-extracted from the world's best-designed websites. Featured picks:
| Website | Category | Preview |
|---|---|---|
| Linear | Developer Tools | DESIGN.md |
| Stripe | Fintech | DESIGN.md |
| Vercel | Developer Tools | DESIGN.md |
| Notion-style portfolios | Personal Site | 100+ entries |
| SaaS & AI products | Productivity / AI | 80+ entries |
| Agencies & studios | Agency | 30+ entries |
- Web UI → sparkbites.dev/design-bites (searchable, with live previews and install stats)
- Raw files → browse the
design-mds/folder - Machine-readable index →
index.json
Missing a site you love? Request a website by opening an issue.
Every DESIGN.md follows a 9-section standard format:
1. Visual Theme & Atmosphere — the design philosophy and mood
2. Color Palette & Roles — every color with its semantic purpose
3. Typography Rules — font stacks, scale, OpenType features
4. Component Stylings — buttons, cards, inputs + hover/focus states
5. Layout Principles — spacing, grid, whitespace philosophy
6. Depth & Elevation — shadow system and surface hierarchy
7. Do's and Don'ts — design guardrails and anti-patterns
8. Responsive Behavior — breakpoints and collapsing strategy
9. Agent Prompt Guide — ready-to-paste prompts for AI agents
## 3. Typography Rules
Inter Variable is the sole typeface, deployed at weight 510 — a value between
regular (400) and medium (500), made possible only by variable font technology.
This is the signature choice: emphasis that registers subconsciously without
ever shouting. OpenType features cv01 and ss03 are active globally, replacing
Inter's default character forms with alternate glyphs that sharpen the geometric
precision of the letterforms.
| Element | Size | Weight | Line Height | Letter Spacing | Features |
|---------|-------|--------|-------------|----------------|---------------|
| h1 | 64px | 510 | 64px (1.0) | -1.408px | "cv01","ss03" |
| h2 | 40px | 510 | 44px (1.1) | -0.88px | "cv01","ss03" |
| body | 16px | 400 | 24px (1.5) | normal | "cv01","ss03" |Unlike hand-curated alternatives, design-bites are auto-extracted from live websites using a two-step pipeline:
A headless browser navigates each website and extracts:
- Computed styles for 14+ element types (h1-h6, body, p, a, button, input, code...)
- CSS custom properties (design tokens)
- Color palette with deduplication and noise filtering
- Font families, weights, OpenType features (
font-feature-settings) - Box shadows, border radii, spacing scale
- Media query breakpoints
- Surface/background hierarchy sorted by luminance
- Interactive states — hover and focus captured via real mouse/keyboard simulation
- Runtime tech stack detection (Next.js, Nuxt, Astro, Svelte, Tailwind, GSAP...)
The raw CSS data is interpreted to produce the narrative layer:
- Design philosophy and visual mood
- Semantic color roles (why this blue, not just which blue)
- Typographic principles (why weight 510, not just that it's 510)
- Component patterns and interaction design rationale
- Actionable do's and don'ts
- Ready-to-use prompts for AI agents
Every value comes from the actual CSS. The narrative explains why — that's what separates a useful DESIGN.md from a raw data dump.
design-bites is powered by Sparkbites — a curated directory of inspiring websites for designers and developers. We analyze each site's typography, color palettes, tech stacks, and design patterns.
design-bites extends that analysis into a format AI agents can consume directly.
Want to add a website? Open an issue with the URL and we'll generate it.
Found an error in a DESIGN.md? PRs are welcome.
MIT