wehub/voltagent--awesome-design-md
1
0
Fork 0
Code Issues Pull Requests Actions Deployments Models Agent Notes Packages Projects Releases Wiki Activity

docs: make Chinese README the default

Browse Source
This commit is contained in:
wehub-resource-sync
2026-07-13 08:56:31 +00:00
parent 53ad9b1ffb
commit 3dc06e6344
1 changed files with 161 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+161 -168
View File
@@ -1,24 +1,27 @@
<!-- WEHUB_ZH_README -->
> [!NOTE]
> 本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。
> [English](./README.en.md) · [原始项目](https://github.com/voltagent/awesome-design-md) · [上游 README](https://github.com/voltagent/awesome-design-md/blob/HEAD/README.md)
> 原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。
<a href="https://github.com/VoltAgent/voltagent">
<img width="1500" alt="claude-skills" src="https://cdn.voltagent.dev/awesome-repo/logo.json.svg" />
</a>
<br/>
<br/>
<div align="center">
<strong>Curated collection of DESIGN.md analysis by developer focused websites.</strong>
<strong>由开发者聚焦网站提供的 DESIGN.md 分析精选集。</strong>
<br />
<br />
</div>
<div align="center">
[![Awesome](https://awesome.re/badge.svg)](https://awesome.re)
![DESIGN.md Count](https://img.shields.io/badge/DESIGN.md%20count-73-10b981?style=classic)
[![Last Update](https://img.shields.io/github/last-commit/VoltAgent/awesome-design-md?label=Last%20update&style=classic)](https://github.com/VoltAgent/awesome-design-md)
![DESIGN.md 数量](https://img.shields.io/badge/DESIGN.md%20count-73-10b981?style=classic)
[![最后更新](https://img.shields.io/github/last-commit/VoltAgent/awesome-design-md?label=Last%20update&style=classic)](https://github.com/VoltAgent/awesome-design-md)
[![Discord](https://img.shields.io/discord/1361559153780195478.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://s.voltagent.dev/discord)
</div>
@@ -26,30 +29,28 @@
# Awesome DESIGN.md
Copy a DESIGN.md into your project, tell your AI agent “build me a page that looks like this,” and generate high-quality UI that stays visually consistent with the design language.
将 DESIGN.md 复制到你的项目中，告诉你的 AI 代理"帮我构建一个看起来像这样的页面"，即可生成与设计语言保持视觉一致的高质量 UI。
Built with real design depth — including analyzed patterns, tokens, and rules — for high-quality UI generation, not surface-level outputs.
构建于真实的设计深度之上——包括经过分析的样式、代币和规则——用于生成高质量的 UI，而非表面层次的输出。
## 什么是 DESIGN.md？
## What is DESIGN.md?
[DESIGN.md](https://stitch.withgoogle.com/docs/design-md/overview/) 是 Google Stitch 引入的一个新概念。一份纯文本设计系统文档，AI 代理通过阅读它来生成一致的 UI。
[DESIGN.md](https://stitch.withgoogle.com/docs/design-md/overview/) is a new concept introduced by Google Stitch. A plain-text design system document that AI agents read to generate consistent UI.
它只是一个 markdown 文件。无需 Figma 导出、JSON 模式或特殊工具。将其放入你的项目根目录，任何 AI 编码代理或 Google Stitch 都能立即理解你的 UI 应该如何呈现。Markdown 是 LLM 读取效果最好的格式，因此无需解析或配置任何内容。
It's just a markdown file. No Figma exports, no JSON schemas, no special tooling. Drop it into your project root and any AI coding agent or Google Stitch instantly understands how your UI should look. Markdown is the format LLMs read best, so there's nothing to parse or configure.
| 文件 | 谁来读取 | 它定义什么 |
|------|---------|-----------|
| `AGENTS.md` | 编码代理 | 如何构建项目 |
| `DESIGN.md` | 设计代理 | 项目的外观和交互感受 |
| File | Who reads it | What it defines |
|------|-------------|-----------------|
| `AGENTS.md` | Coding agents | How to build the project |
| `DESIGN.md` | Design agents | How the project should look and feel |
**本仓库提供从真实网站提取的、可直接使用的 DESIGN.md 文件。**
**This repo provides ready-to-use DESIGN.md files** extracted from real websites.
## 请求 DESIGN.md
## Request a DESIGN.md
You can [request a DESIGN.md](https://getdesign.md/request) for specific website, including private requests delivered exclusively to you.
## AI Design + Build Ecosystem Tools
你可以[为特定网站请求 DESIGN.md](https://getdesign.md/request)，包括仅向你提供的私有请求。
## AI 设计与构建生态系统工具
<br/>
@@ -65,12 +66,11 @@ You can [request a DESIGN.md](https://getdesign.md/request) for specific website
<tr>
<td align="center" width="100%">
<h4>👉 Feature your product alongside the developers, designers, and vibecoders shipping UI with AI coding agents and web builders.</h4>
<h4>👉 将你的产品展示给那些使用 AI 编码代理和网页构建工具来交付 UI 的开发者、设计师和 vibecoder。</h4>
<sub>Ranked #150 globally on GitHub. A community resource used by developers, designers, and vibecoders.</sub>
<a href="https://sponsors.voltagent.dev/#awesome-design-md"><img src="https://img.shields.io/badge/📩_Become_a_Sponsor-Contact_Us-blue?style=for-the-badge&logoColor=white" alt="Become a Sponsor" /></a>
<sub>GitHub 全球排名第 150 位。一个供开发者、设计师和 vibecoder 使用的社区资源。</sub>
<a href="https://sponsors.voltagent.dev/#awesome-design-md"><img src="https://img.shields.io/badge/📩_Become_a_Sponsor-Contact_Us-blue?style=for-the-badge&logoColor=white" alt="成为赞助商" /></a>
</td>
</tr>
@@ -78,162 +78,155 @@ You can [request a DESIGN.md](https://getdesign.md/request) for specific website
</div>
## 合集
### 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 模型。简洁白色画布，代码优先
- [**Runway**](https://getdesign.md/runwayml/design-md) — AI 创意工具平台，具有编辑级电影节美学——深色电影感英雄区、纸质白色阅读带、单一专有无衬线字体，以及纯黑色药丸形 CTA 按钮。
- [**Together AI**](https://getdesign.md/together.ai/design-md) — 开源 AI 基础设施。技术感十足的蓝图风格设计
- [**VoltAgent**](https://getdesign.md/voltagent/design-md) — AI 代理框架。虚空黑画布，翠绿强调色，终端原生
- [**xAI**](https://getdesign.md/x.ai/design-md) — Elon Musk 的 AI 实验室。 stark 单色，未来主义极简风格
### 开发者工具与 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) — 生产力启动器。流畅的深色 chrome，鲜艳的渐变强调色
- [**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) — 无头内容平台，采用深色优先的编辑式营销界面——112px 展示字体、IBM Plex Mono 技术眉标，以及专为最高优先级 CTA 保留的单珊瑚红强调色。
- [**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)) — 电子商务平台。电影感的深色优先，霓虹绿点缀，超轻显示字体
- [**Starbucks**](https://getdesign.md/starbucks/design-md)) — 咖啡零售旗舰店。四层大地绿色系统，温暖的奶油色画布，专属 SoDoSans 字体
### 媒体与消费科技
- [**Apple**](https://getdesign.md/apple/design-md)) — 消费电子产品。高级白色留白，SF Pro 字体，电影感图像
- [**HP**](https://getdesign.md/hp/design-md)) — PC 和打印机制造商。纯白画布，HP 电光蓝信号色 CTA，几何 Forma DJR Micro 字体，蓝色 V 形装饰
- [**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)) — 豪华汽车。深色高级表面，精准的德国工程美学
- [**BMW M**](https://getdesign.md/bmw-m/design-md)) — 高性能汽车。赛车运动启发的高对比度，M 色彩点缀，精准驱动的布局
- [**Bugatti**](https://getdesign.md/bugatti/design-md)) — 豪华超级跑车。影院黑画布，单色极简，纪念碑式显示字体
- [**Ferrari**](https://getdesign.md/ferrari/design-md)) — 豪华汽车。明暗对照黑白编辑风格，法拉利红色极致稀疏感
- [**Lamborghini**](https://getdesign.md/lamborghini/design-md)) — 豪华汽车。纯黑大教堂，金色点缀，LamboType 定制 Neo-Grotesk 字体
- [**Renault**](https://getdesign.md/renault/design-md)) — 法国汽车。鲜艳的极光渐变，NouvelR 专有字体，零半径按钮
- [**Tesla**](https://getdesign.md/tesla/design-md)) — 电动汽车。极致的减法设计，电影感全视口摄影，Universal Sans 字体
### 复古网页 · DESIGN.md 怀旧系列
一个周六系列——从 1990 年代的网页中提取的 DESIGN.md 文件。放入一个文件，告诉你的 AI 代理构建一个符合时代风格的复古 UI。
- [**Dell (1996)**](https://getdesign.md/dell-1996/design-md)) — 目录时代的企业网页。字面意义上的黑色页面框架，扁平色块"丝带卡片"，粗壮的 Helvetica-Black 标题搭配 Times Roman 正文，以及手工裁剪的 GIF 贴纸（NEW! 爆裂标志、奖项印章、斜角产品照片）。
- [**Nintendo.com (2001)**](https://getdesign.md/nintendo-2001/design-md)) — Y2K "主机镀铬"网页。拉丝淡紫灰斜角金属面板，半调点碳纤维导航栏散发琥珀色光芒，轮廓 Arial-Black 盒装艺术标志叠加在电路板英雄区域上，以及像素风格的马里奥欢迎气泡。
## 每个 DESIGN.md 包含的内容
每个文件遵循 [Stitch DESIGN.md 格式](https://stitch.withgoogle.com/docs/design-md/specification/))，包含以下扩展章节：
| # | 章节 | 内容说明 |
|---|------|---------|
| 1 | 视觉主题与氛围 | 情绪、密度、设计理念 |
| 2 | 色彩调色板与角色 | 语义名称 + 十六进制色值 + 功能角色 |
| 3 | 字体排版规则 | 字体族、完整的层次结构表 |
| 4 | 组件样式 | 按钮、卡片、输入框、导航及其状态 |
| 5 | 布局原则 | 间距尺度、网格、留白理念 |
| 6 | 深度与层级 | 阴影系统、表面层次 |
| 7 | 应该做与不该做 | 设计护栏与反模式 |
| 8 | 响应式行为 | 断点、触摸目标、折叠策略 |
| 9 | 代理提示指南 | 快速色彩参考、即用提示 |
## Collection
每个网站包含以下文件：
### AI & LLM Platforms
| 文件 | 用途 |
|------|------|
| `DESIGN.md` | 设计系统（供代理阅读） |
| `preview.html` | 视觉目录，展示色板、字体尺度、按钮、卡片 |
| `preview-dark.html` | 同上目录，但使用深色表面 |
- [**Claude**](https://getdesign.md/claude/design-md) - Anthropic's AI assistant. Warm terracotta accent, clean editorial layout
- [**Cohere**](https://getdesign.md/cohere/design-md) - Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic
- [**ElevenLabs**](https://getdesign.md/elevenlabs/design-md) - AI voice platform. Dark cinematic UI, audio-waveform aesthetics
- [**Minimax**](https://getdesign.md/minimax/design-md) - AI model provider. Bold dark interface with neon accents
- [**Mistral AI**](https://getdesign.md/mistral.ai/design-md) - Open-weight LLM provider. French-engineered minimalism, purple-toned
- [**Ollama**](https://getdesign.md/ollama/design-md) - Run LLMs locally. Terminal-first, monochrome simplicity
- [**OpenCode AI**](https://getdesign.md/opencode.ai/design-md) - AI coding platform. Developer-centric dark theme
- [**Replicate**](https://getdesign.md/replicate/design-md) - Run ML models via API. Clean white canvas, code-forward
- [**Runway**](https://getdesign.md/runwayml/design-md) - AI creative-tools platform with an editorial film-festival aesthetic — cinematic dark heroes, paper-white reading bands, single proprietary sans, and pure black pill CTAs.
- [**Together AI**](https://getdesign.md/together.ai/design-md) - Open-source AI infrastructure. Technical, blueprint-style design
- [**VoltAgent**](https://getdesign.md/voltagent/design-md) - AI agent framework. Void-black canvas, emerald accent, terminal-native
- [**xAI**](https://getdesign.md/x.ai/design-md) - Elon Musk's AI lab. Stark monochrome, futuristic minimalism
### 使用方法
### Developer Tools & IDEs
1. 将某个网站的 `DESIGN.md` 复制到你的项目根目录
2. 告诉你的 AI 代理使用它。
- [**Cursor**](https://getdesign.md/cursor/design-md) - AI-first code editor. Sleek dark interface, gradient accents
- [**Expo**](https://getdesign.md/expo/design-md) - React Native platform. Dark theme, tight letter-spacing, code-centric
- [**Lovable**](https://getdesign.md/lovable/design-md) - AI full-stack builder. Playful gradients, friendly dev aesthetic
- [**Raycast**](https://getdesign.md/raycast/design-md) - Productivity launcher. Sleek dark chrome, vibrant gradient accents
- [**Superhuman**](https://getdesign.md/superhuman/design-md) - Fast email client. Premium dark UI, keyboard-first, purple glow
- [**Vercel**](https://getdesign.md/vercel/design-md) - Frontend deployment platform. Black and white precision, Geist font
- [**Warp**](https://getdesign.md/warp/design-md) - Modern terminal. Dark IDE-like interface, block-based command UI
## 贡献指南
### Backend, Database & DevOps
请参阅 [CONTRIBUTING.md](CONTRIBUTING.md) 了解准则。
- [**ClickHouse**](https://getdesign.md/clickhouse/design-md) - Fast analytics database. Yellow-accented, technical documentation style
- [**Composio**](https://getdesign.md/composio/design-md) - Tool integration platform. Modern dark with colorful integration icons
- [**HashiCorp**](https://getdesign.md/hashicorp/design-md) - Infrastructure automation. Enterprise-clean, black and white
- [**MongoDB**](https://getdesign.md/mongodb/design-md) - Document database. Green leaf branding, developer documentation focus
- [**PostHog**](https://getdesign.md/posthog/design-md) - Product analytics. Playful hedgehog branding, developer-friendly dark UI
- [**Sanity**](https://getdesign.md/sanity/design-md) - Headless content platform with a dark-first editorial marketing surface — 112px display type, IBM Plex Mono technical eyebrows, and a single coral-red accent reserved for the highest-priority CTA.
- [**Sentry**](https://getdesign.md/sentry/design-md) - Error monitoring. Dark dashboard, data-dense, pink-purple accent
- [**Supabase**](https://getdesign.md/supabase/design-md) - Open-source Firebase alternative. Dark emerald theme, code-first
- **改进现有文件**：修正错误的颜色、遗漏的令牌、不准确的描述
- **报告问题**：如果发现任何异常，请告知我们
### Productivity & SaaS
在提交 PR 之前，请先[创建一个 issue](https://github.com/VoltAgent/awesome-design-md/issues)) 来讨论你的想法并获取维护者的反馈。
- [**Cal.com**](https://getdesign.md/cal/design-md) - Open-source scheduling. Clean neutral UI, developer-oriented simplicity
- [**Intercom**](https://getdesign.md/intercom/design-md) - Customer messaging. Friendly blue palette, conversational UI patterns
- [**Linear**](https://getdesign.md/linear.app/design-md) - Project management for engineers. Ultra-minimal, precise, purple accent
- [**Mintlify**](https://getdesign.md/mintlify/design-md) - Documentation platform. Clean, green-accented, reading-optimized
- [**Notion**](https://getdesign.md/notion/design-md) - All-in-one workspace. Warm minimalism, serif headings, soft surfaces
- [**Resend**](https://getdesign.md/resend/design-md) - Email API for developers. Minimal dark theme, monospace accents
- [**Zapier**](https://getdesign.md/zapier/design-md) - Automation platform. Warm orange, friendly illustration-driven
## 许可证
### Design & Creative Tools
MIT 许可证 — 见 [LICENSE](LICENSE)
- [**Airtable**](https://getdesign.md/airtable/design-md) - Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic
- [**Clay**](https://getdesign.md/clay/design-md) - Creative agency. Organic shapes, soft gradients, art-directed layout
- [**Figma**](https://getdesign.md/figma/design-md) - Collaborative design tool. Vibrant multi-color, playful yet professional
- [**Framer**](https://getdesign.md/framer/design-md) - Website builder. Bold black and blue, motion-first, design-forward
- [**Miro**](https://getdesign.md/miro/design-md) - Visual collaboration. Bright yellow accent, infinite canvas aesthetic
- [**Webflow**](https://getdesign.md/webflow/design-md) - Visual web builder. Blue-accented, polished marketing site aesthetic
### Fintech & Crypto
- [**Binance**](https://getdesign.md/binance/design-md) - Crypto exchange. Bold Binance Yellow on monochrome, trading-floor urgency
- [**Coinbase**](https://getdesign.md/coinbase/design-md) - Crypto exchange. Clean blue identity, trust-focused, institutional feel
- [**Kraken**](https://getdesign.md/kraken/design-md) - Crypto trading platform. Purple-accented dark UI, data-dense dashboards
- [**Mastercard**](https://getdesign.md/mastercard/design-md) - Global payments network. Warm cream canvas, orbital pill shapes, editorial warmth
- [**Revolut**](https://getdesign.md/revolut/design-md) - Digital banking. Sleek dark interface, gradient cards, fintech precision
- [**Stripe**](https://getdesign.md/stripe/design-md) - Payment infrastructure. Signature purple gradients, weight-300 elegance
- [**Wise**](https://getdesign.md/wise/design-md) - International money transfer. Bright green accent, friendly and clear
### E-commerce & Retail
- [**Airbnb**](https://getdesign.md/airbnb/design-md) - Travel marketplace. Warm coral accent, photography-driven, rounded UI
- [**Meta**](https://getdesign.md/meta/design-md) - Tech retail store. Photography-first, binary light/dark surfaces, Meta Blue CTAs
- [**Nike**](https://getdesign.md/nike/design-md) - Athletic retail. Monochrome UI, massive uppercase Futura, full-bleed photography
- [**Shopify**](https://getdesign.md/shopify/design-md) - E-commerce platform. Dark-first cinematic, neon green accent, ultra-light display type
- [**Starbucks**](https://getdesign.md/starbucks/design-md) - Coffee retail flagship. Four-tier earth-green system, warm cream canvas, proprietary SoDoSans typography
### Media & Consumer Tech
- [**Apple**](https://getdesign.md/apple/design-md) - Consumer electronics. Premium white space, SF Pro, cinematic imagery
- [**HP**](https://getdesign.md/hp/design-md) - PC and printer maker. Pure white canvas, HP Electric Blue signal CTA, geometric Forma DJR Micro, blue chevron decorations
- [**IBM**](https://getdesign.md/ibm/design-md) - Enterprise technology. Carbon design system, structured blue palette
- [**NVIDIA**](https://getdesign.md/nvidia/design-md) - GPU computing. Green-black energy, technical power aesthetic
- [**Pinterest**](https://getdesign.md/pinterest/design-md) - Visual discovery platform. Red accent, masonry grid, image-first
- [**PlayStation**](https://getdesign.md/playstation/design-md) - Gaming console retail. Three-surface channel layout, cyan hover-scale interaction
- [**SpaceX**](https://getdesign.md/spacex/design-md) - Space technology. Stark black and white, full-bleed imagery, futuristic
- [**Spotify**](https://getdesign.md/spotify/design-md) - Music streaming. Vibrant green on dark, bold type, album-art-driven
- [**The Verge**](https://getdesign.md/theverge/design-md) - Tech editorial media. Acid-mint and ultraviolet accents, Manuka display type
- [**Uber**](https://getdesign.md/uber/design-md) - Mobility platform. Bold black and white, tight type, urban energy
- [**Vodafone**](https://getdesign.md/vodafone/design-md) - Global telecom brand. Monumental uppercase display, Vodafone Red chapter bands
- [**WIRED**](https://getdesign.md/wired/design-md) - Tech magazine. Paper-white broadsheet density, custom serif, ink-blue links
### Automotive
- [**BMW**](https://getdesign.md/bmw/design-md) - Luxury automotive. Dark premium surfaces, precise German engineering aesthetic
- [**BMW M**](https://getdesign.md/bmw-m/design-md) - Performance automotive. Motorsport-inspired contrast, M color accents, precision-driven layout
- [**Bugatti**](https://getdesign.md/bugatti/design-md) - Luxury hypercar. Cinema-black canvas, monochrome austerity, monumental display type
- [**Ferrari**](https://getdesign.md/ferrari/design-md) - Luxury automotive. Chiaroscuro black-white editorial, Ferrari Red with extreme sparseness
- [**Lamborghini**](https://getdesign.md/lamborghini/design-md) - Luxury automotive. True black cathedral, gold accent, LamboType custom Neo-Grotesk
- [**Renault**](https://getdesign.md/renault/design-md) - French automotive. Vivid aurora gradients, NouvelR proprietary typeface, zero-radius buttons
- [**Tesla**](https://getdesign.md/tesla/design-md) - Electric vehicles. Radical subtraction, cinematic full-viewport photography, Universal Sans
### Retro Web · DESIGN.md Nostalgia
A Saturday series — DESIGN.md files extracted from the web of the 1990s. Drop one in and tell your AI agent to build a period-accurate vintage UI.
- [**Dell (1996)**](https://getdesign.md/dell-1996/design-md) - Catalog-era enterprise web. Literal black page frame, flat color-block "ribbon cards", chunky Helvetica-Black titles over Times Roman body, and hand-cut GIF stickers (NEW! bursts, award seals, beveled product photos).
- [**Nintendo.com (2001)**](https://getdesign.md/nintendo-2001/design-md) - Y2K "console chrome" web. Brushed-periwinkle beveled metal panels, a halftone-dotted carbon nav glowing amber, outlined Arial-Black box-art wordmarks over circuit-board hero fields, and a pixel Mario welcome bubble.
## What's Inside Each DESIGN.md
Every file follows the [Stitch DESIGN.md format](https://stitch.withgoogle.com/docs/design-md/specification/) with extended sections:
| # | Section | What it captures |
|---|---------|-----------------|
| 1 | Visual Theme & Atmosphere | Mood, density, design philosophy |
| 2 | Color Palette & Roles | Semantic name + hex + functional role |
| 3 | Typography Rules | Font families, full hierarchy table |
| 4 | Component Stylings | Buttons, cards, inputs, navigation with states |
| 5 | Layout Principles | Spacing scale, grid, whitespace philosophy |
| 6 | Depth & Elevation | Shadow system, surface hierarchy |
| 7 | Do's and Don'ts | Design guardrails and anti-patterns |
| 8 | Responsive Behavior | Breakpoints, touch targets, collapsing strategy |
| 9 | Agent Prompt Guide | Quick color reference, ready-to-use prompts |
Each site includes:
| File | Purpose |
|------|---------|
| `DESIGN.md` | The design system (what agents read) |
| `preview.html` | Visual catalog showing color swatches, type scale, buttons, cards |
| `preview-dark.html` | Same catalog with dark surfaces |
### How to Use
1. Copy a site's `DESIGN.md` into your project root
2. Tell your AI agent to use it.
## Contributing
See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
- **Improve existing files**: Fix wrong colors, missing tokens, weak descriptions
- **Report issues**: Let us know if something looks off
Before opening a PR, please [open an issue](https://github.com/VoltAgent/awesome-design-md/issues) first to discuss your idea and get feedback from maintainers.
## License
MIT License - see [LICENSE](LICENSE)
This repository is a curated collection of design system documents extracted from public websites. All DESIGN.md files are provided "as is" without warranty. The extracted design tokens represent publicly visible CSS values. We do not claim ownership of any site's visual identity. These documents exist to help AI agents generate consistent UI.
本仓库是从公开网站提取的设计系统文档精选合集。所有 DESIGN.md 文件按"原样"提供，不提供任何担保。提取的设计令牌代表公开可见的 CSS 值。我们不声称拥有任何网站视觉标识的所有权。这些文档的存在是为了帮助 AI 代理生成一致的 UI。
USD 预算：$0/$3；$3 剩余，来自你 $3/月的套餐。预算将在下个月重置。