About

Imported from terminalskills/skills (skills/design-md/SKILL.md). Install upstream with npx skills add terminalskills/skills --skill design-md. Copyright stays with the author (MIT).

DESIGN.md

Name: design-md
Author: terminalskills

Overview

DESIGN.md is a plain-text design system document that AI agents read to generate consistent UI. Introduced by Google Stitch, it captures colors, typography, components, spacing, and design philosophy in markdown — the format LLMs read best.

Think of it as AGENTS.md for design: AGENTS.md tells agents how to build, DESIGN.md tells agents how things should look.

Instructions

Using a DESIGN.md

Copy a DESIGN.md into your project root
Tell your AI agent: "Build a landing page following DESIGN.md"
The agent reads colors, typography, components, and layout rules
Generated UI matches the design system consistently

Structure of a DESIGN.md

Every DESIGN.md follows this structure:

# DESIGN.md

## Visual Theme & Atmosphere
Mood, density, design philosophy (e.g., "dark cinematic", "clean editorial")

## Color Palette & Roles
| Name | Hex | Role |
|------|-----|------|
| Primary | #6366f1 | Interactive elements, CTAs |
| Background | #0a0a0b | Page background |
| Surface | #18181b | Cards, elevated content |
| Text Primary | #fafafa | Main content |
| Accent | #f97316 | Highlights, alerts |

## Typography Rules
Font families, size hierarchy (h1-h6, body, caption), weights, line heights

## Component Stylings
Buttons (primary, secondary, ghost), cards, inputs, navigation — with hover/active states

## Layout Principles
Spacing scale (4px base), max-width, grid columns, whitespace philosophy

## Depth & Elevation
Shadow system, border treatments, surface hierarchy

## Do's and Don'ts
Design guardrails: what to do and what to avoid

## Responsive Behavior
Breakpoints, touch targets, mobile adaptations

Finding Pre-Made DESIGN.md Files

The awesome-design-md collection has 58+ ready-to-use files extracted from real websites:

AI: Claude, Cohere, ElevenLabs, Mistral, Ollama, Replicate, RunwayML
Dev Tools: GitHub, Vercel, Supabase, Railway, Linear, Cursor
SaaS: Stripe, Notion, Figma, Slack, Cal.com
Marketing: Tailwind, shadcn/ui, Framer

Creating Your Own DESIGN.md

Inspect the target website and extract:

Colors: Use browser DevTools → Computed styles → capture all colors used
Typography: Font families from CSS, size scale from headings
Spacing: Measure padding/margins, identify the base unit (usually 4px or 8px)
Components: Screenshot buttons, cards, inputs in all states
Layout: Note max-width, grid columns, responsive breakpoints

Write it all in markdown following the structure above.

Examples

Example 1: Build a SaaS landing page

Drop Linear's DESIGN.md into your project:

curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/linear/DESIGN.md

Then tell the agent:

Build a landing page for a project management tool following DESIGN.md.
Include: hero with gradient, feature grid, pricing table, CTA section.

Result: The agent generates UI with Linear's exact color palette, typography, spacing, and component styles.

Example 2: Consistent component library

With DESIGN.md in place, every component the agent generates follows the same system:

Create a notification dropdown component following DESIGN.md.

The agent uses the correct surface color, border radius, shadow level, and typography from the design system — no manual correction needed.

Guidelines

Place DESIGN.md in project root alongside AGENTS.md and CLAUDE.md
One DESIGN.md per project — it defines the entire visual language
Update it when your design evolves (it's version-controlled markdown)
For dark/light themes, include both color sets in the palette section
Test with a simple component first to verify the agent reads it correctly
Combine with impeccable-design skill for additional design quality rules

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/terminalskills-skills-design-md/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

terminalskills-skills-design-md.ocm.jsonjson

{
  "ocm": "1",
  "id": "terminalskills-skills-design-md",
  "kind": "skill",
  "name": "design-md",
  "description": "Use DESIGN.md files to give AI agents a complete design system in plain text. Drop a DESIGN.md into your project root and any AI coding agent generates consistent, pixel-perfect UI matching that design. Use when: building UI with AI agents, maintaining design consistency across AI-generated components, recreating the look of existing websites.",
  "publisher": "terminalskills",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "design-system",
      "ui",
      "ai-design",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Use DESIGN.md files to give AI agents a complete design system in plain text. Drop a DESIGN.md into your project root and any AI coding agent generates consistent, pixel-perfect UI matching that design. Use when: building UI with AI agents, maintaining design consistency across AI-generated components, recreating the look of existing websites."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/terminalskills/skills",
      "path": "skills/design-md/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/terminalskills/skills/blob/HEAD/skills/design-md/SKILL.md",
      "key": "terminalskills/skills/skills/design-md/SKILL.md"
    },
    "compatibility": "Any AI coding agent, Google Stitch",
    "license": "MIT"
  },
  "instructions": "# DESIGN.md\n\n## Overview\n\nDESIGN.md is a plain-text design system document that AI agents read to generate consistent UI. Introduced by Google Stitch, it captures colors, typography, components, spacing, and design philosophy in markdown — the format LLMs read best.\n\nThink of it as AGENTS.md for design: `AGENTS.md` tells agents how to build, `DESIGN.md` tells agents how things should look.\n\n## Instructions\n\n### Using a DESIGN.md\n\n1. Copy a `DESIGN.md` into your project root\n2. Tell your AI agent: \"Build a landing page following DESIGN.md\"\n3. The agent reads colors, typography, components, and ",
  "cost": {
    "context_tokens": 975
  }
}

Fetch it by URL: GET /api/v1/registry/terminalskills-skills-design-md/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.