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/openai/目录下内置了一套完整、可直接使用的 OpenAI 风格设计系统包含 DESIGN 文档、tokens.css设计令牌、components.html参考组件与 Tailwind v4 映射本文以其规范文档为核心系统讲解这套「冷静、近单色、深青黑墨色 编辑级衬线标题」设计语言的完整落地方法——从色彩角色、字体层级、组件样式到间距、动效与使用护栏并给出 OpenDesign 仓库中的令牌源码与契约证据帮助你或你的编码 Agent直接复制、运行并输出具有 OpenAI 气质的原型、落地页与产品界面。1. 设计主题与整体氛围OpenAI 的产品界面如同一座「穿上正装面向公众的研究实验室」——精确、克制、刻意安静。这套设计系统的核心气质可以概括为页面背景是纯白画布#ffffff其上叠加深近黑色的墨色#0d0d0d墨色中带有微妙的青色调让即使是文本也显得略微「冷却」而非刺眼地暗结果是色彩中性模型输出、代码和文字被推到最前台而不是它们周围的「镀铬装饰」分节切换靠留白而非分隔线即使出现边框也是#e5e5e5的「发丝线」读起来像「颜色的缺席」而非「颜色的在场」。核心特征清单纯白画布#ffffff 深青黑墨色#0d0d0dSöhne / Inter 使用克制的字重400、500、600——克制优于强调Signifier 衬线体用于编辑级展示标题全系统 8–12px 柔和圆角标签/胶囊使用 9999px 全圆角发丝线边框#e5e5e5谨慎使用留白是主要分隔手段单色插画深青色——标志中不使用渐变慷慨的行高1.55–1.65与接近零的字距这套系统在仓库中的落地文件为 design-systems/openai/DESIGN.md英文规范源关联文档 design-systems/openai/DESIGN-ar.md 是其阿拉伯语译本另有 DESIGN-zh.md、DESIGN-ja.md 等多语言版本供不同地区的开发者和 Agent 消费同一份设计契约。2. 色彩体系与角色分工这套系统把「色彩」当作稀缺资源使用整个中性系统里只有一种品牌强调色。所有色值在仓库中被完整落为 CSS 变量见 design-systems/openai/tokens.css。2.1 主色角色色值用途纯白 Pure White#ffffff主背景、卡片表面、按钮背景墨黑 Ink Black#0d0d0d主文本、品牌标志、主 CTA柔黑 Soft Black#1a1a1a次级标题、非关键文本的替代墨色在tokens.css中对应--bg: #ffffff、--fg: #0d0d0d、--fg-2: #1a1a1a其中--bg与--fg被标记为A1-identity 层品牌身份令牌是跨品牌切换时必须保持稳定的锚点。2.2 背景表面角色色值用途雾 Mist#fafafa分节分隔背景、页脚表面珍珠 Pearl#f5f5f5卡片表面、抬升面板云 Cloud#ececec禁用背景、分隔色调对应--surface-warm: #fafafa、--surface: #f5f5f5。其中--surface属于 A1-identity--surface-warm属于 B-slot插槽层。2.3 品牌强调色角色色值用途OpenAI 青 Teal#10a37f品牌主色、链接、高亮徽章——中性系统中唯一的色彩深青 Teal Deep#0a7a5e品牌色的悬停与按压态柔青 Teal Soft#e8f5f0成功徽章表面色、高亮引述对应--accent: #10a37f、--accent-hover: #0a7a5e。值得注意的实现细节tokens.css用color-mix(in oklab, var(--accent), black 14%)派生--accent-active按压态而不是再写死一个色值——这是现代 CSS 颜色演算的典型用法。2.4 中性文本色角色色值用途石墨 Graphite#3c3c3c正文、默认阅读色板岩 Slate#6e6e6e次要文本、说明文字、元数据灰 Ash#9b9b9b三级文本、占位符、禁用标签石 Stone#c4c4c4装饰分隔线、淡图标对应--fg之外的中性阶--muted: #6e6e6eA1-identity与--meta: #9b9b9bB-slot。这套四级中性阶保证了大段文字下的可读性层级。2.5 语义色与边框色角色色值用途发丝线 Border Hairline#e5e5e5标准发丝线分隔符柔边 Border Soft#ededed白色表面上的卡片描边错误 Error#ef4146校验、破坏性操作警告 Warning#f5a623柔和的琥珀色通知态信息 Info#2563eb信息型链接色谨慎使用青色仍然主导对应--border、--border-soft、--danger、--warn。注意--success在tokens.css中直接复用了#10a37f——成功路径与品牌强调色合一进一步压缩了色彩种类。3. 字体排印规则3.1 字体族用途主字体回退栈展示 / 编辑SignifierSource Serif Pro, Georgia, serif正文 / 界面SöhneInter, system-ui, -apple-system, Segoe UI, sans-serif代码 / 等宽Söhne Monoui-monospace, JetBrains Mono, Menlo, Consolas, monospace在tokens.css中对应--font-display、--font-body、--font-mono三个字体令牌前两者属于 A1-identity 层。tailwind-v4.css还将--font-sans一并绑定到--font-body保证 Tailwind 的font-sans工具类天然继承界面字体。3.2 完整字号层级表角色字体字号字重行高字距说明展示 DisplaySignifier56px (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卡片正文、紧凑界面说明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三个行高/字距令牌。3.3 三条排印原则克制即身份字重封顶于 600700 就脱离了品牌气质。层级来自字号与颜色而非字重。衬线给灵魂无衬线给系统Signifier 只出现在编辑级展示时刻产品界面完全无衬线。大标题负字距-0.02em 只用于大尺寸展示到 16px 时字距回归为零。在components.html中可以看到这条原则的严格执行h1使用var(--font-display)Signifier400 字重、1.08 行高、-0.02em 字距而h2/h3立即切回var(--font-body)Söhne600 字重——衬线只服务于「公告级」时刻。4. 组件样式规范4.1 按钮主要按钮Primary背景#0d0d0d文本#ffffff内边距10px 18px圆角胶囊chips用 9999px 全圆角矩形 CTA 用 12px悬停背景#1a1a1a用途主 CTA、「Try ChatGPT」「Sign in」次要按钮Secondary背景#ffffff文本#0d0d0d边框1px solid #e5e5e5内边距10px 18px圆角12px悬停背景#fafafa、边框#d4d4d4品牌强调按钮Brand Accent背景#10a37f文本#ffffff内边距10px 18px圆角12px悬停#0a7a5e用途高亮的升级 CTA、成功路径在components.manifest.json的 buttons 组件组中可以看到按钮族引用的令牌为--accent、--accent-on、--bg、--border、--fg、--font-body、--radius-sm、--space-2、--text-base、--motion-fast、--ease-standard——所有可见值均来自tokens.css没有任何游离的裸色值components.html中唯一例外是按钮文本的#ffffff它对应--accent-on的语义。4.2 卡片背景#ffffff边框1px solid #ededed圆角16px内边距24px–32px阴影默认无悬停时0 4px 16px rgba(13,13,13,0.06)对应令牌--radius-md: 16px、--border-soft: #ededed、--space-6: 24px与--elev-raised: 0 4px 16px rgba(13, 13, 13, 0.06)。注意卡片默认是「平」的--elev-flat: none悬停只给出极轻微的「耳语式抬升」。4.3 输入框背景#ffffff边框1px solid #e5e5e5圆角12px内边距12px 14px聚焦边框#10a37f焦点环0 0 0 3px rgba(16,163,127,0.12)对应--radius-sm与--focus-ring。焦点环用的是青色的 12% 透明度外环——在纯白界面上足够醒目又不喧闹是「克制的强调」在交互层的体现。4.4 胶囊与标签背景#f5f5f5文本#3c3c3c内边距4px 10px圆角9999px字体12px / 500对应--surface、--muted、--radius-pill、--text-xs。components.manifest.json的 badges 组件组确认了这套令牌绑定关系。5. 间距与布局基础单位4px。缩放阶梯4、8、12、16、24、32、48、64、96、128。容器最大宽度 1200px移动端外边距 24px桌面端 48px。分节节奏主要分节之间垂直 96–128px移动端 64px。网格桌面端 12 列移动端 4 列列间距 24px。在tokens.css中4px 基准被落成--space-14px到--space-1248px的间距令牌并以品牌扩展的形式补上--space-16: 64px用于主要页面分节之间的 64px 间隔。分节节奏则拆成三个响应式令牌--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 48px与components.html中的媒体查询一一对应1023px 与 639px 两个断点。容器也拆为--container-max: 1200px与桌面/平板/手机三档 gutter 令牌。6. 动效规范时长悬停 150–220ms布局过渡 280–360ms。缓动cubic-bezier(0.16, 1, 0.3, 1)平滑出用于入场。克制无视差、无滚动劫持。只有轻淡出与轻微位移。tokens.css将其落为--motion-fast: 150ms、--motion-base: 220ms与--ease-standard: cubic-bezier(0.16, 1, 0.3, 1)标记为cubicBezier类型。在components.html中按钮的transition就是background-color与border-color以var(--motion-fast) var(--ease-standard)驱动的——150ms 平滑出缓动克制地表达状态变化。7. 使用护栏Guardrails三要素缺一不可中性编辑级克制 柔和圆角 极少强调色必须同时保留「只加绿色强调色」造不出 OpenAI 气质的界面。衬线只用于展示时刻Signifier 风格的展示只在编辑或公告层级出现产品控件必须留在无衬线系统中。拒绝装饰性过剩避免装饰性动效、厚重阴影和超大装饰卡片系统应当冷静、可读、刻意。这三条护栏在 design-systems/openai/USAGE.md 中被进一步操作化Do中要求「精确保留 schema 令牌名以保证跨品牌切换可靠」「用--accent承载主操作、链接、焦点态与唯一焦点元素」「优先复用components.manifest.json中的组件组」Avoid中明确「禁止在:root令牌块之外使用裸十六进制色值」「禁止脱离tokens.css单独重定义 Tailwind 或 design-token 值」。8. 仓库内的落地实现与消费方式8.1 包结构与读取顺序design-systems/openai/是一个标准 OpenDesign 设计系统包其 manifest.json 声明了包结构DESIGN.md设计规范、tokens.css设计令牌、design-tokens.json令牌契约、tailwind-v4.cssTailwind 映射、components.html参考组件preview/目录提供 colors.html、typography.html、spacing.html 三个可视化预览页适合做视觉抽查source/目录存放evidence.md、tokens.source.json与token-contract.report.json作为打包回填的审计证据。USAGE.md给出的推荐读取顺序是先读它本身理解包契约 → 读DESIGN.md理解视觉意图与反模式 → 把tokens.css粘贴进第一个 artifact 的style块 → 用components.manifest.json做组件清单、需要精确选择器或状态时再打开components.html→ 需要时抽查preview/页面。8.2 令牌契约与质量评分design-tokens.json 是一份机器可读的令牌契约od-design-tokens/v1格式记录了 56 个令牌的分层与来源分层结构A1-identity8 个、A1-structure18 个、A226 个、B-slot4 个每个令牌都标注confidence: high与sources如tokens.css:34实现了「令牌 → 源码行」的可追溯审计契约报告评分为 100 / gradeexcellentrecommendRebuild: false且aliasTokens 为 0——所有令牌都是直接声明值无间接别名。8.3 组件清单的自动化校验components.manifest.json 记录了参考组件的自动化审计结果41 个选择器、18 个类、24 个元素覆盖 buttons、inputs、cards、badges、links、icons、typography、layout 八个组件组每个组都列出了其 tokenReferences如 inputs 组引用--accent、--focus-ring、--radius-sm等并且undeclaredReferenced为空——即所有被引用的令牌都有声明不存在「幽灵令牌」。8.4 Tailwind v4 映射tailwind-v4.css 通过import ./tokens.css与theme块把整套设计令牌桥接为 Tailwind v4 工具类bg-fg、text-muted、border-border-soft、text-4xl、rounded-pill、shadow-raised、duration-fast等且文件头明确标注「Derived from tokens.css. Keep tokens.css as the source of truth」——令牌唯一真源是tokens.css。8.5 与 OpenDesign 设计系统体系的衔接manifest.json中的craft字段建议在使用本包时应用 craft/color.md 与 craft/accessibility-baseline.md 两条工艺基线色彩与无障碍基线。本包的模式与仓库_schema下的 manifest.schema.ts、tokens.schema.ts 保持一致意味着它能够被 OpenDesign 的批量校验脚本如 scripts/check-design-system-manifests.ts与设计系统追踪规范见 docs/design-system-tracking-spec.md统一约束与追踪。9. 实操要点速查要在自己的 artifact 中快速落地这套系统可按以下步骤执行将design-systems/openai/tokens.css的完整:root块复制进首个style块作为唯一令牌真源之后所有组件 CSS 一律引用var(--*)令牌禁止裸写十六进制色值标题策略页面主视觉公告/编辑场景用--font-displaySignifier、400、56px、-0.02em、1.08 行高其余一切标题与正文用--font-bodySöhne/Inter600 封顶强调策略主操作、链接、焦点态统一使用--accent: #10a37f悬停切--accent-hover: #0a7a5e界面上只保留一个清晰的青色焦点元素结构策略分节分隔优先用--section-y-desktop/tablet/phone的垂直留白而不是分隔线确需边框时用--border发丝线或--border-soft卡片描边动效策略交互态用--motion-fast150ms--ease-standard布局过渡用--motion-base220ms不做视差与滚动劫持。这套「OpenAI 风格」的本质不是那抹绿色而是中性编辑级克制、柔和圆角、留白主导、衬线只用于仪式感标题的整体组合——把握住这些护栏才能在 OpenDesign 中稳定产出「冷静、可读、刻意」的 AI 产品界面。赞分享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 中的 Discord 风格设计系统Blurple 深色界面规范与语义 Token 落地实践OpenDesign 中的 Discord 风格设计系统Blurple 深色界面规范与语义 Token 落地实践 本文以仓库内 design systems/AI 应用人工智能AI 技能设计系统媒体生成OpenDesign 中的 Cohere 风格设计系统企业级 AI 平台的设计令牌、排版体系与 Agent 提示词实战指南OpenDesign 中的 Cohere 风格设计系统企业级 AI 平台的设计令牌、排版体系与 Agent 提示词实战指南 本指南以 design systeAI 应用人工智能AI 技能设计系统媒体生成Zephyr west 一条流水线从克隆到上板的最短路径Zephyr west 一条流水线从克隆到上板的最短路径 从一条 Git 链接到板子上的心跳 任务30 分钟内让 Hello World 跑上 nRF528AI 应用人工智能AI 技能设计系统媒体生成上一篇mercur主题切换暗色模式主题实现下一篇Windows Defender恢复指南如何重新启用Windows安全防护的完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
OpenDesign 中的 OpenAI 风格设计系统：构建冷静、近单色、编辑级排版的 AI 产品界面
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/openai/目录下内置了一套完整、可直接使用的 OpenAI 风格设计系统包含 DESIGN 文档、tokens.css设计令牌、components.html参考组件与 Tailwind v4 映射本文以其规范文档为核心系统讲解这套「冷静、近单色、深青黑墨色 编辑级衬线标题」设计语言的完整落地方法——从色彩角色、字体层级、组件样式到间距、动效与使用护栏并给出 OpenDesign 仓库中的令牌源码与契约证据帮助你或你的编码 Agent直接复制、运行并输出具有 OpenAI 气质的原型、落地页与产品界面。1. 设计主题与整体氛围OpenAI 的产品界面如同一座「穿上正装面向公众的研究实验室」——精确、克制、刻意安静。这套设计系统的核心气质可以概括为页面背景是纯白画布#ffffff其上叠加深近黑色的墨色#0d0d0d墨色中带有微妙的青色调让即使是文本也显得略微「冷却」而非刺眼地暗结果是色彩中性模型输出、代码和文字被推到最前台而不是它们周围的「镀铬装饰」分节切换靠留白而非分隔线即使出现边框也是#e5e5e5的「发丝线」读起来像「颜色的缺席」而非「颜色的在场」。核心特征清单纯白画布#ffffff 深青黑墨色#0d0d0dSöhne / Inter 使用克制的字重400、500、600——克制优于强调Signifier 衬线体用于编辑级展示标题全系统 8–12px 柔和圆角标签/胶囊使用 9999px 全圆角发丝线边框#e5e5e5谨慎使用留白是主要分隔手段单色插画深青色——标志中不使用渐变慷慨的行高1.55–1.65与接近零的字距这套系统在仓库中的落地文件为 design-systems/openai/DESIGN.md英文规范源关联文档 design-systems/openai/DESIGN-ar.md 是其阿拉伯语译本另有 DESIGN-zh.md、DESIGN-ja.md 等多语言版本供不同地区的开发者和 Agent 消费同一份设计契约。2. 色彩体系与角色分工这套系统把「色彩」当作稀缺资源使用整个中性系统里只有一种品牌强调色。所有色值在仓库中被完整落为 CSS 变量见 design-systems/openai/tokens.css。2.1 主色角色色值用途纯白 Pure White#ffffff主背景、卡片表面、按钮背景墨黑 Ink Black#0d0d0d主文本、品牌标志、主 CTA柔黑 Soft Black#1a1a1a次级标题、非关键文本的替代墨色在tokens.css中对应--bg: #ffffff、--fg: #0d0d0d、--fg-2: #1a1a1a其中--bg与--fg被标记为A1-identity 层品牌身份令牌是跨品牌切换时必须保持稳定的锚点。2.2 背景表面角色色值用途雾 Mist#fafafa分节分隔背景、页脚表面珍珠 Pearl#f5f5f5卡片表面、抬升面板云 Cloud#ececec禁用背景、分隔色调对应--surface-warm: #fafafa、--surface: #f5f5f5。其中--surface属于 A1-identity--surface-warm属于 B-slot插槽层。2.3 品牌强调色角色色值用途OpenAI 青 Teal#10a37f品牌主色、链接、高亮徽章——中性系统中唯一的色彩深青 Teal Deep#0a7a5e品牌色的悬停与按压态柔青 Teal Soft#e8f5f0成功徽章表面色、高亮引述对应--accent: #10a37f、--accent-hover: #0a7a5e。值得注意的实现细节tokens.css用color-mix(in oklab, var(--accent), black 14%)派生--accent-active按压态而不是再写死一个色值——这是现代 CSS 颜色演算的典型用法。2.4 中性文本色角色色值用途石墨 Graphite#3c3c3c正文、默认阅读色板岩 Slate#6e6e6e次要文本、说明文字、元数据灰 Ash#9b9b9b三级文本、占位符、禁用标签石 Stone#c4c4c4装饰分隔线、淡图标对应--fg之外的中性阶--muted: #6e6e6eA1-identity与--meta: #9b9b9bB-slot。这套四级中性阶保证了大段文字下的可读性层级。2.5 语义色与边框色角色色值用途发丝线 Border Hairline#e5e5e5标准发丝线分隔符柔边 Border Soft#ededed白色表面上的卡片描边错误 Error#ef4146校验、破坏性操作警告 Warning#f5a623柔和的琥珀色通知态信息 Info#2563eb信息型链接色谨慎使用青色仍然主导对应--border、--border-soft、--danger、--warn。注意--success在tokens.css中直接复用了#10a37f——成功路径与品牌强调色合一进一步压缩了色彩种类。3. 字体排印规则3.1 字体族用途主字体回退栈展示 / 编辑SignifierSource Serif Pro, Georgia, serif正文 / 界面SöhneInter, system-ui, -apple-system, Segoe UI, sans-serif代码 / 等宽Söhne Monoui-monospace, JetBrains Mono, Menlo, Consolas, monospace在tokens.css中对应--font-display、--font-body、--font-mono三个字体令牌前两者属于 A1-identity 层。tailwind-v4.css还将--font-sans一并绑定到--font-body保证 Tailwind 的font-sans工具类天然继承界面字体。3.2 完整字号层级表角色字体字号字重行高字距说明展示 DisplaySignifier56px (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卡片正文、紧凑界面说明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三个行高/字距令牌。3.3 三条排印原则克制即身份字重封顶于 600700 就脱离了品牌气质。层级来自字号与颜色而非字重。衬线给灵魂无衬线给系统Signifier 只出现在编辑级展示时刻产品界面完全无衬线。大标题负字距-0.02em 只用于大尺寸展示到 16px 时字距回归为零。在components.html中可以看到这条原则的严格执行h1使用var(--font-display)Signifier400 字重、1.08 行高、-0.02em 字距而h2/h3立即切回var(--font-body)Söhne600 字重——衬线只服务于「公告级」时刻。4. 组件样式规范4.1 按钮主要按钮Primary背景#0d0d0d文本#ffffff内边距10px 18px圆角胶囊chips用 9999px 全圆角矩形 CTA 用 12px悬停背景#1a1a1a用途主 CTA、「Try ChatGPT」「Sign in」次要按钮Secondary背景#ffffff文本#0d0d0d边框1px solid #e5e5e5内边距10px 18px圆角12px悬停背景#fafafa、边框#d4d4d4品牌强调按钮Brand Accent背景#10a37f文本#ffffff内边距10px 18px圆角12px悬停#0a7a5e用途高亮的升级 CTA、成功路径在components.manifest.json的 buttons 组件组中可以看到按钮族引用的令牌为--accent、--accent-on、--bg、--border、--fg、--font-body、--radius-sm、--space-2、--text-base、--motion-fast、--ease-standard——所有可见值均来自tokens.css没有任何游离的裸色值components.html中唯一例外是按钮文本的#ffffff它对应--accent-on的语义。4.2 卡片背景#ffffff边框1px solid #ededed圆角16px内边距24px–32px阴影默认无悬停时0 4px 16px rgba(13,13,13,0.06)对应令牌--radius-md: 16px、--border-soft: #ededed、--space-6: 24px与--elev-raised: 0 4px 16px rgba(13, 13, 13, 0.06)。注意卡片默认是「平」的--elev-flat: none悬停只给出极轻微的「耳语式抬升」。4.3 输入框背景#ffffff边框1px solid #e5e5e5圆角12px内边距12px 14px聚焦边框#10a37f焦点环0 0 0 3px rgba(16,163,127,0.12)对应--radius-sm与--focus-ring。焦点环用的是青色的 12% 透明度外环——在纯白界面上足够醒目又不喧闹是「克制的强调」在交互层的体现。4.4 胶囊与标签背景#f5f5f5文本#3c3c3c内边距4px 10px圆角9999px字体12px / 500对应--surface、--muted、--radius-pill、--text-xs。components.manifest.json的 badges 组件组确认了这套令牌绑定关系。5. 间距与布局基础单位4px。缩放阶梯4、8、12、16、24、32、48、64、96、128。容器最大宽度 1200px移动端外边距 24px桌面端 48px。分节节奏主要分节之间垂直 96–128px移动端 64px。网格桌面端 12 列移动端 4 列列间距 24px。在tokens.css中4px 基准被落成--space-14px到--space-1248px的间距令牌并以品牌扩展的形式补上--space-16: 64px用于主要页面分节之间的 64px 间隔。分节节奏则拆成三个响应式令牌--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 48px与components.html中的媒体查询一一对应1023px 与 639px 两个断点。容器也拆为--container-max: 1200px与桌面/平板/手机三档 gutter 令牌。6. 动效规范时长悬停 150–220ms布局过渡 280–360ms。缓动cubic-bezier(0.16, 1, 0.3, 1)平滑出用于入场。克制无视差、无滚动劫持。只有轻淡出与轻微位移。tokens.css将其落为--motion-fast: 150ms、--motion-base: 220ms与--ease-standard: cubic-bezier(0.16, 1, 0.3, 1)标记为cubicBezier类型。在components.html中按钮的transition就是background-color与border-color以var(--motion-fast) var(--ease-standard)驱动的——150ms 平滑出缓动克制地表达状态变化。7. 使用护栏Guardrails三要素缺一不可中性编辑级克制 柔和圆角 极少强调色必须同时保留「只加绿色强调色」造不出 OpenAI 气质的界面。衬线只用于展示时刻Signifier 风格的展示只在编辑或公告层级出现产品控件必须留在无衬线系统中。拒绝装饰性过剩避免装饰性动效、厚重阴影和超大装饰卡片系统应当冷静、可读、刻意。这三条护栏在 design-systems/openai/USAGE.md 中被进一步操作化Do中要求「精确保留 schema 令牌名以保证跨品牌切换可靠」「用--accent承载主操作、链接、焦点态与唯一焦点元素」「优先复用components.manifest.json中的组件组」Avoid中明确「禁止在:root令牌块之外使用裸十六进制色值」「禁止脱离tokens.css单独重定义 Tailwind 或 design-token 值」。8. 仓库内的落地实现与消费方式8.1 包结构与读取顺序design-systems/openai/是一个标准 OpenDesign 设计系统包其 manifest.json 声明了包结构DESIGN.md设计规范、tokens.css设计令牌、design-tokens.json令牌契约、tailwind-v4.cssTailwind 映射、components.html参考组件preview/目录提供 colors.html、typography.html、spacing.html 三个可视化预览页适合做视觉抽查source/目录存放evidence.md、tokens.source.json与token-contract.report.json作为打包回填的审计证据。USAGE.md给出的推荐读取顺序是先读它本身理解包契约 → 读DESIGN.md理解视觉意图与反模式 → 把tokens.css粘贴进第一个 artifact 的style块 → 用components.manifest.json做组件清单、需要精确选择器或状态时再打开components.html→ 需要时抽查preview/页面。8.2 令牌契约与质量评分design-tokens.json 是一份机器可读的令牌契约od-design-tokens/v1格式记录了 56 个令牌的分层与来源分层结构A1-identity8 个、A1-structure18 个、A226 个、B-slot4 个每个令牌都标注confidence: high与sources如tokens.css:34实现了「令牌 → 源码行」的可追溯审计契约报告评分为 100 / gradeexcellentrecommendRebuild: false且aliasTokens 为 0——所有令牌都是直接声明值无间接别名。8.3 组件清单的自动化校验components.manifest.json 记录了参考组件的自动化审计结果41 个选择器、18 个类、24 个元素覆盖 buttons、inputs、cards、badges、links、icons、typography、layout 八个组件组每个组都列出了其 tokenReferences如 inputs 组引用--accent、--focus-ring、--radius-sm等并且undeclaredReferenced为空——即所有被引用的令牌都有声明不存在「幽灵令牌」。8.4 Tailwind v4 映射tailwind-v4.css 通过import ./tokens.css与theme块把整套设计令牌桥接为 Tailwind v4 工具类bg-fg、text-muted、border-border-soft、text-4xl、rounded-pill、shadow-raised、duration-fast等且文件头明确标注「Derived from tokens.css. Keep tokens.css as the source of truth」——令牌唯一真源是tokens.css。8.5 与 OpenDesign 设计系统体系的衔接manifest.json中的craft字段建议在使用本包时应用 craft/color.md 与 craft/accessibility-baseline.md 两条工艺基线色彩与无障碍基线。本包的模式与仓库_schema下的 manifest.schema.ts、tokens.schema.ts 保持一致意味着它能够被 OpenDesign 的批量校验脚本如 scripts/check-design-system-manifests.ts与设计系统追踪规范见 docs/design-system-tracking-spec.md统一约束与追踪。9. 实操要点速查要在自己的 artifact 中快速落地这套系统可按以下步骤执行将design-systems/openai/tokens.css的完整:root块复制进首个style块作为唯一令牌真源之后所有组件 CSS 一律引用var(--*)令牌禁止裸写十六进制色值标题策略页面主视觉公告/编辑场景用--font-displaySignifier、400、56px、-0.02em、1.08 行高其余一切标题与正文用--font-bodySöhne/Inter600 封顶强调策略主操作、链接、焦点态统一使用--accent: #10a37f悬停切--accent-hover: #0a7a5e界面上只保留一个清晰的青色焦点元素结构策略分节分隔优先用--section-y-desktop/tablet/phone的垂直留白而不是分隔线确需边框时用--border发丝线或--border-soft卡片描边动效策略交互态用--motion-fast150ms--ease-standard布局过渡用--motion-base220ms不做视差与滚动劫持。这套「OpenAI 风格」的本质不是那抹绿色而是中性编辑级克制、柔和圆角、留白主导、衬线只用于仪式感标题的整体组合——把握住这些护栏才能在 OpenDesign 中稳定产出「冷静、可读、刻意」的 AI 产品界面。赞分享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 中的 Discord 风格设计系统Blurple 深色界面规范与语义 Token 落地实践OpenDesign 中的 Discord 风格设计系统Blurple 深色界面规范与语义 Token 落地实践 本文以仓库内 design systems/AI 应用人工智能AI 技能设计系统媒体生成OpenDesign 中的 Cohere 风格设计系统企业级 AI 平台的设计令牌、排版体系与 Agent 提示词实战指南OpenDesign 中的 Cohere 风格设计系统企业级 AI 平台的设计令牌、排版体系与 Agent 提示词实战指南 本指南以 design systeAI 应用人工智能AI 技能设计系统媒体生成Zephyr west 一条流水线从克隆到上板的最短路径Zephyr west 一条流水线从克隆到上板的最短路径 从一条 Git 链接到板子上的心跳 任务30 分钟内让 Hello World 跑上 nRF528AI 应用人工智能AI 技能设计系统媒体生成上一篇mercur主题切换暗色模式主题实现下一篇Windows Defender恢复指南如何重新启用Windows安全防护的完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
