About DESIGNmd

DESIGN.md is a portable, plain-text format for describing a design system to coding agents. Tokens live in YAML front matter; rationale lives in markdown sections. The spec is published by Google at github.com/google-labs-code/design.md (currently alpha).

Drop a DESIGN.md into your project root and any spec-aware agent can read your tokens, follow your component patterns, and generate UI that matches your brand — without Figma, without a custom design-tokens build step.

A spec-compliant DESIGN.md has two parts:

---
name: Heritage
colors:
  primary: "#1A1C1E"
  secondary: "#6C7278"
typography:
  body-md:
    fontFamily: Public Sans
    fontSize: 16px
    fontWeight: 400
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    rounded: 8px
---

## Overview
Architectural minimalism meets journalistic gravitas.

## Colors
- **Primary (#1A1C1E):** Deep ink for headlines and core text.
- **Secondary (#6C7278):** Slate for borders, captions, metadata.

Canonical body sections (in order, omit if not applicable): Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts.

DESIGNmd lints every uploaded kit against the official spec. Validation, Tailwind export, and DTCG export are all available via the REST API and the MCP server.

For Claude Code, Cursor, Antigravity and other agents, DESIGNmd ships two installable skills that teach the agent how to work with the format:

• designmd-author — triggers when you're authoring a DESIGN.md. Bundles the spec, an example kit, and runs npx @google/design.md lint on the draft.
• designmd-library — triggers when you want to find an existing design system. Wraps the DESIGNmd MCP server so the agent can search, preview, and install kits straight into your project.

For Claude Code, drop them into ~/.claude/skills/:

git clone https://github.com/designkit-md/designkit.md
cp -r designkit.md/packages/skills/designmd-author ~/.claude/skills/
cp -r designkit.md/packages/skills/designmd-library ~/.claude/skills/

Other agents read SKILL.md from a known directory — copy the same folders to your agent's skill location.

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

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.

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

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

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

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

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