Ollama 设计系统解码：从 Markdown 首页到 DESIGN.md 设计令牌的极简文档化体系

文档【免费下载链接】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 中提取的 Ollama 设计系统文档 为骨架系统拆解这个激进克制的终端优先terminal-first、单色极简设计体系如何用纯黑 纯白 三个中性灰的微型工具色板构建一整个营销站点如何用{rounded.full}药丸几何统一所有交互元素以及如何把定价页、FAQ、安装命令全部装进文档即系统的同一张纸上。读完本文你将掌握该 DESIGN.md 文件中全部色板令牌、排版令牌、圆角/间距刻度、组件规格与响应式断点并能直接把它投入 AI Agent 生成与 Ollama 视觉语言一致的 UI。一、为什么这是文档即系统的教科书案例Ollama 的官网是 AI 工具领域最刻意不做设计的营销页面而这份 DESIGN.md 的 front matter 开篇就点明了设计哲学一个近乎挑衅式极简的文档优先系统把首页当作一份 Markdown README 来对待——纸白画布、36px 居中标题、单个黑色胶囊 CTA、一行内联终端安装命令以及一只手绘羊驼吉祥物作为唯一的装饰元素。没有渐变、没有英雄摄影、没有营销烟火。在 awesome-design-md 的定位中Ollama 被概括为 Run LLMs locally. Terminal-first, monochrome simplicity——终端优先、单色极简。这份 DESIGN.md 把整套视觉语言压缩成机器可读的 YAML front matter颜色、排版、圆角、间距、组件五张令牌表加一段段结构化的 Markdown 说明任何 AI 编码 Agent 或 Google Stitch 类的设计 Agent 都能直接读取并按此生成一致 UI。设计哲学可以总结为几何化的三条铁律药丸几何一切交互元素折叠到{rounded.full}9999px——按钮、搜索胶囊、安装命令胶囊、文本输入框、终端红绿灯圆点全是胶囊。零装饰没有装饰性投影、没有渐变、没有羊驼之外的英雄插画。单一倒置时刻全系统唯一的反转表面是深色 Max 定价档位——{colors.surface-dark}配白字是整个平坦布局中唯一的注意我提示。二、设计令牌总览front matter 是系统的骨架这份 DESIGN.md 以 YAML front matter 定义了整套设计令牌tokens这是 Agent 生成 UI 时读取的第一层数据。令牌通过{colors.xxx}、{typography.xxx}、{rounded.xxx}、{spacing.xxx}、{component.xxx}五种引用语法互相引用例如button-primary的backgroundColor: {colors.primary}。以下按域完整还原令牌表。1. 色板ColorsOllama 的色板是一个微型工具色板纯黑、纯白、三个中性灰外加深色反转表面和终端红绿灯语义色。令牌值角色primary#000000品牌色。所有主 CTA、黑色胶囊、导航链接、实心图标on-primary#ffffff主按钮上的文本ink#000000所有标题、导航链接、浅色表面按钮文字、定价ink-deep#090909主胶囊的按压态比纯黑低一个档charcoal#525252列表项文字、禁用态次级文案body#737373段落正文、FAQ 答案、页脚链接——除纯黑外最常用的文字色mute#a3a3a3说明文字、终端模拟器中的注释灰canvas#ffffff页面本身几乎所有表面surface-soft#fafafa安装命令胶囊背景、搜索胶囊、次级 chip 背景surface-card#ffffff卡片表面hairline#e5e5e51px 卡片边框、页脚上方分隔线、FAQ 行分隔hairline-strong#d4d4d4需要更强分隔时使用如不相关 FAQ 分组之间on-dark#ffffff深色表面上的主文本on-dark-mutergba(255,255,255,0.7)深色 Max 定价卡内的次级文案surface-dark#171717深色 Max 定价卡与深色 CTA 条全系统唯一反转表面focus-ringrgba(59,130,246,0.5)半透明蓝浏览器默认焦点环全系统唯一的蓝色terminal-red#ff5f56终端红绿灯关闭窗点terminal-yellow#ffbd2e终端红绿灯最小化点terminal-green#27c93f终端红绿灯缩放点值得注意的语义设计公开营销表面几乎没有错误/成功/警告色板——没有校验态、没有破坏性流程、没有横幅。唯一的语义色是终端模拟器内的 macOS 红绿灯仅出现在{component.terminal-card}中别无他用。2. 排版Typography排版采用库存 Apple组合SF Pro Rounded 做展示标题 系统无衬线ui-sans-serif做正文 系统等宽ui-monospace做代码。设计决策是不做排版决策——品牌化展示字体反而会破坏系统的文档感。字体家族三层SF Pro Rounded展示标题Apple 的圆角几何无衬线500/600 字重用于{typography.display-xl}36px到{typography.heading-lg}24px回退system-ui→-apple-system。ui-sans-serif正文、链接、按钮、说明文字操作系统默认无衬线承载 12–20px 的所有非展示文本角色经system-ui与平台 emoji 字体回退。ui-monospace代码、安装命令、命令标签系统默认等宽用于终端模拟器、内联 curl 安装胶囊与code格式回退顺序 SFMono-Regular → Menlo → Monaco → Consolas。完整层级表Token / 尺寸 / 字重 / 行高 / 字距 / 用途TokenSizeWeightLine HeightLetter SpacingUsedisplay-xl36px5001.110英雄标题The easiest way to build with open modelsdisplay-lg30px5001.20大节标题Pricing、Frequently asked questionsheading-lg24px6001.330节内小标题Automate your work、Start local. Scale cloud.heading-md20px5001.40定价档位名Free、Pro、Max、卡片标题heading-sm18px5001.560FAQ 问题标签、卡片内副标题body-md16px4001.50默认正文、FAQ 答案、段落body-strong16px5001.50行内强调、主导航链接body-sm14px4001.430特性列表feature bullet、页脚链接body-sm-strong14px5001.430按钮标签、定价卡眉题caption-sm12px4001.330页脚版权行、最小元信息code-md16px4001.50安装命令 curl 行、终端内命令code-sm14px4001.430终端输出行、内联codechipbutton-md14px50010全系统所有按钮标签排版原则整个层级为小字号 平坦白画布的可读性服务。标题到正文的比率压缩得很紧36 → 30 → 24 → 20 → 16页面读起来像单一可读列而非营销金字塔几乎无字距变化、无展示专用字重、无斜体。字体替代方案文档明确给出SF Pro Rounded 仅随 Apple 平台发布Windows/Linux 上回退为system-uiSegoe UI / Roboto / DejaVu SansOllama 明确接受标题字体跨平台略有差异。最接近的开源替代是Nunito圆角几何无衬线500/600 字重正文Inter几乎完美匹配system-ui渲染度量代码JetBrains Mono或Fira Code是ui-monospace的经典开源替代。3. 圆角与间距Rounded Spacing圆角刻度是两种值统治一切的几何词汇TokenValueUserounded.none0px导航、页脚、FAQ 行分隔——扁平结构线rounded.sm6px内联代码 chip、命令标签rounded.md8px罕见的适中圆角表面如下拉面板rounded.lg12px定价卡、终端模拟卡rounded.full9999px每个按钮、每个胶囊输入、安装命令胶囊、搜索胶囊、红绿灯圆点不存在中等圆角软卡片——表面要么是胶囊要么是圆角大到足够刻意柔和的矩形。间距系统以 8px 为基准单位细粒度可到 2/4pxspacing.xxs2px·xs4px·sm8px·md12px·lg16px·xl24px·xxl32px·section88px通用节律每个页面在主要内容块之间使用{spacing.section}88px垂直间距hero → automate → start local/scale cloud → your data stays yours → get-started 页脚这是全系统最大的间距令牌被大量使用。定价卡内边距{spacing.xxl}32pxFAQ 行仅 16px 垂直间距、无水平内边距。三、布局、层次与深度布局系统内容列宽首页约 720px 内容列整页是单一窄阅读列特定区块内可选双列拆分。定价网格桌面端 3 列卡片最大内容宽约 960px768px 以下折叠为单列。Automate-your-work 分栏桌面 50/50 左文右终端模拟移动端垂直堆叠、终端在文字下方。FAQ单列堆叠行在 720px 内容列内全宽。页脚单行小号 body-sm 链接桌面居中窄屏折为两行。留白哲学留白就是整个布局。区块间靠 88px 纯白空气分隔从不使用装饰性分隔线或彩色色带。页面被当作一份长文 Markdown 文档处理区块之间的空气等价于 Markdown 源码中的空行。层次与深度系统完全没有投影drop-shadow层级——没有任何东西浮起。LevelTreatmentUse0 — Flat无边框无阴影Hero、automate-your-work、your-data-stays-yours、页脚——页面主导处理1 — Hairline border1px 实线{colors.hairline}定价卡、FAQ 行分隔、终端模拟卡2 — Inverted dark{colors.surface-dark}填充深色 Max 定价卡与深色 CTA 条——系统唯一的抬升表面靠颜色而非阴影装饰性深度仅来自两个反复出现的装置手绘羊驼吉祥物hero 顶部出现一次、每个定价卡顶部一次、锁图标旁一次是系统唯一插画与单线锁图标数据隐私区仅描边无填充以{colors.ink}绘制。图形几何系统没有摄影。仅有的类图片元素是羊驼吉祥物手绘线条插画hero 上约 80–120px作为定价卡眉图标的约 32–48px、锁图标单笔描边线条画、macOS 红绿灯圆点12px 填充圆{rounded.full}终端卡内。四、组件规格从按钮到终端卡组件规格遵循无 hover 态记录的系统策略每个 spec 只覆盖 Default 与 Active/Pressed。引用语法为{component.xxx}。按钮族button-primary—— 全系统通用 CTA背景{colors.primary}、文字{colors.on-primary}、{typography.button-md}、内边距8px 20px、高 36px、{rounded.full}。用于 Download顶导航、Sign in、Create account、Get Pro、Get Max 等所有主操作。按压态在button-primary-active背景降至{colors.ink-deep}#090909。button-secondary—— 浅色画布上的描边替代背景{colors.canvas}、文字{colors.ink}、1px 实线{colors.hairline-strong}、{typography.button-md}、内边距8px 20px、高 36px、{rounded.full}。用于次级操作如顶导航中与黑色 Download 胶囊配对的 Sign in 胶囊。button-pill-on-dark—— 深色表面的白胶囊背景{colors.canvas}、文字{colors.ink}、{typography.button-md}、{rounded.full}。位于深色 Max 定价卡中作为 Get Max CTA——反转标准主按钮让深色卡本身成为视觉锚点、白胶囊读作 CTA。button-disabled—— 背景{colors.surface-soft}、文字{colors.mute}、{rounded.full}的平坦软灰。输入与表单search-pill/search-pill-focused默认背景{colors.surface-soft}、文字{colors.ink}、{typography.body-sm}、内边距8px 16px、高 36px、{rounded.full}锚定在主导航中央带小放大镜图标前缀与 Search models 占位符聚焦态背景翻转为{colors.canvas}并出现浏览器默认{colors.focus-ring}半透明蓝环。text-input/text-input-focused默认背景{colors.canvas}、1px 实线{colors.hairline}、{typography.body-md}、内边距8px 16px、高 40px、{rounded.full}聚焦态 1px ink 边框 浏览器默认焦点环。install-snippet—— 招牌安装胶囊背景{colors.surface-soft}、文字{colors.ink}以{typography.code-md}渲染、内边距12px 20px、高 48px、{rounded.full}内含字面量curl -fsSL https://ollama.com/install.sh | sh安装命令与右缘小复制图标直接位于 hero 标题下方是页面上最显眼的CTA。在 DESIGN.md 原文中这份规格写作install-snippet引用实际部署页面使用的是 Ollama 官网当时的真实安装命令。command-tag—— 小型内联命令 chip背景{colors.surface-soft}、文字{colors.ink}以{typography.code-sm}渲染、内边距6px 12px、{rounded.full}用于 Automate your work 区块中的ollama launch openclaw示例 chip 等内联命令演示。卡片与容器terminal-card—— 首页唯一的产品预览容器背景{colors.canvas}、1px 实线{colors.hairline}、内边距{spacing.lg}16px、{rounded.lg}头部为三个{component.terminal-traffic-lights}圆点红/黄/绿各 12px锚定卡片左上正文以{typography.code-sm}渲染终端输出注释用{colors.mute}、活动命令用{colors.ink}。terminal-traffic-lights—— 三个 12px 填充圆、{rounded.full}{colors.terminal-red}、{colors.terminal-yellow}、{colors.terminal-green}以{spacing.xs}间隙排成一列。pricing-card—— Free / Pro 档位背景{colors.canvas}、1px 实线{colors.hairline}、内边距{spacing.xxl}32px、{rounded.lg}。布局自上而下小羊驼图标约 32px→ 档位名{typography.heading-md}→ 一行档位描述 → 大号价格{typography.display-lg}$0/$20→ 单个{component.button-primary}CTA → 分隔线 →{typography.body-sm-strong}Everything in Free, plus: 标题 →{component.feature-bullet}行列表。pricing-card-dark—— Max 档位反转布局与pricing-card相同但背景{colors.surface-dark}、主文本{colors.on-dark}、次级文本{colors.on-dark-mute}、CTA 为{component.button-pill-on-dark}。这一反转是全系统的看这里信号。feature-bullet—— 定价卡列表项{colors.ink}的内联✓对勾 {typography.body-sm}文字{colors.charcoal}无背景无边框仅以{spacing.sm}间距堆叠。faq-row——/pricingFAQ 条目背景{colors.canvas}、内边距16px 0、1px 底部边框{colors.hairline}问题用{typography.heading-sm}18px/500{colors.ink}答案用{typography.body-md}16px/400{colors.body}紧随问题下方{spacing.xs}间隙。始终展开无折叠手风琴。cta-strip-dark—— 罕见的深色 CTA 带背景{colors.surface-dark}、文字{colors.on-dark}以{typography.heading-lg}渲染、内边距24px 32px、{rounded.lg}区块间谨慎使用。行内与导航link-inline—— 正文散文锚点链接{colors.ink}文字 下划线text-decoration: underline。link-mute—— 长文中的次级锚点{colors.body}文字默认带下划线用于 FAQ 答案如邮箱链接与页脚。primary-nav—— 背景{colors.canvas}、文字{colors.ink}、高 56px、{typography.body-sm-strong}、{rounded.none}。桌面布局左羊驼图标 → Models · Docs · Pricing 文本链接 → 中央{component.search-pill}→ 右侧 Sign in 黑色{component.button-primary}Download。移动端左羊驼图标、右汉堡抽屉触发器搜索胶囊触发时扩展为全宽抽屉内 Models · Docs · Pricing · Sign in · Download 以{spacing.lg}行距垂直堆叠。footer-section—— 背景{colors.canvas}、1px 顶部边框{colors.hairline}、内边距32px 24px、{typography.caption-sm}{colors.body}单水平行小链接 Download · Blog · Docs · GitHub · Discord · X · Contact · Privacy · Terms 右缘 © 2026 Ollama 版权窄屏折为两行。五、Dos and Donts设计护栏Do把页面当作 Markdown 文档对待单一阅读列、区块间大量{spacing.section}空气、无装饰分隔线。所有主操作使用{component.button-primary}黑色胶囊。没有绿色、没有蓝色、没有品牌色调 CTA。任何交互元素默认{rounded.full}卡片用{rounded.lg}12px这是唯一例外。hero 标题用{typography.display-xl}SF Pro Rounded其余全部用{typography.body-md}系统无衬线避免中间展示尺寸。{component.pricing-card-dark}反转深色表面每页恰好保留一个看这里时刻绝不使用两次。安装命令与 CLI 示例渲染在{component.install-snippet}或{component.terminal-card}内用{typography.code-md}/{typography.code-sm}。代码是一等公民组件。让羊驼吉祥物保持为系统唯一的插画——它就是品牌。Dont不引入渐变、投影或氛围背景。画布保持纯{colors.canvas}。不添加品牌色。系统就是{colors.primary}黑在{colors.canvas}白上加{colors.body}灰正文仅此而已。不软化胶囊、不锐化卡片——胶囊保持{rounded.full}、卡片保持{rounded.lg}不给按钮引入{rounded.md}、不给卡片引入{rounded.full}。不用阴影抬升卡片。用 1px{colors.hairline}边框或反转{colors.surface-dark}——这是仅有的两种卡片处理。不用品牌化展示正文替代ui-sans-serif。系统依赖system-ui渲染以获得原生感。不用营销装饰填充长文页面。FAQ 答案保持{colors.body}body-md 散文、无装饰容器。六、响应式行为断点、触控目标与折叠策略断点表NameWidthKey Changesdesktop-large1280px桌面默认——720px 内容列、3 列定价网格desktop1024px布局不变导航保持水平tablet850px定价 3 列折叠为 21导航搜索胶囊压缩tablet-narrow768px定价折叠为单列堆叠主导航变汉堡mobile640pxhero 标题从{typography.display-xl}36px降至约 28px安装命令换行区块内边距收紧触控目标所有交互元素在 36–40px 高度范围内满足 WCAG AA。{component.button-primary}与{component.button-secondary}为 36px 高 20px 水平内边距有效可点击区域约 36×80px超过 44×44px AAA 阈值。{component.text-input}40px{component.search-pill}36px 高 16px 内边距页脚链接用{typography.caption-sm}12px但以约 12px 行高 8px 垂直内边距获得约 32–36px 的可点击行。折叠策略主导航桌面水平 → 768px 处汉堡抽屉黑色 Download CTA 在任意宽度始终可见从不收进菜单。搜索胶囊桌面固定宽约 360px → 平板压缩至约 240px → 移动端图标化 点击全宽浮层。定价网格3 列 → 21 → 单列堆叠850 / 768 / 以下深色 Max 卡在每个断点都保持反转处理。Automate-your-work 分栏桌面 50/50 → 平板垂直堆叠、文字在上终端模拟在下。Hero 标题桌面{typography.display-xl}36px移动端约 28px、行高保持约 1.15。区块间距{spacing.section}88px桌面 → 64px 平板 → 48px 移动端。安装命令胶囊窄屏将 curl 文本折为第二行而非截断复制图标保持右缘锚定。图片行为唯一的图片资产是羊驼吉祥物多分辨率栅格 PNG16/32/48/64/180/192/512px。它在 hero 与定价卡上以固定像素尺寸渲染、不做响应式缩放——品牌资产被当作 Logo 而非 hero 图片对待。七、迭代指南与已知缺口文档提供了七条可执行的迭代准则适合 Agent 或设计师在复刻/维护时使用一次只聚焦一个组件从 front matter 取对应 YAML 条目并验证每个属性解析成功。直接引用组件名与令牌{colors.primary}、{component.button-primary-active}、{rounded.full}不要转述。编辑后运行npx google/design.md lint DESIGN.md——broken-ref、contrast-ratio、orphaned-tokens警告会自动标记问题这也是本仓库 README 所提到的 Google Stitch DESIGN.md 规范生态的一部分。新变体以独立组件条目添加-active、-disabled、-focused不要埋进散文。正文默认{typography.body-md}页脚/工具文字用{typography.body-sm}{typography.display-xl}严格保留给页首标题。每个视口保持{colors.primary}稀缺——每屏含导航、hero CTA、定价卡 CTA至多一个黑色胶囊。设计的克制就是设计本身。引入新组件前先问它能否用现有的胶囊 平卡 终端模拟词汇表达——这个系统的优势是几乎永远不需要新令牌。已知缺口文档如实记录移动端截图未采集响应式行为依据桌面证据与断点栈合成推断按系统策略不记录 hover 态除搜索与安装胶囊外未见长表单home 与 pricing 页面没有可见长表单认证态界面账户下拉、账单设置、模型仪表盘不在采集范围Models / Docs 页面未采集那些表面很可能引入侧边栏与一套文档排版层级本文档不做描述。八、如何在本仓库中使用这份设计系统本仓库 awesome-design-md 的理念是把一份 DESIGN.md 复制进项目根目录然后让 AI Agent 读取它来生成视觉一致的 UI。针对 Ollama 这份文档标准用法是将 design-md/ollama/DESIGN.md 复制到你的项目根目录与AGENTS.md并列——AGENTS.md告诉编码 Agent 如何构建项目DESIGN.md告诉设计 Agent 项目应长什么样。对 Agent 发出指令build me a page that looks like this。Agent 依据 front matter 令牌色板/排版/圆角/间距/组件与正文规则Dos and Donts、断点表、触控目标生成 UI。该文件遵循 Google Stitch 的 DESIGN.md 格式见仓库 README.md 的 Whats Inside Each DESIGN.md 表格视觉主题、色板角色、排版规则、组件样式、布局原则、深度与层级、Dos and Donts、响应式行为、Agent Prompt Guide 九节结构因此 Ollama 这份文档同样可以被 Google Stitch 直接消费。Ollama 一页的 README 说明design-md/ollama/README.md则将其定位为 Terminal-first, monochrome simplicity与本 DESIGN.md 的完整解析互为印证。结语克制本身就是设计系统Ollama 设计系统的全部秘密在于减法一个色板黑 白 三灰、一种交互几何{rounded.full}胶囊、一套文档式排版SF Pro Rounded 标题 系统正文 等宽代码、一个装饰元素羊驼。这份 DESIGN.md 的价值在于它把这些克制量化成了 Agent 可读的机器令牌——纯黑 CTA 至多每屏一个、反转深色表面每页至多一次、胶囊与 12px 卡片是仅有的两种表面形状。当你需要为本地运行大模型的工具类产品生成界面时这套把系统做成文档、把文档做成系统的令牌化范式是最值得直接复用的实战模板。赞分享文档【免费下载链接】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 实战指南用 YAML 设计令牌 Markdown 设计理由为 Coding Agent 建立可持久化的设计系统规范DESIGN.md 实战指南用 YAML 设计令牌 Markdown 设计理由为 Coding Agent 建立可持久化的设计系统规范 DESIGN.mCLI设计系统前端在 open-codesign 中落地 Linear 风格设计系统从 brand-refs DESIGN.md 到可执行的设计令牌在 open codesign 中落地 Linear 风格设计系统从 brand refs DESIGN.md 到可执行的设计令牌 本指南以 open cod人工智能AI 应用桌面应用PlayStation 品牌营销设计系统 DESIGN.md 深度解析三画布章节式体系的令牌化重建PlayStation 品牌营销设计系统 DESIGN.md 深度解析三画布章节式体系的令牌化重建 导读 本文以开源仓库 awesome design md文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考