文档【免费下载链接】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点击查看免费下载导读本文以开源仓库 awesome-design-md 中收录的 Supabase 设计语言分析文档 为骨架完整拆解其色彩、字体、布局、组件与响应式规则并结合仓库使用方式说明如何把这份设计文档交给 AI 编码代理生成视觉一致的高质量 UI。读完本文你将掌握一套可直接复制的设计 Token 体系并理解“白色画布 翡翠绿唯一色相”这一技术品牌风格背后的设计决策。从一份 DESIGN.md 看 Supabase 的设计语言DESIGN.md是 Google Stitch 提出的“纯文本设计系统文档”概念它不需要 Figma 导出、JSON Schema 或任何特殊工具链只是普通 Markdown 文件。把某个站点的DESIGN.md丢进项目根目录任何 AI 编码代理或设计代理都能立刻理解“界面应该如何呈现”并按该语言生成一致 UI。本仓库 README.md 将其定位明确为AGENTS.md告诉代理如何构建项目DESIGN.md告诉设计代理项目应该长什么样。仓库内每个站点目录下都包含DESIGN.md代理读取的设计系统与README.md指向在线预览。Supabase 的设计文档位于 design-md/supabase/DESIGN.md其配套说明见 design-md/supabase/README.md。从文件结构看这份文档由两大部分组成YAML FrontmatterToken 定义区声明了version: alpha文件名为Supabaze-Inspired-design-analysis——即对 Supabase开源数据库平台设计语言的“灵感化解读”并在 description 中概括其风格白色与近黑构成的主系统、唯一的翡翠绿 CTA、自定义人文主义无衬线展示字级以及合成在产品首屏上方的密集产品 UI 截图。Markdown 正文规则区从 Overview、Colors、Typography、Layout、Elevation、Shapes、Components、Dos and Donts、Responsive Behavior 到 Iteration Guide逐层展开。文档采用 Stitch 的Token 引用语法组件定义通过{colors.primary}、{typography.button-md}、{rounded.sm}这类占位符组合底层 Token例如按钮组件的backgroundColor: {colors.primary}与typography: {typography.button-md}。这意味着整套体系是“Token → 组件”的分层构建修改底层色板即可全局生效也正是 AI 代理能够稳定复刻的关键。设计主题总览安静的技术品牌Supabase 的设计语言以“清晰”为最高准则见 DESIGN.md Overview。市场页面坐落在纯白{colors.canvas}#ffffff之上正文使用近黑{colors.ink}#171717刻意不用纯黑。全系统唯一的稳定色相事件是翡翠绿主色{colors.primary}#3ecf8e仅用于实心 CTA、偶尔的强调圆点和字标高亮其余全部是经过校准的灰色阶梯——从#ededed的发丝线到#171717的墨色由“白底上的细黑字”承担绝大部分视觉工作。排版层面展示层级运行Circular字体、字重 500正文 400展示字级使用紧凑的负字距64px 时达 -1.92px把圆润的人文主义字形压出编辑级的密度。没有氛围渐变、没有出血摄影、没有深色营销轨道——品牌坚定地选择白色。产品本身则以“合成 UI 截图”的形式出现在每个页面仪表盘表格、SQL 编辑器、查询构建器、日志流。这些截图是品牌自身的论证它们被放置于{rounded.lg}12px容器内配以 1px 细发丝线常在首屏带上方以双栏或“浮动堆叠窗格”构图出现。文档归纳的关键特征如下它们是任何复刻工作的出发点单一翡翠绿主色#3ecf8e是唯一色相事件其余全部单色白色画布营销轨道配以从{colors.hairline-cool}到{colors.ink}的灰度层级自定义人文主义无衬线展示字级字重 500负字距 -1.92px 至 -0.42px合成产品 UI 截图仪表盘、SQL 编辑器、日志流是主导装饰元素——从不使用摄影或插画按钮圆角仅 6px / 8px——方正、技术感绝不使用胶囊形代码块采用深色{colors.canvas-night}#1c1c1c 等宽字体开发者基因体现在每个片段里定价档位中被强调的一档使用深色反转的{colors.canvas-night}而不是绿色——绿色被保留给按钮和圆点强调。色彩系统唯一色相事件 校准灰度阶梯文档的 Colors 章节基于真实页面取样首页/、/database、/partners/integrations、/solutions/ai-builders、/pricing等见 DESIGN.md Colors将所有色值归纳为三组语义角色。品牌与强调色Token色值用途{colors.primary}Emerald#3ecf8e签名 CTA 色实心按钮底色、品牌字标强调、圆点指示器{colors.primary-deep}Emerald Deep#24b47e主色的按压态加深{colors.primary-soft}Emerald Soft#4ade80图表强调与产品 UI 中较亮的翡翠绿{colors.accent-purple}#6b01c2罕见的强调色仅用于集成 Logo 与图表点绝不用于按钮{colors.accent-violet}#644fc1与 accent-purple 同角色的次级强调{colors.accent-yellow}#ffdb13仅作图表强调 / 状态指示{colors.accent-purple-soft}#eddbf9浅紫辅助色{colors.accent-tomato}#ff2201保留给集成 Logo 与罕见图表高亮{colors.accent-pink}#c7007e同上不作为系统色{colors.accent-indigo}#054cff同上{colors.accent-crimson}#e2005a同上关键规则紫、黄、粉等强调色永远只是“图表内部与集成 Logo”的局部存在一旦进入按钮、导航等系统级组件即视为越界。表面色Token色值用途{colors.canvas}#ffffff默认页面背景{colors.canvas-soft}#fafafa微染灰白用于交替区块带{colors.canvas-night}#1c1c1c深近黑代码块、仪表盘截图、特色定价档位{colors.canvas-night-soft}#202020略微抬升的深色用于嵌套内边框{colors.hairline}#dfdfdf卡片与表格的 1px 边框{colors.hairline-strong}#c7c7c7略深的强调边框{colors.hairline-cool}#ededed精细细边框工作灰色阶梯之一{colors.hairline-cool-2}#efefef灰色阶梯之二{colors.hairline-cool-3}#d4d4d4灰色阶梯之三文本色Token色值用途{colors.ink}#171717默认正文近黑而非纯黑{colors.ink-secondary}#212121略冷的近黑用于正文强调{colors.ink-mute}#707070次级文本与辅助文案{colors.ink-mute-2}#9a9a9a三级文本{colors.ink-faint}#b2b2b2禁用 / 占位文本{colors.on-primary}#171717翡翠绿填充上的文字色——近黑而非白色{colors.on-dark}#ffffff深色表面上的文字其中on-primary是整套系统最“反直觉”也最标志性的决定绿色按钮上印的是近黑文字而不是白色。文档对此的解释是按钮因此读作一块“被点亮”的深色字面表面而不是一枚彩色贴片。复刻时务必保留这一细节否则会明显偏离品牌气质。字体系统Circular 与 500 字重的排版纪律字体家族与回退链展示层与 UI 层使用CircularLineto 出品的几何人文主义无衬线字体属商业字体。回退链为Helvetica Neue, Helvetica, Arial。代码块使用系统等宽字体ui-monospace, Menlo, Monaco, Consolas, Liberation Mono, monospace不引入任何商业等宽 webfont。开源替代方案由于 Circular 是专有字体文档给出了明确的降级策略InterGoogle Fonts 开源字体是几何人文主义特征最接近的替代品展示层用字重 50064px 时配letter-spacing: -1.92pxGeist SansVercel 开源的字体是展示层与正文均可选的另一替代避免直接回退到 Helvetica 默认值——它更厚重缺少几何主义的温度。全层级表Token字号字重行高字距用途{typography.display-xxl}64px5001.1-1.92px首屏大标题{typography.display-xl}48px5001.1-1.44px章节开场{typography.display-lg}36px5001.15-0.72px子章节 / 定价档位{typography.display-md}28px5001.2-0.42px卡片标题{typography.heading-lg}22px5001.20紧凑标题{typography.heading-md}18px5001.40章节副标题{typography.body-lg}18px4001.550营销正文导语{typography.body-md}16px4001.50默认 UI 正文{typography.button-md}14px5001.00按钮标签{typography.caption}13px4001.450辅助说明、脚注{typography.micro}12px4001.450标签文字、极细印刷{typography.code}14px4001.50代码块内容排版原则展示层统一字重 500中等字重传达“工程化”而非“装饰性”是全系统的校准点展示层负字距-1.92px64px随字号等比收缩把圆润的人文主义字形收紧出编辑密度代码一律等宽系统 mono 家族Menlo / Monaco不引入专有等宽 webfont。布局与网格8px 基准、1280px 容器间距系统布局以8px 为基准单位同时提供 2 / 4 / 12px 的细分 Token 用于精细工作。完整刻度如下DESIGN.md LayoutToken值{spacing.xxs}2px{spacing.xs}4px{spacing.sm}8px{spacing.md}12px{spacing.lg}16px{spacing.xl}24px{spacing.xxl}32px{spacing.huge}64px应用标尺营销页面区块内边距 64–96px特性/定价卡片内部内边距固定 32px{spacing.xxl}。网格与容器营销页面居中于约1280px 容器无边缘出血——品牌始终把内容约束在框内定价栅格在 1024 / 768 断点处执行 4 列 → 2 列 → 1 列折叠产品 UI 截图在同一容器内双栏排列或渲染为重叠窗格。留白哲学品牌用慷慨的 64–96px 区块内边距营造呼吸感但绝不用氛围渐变填充空间——白色画布本身就是设计。合成产品 UI 截图承担了打破区块单调性的职责因此不需要额外装饰。纵深与高度用产品截图而非渐变造景Elevation 体系是一套克制的阴影阶梯DESIGN.md Elevation层级处理用途0平面1px 发丝线默认卡片1box-shadow: 0 1px 3px rgba(0,0,0,0.06)轻微卡片抬升2box-shadow: 0 8px 24px rgba(0,0,0,0.08)浮动合成的产品 UI 截图3box-shadow: 0 16px 48px rgba(0,0,0,0.12)模态遮罩、深层抬升装饰性纵深品牌的深度语言是“产品 UI 截图”而不是渐变。堆叠的仪表盘 / SQL 编辑器 / 日志窗格以 Level 2 的微妙阴影合成在一起暗示空间层级——这是“产品即品牌论点”的直接呈现。形状方中带圆的 6px 按钮圆角量表Token值用途{rounded.xs}4px表单输入、细边标签{rounded.sm}6px按钮品牌签名按钮圆角、代码块{rounded.md}8px紧凑卡片、告警{rounded.lg}12px定价卡片、特性卡片、产品截图容器{rounded.xl}16px模态对话框、大型容器边缘{rounded.full}9999px胶囊标签、头像注意一个容易踩坑的点按钮统一使用 6px 的{rounded.sm}——方正、技术感而胶囊形{rounded.full}只属于小标签与头像这是品牌刻意保留的形态纪律。图片几何品牌几乎不使用摄影。客户 Logo 条以统一高度约 24–32px的灰阶字标呈现极少数案例卡片使用 4:3 照片且必须内嵌在{rounded.lg}容器中。组件体系从 Token 组合到可复用组件文档 Frontmatter 中共定义了 16 个组件全部由色彩、字体、圆角、间距 Token 组合而成见 DESIGN.md Components。这是代理复刻时最直接的“积木清单”。按钮族组件背景文字圆角内边距说明button-primary-green{colors.primary}{colors.on-primary}近黑{rounded.sm}6px8px 16px签名 CTA全系统最重要的按钮button-primary-green-pressed{colors.primary-deep}{colors.on-primary}同上同上主按钮按压态加深至#24b47ebutton-secondary-outline{colors.canvas}{colors.ink}同上同上白底描边按钮1px{colors.hairline-strong}边框button-on-dark{colors.canvas-night}{colors.on-dark}同上同上深色表面 / 代码块 CTA 专用button-link透明{colors.ink}{rounded.xs}4px0纯文字内联按钮hover 时出现细下划线按钮统一使用{typography.button-md}14px / 500 / 行高 1.0。绿色按钮配近黑字是必须保留的品牌专属选择。卡片与容器组件背景文字圆角内边距用途card-feature-light{colors.canvas}{colors.ink}{rounded.lg}12px32px白色特性卡片1px{colors.hairline}边框card-pricing{colors.canvas}{colors.ink}{rounded.lg}12px32px标准定价档位标题heading-lg、价格display-md、正文body-md、CTA 沉底card-pricing-featured{colors.canvas-night}{colors.on-dark}{rounded.lg}12px32px反转深色特色档位结构同上card-feature-dark{colors.canvas-night}{colors.on-dark}{rounded.lg}12px32px深色特性卡片用于代码密集的特性讲解code-block{colors.canvas-night}{colors.on-dark}{rounded.sm}6px16px代码片段容器内容用{typography.code}再次印证品牌逻辑深色被保留给“产品相关”的场景代码、特色定价档位营销卡片始终在白色上。输入与表单text-input背景{colors.canvas}、文字{colors.ink}、字体{typography.body-md}16px、内边距 8px 12px、圆角{rounded.sm}6px、1px{colors.hairline}边框。导航nav-bar-light背景{colors.canvas}、文字{colors.ink}、内边距 16px 24px。结构为“左 Logo 中导航 右 Sign In 链接 实心button-primary-green”。标签与胶囊pill-tag-green背景{colors.primary}、文字{colors.on-primary}、字体{typography.micro}12px、内边距 2px 8px、圆角{rounded.full}——用于 “New” / 特色指示pill-tag-soft背景{colors.canvas-soft}、文字{colors.ink}形状同上——中性标签。标志性组件合成产品 UI 截图Composited Product UI Mockups多层仪表盘 / SQL 编辑器 / 日志窗格叠加配 Level 2 微妙阴影永远落在白色画布上、无任何周边装饰。“产品是品牌自己的论证”link-on-light正文内联链接{colors.ink}{typography.body-md} 常驻下划线footer-light全站页脚背景{colors.canvas}、文字{colors.ink-mute}、字体{typography.caption}13px、内边距 64px 24px容纳 4–5 列链接组、社交图标与小型法律行。设计边界Dos 与 DontsDo应该做将{colors.primary}翡翠绿只保留给实心 CTA 与字标强调——它必须稀缺出现展示字级使用字重 500 负字距——“工程化的紧凑感”本身就是品牌的一部分按钮统一使用{rounded.sm}6px 圆角——方正绝不胶囊形产品 UI 截图合成在{rounded.lg}容器内配 Level 2 微妙阴影绿色按钮上使用近黑{colors.ink}不是白色——绿色读作“被点亮的深色字面”这是品牌的专属决定所有代码块一律使用系统等宽字体。Dont禁止做不要把额外强调色引入系统色——紫、黄、粉只属于图表点和集成 Logo不要把展示字重抬到 500 以上——校准过的中字重在 600 时会崩坏不要用胶囊形按钮——品牌按钮圆角是方正的 6px不要在翡翠绿按钮上用白字——品牌刻意用绿底近黑字不要给首屏带加氛围渐变——白色画布就是设计本身。响应式行为断点断点名宽度关键变化Wide≥ 1440px全容器宽度产品截图满比例展示Desktop1024–1440px默认内容最大宽度定价 4 列Tablet768–1023px定价 2 列截图简化为单面板Mobile 768px定价 1 列汉堡菜单展示字级 64 → 36px触控目标按钮在移动端至少 ≥ 36×36px垂直内边距加大以维持 WCAG AA 标准表单字段最小高度保持 36px。折叠策略展示字级按 64 → 48 → 36 → 28 → 22px 阶梯收缩产品 UI 截图在移动端简化为单一主面板定价档位 4 → 2 → 1 列阶梯折叠深色特色档位始终保持区分。图片行为产品 UI 截图使用srcset提供桌面 / 移动裁剪两版移动裁剪聚焦在最具操作性的内部面板上。迭代指南让 DESIGN.md 持续进化文档最后给出了面向设计者的迭代流程DESIGN.md Iteration Guide一次只聚焦一个组件直接引用组件名与 Token如button-primary-green、{colors.primary}每次修改后运行npx google/design.md lint DESIGN.md校验文档正文默认使用{typography.body-md}任何面向开发者的片段使用{typography.code}保持翡翠绿稀缺——每个视口只允许一枚实心绿按钮白色画布承诺不可妥协——添加氛围背景即破坏品牌。结合仓库的 CONTRIBUTING.md这套流程同样适用于社区维护先开 issue 讨论再将文档与线上站点比对修正错误的色值、缺失的 Token 或薄弱的描述。在项目中落地 Supabase 设计语言整个仓库的使用方式只有两步见根 README.md 的 How to Use将 design-md/supabase/DESIGN.md 复制到你的项目根目录告诉你的 AI 代理“build me a page that looks like this”代理即会按文档中的 Token、组件与规则生成视觉一致的页面。由于文档本身就是结构化的 Token 声明 规则正文AI 无需解析任何配置文件即可直接读取。落地时建议把本文拆解的关键纪律一并写入提示词单一翡翠绿主色、6px 方正按钮、近黑 on-primary 文字、白色画布承诺、产品截图作为主要装饰。这套以 DESIGN.md 为契约的工作流正是当前“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点击查看免费下载相关推荐Webflow 视觉设计语言全解析以 DESIGN.md 设计令牌系统驱动 AI 生成一致化 UIWebflow 视觉设计语言全解析以 DESIGN.md 设计令牌系统驱动 AI 生成一致化 UI 本指南以仓库中 design md/webflow/DES文档Perfetto Agent Evals用一个 regex Grader 验证 ANR 原因——anr-why 案例与评分机制详解Perfetto Agent Evals用一个 regex Grader 验证 ANR 原因——anr why 案例与评分机制详解 本文以 Perfetto文档mini.nvim 的 mini.basics 模块实战指南Options / Mappings / Autocommands 一键预设与深度定制mini.nvim 的 mini.basics 模块实战指南Options / Mappings / Autocommands 一键预设与深度定制 mini.文档上一篇静态网站分析集成Instatic与Google Analytics 4的完美融合指南下一篇Bundlephobia无障碍合规性WCAG标准实现与测试方法创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
