OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add reason-machines/design-skills --skill awesome-claude-design
Use ready-to-use DESIGN.md files to scaffold complete design systems in Claude Design with colors, typography, components, and UI kits
npx skills add reason-machines/design-skills --skill 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.
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:
index.html + CSS) applying the systemSKILL.md for reusable design patternsThis skips the blank-page design brief and gives Claude Design a concrete starting point that matches your desired aesthetic.
Visit the GitHub repository to see all 68 design systems:
Or browse online at: https://github.com/VoltAgent/awesome-claude-design
Each DESIGN.md has a preview page at https://getdesign.md/<brand>/design-md. Examples:
https://getdesign.md/claude/design-mdhttps://getdesign.md/vercel/design-mdhttps://getdesign.md/stripe/design-mdhttps://getdesign.md/linear.app/design-mdPreview pages show:
DESIGN.mdClick the download button on any preview page, or fetch directly:
https://claude.ai/design/#orgDESIGN.md under Add assetsDESIGN.md file in the chatClaude Design will generate the complete package within minutes.
A DESIGN.md file typically contains:
After Claude Design processes a DESIGN.md, it produces:
Brand context, design principles, and usage guidelines:
CSS custom properties ready to use:
Individual HTML/CSS for buttons, cards, inputs, etc:
A working page demonstrating the system:
DESIGN.md that's close to your targetDESIGN.md to Claude DesignCombine elements from multiple DESIGN.md files:
Attach multiple DESIGN.md files and specify which aspects to use from each.
Use the generated CSS variables in your actual codebase:
After establishing the design system, request new pages:
Claude Design will generate new screens that automatically follow the established tokens and component patterns.
The collection includes 68 design systems across categories:
Claude, Cohere, ElevenLabs, Mistral AI, Ollama, Replicate, RunwayML, Together AI, VoltAgent, xAI
Cursor, Expo, Lovable, Raycast, Superhuman, Vercel, Warp
ClickHouse, Composio, HashiCorp, MongoDB, PostHog, Sanity, Sentry, Supabase
Cal.com, Intercom, Linear, Mintlify, Notion, Resend, Zapier
Airtable, Clay, Figma, Framer, Miro, Webflow
Binance, Coinbase, Kraken, Mastercard, Revolut, Stripe, Wise
Airbnb, Meta, Nike, Shopify
Apple, IBM, NVIDIA, Pinterest, PlayStation, SpaceX, Spotify
Solution: Ensure the file is named exactly DESIGN.md (case-sensitive) and follows the standard structure. Try explicitly prompting:
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>:
Solution: Check if the DESIGN.md uses color names vs hex codes. Claude Design interprets hex more reliably:
Solution: DESIGN.md captures design principles not pixel-perfect replicas. To get closer:
Solution: Request more complex examples:
While Claude Design doesn't have a traditional API, these prompts work reliably:
To add a new design system to the collection:
DESIGN.md following the structure abovegetdesign.md (if contributing to the main collection)DESIGN.md filehttps://github.com/VoltAgent/awesome-claude-designhttps://claude.ai/designhttps://getdesign.md/what-is-design-mdhttps://s.voltagent.dev/discordclaude-code - AI coding agent by Anthropicfigma-api - Programmatic Figma accesstailwind-css - Utility-first CSS framework (pairs well with generated tokens)Create a design system from this DESIGN.mdCreate a design system from this DESIGN.md# 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.]# [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: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;
}<!-- 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>/* 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);
}<!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>Update the primary color to #FF6B6B and regenerate the componentsUse Vercel's color palette with Linear's typography and Stripe's component style// 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)',
}
}
}
}Create a pricing page using this design systemDesign a dashboard layout with cards, charts, and a sidebarParse this DESIGN.md file and create a design system from it<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"><!-- Less reliable -->
- Primary: "Blue"
<!-- More reliable -->
- Primary: #3B82F6Match the button style from [brand].com more closely - use 12px padding, 500 font weight, and 0.5px letter spacingCreate a dashboard UI kit with a sidebar, data tables, charts, and a multi-column layoutAdd a blog post template with hero image, article body, and related posts sectionShow me all color tokens as CSS custom propertiesExport the typography scale as Tailwind configCreate a [button/card/nav/form/modal] component following this design systemDesign a [hero/feature/pricing/testimonial] sectionUpdate the primary color to [#HEX] and regenerate affected componentsMake the typography more [compact/spacious/bold/lightweight]Add dark mode variants to all componentsPackage this design system for Figma importGenerate a Storybook-compatible component library// 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>
);
};<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><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>