• 文档

导读：本文以开源仓库 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。

从文件结构看，这份文档由两大部分组成：

1. YAML Frontmatter（Token 定义区）：声明了version: alpha，文件名为Supabaze-Inspired-design-analysis——即对 Supabase（开源数据库平台）设计语言的“灵感化解读”，并在 description 中概括其风格：白色与近黑构成的主系统、唯一的翡翠绿 CTA、自定义人文主义无衬线展示字级，以及合成在产品首屏上方的密集产品 UI 截图。
2. Markdown 正文（规则区）：从 Overview、Colors、Typography、Layout、Elevation、Shapes、Components、Do's and Don'ts、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），将所有色值归纳为三组语义角色。

品牌与强调色

关键规则：紫、黄、粉等强调色永远只是“图表内部与集成 Logo”的局部存在，一旦进入按钮、导航等系统级组件即视为越界。

表面色

文本色

其中on-primary是整套系统最“反直觉”也最标志性的决定：绿色按钮上印的是近黑文字而不是白色。文档对此的解释是：按钮因此读作一块“被点亮”的深色字面表面，而不是一枚彩色贴片。复刻时务必保留这一细节，否则会明显偏离品牌气质。

字体系统：Circular 与 500 字重的排版纪律

字体家族与回退链

展示层与 UI 层使用Circular（Lineto 出品的几何人文主义无衬线字体，属商业字体）。回退链为'Helvetica Neue', Helvetica, Arial。代码块使用系统等宽字体ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', monospace，不引入任何商业等宽 webfont。

开源替代方案

由于 Circular 是专有字体，文档给出了明确的降级策略：

• Inter（Google Fonts 开源字体）是几何人文主义特征最接近的替代品，展示层用字重 500，64px 时配letter-spacing: -1.92px；
• Geist Sans（Vercel 开源的字体）是展示层与正文均可选的另一替代；
• 避免直接回退到 Helvetica 默认值——它更厚重，缺少几何主义的温度。

全层级表

排版原则

• 展示层统一字重 500：中等字重传达“工程化”而非“装饰性”，是全系统的校准点；
• 展示层负字距：-1.92px（64px）随字号等比收缩，把圆润的人文主义字形收紧出编辑密度；
• 代码一律等宽：系统 mono 家族（Menlo / Monaco），不引入专有等宽 webfont。

布局与网格：8px 基准、1280px 容器

间距系统

布局以8px 为基准单位，同时提供 2 / 4 / 12px 的细分 Token 用于精细工作。完整刻度如下（DESIGN.md Layout）：

应用标尺：营销页面区块内边距 64–96px；特性/定价卡片内部内边距固定 32px（{spacing.xxl}）。

网格与容器

• 营销页面居中于约1280px 容器，无边缘出血——品牌始终把内容约束在框内；
• 定价栅格在 1024 / 768 断点处执行 4 列 → 2 列 → 1 列折叠；
• 产品 UI 截图在同一容器内双栏排列，或渲染为重叠窗格。

留白哲学

品牌用慷慨的 64–96px 区块内边距营造呼吸感，但绝不用氛围渐变填充空间——白色画布本身就是设计。合成产品 UI 截图承担了打破区块单调性的职责，因此不需要额外装饰。

纵深与高度：用产品截图而非渐变造景

Elevation 体系是一套克制的阴影阶梯（DESIGN.md Elevation）：

装饰性纵深：品牌的深度语言是“产品 UI 截图”，而不是渐变。堆叠的仪表盘 / SQL 编辑器 / 日志窗格以 Level 2 的微妙阴影合成在一起，暗示空间层级——这是“产品即品牌论点”的直接呈现。

形状：方中带圆的 6px 按钮

圆角量表

注意一个容易踩坑的点：按钮统一使用 6px 的{rounded.sm}——方正、技术感，而胶囊形（{rounded.full}）只属于小标签与头像，这是品牌刻意保留的形态纪律。

图片几何

品牌几乎不使用摄影。客户 Logo 条以统一高度（约 24–32px）的灰阶字标呈现；极少数案例卡片使用 4:3 照片，且必须内嵌在{rounded.lg}容器中。

组件体系：从 Token 组合到可复用组件

文档 Frontmatter 中共定义了 16 个组件，全部由色彩、字体、圆角、间距 Token 组合而成（见 DESIGN.md Components）。这是代理复刻时最直接的“积木清单”。

按钮族

按钮统一使用{typography.button-md}（14px / 500 / 行高 1.0）。绿色按钮配近黑字是必须保留的品牌专属选择。

卡片与容器

再次印证品牌逻辑：深色被保留给“产品相关”的场景（代码、特色定价档位），营销卡片始终在白色上。

输入与表单

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 列链接组、社交图标与小型法律行。

设计边界：Do's 与 Don'ts

Do（应该做）

• 将{colors.primary}翡翠绿只保留给实心 CTA 与字标强调——它必须稀缺出现；
• 展示字级使用字重 500 + 负字距——“工程化的紧凑感”本身就是品牌的一部分；
• 按钮统一使用{rounded.sm}6px 圆角——方正，绝不胶囊形；
• 产品 UI 截图合成在{rounded.lg}容器内，配 Level 2 微妙阴影；
• 绿色按钮上使用近黑{colors.ink}（不是白色）——绿色读作“被点亮的深色字面”，这是品牌的专属决定；
• 所有代码块一律使用系统等宽字体。

Don't（禁止做）

• 不要把额外强调色引入系统色——紫、黄、粉只属于图表点和集成 Logo；
• 不要把展示字重抬到 500 以上——校准过的中字重在 600+ 时会崩坏；
• 不要用胶囊形按钮——品牌按钮圆角是方正的 6px；
• 不要在翡翠绿按钮上用白字——品牌刻意用绿底近黑字；
• 不要给首屏带加氛围渐变——白色画布就是设计本身。

响应式行为

断点

触控目标

• 按钮在移动端至少 ≥ 36×36px，垂直内边距加大以维持 WCAG AA 标准；
• 表单字段最小高度保持 36px。

折叠策略

• 展示字级按 64 → 48 → 36 → 28 → 22px 阶梯收缩；
• 产品 UI 截图在移动端简化为单一主面板；
• 定价档位 4 → 2 → 1 列阶梯折叠，深色特色档位始终保持区分。

图片行为

产品 UI 截图使用srcset提供桌面 / 移动裁剪两版，移动裁剪聚焦在最具操作性的内部面板上。

迭代指南：让 DESIGN.md 持续进化

文档最后给出了面向设计者的迭代流程（DESIGN.md Iteration Guide）：

1. 一次只聚焦一个组件；
2. 直接引用组件名与 Token（如button-primary-green、{colors.primary}）；
3. 每次修改后运行npx @google/design.md lint DESIGN.md校验文档；
4. 正文默认使用{typography.body-md}，任何面向开发者的片段使用{typography.code}；
5. 保持翡翠绿稀缺——每个视口只允许一枚实心绿按钮；
6. 白色画布承诺不可妥协——添加氛围背景即破坏品牌。

结合仓库的 CONTRIBUTING.md，这套流程同样适用于社区维护：先开 issue 讨论，再将文档与线上站点比对，修正错误的色值、缺失的 Token 或薄弱的描述。

在项目中落地 Supabase 设计语言

整个仓库的使用方式只有两步（见根 README.md 的 How to Use）：

1. 将 design-md/supabase/DESIGN.md 复制到你的项目根目录；
2. 告诉你的 AI 代理“build me a page that looks like this”，代理即会按文档中的 Token、组件与规则生成视觉一致的页面。

由于文档本身就是结构化的 Token 声明 + 规则正文，AI 无需解析任何配置文件即可直接读取。落地时建议把本文拆解的关键纪律一并写入提示词：单一翡翠绿主色、6px 方正按钮、近黑 on-primary 文字、白色画布承诺、产品截图作为主要装饰。这套以 DESIGN.md 为契约的工作流，正是当前“AI 生成 UI”链路中保证视觉一致性的核心实践——文档即规范，规范即可执行。

• 文档