# @1892/design Md

> DESIGN.md — Curated collection of design system markdown files from 50+ popular websites. Drop a DESIGN.md into your project and let AI coding agents build matching UI. Use when the user wants to apply a design system, needs a DESIGN.md file, wants to clone a site's look and feel, or asks about Google Stitch design systems, UI themes, or visual styling.

- Skill: `starchild-ai-agent/1892-design-md` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add starchild-ai-agent/1892-design-md`
- Raw SKILL.md: https://api.skillmd.com/api/skills/starchild-ai-agent/1892-design-md/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: starchild-ai-agent (https://skillmd.com/u/starchild-ai-agent)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/starchild-ai-agent/1892-design-md

---


# DESIGN.md

Curated collection of DESIGN.md files that capture real design systems from popular websites. Drop one into your project and let coding agents build matching UI.

![design-md](assets/design-md.svg)

## What is DESIGN.md?

A plain-text design system document that AI coding agents read to generate consistent UI. No Figma exports, no JSON schemas — just a markdown file with colors, typography, components, and layout rules. Follows the [Google Stitch DESIGN.md format](https://stitch.withgoogle.com/docs/design-md/overview/).

Every file includes:
- **Visual Theme & Atmosphere** — mood, density, design philosophy
- **Color Palette & Roles** — semantic names + hex + functional roles
- **Typography Rules** — font families, full hierarchy
- **Component Stylings** — buttons, cards, inputs, navigation with states
- **Layout Principles** — spacing scale, grid, whitespace philosophy
- **Depth & Elevation** — shadow system, surface hierarchy
- **Do's and Don'ts** — design guardrails
- **Responsive Behavior** — breakpoints, touch targets
- **Agent Prompt Guide** — ready-to-use prompts

## How It Works

1. Pick a design system from the catalog below
2. Download the `DESIGN.md` file into your project root
3. Tell your AI agent: "Use this DESIGN.md to build the UI"
4. The agent reads it and generates matching styles, components, and layouts

## Design System Catalog

### 🏢 Developer Tools & AI
- **[Cursor](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/cursor/)** — AI code editor. Dark, minimal, developer-focused
- **[Claude](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/claude/)** — AI assistant. Clean, warm, conversational
- **[Cohere](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/cohere/)** — Enterprise AI. Bold, modern, data-driven
- **[Mistral AI](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/mistral.ai/)** — Open AI models. Technical, clean, European
- **[MiniMax](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/minimax/)** — AI platform. Futuristic, bold gradients
- **[x.ai](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/x.ai/)** — Grok/AI. Minimal, dark, elegant
- **[Together AI](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/together.ai/)** — AI infrastructure. Technical, clean
- **[OpenCode](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/opencode.ai/)** — Open-source AI coding. Dev-first, terminal-inspired
- **[Lovable](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/lovable/)** — AI app builder. Friendly, colorful, approachable
- **[Replicate](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/replicate/)** — AI model hosting. Dark, technical, model-focused
- **[Ollama](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/ollama/)** — Local LLMs. Minimal, terminal-aesthetic
- **[ElevenLabs](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/elevenlabs/)** — AI voice. Polished, modern, warm
- **[Runway](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/runwayml/)** — AI creative tools. Bold, cinematic, dark
- **[Expo](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/expo/)** — React Native framework. Clean, developer-friendly
- **[Warp](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/warp/)** — AI terminal. Dark, technical, command-focused
- **[VoltaAgent](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/voltagent/)** — Agent framework. Developer-first, dark

### 🛠️ Infrastructure & Platforms
- **[Vercel](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/vercel/)** — Frontend cloud. Minimal, monochrome, fast
- **[Supabase](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/supabase/)** — Open-source Firebase. Green accent, clean
- **[HashiCorp](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/hashicorp/)** — Infrastructure tools. Purple, enterprise, structured
- **[MongoDB](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/mongodb/)** — Database platform. Green, data-focused
- **[ClickHouse](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/clickhouse/)** — Analytics DB. Bold, technical, performance-focused
- **[Sentry](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/sentry/)** — Error tracking. Red accent, developer-focused
- **[PostHog](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/posthog/)** — Product analytics. Open-source, playful
- **[Composio](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/composio/)** — Agent integrations. Modern, developer-friendly
- **[Raycast](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/raycast/)** — Productivity launcher. Dark, fast, macOS-native feel

### 🎨 Design & Creative
- **[Figma](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/figma/)** — Design tool. Colorful, creative, collaborative
- **[Framer](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/framer/)** — Web design tool. Bold, modern, animation-heavy
- **[Sanity](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/sanity/)** — Headless CMS. Playful, colorful, content-focused
- **[Webflow](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/webflow/)** — No-code builder. Professional, polished
- **[Mintlify](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/mintlify/)** — Documentation platform. Clean, mint-green, dev-focused
- **[Notion](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/notion/)** — Workspace. Minimal, monochrome, content-first
- **[Miro](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/miro/)** — Whiteboard. Colorful, collaborative, playful
- **[Airtable](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/airtable/)** — Database-spreadsheet. Clean, structured, approachable

### 💰 Finance & Commerce
- **[Stripe](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/stripe/)** — Payments. Gradient-rich, polished, industry standard
- **[Coinbase](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/coinbase/)** — Crypto exchange. Blue, trustworthy, clean
- **[Kraken](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/kraken/)** — Crypto exchange. Dark, technical, trading-focused
- **[Revolut](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/revolut/)** — Digital bank. Bold, modern, vibrant
- **[Wise](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/wise/)** — Money transfers. Clean, green, trustworthy

### 🚀 Productivity & Communication
- **[Linear](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/linear.app/)** — Issue tracking. Dark, fast, minimal — the gold standard for dev tools
- **[Cal.com](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/cal/)** — Scheduling. Clean, friendly, accessible
- **[Intercom](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/intercom/)** — Customer messaging. Blue, conversational, friendly
- **[Superhuman](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/superhuman/)** — Email client. Premium, fast, keyboard-first
- **[Zapier](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/zapier/)** — Automation. Orange, approachable, workflow-focused
- **[Clay](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/clay/)** — CRM. Clean, modern, relationship-focused

### 🏭 Enterprise & Industrial
- **[Apple](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/apple/)** — Consumer tech. Ultra-minimal, premium, whitespace-heavy
- **[IBM](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/ibm/)** — Enterprise tech. Structured, accessible, Carbon Design System
- **[NVIDIA](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/nvidia/)** — GPU/AI. Green-black, powerful, technical
- **[SpaceX](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/spacex/)** — Aerospace. Dark, cinematic, mission-focused
- **[BMW](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/bmw/)** — Automotive. Premium, dark, luxurious

### 🌐 Consumer & Lifestyle
- **[Spotify](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/spotify/)** — Music streaming. Dark, vibrant, media-rich
- **[Pinterest](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/pinterest/)** — Visual discovery. Masonry grid, red accent, image-first
- **[Airbnb](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/airbnb/)** — Travel/hospitality. Warm, coral accent, card-based
- **[Uber](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/uber/)** — Mobility. Bold black and white, tight type, urban energy
- **[Resend](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/resend/)** — Email API. Clean, developer-focused, minimal

## Skill Selection Guide

| Task | What to Do |
|------|-----------|
| Apply a design system to a project | Download the `DESIGN.md` and `preview.html` from the site's folder, place in project root |
| Build UI matching a brand's style | Tell the coding agent: "Use this DESIGN.md as the design system" |
| Compare design systems | Read multiple `DESIGN.md` files and compare color palettes, typography, component patterns |
| Request a new design system | Open an issue at the [awesome-design-md repo](https://github.com/VoltAgent/awesome-design-md/issues/new?template=design-md-request.yml) |

## Quickstart

When the user wants to apply a design system:

1. Ask which brand/style they want to match (or suggest based on context — e.g., "Stripe" for polished SaaS, "Linear" for dev tools, "Apple" for minimal premium)
2. Download the `DESIGN.md` from `https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/{site}/`
3. Place it in the project root
4. Pass it to the coding agent: "Build the UI following this DESIGN.md"

## Resources

- [Google Stitch DESIGN.md Overview](https://stitch.withgoogle.com/docs/design-md/overview/)
- [DESIGN.md Format Spec](https://stitch.withgoogle.com/docs/design-md/format/)
- [awesome-design-md GitHub](https://github.com/VoltAgent/awesome-design-md)
- [Request a DESIGN.md](https://github.com/VoltAgent/awesome-design-md/issues/new?template=design-md-request.yml)