What is DESIGN.md?

The DesignMD Directory
for AI coding agents.

Browse Design MD examples, templates, skills and practical guides for Cursor, Claude Code, Codex and Google Stitch. Explore shadcn/ui and Tailwind CSS references for agent-ready UI rules.

Design MD examples

Design MD design systems from popular websites

Browse visual design systems, then inspect the Design MD contract behind each example—not just a screenshot.

All examples ↗

Browse by tag

Find a visual direction

Start with a focused collection, then choose the Design MD example that fits your product.

Templates

Templates with Design MD

Next.js and Tailwind CSS templates for SaaS dashboards, admin panels, analytics and AI apps. Each kit includes DESIGN.md, agent-ready context and source code in one ZIP.

All templates ↗

Design skills

Give your agent better visual taste

Reusable visual styles, layout systems and design workflows for AI coding agents.

All 230 design skills ↗

Design MD for your agent

Bring the same visual rules into your agent

DESIGN.md is the visual layer of your repository instructions. Use it wherever your agent reads and writes frontend code.

Template kits

Start with a template that already has the visual system.

View all templates →

Popular guides

Guides people actually open

Highest-demand guides from DesignMD traffic — stack + agent workflows first.

All guides ↗

FAQ

Design MD Directory Questions

What is a DESIGN.md file?
How do I use DESIGN.md with Cursor, Claude Code or Codex?
How is DESIGN.md different from AGENTS.md or CLAUDE.md?
Are the website DESIGN.md examples free?
Can I submit my own DESIGN.md or design system?
How does DesignMD Directory work?
Does Claude Code read DESIGN.md automatically?
Can Codex use DESIGN.md for Tailwind and shadcn/ui?

Build from a template, not a blank prompt.

Get Next.js source, design tokens and agent context in one ready-to-code kit.

View all templates →