文档【免费下载链接】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点击查看免费下载本文以 design-md/expo/DESIGN.md 为绝对主体系统拆解 Expo 官网设计语言从 YAML 前端元数据中的颜色、字体、圆角、间距与组件令牌到纯白画布 纯黑 CTA 设备样机 Hero的开发者平台美学再到响应式策略与设计纪律。读完你可以直接把这套 DESIGN.md 复制进自己的项目让 AI Agent 生成视觉一致、风格克制的高质量 UI也能学会像设计系统工程师一样阅读和分析任何品牌的设计令牌。DESIGN.md 是什么这份文档在仓库中的位置DESIGN.md 是 Google Stitch 提出的纯文本设计系统文档概念它就是一份 Markdown 文件无需 Figma 导出、无需 JSON Schema、无需额外工具把它放进项目根目录任何 AI 编码 Agent 或 Google Stitch 都能立刻理解界面应该长什么样——Markdown 是 LLM 阅读效率最高的格式无需解析与配置。本仓库即从真实网站提取、可直接投入使用的 DESIGN.md 集合README.md 中将其与AGENTS.md做了分工对比AGENTS.md告诉编码 Agent如何构建项目DESIGN.md告诉设计 Agent项目看起来应该是什么样。Expo 的设计系统文档位于 design-md/expo/DESIGN.md其文件头声明version: alpha并配有一份指向在线预览与下载页的 design-md/expo/README.md。整个文档采用YAML 前端元数据 自然语言章节的双层结构前端元数据colors / typography / rounded / spacing / components是机器可直接读取的令牌字典正文章节则负责解释每个令牌的语义、用法与边界供 Agent 理解设计意图。文档骨架一份 DESIGN.md 的完整章节地图README.md 中列出了仓库所有 DESIGN.md 遵循 Stitch 规范并扩展的九个模块。对照来看Expo 这份文档覆盖并细化了其中的主要模块并补充了迭代指南与已知空白模块Expo 文档中的对应章节承载内容视觉主题与氛围Overview品牌气质、画布基调、视觉签名调色板与角色Colors语义化色名 hex 功能角色排版规则Typography字体家族、完整层级表组件样式Components按钮、卡片、输入框、导航及状态布局原则Layout间距刻度、网格、留白哲学深度与层级Elevation Depth阴影体系、表面层级形状Shapes圆角刻度与适用场景禁忌与护栏Dos and Donts设计纪律与反模式响应式行为Responsive Behavior断点、触摸目标、折叠策略附加Iteration Guide / Known Gaps迭代纪律与已知边界这种结构对 Agent 极其友好前端元数据保证可计算正文章节保证可理解两者结合即可生成既符合令牌数值、又符合品牌气质的 UI。色彩体系一个克制的黑白蓝三角Expo 的色彩策略是整份文档的哲学核心——唯一品牌电压是纯黑蓝色只作内联链接天蓝渐变只属于 Hero。前端元数据中共声明 34 个颜色令牌全部使用{colors.xxx}引用禁止内联 hex。品牌与强调色Black{colors.primary}—#000000主 CTA 填充色。文档明确强调Used scarcely用得极少。Black Active{colors.primary-active}—#1a1a1a按压态比纯黑亮一档。Text Link Blue{colors.text-link}—#0d74ce长文本中的内联正文链接。作用域极窄——绝不用于 CTA。Legal Link Blue{colors.text-link-secondary}—#476cff页脚法律文案中的内联链接。Bright Cyan{colors.accent-link-bright}—#47c2ff仅在文档组件内的链接中极少量使用。表面色Canvas{colors.canvas}—#ffffff纯白页面底色。Canvas Soft{colors.canvas-soft}—#fafafa细微的交替色带。Surface Card{colors.surface-card}—#ffffff纯白卡片。Surface Strong{colors.surface-strong}—#f0f0f3徽章、生态伙伴磁贴、次级按钮。Surface Dark{colors.surface-dark}—#171717暗色特性卡片、代码块、IDE 样机、高亮定价卡。Surface Dark Elevated{colors.surface-dark-elevated}—#1a1a1a暗色卡片内部再亮一档的层级。大气背景Sky Light{colors.gradient-sky-light}—#cfe7ffSky Mid{colors.gradient-sky-mid}—#a8c8e8首页 Hero 背后的柔和天蓝渐变洗。不是品牌动作色仅作为氛围背景。细线HairlineHairline{colors.hairline}—#f0f0f3默认 1px 分隔线。Hairline Soft{colors.hairline-soft}—#f5f5f7更浅的分隔线。Hairline Strong{colors.hairline-strong}—#dcdee0更强的面板描边。文本色Ink{colors.ink}—#171717显示标题与正文强调近黑。Body{colors.body}—#60646c默认正文偏冷的灰。Body Strong{colors.body-strong}—#171717与 ink 相同。Muted{colors.muted}—#999999副标题。Muted Soft{colors.muted-soft}—#cccccc禁用文本。On Primary{colors.on-primary}—#ffffff黑底 CTA 上的白字。On Dark{colors.on-dark}—#ffffff暗色卡片上的白字。On Dark Soft{colors.on-dark-soft}—#b0b4ba暗色面上的柔和米白。语义色Warning{colors.accent-warning}—#ab6400文档警示框内的警告文本。Preview{colors.accent-preview}—#8145b5Preview预览标签色。Success{colors.semantic-success}—#16a34a确认成功态。Error{colors.semantic-error}—#eb8e90表单校验错误。从元数据看色彩的组织方式观察前端元数据可以发现一条实现层面的规律颜色令牌按品牌 → 表面 → 背景 → 细线 → 文本 → 语义分组声明且文本色单独成组ink/body/muted/on-*。这意味着在生成 UI 时Agent 可以按角色取色而不是按直觉取色——例如暗色卡片一律用surface-dark承载、文字一律用on-dark/on-dark-soft从而天然保证对比度一致。字体系统Inter 600 显示、400 正文JetBrains Mono 覆盖一切代码面字体家族Inter是唯一无衬线家族覆盖所有文本角色JetBrains Mono承载所有代码面回退栈为-apple-system, system-ui, sans-serif。Expo 不引入自定义字体文档明确点出这种选择的动机信任 Inter 的编辑性中立editorial neutrality。Known Gaps 章节补充了现实依据Inter 与 JetBrains Mono 均免费可得无授权顾虑。完整层级表Token字号字重行高字距用途{typography.display-mega}64px6001.05-1.92px首页 Hero h1{typography.display-xl}48px6001.1-1.44px次级页面 Hero{typography.display-lg}36px6001.15-1.08px区块标题{typography.display-md}28px6001.2-0.84px子区块标题{typography.display-sm}22px6001.25-0.5px卡片组标题{typography.title-md}18px6001.40组件标题{typography.title-sm}16px6001.40列表标签{typography.body-md}16px4001.50默认正文{typography.body-sm}14px4001.50页脚正文{typography.caption}13px4001.40图片说明{typography.caption-uppercase}11px6001.40.88px区块标签、徽章{typography.code}13px4001.50代码块JetBrains Mono{typography.button}14px5001.00CTA 标签{typography.nav-link}14px5001.40顶部导航菜单三条排版纪律显示字重锁定 600——自信但不夸张Inter 600 比 700 更耐读。显示标题一律负字距——从 -0.5px 到 -1.92px越大的字号负字距越深。每个代码面都是 JetBrains Mono——代码块、IDE 样机、文档内代码无一例外。值得注意的是button的行高是 1.0、nav-link是 1.4交互控件的排版参数与正文刻意不同这说明设计令牌需要区分阅读型与点击型文本Agent 生成按钮时不应套用正文行高。布局系统96px 章节节奏下的编辑部式留白间距系统基础单位4px。令牌刻度{spacing.xxs}4px ·{spacing.xs}8px ·{spacing.sm}12px ·{spacing.base}16px ·{spacing.md}20px ·{spacing.lg}24px ·{spacing.xl}32px ·{spacing.xxl}48px ·{spacing.section}96px。区块纵向 padding 统一为 96px{spacing.section}是整站节奏的锚点。网格与容器最大内容宽度约1200px。编辑性正文采用12 列网格。特性卡片网格桌面端 Hero 分割区 2 列、利益点网格 3 列。生态伙伴磁贴网格桌面端 8 列。页脚桌面端 5 列。留白哲学编辑部式宽松节奏generous editorial pacing。纯白画布不与 Hero 的天蓝渐变洗争抢注意力而工作流等密集区块内的卡片间距收紧到 16–24px。也就是说章节之间用 96px 拉开呼吸感卡片之间用 16–24px 保持紧凑。深度与层级一次柔投影一次暗反转文档用一个表格完整定义了六层深度体系层级处理方式用途Flat画布{colors.canvas}#ffffff正文区块、页脚Card{colors.surface-card}#ffffff内容卡片Hairline 边框1px{colors.hairline}卡片描边柔投影0 4px 12px rgba(0, 0, 0, 0.04)卡片悬停全站唯一一档阴影氛围渐变天蓝径向洗仅 Hero 背景暗反转{colors.surface-dark}#171717暗色特性卡片、代码块、高亮定价卡这套体系的克制之处在于全站只有一档阴影层级区分主要靠描边hairline与暗反转而不是层层堆叠的投影天蓝渐变只作为 Hero 的氛围深度不伪装成品牌色。装饰性深度方面文档点明设备样机合成图才是页面镀铬page chrome——MacBook iPhone 展示真实 Expo 开发界面替代传统插画成为视觉主角。形状系统8px CTA、12px 卡片、胶囊只属于徽章Token值用途{rounded.none}0px预留{rounded.xs}4px内联标签{rounded.sm}6px紧凑行{rounded.md}8pxCTA 按钮、表单输入、生态磁贴{rounded.lg}12px特性卡片、代码块、定价卡{rounded.xl}16px设备样机卡片{rounded.xxl}24px更大的氛围卡片少见{rounded.pill}9999px仅徽章{rounded.full}9999px头像底板少见设计要点紧凑的开发者人体工学圆角——8px 给 CTA、12px 给卡片胶囊几何pill严格保留给徽章绝不给 CTA。这条规则在 Dos and Donts 中被再次强调。组件体系从导航到定价的完整令牌实例前端元数据中的components区块声明了 20 个组件令牌正文逐一给出了规格。以下按功能分组整理含可直接照搬的数值顶部导航top-nav背景{colors.canvas}、文本{colors.ink}、高度64px。布局左侧 Expo wordmark中间主菜单Tools / Workflows / EAS / Pricing / Docs / Showcase右侧 Sign In Get started CTA。菜单字号即{typography.nav-link}14px / 500。按钮四态button-primary——纯黑药丸。背景{colors.primary}、文本{colors.on-primary}、字体{typography.button}14px / 500、内边距10px × 18px、高度40px、圆角{rounded.md}8px。button-primary-active——按压态背景切换为{colors.primary-active}#1a1a1a。button-secondary——白卡 1px{colors.hairline-strong}描边。背景{colors.surface-card}、文本{colors.ink}、内边距 9px × 17px、高度 40px。button-tertiary-text——内联蓝色文字链接。背景透明、文本{colors.text-link}。四个按钮令牌恰好覆盖主动作 / 按压 / 次动作 / 文字链接四种语义是 Agent 生成任何 CTA 区块时的查表对象。Hero 与设备样机hero-band——背景{colors.canvas}标题使用{typography.display-mega}64px / 600 / -1.92px副标题{typography.body-md}单一主 CTA下方是设备样机合成图内边距 96px。device-mockup-card——MacBook iPhone 双层合成图展示真实 Expo 开发界面MacBook 内为 EAS Build dashboard 或 Expo Studio 截图iPhone 覆盖层显示 Expo Go 中运行的应用。背景{colors.surface-card}、圆角{rounded.xl}16px、内边距 0。卡片族feature-card——白卡{colors.surface-card}背景、{colors.ink}文本、{typography.title-md}、圆角{rounded.lg}、内边距 24px、1px{colors.hairline-strong}描边。feature-card-dark——暗反转变体{colors.surface-dark}背景、{colors.on-dark}文本形状相同。workflow-step-card——让应用抵达每一台设备工作流行的步骤卡白底、{colors.body}文本、圆角 12px、内边距 20px内部为 32px 方形图标底板 步骤号 标签 正文。workflow-step-icon——方形底板{colors.surface-strong}背景、圆角{rounded.md}、尺寸 32px。testimonial-card——引语卡白底、{colors.body}文本、圆角 12px、内边距 24px。代码与 IDEcode-block——内联代码块{colors.surface-dark}背景、{colors.on-dark}文本、{typography.code}JetBrains Mono 13px、圆角 12px、内边距 20px。白字衬暗底。ide-mockup-card——风格化 IDE 样机暗底、圆角 12px多窗格编辑器 终端预览。定价pricing-tier-card——标准定价档白底、圆角 12px、内边距 32px、1px{colors.hairline-strong}描边。pricing-tier-featured——高亮档{colors.surface-dark}背景、{colors.on-dark}文本暗反转突出。生态伙伴磁贴ecosystem-tileTypeScript、React、Sentry 等伙伴 logo 的方形底板{colors.surface-card}背景、圆角{rounded.md}、尺寸64px、1px{colors.hairline}描边。表单与标签text-input——输入框白底、{colors.ink}文本、圆角 8px、内边距 12px × 16px、高度44px、1px{colors.hairline-strong}描边聚焦态描边加粗为 2px ink。badge-pill——小号大写胶囊徽章{colors.surface-strong}背景、{colors.ink}文本、{typography.caption-uppercase}11px / 600 / 0.88px 字距 / 大写、圆角{rounded.pill}、内边距 4px × 10px。CTA 与页脚cta-band——页脚前 CTA 带纯白底、居中{typography.display-lg}标题、单一黑色药丸 CTA、内边距 96px。footer-light——收尾白页脚{colors.canvas}背景、{colors.body}文本、5 列链接、内边距 64px × 48px。footer-link——页脚链接背景透明、{colors.body}文本、{typography.body-sm}。从组件令牌的整体布局可以看到清晰的对照关系button-primary/feature-card与button-primary的暗反转对应pricing-tier-featured、feature-card-dark、code-block等暗面组件Agent 只需要掌握白卡 ↔ 暗卡的映射规律就能成体系地切换深浅场景。Dos and Donts设计纪律红线Do应当将{colors.primary}纯黑只保留给主 CTA。{colors.text-link}蓝只用于内联正文链接——绝不用于 CTA 或按钮。所有 CTA 圆角统一为{rounded.md}8px——开发者方言。显示用 Inter 600、正文用 Inter 400。每个代码面都用 JetBrains Mono 渲染。Hero 必须搭配设备样机合成图——它是页面镀铬。Dont禁止不要引入饱和的品牌动作色黑色是唯一 CTA 填充。不要把蓝{colors.text-link}用在 CTA 上它只属于内联链接。不要把显示字重降到 600 以下或抬到 700 以上。不要在 CTA 上使用全胶囊圆角——胶囊只属于徽章。不要把天蓝渐变洗复制到 Hero 之外。不要从第三方组件如 cookie 同意、OneTrust中提取 CTA 颜色——品牌的 CTA 只以真实页面 CTA 上出现的为准。最后一条尤其值得注意它约束的是数据采集边界——当分析工具从页面 DOM 抓取颜色时第三方小组件的颜色会被误抓为品牌色文档明确要求排除这类污染源这与仓库 README提取的令牌代表公开可见的 CSS 值的定位是一致的。响应式行为断点、触摸目标与折叠策略断点表名称宽度关键变化移动端 640pxHero h1 从 64px 降到 32px设备样机折叠为单 iPhone 屏特性网格 1 列导航汉堡菜单平板640–1024pxHero h1 48px设备样机压缩特性网格 2 列桌面1024–1280pxHero h1 回到 64px完整 MacBook iPhone 合成图特性网格 3 列宽屏 1280px内容宽度封顶 1200px触摸目标主 CTA 高度 40px——达到 WCAG AA加内边距可满足 AAA。搜索输入框 44px——直接达到 AAA。折叠策略顶部导航在768px以下切换为汉堡菜单。设备样机在移动端从 MacBook iPhone 合成图坍缩为单一 iPhone 预览。特性网格按 3 列 → 2 列 → 1 列降级。生态磁贴网格按 8 列 → 4 列 → 3 列 → 2 列降级。迭代指南像维护设计系统一样更新这份文档文档末尾给出了 7 条迭代纪律这同时也是任何人继续完善这份 DESIGN.md 的操作手册一次只聚焦一个组件。CTA 默认{rounded.md}8px卡片用{rounded.lg}12px。变体单独成条目如button-primary-active、feature-card-dark各占一条。全程使用{token.refs}引用绝不内联 hex。悬停态永不写进文档由 Agent 按交互规范自行处理。显示用 Inter 600、正文用 Inter 400、代码用 JetBrains Mono。黑色永远是唯一 CTA 颜色text-link 蓝永远只做内联链接。这与仓库 CONTRIBUTING.md 中修正错误的 hex、补齐缺失令牌、加强描述的改进路径完全一致——令牌引用规范化是保证 Agent 输出一致性的前提。Known Gaps这份文档诚实的边界Inter 与 JetBrains Mono 均免费可得——无授权风险。动画时序设备样机视差、Hero 入场动画不在范围之内。应用内界面EAS dashboard 交互、Expo Go 模拟器仅通过营销样机部分捕获。聚焦态以外的表单校验状态在已采集页面上不可见。这些已知空白恰恰是文档质量的加分项它明确划定了什么该由这份设计令牌负责、什么需要 Agent 根据交互规范自行补足避免生成器在缺失信息上盲目猜测。落地使用把 Expo 设计系统接入你自己的项目按照 README.md 的 How to Use 流程两步行即可把 design-md/expo/DESIGN.md 复制到你的项目根目录保持文件名DESIGN.md不变Agent 才会自动识别。对 AI 编码 Agent 说build me a page that looks like this参照 README 中的原话Agent 会读取 YAML 令牌与正文规则生成与 Expo 设计语言一致的高质量 UI。使用前可以对照几点检查自己的项目是否适配这份设计语言你的页面是否以纯白画布为主是否只需要一个主 CTA 纯黑 内联链接蓝色的极简调色板代码块是否希望呈现 JetBrains Mono 的终端质感如果是Expo 这份低调自信的基础设施品牌风格文档 frontmatter 中description字段的原话是 a quietly-confident infrastructure brand就是开箱即用的最佳起点。仓库采用 MIT 协议见 LICENSE所有 DESIGN.md 均为按原样提供的公开可见 CSS 值提取物不主张对任何站点视觉身份的拥有权可放心用于 AI 生成一致 UI 的学习与实践。赞分享文档【免费下载链接】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点击查看免费下载相关推荐Together AI 设计系统解析awesome-design-md 仓库中 DESIGN.md 令牌化拆解与 Agent 生成一致 UI 的落地指南Together AI 设计系统解析awesome design md 仓库中 DESIGN.md 令牌化拆解与 Agent 生成一致 UI 的落地指南 本文文档PostHog 设计系统 DESIGN.md 深度解析基于 awesome-design-md 复刻暖奶油色产品分析平台的完整设计规范PostHog 设计系统 DESIGN.md 深度解析基于 awesome design md 复刻暖奶油色产品分析平台的完整设计规范 导读 本文以 awes文档Clay 设计系统深度拆解基于 awesome-design-md 的 DESIGN.md 还原奶油画布、Plain Black 标题与六色黏土功能卡片体系Clay 设计系统深度拆解基于 awesome design md 的 DESIGN.md 还原奶油画布、Plain Black 标题与六色黏土功能卡片体系文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考