awesome-claude-design

What this skill does

```markdown
---
name: awesome-claude-design
description: Use 68 ready-to-use DESIGN.md files to scaffold full UI design systems with Claude Design in one shot
triggers:
  - set up a design system with Claude Design
  - use a DESIGN.md file for my project
  - scaffold a UI from a design system
  - pick a design inspiration for Claude Design
  - create a design system from DESIGN.md
  - drop a DESIGN.md into Claude Design
  - generate a UI kit with Claude Design
  - find a design system template for my app
---

# Awesome Claude Design

> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.

A curated collection of 68 ready-to-use `DESIGN.md` files covering AI platforms, developer tools, fintech, e-commerce, and more. Drop one into [Claude Design](https://claude.ai/design) and get a full design system scaffold — color tokens, type scale, components, preview cards, and a working UI kit — in a single shot.

---

## What This Project Does

`awesome-claude-design` gives you a library of pre-written `DESIGN.md` files, each describing a well-known brand's visual language (colors, typography, spacing, voice, component patterns) in a structured markdown format that Claude Design can act on directly.

**Input:** One `DESIGN.md` file  
**Output (from Claude Design):**
- `README.md` — brand context, voice, visual foundations
- `colors_and_type.css` — CSS custom properties, type scale, utility classes
- `preview/` — cards for colors, type, spacing, components, and brand
- `index.html` — working UI kit / marketing page applying the system
- `SKILL.md` — portable skill file for future projects

---

## Understanding DESIGN.md

A `DESIGN.md` file is a single plain-text markdown document that encodes a brand's visual language so AI agents can make consistent decisions — not just *what* to use, but *why*.

### Minimal DESIGN.md structure

```markdown
# Brand Name Design System

## Overview
Brief brand description and personality.

## Color Palette
- **Primary:** #10B981 — Emerald; used for CTAs, active states, highlights
- **Background:** #0A0A0A — Void black; base canvas
- **Surface:** #111111 — Slightly lifted surface for cards
- **Text Primary:** #F5F5F5 — Near-white body copy
- **Text Muted:** #6B7280 — Secondary labels and captions
- **Accent:** #34D399 — Hover states, borders, focus rings

## Typography
- **Display:** Inter, 700–900 weight, tight tracking (-0.02em)
- **Body:** Inter, 400–500 weight, 1.6 line-height
- **Mono:** JetBrains Mono, used for code, terminals, data labels
- **Scale:** 12 / 14 / 16 / 20 / 24 / 32 / 48 / 64px

## Spacing
Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128px

## Border Radius
- Small: 4px (inputs, badges)
- Medium: 8px (cards, buttons)
- Large: 16px (modals, panels)
- Full: 9999px (pills, avatars)

## Shadows
- Subtle: 0 1px 3px rgba(0,0,0,0.4)
- Card: 0 4px 16px rgba(0,0,0,0.6)
- Glow: 0 0 24px rgba(16,185,129,0.3)

## Voice & Tone
Direct, technical, never corporate. Short sentences. Active verbs.

## Component Patterns
- **Buttons:** Filled primary (emerald bg), ghost (border only), destructive (red)
- **Cards:** Dark surface, 1px border, subtle hover lift with glow shadow
- **Navigation:** Top bar, logo left, links center, CTA right
- **Code blocks:** Monospace font, syntax-highlighted, copy button top-right

## Do / Don't
- ✅ Dark backgrounds with high contrast text
- ✅ Emerald for interactive elements only
- ❌ Light mode variants
- ❌ Rounded corners above 16px on cards
```

---

## Finding & Downloading a DESIGN.md

All 68 design systems are hosted at [getdesign.md](https://getdesign.md/). Each has a preview page where you can inspect the full system before downloading.

### URL pattern
```
https://getdesign.md/{brand-slug}/design-md
```

### Examples
```
https://getdesign.md/vercel/design-md       # Black/white precision, Geist font
https://getdesign.md/stripe/design-md       # Purple gradients, weight-300 elegance
https://getdesign.md/linear.app/design-md   # Ultra-minimal, purple accent
https://getdesign.md/supabase/design-md     # Dark emerald, code-first
https://getdesign.md/voltagent/design-md    # Void-black, emerald, terminal-native
https://getdesign.md/figma/design-md        # Vibrant multi-color, playful
https://getdesign.md/notion/design-md       # Warm minimalism, serif headings
https://getdesign.md/spotify/design-md      # Dark canvas, neon green
```

---

## Using a DESIGN.md with Claude Design

### Option A — Start from a design system (recommended)

1. Go to [claude.ai/design/#org](https://claude.ai/design/#org)
2. Click **Create new design system**
3. On the *Set up your design system* screen, upload your `DESIGN.md` under **Add assets**
4. Claude scaffolds the full system automatically

### Option B — Start from a prototype

1. Go to [claude.ai/design](https://claude.ai/design) and create a new prototype
2. Attach your `DESIGN.md` in the chat input
3. Send the prompt:

```
Create a design system from this DESIGN.md
```

### Follow-up prompts after scaffolding

```
Generate a SaaS dashboard page using this design system
Build a pricing page with 3 tiers using the established tokens
Create a login/signup flow consistent with this system
Add a data table component following the component patterns
Build a mobile navigation drawer using existing tokens
```

---

## Choosing the Right Design System

### By aesthetic

| You want… | Use this DESIGN.md |
|-----------|-------------------|
| Minimal dark + precise | `vercel`, `linear.app`, `ollama` |
| Warm, editorial, light | `notion`, `apple`, `airbnb` |
| Cinematic dark + neon | `shopify`, `elevenlabs`, `runwayml` |
| Bold + high-contrast | `nike`, `spacex`, `xai` |
| Colorful + playful | `figma`, `lovable`, `airtable` |
| Enterprise + trustworthy | `ibm`, `hashicorp`, `coinbase` |
| Purple gradient premium | `stripe`, `superhuman`, `kraken` |
| Developer terminal-native | `voltagent`, `warp`, `cursor` |
| Green brand | `supabase`, `mongodb`, `wise` |

### By use-case

| Building… | Inspiration |
|-----------|-------------|
| SaaS dashboard | `linear.app`, `posthog`, `sentry` |
| Developer docs | `mintlify`, `supabase`, `vercel` |
| Marketing site | `stripe`, `framer`, `webflow` |
| E-commerce | `shopify`, `airbnb`, `nike` |
| Fintech app | `stripe`, `revolut`, `wise` |
| AI product | `claude`, `cohere`, `mistral.ai` |
| Productivity tool | `notion`, `linear.app`, `cal` |

---

## Creating a Custom DESIGN.md

If none of the 68 presets match your brand, create your own:

```markdown
# MyApp Design System

## Overview
[2–3 sentences: what the product is, who uses it, personality]

## Color Palette
- **Primary:** #HEX — Name; usage note
- **Background:** #HEX — Name; usage note
- **Surface:** #HEX — Name; usage note
- **Text Primary:** #HEX
- **Text Muted:** #HEX
- **Accent:** #HEX
- **Destructive:** #HEX
- **Success:** #HEX

## Typography
- **Display font:** [Font name], [weights], [tracking]
- **Body font:** [Font name], [weights], [line-height]
- **Mono font:** [Font name]
- **Scale:** [list of px sizes]

## Spacing
[Base unit and scale]

## Border Radius
[Named sizes with px values and when to use each]

## Shadows
[Named shadow levels]

## Voice & Tone
[3–5 bullet adjectives + one "we sound like X, not Y"]

## Component Patterns
- **Buttons:** [variants and usage]
- **Cards:** [structure and feel]
- **Navigation:** [layout pattern]
- **Forms:** [input style]

## Do / Don't
- ✅ [rule]
- ❌ [rule]
```

---

## Generated Output Structure

After Claude Design processes your `DESIGN.md`, expect this file structure:

```
design-system/
├── README.md                  # Brand overview, usage guide
├── colors_and_type.css        # All CSS custom properties
├── index.html                 # Working UI kit / marketing page
├── SKILL.md                   # Portable skill for future use
└── preview/
    ├── colors.html            # Color swatch cards
    ├── typography.html        # Type scale showcase
    ├── spacing.html           # Spacing scale v