VoltAgent/awesome-claude-design
GitHub: VoltAgent/awesome-claude-design
一个收录了 68 个开箱即用 DESIGN.md 设计系统模板的集合，配合 Claude Design 可一键生成完整的 UI 设计包。
Stars: 2707 | Forks: 293
一系列开箱即用的 DESIGN.md 文件集合，Claude Design 可一键将其扩展为完整的 UI 脚手架。
# Awesome Claude 设计
将任何 `DESIGN.md` 上传至 Claude Design，它会一键为你构建一套完整的设计系统（包含颜色、字体排版、组件、预览卡片以及可用的 UI kit）。
告别从零开始的设计需求文档，挑选一个与你期望风格相符的设计系统灵感，剩下的搭建工作就交给 Claude Design 吧。
## 什么是 Claude Design？
[Claude Design](https://claude.ai/design) 是 Anthropic 推出的全新专注于设计的工作区。它不再是在聊天窗口中生成一次性的界面，而是为你的项目维护一个持久的**设计系统**：包含 token、组件和预览资源，这些都是你真正可以直接投入生产使用的，而不仅仅是聊天窗口里的色板。
你只需提供一个起点（一种美学风格、一种氛围或一个 `DESIGN.md`），它就会为你搭建整套系统：颜色 token、字体比例、按钮、卡片、导航以及可用的 UI kit。生成的内容会出现在项目的“设计系统审查”标签页中，组织有序且支持检查，确保你后续请求的每一个新界面都能严格遵循该系统。
## 什么是 DESIGN.md？
[`DESIGN.md`](https://getdesign.md/what-is-design-md) 是一个纯文本 Markdown 文件，它以一种 AI agent 能够直接执行的格式描述了品牌的视觉语言。该概念最早由 Google Stitch 提出，并由 🎨[**getdesign.md**](https://getdesign.md/) 整理成了一个真实且具有参考价值的集合。
| 文件 | 阅读对象 | 定义内容 |
|------|-------------|-----------------|
| `AGENTS.md` | 编码 agent | 如何构建项目 |
| `DESIGN.md` | 设计 agent（Claude Design, Stitch 等） | 项目的外观与风格 |
Claude Design 可以将 `DESIGN.md` 作为其事实来源。只需提交一份文件，另一端便会自动生成完整的初始包。
## 工作原理
1. 从下方列表中选择一个设计系统灵感，点击进入其预览页面仔细查看系统细节，然后下载对应的 `DESIGN.md`。
2. 打开 [Claude Design](https://claude.ai/design)。你有**两种方式**将其输入给系统：
### 选项 A. 从设计系统开始
前往 [claude.ai/design/#org](https://claude.ai/design/#org)，点击 **Create new design system**（创建新设计系统），在 *Set up your design system*（设置你的设计系统）界面的 **Add assets**（添加资产）下上传 `DESIGN.md`。
### 选项 B. 从原型开始
前往控制台，创建一个新原型，在聊天中附加 `DESIGN.md` 文件，并输入：**"Create a design system from this DESIGN.md"**（根据此 DESIGN.md 创建一个设计系统）
无论选择哪种方式，Claude 都能在几分钟内生成完整的初始包：
- 包含品牌背景、基调和视觉基础的 `README.md`
- 包含 CSS 变量、字体比例、实用工具类的 `colors_and_type.css`
- 当品牌字体为专有时，提供 Google Fonts 替代字体
- 用于展示颜色、字体排版、间距、组件和品牌的 `preview/` 卡片
- 将系统应用到实际营销页面的可用 UI kit（`index.html` + 组件）
- `SKILL.md`，用于未来项目的可移植技能文件
一个 Markdown 文件 → 生产就绪的设计包。无需样板代码，无需手动设置。
## 合集
### AI 与 LLM 平台
- [**Claude**](https://getdesign.md/claude/design-md) - Anthropic 的 AI 助手。温暖的陶土色点缀，简洁的编辑布局
- [**Cohere**](https://getdesign.md/cohere/design-md) - 企业级 AI 平台。充满活力的渐变，数据丰富的仪表盘美学
- [**ElevenLabs**](https://getdesign.md/elevenlabs/design-md) - AI 语音平台。深色电影感 UI，声波美学
- [**Minimax**](https://getdesign.md/minimax/design-md) - AI 模型提供商。大胆的深色界面，配以霓虹色调
- [**Mistral AI**](https://getdesign.md/mistral.ai/design-md) - 开源权重 LLM 提供商。法式极简主义，紫色调
- [**Ollama**](https://getdesign.md/ollama/design-md) - 本地运行 LLM。终端优先，单色简约
- [**OpenCode AI**](https://getdesign.md/opencode.ai/design-md) - AI 编码平台。以开发者为中心的深色主题
- [**Replicate**](https://getdesign.md/replicate/design-md) - 通过 API 运行 ML 模型。干净的白色画布，代码优先
- [**RunwayML**](https://getdesign.md/runwayml/design-md) - AI 视频生成。电影级深色 UI，富媒体布局
- [**Together AI**](https://getdesign.md/together.ai/design-md) - 开源 AI 基础设施。技术感，蓝图风格设计
- [**VoltAgent**](https://getdesign.md/voltagent/design-md) - AI agent 框架。虚空黑画布，翡翠色点缀，原生终端风格
- [**xAI**](https://getdesign.md/x.ai/design-md) - 埃隆·马斯克的 AI 实验室。鲜明的单色，未来极简主义
### 开发者工具与 IDE
- [**Cursor**](https://getdesign.md/cursor/design-md) - AI 优先的代码编辑器。流畅的深色界面，渐变点缀
- [**Expo**](https://getdesign.md/expo/design-md) - React Native 平台。深色主题，紧凑的字间距，以代码为中心
- [**Lovable**](https://getdesign.md/lovable/design-md) - AI 全栈构建工具。俏皮的渐变，友好的开发者美学
- [**Raycast**](https://getdesign.md/raycast/design-md) - 生产力启动器。流畅的深色外观，充满活力的渐变点缀
- [**Superhuman**](https://getdesign.md/superhuman/design-md) - 高速邮件客户端。高级深色 UI，键盘优先，紫色光晕
- [**Vercel**](https://getdesign.md/vercel/design-md) - 前端部署平台。黑白精准美学，Geist 字体
- [**Warp**](https://getdesign.md/warp/design-md) - 现代终端。类似深色 IDE 的界面，基于块的命令 UI
### 后端、数据库与 DevOps
- [**ClickHouse**](https://getdesign.md/clickhouse/design-md) - 快速分析数据库。黄色点缀，技术文档风格
- [**Composio**](https://getdesign.md/composio/design-md) - 工具集成平台。现代深色风格，彩色集成图标
- [**HashiCorp**](https://getdesign.md/hashicorp/design-md) - 基础设施自动化。企业级整洁感，黑白配色
- [**MongoDB**](https://getdesign.md/mongodb/design-md) - 文档数据库。绿叶品牌，专注于开发者文档
- [**PostHog**](https://getdesign.md/posthog/design-md) - 产品分析。俏皮的刺猬品牌，开发者友好的深色 UI
- [**Sanity**](https://getdesign.md/sanity/design-md) - Headless CMS。红色点缀，内容优先的编辑布局
- [**Sentry**](https://getdesign.md/sentry/design-md) - 错误监控。深色仪表盘，数据密集，粉紫色调
- [**Supabase**](https://getdesign.md/supabase/design-md) - 开源 Firebase 替代方案。深色翡翠主题，代码优先
### 生产力与 SaaS
- [**Cal.com**](https://getdesign.md/cal/design-md) - 开源日程安排。干净的色调 UI，面向开发者的简约
- [**Intercom**](https://getdesign.md/intercom/design-md) - 客户消息传递。友好的蓝色调，对话式 UI 模式
- [**Linear**](https://getdesign.md/linear.app/design-md) - 面向工程师的项目管理。极致简约，精准，紫色调
- [**Mintlify**](https://getdesign.md/mintlify/design-md) - 文档平台。干净，绿色点缀，阅读体验优化
- [**Notion**](https://getdesign.md/notion/design-md) - 多合一工作区。暖色极简主义，衬线标题，柔和表面
- [**Resend**](https://getdesign.md/resend/design-md) - 面向开发者的邮件 API。极简深色主题，等宽字体点缀
- [**Zapier**](https://getdesign.md/zapier/design-md) - 自动化平台。暖橙色，友好的插图驱动
### 设计与创意工具
- [**Airtable**](https://getdesign.md/airtable/design-md) - 电子表格-数据库混合体。色彩丰富，友好，结构化数据美学
- [**Clay**](https://getdesign.md/clay/design-md) - 创意机构。有机形状，柔和渐变，艺术指导布局
- [**Figma**](https://getdesign.md/figma/design-md) - 协作设计工具。充满活力的多色彩，俏皮又不失专业
- [**Framer**](https://getdesign.md/framer/design-md) - 网站构建器。大胆的黑蓝配色，动态优先，设计前卫
- [**Miro**](https://getdesign.md/miro/design-md) - 可视化协作。明亮的黄色点缀，无限画布美学
- [**Webflow**](https://getdesign.md/webflow/design-md) - 可视化网页构建器。蓝色点缀，精致的营销网站美学
### 金融科技与加密货币
- [**Binance**](https://getdesign.md/binance/design-md) - 加密货币交易所。单色配大胆的币安黄，交易大厅的紧迫感
- [**Coinbase**](https://getdesign.md/coinbase/design-md) - 加密货币交易所。干净的蓝色标识，注重信任，机构感
- [**Kraken**](https://getdesign.md/kraken/design-md) - 加密货币交易平台。紫色点缀的深色 UI，数据密集的仪表盘
- [**Mastercard**](https://getdesign.md/mastercard/design-md) - 全球支付网络。温暖的奶油色画布，轨道药丸形状，编辑般的温暖感
- [**Revolut**](https://getdesign.md/revolut/design-md) - 数字银行。流畅的深色界面，渐变卡片，金融科技精准度
- [**Stripe**](https://getdesign.md/stripe/design-md) - 支付基础设施。标志性的紫色渐变，字重为 300 的优雅感
- [**Wise**](https://getdesign.md/wise/design-md) - 国际汇款。明亮的绿色点缀，友好且清晰
### 电商与零售
- [**Airbnb**](https://getdesign.md/airbnb/design-md) - 旅游市场。温暖的珊瑚色点缀，摄影驱动，圆润的 UI
- [**Meta**](https://getdesign.md/meta/design-md) - 科技零售店。摄影优先，二元明暗表面，Meta 蓝色 CTA
- [**Nike**](https://getdesign.md/nike/design-md) - 运动零售。单色 UI，巨大的大写 Futura 字体，全出血摄影
- [**Shopify**](https://getdesign.md/shopify/design-md) - 电商平台。深色优先的电影感，霓虹绿色点缀，超细的展示字体
### 媒体与消费科技
- [**Apple**](https://getdesign.md/apple/design-md) - 消费电子。高级留白，SF Pro 字体，电影级图像
- [**IBM**](https://getdesign.md/ibm/design-md) - 企业技术。Carbon 设计系统，结构化的蓝色调
- [**NVIDIA**](https://getdesign.md/nvidia/design-md) - GPU 计算。绿黑能量感，技术力量美学
- [**Pinterest**](https://getdesign.md/pinterest/design-md) - 视觉发现平台。红色点缀，瀑布流网格，图像优先
- [**PlayStation**](https://getdesign.md/playstation/design-md) - 游戏主机零售。三面通道布局，青色悬停缩放交互
- [**SpaceX**](https://getdesign.md/spacex/design-md) - 航天科技。鲜明的黑白，全出血图像，未来感
- [**Spotify**](https://getdesign.md/spotify/design-md) - 音乐流媒体。深色背景上的鲜艳绿色，粗体字，专辑封面驱动
- [**The Verge**](https://getdesign.md/theverge/design-md) - 科技编辑媒体。薄荷绿和紫外线点缀，Manuka 展示字体
- [**Uber**](https://getdesign.md/uber/design-md) - 出行平台。大胆的黑白色，紧凑排版，都市活力
- [**Vodafone**](https://getdesign.md/vodafone/design-md) - 全球电信品牌。宏伟的大写展示字体，Vodafone 红色篇章条带
- [**WIRED**](https://getdesign.md/wired/design-md) - 科技杂志。白纸大幅面密度，定制衬线字体，墨蓝色链接
### 汽车
- [**BMW**](https://getdesign.md/bmw/design-md) - 豪华汽车。深色高级表面，精准的德国工程美学
- [**Bugatti**](https://getdesign.md/bugatti/design-md) - 豪华超级跑车。影院级黑色画布，单色极简，宏伟的展示字体
- [**Ferrari**](https://getdesign.md/ferrari/design-md) - 豪华汽车。明暗对比的黑白云教编辑风，法利红与极致稀疏
- [**Lamborghini**](https://getdesign.md/lamborghini/design-md) - 豪华汽车。纯黑教堂般质感，金色点缀，LamboType 定制新怪诞体
- [**Renault**](https://getdesign.md/renault/design-md) - 法国汽车。生动的极光渐变，NouvelR 专有字体，零圆角按钮
- [**Tesla**](https://getdesign.md/tesla/design-md) - 电动汽车。激进的减法设计，电影级全视口摄影，Universal Sans 字体
## Claude 根据 DESIGN.md 生成的内容
每个文件都为 Claude 提供了足够的结构化上下文，以生成一套完整、有主见的系统，而不是随意的颜色抓取。每个 `DESIGN.md` 都遵循以下 9 个部分：
| # | 部分 | Claude 读取用途 |
|---|---------|--------------------------|
| 1 | 视觉主题与氛围 | 设定脚手架的基调、密度和情绪 |
| 2 | 颜色面板与角色 | 生成带有语义名称和十六进制值的 CSS 变量 |
| 3 | 字体排版规则 | 构建字体比例并选择 Google Fonts 替代字体 |
| 4 | 组件样式 | 生成带有各种状态的按钮、输入框、卡片、导航 |
| 5 | 布局原则 | 间距比例、网格、留白节奏 |
| 6 | 深度与层级 | 阴影 token 和表面层级 |
| 7 | 推荐与禁忌 | Claude 在生成新界面时遵守的防护栏 |
| 8 | 响应式行为 | 断点、触摸目标、折叠行为 |
| 9 | Agent 提示词指南 | Claude 嵌入到生成的 `SKILL.md` 中的可重用提示词 |
## 获得更好输出的技巧
- **在全新的项目中开始。** Claude Design 会将系统锚定在最初搭建它的项目中。在项目中途混合品牌会混淆 token。
- **不断要求生成界面。** 系统搭建完成后，像*“现在构建一个定价页面”*或*“添加一个空状态”*这样的提示词会自动保持符合品牌调性。
- **请求变体。** 要求提供亮色/深色、紧凑/舒适或营销/应用变体。Claude 可以从基础 token 中干净地衍生出来。
- **导出 `SKILL.md`。** 将其保存到你自己的技能文件夹中，你就可以在任何未来的 Claude 项目中重新召唤相同的美学风格，无需重新上传。
## 许可证与免责声明
本仓库本身基于 MIT 许可证发布，详见 [LICENSE](LICENSE)。
本仓库链接的 `DESIGN.md` 文件是**从参考网站上公开可见的设计模式中汲取灵感的精选起点**。它们不是官方设计系统，也未与所命名的公司有附属、认可或赞助关系。所有商标、品牌名称、徽标和专有字体均归其各自所有者所有，本仓库不对任何品牌的视觉识别系统主张所有权。
这些文档仅用于教育和开发目的——为 Claude Design 等 AI agent 提供足够的结构化上下文以生成一致的 UI。用户有责任确保其自身的后续使用符合原始公司的商标、版权和品牌使用政策。如有疑问，请将 `DESIGN.md` 作为原创系统的灵感来源，而不是 1:1 的克隆。