The directory of
real brand design systems
for AI agents.

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.

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

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."

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.

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.

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.