OpenDesign 中的 Cal.com 设计系统包从 USAGE.md 到 tokens.css 的完整使用指南【免费下载链接】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 中构建页面工件的 Agent 与设计审查者系统讲解design-systems/cal设计系统包Design System 2.0的消费方式如何按正确的阅读顺序理解包契约、如何把tokens.css的:root令牌块粘进工件、如何复用components.html中的既有组件配方以及 Cal.com 纯灰度美学背后的设计决策。读完本文你将能独立用该包生成风格一致、可通过仓库 lint 校验的调度类产品页面并理解令牌分层A1/A2/B-slot如何保障跨品牌切换的可靠性。一、先读懂包契约USAGE.md 规定的阅读顺序design-systems/cal/USAGE.md是整个 Cal.com 设计系统包的入口文档它面向两类读者生成工件的 OpenDesign Agent与做设计审查的 Reviewer。文档开篇给出的 Read Order 本质上定义了消费这个包的固定工作流先读USAGE.md——理解整个包的使用契约再读 DESIGN.md——理解视觉意图、约束与反模式anti-patterns把tokens.css的:root块整体粘到工件第一个style块中再编写组件 CSS用 components.manifest.json 做紧凑的组件清单速查当需要精确选择器或状态细节时打开 components.html需要视觉冒烟检查时翻阅preview/目录下的静态预览页。这个顺序背后有一个核心原则令牌先行、组件复用其次、视觉校验兜底。tokens.css是所有 CSS 变量的唯一事实来源source of truth组件样式必须通过var(--*)引用令牌而不是各自定义裸值。包内文件结构与职责从 manifest.json 可以看到这是一个符合od-design-system-project/v1schema 的标准 Design System 2.0 包其source.type为bundled即基于 OpenDesign 官方精选的捆绑 fixture 生成并非对 Cal.com 上游网站或仓库的新鲜爬取——这一点在 source/evidence.md 中被明确声明也是 USAGE.md 中Do not claim original upstream source evidence约束的来源。文件职责DESIGN.md视觉意图、颜色角色、排版层级、阴影系统、响应式行为、Agent 提示词指南tokens.css编译后的令牌:root块唯一事实来源design-tokens.json由tokens.css token-contract 报告派生出的 Design Tokens JSONtailwind-v4.css由tokens.css派生的 Tailwind v4theme映射components.html独立组件 fixture52 个选择器、26 个类、25 个元素components.manifest.json组件清单缓存由components.htmltokens.css重新派生manifest.json机器可读的项目入口preview/colors、typography、spacing 三张静态预览页source/导入证据evidence.md、tokens.source.json、token-contract.report.json其中design-tokens.json与tailwind-v4.css都属于派生产物应依据报告和令牌样式表重新生成而不是手工编辑——这是 source/evidence.md 明确规定的维护纪律。二、设计亮点Cal.com 纯灰度美学的四个支柱USAGE.md 的 Design Highlights 用四条浓缩了 Cal.com 视觉体系的核心特征DESIGN.md 则对每一条做了展开1. 纯灰度品牌调色板——用对比而非颜色表达力量Cal.com 的营销站点是单色克制monochromatic restraint的典范近黑标题#242424Charcoal比纯黑更暖的签名色、中灰次级文本#898989Mid Gray、纯白表面#ffffff。DESIGN.md §2 将这种哲学概括为grayscale brand to emphasise on boldness and professionalism——色彩被当作异物一旦出现罕见的蓝色链接、绿色信任徽章就像黑白照片中的受控点缀。令牌层面对这一哲学做了结构性落实见 tokens.css 顶部注释--fg: #242424Charcoal而不是#000000——微暖感让画布不至于刺眼--fg-2: #111111Midnight独立绑定用于最高对比度的导航链接与深色强调--muted: #898989Mid Gray作为第三级灰度用于描述与次要标签--surface-warm: var(--surface)、--meta: var(--muted)采用别名塌缩——Cal 没有暖色表面层也没有低于 Mid Gray 的第四级灰因此按 schema 约定用var()折叠而不是生造一个不存在的值。2. Cal Sans Inter严格的展示/正文二分Cal Sans 是 Mark Davis 设计的开源几何展示字体默认字距极紧天生为大字号头条而设计Inter 则承担正文职责DESIGN.md 称之为 rock-solid。二者的分工被 components.html 的 CSS 严格执行h1, h2, h3 { font-family: var(--font-display); /* Cal Sans */ font-weight: 600; /* Cal Sans 按 600 设计 */ line-height: var(--leading-tight); /* 1.1 */ letter-spacing: var(--tracking-display); /* 0 */ }排版层级中Display Hero 为 Cal Sans 64px/600/1.10Section Heading 为 48pxFeature Heading 为 24px而正文一律走 Inter。关键纪律是Cal Sans 只用于 24px 的标题绝不用于正文低于 16px 会失控大字号字距保持 0px字体本身已极紧24px 以下必须施加正字距 0.2px防止挤压几乎所有 Cal Sans 用法都锁定 weight 600——该字体就是按半粗设计的混用其他字重会破坏字符形态。3. 11 层阴影定义用阴影即边框取代 CSS border这是 Cal.com 体系中最精巧的部分。tokens.css 将多图层阴影合成提炼为三个受控层级--elev-flat: none; /* 页面画布 */ --elev-ring: 0 0 0 1px var(--border); /* 1px 环形边框 */ --elev-raised: /* 主力卡片阴影栈 */ 0 1px 5px -4px rgba(19, 19, 22, 0.7), /* 底部接触阴影 */ 0 0 0 1px rgba(34, 42, 53, 0.08), /* 发丝线环形边框 */ 0 4px 8px rgba(34, 42, 53, 0.05); /* 5% 环境漫射 */三层缺一不可接触阴影-4px扩散把模糊从顶部抬离提供落地感环形阴影替代 CSS 边框不改变布局5% 的漫射阴影提供柔和环境深度。--border也据此绑定为rgba(34, 42, 53, 0.08)——即 Cal 环形阴影的真实 alpha而非实心 hex这样--elev-ring默认就能复现 Cal 的发丝线需要真实边框时border: 1px solid var(--border)也能严格对齐。4. 宽泛的圆角尺度与慷慨的章节留白DESIGN.md §5 记录了从 2px 到 9999pxpill的宽泛圆角刻度。令牌层把 schema 的四档绑定为--radius-sm: 8px按钮/输入框/图片的标准交互半径、--radius-md: 12px卡片/中容器、--radius-lg: 16px大区块容器、--radius-pill: 9999px徽章/全圆角操作。中间的 29px/100px 属于组件级特例保持内联。章节节奏同样被令牌化--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 48px。DESIGN.md §7 明确禁止任何断点低于 48px——慷慨的留白是高级单色美学的核心。三、令牌契约tokens.css 的 Schema 决策深度解读tokens.css 开头的长注释本身就是一个极好的教学材料它逐条记录了把 Cal.com 品牌决策弯曲到共享 schema 约定上的方式。理解这些决策是正确使用令牌的前提。1.--accent的边界Link Blue 只属于超链接--accent: #0099ffLink Blue是整个系统中唯一的非灰度值。DESIGN.md §2 称其为系统里唯一的蓝严格保留给超链接。因此主 CTA 按钮用--fgCharcoal做背景而不是--accent——呼应 Cal 的深色在白底上的签名按钮蓝色只在两处出现行内文本链接以及焦点环--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)对应 DESIGN.md 记录的 Focus Ring: #3b82f6 at 50% opacity 的同类色族这种不把 Charcoal 提升为双职的做法保留了 lint 的每屏 accent 使用 ≤2 次语义。components.html 中对应实现a { color: var(--accent); text-decoration: underline; }而.btn-primary { background: var(--fg); color: #ffffff; }——蓝色从不进入按钮。2. 类型刻度顶格 64px--text-4xl: 64px是刻度上限对应 DESIGN.md §3 的 Display HeroCal Sans 64/600/1.10--leading-tight: 1.1与之匹配。--tracking-display: 0而非负值——因为 Cal Sans 大字号天然极紧再加负字距会过度挤压。--text-2xl: 32px是一个刻意的桥接层DESIGN.md 并未明确列出 32px但为了让跨品牌组件读取--text-2xl时能拿到合理的章节标题尺寸schema 要求补齐 24→48 之间的档位。3. 令牌分层的合规性在 OpenDesign 的 Design System 2.0 体系中每个共享令牌都要回答两个问题值由谁决定品牌作者 Layer A或 schema 的 B-slot与品牌省略时怎么办必需/回退/别名。design-systems/_schema/AGENTS.md 给出四层模型层谁决定值省略时示例A1-identity品牌guard 失败--bg、--fg、--accent、--font-displayA1-structure品牌guard 失败类型刻度、--container-max、--section-y-*A2品牌带回退当前 guard 失败--motion-fast、--success、--space-4B-slot品牌或 schema 建议别名guard 失败--surface-warm → var(--surface)Cal 包通过--surface-warm、--meta这类 B-slot 别名展示了品牌无意见时如何优雅塌缩design-tokens.json 的摘要显示该包 56 个令牌全部声明、全部有tokens.css源背书评分 100grade: excellent且不推荐重建。四、实操把令牌粘进工件并复用组件步骤 1粘贴:root块USAGE.md 的 Read Order 第 3 步要求把 tokens.css 的:root块逐字粘贴到工件第一个style块components.html正是这样做的——它的内联style与tokens.css内容一致。之后所有组件 CSS 一律通过var(--*)引用禁止在:root之外写裸 hex 值。步骤 2从组件清单中复用配方components.manifest.json 记录了 8 个组件组groupsbuttons、inputs、cards、badges、links、keyboard、icons、typography、layout。每个组都标注了涉及的选择器、类、元素和所引用的令牌。USAGE.md 要求复用组件组而非发明新控件。以 cards 组为例其核心实现位于 components.html.card { background: var(--surface); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--elev-raised); /* Cal 的主力卡片阴影 */ transition: box-shadow var(--motion-base) var(--ease-standard); } .card:hover { box-shadow: 0 2px 8px -4px rgba(19, 19, 22, 0.7), 0 0 0 1px rgba(34, 42, 53, 0.1), 0 8px 16px rgba(34, 42, 53, 0.06); }注意 hover 状态是在阴影栈上加深而非改色或加边框——这正是阴影即边框哲学在交互态的延续。清单还统计了令牌引用情况declared/referenced/unusedDeclared例如--danger、--warn在当前 fixture 中声明但未被引用说明 Cal 营销面极少渲染状态色——这些信息对审查者判断哪些令牌可以被安全裁剪很有价值。步骤 3Tailwind v4 集成可选如果工件使用 Tailwindtailwind-v4.css 提供了完整的theme映射--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*全部回指tokens.css变量。该文件头部明确写着 Derived from tokens.css. Keep tokens.css as the source of truth.——USAGE.md 的不要脱离 tokens.css 独立重定义 Tailwind 或 design-token 值约束即来源于此。步骤 4视觉冒烟检查preview/目录提供三张静态预览页colors.html、typography.html、spacing.html。当需要快速验证颜色角色、字阶或间距节奏时直接打开对应页面而不必重新推导令牌值。五、Do 与 Avoid生成与审查的纪律清单USAGE.md 用 Do/Avoid 两段给 Agent 划出了硬边界这里结合源码逐条给出落点Do应当遵守原样保留 schema 令牌名跨品牌切换才可靠——例如--fg、--accent是 A1-identity 层改名会导致 guard 失败--accent只用于主操作、链接、焦点态和一个明确的视觉焦点元素——每屏 accent 使用 ≤2 次优先复用 components.manifest.json 中的组件组再考虑新控件把source/文件当作 fixture 回填的审计证据——source/token-contract.report.json 把每个 TOKEN_SCHEMA 绑定映射回tokens.css的声明行如tokens.css:98对应--bg审查者可据此核对令牌出处。Avoid应当避免避免在拷贝的:root令牌块之外使用裸 hex 值——components.html中仅有的例外是#ffffff这类与令牌等值的按钮文字色避免脱离tokens.css独立重定义 Tailwind 或 design-token 值——派生文件必须回指源令牌避免声称存在原始上游证据——本包基于 curated bundled fixture不是对 Cal.com 官网的抓取避免添加components.html或DESIGN.md中不存在的新组件配方——新增控件会破坏清单派生的一致性仓库守卫会用components.htmltokens.css重新派生components.manifest.json并比对。六、设计审查清单迭代既有屏幕时的五步检查USAGE.md 与 DESIGN.md §9 共同给出了一套可执行的迭代检查流程适合审查者逐屏走查检查字体分工标题必须 Cal Sans 600正文必须 Inter——二者绝不混用检查调色板画面必须纯灰度出现品牌色即删除唯一的蓝只允许出现在文本链接与焦点环检查卡片层级必须是环形阴影 接触阴影 漫射阴影的多层栈而不是 CSS 边框检查章节间距保证 80px 的慷慨留白桌面 96px移动端不得低于 48px——留白本身就是设计检查整体气质应呈现干净、专业的调度工具质感——单色的自信零装饰性花哨。配套的 Agent 提示词模板DESIGN.md §9也值得直接引用例如构建 hero 区时Create a hero section with white background, 64px Cal Sans heading at weight 600, line-height 1.10, #242424 text, centered layout with a dark CTA button (#242424, 8px radius, white text)。七、总结design-systems/cal是一个把 Cal.com 的单色克制美学完整令牌化的 Design System 2.0 包。它的使用路径非常清晰USAGE.md 定义契约 → DESIGN.md 定义意图 → tokens.css 提供唯一事实来源 → components.html 提供可复用配方 → manifest 与 source/ 提供机器可校验的证据。对 OpenDesign Agent 而言遵守令牌先行、组件复用、校验兜底的纪律就能稳定产出风格统一、可通过 lint 与清单守卫的 Cal.com 风格工件对审查者而言USAGE.md 的 Do/Avoid 清单加上 DESIGN.md 的五步迭代检查足以对任何屏幕做出快速而准确的判定。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 OpenDesign 中的 Cal.com 设计系统包：从 USAGE.md 到 tokens.css 的完整使用指南
OpenDesign 中的 Cal.com 设计系统包从 USAGE.md 到 tokens.css 的完整使用指南【免费下载链接】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 中构建页面工件的 Agent 与设计审查者系统讲解design-systems/cal设计系统包Design System 2.0的消费方式如何按正确的阅读顺序理解包契约、如何把tokens.css的:root令牌块粘进工件、如何复用components.html中的既有组件配方以及 Cal.com 纯灰度美学背后的设计决策。读完本文你将能独立用该包生成风格一致、可通过仓库 lint 校验的调度类产品页面并理解令牌分层A1/A2/B-slot如何保障跨品牌切换的可靠性。一、先读懂包契约USAGE.md 规定的阅读顺序design-systems/cal/USAGE.md是整个 Cal.com 设计系统包的入口文档它面向两类读者生成工件的 OpenDesign Agent与做设计审查的 Reviewer。文档开篇给出的 Read Order 本质上定义了消费这个包的固定工作流先读USAGE.md——理解整个包的使用契约再读 DESIGN.md——理解视觉意图、约束与反模式anti-patterns把tokens.css的:root块整体粘到工件第一个style块中再编写组件 CSS用 components.manifest.json 做紧凑的组件清单速查当需要精确选择器或状态细节时打开 components.html需要视觉冒烟检查时翻阅preview/目录下的静态预览页。这个顺序背后有一个核心原则令牌先行、组件复用其次、视觉校验兜底。tokens.css是所有 CSS 变量的唯一事实来源source of truth组件样式必须通过var(--*)引用令牌而不是各自定义裸值。包内文件结构与职责从 manifest.json 可以看到这是一个符合od-design-system-project/v1schema 的标准 Design System 2.0 包其source.type为bundled即基于 OpenDesign 官方精选的捆绑 fixture 生成并非对 Cal.com 上游网站或仓库的新鲜爬取——这一点在 source/evidence.md 中被明确声明也是 USAGE.md 中Do not claim original upstream source evidence约束的来源。文件职责DESIGN.md视觉意图、颜色角色、排版层级、阴影系统、响应式行为、Agent 提示词指南tokens.css编译后的令牌:root块唯一事实来源design-tokens.json由tokens.css token-contract 报告派生出的 Design Tokens JSONtailwind-v4.css由tokens.css派生的 Tailwind v4theme映射components.html独立组件 fixture52 个选择器、26 个类、25 个元素components.manifest.json组件清单缓存由components.htmltokens.css重新派生manifest.json机器可读的项目入口preview/colors、typography、spacing 三张静态预览页source/导入证据evidence.md、tokens.source.json、token-contract.report.json其中design-tokens.json与tailwind-v4.css都属于派生产物应依据报告和令牌样式表重新生成而不是手工编辑——这是 source/evidence.md 明确规定的维护纪律。二、设计亮点Cal.com 纯灰度美学的四个支柱USAGE.md 的 Design Highlights 用四条浓缩了 Cal.com 视觉体系的核心特征DESIGN.md 则对每一条做了展开1. 纯灰度品牌调色板——用对比而非颜色表达力量Cal.com 的营销站点是单色克制monochromatic restraint的典范近黑标题#242424Charcoal比纯黑更暖的签名色、中灰次级文本#898989Mid Gray、纯白表面#ffffff。DESIGN.md §2 将这种哲学概括为grayscale brand to emphasise on boldness and professionalism——色彩被当作异物一旦出现罕见的蓝色链接、绿色信任徽章就像黑白照片中的受控点缀。令牌层面对这一哲学做了结构性落实见 tokens.css 顶部注释--fg: #242424Charcoal而不是#000000——微暖感让画布不至于刺眼--fg-2: #111111Midnight独立绑定用于最高对比度的导航链接与深色强调--muted: #898989Mid Gray作为第三级灰度用于描述与次要标签--surface-warm: var(--surface)、--meta: var(--muted)采用别名塌缩——Cal 没有暖色表面层也没有低于 Mid Gray 的第四级灰因此按 schema 约定用var()折叠而不是生造一个不存在的值。2. Cal Sans Inter严格的展示/正文二分Cal Sans 是 Mark Davis 设计的开源几何展示字体默认字距极紧天生为大字号头条而设计Inter 则承担正文职责DESIGN.md 称之为 rock-solid。二者的分工被 components.html 的 CSS 严格执行h1, h2, h3 { font-family: var(--font-display); /* Cal Sans */ font-weight: 600; /* Cal Sans 按 600 设计 */ line-height: var(--leading-tight); /* 1.1 */ letter-spacing: var(--tracking-display); /* 0 */ }排版层级中Display Hero 为 Cal Sans 64px/600/1.10Section Heading 为 48pxFeature Heading 为 24px而正文一律走 Inter。关键纪律是Cal Sans 只用于 24px 的标题绝不用于正文低于 16px 会失控大字号字距保持 0px字体本身已极紧24px 以下必须施加正字距 0.2px防止挤压几乎所有 Cal Sans 用法都锁定 weight 600——该字体就是按半粗设计的混用其他字重会破坏字符形态。3. 11 层阴影定义用阴影即边框取代 CSS border这是 Cal.com 体系中最精巧的部分。tokens.css 将多图层阴影合成提炼为三个受控层级--elev-flat: none; /* 页面画布 */ --elev-ring: 0 0 0 1px var(--border); /* 1px 环形边框 */ --elev-raised: /* 主力卡片阴影栈 */ 0 1px 5px -4px rgba(19, 19, 22, 0.7), /* 底部接触阴影 */ 0 0 0 1px rgba(34, 42, 53, 0.08), /* 发丝线环形边框 */ 0 4px 8px rgba(34, 42, 53, 0.05); /* 5% 环境漫射 */三层缺一不可接触阴影-4px扩散把模糊从顶部抬离提供落地感环形阴影替代 CSS 边框不改变布局5% 的漫射阴影提供柔和环境深度。--border也据此绑定为rgba(34, 42, 53, 0.08)——即 Cal 环形阴影的真实 alpha而非实心 hex这样--elev-ring默认就能复现 Cal 的发丝线需要真实边框时border: 1px solid var(--border)也能严格对齐。4. 宽泛的圆角尺度与慷慨的章节留白DESIGN.md §5 记录了从 2px 到 9999pxpill的宽泛圆角刻度。令牌层把 schema 的四档绑定为--radius-sm: 8px按钮/输入框/图片的标准交互半径、--radius-md: 12px卡片/中容器、--radius-lg: 16px大区块容器、--radius-pill: 9999px徽章/全圆角操作。中间的 29px/100px 属于组件级特例保持内联。章节节奏同样被令牌化--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 48px。DESIGN.md §7 明确禁止任何断点低于 48px——慷慨的留白是高级单色美学的核心。三、令牌契约tokens.css 的 Schema 决策深度解读tokens.css 开头的长注释本身就是一个极好的教学材料它逐条记录了把 Cal.com 品牌决策弯曲到共享 schema 约定上的方式。理解这些决策是正确使用令牌的前提。1.--accent的边界Link Blue 只属于超链接--accent: #0099ffLink Blue是整个系统中唯一的非灰度值。DESIGN.md §2 称其为系统里唯一的蓝严格保留给超链接。因此主 CTA 按钮用--fgCharcoal做背景而不是--accent——呼应 Cal 的深色在白底上的签名按钮蓝色只在两处出现行内文本链接以及焦点环--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)对应 DESIGN.md 记录的 Focus Ring: #3b82f6 at 50% opacity 的同类色族这种不把 Charcoal 提升为双职的做法保留了 lint 的每屏 accent 使用 ≤2 次语义。components.html 中对应实现a { color: var(--accent); text-decoration: underline; }而.btn-primary { background: var(--fg); color: #ffffff; }——蓝色从不进入按钮。2. 类型刻度顶格 64px--text-4xl: 64px是刻度上限对应 DESIGN.md §3 的 Display HeroCal Sans 64/600/1.10--leading-tight: 1.1与之匹配。--tracking-display: 0而非负值——因为 Cal Sans 大字号天然极紧再加负字距会过度挤压。--text-2xl: 32px是一个刻意的桥接层DESIGN.md 并未明确列出 32px但为了让跨品牌组件读取--text-2xl时能拿到合理的章节标题尺寸schema 要求补齐 24→48 之间的档位。3. 令牌分层的合规性在 OpenDesign 的 Design System 2.0 体系中每个共享令牌都要回答两个问题值由谁决定品牌作者 Layer A或 schema 的 B-slot与品牌省略时怎么办必需/回退/别名。design-systems/_schema/AGENTS.md 给出四层模型层谁决定值省略时示例A1-identity品牌guard 失败--bg、--fg、--accent、--font-displayA1-structure品牌guard 失败类型刻度、--container-max、--section-y-*A2品牌带回退当前 guard 失败--motion-fast、--success、--space-4B-slot品牌或 schema 建议别名guard 失败--surface-warm → var(--surface)Cal 包通过--surface-warm、--meta这类 B-slot 别名展示了品牌无意见时如何优雅塌缩design-tokens.json 的摘要显示该包 56 个令牌全部声明、全部有tokens.css源背书评分 100grade: excellent且不推荐重建。四、实操把令牌粘进工件并复用组件步骤 1粘贴:root块USAGE.md 的 Read Order 第 3 步要求把 tokens.css 的:root块逐字粘贴到工件第一个style块components.html正是这样做的——它的内联style与tokens.css内容一致。之后所有组件 CSS 一律通过var(--*)引用禁止在:root之外写裸 hex 值。步骤 2从组件清单中复用配方components.manifest.json 记录了 8 个组件组groupsbuttons、inputs、cards、badges、links、keyboard、icons、typography、layout。每个组都标注了涉及的选择器、类、元素和所引用的令牌。USAGE.md 要求复用组件组而非发明新控件。以 cards 组为例其核心实现位于 components.html.card { background: var(--surface); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--elev-raised); /* Cal 的主力卡片阴影 */ transition: box-shadow var(--motion-base) var(--ease-standard); } .card:hover { box-shadow: 0 2px 8px -4px rgba(19, 19, 22, 0.7), 0 0 0 1px rgba(34, 42, 53, 0.1), 0 8px 16px rgba(34, 42, 53, 0.06); }注意 hover 状态是在阴影栈上加深而非改色或加边框——这正是阴影即边框哲学在交互态的延续。清单还统计了令牌引用情况declared/referenced/unusedDeclared例如--danger、--warn在当前 fixture 中声明但未被引用说明 Cal 营销面极少渲染状态色——这些信息对审查者判断哪些令牌可以被安全裁剪很有价值。步骤 3Tailwind v4 集成可选如果工件使用 Tailwindtailwind-v4.css 提供了完整的theme映射--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*全部回指tokens.css变量。该文件头部明确写着 Derived from tokens.css. Keep tokens.css as the source of truth.——USAGE.md 的不要脱离 tokens.css 独立重定义 Tailwind 或 design-token 值约束即来源于此。步骤 4视觉冒烟检查preview/目录提供三张静态预览页colors.html、typography.html、spacing.html。当需要快速验证颜色角色、字阶或间距节奏时直接打开对应页面而不必重新推导令牌值。五、Do 与 Avoid生成与审查的纪律清单USAGE.md 用 Do/Avoid 两段给 Agent 划出了硬边界这里结合源码逐条给出落点Do应当遵守原样保留 schema 令牌名跨品牌切换才可靠——例如--fg、--accent是 A1-identity 层改名会导致 guard 失败--accent只用于主操作、链接、焦点态和一个明确的视觉焦点元素——每屏 accent 使用 ≤2 次优先复用 components.manifest.json 中的组件组再考虑新控件把source/文件当作 fixture 回填的审计证据——source/token-contract.report.json 把每个 TOKEN_SCHEMA 绑定映射回tokens.css的声明行如tokens.css:98对应--bg审查者可据此核对令牌出处。Avoid应当避免避免在拷贝的:root令牌块之外使用裸 hex 值——components.html中仅有的例外是#ffffff这类与令牌等值的按钮文字色避免脱离tokens.css独立重定义 Tailwind 或 design-token 值——派生文件必须回指源令牌避免声称存在原始上游证据——本包基于 curated bundled fixture不是对 Cal.com 官网的抓取避免添加components.html或DESIGN.md中不存在的新组件配方——新增控件会破坏清单派生的一致性仓库守卫会用components.htmltokens.css重新派生components.manifest.json并比对。六、设计审查清单迭代既有屏幕时的五步检查USAGE.md 与 DESIGN.md §9 共同给出了一套可执行的迭代检查流程适合审查者逐屏走查检查字体分工标题必须 Cal Sans 600正文必须 Inter——二者绝不混用检查调色板画面必须纯灰度出现品牌色即删除唯一的蓝只允许出现在文本链接与焦点环检查卡片层级必须是环形阴影 接触阴影 漫射阴影的多层栈而不是 CSS 边框检查章节间距保证 80px 的慷慨留白桌面 96px移动端不得低于 48px——留白本身就是设计检查整体气质应呈现干净、专业的调度工具质感——单色的自信零装饰性花哨。配套的 Agent 提示词模板DESIGN.md §9也值得直接引用例如构建 hero 区时Create a hero section with white background, 64px Cal Sans heading at weight 600, line-height 1.10, #242424 text, centered layout with a dark CTA button (#242424, 8px radius, white text)。七、总结design-systems/cal是一个把 Cal.com 的单色克制美学完整令牌化的 Design System 2.0 包。它的使用路径非常清晰USAGE.md 定义契约 → DESIGN.md 定义意图 → tokens.css 提供唯一事实来源 → components.html 提供可复用配方 → manifest 与 source/ 提供机器可校验的证据。对 OpenDesign Agent 而言遵守令牌先行、组件复用、校验兜底的纪律就能稳定产出风格统一、可通过 lint 与清单守卫的 Cal.com 风格工件对审查者而言USAGE.md 的 Do/Avoid 清单加上 DESIGN.md 的五步迭代检查足以对任何屏幕做出快速而准确的判定。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考