VoltAgent/awesome-design-md

GitHub: VoltAgent/awesome-design-md

一个收集了58个知名网站设计系统的DESIGN.md文件库，帮助AI编码代理生成匹配特定网站风格的UI界面。

Stars: 27731 | Forks: 3419

受开发者导向网站启发的 DESIGN.md 文件精选集。

[![Awesome](https://awesome.re/badge.svg)](https://awesome.re) ![DESIGN.md Count](https://img.shields.io/badge/DESIGN.md%20count-58-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) [![Discord](https://img.shields.io/discord/1361559153780195478.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://s.voltagent.dev/discord)

# 精选 DESIGN.md 将 DESIGN.md 复制到您的项目中，告诉您的 AI 代理"构建一个看起来像这样的页面"，即可获得完美匹配像素的 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 包含什么每个文件都遵循 [Stitch DESIGN.md 格式](https://stitch.withgoogle.com/docs/design-md/format/)，包含扩展部分： | # | 部分 | 捕获内容 | |---|---------|-----------------| | 1 | 视觉主题与氛围 | 氛围、密度、设计理念 | | 2 | 色彩调色板与角色 | 语义名称 + 十六进制 + 功能角色 | | 3 | 排版规则 | 字体家族、完整层级表 | | 4 | 组件样式 | 按钮、卡片、输入框、导航及状态 | | 5 | 布局原则 | 间距系统、网格、留白理念 | | 6 | 深度与层级 | 阴影系统、表面层级 | | 7 | 注意事项 | 设计防护和反模式 | | 8 | 响应式行为 | 断点、触摸目标、折叠策略 | | 9 | 代理提示指南 | 快速色彩参考、即用型提示 | 每个网站包含： | 文件 | 用途 | |------|---------| | `DESIGN.md` | 设计系统（代理读取的内容） | | `preview.html` | 视觉目录，展示色彩样本、字体层级、按钮、卡片 | | `preview-dark.html` | 带有深色表面的相同目录 | ### 使用方法 1. 将网站的 `DESIGN.md` 复制到您的项目根目录 2. 告诉您的 AI 代理使用它。 ## 请求 DESIGN.md [使用此模板提交 GitHub issue](https://github.com/VoltAgent/awesome-design-md/issues/new?template=design-md-request.yml)，请求为某个网站生成 DESIGN.md。 ## 精选集 ### AI 与机器学习 - [**Claude**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/claude/) - Anthropic 的 AI 助手。温暖的赤陶色点缀，简洁的编辑布局 - [**Cohere**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/cohere/) - 企业级 AI 平台。充满活力的渐变风格，数据丰富的仪表盘美学 - [**ElevenLabs**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/elevenlabs/) - AI 语音平台。深色电影风格 UI，音频波形美学 - [**Minimax**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/minimax/) - AI 模型提供商。大胆的深色界面搭配霓虹点缀 - [**Mistral AI**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/mistral.ai/) - 开源 LLM 提供商。法式工程极简主义，紫色调 - [**Ollama**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/ollama/) - 本地运行 LLM。终端优先，单色简约 - [**OpenCode AI**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/opencode.ai/) - AI 编码平台。以开发者为中心的深色主题 - [**Replicate**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/replicate/) - 通过 API 运行 ML 模型。简洁的白色画布，代码优先 - [**RunwayML**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/runwayml/) - AI 视频生成。电影风格深色 UI，媒体丰富布局 - [**Together AI**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/together.ai/) - 开源 AI 基础设施。技术风格，蓝图式设计 - [**VoltAgent**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/voltagent/) - AI 代理框架。纯黑画布，翡翠绿点缀，终端原生 - [**xAI**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/x.ai/) - Elon Musk 的 AI 实验室。 stark 单色，未来主义极简主义 ### 开发者工具与平台 - [**Cursor**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/cursor/) - AI 优先代码编辑器。优雅的深色界面，渐变点缀 - [**Expo**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/expo/) - React Native 平台。深色主题，紧凑的字间距，代码中心 - [**Linear**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/linear.app/) - 工程师的项目管理。超极简、精确、紫色点缀 - [**Lovable**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/lovable/) - AI 全栈构建者。活泼的渐变，友好的开发者美学 - [**Mintlify**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/mintlify/) - 文档平台。简洁、绿色点缀、阅读优化 - [**PostHog**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/posthog/) - 产品分析。活泼的刺猬品牌，开发者友好的深色 UI - [**Raycast**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/raycast/) - 生产力启动器。优雅的深色铬合金，活泼的渐变点缀 - [**Resend**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/resend/) - 面向开发者的邮件 API。极简深色主题，等宽字体点缀 - [**Sentry**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/sentry/) - 错误监控。深色仪表盘，数据密集，粉紫色点缀 - [**Supabase**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/supabase/) - 开源 Firebase 替代品。深色翡翠主题，代码优先 - [**Superhuman**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/superhuman/) - 快速邮件客户端。高端深色 UI，键盘优先，紫色光晕 - [**Vercel**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/vercel/) - 前端部署平台。黑白精确风格，Geist 字体 - [**Warp**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/warp/) - 现代终端。类似 IDE 的深色界面，基于块的命令 UI - [**Zapier**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/zapier/) - 自动化平台。温暖的橙色，友好的插画驱动风格 ### 基础设施与云 - [**ClickHouse**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/clickhouse/) - 快速分析数据库。黄色点缀，技术文档风格 - [**Composio**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/composio/) - 工具集成平台。现代深色风格，彩色集成图标 - [**HashiCorp**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/hashicorp/) - 基础设施自动化。企业级简洁，黑白风格 - [**MongoDB**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/mongodb/) - 文档数据库。绿色叶子品牌，开发者文档重点 - [**Sanity**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/sanity/) - 无头 CMS。红色点缀，内容优先的编辑布局 - [**Stripe**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/stripe/) - 支付基础设施。标志性的紫色渐变，300 字重优雅 ### 设计与生产力 - [**Airtable**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/airtable/) - 电子表格数据库混合。多彩、友好、结构化数据美学 - [**Cal.com**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/cal/) - 开源日程安排。简洁的中性 UI，开发者导向的简约风格 - [**Clay**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/clay/) - 创意机构。有机形状，柔和渐变，艺术指导布局 - [**Figma**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/figma/) - 协作设计工具。充满活力的多色彩，活泼但专业 - [**Framer**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/framer/) - 网站构建者。大胆的黑蓝风格，动效优先，设计导向 - [**Intercom**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/intercom/) - 客户消息传递。友好的蓝色调色板，对话式 UI 模式 - [**Miro**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/miro/) - 视觉协作。明亮的黄色点缀，无限画布美学 - [**Notion**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/notion/) - 多合一工作区。温暖的极简主义，衬线标题，柔和表面 - [**Pinterest**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/pinterest/) - 视觉发现平台。红色点缀，瀑布流网格，图片优先 - [**Webflow**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/webflow/) - 可视化网页构建器。蓝色点缀精致的营销网站美学 ### 金融科技与加密货币 - [**Coinbase**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/coinbase/) - 加密货币交易所。简洁的蓝色标识，信任导向，机构级感觉 - [**Kraken**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/kraken/) - 加密货币交易平台。紫色点缀的深色 UI，数据密集仪表盘 - [**Revolut**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/revolut/) - 数字银行。优雅的深色界面，渐变卡片，金融科技精确度 - [**Wise**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/wise/) - 国际汇款。明亮的绿色点缀，友好清晰 ### 企业与消费级 - [**Airbnb**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/airbnb/) - 旅行市场。温暖的珊瑚色点缀，摄影驱动，圆角 UI - [**Apple**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/apple/) - 消费电子。优质白色空间，SF Pro，电影级 imagery - [**IBM**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/ibm/) - 企业技术。Carbon 设计系统，结构化蓝色调色板 - [**NVIDIA**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/nvidia/) - GPU 计算。绿黑能量，技术力量美学 - [**SpaceX**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/spacex/) - 太空技术。 stark 黑与白，满版图片，未来主义 - [**Spotify**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/spotify/) - 音乐流媒体。深色上的活力绿色，粗体字体，专辑封面驱动 - [**Uber**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/uber/) - 移动平台。大胆的黑白风格，紧凑字体，城市能量 ### 汽车品牌 - [**BMW**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/bmw/) - 豪华汽车。深色高端表面，精确的德国工程美学 - [**Ferrari**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/ferrari/) - 豪华汽车。黑白明暗对比编辑风格，Ferrari Red，极致简洁 - [**Lamborghini**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/lamborghini/) - 豪华汽车。真正的黑色大教堂，金色点缀，LamboType 自定义 Neo-Grotesk - [**Renault**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/renault/) - 法国汽车。鲜艳的极光渐变，NouvelR 专有字体，零半径按钮 - [**Tesla**](https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/tesla/) - 电动汽车。激进减法，电影级全屏摄影，Universal Sans ## 许可证 MIT 许可证 - 参见 [LICENSE](LICENSE) 本仓库是从公共网站提取的设计系统文档的精选集。所有 DESIGN.md 文件均按"原样"提供，不含任何保证。提取的设计令牌代表公开可见的 CSS 值。我们不声称对任何网站的视觉形象拥有所有权。这些文档旨在帮助 AI 代理生成一致的 UI。