DesignMD Directory
TemplatesNEWSkillsDesign MD ExamplesPricingResources
⌕⌘K

DesignMD Directory

Visual references, skills, and source templates for AI coding agents.

♥ Support Itmeo

Products

  • Templates
  • Admin Panel Template
  • SaaS Dashboard Template
  • Design Skills
  • Design MD Examples
  • AI Studio
  • WebGradients
  • Free CSS Gradient Generator
  • Color Palette for Websites

Company

  • About
  • Blog
  • Manifesto
  • Donate

Explore

  • Changelog
  • Vercel Design MD
  • shadcn Design MD
  • GitHub Design MD
  • Design MD examples
  • llms.txt
  • ai.txt
  • Sitemap

Connect

  • Twitter / X
  • GitHub
  • DESIGN.md spec
  • dimabraven.com

© 2016–2026 Itmeo. All rights reserved.

PrivacyTerms

Explore

AllTemplates6Design MD Examples80+Design Skills230Guides16ToolsCLIPricing

For your agent

CursorClaude CodeCodexGoogle Stitch

Browse stack

shadcn/uiNext.jsTailwind CSS

Follow

X / TwitterSoonProduct HuntSoon
AllTemplatesExamplesSkillsGuidesToolsCLIPricing
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.

View all templatesBrowse ExamplesDesign SkillsHow it works

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 ↗
ImageDESIGN.md

Vercel

vercel.com · website Design MD

ImageDESIGN.md

Linear

linear.app · website Design MD

ImageDESIGN.md

Cursor

cursor.com · website Design MD

ImageDESIGN.md

Figma

figma.com · website Design MD

ImageDESIGN.md

Stripe

stripe.com · website Design MD

ImageDESIGN.md

GitHub

github.com · website Design MD

ImageDESIGN.md

Notion

notion.com · website Design MD

ImageDESIGN.md

shadcn/ui DESIGN.md

ui.shadcn.com · website Design MD

ImageDESIGN.md

Tailwind DESIGN.md template

tailwindcss.com · website Design MD

ImageDESIGN.md

Framer

framer.com · website Design MD

ImageDESIGN.md

Webflow

webflow.com · website Design MD

ImageDESIGN.md

Supabase

supabase.com · website Design MD

ImageDESIGN.md

Resend

resend.com · website Design MD

ImageDESIGN.md

Ramp

ramp.com · website Design MD

ImageDESIGN.md

v0 by Vercel

v0.dev · website Design MD

Browse by tag

Find a visual direction

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

shadcn/uiComponents, tokens and dashboard patterns.Browse →Next.jsNext.js templates with Design MD and agent-ready frontend context.Browse →Tailwind CSSTailwind CSS spacing, color, radius, component tone and responsive rules.Browse →DashboardTables, filters, metrics and admin surfaces.Browse →SaaSWorkspaces, billing, collaboration and product-team interfaces.Browse →AdminInternal tools, permissions, tables and operational workflows.Browse →AI AppAI builders, model platforms, chat products and agent workspaces.Browse →Landing PageMarketing pages, product launches and focused conversion flows.Browse →

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 ↗
ImageFree
Open

Landing Page DESIGN.md

Template kit by DesignMD

Free
Image$49
Open

Admin Panel DESIGN.md

Template kit by DesignMD

shadcn DESIGN.md
Image$39
Open

SaaS Dashboard DESIGN.md

Template kit by DesignMD

shadcn DESIGN.md
Image$39
Open

Minimal SaaS Dashboard DESIGN.md

Template kit by DesignMD

shadcn DESIGN.md
Image$39
Open

Analytics Dashboard DESIGN.md

Template kit by DesignMD

shadcn DESIGN.md
Image$29
Open

AI App Starter DESIGN.md

Template kit by DesignMD

shadcn DESIGN.md

Design skills

Give your agent better visual taste

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

All 230 design skills ↗

A11y audit

Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes.

Result: A more usable interface with fewer avoidable contrast, focus, and interaction failures.

Accessibility and quality · Thientan Soparat502InstallableOpen skill

Accessibility audit

Run a comprehensive WCAG accessibility audit covering perceivable, operable, understandable, and robust principles.

Result: A more usable interface with fewer avoidable contrast, focus, and interaction failures.

Accessibility and quality · Rampstack550InstallableOpen skill

Add shader cursor trail

Add the Shaders WebGPU mouse effect used for the Tidal Commons hero: a white twinkling halftone cursor trail driven by ChromaFlow, masked through a DotGrid, finished with chromatic ripples a

Result: A 3D-led interface that supports the message instead of competing with it.

3D and WebGL · Meng To4.8KInstallableOpen skill

Agency grid layout minimal

Create a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

Visual styles · Meng To4.8KInstallableOpen skill

Agentic

Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.

Result: Screens that feel intentional and consistent instead of assembled from generic defaults.

Visual styles · Bergside2.4KInstallableOpen skill

AI graphic design

Guide for creating logos, brand identities, and visual assets using AI tools , covers tool selection, prompt engineering, vectorization pipelines, mockups, automation, and IP safety.

Result: A product surface that looks recognizably yours, not like a generic UI kit.

Brand and identity · designrique20InstallableOpen skill

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.

Cursor

Keep visual rules in context while Cursor edits your UI.

Claude Code

Pair CLAUDE.md engineering rules with a clear visual system.

OpenAI

Codex

Use DESIGN.md beside AGENTS.md in Codex implementation work.

Google Stitch

Move a DESIGN.md from visual exploration into 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 ↗
01

DESIGN.md for shadcn/ui

Keep shadcn/ui fast without letting the product feel generic.

Read guide
02

DESIGN.md for Tailwind CSS

Stop Tailwind-generated UI from collapsing into utility soup.

Read guide
03

How to make Cursor generate better frontend design

Use stable design memory instead of rewriting visual rules every chat.

Read guide
04

DESIGN.md for Codex

Pair AGENTS.md engineering rules with DESIGN.md visual constraints.

Read guide

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 →
Advertisement
Advertisement