小马的 AI 工具集 给 Agent 学习

设计规范库

知名品牌设计系统的 DESIGN.md 合集，丢进项目让编程 AI 生成匹配风格的 UI

设计规范库
类型 清单 90,419 星标 更新 2026-06-08 许可 MIT 原仓库 主页
claude-skills

由开发者聚焦的网站提供的 DESIGN.md 分析精选合集。

Awesome DESIGN.md Count Last Update Discord

Awesome DESIGN.md

将 DESIGN.md 复制到项目中，告诉你的 AI agent “帮我构建一个看起来像这样的页面”，即可生成与设计语言保持视觉一致的高质量 UI。

基于真实的设计深度构建——包括分析的模式、令牌和规则——用于高质量的 UI 生成，而非表面输出。

什么是 DESIGN.md？

DESIGN.md 是 Google Stitch 引入的一个新概念。它是一个纯文本设计系统文档，AI agent 读取后生成一致的 UI。

它只是一个 markdown 文件。不需要 Figma 导出、JSON schema 或特殊工具。将其放入项目根目录，任何 AI 编码 agent 或 Google Stitch 都能立即理解 UI 应该如何呈现。Markdown 是 LLM 最容易读取的格式，因此无需解析或配置。

文件读取方定义内容
AGENTS.md编码 agent如何构建项目
DESIGN.md设计 agent项目的外观和感觉

本仓库提供从真实网站提取的即用型 DESIGN.md 文件。

请求 DESIGN.md

您可以为特定网站请求 DESIGN.md，包括仅向您提供的私有请求。

AI 设计与构建生态系统工具

用于使用 AI 设计和发布 Web 应用的工具、平台和服务。

  • 如果你正在使用 TypeScript 构建 AI agent，VoltAgent 提供开箱即用的工具使用、记忆和多 agent 协调能力。

    voltagent-banner

👉 让您的产品与开发者、设计师以及使用 AI 编码 agent 和 Web 构建器交付 UI 的 vibecoder 一同展示。

在 GitHub 上全球排名 #150。由开发者、设计师和 vibecoder 使用的社区资源。

Become a Sponsor

合集

AI 与 LLM 平台

  • Claude - Anthropic 的 AI 助手。暖陶土色强调色，简洁的编辑布局
  • Cohere - 企业 AI 平台。鲜艳渐变，数据丰富的仪表盘美学
  • ElevenLabs - AI 语音平台。暗调电影感 UI，音频波形美学
  • Minimax - AI 模型提供商。大胆的暗色界面，配霓虹强调色
  • Mistral AI - 开放权重的 LLM 提供商。法式极简主义，紫色色调
  • Ollama - 在本地运行 LLM。终端优先，单色简洁
  • OpenCode AI - AI 编码平台。以开发者为中心的深色主题
  • Replicate - 通过 API 运行 ML 模型。干净的白色画布，代码优先
  • Runway - AI 创意工具平台，具有电影节的编辑美学——电影级暗色英雄区、纸张白阅读区域、单一专有无衬线字体、纯黑色胶囊式 CTA 按钮。
  • Together AI - 开源 AI 基础设施。技术性蓝图表风格设计
  • VoltAgent - AI agent 框架。虚空黑画布，翡翠绿强调色，终端原生
  • 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 - 无头内容平台，具有深色优先的编辑营销表面——112px 展示型字体，IBM Plex Mono 技术眉毛线，珊瑚红强调色用于最高优先级的 CTA 按钮。
  • Sentry - 错误监控。深色仪表盘，数据密集，粉紫强调色
  • Supabase - 开源 Firebase 替代方案。深翡翠绿主题，代码优先

生产力与 SaaS

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

设计与创意工具

  • Airtable - 电子表格与数据库混合体。色彩丰富、友好、结构化数据美学
  • Clay - 创意机构。有机形状、柔和渐变、艺术导向排版
  • Figma - 协作设计工具。鲜艳多色、趣味而专业
  • Framer - 网站构建器。醒目的黑蓝配色、动效优先、设计前沿
  • Miro - 视觉协作平台。亮黄色强调、无限画布美学
  • Webflow - 可视化网站构建器。蓝色强调、精致营销网站美学

金融科技与加密货币

  • Binance - 加密货币交易所。单色背景上醒目的Binance黄、交易大厅紧迫感
  • Coinbase - 加密货币交易所。清爽蓝色品牌形象、信任至上、机构感
  • Kraken - 加密货币交易平台。紫色强调的深色UI、数据密集型仪表盘
  • Mastercard - 全球支付网络。暖奶油色画布、轨道药丸形状、编辑式温暖
  • Revolut - 数字银行。时尚深色界面、渐变卡片、金融科技精准度
  • Stripe - 支付基础设施。标志性紫色渐变、weight-300优雅
  • Wise - 国际汇款。亮绿色强调、友好清晰

电子商务与零售

  • Airbnb - 旅行市场。暖珊瑚色强调、摄影驱动、圆角UI
  • Meta - 科技零售商店。摄影优先、黑白双色表面、Meta蓝CTA
  • Nike - 运动零售。单色UI、巨大大写Futura、全出血摄影
  • Shopify - 电子商务平台。深色电影感、霓虹绿强调、超轻显示字体
  • Starbucks - 咖啡零售旗舰。四层大地绿系统、暖奶油色画布、专属SoDoSans字体

媒体与消费科技

  • Apple - 消费电子产品。高级留白、SF Pro、电影感图像
  • HP - 个人电脑与打印机制造商。纯白画布、HP Electric Blue信号CTA、几何Forma DJR Micro、蓝色人字形装饰
  • IBM - 企业技术。Carbon设计系统、结构化蓝色调色板
  • NVIDIA - GPU计算。绿黑能量、技术力量美学
  • Pinterest - 视觉发现平台。红色强调、瀑布流网格、图像优先
  • PlayStation - 游戏主机零售。三面通道布局、青色悬停缩放交互
  • SpaceX - 航天技术。纯粹黑白、全出血图像、未来主义
  • Spotify - 音乐流媒体。深色背景上的鲜艳绿色、粗体文字、专辑封面驱动
  • The Verge - 科技编辑媒体。酸薄荷与紫外强调、Manuka显示字体
  • Uber - 出行平台。醒目的黑白、紧凑字体、都市能量
  • Vodafone - 全球电信品牌。纪念碑式大写显示、Vodafone红章节色带
  • WIRED - 科技杂志。纸白宽幅密度、自定义衬线、墨水蓝链接

汽车

  • BMW - 豪华汽车。深色高级表面、精准德国工程美学
  • BMW M - 性能汽车。赛车运动灵感对比、M色彩强调、精度驱动布局
  • Bugatti - 豪华超跑。影院黑画布、单色简朴、纪念碑式显示字体
  • Ferrari - 豪华汽车。明暗对比黑白编辑风、极度稀疏的Ferrari红
  • Lamborghini - 豪华汽车。纯黑大教堂、金色强调、LamboType自定义新怪诞字体
  • Renault - 法国汽车。鲜艳极光渐变、NouvelR专属字体、零半径按钮
  • Tesla - 电动汽车。激进减法、电影感全视口摄影、Universal Sans

复古网页 · DESIGN.md 怀旧

一个周六系列——从1990年代网页中提取的DESIGN.md文件。放入一个文件，告诉你的AI代理构建一个年代准确的复古UI。

  • Dell (1996) - 目录时代的企业网页。文字黑色页面框架、平面色块“丝带卡片”、粗体Helvetica-Black标题配合Times Roman正文、手切GIF贴纸（NEW!爆裂、奖项封印、斜面产品照片）。
  • Nintendo.com (2001) - Y2K“主机镀铬”网页。拉丝淡紫灰斜面金属面板、半色调圆点碳纤维导航发出琥珀色光、外描边Arial-Black方块艺术字标位于电路板英雄区域、像素马里奥欢迎气泡。

每个DESIGN.md的内容

每个文件遵循 Stitch DESIGN.md 格式，并包含扩展部分：

#部分描述内容
1视觉主题与氛围情绪、密度、设计理念
2色彩调色板与角色语义名称 + 十六进制值 + 功能角色
3字体规则字体族、完整层次表
4组件样式按钮、卡片、输入框、导航及各状态
5布局原则间距尺度、网格、留白理念
6深度与层次阴影系统、表面层级
7注意事项设计护栏与反模式
8响应式行为断点、触摸目标、折叠策略
9代理提示指南快速颜色参考、即用提示

每个站点包含：

文件用途
DESIGN.md设计系统（供代理读取）
preview.html视觉目录，展示色板、字体比例、按钮、卡片
preview-dark.html带有深色表面的相同目录

使用方法

  1. 将站点的 DESIGN.md 复制到你的项目根目录
  2. 告诉你的AI代理使用它

贡献指南

参见 CONTRIBUTING.md 了解指南。

  • 改进现有文件：修正错误的颜色、缺失的 token、不准确的描述
  • 报告问题：如果发现任何异常，请告知我们

在提交 PR 之前，请先创建一个 issue 来讨论您的想法并获取维护者的反馈。

许可证

MIT 许可证 - 参见 LICENSE

本仓库是从公开网站提取的设计系统文档的精选集合。所有 DESIGN.md 文件均按“原样”提供，不提供任何担保。提取的设计 token 代表公开可见的 CSS 值。我们不主张对任何网站的视觉标识的所有权。这些文档的存在是为了帮助 AI 智能体生成设计 token。所有贡献均遵循 MIT 许可证。

在 GitHub 查看完整项目