awesome-design-md案例：IBM Carbon设计系统的结构化蓝调企业美学完全指南

awesome-design-md案例IBM Carbon设计系统的结构化蓝调企业美学完全指南【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-mdawesome-design-md是一个收集了 73 个顶级品牌DESIGN.md设计系统文件的开源项目把一个 DESIGN.md 丢进你的项目再告诉 AI 编码智能体“按这个风格给我做页面”就能生成与品牌视觉语言一致的高质量 UI。本文以IBM Carbon 设计系统为例拆解这套“结构化蓝调企业美学”背后的关键规则帮助新手快速读懂企业级设计的精髓。什么是 DESIGN.md让 AI 读懂“该长什么样”DESIGN.md 是 Google Stitch 提出的一种新概念一份纯文本Markdown设计系统文档供 AI 智能体读取后生成风格一致的界面。它不需要 Figma 导出、不需要 JSON 配置就是一个 Markdown 文件——恰恰是 LLM 读得最顺的格式。在 awesome-design-md 项目中DESIGN.md与另一个常见文件分工明确文件谁来读定义了什么AGENTS.md编码智能体Coding Agent如何构建项目DESIGN.md设计智能体Design Agent项目应该长什么样每个品牌的 DESIGN.md 都由项目团队从真实网站中分析提取包含经过验证的设计模式、Token 与规则而不是表面级的“抄个配色”。IBM 的完整分析文档见 design-md/ibm/DESIGN.md。IBM Carbon 美学的 5 条核心规则规则 1唯一品牌色 —— IBM Blue#0f62fe整个系统里只有一个彩色IBM 蓝。它极其“稀缺”只出现在四处链接主按钮Primary CTA底部通栏 CTA 横幅输入框聚焦时的蓝色下划线其余 95% 的界面由三个色阶承担纯白画布#ffffff、浅灰表面#f4f4f4、炭黑文字#161616。这种“一蓝定全局”的克制用法是企业感与信任感的来源。完整的色彩角色定义见 DESIGN.md 颜色章节。规则 2零圆角 无阴影 工程感这是 Carbon 最容易识别的签名所有按钮、卡片、输入框的圆角一律 0px——连 4px 圆角都会“打破 Carbon 观感”层次不靠阴影而靠1px 细边框hairline和表面色变化白 → 浅灰层次处理方式用途0扁平无边框无阴影正文、页脚1细线1px 浅灰边框功能卡片、输入框2表面抬升浅灰背景#f4f4f4交替色带、悬停卡片3聚焦环2px 蓝色描边 炭笔下划线聚焦输入框“系统是被工程化的而不是被风格化的”——这正是 Carbon 的气质。规则 3细体展示字weight 300是品牌声音展示级标题76px / 60px / 42px全部使用IBM Plex Sans字重 300细体正文用字重 400强调用 600从不加粗大标题正文保留letter-spacing: 0.16px的细微字距——这是 Carbon 的精度细节Plex Sans 本身还是免费开源字体SIL OFL 协议是这套方案里最容易落地的部分。字号层级表可参考 DESIGN.md 排版章节。规则 44 像素网格的间距系统Carbon 的签名之一是4px 基础网格间距 Token 从 4px 到 96px 全档齐备Token值用途spacing.md16px按钮、常规内边距spacing.lg24px功能卡片内边距spacing.xl32px产品卡片内边距spacing.section96px区块间距规则 5密集而有节奏的双表面韵律桌面端采用16 列网格平板 8 列手机 4 列区块之间不用大片留白而是用**细灰条带surface-1**分隔页面节奏工具条 → 顶导航 → 细体大标题 Hero → 卡片网格 → 客户 Logo 跑马灯 → 企业特性区 → CTA → 炭黑页脚页脚是全页唯一反转到深色的区域炭黑#161616形成干净的视觉收束。每个 DESIGN.md 里的 9 大结构化模块awesome-design-md 中每个品牌的文件都遵循统一结构以 IBM 为例这也是它能被 AI 稳定读懂的原因#模块内容1视觉主题与氛围气质、密度、设计哲学2色彩与角色语义化命名 Hex 功能角色3排版规则字体族与完整层级表4组件样式按钮/卡片/输入框及各状态5布局原则间距刻度、网格、留白哲学6深度与层次阴影系统、表面层级7Dos and Donts设计护栏与反模式8响应式行为断点、触控目标、折叠策略9智能体提示指南快速色彩参考与即用 Prompt其中Dos and Donts模块特别值得新手学习——它明确告诉 AI和你不要给按钮加圆角、不要把展示标题加粗、不要引入第二种品牌色。这份“负面清单”是生成结果不走样的关键详见 DESIGN.md 规范章节。三步上手复现 Carbon 风格的企业级 UI 第 1 步获取项目git clone https://gitcode.com/GitHub_Trending/aw/awesome-design-md第 2 步复制文件把 design-md/ibm/DESIGN.md 复制到你的项目根目录即可无需解析或配置。第 3 步告诉 AI 智能体对 AI 编码智能体说“Use the DESIGN.md in the project root, build me a page that looks like this.” 智能体会读取文档中的色彩、排版、组件 Token生成带 IBM 蓝、零圆角卡片、细体大标题的 Carbon 风格页面。 项目还包含其他 72 个品牌的同款文档如 design-md/apple/、design-md/vercel/、design-md/stripe/ 等换行业风格只需换一个文件。相关参考资料 IBM 设计系统完整文档design-md/ibm/DESIGN.mdIBM 案例说明页design-md/ibm/README.md项目总览与 73 个品牌合集README.md贡献指南CONTRIBUTING.md一句话总结IBM Carbon 的美学不是“好看”而是“精确”——一个蓝、零圆角、细体字、4px 网格四条规则撑起经典的企业级界面。把它的 DESIGN.md 交给 AI你就能用最低成本获得这套经过验证的蓝调企业美学。【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-md创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考