Open Design 中的 OpenAI 风格设计系统深青黑墨色、编辑风衬线与语义 Token 的完整落地指南【免费下载链接】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本篇技术指南围绕 open-design 仓库内置的 OpenAI 设计系统包design-systems/openai/DESIGN-zh.md展开系统讲解其纯白画布 深青黑墨色 Signifier 编辑风衬线 唯一青绿强调色的克制设计语言并对照 tokens.css、design-tokens.json 与 components.html 等仓库实现给出可直接复制使用的色彩、排版、组件、间距、动效与使用约束规范。读完本文你将掌握如何在 AI 产品界面中复刻 OpenAI 式的沉静研究室气质并能把整套规范作为标准 design-system 包接入 Open Design 的 Agent 提示词组合与项目创建流程。1. 包结构与仓库定位一份可供 Agent 消费的设计系统在 open-design 仓库中design-systems/目录下每个子目录都是一个可移植的设计系统包。根据 design-systems/README.md 的说明每个内置包至少包含三种机器可读的最小文件形态design-systems/slug/ ├── manifest.json # 稳定发现元数据、来源与声明路径 ├── DESIGN.md # 面向 Agent 的规范正文即本主题文档 └── tokens.css # 编译后的语义 Token 样式表唯一事实源OpenAI 包在最小形态之上还声明了丰富的扩展文件见 manifest.json文件作用USAGE.mdAgent 与审阅者的阅读顺序与使用契约components.html独立可用的组件夹具41 个选择器、18 个类、24 个元素components.manifest.json由组件夹具与 token 样式表派生的组件/Token 索引design-tokens.json派生的设计 Token JSON56 个 token含契约报告tailwind-v4.css派生的 Tailwind v4 映射preview/色彩、排版、间距三个可视化预览页source/导入证据、token 契约报告与源 Token 快照需要注意派生文件的从属关系tailwind-v4.css与design-tokens.json都是从tokens.css派生的缓存产物不应手工编辑唯一事实源始终是tokens.csssource/evidence.md。从design-tokens.json的 summary 可以看到该包 56 个 token 全部有源声明支撑契约评分为 100、等级为excellentrecommendRebuild为false——意味着 token 层与规范文档完全同步。2. 视觉主题与氛围一座面向公众开放的研究室OpenAI 产品界面的气质可以用一句话概括严谨、克制、刻意地安静。整套视觉以纯白画布 深青黑墨色的二元叠置为锚点页面背景为纯白#ffffff与近黑墨色#0d0d0d叠置后者带有隐约的青色底调使文字呈现微微冷感而非咄咄逼人的深暗这种无彩色中性感将模型输出、代码与文字推至视觉中心外框chrome退居其次。标志性手法是以克制的字重使用Söhne系统替代字体为Inter正文 400、导航与标签 500、强调 600并与Signifier衬线字体搭配专用于编辑风展示版面。大多数 AI 品牌倾向未来感而 OpenAI 的衬线标题赋予产品一种悄然的文学气质。形状系统统一圆润8px–12px 圆角标签与芯片使用 9999px 全圆角胶囊无处出现生硬直角。区块之间以留白而非分隔线过渡当边框出现时是#e5e5e5的细线读起来像颜色的缺席而非其存在。核心特征清单与 tokens.css 的变量声明一一对应纯白画布#ffffff搭配深青黑墨色#0d0d0d——对应--bg/--fgSöhne / Inter字重保守400、500、600——克制胜于张扬Signifier 衬线字体用于编辑风展示标题——--font-display全局软圆角 8–12px芯片使用 9999px 胶囊——--radius-sm/--radius-md/--radius-pill细线边框#e5e5e5谨慎使用留白为主要分隔手段——--border/--surface-warm深青色单色插图标志图形中不使用渐变行高宽松1.55–1.65字间距接近零——--leading-body: 1.65、--tracking-display: -0.02em。3. 色彩规范与角色中性系统中唯一的彩色OpenAI 包的色彩体系分为五层每一层都在tokens.css中有精确的变量绑定3.1 主色角色色值CSS 变量用途纯白#ffffff--bg主背景、卡片表面、按钮背景墨黑#0d0d0d--fg主文本、品牌标识、主要行动按钮柔黑#1a1a1a--fg-2次级标题、非关键文字的备选墨色3.2 表面与背景角色色值CSS 变量用途薄雾#fafafa--surface-warm区块分隔背景、页脚表面珍珠#f5f5f5--surface卡片表面、高层级面板云白#ececec—禁用状态背景、分隔色调3.3 品牌强调色唯一彩色角色色值CSS 变量用途OpenAI 青#10a37f--accent品牌主色、链接、高亮徽章深青#0a7a5e--accent-hover品牌色的悬停与按下状态浅青#e8f5f0—成功徽章与高亮提示的底色实现层面tokens.css还额外定义了--accent-on: #ffffff强调色上的文字与--accent-active: color-mix(in oklab, var(--accent), black 14%)按下态使用现代color-mix与 oklab 色彩空间动态派生这体现了 token 化设计中派生色不重复硬编码的做法。3.4 中性色与文字色角色色值CSS 变量用途石墨#3c3c3c—正文、默认阅读色板岩#6e6e6e--muted次要文字、说明文字、元数据浅灰#9b9b9b--meta三级文字、占位符、禁用标签石色#c4c4c4—装饰性分隔线、浅色图标3.5 语义色与边框角色色值CSS 变量用途细线边框#e5e5e5--border标准细线分隔符柔边框#ededed--border-soft白色表面上的卡片轮廓错误#ef4146--danger表单校验、破坏性操作警告#f5a623--warn提示性状态的柔和琥珀色信息#2563eb—信息类链接色调谨慎使用青色仍为首选值得注意的是成功语义色--success直接复用了#10a37f青绿与品牌强调色合一——这是唯一强调色原则在语义层的贯彻。4. 排版规则衬线赋予灵魂无衬线支撑系统4.1 字体族三件套--font-display: Signifier, Source Serif Pro, Georgia, ui-serif, serif; --font-body: Söhne, Inter, system-ui, -apple-system, Segoe UI, sans-serif; --font-mono: Söhne Mono, ui-monospace, JetBrains Mono, Menlo, Consolas, monospace;三者的分工明确--font-display仅用于编辑风展示时刻--font-body覆盖全部 UI 与阅读文字--font-mono服务代码块与终端输出。备用字体栈设计完整即使 Söhne / Signifier 未授权加载也能平滑回退到 Inter、Georgia 与系统等宽字体。4.2 字号层级表角色字体字号字重行高字间距备注展示Signifier56px (3.5rem)4001.08-0.02em编辑风主视觉、公告标题H1Söhne40px (2.5rem)6001.15-0.01em页面标题H2Söhne28px (1.75rem)6001.2-0.005em区块标题H3Söhne20px (1.25rem)6001.3normal子区块标题大正文Söhne18px (1.125rem)4001.6normal导语段落正文Söhne16px (1rem)4001.65normal标准阅读文字小正文Söhne14px (0.875rem)4001.55normal卡片正文、密集 UI说明Söhne13px (0.8125rem)5001.40.01em元数据、徽章标签Söhne12px (0.75rem)5001.30.04em眉题、大写导航链接代码Söhne Mono14px (0.875rem)4001.55normal代码块、终端输出这套层级在tokens.css中被完整固化为--text-xs12px到--text-4xl56px八个字号变量以及--leading-body: 1.65、--leading-tight: 1.08、--tracking-display: -0.02em三个排版变量。在 components.html 的组件夹具中h1选择器直接使用--font-display绑定 Signifier 衬线展示body则使用--font-body正是规范展示用衬线、UI 用无衬线的落地形态。4.3 三条排版原则克制即身份字重上限为 600700 及以上会偏离品牌气质层级通过字号与颜色区分而非字重叠加。衬线赋予灵魂无衬线支撑系统Signifier 仅出现在编辑风展示时刻产品 UI 全部使用无衬线字体。展示文字负字间距展示字号使用 -0.02em16px 时字间距归零。5. 组件样式从规范到可复用类名组件规范在 components.html 中被实现为 18 个类名、41 个选择器并且由 components.manifest.json 建立了组件 → token 引用的完整索引buttons、inputs、cards、badges、links、icons、typography、layout 八个分组。关键点夹具中每一个可见值都来自tokens.cssunusedDeclared与undeclaredReferenced均为空或可查保证了无游离硬编码。5.1 按钮buttons 组主要按钮.btn-primary背景#0d0d0d--fg、文字#ffffff--bg内边距 10px 18px圆角胶囊用 9999px矩形行动按钮用 12px--radius-sm悬停背景#1a1a1a--fg-2用途主要行动按钮、体验 ChatGPT、登录次要按钮.btn-secondary背景#ffffff、文字#0d0d0d边框 1px solid#e5e5e5圆角 12px悬停背景#fafafa、边框#d4d4d4品牌强调按钮.btn-teal背景#10a37f--accent、文字#ffffff--accent-on圆角 12px悬停#0a7a5e--accent-hover用途高亮升级行动按钮、成功路径焦点态统一由--focus-ring: 0 0 0 3px rgba(16, 163, 127, 0.12)提供.btn:focus-visible这是无障碍焦点可见性的标准做法。5.2 卡片cards 组背景#ffffff边框 1px solid#ededed--border-soft圆角 16px--radius-md内边距 24px–32px--space-6阴影默认无--elev-flat: none悬停时0 4px 16px rgba(13,13,13,0.06)--elev-raised——默认平、悬停轻抬的克制抬升5.3 输入框inputs 组背景#ffffff边框 1px solid#e5e5e5圆角 12px内边距 12px 14px--space-3 横向扩展聚焦边框#10a37f光晕0 0 0 3px rgba(16,163,127,0.12)--focus-ring5.4 胶囊与标签badges 组背景#f5f5f5--surface文字#3c3c3c内边距 4px 10px圆角 9999px--radius-pill字体 12px / 500--text-xs变体.chip-teal以--accent表达高亮徽章语义6. 间距与布局4px 基准栅格与留白节奏基础单位4px。尺度为 4、8、12、16、24、32、48、64、96、128。在tokens.css中被映射为--space-14px至--space-1248px并扩展--space-16: 64px作为品牌级扩展注释明确指出 DESIGN 文档 §5 的尺度自然映射到 schema 脊柱。容器最大宽度 1200px--container-max移动端 24px 间距、桌面端 48px 间距--container-gutter-*三个断点变量。区块节奏主要区块纵向间距桌面端 96px--section-y-desktop、平板 64px--section-y-tablet、移动端 48px--section-y-phone——这在components.html中体现为section { padding-block: var(--section-y-desktop); }配合媒体查询降级。栅格桌面端 12 列、移动端 4 列、间隙 24px。components.html中的.container类max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop)与.stack-3 / .stack-4 / .stack-6 * *相邻兄弟间距正是这套布局 token 的组件化实现。7. 动效短时长、平滑出、零炫技时长悬停 150–220ms--motion-fast: 150ms、--motion-base: 220ms布局过渡 280–360ms。缓动曲线入场动画使用cubic-bezier(0.16, 1, 0.3, 1)--ease-standard即平滑出曲线——快速启动、优雅减速。克制原则无视差效果、无滚动劫持仅使用细微的淡入与位移。动效 token 只声明两个时长与一条曲线本身就是动效最小化的设计声明。8. 使用约束与反模式不是加了绿就 OpenAI使用约束是这套规范最重要的部分它划定了像 OpenAI的充分条件需同时保留三要素中性编辑克制感、软圆角、稀少的强调色。仅靠绿色强调色无法营造出 OpenAI 风格的界面——--accent必须与--bg/--fg的中性锚点、--radius-*的软圆角共同出现。Signifier 展示用法受限仅限编辑风或公告层级产品控件必须保持在无衬线字体体系--font-body内。避免装饰性动效、厚重阴影与过大的装饰性卡片整套系统应呈现沉静、易读、从容的气质——--elev-flat默认无阴影、--elev-raised悬停仅 0.06 透明度即为此约束的 token 级表达。USAGE.md 进一步给出了 Agent 侧的 Do / Avoid 清单保留 schema token 名称以保证跨品牌切换可靠用--accent承担主行动、链接、焦点态与唯一焦点元素复用components.manifest.json中的组件组而非发明新控件避免在:roottoken 块之外使用裸十六进制色值避免脱离tokens.css单独重定义 Tailwind 或 design-token 值。9. 在 open-design 中落地接入 Agent 提示词与 Tailwind v4该包并不仅仅是静态文档它是 open-design设计系统即代码管线中的一等公民读序契约按 USAGE.md 的 Read Order先读该文件理解包契约再读DESIGN.md即本文对应的英文原版 DESIGN.md理解视觉意图与反模式然后将tokens.css粘贴进首个 artifact 的style块再按需查阅components.manifest.json与preview/页面做视觉校验。Tailwind v4 映射tailwind-v4.css 通过theme把全部 token 桥接为 Tailwind 命名空间如--color-bg、--font-display、--spacing-section-desktop、--shadow-focus-ring、--ease-standard、--container-max可直接在 Tailwind 项目中以bg-bg、text-fg、rounded-pill等工具类消费该文件头部明确标注Derived from tokens.css. Keep tokens.css as the source of truth提醒不要反向编辑。契约校验design-tokens.json 的每个 token 条目都带sources字段如tokens.css:34指回声明行source/token-contract.report.json是机器可读的完整契约报告——仓库的包质量守卫脚本据此验证派生文件与tokens.css的一致性。运行时消费根据 design-systems/README.md在 Design System 界面选择一个包或通过支持的项目创建工作流即可把该包的设计上下文组合进 Agent 提示词manifest.json元数据id: openai、category: AI LLM承担目录发现职责。需要说明的事实边界该包是 open-design 仓库内基于精选捆绑夹具curated bundled fixture构建的规范化设计系统source/evidence.md明确指出它不声称对上游品牌站点的全新抓取属于品牌美学启发而非品牌官方资产——这与 design-systems/README.md 中品牌引用包是对所引用品牌的美学启发而非其官方资产的声明一致。10. 结语一份可执行、可校验、可切换的克制规范OpenAI 设计系统包的价值在于它把沉静、克制、编辑风这种主观气质完整翻译为 56 个语义 token、10 级字号、8 组组件与 3 条缓动曲线的可执行规范。从 DESIGN-zh.md 的视觉意图到 tokens.css 的变量绑定再到 components.html 的组件实现与 design-tokens.json 的契约校验整条链路闭环且可被机器验证。无论你是要用它指导 Agent 生成 AI 产品界面还是手动落地一个纯白画布 深青黑墨色 唯一青绿的中性设计语言都可以直接以此为起点在保持 schema token 名称不变的前提下将整套 token 平滑切换到仓库中的其他设计系统包。【免费下载链接】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），仅供参考