awesome-design-md

What this skill does

# awesome-design-md

This skill gives Claude on-demand access to 69 brand `DESIGN.md` files (Stripe, Linear, Apple, Ferrari, Notion, etc.) so generated UI can match an established visual language instead of defaulting to generic Tailwind-looking slop.

Source: https://github.com/VoltAgent/awesome-design-md · https://getdesign.md

## When to use this skill

Trigger when the user:
- Names a brand as a visual reference ("make it look like Stripe", "Linear-style layout", "in the spirit of Apple").
- Asks for a landing page, dashboard, or component with an unspecified aesthetic — offer a brand match from the list below instead of inventing tokens.
- Asks to "use DESIGN.md", "use awesome-design-md", or to install a design system into a project.

Do NOT use when the project already has its own `DESIGN.md`, design tokens, or strong in-repo style conventions — follow those instead.

## How to use

### 1. Pick a brand

Check whether the requested brand is in the list below. If the user gave a vague direction ("minimal fintech", "bold dark dev tool"), pick the closest match from `## Brands` and confirm with the user before proceeding.

### 2. Load its DESIGN.md into context

The DESIGN.md files are cached locally in this skill folder:

```
~/.claude/skills/awesome-design-md/design-md/<brand>/DESIGN.md
```

Read it with the Read tool. Each file covers: visual theme, color palette (hex + roles), typography scale, component stylings, layout, depth/elevation, do's and don'ts, responsive rules, and an agent prompt guide.

### 3a. Use it as a reference (most common)

Keep the DESIGN.md in context. When generating UI, follow its color tokens, typography scale, spacing, and component patterns exactly. Quote hex values from the palette section rather than guessing. Honor the "Do's and Don'ts" section — those are the guardrails.

### 3b. Install it into the user's project

If the user wants the file in their repo (so their own tooling and future sessions can see it), run:

```bash
npx getdesign@latest add <brand>
```

from the project root. First add writes to `./DESIGN.md`; subsequent adds go to `./<brand>/DESIGN.md`. Use `--force` to overwrite, `--out <path>` for a custom location.

### 4. Refresh the local cache (optional)

The cached files are a point-in-time snapshot. To pull the latest version of all 69:

```bash
cd ~/.claude/skills/awesome-design-md
npx --yes getdesign@latest list 2>/dev/null | awk -F' - ' '{print $1}' | \
  xargs -n1 -P8 -I{} sh -c 'npx --yes getdesign@latest add "{}" --out design-md/"{}"/DESIGN.md --force >/dev/null 2>&1'
```

Or refresh a single brand: `npx --yes getdesign@latest add <brand> --out ~/.claude/skills/awesome-design-md/design-md/<brand>/DESIGN.md --force`.

## Brands

### AI & LLM Platforms
- **claude** — Anthropic's AI assistant. Warm terracotta accent, clean editorial layout.
- **cohere** — Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic.
- **elevenlabs** — AI voice platform. Dark cinematic UI, audio-waveform aesthetics.
- **minimax** — AI model provider. Bold dark interface with neon accents.
- **mistral.ai** — Open-weight LLM provider. French-engineered minimalism, purple-toned.
- **ollama** — Run LLMs locally. Terminal-first, monochrome simplicity.
- **opencode.ai** — AI coding platform. Developer-centric dark theme.
- **replicate** — Run ML models via API. Clean white canvas, code-forward.
- **runwayml** — AI video generation. Cinematic dark UI, media-rich layout.
- **together.ai** — Open-source AI infrastructure. Technical, blueprint-style design.
- **voltagent** — AI agent framework. Void-black canvas, emerald accent, terminal-native.
- **x.ai** — Elon Musk's AI lab. Stark monochrome, futuristic minimalism.

### Developer Tools & IDEs
- **cursor** — AI-first code editor. Sleek dark interface, gradient accents.
- **expo** — React Native platform. Dark theme, tight letter-spacing, code-centric.
- **lovable** — AI full-stack builder. Playful gradients, friendly dev aesthetic.
- **raycast** — Productivity launcher. Sleek dark chrome, vibrant gradient accents.
- **superhuman** — Fast email client. Premium dark UI, keyboard-first, purple glow.
- **vercel** — Frontend deployment. Black and white precision, Geist font.
- **warp** — Modern terminal. Dark IDE-like interface, block-based command UI.

### Backend, Database & DevOps
- **clickhouse** — Fast analytics database. Yellow-accented, technical documentation style.
- **composio** — Tool integration platform. Modern dark with colorful integration icons.
- **hashicorp** — Infrastructure automation. Enterprise-clean, black and white.
- **mongodb** — Document database. Green leaf branding, developer documentation focus.
- **posthog** — Product analytics. Playful hedgehog branding, developer-friendly dark UI.
- **sanity** — Headless CMS. Red accent, content-first editorial layout.
- **sentry** — Error monitoring. Dark dashboard, data-dense, pink-purple accent.
- **supabase** — Open-source Firebase alternative. Dark emerald theme, code-first.

### Productivity & SaaS
- **cal** — Open-source scheduling. Clean neutral UI, developer-oriented simplicity.
- **intercom** — Customer messaging. Friendly blue palette, conversational UI patterns.
- **linear.app** — Project management. Ultra-minimal, precise, purple accent.
- **mintlify** — Documentation platform. Clean, green-accented, reading-optimized.
- **notion** — All-in-one workspace. Warm minimalism, serif headings, soft surfaces.
- **resend** — Email API. Minimal dark theme, monospace accents.
- **zapier** — Automation platform. Warm orange, friendly illustration-driven.

### Design & Creative Tools
- **airtable** — Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic.
- **clay** — Creative agency. Organic shapes, soft gradients, art-directed layout.
- **figma** — Collaborative design tool. Vibrant multi-color, playful yet professional.
- **framer** — Website builder. Bold black and blue, motion-first, design-forward.
- **miro** — Visual collaboration. Bright yellow accent, infinite canvas aesthetic.
- **webflow** — Visual web builder. Blue-accented, polished marketing site aesthetic.

### Fintech & Crypto
- **binance** — Crypto exchange. Bold yellow accent on monochrome, trading-floor urgency.
- **coinbase** — Crypto exchange. Clean blue identity, trust-focused, institutional feel.
- **kraken** — Crypto trading. Purple-accented dark UI, data-dense dashboards.
- **mastercard** — Global payments network. Warm cream canvas, orbital pill shapes, editorial warmth.
- **revolut** — Digital banking. Sleek dark interface, gradient cards, fintech precision.
- **stripe** — Payment infrastructure. Signature purple gradients, weight-300 elegance.
- **wise** — Money transfer. Bright green accent, friendly and clear.

### E-commerce & Retail
- **airbnb** — Travel marketplace. Warm coral accent, photography-driven, rounded UI.
- **meta** — Tech retail store. Photography-first, binary light/dark surfaces, Meta Blue CTAs.
- **nike** — Athletic retail. Monochrome UI, massive uppercase type, full-bleed photography.
- **shopify** — E-commerce platform. Dark-first cinematic, neon green accent, ultra-light type.
- **starbucks** — Global coffee retail brand. Four-tier green system, warm cream canvas, full-pill buttons.

### Media & Consumer Tech
- **apple** — Consumer electronics. Premium white space, SF Pro, cinematic imagery.
- **ibm** — Enterprise technology. Carbon design system, structured blue palette.
- **nvidia** — GPU computing. Green-black energy, technical power aesthetic.
- **pinterest** — Visual discovery. Red accent, masonry grid, image-first.
- **playstation** — Gaming console retail. Three-surface channel layout, cyan hover-scale.
- **spacex** — Space technology. Stark black and white, full-bleed imagery, futuristic.
- **spotify** — Music streaming. Vibrant green on dark, bold type, album-art-driven.
- **theverge** — Tech editorial media. Acid-mint and ultraviolet accents, Manuka display.
- **u