Skip to content
Back to skills

Design Reference

ASecurity

基于 [awesome-design-md](https://github.com/VoltAgent/awesome-design-md) 的 58 个顶级品牌设计系统参考。

  • 279 stars
  • 0 votes
  • 0 copies
  • 2 views
  • Added September 8, 2026
ai-agentsgobashreactgitapi

Works with

  • cursor
  • cli
  • api

Security analysis

A100/100

Pro scans all 2 files and shows the line behind each finding

Scanned September 8, 2026

npx -y skills add infometa/workbuddyskills --skill design-reference --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Design Reference?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Design Reference
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/infometa-design-reference/badge)](https://www.skillsdirectory.com/skills/infometa-design-reference)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
title: "Design Reference Library"
summary: "58 top brand DESIGN.md references from awesome-design-md for generating structured design system documents"
read_when:
  - User asks to generate a DESIGN.md
  - User mentions a specific brand style
  - User wants brand style comparison or mixing
  - User asks to see available brand references
---

# Design Reference Library — 品牌设计系统参考库

基于 [awesome-design-md](https://github.com/VoltAgent/awesome-design-md) 的 58 个顶级品牌设计系统参考。

## 使用方式

当需要参考某个品牌的设计系统时,使用以下方式获取:

### 方式 1:在线获取(推荐,获取最新版本)

```bash
# 获取单个品牌的 DESIGN.md
curl -sL "https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/{brand}.md"

# 示例:获取 Stripe 的设计系统
curl -sL "https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/stripe.md"
```

### 方式 2:使用 npx CLI

```bash
npx getdesign@latest add <brand>
```

### 方式 3:读取本地缓存

如果已下载到 `references/` 目录:
```
skills/design-reference/references/{brand}.md
```

## 品牌索引

### AI & 大模型(11 个)

| 品牌 | 文件名 | 风格关键词 |
|------|--------|-----------|
| Claude | claude.md | 温暖、人文、橙色调、极简 |
| Cohere | cohere.md | 科技、紫色调、现代 |
| MiniMax | minimax.md | 科技感、深色主题 |
| Mistral AI | mistral.ai.md | 蓝橙渐变、法式简约 |
| Ollama | ollama.md | 友好、绿色调、开源气质 |
| OpenCode.ai | opencode.ai.md | 开发者友好、暗色主题 |
| Replicate | replicate.md | 极简、开发者向 |
| Runway ML | runwayml.md | 创意、深色、视觉冲击 |
| Together AI | together.ai.md | 协作、紫蓝渐变 |
| xAI | x.ai.md | 极简主义、黑白为主 |
| ElevenLabs | elevenlabs.md | 音频科技、深色、紫色 |

### 开发者工具 & IDE(16 个)

| 品牌 | 文件名 | 风格关键词 |
|------|--------|-----------|
| Cursor | cursor.md | IDE 风格、深色主题、代码友好 |
| Expo | expo.md | React Native、蓝色调、移动优先 |
| Figma | figma.md | 协作设计、多彩渐变、现代 |
| Framer | framer.md | 动感、黑白为主、交互感 |
| HashiCorp | hashicorp.md | 基础设施、黑白+彩色点缀 |
| Linear | linear.app.md | 极简、紫色调、快速 |
| Lovable | lovable.md | 友好、渐变、创新 |
| Mintlify | mintlify.md | 文档工具、绿色调、清爽 |
| Raycast | raycast.md | 效率工具、深色、渐变 |
| Sentry | sentry.md | 错误追踪、紫粉色调 |
| Supabase | supabase.md | 绿色、开发者友好、现代 |
| Vercel | vercel.md | 极简主义、黑白、三角形 |
| Warp | warp.md | 终端工具、深色、渐变 |
| Webflow | webflow.md | 设计工具、蓝色调、专业 |
| Composio | composio.md | AI 集成、现代 |
| VoltAgent | voltagent.md | Agent 框架、科技 |

### 生产力 & SaaS(10 个)

| 品牌 | 文件名 | 风格关键词 |
|------|--------|-----------|
| Airtable | airtable.md | 多彩、友好、数据表格 |
| Intercom | intercom.md | 对话式、蓝色调、亲和 |
| Miro | miro.md | 协作白板、黄色调、活力 |
| Cal.com | cal.md | 日历工具、简约、深色可选 |
| PostHog | posthog.md | 分析工具、黄蓝配色、开源 |
| Resend | resend.md | 邮件工具、极简、黑白 |
| Sanity | sanity.md | CMS、红色调、结构化 |
| SEMrush | semrush.md | SEO 工具、橙色调、数据密集 |
| Zapier | zapier.md | 自动化、橙色调、连接感 |
| Superhuman | superhuman.md | 高端、深色、紫色调、极速 |

### 科技巨头(3 个)

| 品牌 | 文件名 | 风格关键词 |
|------|--------|-----------|
| Apple | apple.md | 极致简约、留白大师、SF Pro |
| IBM | ibm.md | 企业级、蓝色、Carbon Design |
| NVIDIA | nvidia.md | 高性能、绿色、科技感强 |

### 汽车品牌(5 个)

| 品牌 | 文件名 | 风格关键词 |
|------|--------|-----------|
| BMW | bmw.md | 豪华、蓝白、精密 |
| Ferrari | ferrari.md | 红色激情、赛车感、奢华 |
| Lamborghini | lamborghini.md | 金色、锐利、超跑 |
| Renault | renault.md | 法式、黄色调、现代 |
| Tesla | tesla.md | 未来感、极简、深色、科技 |

### 金融科技 & 加密(5 个)

| 品牌 | 文件名 | 风格关键词 |
|------|--------|-----------|
| Coinbase | coinbase.md | 蓝色、信任感、加密 |
| Kraken | kraken.md | 紫色、加密交易、专业 |
| Revolut | revolut.md | 黑色、金融科技、现代 |
| Wise | wise.md | 绿色、透明、国际汇款 |
| Stripe | stripe.md | 渐变、高品质、支付 |

### 消费互联网(4 个)

| 品牌 | 文件名 | 风格关键词 |
|------|--------|-----------|
| Airbnb | airbnb.md | 珊瑚红、温暖、旅行 |
| Pinterest | pinterest.md | 红色、瀑布流、灵感 |
| Spotify | spotify.md | 绿色、音乐、活力暗色 |
| Uber | uber.md | 黑色、极简、出行 |

### 其他(4 个)

| 品牌 | 文件名 | 风格关键词 |
|------|--------|-----------|
| Clay | clay.md | 3D 设计工具、创意 |
| ClickHouse | clickhouse.md | 数据库、黄色调 |
| MongoDB | mongodb.md | 数据库、绿色、开发者 |
| SpaceX | spacex.md | 太空、深色、未来感、极简 |

## 风格推荐指南

根据项目类型推荐品牌参考:

| 项目类型 | 推荐参考品牌 |
|---------|-------------|
| SaaS 仪表板 | Linear, Vercel, PostHog |
| AI 产品 | Claude, Mistral AI, Runway ML |
| 金融/支付 | Stripe, Revolut, Wise |
| 开发者工具 | Cursor, Supabase, Raycast |
| 电商平台 | Airbnb, Stripe, Shopify |
| 企业软件 | IBM, Apple, Intercom |
| 创意工具 | Figma, Framer, Webflow |
| 汽车/硬件 | Tesla, BMW, SpaceX |
| 社交/内容 | Spotify, Pinterest, Uber |
| 文档/知识库 | Mintlify, Sanity, Notion |

Files in this skill

  • SKILL.md5.8 KB
  • references/README.md1.1 KB

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…