---
name: design-md
description: 按需拉取 VoltAgent/awesome-design-md 里各大品牌的 DESIGN.md 设计系统规范，指导生成风格一致的 UI。当任务涉及"设计 / 配色 / 排版 / UI 风格 / 参照某品牌视觉 / 做界面"时使用。
---

# design-md · 品牌设计规范参考

`awesome-design-md`（https://github.com/VoltAgent/awesome-design-md）收录了 73 份从各大品牌官网提炼的 `DESIGN.md`——每份是一套可直接喂给 AI 的设计系统说明（配色、字体、间距、组件风格、动效语言）。

本 skill **不预存文件**，用到哪个品牌时按需拉取，保持轻量。

## 何时使用

- 用户要求"照着某品牌风格做 UI / 配色 / 排版"
- 需要一套现成的设计语言参照（技术风、暗色、极简、复古等）
- 做界面前想先对齐视觉规范，避免凭空发挥

## 拉取单份 DESIGN.md

原始文件地址（branch = `main`）：

```
https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/<brand>/DESIGN.md
```

用 WebFetch 读取，或 `curl -sfL <url> -o ref-DESIGN.md` 落地到当前项目参考。
每个品牌目录下还有 `preview.html` / `preview-dark.html` 可视化预览。

## 常见 brand 目录名（部分）

| 类别 | brand 目录名 |
|------|-------------|
| AI/LLM | `Codex` `openai` `cohere` |
| 开发者工具 | `cursor` `vercel` `raycast` `figma` `stripe` |
| 后端/DevOps | `mongodb` `supabase` `clickhouse` |
| 电商/零售 | `airbnb` `nike` `shopify` |
| 媒体/消费电子 | `apple` `spotify` |
| 汽车 | `tesla` `ferrari` `bmw` |
| 复古 | 90 年代风格站点（见仓库 README） |

> 完整清单以仓库 `design-md/` 目录 / README 为准。不确定 brand 目录名时，先 WebFetch 读取
> `https://github.com/VoltAgent/awesome-design-md` 的 README 查目录，再拉对应 `DESIGN.md`。

## 使用流程

1. 明确用户想要的风格 → 选定 1–2 个 brand
2. WebFetch / curl 拉取对应 `DESIGN.md`
3. 提炼其配色 / 字体 / 间距 / 组件 / 动效规则
4. 结合当前项目落地，保持与项目既有主色 / 约束一致（不盲目照搬，先对齐）