What is design.md?

The Problem

AI coding agents like Cursor, Windsurf, and Claude are incredible at writing code, but they are blind to your design system. Without knowing your specific colors, typography, or component library structure, they often invent new utility classes or hallucinate components, leading to design drift.

The Solution

design.md is an emerging standard: a structured Markdown file that acts as a comprehensive reference for your project's design language. Because language models excel at reading and understanding Markdown, this format perfectly bridges the gap between your visual design and your AI's context.

# Design System

## Colors
- Primary: #3B82F6 (Blue 500)
- Background: #0F172A (Slate 900)
- Foreground: #F8FAFC (Slate 50)

## Typography
- Display: 'Inter', sans-serif (Tracking: -0.02em)
- Body: 'Roboto', sans-serif (Leading: 1.6)

## Components
### Button
- Padding: px-4 py-2
- Radius: rounded-md
- Variants: primary (bg-primary text-white), outline (border border-border)

How DesignDNA Helps

Manually writing and updating a design.md file is tedious. DesignDNA automates this entirely. By scanning any website or web app, DesignDNA instantly extracts its CSS variables, computed styles, fonts, and structural patterns, and compiles them directly into a fresh, accurate design.md file ready to be dropped into your project.

Usage

Simply place design.md in the root of your project or within your .cursorrules context directory. When prompting your AI, reference it: "Build a new authentication form following the rules in design.md."