Awesome DESIGN.md

Design

Curated collection of ~73 DESIGN.md design-system files from popular brands for AI coding agents to match.

by VoltAgentVoltAgent/awesome-design-md

Stars122.9k

Forks13.6k

Watchers463

Open issues311

LicenseMIT

Last push8 days ago

Install

install

$ Copy a brand's DESIGN.md from design-md/<brand>/ into your project root

Update

update

$ git -C path/to/awesome-design-md pull && cp design-md/<brand>/DESIGN.md ./DESIGN.md

This is a reference repo, not a skill in ~/.claude/skills. Pull your clone of VoltAgent/awesome-design-md (or re-download the brand's DESIGN.md from GitHub), then re-copy it over your project's DESIGN.md.

When to use it

You want generated UI to visually match an established brand (Stripe, Vercel, Linear, Apple) without exporting Figma or building a token schema
You need a ready-made DESIGN.md to drop into a project so any coding agent has instant color/typography/component context
You want a reference template and concrete examples for authoring your own DESIGN.md design system
You are evaluating how popular sites structure design tokens, palettes, and layout rules in plain text

Commands & flags

Browse design-md/<brand>/: Pick a brand (e.g. stripe, vercel, apple, claude) from the ~73 available.
cp design-md/<brand>/DESIGN.md ./DESIGN.md: Copy that brand's DESIGN.md into your project root.
"build me a page that looks like this": Tell your AI coding agent to use the copied DESIGN.md.
DESIGN.md: Plain-text design-system file; agent-agnostic (Claude Code, Cursor, Codex, Gemini CLI, Stitch).

How to use it

This is a repository of reference design-system documents, not an installable skill or plugin. Each brand lives under design-md/<brand>/ with a DESIGN.md.

1. Browse design-md/ and pick a brand (e.g. stripe, vercel, apple, claude).
2. Copy that brand's DESIGN.md into your project root.
3. Tell your AI coding agent to use it ("build me a page that looks like this").

The DESIGN.md format is a plain-text design-system convention (introduced by Google Stitch) describing visual theme, colors, typography, component styling, layout, depth, do's/don'ts, and responsive behavior — no Figma, JSON schema, or tooling required. It is agent-agnostic and works with Claude Code, Cursor, Codex, Gemini CLI, and Google Stitch.

Why it earns its place

Provides ~73 reverse-engineered, copy-paste design systems from well-known brands so an AI agent produces visually consistent, on-brand UI from a single plain-text file instead of vague prompts. Because DESIGN.md is just markdown, it drops into any project and any coding agent, and the per-brand examples make it a strong reference for writing your own design spec. MIT-licensed and widely used.

Try it

claude

> Build me a landing page that matches design-md/stripe/DESIGN.md — use those colors, typography, and component styling.