design-md

design-md — 74 个品牌设计系统参考

一组精心整理的 DESIGN.md 文件，提炼自知名品牌网站。每一份都以 AI 可读的形式 呈现一套真实的设计系统：带语义角色的调色板、字体层级、组件规则、布局原则，以及 深度 / 层次。把它交给一个编码 Agent，它就能生成符合该品牌外观的 UI。

源内容：voltagent/awesome-design-md（MIT）。 本技能是在该库之上的一层轻量索引 + 工作流。

何时使用本技能

• 用户要求以某个指定品牌的风格制作 UI / 落地页 / 组件 （“像 Linear 那样”“做得有 Stripe 的感觉”“给它一点 Apple 的氛围”）。
• 你需要从真实系统中挑选一个设计方向，而不是凭空创造。
• 你想要一套具体的设计 token（颜色 / 字号阶梯 / 组件规则）作为 起点，然后再交给 frontend-design / tailwind-design-system。

工作流

1. 挑选品牌 — 按氛围 + 主色浏览下方索引，选择 最贴近需求的那个。
2. 加载其 DESIGN.md — 读取 <library>/design-md/<brand>/DESIGN.md，使用 索引中的 slug（例如 linear.app、x.ai、bmw-m）。
3. 遵循它 — 将颜色角色、字号阶梯、组件和层次视为 硬性规范。如需视觉参考，打开同目录下的 preview.html / preview-dark.html。
4. *（可选）*交给 frontend-design → tailwind-design-system → shadcn → design-review，把方向转化为生产组件。

定位库（<library>）

<library> 是 awesome-design-md 仓库的本地克隆。按以下顺序解析：

1. DESIGN_MD_DIR 环境变量（如果已设置）。

2. 常见位置：~/Developer/awesome-design-md、~/dev/awesome-design-md、 ~/awesome-design-md，或当前项目中的 awesome-design-md/ 文件夹。

3. 如果都不存在，克隆一个（浅克隆即可）：

   git clone --depth 1 https://github.com/voltagent/awesome-design-md.git ~/Developer/awesome-design-md
   

品牌文件始终位于 <library>/design-md/<brand>/DESIGN.md。

下方索引（主色 + 一句话简介）本身就足以挑选一个方向。 只有在你需要完整 token 细节时，才去读完整的 DESIGN.md。

---

这 74 个品牌（主色 + 一句话简介）

AI 与大模型

• claude #cc785c — 温暖的奶油色画布、珊瑚色 CTA、衬线展示字体；在大多数 AI 品牌走冷蓝色调之处，它显得更人文。
• x.ai #ffffff — 近乎全黑的画布，仅由白色胶囊描边打破；极简、冷峻的前沿 AI。
• cohere #17171c — 企业级 AI：白色编辑式留白、深绿黑色产品区块、矿物质感表面、圆角媒体卡片。
• mistral.ai #fa520f — 标志性的日落渐变（芥末黄 / 橙色 / 深红）叠加在山景摄影之上。
• minimax #0a0a0a — 纯白营销页上的黑色胶囊 CTA，搭配鲜艳的渐变产品界面。
• together.ai #000000 — AI 基础设施：近乎全黑的主视觉区块，配三色橙-洋红渐变。
• replicate #ea2804 — 温暖的奶油色独立 ML 试验场美学，配一抹自信的亮橙色点缀。
• runwayml #000000 — 电影感胶片：暗色、编辑式，全出血视频就是 UI。
• elevenlabs #292524 — 语音 AI，读起来像一本安静的编辑式印刷杂志。
• ollama #000000 — 极简到近乎倔强；首页看起来就像一个 Markdown README。
• composio #0007cd — AI Agent 工具：暗色、技术感，仅有一种深电光蓝的电压。
• voltagent #00d992 — 面向开发者的 AI Agent 平台：一以贯之的近黑 + 一抹霓虹绿。
• lovable #f7f4ed — 在柔和奶油色画布上以克制传达温暖（AI 应用构建器）。

开发者工具与平台

• cursor #f54e00 — AI 代码编辑器，采用暖奶油色编辑画布而非常见的深色 IDE，并搭配暖橙色。
• vercel #171717 — 近白底色上的黑与墨双色搭配，在产品主视觉尺度下由多彩网格渐变引爆。
• linear.app #5e6ad2 — 全套中最深的近黑画布 + 单一薰衣草蓝点缀；软件工艺的奢华感。
• framer #ffffff — 纯黑画板，GT Walsheim 白色字体，搭配激进的负字距。
• webflow #080808 — 可视化网页构建器：深近黑与大面积白色画布形成对比。
• figma #000000 — 黑白编辑式构图，被超大手工裁切的粉彩色块打断。
• warp #f7f5f0 — Agent 化终端，置于温暖的近炭黑画布之上（比纯黑更暖的色调）。
• raycast #ffffff — 营销网站读起来像一张延展的产品截图。
• opencode.ai #201d1d — 终端原生：整个页面采用 Berkeley Mono 字体。
• expo #000000 — React Native 平台，被塑造成一个低调自信的基础设施品牌。
• sentry #150f23 — 深紫罗兰午夜画布，电光青柠点缀，略带颠覆性的插画。
• posthog #f7a501 — 俏皮的暖奶油色画布，以手绘刺猬吉祥物作为页边注。
• hashicorp #000000 — 近黑底色，搭配各产品专属点缀色（Terraform 紫、Vault 黄、Consul 粉）。
• sanity #0b0b0b — 夜间指挥中心：深色、精准、高度结构化的开发者内容平台。
• mintlify #0a0a0a — 文档基础设施：大气天空渐变营销主视觉 + 简洁白色文档，双模式。
• supabase #3ecf8e — 开源数据库：干净白 / 近黑，搭配单一标志性祖母绿 CTA。
• mongodb #00ed64 — 深青绿主视觉区带，搭配明亮的 MongoDB 绿 CTA + 纯白文档。
• clickhouse #faff69 — 高性能数据库，近纯黑底色上迸发电光黄。
• ibm #0f62fe — 忠实于 Carbon：白色表面，IBM 蓝点缀，刻意扁平直角美学。
• resend #fcfdff — 近纯黑画布，灰白文字，一个深色编辑衬线 Domaine 标题标志（开发者邮件）。
• clay #0a0a0a — 黏土动画遇上数据，面向 GTM 编排平台；鲜活而俏皮。

生产力与协作 SaaS

• notion #5645d4 — 一体化工作空间：深海军蓝主视觉区带，以品牌插画装点。
• miro #1c1c1e — AI 视觉工作空间，以金丝雀黄字标为锚点；自信，略带俏皮。
• airtable #181d26 — 沉稳的编辑式工作流软件，搭配满幅标志性卡片（珊瑚 / 深绿 / 蜜桃）。
• cal #111111 — 日历软件优先：白色画布，黑色主 CTA，定制 Cal Sans 展示字体。
• slack #4a154b — 深茄紫主色，奶油薰衣草主视觉渐变，蓝色行内链接。
• intercom #111111 — 客户服务编辑风格：柔和奶油白，Saans 字体，单一自信的 Fin 蓝。
• zapier #ff4f00 — 工作流自动化：暖奶油中性色搭配深橙点缀。
• superhuman #1b1938 — 快速邮件，在深靛蓝编辑式主视觉与紫罗兰天空氛围之间切换。

金融与加密

• stripe #533afd — 深海军蓝墨色，电光靛蓝主色，以及反复出现的大气网格渐变。
• coinbase #0052ff — 机构级交易所，被塑造成一个低调自信的金融服务品牌。
• binance #fcd535 — 深近黑画布，每个 CTA 都使用标志性的 Binance 黄。
• kraken #7132f5 — 干净、值得信赖的加密交易所，白底上使用气场强大的紫色。
• revolut #494fdf — 冷峻黑色画布，钴紫品牌色，以及宽广的饱和产品色板。
• wise #9fe870 — 全球汇款：异常厚重的近黑展示字体（900 @ 64–126px）+ 亮绿色。
• mastercard #eb001b — 由柔和石色与信号橙红构成的温暖编辑式杂志。

电商、消费与出行

• airbnb #ff385c — 温暖的市场平台：干净的白色画布 + Airbnb Rausch 珊瑚色作为唯一电压。
• shopify #000000 — 电影感的商业平台，运行两条平行的设计轨道。
• nike #111111 — 摄影优先的商业，高耸的大写 Futura 烙印在活动图像中。
• pinterest #e60023 — 摄影优先的发现：Pinterest 红 CTA、瀑布流图钉网格、柔和暖奶油色外框。
• starbucks #006241 — 温暖的零售旗舰，每个表面都穿着店面围裙绿。
• uber #000000 — 出行超级应用：黑白二重奏，由自定义几何展示字体框定。
• meta #0064e0 — 硬件商业（Quest、Ray-Ban Meta）+ 具有产品营销声音的品牌表面。

媒体与娱乐

• apple #0066cc — 摄影优先的界面，将营销变成博物馆画廊。
• spotify #1ed760 — 近乎黑色的沉浸式播放器，专辑封面就是颜色，外加 Spotify 绿。
• theverge #3cffd0 — 一本康泰纳仕杂志，接上了芯片音乐音板；霓虹色。
• wired #000000 — 旗舰科技杂志：白底上严格的黑色字标，编辑式二重奏。
• playstation #0070d1 — 黑 / 白 / PlayStation 蓝的章节像主机发布预告片一样滚动。

汽车

• tesla #3e6ae1 — 激进的减法：产品就是一切，单一的电光蓝。
• ferrari #da291c — 豪华超跑品牌，呈现为电影感编辑。
• bmw #1c69d4 — 克制、沉稳的企业汽车风格（有别于 BMW M 的浮夸）。
• bmw-m #ffffff — 赛车工程：近乎黑色的画布，自信大写的白色 BMW Type Next。
• lamborghini #ffc000 — 黑暗的大教堂：漆黑舞台，机器置于聚光灯下。
• bugatti #ffffff — 严峻的奢华：近乎纯黑，白色字距拉开的大写字母，全出血摄影。
• renault #ffed00 — 2021 扁平线条钻石标志，鲜明的黑白，标志性日光黄。

企业、硬件、电信与航空航天

• hp #024ad8 — 白皮书式的企业-消费系统，以 HP Electric Blue 作为唯一信号 CTA。
• nvidia #76b900 — 工程级：黑色主视觉 / 纸白正文双模式 + NVIDIA 绿。
• vodafone #e60000 — 电信超级品牌：编辑式摄影主视觉搭配巨大的大写展示字体。
• spacex #000000 — 任务导向的航空航天：纯黑，配全出血火箭 / 火星视频主视觉。

复古（90 年代–00 年代）

• dell-1996 #e91d2a — 目录时代的企业网页：字面意义上的黑色页面边框 + 扁平色块缎带卡片。
• nintendo-2001 #e60012 — 拉丝长春花蓝的“主机铬色”，每个面板都是一块倒角金属板。

---

挑选提示

• 温暖 / 人文：claude、cursor、warp、posthog、lovable、zapier、pinterest、starbucks、mastercard
• 暗色 / 高对比科技：linear.app、vercel、x.ai、sanity、clickhouse、spacex、resend、together.ai
• 极简 / 产品优先：tesla、apple、bugatti、raycast、ollama、uber
• 单一醒目强调色：supabase（绿色）、stripe（靛蓝）、binance（黄色）、airbnb（珊瑚色）、kraken（紫色）、spotify（绿色）
• 编辑 / 杂志：elevenlabs、wired、theverge、ferrari、mastercard、cohere
• 赛车 / 奢华黑：lamborghini、bmw-m、ferrari、bugatti

当不确定颜色时，不要凭空编造调色板——直接从所选品牌的 DESIGN.md 中复制语义化颜色角色。