Overview

---

Categorisation (what's what?)

• AGENTS.md → rules / instructions for building (code standards, tooling, workflows)
• DESIGN.md → rules / instructions for look & behaviour (UI style, components, layout)

The repo: awesome-design-md

GitHub: github.com/VoltAgent/awesome-design-md Website: getdesign.md

A curated collection of 66 pre-made DESIGN.md files, extracted from real websites of well-known brands. Use immediately — no need to write your own design system.

Available design systems (66)

Category	Brands
AI & LLM Platforms	Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI
Developer Tools & IDEs	Cursor, Expo, Lovable, Raycast, Superhuman, Vercel, Warp
Backend, Database & DevOps	ClickHouse, Composio, HashiCorp, MongoDB, PostHog, Sanity, Sentry, Supabase
Productivity & SaaS	Cal.com, Intercom, Linear, Mintlify, Notion, Resend, Zapier
Design & Creative Tools	Airtable, Clay, Figma, Framer, Miro, Webflow
Fintech & Crypto	Binance, Coinbase, Kraken, Revolut, Stripe, Wise
E-commerce & Retail	Airbnb, Meta, Nike, Shopify
Media & Consumer Tech	Apple, IBM, NVIDIA, Pinterest, PlayStation, SpaceX, Spotify, The Verge, Uber, WIRED
Automotive	BMW, Bugatti, Ferrari, Lamborghini, Renault, Tesla

Installation

Option 1: CLI (recommended)

Install a specific DESIGN.md with the official CLI tool:

npx getdesign@latest add apple

That drops the Apple-inspired DESIGN.md directly into your project root.

More examples:

npx getdesign@latest add stripe
npx getdesign@latest add tesla
npx getdesign@latest add vercel
npx getdesign@latest add spotify

Option 2: manually from the GitHub repo

1. Go to github.com/VoltAgent/awesome-design-md
2. Navigate into the design-md/ folder
3. Pick the brand you want (e.g. apple/)
4. Copy the DESIGN.md content into your project root

Option 3: website

1. Go to getdesign.md
2. Browse the 66 available designs
3. Click the one you want
4. Copy the DESIGN.md or use the CLI command

Structure of a DESIGN.md

Each DESIGN.md follows a standardised format with 9 sections:

Section	What it defines
1. Visual Theme & Atmosphere	Overall aesthetic, mood, visual language
2. Color Palette & Roles	Colours with hex codes and semantic roles
3. Typography Rules	Fonts, sizes, weights, hierarchy
4. Component Stylings	Buttons, cards, inputs, navigation, etc.
5. Layout Principles	Grid, spacing, alignment, container
6. Depth & Elevation	Shadows, z-index, layering
7. Design Do's and Don'ts	Clear rules on what's allowed and what's not
8. Responsive Behavior	Breakpoints, mobile/tablet/desktop adjustments
9. Agent Prompt Guide	Quick colour reference + ready-made prompts for LLMs

Using it with AI agents

With Claude (Claude Code / Cowork)

1. Place DESIGN.md in the project root
2. Start Claude Code or open a Cowork session
3. Example prompt:

Read the DESIGN.md in my project root.
Build me a landing page with hero section, feature grid,
and footer — exactly in Apple style per the DESIGN.md.
Use Next.js + Tailwind CSS.

Claude reads the DESIGN.md automatically as context and generates UI that matches the defined design system.

With ChatGPT / GPT-4

1. Copy the DESIGN.md content
2. Paste it as the system prompt or at the start of the conversation
3. Example prompt:

Here's my design system (DESIGN.md):
[paste DESIGN.md content]

Create a pricing page in the style of this design system.
HTML + Tailwind CSS. Responsive. Dark mode.

With Cursor / Windsurf / other AI IDEs

1. Drop DESIGN.md into the project root
2. The IDE detects the file as context automatically
3. While coding, the AI agent references the design system
4. Example prompt in Cursor:

@DESIGN.md Build a dashboard header with navigation
and user avatar. Use the defined colours and typography.

With Google Stitch

DESIGN.md was originally introduced by Google Stitch. Stitch reads the file natively and generates UI components that match the design system exactly.

With Lovable / Bolt / v0

Paste the DESIGN.md content into the prompt as context. These tools understand markdown-based design specifications and generate matching UI.

Why DESIGN.md instead of Figma?

Aspect	Figma	DESIGN.md
LLM compatibility	Needs plugins/export	Natively readable
Versioning	Proprietary	Git-tracked
Collaboration	Figma account required	Any text editor
AI-agent ready	Indirect (via API)	Direct in context
Cost	Figma licence	Free (MIT)
Format	Binary / proprietary	Plain Markdown

Practical example: rebuild an Apple-style site

Step 1: install the design

mkdir my-project && cd my-project
npx getdesign@latest add apple

Step 2: scaffold the project (e.g. Next.js)

npx create-next-app@latest . --typescript --tailwind

Step 3: use an AI agent

Read the DESIGN.md. Build me a product page in Apple style:
- Hero with a large product image and headline
- Scroll-based feature sections
- Specs comparison table
- Call-to-action footer
Use the exact colours, typography, and component styles
from the DESIGN.md. Next.js App Router + Tailwind CSS.

Step 4: iterate

The AI agent sticks to the design system. Every additional component you build is automatically consistent — because the DESIGN.md is the single source of truth.

Tips for practice

1. One DESIGN.md per project — don't mix. Pick a design system and stick with it.
2. Combine with AGENTS.md — AGENTS.md for code conventions, DESIGN.md for visual design. Together = full context for the AI agent.
3. Adapt as needed — DESIGN.md is a starting point. Customise colours, fonts, and spacing for your brand.
4. Use the previews — many entries ship preview.html and preview-dark.html showing palette, typography, and components visually.
5. Read the Agent Prompt Guide — section 9 of every DESIGN.md contains ready-made prompts and a Quick Color Reference you can copy-paste directly.

Links

• GitHub repo: github.com/VoltAgent/awesome-design-md
• Website: getdesign.md
• Licence: MIT (free, commercial use allowed)