wehub-resource-sync
233 lines
16 KiB
Markdown
233 lines
16 KiB
Markdown
<!-- 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>由开发者聚焦网站提供的 DESIGN.md 分析精选集。</strong>
|
||
<br />
|
||
<br />
|
||
</div>
|
||
|
||
<div align="center">
|
||
|
||
[](https://awesome.re)
|
||
|
||
[](https://github.com/VoltAgent/awesome-design-md)
|
||
[](https://s.voltagent.dev/discord)
|
||
|
||
</div>
|
||
</div>
|
||
|
||
# Awesome DESIGN.md
|
||
|
||
将 DESIGN.md 复制到你的项目中，告诉你的 AI 代理"帮我构建一个看起来像这样的页面"，即可生成与设计语言保持视觉一致的高质量 UI。
|
||
|
||
构建于真实的设计深度之上——包括经过分析的样式、代币和规则——用于生成高质量的 UI，而非表面层次的输出。
|
||
|
||
## 什么是 DESIGN.md？
|
||
|
||
[DESIGN.md](https://stitch.withgoogle.com/docs/design-md/overview/) 是 Google Stitch 引入的一个新概念。一份纯文本设计系统文档，AI 代理通过阅读它来生成一致的 UI。
|
||
|
||
它只是一个 markdown 文件。无需 Figma 导出、JSON 模式或特殊工具。将其放入你的项目根目录，任何 AI 编码代理或 Google Stitch 都能立即理解你的 UI 应该如何呈现。Markdown 是 LLM 读取效果最好的格式，因此无需解析或配置任何内容。
|
||
|
||
| 文件 | 谁来读取 | 它定义什么 |
|
||
|------|---------|-----------|
|
||
| `AGENTS.md` | 编码代理 | 如何构建项目 |
|
||
| `DESIGN.md` | 设计代理 | 项目的外观和交互感受 |
|
||
|
||
**本仓库提供从真实网站提取的、可直接使用的 DESIGN.md 文件。**
|
||
|
||
## 请求 DESIGN.md
|
||
|
||
你可以[为特定网站请求 DESIGN.md](https://getdesign.md/request)，包括仅向你提供的私有请求。
|
||
|
||
## AI 设计与构建生态系统工具
|
||
|
||
<br/>
|
||
|
||
<a href="https://launchkit.getdesign.md/">
|
||
<img src="https://cdn.voltagent.dev/awesome-repo/launchkit-banner-3.png" alt="launchkit" /><br/>
|
||
</a>
|
||
|
||
<br/>
|
||
|
||
<div align="center">
|
||
|
||
<table>
|
||
<tr>
|
||
<td align="center" width="100%">
|
||
|
||
<h4>👉 将你的产品展示给那些使用 AI 编码代理和网页构建工具来交付 UI 的开发者、设计师和 vibecoder。</h4>
|
||
|
||
<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>
|
||
</table>
|
||
|
||
</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 | 代理提示指南 | 快速色彩参考、即用提示 |
|
||
|
||
每个网站包含以下文件：
|
||
|
||
| 文件 | 用途 |
|
||
|------|------|
|
||
| `DESIGN.md` | 设计系统（供代理阅读） |
|
||
| `preview.html` | 视觉目录，展示色板、字体尺度、按钮、卡片 |
|
||
| `preview-dark.html` | 同上目录，但使用深色表面 |
|
||
|
||
### 使用方法
|
||
|
||
1. 将某个网站的 `DESIGN.md` 复制到你的项目根目录
|
||
2. 告诉你的 AI 代理使用它。
|
||
|
||
## 贡献指南
|
||
|
||
请参阅 [CONTRIBUTING.md](CONTRIBUTING.md) 了解准则。
|
||
|
||
- **改进现有文件**：修正错误的颜色、遗漏的令牌、不准确的描述
|
||
- **报告问题**：如果发现任何异常，请告知我们
|
||
|
||
在提交 PR 之前，请先[创建一个 issue](https://github.com/VoltAgent/awesome-design-md/issues)) 来讨论你的想法并获取维护者的反馈。
|
||
|
||
## 许可证
|
||
|
||
MIT 许可证 — 见 [LICENSE](LICENSE)
|
||
|
||
本仓库是从公开网站提取的设计系统文档精选合集。所有 DESIGN.md 文件按"原样"提供，不提供任何担保。提取的设计令牌代表公开可见的 CSS 值。我们不声称拥有任何网站视觉标识的所有权。这些文档的存在是为了帮助 AI 代理生成一致的 UI。
|
||
USD 预算：$0/$3；$3 剩余，来自你 $3/月的套餐。预算将在下个月重置。
|