Open library · 423 documented files
DESIGN.md APP
A Markdown file at the project root that teaches the AI agent your design system's colors, typography, and visual patterns — before generating any component.
Compatible with Claude Code · Cursor · Kiro · Windsurf · Cline
Library
423 DESIGN.md ready to use
Minimalism & Swiss Style
Minimalist landing page. Ideal for b2b saas, enterprise apps, design saas, profe…
Aurora UI
Vibrant gradient interface inspired by Northern Lights with mesh gradients, smoo…
Grunge Rock dos Anos 90
90s grunge rock landing page. Ideal for landing pages, saas. AI-ready template.
Art Nouveau Florido
Design an Art Nouveau floral landing page. Ideal for landing pages, saas. AI-rea…
Flat Design Corporativo
Corporate flat design landing page. Ideal for landing pages, saas. AI-ready temp…
Steampunk Vitoriano
Victorian steampunk landing page. Ideal for landing pages, saas. AI-ready templa…
De Stijl Abstrato
De Stijl abstract landing page. Ideal for landing pages, saas. AI-ready template…
Cyber-Tribal
Cyber-tribal landing page. Ideal for landing pages, saas. AI-ready template.
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
A Markdown file with colors, typography, spacing, and component patterns. The agent reads it before generating any UI.
03
Copy from library, paste in project
423 documented design systems. Choose a style, download the DESIGN.md and configure your agent.
Reading
Articles and guides
How to use DESIGN.md with Kiro
Add DESIGN.md to the .kiro/steering directory of your project.
Read guide →
How to use DESIGN.md with Windsurf
Configure global_rules.md to point to your DESIGN.md.
Read guide →
How to use DESIGN.md with Google Stitch
Export DESIGN.md directly from Google Stitch.
Read guide →
Structure
Anatomy of a DESIGN.md
Six standardized sections. The agent reads the full file before generating any component.
View full format →# Design System
## Overview
Minimal interface for a productivity app.
Clean lines, high information density.
## Colors
- **Primary** (#2665fd): CTAs, active states
- **Surface** (#0b1326): Backgrounds
- **On-surface** (#dae2fd): Text on dark
## 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
- Use primary only for main actions
- Don't mix rounded and sharp corners