Open library · 461 documented files

DESIGN MD (DESIGN.md)

designmd.app is an open-source library of DESIGN.md files — structured design system specifications that AI coding agents read before generating UI. Each file defines colors, typography, spacing, and component rules in Markdown with YAML tokens. Pick a style, drop it in your repo, and your agent produces consistent interfaces from the first prompt.

Compatible with Claude Code · Cursor · Kiro · Windsurf · Cline

Library

461 DESIGN.md ready to use

View all →

01

Agents don't remember your design

LLMs process each prompt in isolation. Without a reference in the repository, each generated component uses different visual decisions.

02

DESIGN.md enters the context window

YAML front matter with design tokens (colors, typography, spacing) + Markdown prose with rationale and constraints. The agent reads it before generating any UI.

03

Copy from library, paste in project

461 documented design systems. Choose a style, download the DESIGN.md and configure your agent.

Reading

Articles and guides

View all →
Guide

How to use DESIGN.md with Cursor

Use .cursor/rules to inject DESIGN.md in every UI generation.

Read guide →

Guide

How to use DESIGN.md with Cursor

Configure .cursor/rules/*.mdc to reference your DESIGN.md.

Read guide →

Guide

How to use DESIGN.md with Kiro

Add DESIGN.md to the .kiro/steering directory of your project.

Read guide →

Guide

How to use DESIGN.md with Kiro

Configure .kiro/steering/ to reference your DESIGN.md.

Read guide →

Guide

How to use DESIGN.md with Windsurf

Configure global_rules.md to point to your DESIGN.md.

Read guide →

Guide

How to use DESIGN.md with Windsurf

Configure .windsurfrules to reference your DESIGN.md.

Read guide →

Guide

How to use DESIGN.md with Google Stitch

Export DESIGN.md directly from Google Stitch.

Read guide →

Guide

How to use DESIGN.md with Google Stitch

Configure Native UI to reference your DESIGN.md.

Read guide →

Guide

How to use DESIGN.md with GitHub Copilot

Configure copilot-instructions.md to reference your DESIGN.md.

Read guide →

Guide

How to use DESIGN.md with GitHub Copilot

Configure copilot-instructions.md to reference your DESIGN.md.

Read guide →

Guide

How to use DESIGN.md with Cline

Configure .clinerules to reference your DESIGN.md.

Read guide →

Guide

How to use DESIGN.md with Cline

Configure .clinerules to reference your DESIGN.md.

Read guide →

Guide

How to use DESIGN.md with Aider

Configure .aider.conf.yml to reference your DESIGN.md.

Read guide →

Guide

How to use DESIGN.md with Aider

Configure .aider.conf.yml to reference your DESIGN.md.

Read guide →

Guide

How to use DESIGN.md with Codex

Configure AGENTS.md to reference your DESIGN.md.

Read guide →

Guide

How to use DESIGN.md with Codex

Configure AGENTS.md to reference your DESIGN.md.

Read guide →

Guide

How to use DESIGN.md with Devin

Configure Knowledge Base to reference your DESIGN.md.

Read guide →

Guide

How to use DESIGN.md with Devin

Configure Knowledge Base to reference your DESIGN.md.

Read guide →

Guide

How to use DESIGN.md with Continue.dev

Configure .continuerc.json to reference your DESIGN.md.

Read guide →

Guide

How to use DESIGN.md with Continue.dev

Configure .continuerc.json to reference your DESIGN.md.

Read guide →

Article

DESIGN.md + AGENTS.md + RULES.md: which file does what

The definitive map of context files for AI agents — DESIGN.md, AGENTS.md, RULES.md, .curso…

Article

DESIGN.md at scale: when tokens aren't enough (and what to add)

DESIGN.md solves visual tokens but AI agents still guess component behavior. Here are prac…

Structure

Anatomy of a DESIGN.md

Eight sections in canonical order from the official spec. YAML front matter with tokens + Markdown prose with rationale. The agent reads the full file before generating any component.

View full format →
DESIGN.md
---
name: Productivity App
colors:
  primary: "#2665fd"
  surface: "#0b1326"
  on-surface: "#dae2fd"
typography:
  headline:
    fontFamily: Geist
    fontSize: 2rem
    fontWeight: 600
  body:
    fontFamily: Geist
    fontSize: 1rem
    fontWeight: 400
rounded:
  sm: 4px
  md: 8px
  lg: 12px
spacing:
  sm: 8px
  md: 16px
  lg: 32px
---

## Overview
Minimal interface for a productivity app.
Clean lines, high information density.

## Colors
- **Primary** (#2665fd): CTAs, active states
- **Surface** (#0b1326): Backgrounds

## Typography
- Headlines: Geist, semi-bold
- Body: Geist, regular, 14–16px

## Components
- Buttons: rounded-lg, primary filled
- Inputs: 1px border, surface-variant bg

## Do's and Don'ts
- Do use primary only for main actions
- Don't mix rounded and sharp corners

Setup Guides

Configure DESIGN.md with your AI coding agent

References