Awesome DESIGN.md

将 DESIGN.md 复制到你的项目中，告诉 AI 代理"按照这个设计构建页面"，即可获得像素级精确、真正匹配设计风格的 UI。

什么是 DESIGN.md？

DESIGN.md 是 Google Stitch 引入的新概念。一种纯文本设计系统文档，AI 代理可以读取它来生成一致的 UI。

它就是一个 Markdown 文件。不需要 Figma 导出，不需要 JSON Schema，不需要特殊工具。把它放到项目根目录，任何 AI 编码代理或 Google Stitch 都能立即理解你的 UI 应该长什么样。Markdown 是大语言模型最擅长阅读的格式，所以无需解析或配置。

文件	谁来读取	定义什么
AGENTS.md	编码代理	如何构建项目
DESIGN.md	设计代理	项目应该看起来和感觉如何

本仓库提供从真实网站提取的、可直接使用的 DESIGN.md 文件。

请求一个 DESIGN.md

你可以为特定网站请求一个 DESIGN.md，包括仅交付给你的私密请求。

收录合集

AI & LLM 平台

• Claude - Anthropic 的 AI 助手。暖赤陶色调，干净的编辑布局
• Cohere - 企业 AI 平台。鲜艳渐变，数据丰富的仪表板美学
• ElevenLabs - AI 语音平台。深色电影 UI，音频波形美学
• Minimax - AI 模型提供商。大胆深色界面配霓虹强调
• Mistral AI - 开源权重 LLM 提供商。法式极简，紫色调
• Ollama - 本地运行 LLM。终端优先，单色简约
• OpenCode AI - AI 编码平台。开发者导向深色主题
• Replicate - 通过 API 运行 ML 模型。干净白画布，代码优先
• RunwayML - AI 视频生成。电影深色 UI，媒体丰富布局
• Together AI - 开源 AI 基础设施。技术蓝图风格设计
• VoltAgent - AI 代理框架。虚空黑画布，翡翠强调，终端原生
• xAI - Elon Musk 的 AI 实验室。鲜明单色，未来极简

开发者工具 & IDE

• Cursor - AI 优先代码编辑器。流畅深色界面，渐变强调
• Expo - React Native 平台。深色主题，紧凑字距，代码导向
• Lovable - AI 全栈构建器。趣味渐变，友好开发者美学
• Raycast - 生产力启动器。流畅深色铬，鲜艳渐变强调
• Superhuman - 快速邮件客户端。高端深色 UI，键盘优先，紫色光晕
• Vercel - 前端部署平台。黑白精确，Geist 字体
• Warp - 现代终端。深色 IDE 风界面，块式命令 UI

后端、数据库 & DevOps

• ClickHouse - 快速分析数据库。黄色强调，技术文档风格
• Composio - 工具集成平台。现代深色配多彩集成图标
• HashiCorp - 基础设施自动化。企业级干净，黑白
• MongoDB - 文档数据库。绿叶品牌，开发者文档导向
• PostHog - 产品分析。趣味刺猬品牌，开发者友好深色 UI
• Sanity - 无头 CMS。红色强调，内容优先编辑布局
• Sentry - 错误监控。深色仪表板，数据密集，粉紫强调
• Supabase - 开源 Firebase 替代。深色翡翠主题，代码优先

生产力 & SaaS

• Cal.com - 开源日程安排。干净中性 UI，开发者导向简约
• Intercom - 客户消息。友好蓝色调，对话式 UI 模式
• Linear - 工程师项目管理。超极简，精确，紫色强调
• Mintlify - 文档平台。干净，绿色强调，阅读优化
• Notion - 一体化工作空间。暖极简，衬线标题，柔和表面
• Resend - 开发者邮件 API。极简深色主题，等宽字体强调
• Zapier - 自动化平台。暖橙色，友好插图驱动

设计 & 创意工具

• Airtable - 电子表格-数据库混合。多彩友好，结构化数据美学
• Clay - 创意机构。有机形状，柔和渐变，艺术导向布局
• Figma - 协作设计工具。鲜艳多色，趣味且专业
• Framer - 网站构建器。大胆黑蓝，动效优先，设计导向
• Miro - 视觉协作。明亮黄色强调，无限画布美学
• Webflow - 可视化网页构建器。蓝色强调，精致营销站美学

金融科技 & 加密

• Binance - 加密交易所。大胆币安黄配单色，交易大厅紧迫感
• Coinbase - 加密交易所。干净蓝色身份，信任导向，机构感
• Kraken - 加密交易平台。紫色强调深色 UI，数据密集仪表板
• Revolut - 数字银行。流畅深色界面，渐变卡片，金融科技精确
• Stripe - 支付基础设施。标志性紫色渐变，weight-300 优雅
• Wise - 国际汇款。明亮绿色强调，友好清晰

电商 & 零售

• Airbnb - 旅行市场平台。暖珊瑚色调，摄影驱动，圆角 UI
• Meta - 科技零售商店。摄影优先，二元明暗表面，Meta 蓝 CTA
• Nike - 运动零售。单色 UI，巨大大写 Futura，全出血摄影
• Shopify - 电商平台。深色优先电影风，霓虹绿强调，超轻展示字体

媒体 & 消费科技

• Apple - 消费电子。高端留白，SF Pro 字体，电影级图像
• IBM - 企业技术。Carbon 设计系统，结构化蓝色调色板
• NVIDIA - GPU 计算。绿黑能量，技术力量美学
• Pinterest - 视觉发现平台。红色强调，瀑布流网格，图像优先
• SpaceX - 航天技术。鲜明黑白，全出血图像，未来主义
• Spotify - 音乐流媒体。深色鲜艳绿，粗体字，专辑艺术驱动
• Uber - 出行平台。大胆黑白，紧凑字体，都市能量

汽车

• BMW - 豪华汽车。深色高端表面，精确德系工程美学
• Ferrari - 豪华汽车。明暗对比编辑风，法拉利红配极度稀疏
• Lamborghini - 豪华汽车。纯黑大教堂，金色强调，LamboType 定制新怪诞体
• Renault - 法系汽车。生动极光渐变，NouvelR 专有字体，零圆角按钮
• Tesla - 电动车。激进减法，电影级全视口摄影，Universal Sans### 技术文章大纲：Awesome Design MD

什么是 Awesome Design MD

Awesome Design MD 是一个专注于设计资源的 Markdown 格式列表，涵盖 UI/UX、图形设计、动画、工具等内容。它通常以开源形式维护，方便开发者、设计师快速查找高质量资源。

核心特点

• Markdown 格式：易于维护、阅读和贡献。
• 分类清晰：按设计领域细分（如色彩、字体、工具等）。
• 社区驱动：支持开源协作，持续更新优质资源。

典型内容结构

1. 设计工具

   • Figma、Sketch、Adobe XD 插件与模板。
   • 开源替代品（如 GIMP、Inkscape）。

2. UI/UX 资源

   • 设计系统（Material Design、Ant Design）。
   • 免费图标库（Font Awesome、Feather Icons）。

3. 色彩与排版

   • 调色板生成工具（Coolors、Adobe Color）。
   • 免费商用字体（Google Fonts、Fontsource）。

4. 动画与交互

   • CSS/JavaScript 动画库（Anime.js、GSAP）。
   • 微交互案例研究。

5. 学习资源

   • 设计书籍、在线课程（Udemy、Coursera）。
   • 行业博客（Smashing Magazine、A List Apart）。

如何参与贡献

• 提交 Pull Request 添加新资源。
• 遵循项目规定的 Markdown 模板和分类标准。
• 验证资源的可用性和授权许可（如 MIT、CC0）。

使用场景

• 设计师快速搭建工作流。
• 开发者集成设计资源到项目文档。
• 团队内部知识库建设。

类似项目推荐

• Awesome Design：更广泛的设计资源集合。
• Design Resources for Developers：面向开发者的设计工具列表。

总结

Awesome Design MD 通过结构化组织和社区协作，成为设计领域的高效资源索引。其 Markdown 特性降低了使用门槛，适合个人与团队快速获取灵感或工具支持。