文档【免费下载链接】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 中提取的 ClickHouse 设计系统分析文档完整还原其 YAML 设计令牌体系色彩、字体、间距、圆角、组件并结合该仓库的设计文档规范讲解如何让 AI 编码代理 / 设计代理读一份 Markdown 设计文档即可生成与 ClickHouse 官网视觉高度一致的界面。读完本文你将掌握 ClickHouse「黑底 电光黄」品牌语言的完整令牌取值、组件规格、响应式断点与迭代守则并可直接将这套规范复制进自己的项目驱动 AI 生成 UI。一、背景这份 DESIGN.md 是什么本仓库awesome-design-md是一个DESIGN.md 精选集合每一份DESIGN.md都是从真实网站提取出的纯文本设计系统文档供 AI 代理coding agents / design agents读取并据此生成视觉一致的 UI。按仓库 README.md 的说明其理念来自 Google Stitch 引入的 DESIGN.md 概念——一份普通的 Markdown 文件即可定义项目的视觉语言无需 Figma 导出、JSON schema 或专门工具AGENTS.md告诉编码代理“如何构建项目”DESIGN.md告诉设计代理“项目应该如何呈现、如何感受”。design-md/clickhouse/目录下即 ClickHouse 的完整设计分析文档包含三大部分YAML frontmatter设计令牌 Overview视觉基调 分章节的规范细则色彩、字体、布局、层级、形状、组件、Dos and Donts、响应式、迭代指南、已知缺口。这是一份面向 AI 生成的“可直接执行”的设计系统而非停留在描述层面的品牌手册。二、文档结构与令牌引用语法ClickHouse 的DESIGN.md采用「YAML frontmatter 定义令牌 Markdown 正文阐述规则」的双层结构。文档内所有取值均通过{token.refs}语法引用 YAML 中定义的令牌任何位置都不内联十六进制色值——这是本文件最重要的工程约束见 Iteration Guide 第 3 条。例如colors: primary: #faff69正文中即写作主色为{colors.primary}#faff69。组件定义同样引用令牌如按钮的backgroundColor: {colors.primary}。这种引用方式确保改动一处令牌、全站同步也便于 AI 代理直接展开成 CSS 变量或 Tailwind 配置。三、视觉主题与品牌基调OverviewClickHouse 的营销界面是数据库 / 数据平台品类中对比度最高的界面。核心基调可以浓缩为一句话近纯黑画布{colors.canvas}— #0a0a0a 电光黄{colors.primary}— #faff69作为唯一的品牌电压。黄色的使用遵循「元素层面稀缺、色带层面慷慨」的节奏单个元素上只用一点主 CTA、统计数字、“GET STARTED” 徽章但在整幅铺满的黄色 CTA 卡片上却毫不吝啬。白色粗体weight 700无衬线文字锚定正文的编辑感。文档还给出了品类对比定位Snowflake 用冷蓝色渐变、Databricks 用红 石板灰而 ClickHouse 只押注一种电光黄来完成全部品牌工作。代码块、终端输出、产品 UI 片段都直接内嵌在深色{colors.surface-card}#1a1a1a卡片中贯穿每一页。字体层面全部使用Interdisplay 标题用 700 且负字距-1 到 -2.5px副标题与按钮 600正文 400。系统没有衬线副声部——单一几何人文主义无衬线字体通过缩放和字重构建层级。关键特征清单Key Characteristics近纯黑画布{colors.canvas}— #0a0a0a 白色文字系统不存在浅色模式营销界面电光黄主色{colors.primary}— #faff69用于主 CTA、大型统计数字2.8k、74k、整幅黄色 CTA 色带Inter 字重 700display/ 600副标题 按钮/ 400正文无衬线对立声部深色表面卡片{colors.surface-card}— #1a1a1a承载特性卡、代码窗口与产品 mockup卡片仅比画布略亮色块对比微妙代码块在{colors.surface-card}内用JetBrains Mono渲染SQL 语法高亮采用克制的蓝 / 黄 / 灰统计数字 黄色 无衬线 700 超大字号承载可信度时刻779、2.8k、47k 社区 / 贡献者 / star 数圆角层级化{rounded.md}8px用于按钮{rounded.lg}12px用于内容卡除标签徽章外不使用 pill大区块之间使用{spacing.section}96px的章节节奏。四、色彩系统Colors品牌与强调色Brand Accent令牌取值角色{colors.primary}#faff69电光黄签名品牌色所有主 CTA 背景、大型统计数字、整幅黄色 CTA 卡{colors.primary-active}#e6eb52按下 / hover 加深变体{colors.primary-disabled}#3a3a1f深色画布上的去饱和暗黄禁用态表面色Surface令牌取值角色{colors.canvas}#0a0a0a默认页面底色近纯黑{colors.surface-soft}#121212区块分隔、极柔色带{colors.surface-card}#1a1a1a特性卡、代码窗口、产品 mockup、定价卡{colors.surface-elevated}#242424深色大卡内部嵌套的小卡{colors.surface-yellow-band}#faff69黄色 CTA 卡 / 色带填充与主色同值{colors.hairline}#2a2a2a卡片 1px 边框{colors.hairline-strong}#3a3a3a输入框下划线等较重分隔线文字色Text令牌取值角色{colors.on-dark}#ffffff全部标题与主要文字{colors.body}#cccccc默认正文色{colors.body-strong}#e6e6e6强调段落{colors.muted}#888888页脚链接、说明、面包屑{colors.muted-soft}#5a5a5a三级文字、小字{colors.on-primary}/{colors.on-yellow}#0a0a0a黄色 CTA 与黄色色带上的黑字高对比黄 黑是品牌行动信号语义 / 强调色Semantic / Accent令牌取值角色{colors.accent-emerald}#22c55e成功状态、产品 UI 中“active”指示器{colors.accent-rose}#ef4444错误状态、“down”指示器{colors.accent-blue}#3b82f6信息状态、代码语法高亮值得注意的是语义色与产品 UI 相关而营销界面几乎只使用黄 黑 灰阶。语义色体系独立存在但不会侵入营销页面的品牌表达。五、字体系统Typography字体族Font FamilyInter承担一切——display、正文、导航、按钮、说明文字JetBrains Mono仅用于代码块回退栈-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif。单一字体族是刻意决策Inter 的 700 / 600 / 400 三档字重即可覆盖完整层级无需衬线或 display 对立声部。Inter 在自信粗体下的几何人文主义性格赋予 ClickHouse 一种“精密、工程化”的观感与其性能优先的数据库定位吻合。完整层级表Hierarchy令牌字号字重行高字距用途{typography.display-xl}72px7001.05-2.5px首页 H1The leading database for AI{typography.display-lg}56px7001.1-2px区块标题{typography.display-md}40px7001.15-1.5px子区块标题、CTA 色带标题{typography.display-sm}32px7001.2-1px卡片标题、定价档位价格{typography.title-lg}24px7001.3-0.3px定价方案名、较大特性标题{typography.title-md}18px6001.40卡片标题、导语段落{typography.title-sm}16px6001.40小卡片标题、列表标签{typography.stat-display}56px7001.0-1.5px统计数字779、47k——永远是黄色{typography.body-md}16px4001.550默认正文{typography.body-sm}14px4001.550页脚正文、小字{typography.caption}13px5001.40徽章标签、说明{typography.caption-uppercase}12px6001.41.5px区块标签、NEW 徽章{typography.code}14px4001.550代码块——JetBrains Mono{typography.button}14px6001.00标准按钮标签{typography.nav-link}14px5001.40顶部导航菜单项原则PrinciplesDisplay 字重全尺寸保持700负字距-1 到 -2.5px是必备项——Inter 700 若无负字距会显得过宽、像 Apple 营销风收紧的字距正是 ClickHouse“精密、工程化”观感的来源正文与标签保持 400 / 500 / 600 字重层级靠「字号 字重」构建而非字体族对比。字体替代Font Substitutes文档记录Inter 是开源且被选定的字体。若获得授权Söhne是接近的商业替代Geist是另一款现代替代。除此之外不应更换字体族。六、布局系统Layout间距系统Spacing System基础单位4px令牌序列{spacing.xxs}4px ·{spacing.xs}8px ·{spacing.sm}12px ·{spacing.md}16px ·{spacing.lg}24px ·{spacing.xl}32px ·{spacing.xxl}48px ·{spacing.section}96px区块间距{spacing.section}96px用于主要编辑带之间卡片内边距特性卡 / 定价档位用{spacing.xl}32px代码窗口卡 / 活动卡用{spacing.lg}24px。网格与容器Grid Container最大内容宽度约1280px居中编辑区正文单一 12 列网格hero 常用7/5 分割左 H1右代码 mockup特性卡网格桌面 3 列、平板 2 列、移动端 1 列定价网格桌面 3–4 列、移动端 1 列。留白哲学Whitespace PhilosophyClickHouse 使用致密、略微压缩的留白——符合开发者工具品牌的定位宽松到足以编辑式阅读紧凑到呈现“工程级”而非“营销柔”的感觉。区块节奏 96px 为标准特性卡内边距维持 32px。七、层级与深度Elevation Depth层级处理方式用途Flat无阴影、无边框正文区块、顶部导航、heroSoft hairline1px{colors.hairline}边框代码窗口卡、内容卡Surface card{colors.surface-card}背景——无阴影特性卡、定价档位、活动卡Yellow band{colors.primary}背景——无阴影整幅黄色 CTA 卡 / 色带整个系统不使用投影drop shadow。深度来自黑画布与{colors.surface-card}比画布略亮的色调之间的对比——这种对比微妙而克制更像“工程级暗面板”而非“浮起卡片”。装饰性深度Decorative Depth代码窗口卡自带内部产品 chrome——行号、语法高亮、底部状态栏——在不依赖外部阴影的情况下增加视觉密度黄底黑字的对比承担了 CTA 的主要“抬升”工作。八、形状与圆角Shapes令牌取值用途{rounded.xs}4px徽章点缀专用{rounded.sm}6px小型行内按钮{rounded.md}8px标准 CTA 按钮、文本输入框{rounded.lg}12px内容卡、代码窗口卡、定价档位{rounded.pill}9999px徽章药丸{rounded.full}9999px / 50%头像、圆形图标按钮圆角的层级化非常明确按钮 8px、内容卡 12px、pill 仅限标签徽章——Dos and Donts 中会再次强调这一点。九、组件体系Components组件定义位于 YAML frontmatter 的components:段每个组件通过backgroundColor/textColor/typography/rounded/padding/height等键引用令牌构成可执行规格。顶部导航Top Navigationtop-nav——黑色导航栏固定顶部64px 高、{colors.canvas}背景。左侧 ClickHouse logo 字标中左为横向主菜单Product, Use Cases, Pricing, Resources, Customers右侧为 “Sign in” “Get Started”{component.button-primary}黄色。菜单项使用{typography.nav-link}Inter 14px / 500。按钮Buttons组件规格要点用途button-primary背景{colors.primary}#faff69、文字{colors.on-primary}黑、{typography.button}Inter 14px / 600、内边距 12px × 20px、高 40px、圆角{rounded.md}8px签名黄 CTA黄 黑组合具有标志性button-primary-active背景{colors.primary-active}、文字{colors.on-primary}、圆角{rounded.md}按下 / 激活态button-primary-disabled背景{colors.primary-disabled}、文字{colors.muted}、圆角{rounded.md}禁用态button-secondary背景{colors.surface-card}、文字{colors.on-dark}、与主按钮同形暗面次级按钮button-text-link透明背景、文字{colors.on-dark}“Sign in” 与行内链接 CTAtext-link透明背景、文字{colors.primary}暗底黄、下划线行内正文链接button-icon-circular背景{colors.surface-card}、文字{colors.on-dark}、圆角{rounded.full}、36 × 36圆形图标按钮卡片与容器Cards Containers组件规格要点用途hero-band黑画布 hero7-5 网格左为 H1 副标题 按钮行右为代码窗口或产品 mockup垂直内边距{spacing.section}96px首页首屏hero-stat-card画布上直排的黄色统计数字779、47k无卡面——仅{typography.stat-display}56px / 700黄字hero 可信度数字feature-card-yellow整幅黄色卡Built for every modern data challenge背景{colors.primary}、文字{colors.on-yellow}黑、圆角{rounded.lg}、内边距{spacing.xl}32px黄色卡本身就是视觉强调feature-card-dark标准暗色特性卡背景{colors.surface-card}、文字{colors.on-dark}、圆角{rounded.lg}、内边距{spacing.xl}常规特性展示code-window-card展示 SQL 代码块的暗卡背景{colors.surface-card}、JetBrains Mono 代码 语法高亮、圆角{rounded.lg}、内边距{spacing.lg}24px开发者页面的 hero 右侧常驻产物product-mockup-card展示真实产品 UI查询编辑器、仪表盘、监控面板的卡片形状同feature-card-dark内部嵌产品 chrome产品界面展示pricing-tier-card标准档位卡背景{colors.surface-card}、圆角{rounded.lg}、内边距{spacing.xl}定价档位pricing-tier-card-featured精选档位翻转为{colors.primary}黄黄色表面即精选信号定价页主推档位stat-callout行内黄色统计数字779、2.8k、47k透明背景、文字{colors.primary}、{typography.stat-display}——平面布局块而非卡面可信度数据events-card/company/events 页事件卡事件标题、{typography.caption-uppercase}日期、地点与 Register CTA圆角{rounded.lg}、内边距{spacing.lg}活动列表customer-logo-strip横向单色客户 logo 条背景{colors.canvas}、logo 用{colors.muted}、垂直内边距{spacing.xl}32px客户墙输入与表单Inputs Forms组件规格要点text-input暗色输入框背景{colors.surface-card}、文字{colors.on-dark}、圆角{rounded.md}8px、内边距 10px × 14px、高 40pxtext-input-focused聚焦态边框加粗为{colors.primary}黄色以强调标签 / 徽章Tags / Badges组件规格要点badge-pill小暗色药丸标签背景{colors.surface-card}、文字{colors.on-dark}、{typography.caption}、圆角{rounded.pill}badge-yellow黄色药丸背景{colors.primary}、文字{colors.on-primary}、{typography.caption-uppercase}、圆角{rounded.pill}——用于 NEW、GET STARTED 强调标签页 / 筛选Tab / Filtercategory-tabcategory-tab-active——暗色页签导航未激活为透明 muted 文字激活为 surface-card 背景 on-dark 文字。内边距 8px × 14px、圆角{rounded.md}。CTA / 页脚CTA / Footer组件规格要点cta-band-yellow页脚前的 Deploy your way CTA 色带整幅黄色填充、黑字、圆角{rounded.lg}、内边距 64px承载{typography.display-md}H2 与 CTA通常是黄面上的黑按钮footer每页收尾的黑页脚背景{colors.canvas}、文字{colors.muted}桌面 4 列链接Product / Use Cases / Resources / Company垂直内边距 64px顶部 ClickHouse 字标用{colors.on-dark}十、Dos and Donts使用守则Do应该做每页锚定黑画布黄 黑组合就是品牌电压把{colors.primary}黄留给主 CTA、统计数字与整幅黄色 CTA 色带——元素级稀缺 色带级慷慨正是黄色力量的来源每个 display 标题使用 Inter 700 且字距 -1 到 -2.5px在{component.code-window-card}中展示真实 SQL 代码块——ClickHouse 是数据库要展示查询本身不要画营销插画式的查询用{component.stat-callout}数字建立可信度社区规模、贡献者、性能基准——黄色统计数字是签名式表达每个区块用{spacing.section}96px锚定垂直节奏。Dont不要做不要引入第二种品牌色——ClickHouse 是单色 黄不要将 display 字重加粗到 700 以上也不要用 500 做标题——层级靠字号而非字重渐变不要在正文或大型表面填充中使用黄色刻意黄色卡除外不要在小型徽章之外使用圆角按钮 / 药丸——标准按钮圆角是 8pxmd不要连续两个区块重复同一种表面模式——黑画布 → 暗色特性卡 → 黄色 CTA 卡 → 黑画布 → 代码窗口卡不要用抽象插画替代 SQL 代码 mockup——代码本身就是营销电压不要添加系统未编码的 hover 样式。十一、响应式行为Responsive Behavior断点Breakpoints名称宽度关键变化Mobile 768px汉堡导航hero H1 72→36pxcode-window-card 下移堆叠特性网格 1 列定价 1 列Tablet768–1024px顶部导航收紧特性卡 2 列定价 2 列Desktop1024–1440px完整顶部导航特性卡 3 列定价 3–4 列Wide 1440px同桌面更多呼吸空间最大内容 1280px触控目标Touch Targets{component.button-primary}最小 40 × 40px{component.button-icon-circular}恰好 36 × 36——略低于 WCAG 44px 建议视觉居中{component.text-input}高度 40px。折叠策略Collapsing Strategy顶部导航在 768px 折叠为汉堡菜单hero 7-5 网格移动端变单列特性卡网格减少列数而非缩放代码窗口卡保持字号移动端在卡片内横向滚动定价卡 4 → 2 → 1 折叠精选黄色档位保持视觉差异。图片行为Image Behavior暗色 mockup 内的代码块保持固定字号移动端横向滚动而非换行单色客户 logo 条保持原生宽度移动端换行排列。十二、迭代指南Iteration Guide文档为后续维护者规定了迭代规范这也是 AI 代理扩展这套系统时应遵循的准则一次只关注一个组件引用其 YAML 键如{component.code-window-card}、{component.pricing-tier-card-featured}既有组件的变体-active、-disabled、-focused作为独立条目存在全程使用{token.refs}永不内联 hex永远不记录 hover——只记录默认态与 Active/Pressed 态display 标题保持 Inter 700 负字距正文保持 Inter 400黄 黑组合是品牌契约不要用次要强调色软化它不确定如何强调时先放大 Inter 700再考虑加色。十三、已知缺口Known Gaps原文档对自身的局限做了诚实记录使用时应知晓以下边界电光黄 #faff69 是从截图中采样的ClickHouse 官方可能发布略有差异的官方品牌色Inter 字重轴超出 400 / 500 / 600 / 700 的取值未正式化——仅记录了观察到的静态字重动画与过渡时长代码打字机效果、统计数字计数动画不在范围内除{component.text-input-focused}外的表单校验状态未提取实际 ClickHouse Cloud 产品表面查询控制台、监控仪表盘、表浏览器与营销站点共享部分令牌但增加了大量文档范围外的产品专属组件客户 logo 条的精确透明度 / 处理方式有所变化——muted 灰是近似值。十四、如何在你的项目中落地这套设计语言结合本仓库 README.md 的使用流程落地步骤非常简单将 design-md/clickhouse/DESIGN.md 复制到你的项目根目录对 AI 编码代理或 Google Stitch 说一句“build me a page that looks like this”代理即可基于 YAML 令牌生成视觉一致的 UI——包括黑画布底色、黄色 CTA、96px 章节节奏、代码窗口卡等全部规格。如果你要基于这份文档手工实现而非交给代理核心执行顺序是先落地colors段为 CSS 变量再落地typography段为字体工具类注意 Inter 700 的负字距随后按rounded/spacing建立间距与圆角刻度最后按components段逐个实现按钮、卡片、导航与页脚并遵守第十节的 Dos and Donts 与第十一节的响应式断点。参考文件clickhouse 设计分析文档、仓库总说明、贡献指南。总而言之ClickHouse 的这份 DESIGN.md 是“数据库品类最高对比度界面”的完整可执行规范一套黑 黄令牌、一套 Inter 字重层级、一套克制无投影的表面系统外加清晰的守则与断点。它既是一份品牌分析更是一份开箱即用的 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点击查看免费下载相关推荐OpenDesign Minimal 设计系统完全指南从 DESIGN.md 品牌规范到 tokens.css 语义令牌的落地实践OpenDesign Minimal 设计系统完全指南从 DESIGN.md 品牌规范到 tokens.css 语义令牌的落地实践 本指南围绕 OpenDesAI 应用人工智能AI 技能设计系统媒体生成OpenDesign ClickHouse 设计系统解析纯黑画布上的高性能数据控制台美学实战指南OpenDesign ClickHouse 设计系统解析纯黑画布上的高性能数据控制台美学实战指南 本文基于 OpenDesign 仓库中 design sysAI 应用人工智能AI 技能设计系统媒体生成Gutenberg 自动 Cherry-pick 脚本实战一条命令将带标签的 PR 回移植到发布分支Gutenberg 自动 Cherry pick 脚本实战一条命令将带标签的 PR 回移植到发布分支 本指南围绕 Gutenberg 仓库中的 docs/co文档上一篇aiohttp 异常体系中的 args 类型收窄HTTP 解析异常的结构化载荷与类型安全下一篇Paper Writing Pipeline Report创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考