open-design 的 Airtable 设计系统实现从 DESIGN 规范到 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本指南以 design-systems/airtable/DESIGN-nl.md及其英文原版 DESIGN.md为核心骨架结合 open-design 仓库中 Airtable 设计系统包的真实产物——tokens.css、design-tokens.json、components.manifest.json、tailwind-v4.css——展开源码级讲解。读完本文你将掌握Airtable「白画布 深海军蓝 单一蓝色强调」设计语言的完整规范参数56 个语义 token 的绑定逻辑与品牌决策依据以及如何在 open-design 的 agent 工作流中直接复用它生成高保真原型。一、设计系统包的定位与包结构在 open-design 中每个设计系统都是一个可移植的独立包。根据 design-systems/README.md 的说明目录design-systems/slug/下每个子目录是一个可移植设计系统包在「Design System」界面或受支持的建项目流程中选择某个包时其设计上下文会被组合进 agent 提示词中。每个内置包拥有相同的最小机器可读形态design-systems/slug/ ├── manifest.json ├── DESIGN.md └── tokens.cssAirtable 包则是一个「富包」rich package通过 manifest.json 声明了更多运行时文件design-systems/airtable/ ├── manifest.json # 发现元数据与来源声明 ├── DESIGN.md # 面向 agent 的规范散文另有 20 个语言版本 ├── USAGE.md # agent 阅读顺序与使用指南 ├── tokens.css # 编译后的语义 token 样式表唯一事实源 ├── design-tokens.json # 由 token 契约报告派生的 JSON ├── tailwind-v4.css # 由 tokens.css 派生的 Tailwind v4 映射 ├── components.html # 独立组件 fixture ├── components.manifest.json # 派生组件/token 索引 ├── preview/ # colors / typography / spacing 预览页 └── source/ # evidence.md、tokens.source.json、token-contract.report.json包来源为type: bundled即 source/evidence.md 所声明的本包派生自 OpenDesign 精选的内置 fixtureDESIGN.md、tokens.css、components.html不声称抓取过上游品牌仓库或官网。派生文件design-tokens.json、tailwind-v4.css是缓存而非竞争性事实源必须与 tokens.css 保持一致。二、视觉主题与氛围白画布上的「精致简洁」Airtable 的网站是一个干净、企业友好的平台通过白色画布 深海军蓝文字 Airtable Blue 单一交互强调色传达「精致简洁」sophisticated simplicity。Haas 字体家族display text 变体营造出瑞士式精密的排版系统全站采用正向字距。核心特征来自 DESIGN.md 第 1 节白色画布搭配深海军蓝文字#181d26Airtable Blue#1b61c9作为主要 CTA 与链接颜色Haas Haas Groot Disp 双字体系统正文正向字距0.08px–0.28px按钮圆角 12px卡片 16px–32px带蓝色调的层层阴影rgba(45,127,249,0.28) 0px 1px 3px语义主题 token--theme_*前缀的 CSS 变量命名体系关于最后一个特征tokens.css 顶部注释给出了品牌层面的三个关键判断--accent绑定 Airtable Blue 而非深海军蓝深海军蓝已是--fg--fg绑定#181d26而非纯黑纯黑会与 Airtable Blue 冲突、在白画布上显得生硬--surface-warm直接别名到--surfaceAirtable 没有暖色层级新增暖色等于发明品牌不用的色调。三、色彩调色板与角色映射3.1 规范中的颜色角色主色Primary角色色值说明Deep Navy 深海军蓝#181d26主文字Airtable Blue#1b61c9CTA 按钮、链接White 白色#ffffff主表面Spotlightrgba(249,252,255,0.97)--theme_button-text-spotlight语义色Semantic角色色值绑定 tokenSuccess Green#006400--theme_success-textWeak Textrgba(4,14,32,0.69)--theme_text-weakSecondary Activergba(7,12,20,0.82)--theme_button-text-secondary-active中性色Neutral角色色值用途Dark Gray#333333次要文字Mid Blue#254fad链接/强调的蓝色变体Border#e0e2e6卡片边框Light Surface#f8fafc微妙表面3.2 tokens.css 中的落地映射tokens.css 将这些规范逐条绑定为语义 token每条都带有设计决策注释:root { /* Surface白色画布白色浮起卡片 */ --bg: #ffffff; --surface: #ffffff; --surface-warm: var(--surface); /* 别名——Airtable 无暖色层级 */ /* Foreground四层字阶 */ --fg: #181d26; /* Deep Navy——主文字 */ --fg-2: #333333; /* Dark Gray——次要文字/正文 */ --muted: rgba(4, 14, 32, 0.69); /* Weak Text——说明、元信息 */ --meta: var(--muted); /* 别名——无独立三级色调 */ /* Border */ --border: #e0e2e6; /* 卡片/输入框边缘 */ --border-soft: #eef0f3; /* 内部行分隔线表格行、列表分割线 */ /* Accent全品牌唯一的彩色强调 */ --accent: #1b61c9; /* Airtable Blue——CTA、链接 */ --accent-on: #ffffff; /* 蓝色上的白色文字 */ --accent-hover: #254fad; /* Mid Blue——文档化的悬停色调 */ --accent-active: color-mix(in oklab, var(--accent), black 14%); /* Semantic */ --success: #006400; /* 文档化的 Success Green */ --warn: #eab308; --danger: #dc2626; }值得注意的源码事实tokens.css 注释中明确写出--accent-hover绑定#254fad而非 color-mix 计算变暗——Airtable 明确将悬停层级定义为独立品牌色调而非计算出的阴影。这是该包对 schema 惯例的一次有意弯曲。--success为#006400比 schema 默认的#16a34a更深——Airtable 的语义绿刻意更深使其在白画布上读作「已确认 / 已保存」而非鲜艳告警。每屏 accent 使用硬上限 ≤2 处可见使用由 lint 强制装饰性蓝色被禁止因为品牌将 accent 读作「这就是那个动作」。3.3 阴影系统规范定义了两组阴影蓝色调Blue-tintedrgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset柔和Softrgba(15,48,106,0.05) 0px 0px 20pxtokens.css 将完整四层阴影栈逐字复刻进--elev-raised规范第 6 节并强调第三层蓝色光晕是品牌签名——它让卡片感觉与 Airtable Blue CTA 出自同一只手而不是被通用灰阴影「丢」到页面上覆盖该 token 时绝不能丢弃第三层--elev-raised: 0 0 1px rgba(0, 0, 0, 0.32), /* 1px 深色发丝线定义边缘 */ 0 0 2px rgba(0, 0, 0, 0.08), /* 2px 环境光柔和包围 */ 0 1px 3px rgba(45, 127, 249, 0.28), /* 3px 蓝色光晕 1yAirtable 签名 */ inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); /* 0.5px 内环微妙内高光 */四、排版规则Haas 瑞士精密体系4.1 字体家族主字体Haas回退栈-apple-system, system-ui, Segoe UI, RobotoDisplay 字体Haas Groot Disp回退Haastokens.css 将其绑定为--font-display与--font-body并明确Haas 家族是 Airtable 的专有瑞士字体无需在包内引用 CDN——字体栈已列出 OS 回退-apple-system, system-ui, Segoe UI, Roboto因此即使 Haas 未加载artifact 也能可读渲染。4.2 层级表规范第 3 节原文角色字体字号字重行高字距Display HeroHaas48px4001.15normalDisplay BoldHaas Groot Disp48px9001.50normalSection HeadingHaas40px4001.25normalSub-headingHaas32px400–5001.15–1.25normalCard TitleHaas24px4001.20–1.300.12pxFeatureHaas20px4001.25–1.500.1pxBodyHaas18px4001.350.18pxBody MediumHaas16px5001.300.08–0.16pxButtonHaas16px5001.25–1.300.08pxCaptionHaas14px400–5001.25–1.350.07–0.28px4.3 tokens.css 中的类型刻度tokens.css 据规范第 3 节层级派生出完整字号刻度顶端封顶 48px——Airtable 之所以读作「精致简洁」是因为层级来自 Haas 家族内部的字重 字距变化而非夸张的 px 数字--text-xs: 12px; /* 元数据、标签 */ --text-sm: 14px; /* 说明、小型 UI */ --text-base: 16px; /* body medium、按钮 */ --text-lg: 20px; /* feature 文案 */ --text-xl: 24px; /* 卡片标题 */ --text-2xl: 32px; /* 子标题 */ --text-3xl: 40px; /* 章节标题 */ --text-4xl: 48px; /* display hero */两个关键的行高/字距决策tokens.css 注释明确--leading-body: 1.35而非 schema 惯例的 1.5——密集产品 UI表格行、记录卡片需要更紧的节奏否则行会显得空疏。--leading-tight: 1.2用于标题匹配文档化的 1.15–1.25 区间。--tracking-display: 0normal而非负值——规范第 3 节明确 display 标题字距为normal、正文为正向字距0.08–0.28px。Haas 家族是为正向字距设计的把 display 映射成负 em 会对抗字体本身。正文级的正向字距在组件层应用按钮、说明文字因为--tracking-display只覆盖 display 尺寸。五、组件样式规范5.1 按钮规范第 4 节Primary Blue#1b61c9背景、白色文字、padding 16px 24px、圆角 12pxWhite白底、#181d26文字、圆角 12px、1px 白色边框Cookie Consent#1b61c9背景、圆角 2px锐利5.2 卡片与输入卡片1px solid #e0e2e6圆角 16px–24px输入框标准 Haas 样式5.3 组件 manifest 中的实现证据components.manifest.json 记录了组件 fixturecomponents.html的真实构成1 个样式块、62 个选择器、35 个类、27 个元素并将组件归纳为 8 个组组标签关键选择器引用 tokenbuttons按钮与 CTA.btn、.btn-primary、.btn-secondary--accent、--accent-on、--radius-sm、--space-2、--text-base、--motion-fast、--ease-standardinputs表单字段与控件.field、.field input、.field input:focus-visible--accent、--focus-ring、--muted、--text-sm、--text-xscards卡片与面板.card、.card-link、.card:hover--accent、--space-2、--text-smbadges徽章、chip 与状态标签.badge、.badge-dot、.badge-muted、.badge-success--fg、--fg-2、--radius-pill、--space-2、--text-xslinks链接与行内动作a、a:hover--accent-hoverkeyboard键盘提示kbd无icons图标槽.icon、.icon-lg无typography排版刻度与文字工具.eyebrow、.lead、.body-sm、.body-muted、h1/h2/h3--font-display、--leading-tight、--tracking-display、--text-3xl、--mutedlayout布局原语.container、.row-between、.stack-3/4/6--container-max、--container-gutter-*、--border该 manifest 还做了 token 审计所有被引用的 token 都已声明undeclaredReferenced: []并列出 9 个「已声明但未使用」的 token--danger、--elev-flat、--elev-ring、--meta、--radius-lg、--space-1、--surface-warm、--text-2xl、--warn——它们为扩展与深色变体预留不属于本次 fixture 的消费面。USAGE.md 的规则是先复用 components.manifest.json 中的组件组再发明新控件。六、布局与圆角刻度规范第 5 节定义了间距与圆角体系间距1–48px以 8px 为基数圆角2px小、12px按钮、16px卡片、24px章节、32px大、50%圆形tokens.css 中绑定为--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --radius-sm: 12px; /* 按钮、输入框、chip */ --radius-md: 16px; /* 卡片、模态框 */ --radius-lg: 24px; /* 特色容器 */ --radius-pill: 9999px; /* 徽章、头像 */这里有一处值得注意的取舍tokens.css 注释schema 的四个圆角层级绑定为 12/16/24/99992px 的「锐利」cookie-consent 圆角是组件级细节就地内联而非提升为 schema token32px 的「大」圆角属于章节级细节绑定到--radius-lg会让典型卡片表面过度圆润因此刻意不绑定。这两项正是「组件级 vs 系统级」token 决策的范例。章节纵向节奏为 96/64/48px桌面/平板/手机——DESIGN.md 未数值化固定章节 padding但该站点通透的企业风格要求慷慨的垂直空间96 12 × 8 符合 8px 基数体系且落在文档化的 425–1664px 响应式区间内。容器宽度上限 1200pxgutter 在移动端收窄以保护密集营销文案的行长--section-y-desktop: 96px; --section-y-tablet: 64px; --section-y-phone: 48px; --container-max: 1200px; --container-gutter-desktop: 24px; --container-gutter-tablet: 16px; --container-gutter-phone: 12px;七、深度与动效7.1 深度带蓝色调的多层阴影系统见第三节 3.3柔和环境阴影rgba(15,48,106,0.05) 0px 0px 20pxtokens.css 中还补充了焦点环 token——3px Airtable-Blue 半透明光晕键盘焦点读作「可操作」而不与饱和的 CTA 填充竞争--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);7.2 动效tokens.css 补充Airtable 产品 UI 的动效用于确认直接操作单元格编辑、拖放而非编排入场——150/200ms 在保持响应感的同时不拖沓--motion-fast: 150ms; --motion-base: 200ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1);八、规范约束该做什么、不该做什么规范第 7 节给出明确的行动边界Do做CTA 使用 Airtable BlueHaas 搭配正向字距按钮使用 12px 圆角精确保留 schema token 名称保证跨品牌切换可靠用--accent表示主操作、链接、焦点态并保持唯一清晰的焦点元素Dont不做不要省略正向字距不要使用厚重的阴影不在复制的:roottoken 块之外使用原始 hex 值见 USAGE.md不独立于 tokens.css 重新定义 Tailwind 或 design-token 值不声称存在原始上游来源证据本包基于精选内置 fixture不添加 components.html 或 DESIGN.md 中未代表的组件配方这些约束在 USAGE.md 中被固化为包契约并通过 docs/design-systems.md 中描述的包质量守卫manifest 路径校验、派生文件一致性、token 契约、组件 fixture、source 证据、预览覆盖在 CI 层面强制。九、响应式行为规范第 8 节断点覆盖425–1664px共 23 个断点。tokens.css 将容器最大宽度设为 1200px落在该响应式区间的桌面甜点带中部gutter 按设备收窄桌面 24px / 平板 16px / 手机 12px章节垂直节奏随断点递减96/64/48px。规范本身未逐条枚举 23 个断点的具体像素值从源码结构看包通过「容器最大宽度 三档 gutter 三档章节节奏」的组合来表达响应式策略而不复制上游的全部媒体查询。十、Agent Prompt 指南与使用工作流10.1 Agent Prompt 指南规范第 9 节给生成式 agent 的最小配色指令文字Deep Navy#181d26CTAAirtable Blue#1b61c9背景White#ffffff边框#e0e2e610.2 USAGE.md 规定的阅读顺序USAGE.md 定义了 agent 与审查者使用该包的固定顺序先读本文件USAGE.md理解包契约读 DESIGN.md 理解视觉意图、约束与反模式将tokens.css粘贴进第一个 artifact 的style块再写组件 CSS用components.manifest.json作紧凑组件清单需要精确选择器或状态时打开components.html需要视觉 sanity check 时检查preview/页面colors、typography、spacing。10.3 Tailwind v4 派生映射若项目使用 Tailwind v4tailwind-v4.css 将全部 token 映射进theme块使bg-accent、text-fg、rounded-md、shadow-raised等工具类直接可用import tailwindcss; import ./tokens.css; theme { --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-fg: var(--fg); --color-muted: var(--muted); --font-display: var(--font-display); --text-4xl: var(--text-4xl); --radius-sm: var(--radius-sm); --shadow-raised: var(--elev-raised); /* ...全部 56 个 token 的映射 */ }该文件头部注明「Derived from tokens.css. Keep tokens.css as the source of truth.」——它是派生物任何修改都应回到 tokens.css。十一、Token 契约与质量保障design-tokens.json 是该包 token 契约的机器可读证明summary 字段显示{ totalTokens: 56, declaredTokens: 56, sourceBackedTokens: 56, layerCounts: { A1-identity: 8, B-slot: 4, A2: 26, A1-structure: 18 }, score: 100, grade: excellent, recommendRebuild: false }56 个 token 全部有tokens.css声明行作为来源如--bg→tokens.css:101、--elev-raised→tokens.css:231置信度全部为high。source/token-contract.report.json将每个 TOKEN_SCHEMA 绑定映射回 tokens.css 的声明行design-tokens.json与tailwind-v4.css均为派生输出应从此报告与 token 样式表重新生成而非手工编辑见 source/evidence.md。Token 命名标准定义在 design-systems/_schematokens.schema.tsA2 回退对等性由defaults.css保证lint 强制由 apps/daemon/src/lint-artifact.ts 执行。十二、快速上手如何复用该包生成 Airtable 风格产物综合包内全部契约最简洁的落地路径如下从 Design System 界面或支持的工作流选择airtable包仓库目录 design-systems/airtable将 tokens.css 的:root块原样粘贴进 artifact 首个style块按 USAGE.md 的顺序阅读 DESIGN 文档与组件 fixture复用 components.manifest.json 中的既有组件组遵守 Agent Prompt 指南文字#181d26、CTA#1b61c9、背景#ffffff、边框#e0e2e6在复制的 token 块之外避免裸 hex 值每个屏幕的 accent 使用保持 ≤2 处卡片阴影沿用--elev-raised完整四层栈需要 Tailwind 工具类时导入 tailwind-v4.css 的theme映射而不是自行重定义设计 token。按照这一路径你可以让 coding agent 稳定地产出与 Airtable 品牌语调一致的「白画布 深海军蓝 Airtable Blue」数据产品界面——从表格密集的 dashboard 到企业营销页都能保持瑞士式精密的排版与单一蓝色强调的可信视觉语言。【免费下载链接】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），仅供参考