About DESIGNmd

What is DESIGN.md?

DESIGN.md is a portable, markdown-based format for describing design systems. Introduced by Google Stitch, it captures everything an AI coding tool needs to build consistent UIs: colors, typography, spacing, component patterns, and more — all in plain text.

Unlike Figma files or design tokens in JSON, DESIGN.md is human-readable, version-controllable, and consumable by any AI coding agent. Drop a DESIGN.md file into your project root and your AI assistant can immediately build UI that follows your design system.

A typical DESIGN.md includes sections like:

  • Colors — primary palette, neutrals, semantic colors with hex codes
  • Typography — font families, sizes, weights, line heights
  • Spacing — base unit and scale values
  • Components — button variants, input styles, card patterns
  • Icons — icon library and preferred style

How to use DESIGNmd

DESIGNmd is the community library for DESIGN.md files. Browse, search, and download design systems created by the community.

1

Browse and find a design system

Search by style, color scheme, use case, or framework. Filter by tags, sort by popularity.

2

Download or copy the DESIGN.md

One click to download the file or copy the content to your clipboard.

3

Drop it into your project

Place the DESIGN.md in your project root. Your AI coding tool will use it automatically.

MCP Setup Guide

The DESIGNmd MCP server lets your AI coding tool search, browse, and download design systems directly — without visiting the website. It works with any MCP-compatible tool.

Claude Code

Add to your Claude Code MCP configuration (~/.claude/claude_desktop_config.json):

{
  "mcpServers": {
    "designmd": {
      "command": "npx",
      "args": ["designmd-mcp"]
    }
  }
}

Cursor

Add to your Cursor MCP settings (.cursor/mcp.json):

{
  "mcpServers": {
    "designmd": {
      "command": "npx",
      "args": ["designmd-mcp"]
    }
  }
}

Antigravity

Add to your Antigravity MCP configuration (~/.gemini/antigravity/mcp_config.json):

{
  "mcpServers": {
    "designmd": {
      "command": "npx",
      "args": ["designmd-mcp"]
    }
  }
}

With API Key (for uploading)

To upload kits via MCP, generate an API key and add it to the config: 

{
  "mcpServers": {
    "designmd": {
      "command": "npx",
      "args": ["designmd-mcp"],
      "env": {
        "DESIGNMD_API_KEY": "dk_your-key-here"
      }
    }
  }
}

How to Upload & Contribute

Anyone with a GitHub account can contribute design systems to the community.

1

Sign in with GitHub

Click "Sign In" in the header to authenticate with your GitHub account.

2

Create your DESIGN.md

Write a markdown file with your design tokens: colors, typography, spacing, and component patterns.

3

Upload and publish

Drag and drop your file on the upload page. Add a name, description, tags, and license.

4

Your kit goes live

After a quick automated review, your design system is published and available for the whole community.

Ready to share your design system?

Upload a Kit Explore Kits