Awesome Claude Design

Skill by ara.so — Design Skills collection.

This skill helps you use the

awesome-claude-design

collection: 68 ready-to-use

DESIGN.md

files that Claude Design expands into full UI scaffolds with design tokens, components, and working UI kits in a single shot.

What This Project Does

awesome-claude-design

is a curated collection of

DESIGN.md

files extracted from real brands (Claude, Vercel, Stripe, Linear, etc.). Each file describes a complete visual design system in a markdown format that AI design agents can parse and execute.

When you upload a

DESIGN.md

to Claude Design, it automatically generates:

Design tokens (colors, typography, spacing) as CSS variables
Component library (buttons, cards, nav, forms)
Preview cards showcasing the design system
Working UI kit (
```
index.html
```
+ CSS) applying the system
SKILL.md
for reusable design patterns

This skips the blank-page design brief and gives Claude Design a concrete starting point that matches your desired aesthetic.

Installation & Setup

1. Browse the Collection

Visit the GitHub repository to see all 68 design systems:

bash

# Clone the repository to browse locally
git clone https://github.com/VoltAgent/awesome-claude-design.git
cd awesome-claude-design

Or browse online at:

https://github.com/VoltAgent/awesome-claude-design

2. Select a Design System

Each

DESIGN.md

has a preview page at

https://getdesign.md/<brand>/design-md

. Examples:

Claude:
```
https://getdesign.md/claude/design-md
```
Vercel:
```
https://getdesign.md/vercel/design-md
```
Stripe:
```
https://getdesign.md/stripe/design-md
```

Linear:

https://getdesign.md/linear.app/design-md

Preview pages show:

Color palettes with hex codes
Typography scales and font families
Component examples
Brand voice and personality
Download link for
```
DESIGN.md
```

3. Download the DESIGN.md

Click the download button on any preview page, or fetch directly:

bash

# Example: Download Vercel's DESIGN.md
curl -O https://getdesign.md/vercel/DESIGN.md

# Example: Download Linear's DESIGN.md
curl -O https://getdesign.md/linear.app/DESIGN.md

Using DESIGN.md in Claude Design

Option A: Start from Design System

Go to
```
https://claude.ai/design/#org
```
Click Create new design system
On the Set up your design system screen, upload the
```
DESIGN.md
```
under Add assets
Claude Design automatically parses it and generates the full system

Option B: Start from Prototype

Go to Claude Design dashboard
Create a new prototype
Attach the
```
DESIGN.md
```
file in the chat
Send prompt:

Create a design system from this DESIGN.md

Claude Design will generate the complete package within minutes.

DESIGN.md Structure

DESIGN.md

file typically contains:

markdown

# Brand Name Design System

## Brand Identity
- **Voice**: [conversational, technical, playful, premium, etc.]
- **Personality**: [key adjectives]
- **Target audience**: [who this is for]

## Colors
### Primary Palette
- **Brand Primary**: `#HEX` - [usage context]
- **Brand Secondary**: `#HEX` - [usage context]
- **Accent**: `#HEX` - [usage context]

### Semantic Colors
- **Success**: `#HEX`
- **Warning**: `#HEX`
- **Error**: `#HEX`
- **Info**: `#HEX`

### Neutral Scale
- **Background**: `#HEX`
- **Surface**: `#HEX`
- **Text Primary**: `#HEX`
- **Text Secondary**: `#HEX`
- **Border**: `#HEX`

## Typography
- **Font Family**: [Primary font name] / [Fallback]
- **Display**: [weight, size, line-height]
- **Heading 1-6**: [specs for each level]
- **Body**: [regular text specs]
- **Caption**: [small text specs]

## Spacing Scale
- xs: 4px
- sm: 8px
- md: 16px
- lg: 24px
- xl: 32px
- 2xl: 48px
- 3xl: 64px

## Components
### Button
- **Primary**: [styles]
- **Secondary**: [styles]
- **Ghost**: [styles]
- **States**: hover, active, disabled

### Card
- [padding, border-radius, shadow, background]

### Input
- [height, padding, border, focus states]

## Layout
- **Container max-width**: [value]
- **Grid columns**: [number]
- **Gutter**: [value]
- **Breakpoints**: mobile, tablet, desktop

## Imagery
- **Style**: [photography, illustrations, abstract]
- **Treatment**: [filters, overlays]
- **Aspect ratios**: [common ratios used]

## Motion
- **Easing**: [transition timing functions]
- **Duration**: [animation speeds]
- **Key animations**: [hover, page transitions, etc.]

Working with Generated Output

After Claude Design processes a

DESIGN.md

, it produces:

1. README.md

Brand context, design principles, and usage guidelines:

markdown

# [Brand] Design System

## Overview
[Brand voice and positioning]

## Color Tokens
CSS variables for all colors

## Typography
Font stack and type scale

## Components
Usage patterns for each component

2. colors_and_type.css

CSS custom properties ready to use:

css

:root {
  /* Colors */
  --color-primary: #6366f1;
  --color-secondary: #8b5cf6;
  --color-background: #ffffff;
  --color-text: #111827;
  
  /* Typography */
  --font-primary: 'Inter', system-ui, sans-serif;
  --font-display: 'Cal Sans', 'Inter', sans-serif;
  --text-base: 16px;
  --text-scale: 1.25;
  
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  
  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

3. Component Files

Individual HTML/CSS for buttons, cards, inputs, etc:

html

<!-- button.html -->
<button class="btn btn--primary">
  Primary Button
</button>

<button class="btn btn--secondary">
  Secondary Button
</button>

<button class="btn btn--ghost">
  Ghost Button
</button>

css

/* button.css */
.btn {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn--primary {
  background: var(--color-primary);
  color: white;
}

.btn--primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

4. UI Kit (index.html)

A working page demonstrating the system:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Design System UI Kit</title>
  <link rel="stylesheet" href="colors_and_type.css">
  <link rel="stylesheet" href="components.css">
</head>
<body>
  <header>
    <nav class="navbar">
      <div class="container">
        <a href="#" class="logo">Brand</a>
        <div class="nav-links">
          <a href="#">Features</a>
          <a href="#">Pricing</a>
          <a href="#">Docs</a>
          <button class="btn btn--primary">Get Started</button>
        </div>
      </div>
    </nav>
  </header>
  
  <main>
    <section class="hero">
      <h1>Build faster with [Brand]</h1>
      <p>Design system description</p>
      <button class="btn btn--primary btn--lg">Start Building</button>
    </section>
  </main>
</body>
</html>

Common Patterns

Pattern 1: Customize an Existing Design System

Download a
```
DESIGN.md
```
that's close to your target
Edit the file to adjust colors, fonts, or components
Upload the modified
```
DESIGN.md
```
to Claude Design
Iterate with prompts like:

Update the primary color to #FF6B6B and regenerate the components

Pattern 2: Mix Design Systems

Combine elements from multiple

DESIGN.md

files:

Use Vercel's color palette with Linear's typography and Stripe's component style

Attach multiple

DESIGN.md

files and specify which aspects to use from each.

Pattern 3: Extract Design Tokens for Code

Use the generated CSS variables in your actual codebase:

javascript

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
        background: 'var(--color-background)',
      },
      fontFamily: {
        sans: 'var(--font-primary)',
        display: 'var(--font-display)',
      },
      spacing: {
        xs: 'var(--space-xs)',
        sm: 'var(--space-sm)',
        md: 'var(--space-md)',
        lg: 'var(--space-lg)',
      }
    }
  }
}

Pattern 4: Generate New Screens On-System

After establishing the design system, request new pages:

Create a pricing page using this design system

Design a dashboard layout with cards, charts, and a sidebar

Claude Design will generate new screens that automatically follow the established tokens and component patterns.

Design System Categories

The collection includes 68 design systems across categories:

AI & LLM Platforms

Claude, Cohere, ElevenLabs, Mistral AI, Ollama, Replicate, RunwayML, Together AI, VoltAgent, xAI

Developer Tools & IDEs

Cursor, Expo, Lovable, Raycast, Superhuman, Vercel, Warp

Backend & DevOps

ClickHouse, Composio, HashiCorp, MongoDB, PostHog, Sanity, Sentry, Supabase

Productivity & SaaS

Cal.com, Intercom, Linear, Mintlify, Notion, Resend, Zapier

Design & Creative Tools

Airtable, Clay, Figma, Framer, Miro, Webflow

Fintech & Crypto

Binance, Coinbase, Kraken, Mastercard, Revolut, Stripe, Wise

E-commerce & Retail

Airbnb, Meta, Nike, Shopify

Media & Consumer Tech

Apple, IBM, NVIDIA, Pinterest, PlayStation, SpaceX, Spotify

Troubleshooting

Issue: Claude Design doesn't recognize the DESIGN.md

Solution: Ensure the file is named exactly

DESIGN.md

(case-sensitive) and follows the standard structure. Try explicitly prompting:

Parse this DESIGN.md file and create a design system from it

Issue: Fonts not loading

Solution: Claude Design uses Google Fonts substitutes for proprietary fonts. Check the generated CSS for

@import

statements and ensure they're included in your HTML

<head>

html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

Issue: Colors look different than expected

Solution: Check if the

DESIGN.md

uses color names vs hex codes. Claude Design interprets hex more reliably:

markdown

<!-- Less reliable -->
- Primary: "Blue"

<!-- More reliable -->
- Primary: #3B82F6

Issue: Components don't match the reference site exactly

Solution:

DESIGN.md

captures design principles not pixel-perfect replicas. To get closer:

Match the button style from [brand].com more closely - use 12px padding, 500 font weight, and 0.5px letter spacing

Issue: Generated UI kit is too simple

Solution: Request more complex examples:

Create a dashboard UI kit with a sidebar, data tables, charts, and a multi-column layout

Add a blog post template with hero image, article body, and related posts section

API Reference (Claude Design Prompts)

While Claude Design doesn't have a traditional API, these prompts work reliably:

System Generation

Create a design system from this DESIGN.md

Token Extraction

Show me all color tokens as CSS custom properties

Export the typography scale as Tailwind config

Component Requests

Create a [button/card/nav/form/modal] component following this design system

Design a [hero/feature/pricing/testimonial] section

Iteration

Update the primary color to [#HEX] and regenerate affected components

Make the typography more [compact/spacious/bold/lightweight]

Add dark mode variants to all components

Export

Package this design system for Figma import

Generate a Storybook-compatible component library

Integration Examples

React Component Library

typescript

// Button.tsx
import './colors_and_type.css';

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
}

export const Button: React.FC<ButtonProps> = ({ 
  variant = 'primary',
  size = 'md',
  children 
}) => {
  return (
    <button className={`btn btn--${variant} btn--${size}`}>
      {children}
    </button>
  );
};

Vue Component

vue

<template>
  <button :class="buttonClasses">
    <slot />
  </button>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import './colors_and_type.css';

interface Props {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'md'
});

const buttonClasses = computed(() => [
  'btn',
  `btn--${props.variant}`,
  `btn--${props.size}`
]);
</script>

Svelte Component

svelte

<script lang="ts">
  import './colors_and_type.css';
  
  export let variant: 'primary' | 'secondary' | 'ghost' = 'primary';
  export let size: 'sm' | 'md' | 'lg' = 'md';
</script>

<button class="btn btn--{variant} btn--{size}">
  <slot />
</button>

Contributing Your Own DESIGN.md

To add a new design system to the collection:

Fork the repository
Create a new
```
DESIGN.md
```
following the structure above
Add a preview to
```
getdesign.md
```
(if contributing to the main collection)
Submit a pull request with:
- The
```
DESIGN.md
```
  file
- Screenshots of the generated output
- Brief description of the brand aesthetic

Resources

Main repo:

https://github.com/VoltAgent/awesome-claude-design

Claude Design:
```
https://claude.ai/design
```
DESIGN.md spec:
```
https://getdesign.md/what-is-design-md
```
Discord:
```
https://s.voltagent.dev/discord
```

Related Skills

```
claude-code
```
- AI coding agent by Anthropic
```
figma-api
```
- Programmatic Figma access
```
tailwind-css
```
- Utility-first CSS framework (pairs well with generated tokens)

awesome-claude-design

NPX Install

Tags

SKILL.md Content

Awesome Claude Design

What This Project Does

Installation & Setup

1. Browse the Collection

2. Select a Design System

3. Download the DESIGN.md

Using DESIGN.md in Claude Design

Option A: Start from Design System

Option B: Start from Prototype

DESIGN.md Structure

Working with Generated Output

1. README.md

2. colors_and_type.css

3. Component Files

4. UI Kit (index.html)

Common Patterns

Pattern 1: Customize an Existing Design System

Pattern 2: Mix Design Systems

Pattern 3: Extract Design Tokens for Code

Pattern 4: Generate New Screens On-System

Design System Categories

AI & LLM Platforms

Developer Tools & IDEs

Backend & DevOps

Productivity & SaaS

Design & Creative Tools

Fintech & Crypto

E-commerce & Retail

Media & Consumer Tech

Troubleshooting

Issue: Claude Design doesn't recognize the DESIGN.md

Issue: Fonts not loading

Issue: Colors look different than expected

Issue: Components don't match the reference site exactly

Issue: Generated UI kit is too simple

API Reference (Claude Design Prompts)

System Generation

Token Extraction

Component Requests

Iteration

Export

Integration Examples

React Component Library

Vue Component

Svelte Component

Contributing Your Own DESIGN.md

Resources

Related Skills