AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载本文围绕 OpenDesign 仓库内design-systems/ollama/设计系统包的审计证据文件 source/evidence.md 展开系统讲解该 Design System 2.0 backfill 的来源范围、fixture 文件清单、Token 契约机制以及背后完整的 Ollama 极简设计语言——从 DESIGN.md 的视觉规范到 tokens.css 的 56 个设计令牌、再到 Tailwind v4 派生输出与同步守卫。读完本文你将掌握如何阅读与复用一套已入库的第三方品牌设计系统理解其“token 声明 → 契约报告 → 派生产物”的证据链闭环并能将其直接用于 Agent 生成前端工件的实践中。一、evidence.md 是什么一次 backfill 的“审计证据文件”在 OpenDesign 的design-systems/目录下每个品牌ollama、stripe、figma 等都是一个可被 Agent 直接消费的“设计系统包”。其中ollama/source/evidence.md是这套包的元证据文件——它不描述具体样式而是说明这套系统是从哪里来的、包含哪些文件、以及 token 如何被验证。全文只有三个要点来源范围Source Scope这是 Design System 2.0 的 backfill回填派生自 OpenDesign 官方捆绑bundled的精选 fixture并不声称对上游品牌官网做过全新爬取。这一点在 manifest.json 中有对应声明source: { type: bundled, origin: OpenDesign curated bundled fixture }。包含的 fixture 文件DESIGN.md设计规范、tokens.css令牌样式表、components.html参考组件。Token 契约source/token-contract.report.json把每一个 TOKEN_SCHEMA 绑定映射回tokens.css的具体声明行而design-tokens.json与tailwind-v4.css是派生输出应当从报告与令牌样式表重新生成而不是手工编辑。一句话概括evidence.md 是保证“设计系统来源可信、token 有据可查”的审计入口。它的价值在于让任何 Agent 或审查者都能沿着文件路径和行号从“契约报告”一路追到“真实声明”避免出现无法溯源、凭空捏造的设计令牌。二、包的完整文件布局证据文件、令牌与产物design-systems/ollama/是一个自洽、可验证的包完整结构如下均以仓库根目录为基准路径角色DESIGN.md设计意图、约束与反模式的规范文档主 fixturetokens.css结构化 token 绑定:root块是唯一事实源components.html参考组件 fixture内嵌与 tokens.css 一致的:root块components.manifest.json组件清单selector 数量、声明的 token 列表design-tokens.json派生输出机器可读 token JSONtailwind-v4.css派生输出Tailwind v4theme桥接manifest.json包元数据schema、分类、预览页、来源声明USAGE.mdAgent 与审查者的使用指南阅读顺序source/evidence.md审计证据文件本文主角source/tokens.source.json源 token 列表含所在行号source/token-contract.report.jsonTOKEN_SCHEMA 契约报告preview/colors.html颜色预览页preview/spacing.html间距预览页preview/typography.html排版预览页system/index.html系统资源索引组件 kit、暗色 kit、landing/deck/poster/email 等产物manifest.json中files、preview、sourceFiles三个字段将上述文件正式登记为包的组成部分并声明importMode: normalized归一化导入模式以及craft.suggested为color与accessibility-baseline提示使用本系统时应重点关注配色与无障碍基线。三、Token 契约从报告到tokens.css声明的逐行映射evidence.md点名的核心机制是source/token-contract.report.json。这份报告以TOKEN_SCHEMA为契约为每个 token 记录name / valuetoken 名与解析后的值layer所属层A1-identity、A1-structure、A2、B-slot对应_schema的分层模型sources指向tokens.css中的声明行号如tokens.css:79confidence / reason置信度与原因说明。报告顶部的summary是整套契约的可量化结论{ totalTokens: 56, declaredTokens: 56, sourceBackedTokens: 56, sourceBackedA1: 26, fallbackTokens: 26, aliasTokens: 2, layerCounts: { A1-identity: 8, B-slot: 4, A2: 26, A1-structure: 18 }, score: 100, grade: excellent, recommendRebuild: false }从中可以读出三层含义56 个 token全部有源可查sourceBackedTokens 56评分 100、评级excellent因此无需重建recommendRebuild: false26 个 A1 层 token 直接来自品牌身份identity声明18 个来自结构structure26 个是 A2 层语义 token2 个 alias token--surface-warm、--border-soft通过var(--surface)、var(--border)引用体现“单一事实源”的设计。与之配套的 source/tokens.source.json 是更朴素的源清单例如--bg记录为{ value: #ffffff, layer: A1-identity, source: tokens.css:79 }。行号即证据——这正是 evidence.md 所强调的“每个 TOKEN_SCHEMA 绑定都能映射回提交的tokens.css声明行”。四、设计语言本体Ollama 的“激进极简主义”要理解这套 token 为什么这样取值必须读 DESIGN.md。它描绘的品牌是本地运行 LLM 的终端优先工具纯黑白、无阴影、无渐变、二元圆角——“设计的缺席本身就是设计”。4.1 视觉主题与关键特征纯白画布界面零彩色唯一例外是键盘焦点环SF Pro Rounded 标题字体带来苹果式的柔和感二元圆角系统容器 12px、一切可交互元素 9999px胶囊零阴影——层次完全靠背景色差与 1px 边框表达极低的内容密度首页短小聚焦只讲三件事运行模型、配合应用、集成。4.2 色彩角色完整色板角色值用途Pure Black#000000主标题、主链接、最深文字Near Black#262626按钮文字、次级标题Darkest Surface#090909最深表面页脚/深色容器Pure White#ffffff主页面背景、次级按钮表面Snow#fafafa最微弱的表面抬升Light Gray#e5e5e5按钮背景、边框、主容器色Stone#737373次级正文、页脚链接主“弱化”色调Mid Gray#525252更深的次级文字Silver#a3a3a3三级文字、占位符Button Text Dark#404040白底按钮文字Ring Blue#3b82f650% 透明唯一非灰色仅用于键盘焦点环Border Light#d4d4d4白底按钮的稍深边框渐变系统无。视觉分隔完全来自纯色块与单像素边框。4.3 字体栈与层级三组字体栈DESIGN.md §3 原文--font-display: SF Pro Rounded, system-ui, -apple-system, system-ui; --font-body: ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;层级要点Display 48px/500/行高 1.0Section Heading 36pxSub-heading 30pxBody 16px/行高 1.5代码层 12–16px 走 monospace。只用 400 与 500 两种字重标题行高压缩到 1.0、正文放宽到 1.43–1.56靠“行高对比”而非“字重对比”建立层级。4.4 组件规范摘要Gray Pill主按钮#e5e5e5背景、#262626文字、10px 24px内边距、1px solid #e5e5e5边框、9999px 胶囊圆角White Pill次按钮白底、#404040文字、1px solid #d4d4d4边框Black PillCTA纯黑底白字最大强调卡片/容器白或 Snow 底、1px solid #e5e5e5边框、唯一的 12px 圆角、零阴影输入框白底、1px solid #e5e5e5、胶囊圆角、聚焦显示 Ring Blue 环、占位符 Silver导航透明无边框左侧 logo 黑色 16px 文字链接中间胶囊搜索框右侧 “Sign in” 链接 黑色胶囊 “Download” CTA特色组件胶囊 Tab、模型标签Light Gray 底深色字、终端命令块monospace 12px 圆角边框容器 复制按钮、集成网格按 Coding / Documents RAG / Automation / Chat 分 Tab。4.5 布局、间距与层级间距基准 8px扩展刻度 4/6/8/9/10/12/14/16/20/24/32/40/48/88/112px按钮统一10px 24px区块纵向间距 88–112px“留白即品牌”容器最大宽约 1024–1280px 居中Hero 单列居中功能区块两列文字左、代码右深度模型只有两级Flat无阴影无边框与 Bordered1px solid #e5e5e5——零阴影是刻意决定层次靠内容层级与字重传达。4.6 Dos and Donts浓缩Do纯白背景所有交互元素用 9999px容器用 12px严格灰度显示标题用 SF Pro Rounded 500零阴影低内容密度命令用 monospace按钮统一10px 24px胶囊。Dont引入任何彩色使用 12px–9999px 之间的圆角加阴影字重超过 500添加除羊驼吉祥物以外的装饰插图使用渐变超过两列布局边框粗于 1px添加 hover 动画。4.7 响应式断点名称宽度关键变化Mobile640px单列堆叠、汉堡导航Small Tablet640–768px间距微调Tablet768–850px两列布局开始Desktop850–1024px标准布局Large Desktop1024–1280px最大内容宽度Hero 文字 48px → 36px → 30px 渐进缩放触控目标轻松超过 44×44px。4.8 Agent Prompt Guide可直接复用DESIGN.md §9 提供了一组开箱即用的示例提示例如“在纯白#ffffff上创建 hero插图居中于 48px SF Pro Rounded weight 500、行高 1.0 的标题上方Pure Black 文字下方放一个黑色胶囊 CTA9999px 圆角、10px 24px 内边距与一个灰色胶囊按钮。”“设计一个代码块12px 圆角、1px solid #e5e5e5边框、白底命令用 ui-monospace 16px无阴影。”“构建胶囊 Tab 栏激活态 Light Gray 底 Near Black 文字非激活透明底 Stone 文字。”迭代守则一次只做一个组件所有值保持灰度圆角永远在“9999px 或 12px”二选一阴影恒为零字重恒为 400/500“觉得装饰过度就去掉”——少即是多。五、tokens.css 的五条关键决策规范如何落地为令牌tokens.css 在头部注释里记录了把 DESIGN.md 翻译成 token 时的五个决策这是理解整套取值的关键#Decision 1 —--bg是纯白--surface才是“抬升”默认品牌习惯是米色底 白色表面追求卡片暖意Ollama 反过来——#ffffff是画布#fafafaSnow是最微弱的抬升--surface-warm直接别名到--surface品牌天然灰度无暖色第三层。#Decision 2 —--accent是纯黑而非彩色 CTA整个界面灰度唯一彩色例外是键盘焦点环承担 accent 角色的“Download / Create account”黑胶囊是黑底白字所以--accent: #000000、--accent-on: #ffffff且 hover/active变亮#262626→#404040而非变暗。#Decision 3 — 所有交互圆角坍缩为胶囊--radius-sm、--radius-lg、--radius-pill全部解析为 9999px--radius-md才是 12px 容器角保证组件取到--radius-sm时继承品牌立场而不是一个游离的 8px。#Decision 4 — 每个层级都是发丝线边框环绝非模糊阴影--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised镜像--elev-ring——深度只能来自 1px 边框环。#Decision 5 — 显示字体是 SF Pro Rounded圆润的字形终端就是品牌表达非 Apple 平台回退 system-ui栈中重复的system-ui是刻意逐字复刻 DESIGN.md便于“散文 ↔ token”审计。同时文件规定保持增量式扩展绝不发明 DESIGN.md 或 craft 契约中不存在的 token 名——Ollama 不在 BRAND_EXTENSIONS 名单内任何未知 token 都会触发unknown-token-allowlist守卫失败。语义色--success: #16a34a、--warn: #eab308、--danger: #dc2626是为了 schema 完整性绑定到回退值供错误 toast 与守护进程健康检查等运行时场景使用禁止作为装饰。六、派生输出与同步守卫为什么不能手工编辑evidence.md明确指出design-tokens.json与tailwind-v4.css是派生输出。以 tailwind-v4.css 为例它只做一件事——把 tokens.css 的:root值桥接进 Tailwind v4 的themeimport tailwindcss; import ./tokens.css; theme { --color-bg: var(--bg); --color-surface: var(--surface); --color-accent: var(--accent); --font-display: var(--font-display); --radius-md: var(--radius-md); --shadow-ring: var(--elev-ring); /* ... 其余 token 同理 */ }这意味着项目里可以同时用bg-surface、text-muted、rounded-pill等 Tailwind 工具类但它们的值始终解析回 tokens.css。同样design-tokens.json 是从 token 样式表生成的机器可读版本。为了保证“源文件 ↔ 组件 fixture”不被手工改动破坏仓库提供了守卫脚本 scripts/check-tokens-fixture-sync.ts并被 scripts/guard.ts 引用。tokens.css 注释里写得很明确components.html内嵌的:root块是去掉注释后的同一份声明归一化后必须逐字节同步否则tokens-fixture-sync守卫会失败。因此正确的工作流永远是修改 tokens.css唯一事实源重新生成design-tokens.json、tailwind-v4.css与components.html的内嵌:root运行tokens-fixture-sync守卫确认同步。七、Agent 与审查者的使用流程USAGE.md 阅读顺序USAGE.md 给出了标准使用协议先读 USAGE.md理解包契约读DESIGN.md掌握视觉意图、约束与反模式把tokens.css 的:root块逐字粘贴到工件第一个style中之后一律通过var(--name)引用用components.manifest.json做组件清单速查fixture 显示 70 个 selector、34 个 class、26 个元素、1 个 style 块需要精确选择器或状态时打开components.html需要视觉抽查时查看preview/下的颜色、间距、排版三页。使用铁律同样重要不得在:root块之外使用裸十六进制值不得脱离 tokens.css 独立重定义 Tailwind 或 design-token 值不得声称拥有上游原始来源证据本包基于精选 fixture不得新增 components.html 或 DESIGN.md 中不存在的组件配方。跨品牌切换时保留 schema token 名不变即可保证可靠性——这正是“Design System 2.0 归一化”的核心收益。八、总结一条可审计的第三方设计系统落地路径从 source/evidence.md 出发我们完整走通了一条链路来源声明bundled fixture不冒称爬取上游→ fixture 文件集DESIGN.md / tokens.css / components.html→ Token 契约报告56 个 token 逐行映射、评分 100→ 派生产物design-tokens.json / tailwind-v4.css→ 同步守卫check-tokens-fixture-sync.ts→ Agent 消费USAGE.md 五步流程。这套“证据文件 契约报告 守卫脚本”的机制让第三方品牌设计系统在 OpenDesign 仓库中既可以被 Agent 直接粘贴复用又经得起逐行溯源审计而 Ollama 案例本身则示范了如何把“纯黑白、零阴影、二元圆角、双字重、低密度留白”的激进极简语言精确翻译成一组自洽、可验证、可跨框架复用的设计令牌。读者若要在自己的工件事务中复刻这套流程只需照搬design-systems/ollama/的文件结构与同步策略即可获得同样可审计、可回归的品牌设计系统包。赞分享AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载相关推荐curl 命令行选项语法完全指南从参数规则到 --next 多操作解析curl 命令行选项语法完全指南从参数规则到 next 多操作解析 本篇指南以 curl 官方命令行文档 docs/cmdline opts/_OPTIONSAI 应用人工智能AI 技能设计系统媒体生成OpenDesign Cosmic 设计系统包溯源与 Token 契约从 evidence.md 到 tokens.css 的审计链路解析OpenDesign Cosmic 设计系统包溯源与 Token 契约从 evidence.md 到 tokens.css 的审计链路解析 本篇指南聚焦 OpAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 设计系统证据链Composio 回填包 source/evidence.md 的 Token 契约与派生产物再生成机制OpenDesign 设计系统证据链Composio 回填包 source/evidence.md 的 Token 契约与派生产物再生成机制 source/eAI 应用人工智能AI 技能设计系统媒体生成上一篇SmartKnob低cogging电机评测10款无刷云台电机性能对比下一篇Deepagents制造价值制造价值的AI代理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
OpenDesign 中的 Ollama 设计系统包：evidence.md 证据链、Token 契约与极简黑白设计令牌的完整实现
AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载本文围绕 OpenDesign 仓库内design-systems/ollama/设计系统包的审计证据文件 source/evidence.md 展开系统讲解该 Design System 2.0 backfill 的来源范围、fixture 文件清单、Token 契约机制以及背后完整的 Ollama 极简设计语言——从 DESIGN.md 的视觉规范到 tokens.css 的 56 个设计令牌、再到 Tailwind v4 派生输出与同步守卫。读完本文你将掌握如何阅读与复用一套已入库的第三方品牌设计系统理解其“token 声明 → 契约报告 → 派生产物”的证据链闭环并能将其直接用于 Agent 生成前端工件的实践中。一、evidence.md 是什么一次 backfill 的“审计证据文件”在 OpenDesign 的design-systems/目录下每个品牌ollama、stripe、figma 等都是一个可被 Agent 直接消费的“设计系统包”。其中ollama/source/evidence.md是这套包的元证据文件——它不描述具体样式而是说明这套系统是从哪里来的、包含哪些文件、以及 token 如何被验证。全文只有三个要点来源范围Source Scope这是 Design System 2.0 的 backfill回填派生自 OpenDesign 官方捆绑bundled的精选 fixture并不声称对上游品牌官网做过全新爬取。这一点在 manifest.json 中有对应声明source: { type: bundled, origin: OpenDesign curated bundled fixture }。包含的 fixture 文件DESIGN.md设计规范、tokens.css令牌样式表、components.html参考组件。Token 契约source/token-contract.report.json把每一个 TOKEN_SCHEMA 绑定映射回tokens.css的具体声明行而design-tokens.json与tailwind-v4.css是派生输出应当从报告与令牌样式表重新生成而不是手工编辑。一句话概括evidence.md 是保证“设计系统来源可信、token 有据可查”的审计入口。它的价值在于让任何 Agent 或审查者都能沿着文件路径和行号从“契约报告”一路追到“真实声明”避免出现无法溯源、凭空捏造的设计令牌。二、包的完整文件布局证据文件、令牌与产物design-systems/ollama/是一个自洽、可验证的包完整结构如下均以仓库根目录为基准路径角色DESIGN.md设计意图、约束与反模式的规范文档主 fixturetokens.css结构化 token 绑定:root块是唯一事实源components.html参考组件 fixture内嵌与 tokens.css 一致的:root块components.manifest.json组件清单selector 数量、声明的 token 列表design-tokens.json派生输出机器可读 token JSONtailwind-v4.css派生输出Tailwind v4theme桥接manifest.json包元数据schema、分类、预览页、来源声明USAGE.mdAgent 与审查者的使用指南阅读顺序source/evidence.md审计证据文件本文主角source/tokens.source.json源 token 列表含所在行号source/token-contract.report.jsonTOKEN_SCHEMA 契约报告preview/colors.html颜色预览页preview/spacing.html间距预览页preview/typography.html排版预览页system/index.html系统资源索引组件 kit、暗色 kit、landing/deck/poster/email 等产物manifest.json中files、preview、sourceFiles三个字段将上述文件正式登记为包的组成部分并声明importMode: normalized归一化导入模式以及craft.suggested为color与accessibility-baseline提示使用本系统时应重点关注配色与无障碍基线。三、Token 契约从报告到tokens.css声明的逐行映射evidence.md点名的核心机制是source/token-contract.report.json。这份报告以TOKEN_SCHEMA为契约为每个 token 记录name / valuetoken 名与解析后的值layer所属层A1-identity、A1-structure、A2、B-slot对应_schema的分层模型sources指向tokens.css中的声明行号如tokens.css:79confidence / reason置信度与原因说明。报告顶部的summary是整套契约的可量化结论{ totalTokens: 56, declaredTokens: 56, sourceBackedTokens: 56, sourceBackedA1: 26, fallbackTokens: 26, aliasTokens: 2, layerCounts: { A1-identity: 8, B-slot: 4, A2: 26, A1-structure: 18 }, score: 100, grade: excellent, recommendRebuild: false }从中可以读出三层含义56 个 token全部有源可查sourceBackedTokens 56评分 100、评级excellent因此无需重建recommendRebuild: false26 个 A1 层 token 直接来自品牌身份identity声明18 个来自结构structure26 个是 A2 层语义 token2 个 alias token--surface-warm、--border-soft通过var(--surface)、var(--border)引用体现“单一事实源”的设计。与之配套的 source/tokens.source.json 是更朴素的源清单例如--bg记录为{ value: #ffffff, layer: A1-identity, source: tokens.css:79 }。行号即证据——这正是 evidence.md 所强调的“每个 TOKEN_SCHEMA 绑定都能映射回提交的tokens.css声明行”。四、设计语言本体Ollama 的“激进极简主义”要理解这套 token 为什么这样取值必须读 DESIGN.md。它描绘的品牌是本地运行 LLM 的终端优先工具纯黑白、无阴影、无渐变、二元圆角——“设计的缺席本身就是设计”。4.1 视觉主题与关键特征纯白画布界面零彩色唯一例外是键盘焦点环SF Pro Rounded 标题字体带来苹果式的柔和感二元圆角系统容器 12px、一切可交互元素 9999px胶囊零阴影——层次完全靠背景色差与 1px 边框表达极低的内容密度首页短小聚焦只讲三件事运行模型、配合应用、集成。4.2 色彩角色完整色板角色值用途Pure Black#000000主标题、主链接、最深文字Near Black#262626按钮文字、次级标题Darkest Surface#090909最深表面页脚/深色容器Pure White#ffffff主页面背景、次级按钮表面Snow#fafafa最微弱的表面抬升Light Gray#e5e5e5按钮背景、边框、主容器色Stone#737373次级正文、页脚链接主“弱化”色调Mid Gray#525252更深的次级文字Silver#a3a3a3三级文字、占位符Button Text Dark#404040白底按钮文字Ring Blue#3b82f650% 透明唯一非灰色仅用于键盘焦点环Border Light#d4d4d4白底按钮的稍深边框渐变系统无。视觉分隔完全来自纯色块与单像素边框。4.3 字体栈与层级三组字体栈DESIGN.md §3 原文--font-display: SF Pro Rounded, system-ui, -apple-system, system-ui; --font-body: ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;层级要点Display 48px/500/行高 1.0Section Heading 36pxSub-heading 30pxBody 16px/行高 1.5代码层 12–16px 走 monospace。只用 400 与 500 两种字重标题行高压缩到 1.0、正文放宽到 1.43–1.56靠“行高对比”而非“字重对比”建立层级。4.4 组件规范摘要Gray Pill主按钮#e5e5e5背景、#262626文字、10px 24px内边距、1px solid #e5e5e5边框、9999px 胶囊圆角White Pill次按钮白底、#404040文字、1px solid #d4d4d4边框Black PillCTA纯黑底白字最大强调卡片/容器白或 Snow 底、1px solid #e5e5e5边框、唯一的 12px 圆角、零阴影输入框白底、1px solid #e5e5e5、胶囊圆角、聚焦显示 Ring Blue 环、占位符 Silver导航透明无边框左侧 logo 黑色 16px 文字链接中间胶囊搜索框右侧 “Sign in” 链接 黑色胶囊 “Download” CTA特色组件胶囊 Tab、模型标签Light Gray 底深色字、终端命令块monospace 12px 圆角边框容器 复制按钮、集成网格按 Coding / Documents RAG / Automation / Chat 分 Tab。4.5 布局、间距与层级间距基准 8px扩展刻度 4/6/8/9/10/12/14/16/20/24/32/40/48/88/112px按钮统一10px 24px区块纵向间距 88–112px“留白即品牌”容器最大宽约 1024–1280px 居中Hero 单列居中功能区块两列文字左、代码右深度模型只有两级Flat无阴影无边框与 Bordered1px solid #e5e5e5——零阴影是刻意决定层次靠内容层级与字重传达。4.6 Dos and Donts浓缩Do纯白背景所有交互元素用 9999px容器用 12px严格灰度显示标题用 SF Pro Rounded 500零阴影低内容密度命令用 monospace按钮统一10px 24px胶囊。Dont引入任何彩色使用 12px–9999px 之间的圆角加阴影字重超过 500添加除羊驼吉祥物以外的装饰插图使用渐变超过两列布局边框粗于 1px添加 hover 动画。4.7 响应式断点名称宽度关键变化Mobile640px单列堆叠、汉堡导航Small Tablet640–768px间距微调Tablet768–850px两列布局开始Desktop850–1024px标准布局Large Desktop1024–1280px最大内容宽度Hero 文字 48px → 36px → 30px 渐进缩放触控目标轻松超过 44×44px。4.8 Agent Prompt Guide可直接复用DESIGN.md §9 提供了一组开箱即用的示例提示例如“在纯白#ffffff上创建 hero插图居中于 48px SF Pro Rounded weight 500、行高 1.0 的标题上方Pure Black 文字下方放一个黑色胶囊 CTA9999px 圆角、10px 24px 内边距与一个灰色胶囊按钮。”“设计一个代码块12px 圆角、1px solid #e5e5e5边框、白底命令用 ui-monospace 16px无阴影。”“构建胶囊 Tab 栏激活态 Light Gray 底 Near Black 文字非激活透明底 Stone 文字。”迭代守则一次只做一个组件所有值保持灰度圆角永远在“9999px 或 12px”二选一阴影恒为零字重恒为 400/500“觉得装饰过度就去掉”——少即是多。五、tokens.css 的五条关键决策规范如何落地为令牌tokens.css 在头部注释里记录了把 DESIGN.md 翻译成 token 时的五个决策这是理解整套取值的关键#Decision 1 —--bg是纯白--surface才是“抬升”默认品牌习惯是米色底 白色表面追求卡片暖意Ollama 反过来——#ffffff是画布#fafafaSnow是最微弱的抬升--surface-warm直接别名到--surface品牌天然灰度无暖色第三层。#Decision 2 —--accent是纯黑而非彩色 CTA整个界面灰度唯一彩色例外是键盘焦点环承担 accent 角色的“Download / Create account”黑胶囊是黑底白字所以--accent: #000000、--accent-on: #ffffff且 hover/active变亮#262626→#404040而非变暗。#Decision 3 — 所有交互圆角坍缩为胶囊--radius-sm、--radius-lg、--radius-pill全部解析为 9999px--radius-md才是 12px 容器角保证组件取到--radius-sm时继承品牌立场而不是一个游离的 8px。#Decision 4 — 每个层级都是发丝线边框环绝非模糊阴影--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised镜像--elev-ring——深度只能来自 1px 边框环。#Decision 5 — 显示字体是 SF Pro Rounded圆润的字形终端就是品牌表达非 Apple 平台回退 system-ui栈中重复的system-ui是刻意逐字复刻 DESIGN.md便于“散文 ↔ token”审计。同时文件规定保持增量式扩展绝不发明 DESIGN.md 或 craft 契约中不存在的 token 名——Ollama 不在 BRAND_EXTENSIONS 名单内任何未知 token 都会触发unknown-token-allowlist守卫失败。语义色--success: #16a34a、--warn: #eab308、--danger: #dc2626是为了 schema 完整性绑定到回退值供错误 toast 与守护进程健康检查等运行时场景使用禁止作为装饰。六、派生输出与同步守卫为什么不能手工编辑evidence.md明确指出design-tokens.json与tailwind-v4.css是派生输出。以 tailwind-v4.css 为例它只做一件事——把 tokens.css 的:root值桥接进 Tailwind v4 的themeimport tailwindcss; import ./tokens.css; theme { --color-bg: var(--bg); --color-surface: var(--surface); --color-accent: var(--accent); --font-display: var(--font-display); --radius-md: var(--radius-md); --shadow-ring: var(--elev-ring); /* ... 其余 token 同理 */ }这意味着项目里可以同时用bg-surface、text-muted、rounded-pill等 Tailwind 工具类但它们的值始终解析回 tokens.css。同样design-tokens.json 是从 token 样式表生成的机器可读版本。为了保证“源文件 ↔ 组件 fixture”不被手工改动破坏仓库提供了守卫脚本 scripts/check-tokens-fixture-sync.ts并被 scripts/guard.ts 引用。tokens.css 注释里写得很明确components.html内嵌的:root块是去掉注释后的同一份声明归一化后必须逐字节同步否则tokens-fixture-sync守卫会失败。因此正确的工作流永远是修改 tokens.css唯一事实源重新生成design-tokens.json、tailwind-v4.css与components.html的内嵌:root运行tokens-fixture-sync守卫确认同步。七、Agent 与审查者的使用流程USAGE.md 阅读顺序USAGE.md 给出了标准使用协议先读 USAGE.md理解包契约读DESIGN.md掌握视觉意图、约束与反模式把tokens.css 的:root块逐字粘贴到工件第一个style中之后一律通过var(--name)引用用components.manifest.json做组件清单速查fixture 显示 70 个 selector、34 个 class、26 个元素、1 个 style 块需要精确选择器或状态时打开components.html需要视觉抽查时查看preview/下的颜色、间距、排版三页。使用铁律同样重要不得在:root块之外使用裸十六进制值不得脱离 tokens.css 独立重定义 Tailwind 或 design-token 值不得声称拥有上游原始来源证据本包基于精选 fixture不得新增 components.html 或 DESIGN.md 中不存在的组件配方。跨品牌切换时保留 schema token 名不变即可保证可靠性——这正是“Design System 2.0 归一化”的核心收益。八、总结一条可审计的第三方设计系统落地路径从 source/evidence.md 出发我们完整走通了一条链路来源声明bundled fixture不冒称爬取上游→ fixture 文件集DESIGN.md / tokens.css / components.html→ Token 契约报告56 个 token 逐行映射、评分 100→ 派生产物design-tokens.json / tailwind-v4.css→ 同步守卫check-tokens-fixture-sync.ts→ Agent 消费USAGE.md 五步流程。这套“证据文件 契约报告 守卫脚本”的机制让第三方品牌设计系统在 OpenDesign 仓库中既可以被 Agent 直接粘贴复用又经得起逐行溯源审计而 Ollama 案例本身则示范了如何把“纯黑白、零阴影、二元圆角、双字重、低密度留白”的激进极简语言精确翻译成一组自洽、可验证、可跨框架复用的设计令牌。读者若要在自己的工件事务中复刻这套流程只需照搬design-systems/ollama/的文件结构与同步策略即可获得同样可审计、可回归的品牌设计系统包。赞分享AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载相关推荐curl 命令行选项语法完全指南从参数规则到 --next 多操作解析curl 命令行选项语法完全指南从参数规则到 next 多操作解析 本篇指南以 curl 官方命令行文档 docs/cmdline opts/_OPTIONSAI 应用人工智能AI 技能设计系统媒体生成OpenDesign Cosmic 设计系统包溯源与 Token 契约从 evidence.md 到 tokens.css 的审计链路解析OpenDesign Cosmic 设计系统包溯源与 Token 契约从 evidence.md 到 tokens.css 的审计链路解析 本篇指南聚焦 OpAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 设计系统证据链Composio 回填包 source/evidence.md 的 Token 契约与派生产物再生成机制OpenDesign 设计系统证据链Composio 回填包 source/evidence.md 的 Token 契约与派生产物再生成机制 source/eAI 应用人工智能AI 技能设计系统媒体生成上一篇SmartKnob低cogging电机评测10款无刷云台电机性能对比下一篇Deepagents制造价值制造价值的AI代理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
