DESIGN.md is a plain-text design system file that AI coding agents read to generate consistent UI based on a project's visual rules — colors, typography, spacing, components, and product taste.

How does DesignMD Directory work?

Browse a DESIGN.md reference, copy it into your project root, and let your AI coding agent read the design rules before generating UI.

How do I add a DESIGN.md to Cursor?

Copy any DESIGN.md file from the catalog into the root of your project. Cursor automatically reads files in the project root. You can also add it to .cursor/rules or reference it in your system prompt: "Read DESIGN.md before generating or editing any UI components."

Does Claude Code read DESIGN.md automatically?

Claude Code reads files you include in your context. Place DESIGN.md in your project root and add it to CLAUDE.md with a line like "Read DESIGN.md before generating UI." Claude Code will then follow the design rules for every component it generates.

Can Codex use DESIGN.md for Tailwind and shadcn/ui?

Yes. DESIGN.md works with any stack. For Tailwind + shadcn/ui projects, include your token values, component variant rules, and spacing scale in DESIGN.md. Codex and other AI agents will apply these rules when generating components.

What is the difference between DESIGN.md and CLAUDE.md?

CLAUDE.md is a general-purpose context file for Claude Code covering project setup, commands, and coding conventions. DESIGN.md is specifically focused on visual design — colors, typography, spacing, and UI component rules. They complement each other: CLAUDE.md handles workflow context, DESIGN.md handles design context.

What is DESIGN.md?

The directory of
real brand design systems
for AI agents.

Real design systems for Cursor, Claude Code, Codex, shadcn/ui and more. Copy a DESIGN.md into your project — your agent generates UI that follows your real design rules, not generic defaults.

Browse the directory Cursor Claude Code dark dashboard minimal SaaS

Vercel

Vercel design system as a DESIGN.md — monochrome Geist UI, electric-blue accent.

View DESIGN.md

Linear

Project management. Deep violet system, monospace precision, keyboard-first developer aesthetic.

View DESIGN.md

Cursor

AI-first code editor. Dark, minimal, keyboard-centric devtool.

View DESIGN.md

Figma

Design tool. Clean, professional, subtle brand depth.

View DESIGN.md

Framer

Interactive design and publishing. Editorial, bold, premium web.

View DESIGN.md

Webflow

No-code website builder. Clean, empowering, modern SaaS.

View DESIGN.md

Lemon Squeezy

Payments for SaaS. Playful, vibrant, indie-friendly.

View DESIGN.md

Loom

Async video for teams. Friendly, approachable SaaS.

View DESIGN.md

Loops

Email platform for SaaS. Clean and modern.

View DESIGN.md

Paddle

Revenue delivery platform. Clean, modern B2B SaaS.

View DESIGN.md

GitHub

Code hosting and collaboration. Iconic devtool UI.

View DESIGN.md

Stripe

Developer-first payments platform. Clean, trustworthy, minimal decoration.

View DESIGN.md

View all DESIGN.md files

What is DESIGN.md? A plain-text design system file that AI coding agents read to generate consistent UI based on your project's real visual rules — colors, typography, spacing, and components.

Start with a ready-made template, learn the workflow in the DESIGN.md guide, or browse real design systems from products like Vercel and Linear.

Popular guides

All guides →

DESIGN.md for Cursor DESIGN.md for Claude Code DESIGN.md for Codex What is DESIGN.md?DESIGN.md for Kiro Google Stitch and DESIGN.md

The directory ofreal brand design systemsfor AI agents.

Vercel

Linear

Cursor

Figma

Framer

Webflow

Lemon Squeezy

Loom

Loops

Paddle

GitHub

Stripe

Popular guides

DESIGN.md — frequently asked questions

What is DESIGN.md?

How does DesignMD Directory work?

How do I add a DESIGN.md to Cursor?

Does Claude Code read DESIGN.md automatically?

Can Codex use DESIGN.md for Tailwind and shadcn/ui?

What is the difference between DESIGN.md and CLAUDE.md?

The directory of
real brand design systems
for AI agents.