awesome-claude-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Awesome Claude Design

实用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.

由ara.so开发的Skill——设计技能合集。

本Skill可帮助你使用

awesome-claude-design

合集：68个现成的

DESIGN.md

文件，Claude Design可将其一键扩展为包含设计令牌、组件和可用UI套件的完整UI框架。

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.

awesome-claude-design

是一个精心整理的

DESIGN.md

文件合集，提取自真实品牌（Claude、Vercel、Stripe、Linear等）。每个文件以Markdown格式描述完整的视觉设计系统，可供AI设计Agent解析并执行。

当你将

DESIGN.md

上传至Claude Design时，它会自动生成：

设计令牌（色彩、排版、间距），以CSS变量形式呈现
组件库（按钮、卡片、导航、表单）
预览卡片，展示设计系统效果
可用UI套件（
```
index.html
```
+ CSS），应用该设计系统
SKILL.md
，用于可复用的设计模式

这省去了从零开始撰写设计 brief 的步骤，为Claude Design提供了符合你所需美学风格的具体起点。

Installation & Setup

安装与设置

1. Browse the Collection

1. 浏览合集

Visit the GitHub repository to see all 68 design systems:

bash

undefined

访问GitHub仓库查看全部68个设计系统：

bash

undefined

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`

git clone https://github.com/VoltAgent/awesome-claude-design.git cd awesome-claude-design


或在线浏览：`https://github.com/VoltAgent/awesome-claude-design`

2. Select a Design System

2. 选择设计系统

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
```

每个

DESIGN.md

都有对应的预览页面，地址为

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

。示例：

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

预览页面包含：

带十六进制代码的调色板
排版比例和字体族
组件示例
品牌调性与个性
```
DESIGN.md
```
下载链接

3. Download the DESIGN.md

3. 下载DESIGN.md

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

bash

undefined

点击任意预览页面的下载按钮，或直接通过命令获取：

bash

undefined

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

undefined

curl -O https://getdesign.md/linear.app/DESIGN.md

undefined

Using DESIGN.md in Claude Design

在Claude Design中使用DESIGN.md

Option A: Start from Design System

选项A：从设计系统开始

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

访问
```
https://claude.ai/design/#org
```
点击创建新设计系统
在「设置你的设计系统」页面，于「添加资源」下上传
```
DESIGN.md
```
Claude Design会自动解析并生成完整系统

Option B: Start from Prototype

选项B：从原型开始

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.

进入Claude Design控制台
创建新原型
在聊天中附加
```
DESIGN.md
```
文件
发送提示词：

Create a design system from this DESIGN.md

Claude Design会在几分钟内生成完整的设计包。

DESIGN.md Structure

DESIGN.md结构

DESIGN.md

file typically contains:

markdown

undefined

DESIGN.md

文件通常包含以下内容：

markdown

undefined

Brand Name Design System

Brand Identity

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

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]

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

Semantic Colors

Success:
```
#HEX
```
Warning:
```
#HEX
```
Error:
```
#HEX
```
Info:
```
#HEX
```

Success:
```
#HEX
```
Warning:
```
#HEX
```
Error:
```
#HEX
```
Info:
```
#HEX
```

Neutral Scale

Background:
```
#HEX
```
Surface:
```
#HEX
```
Text Primary:
```
#HEX
```
Text Secondary:
```
#HEX
```
Border:
```
#HEX
```

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]

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

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

Primary: [styles]
Secondary: [styles]
Ghost: [styles]
States: hover, active, disabled

Card

[padding, border-radius, shadow, background]

[padding, border-radius, shadow, background]

Input

[height, padding, border, focus states]

[height, padding, border, focus states]

Layout

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

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]

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.]

undefined

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

undefined

Working with Generated Output

处理生成的输出内容

After Claude Design processes a

DESIGN.md

, it produces:

Claude Design处理

DESIGN.md

后，会生成以下内容：

1. README.md

Brand context, design principles, and usage guidelines:

markdown

undefined

包含品牌背景、设计原则和使用指南：

markdown

undefined

[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

undefined

Usage patterns for each component

undefined

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;
}

可直接使用的CSS自定义属性：

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

3. 组件文件

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);
}

按钮、卡片、输入框等组件的独立HTML/CSS代码：

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)

4. UI套件（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>

展示设计系统效果的可用页面：

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

模式1：自定义现有设计系统

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

下载一个与目标风格接近的
```
DESIGN.md
```
编辑文件调整色彩、字体或组件
将修改后的
```
DESIGN.md
```
上传至Claude Design
使用如下提示词迭代优化：

Update the primary color to #FF6B6B and regenerate the components

Pattern 2: Mix Design Systems

模式2：混合多个设计系统

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.

结合多个

DESIGN.md

文件的元素：

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

附加多个

DESIGN.md

文件，并指定从每个文件中使用哪些元素。

Pattern 3: Extract Design Tokens for Code

模式3：提取设计令牌用于代码开发

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)',
      }
    }
  }
}

在实际代码库中使用生成的CSS变量：

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

模式4：基于现有系统生成新页面

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.

建立设计系统后，请求生成新页面：

Create a pricing page using this design system

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

Claude Design会自动遵循已建立的令牌和组件模式，生成符合风格的新页面。

Design System Categories

设计系统分类

The collection includes 68 design systems across categories:

合集中包含68个设计系统，涵盖以下类别：

AI & LLM Platforms

AI与大语言模型平台

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

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

Developer Tools & IDEs

开发者工具与IDE

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

Cursor、Expo、Lovable、Raycast、Superhuman、Vercel、Warp

Backend & DevOps

后端与DevOps

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

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

Productivity & SaaS

生产力与SaaS

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

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

Design & Creative Tools

设计与创意工具

Airtable, Clay, Figma, Framer, Miro, Webflow

Airtable、Clay、Figma、Framer、Miro、Webflow

Fintech & Crypto

金融科技与加密货币

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

Binance、Coinbase、Kraken、Mastercard、Revolut、Stripe、Wise

E-commerce & Retail

电商与零售

Airbnb, Meta, Nike, Shopify

Airbnb、Meta、Nike、Shopify

Media & Consumer Tech

媒体与消费科技

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

Apple、IBM、NVIDIA、Pinterest、PlayStation、SpaceX、Spotify

Troubleshooting

故障排除

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

问题：Claude Design无法识别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

解决方案：确保文件名严格为

DESIGN.md

（区分大小写）且遵循标准结构。尝试使用明确的提示词：

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">

解决方案：Claude Design使用Google Fonts替代专有字体。检查生成的CSS中的

@import

语句，并确保它们已包含在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

解决方案：检查

DESIGN.md

是使用颜色名称还是十六进制代码。Claude Design对十六进制代码的解析更可靠：

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

解决方案：

DESIGN.md

记录的是设计原则而非像素级复刻。如需更接近参考效果，可使用：

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

问题：生成的UI套件过于简单

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

解决方案：请求更复杂的示例：

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)

API参考（Claude Design提示词）

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

虽然Claude Design没有传统意义上的API，但以下提示词可稳定生效：

System Generation

系统生成

Create a design system from this DESIGN.md

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

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

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

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

Package this design system for Figma import

Generate a Storybook-compatible component library

Integration Examples

集成示例

React Component Library

React组件库

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>
  );
};

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组件

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>

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组件

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>

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

贡献你自己的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

如需将新设计系统添加到合集中：

Fork仓库
按照上述结构创建新的
```
DESIGN.md
```
为
```
getdesign.md
```
添加预览（如果是向主合集贡献）
提交拉取请求，包含：
- ```
DESIGN.md
```
  文件
- 生成输出的截图
- 品牌美学风格的简要描述

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
```

主仓库:

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

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