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点击查看免费下载本指南完整解析 Open Design 仓库内 OpenAI 风格设计系统包design-systems/openai 系列文件的核心规范纯白画布 × 深ティール黑墨水的近单色体系、Söhne/Inter 克制字重与 Signifier 衬线展示字体、8–12px 柔和圆角与 9999px 药丸标签、#10a37f单一品牌强调色。读者读完可掌握该品牌从视觉主题、颜色令牌、排版层级到按钮/卡片/输入框/标签组件的完整实现细节并理解 Open Design 如何通过tokens.css、components.html与manifest.json将这些规范沉淀为可供 Agent 直接粘贴使用的设计系统包。一、这个设计系统包是什么OpenAI 风格设计系统包位于仓库 design-systems/openai 目录是 Open Design 仓库中按品牌组织的「Design System 2.0」包之一类别为AI 与 LLMCategory: AI LLM。它由 DESIGN.md及对应的日文版 DESIGN-ja.md、中文版 DESIGN-zh.md 等多语言版本、tokens.css、components.html、manifest.json 等固定命名的文件构成。包结构遵循 design-systems/_schema/AGENTS.md 定义的「项目清单契约」project manifest contractmanifest.json— 机器可读的项目入口schemaVersionod-design-system-project/v1id 为openaiDESIGN.md/DESIGN-ja.md等 — 规范的设计散文canonical design prosetokens.css— 规范的编译后令牌canonical compiled tokens是:root变量块的唯一事实来源design-tokens.json— 由tokens.css派生的 Design Tokens JSONtailwind-v4.css— 由tokens.css派生的 Tailwind v4theme映射不得独立重新定义源值components.html— 独立的组件参考 fixturepreview/— 静态预览页preview/colors.html、preview/typography.html、preview/spacing.htmlsource/— 导入证据source/evidence.md、source/tokens.source.json、source/token-contract.report.json。manifest.json中的craft.suggested建议该品牌搭配color与accessibility-baseline两条 craft 文档见 craft/color.md、craft/accessibility-baseline.mdimportMode为normalized。按 USAGE.md 的阅读顺序Agent 或设计师拿到包后应先读 USAGE.md 理解契约 → 读 DESIGN.md 理解视觉意图与反模式 → 将tokens.css粘贴到第一个 artifact 的style块 → 用components.manifest.json查组件清单需要精确选择器/状态时打开components.html。二、视觉主题与氛围临床、克制、刻意安静规范对 OpenAI 产品表面的描述是面向公众精心布置的研究实验室——临床、克制、刻意安静。页面背景是纯白#ffffff叠加一层带轻微蒂尔teal底调的近黑墨水#0d0d0d连文字都带有微妙的冷感而非咄咄逼人的黑。这种色彩中性化把前景让给了模型输出、代码和文章本身而非周围的界面镀铬chrome。标志性特征Key Characteristics纯白画布#ffffff× 深蒂尔黑墨水#0d0d0dSöhne / Inter 克制字重400、500、600——克制优先于张扬Signifier 衬线字体用于编辑型展示标题处处 8–12px 柔和圆角chip 使用 9999px 药丸形细线边框#e5e5e5克制使用留白是主要的区块分隔手段深蒂尔单色插画——标志内无渐变充裕的行高1.55–1.65与接近零的字距。形状系统整体偏软8px12px 圆角、标签和 chip 用 9999px 药丸形任何地方都不存在尖锐转角。区块之间的过渡靠留白而非分隔线完成边框出现时是#e5e5e5的细线读起来像是「颜色的缺席」而非「颜色的在场」。三、颜色面板与角色Color Palette RolesDESIGN.md 与 tokens.css 将颜色分为五组tokens.css 中均有对应 CSS 变量绑定3.1 主色Primary名称色值角色tokens.css 变量纯白 Pure White#ffffff主背景、卡片面、按钮背景--bg墨黑 Ink Black#0d0d0d主文本、品牌标志、主 CTA--fg软黑 Soft Black#1a1a1a次级标题、非关键文本的替代墨水--fg-23.2 表面与背景Surface Background名称色值角色tokens.css 变量雾 Mist#fafafa区块分隔背景、页脚表面--surface-warm珍珠 Pearl#f5f5f5卡片表面、抬升面板--surface云 Cloud#ececec禁用背景、分隔 tintDESIGN.md 命名3.3 品牌强调Brand Accent名称色值角色tokens.css 变量OpenAI 蒂尔#10a37f品牌主色、链接、高亮徽章——这个近乎中性的系统中唯一的颜色--accent深蒂尔 Teal Deep#0a7a5e品牌色的 hover / pressed 状态--accent-hover软蒂尔 Teal Soft#e8f5f0成功徽章、高亮 callout 的表面 tintcomponent 内联见.chip-teal3.4 中性色与文本Neutrals Text名称色值角色tokens.css 变量石墨 Graphite#3c3c3c正文文本、默认阅读色组件内联板岩 Slate#6e6e6e次级文本、说明、元数据--muted灰 Ash#9b9b9b第三级文本、占位符、禁用标签--meta石 Stone#c4c4c4装饰性分隔线、淡图标DESIGN.md 命名3.5 语义色与边框Semantic Border名称色值角色tokens.css 变量边框细线 Border Hairline#e5e5e5标准细线分隔--border软边框 Border Soft#ededed白表面上的卡片轮廓--border-soft错误 Error#ef4146校验、破坏性操作--danger警告 Warning#f5a623柔和琥珀色注意状态--warn信息 Info#2563eb信息类链接色调克制使用蒂尔仍优先—tokens.css 还额外补充了--accent-active: color-mix(in oklab, var(--accent), black 14%)与--success: #10a37f成功路径复用品牌蒂尔见 tokens.css。四、排版规则Typography Rules4.1 字体家族Font Family用途主字体回退栈Display / 编辑型SignifierSource Serif Pro, Georgia, serif正文 / UISöhneInter, system-ui, -apple-system, Segoe UI, sans-serif代码 / 等宽Söhne Monoui-monospace, JetBrains Mono, Menlo, Consolas, monospacetokens.css 中对应--font-display、--font-body、--font-mono三个变量tokens.css。4.2 层级表完整继承角色字体字号字重行高字距备注DisplaySignifier56px (3.5rem)4001.08-0.02em编辑型 hero、公告标题H1Söhne40px (2.5rem)6001.15-0.01em页面标题H2Söhne28px (1.75rem)6001.2-0.005em区块标题H3Söhne20px (1.25rem)6001.3normal子区块Body LargeSöhne18px (1.125rem)4001.6normal引导段ledeBodySöhne16px (1rem)4001.65normal标准正文Body SmallSöhne14px (0.875rem)4001.55normal卡片正文、密集 UICaptionSöhne13px (0.8125rem)5001.40.01em元数据、徽章LabelSöhne12px (0.75rem)5001.30.04em眉题、大写导航链接CodeSöhne Mono14px (0.875rem)4001.55normal代码块、终端输出tokens.css 将其映射为类型尺度变量--text-xs(12px)、--text-sm(13px)、--text-base(16px)、--text-lg(18px)、--text-xl(20px)、--text-2xl(28px)、--text-3xl(40px)、--text-4xl(56px)tokens.css并配套--leading-body: 1.65、--leading-tight: 1.08、--tracking-display: -0.02em。在 components.html 中可以看到这些规则的落地h1绑定var(--font-display)Signifier 衬线编辑腔调、400 字重、var(--tracking-display)负字距与var(--leading-tight)行高h2/h3则回到 Söhne 无衬线 UI 声线分别使用 1.20 / 1.30 行高与 -0.005em / normal 字距。4.3 原则Principles克制即身份Restraint as identity字重上限为 600700 以上会偏离品牌调性。层级靠尺寸与颜色而非字重建立。衬线给灵魂无衬线给系统Serif for soul, sans for systemSignifier 只出现在编辑型 Display 场景产品 UI 纯无衬线。Display 用负字距Display 尺寸 -0.02em到 16px 时归零。五、组件样式Component Stylings5.1 按钮Buttons主按钮Primary——对应 components.html 的.btn-primaryBackground:#0d0d0d绑定var(--fg)Text:#ffffffPadding: 10px 18pxRadius: chip 上为 9999px 全药丸矩形 CTA 上为 12pxvar(--radius-sm)Hover: background#1a1a1a绑定var(--fg-2)用途主 CTA、「Try ChatGPT」、登录次按钮Secondary——.btn-secondarycomponents.htmlBackground:#ffffffvar(--bg)Text:#0d0d0dBorder: 1px solid#e5e5e5var(--border)Padding: 10px 18pxRadius: 12pxHover: background#fafafavar(--surface-warm)、border#d4d4d4品牌强调按钮Brand Accent——.btn-tealBackground:#10a37fvar(--accent)Text:#ffffffvar(--accent-on)Padding: 10px 18pxRadius: 12pxHover:#0a7a5evar(--accent-hover)用途升级高亮 CTA、成功路径按钮统一使用var(--motion-fast)150msvar(--ease-standard)的过渡:focus-visible时显示var(--focus-ring)0 0 0 3px rgba(16,163,127,0.12)。5.2 卡片Cards——.cardBackground:#ffffffBorder: 1px solid#edededvar(--border-soft)Radius: 16pxvar(--radius-md)Padding: 24px–32pxvar(--space-6)起步Shadow: 默认无--elev-flat: nonehover 时0 4px 16px rgba(13,13,13,0.06)--elev-raised过渡时长var(--motion-base)220ms5.3 输入框Inputs——.fieldBackground:#ffffffBorder: 1px solid#e5e5e5var(--border)Radius: 12pxPadding: 12px 14pxFocus: border#10a37fvar(--accent)、ring0 0 0 3px rgba(16,163,127,0.12)var(--focus-ring)Label 使用 13px / 500 字重::placeholder使用--meta灰5.4 药丸与标签Pills Tags——.chip/.chip-tealBackground:#f5f5f5var(--surface)Text:#3c3c3cchip/ 品牌蒂尔.chip-teal用#e8f5f0表面Padding: 4px 10pxRadius: 9999pxvar(--radius-pill)Font: 12px / 500var(--text-xs)5.5 布局原语components.html 中还能看到.containermax-width: var(--container-max)margin-inline: auto、.stack-3/4/6相邻兄弟margin-block-start分别为 12/16/24px、.lead18px 引导段、var(--muted)颜色、.label12px 大写眉题、0.04em 字距、.body-muted/.body-sm等文本工具类。section section使用 1pxvar(--border)顶部细线区分区块。六、间距与布局Spacing Layout基础单位4px。刻度4、8、12、16、24、32、48、64、96、128。容器max-width 1200px移动端 24px gutter桌面端 48px。区块节奏主要区块间纵向 96–128px移动端 64px。网格桌面 12 列、移动 4 列间距 24px。tokens.css 将 4px 网格编码为--space-1(4px) 至--space-12(48px)并补充品牌扩展--space-16(64px)用于主要区块间的大间隔区块节奏变量为--section-y-desktop: 96px、--section-y-tablet: 64px、--section-y-phone: 48px容器变量为--container-max: 1200px、--container-gutter-desktop: 48px、--container-gutter-tablet: 24px、--container-gutter-phone: 24pxtokens.css。七、动效Motion时长hover 150–220ms--motion-fast: 150ms、--motion-base: 220ms布局过渡 280–360ms。缓动入场cubic-bezier(0.16, 1, 0.3, 1)smooth out--ease-standard。克制无视差、无滚动劫持仅克制的淡入淡出与位移。八、使用护栏Usage Guardrails整套组合生效中性编辑型克制、柔和圆角、克制强调色必须成套使用——仅用绿色强调并不能产生 OpenAI 式的表面。衬线只用于编辑/公告层级Signifier 风格 Display 只用于编辑或公告层级产品控件保持无衬线系统。拒绝装饰避免装饰性动效、厚重阴影和过大的装饰性卡片系统应让人感到平静、可读、刻意。九、包内验证机制令牌契约与派生文件Open Design 仓库为每个品牌包提供了可机器校验的机制这点在 design-systems/_schema/AGENTS.md 中有详细说明Token 分层共享令牌分为 A1-identity如--bg、--fg、--accent、--font-display品牌必须声明、A1-structure类型尺度、--container-max、--section-y-*、A2如--motion-fast、--success、--space-4当前契约要求每个品牌显式声明、B-slot如--fg-2 → var(--fg)这类别名或独立值与 C-extension品牌专属扩展。OpenAI 包的 tokens.css 中--fg-2绑定独立值#1a1a1a--surface-warm绑定#fafafa属于「有独立观点」的 B-slot 绑定形式。派生文件design-tokens.json 与 tailwind-v4.css 是派生输出应从 source/token-contract.report.json 与 tokens.css 重新生成不应手工编辑见 source/evidence.md。Tailwind v4 集成tailwind-v4.css通过import ./tokens.css引入源令牌再用theme块把--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*、--duration-*、--ease-standard、--container-max等映射为 Tailwind 工具类保持 tokens.css 为唯一事实来源。组件清单components.manifest.json 记录了 41 个选择器、18 个 class、24 个元素并按 buttons / inputs / cards / badges / links / keyboard / icons / typography / layout 分组每个组列出所引用的令牌如按钮组引用--accent、--radius-sm、--space-2、--motion-fast等同时列出unusedDeclared与undeclaredReferenced供审计。十、落地实操如何用这套系统产出 OpenAI 风格界面结合 USAGE.md 的流程实操建议如下引入令牌把 tokens.css 的:root块完整粘贴到产物artifact的style块中这是后续所有组件 CSS 的基础后续 CSS 一律引用var(--*)避免在令牌块之外写裸色值。组件复用优先复用 components.manifest.json 中已列出的.btn-primary、.btn-secondary、.btn-teal、.card、.field、.chip等组件组不要发明新控件需要精确选择器或状态细节时查阅 components.html。排版落地展示型 hero 用var(--font-display)Signifiervar(--text-4xl)var(--tracking-display)var(--leading-tight)H1–H3 与正文、说明一律用var(--font-body)与对应--text-*/--leading-*变量代码用var(--font-mono)。强调色纪律--accent#10a37f用于主操作、链接、聚焦态和唯一一个视觉焦点元素hover 用--accent-hover其余一律中性。动效纪律hover 用var(--motion-fast)布局过渡用var(--motion-base)缓动统一var(--ease-standard)不添加视差与滚动劫持。视觉检查需要验证颜色、排版、间距效果时直接打开preview/目录下的 preview/colors.html、preview/typography.html、preview/spacing.html 三个预览页。跨品牌切换严格保留 schema 令牌名不变如--accent、--surface这样在 Open Design 的品牌间切换例如从 openai 切到其他品牌包依然可靠——这正是 _schema 中「品牌作者决定值、schema 决定槽位」设计的初衷。通过这套「文档 令牌 组件 fixture 清单 预览」的组合OpenAI 风格设计系统得以从散文规范降维成 Agent 可直接复制粘贴、可机器校验、可跨品牌切换的工程资产。赞分享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点击查看免费下载相关推荐Open Design 中的 Discord 设计系统复刻Blurple 暗色界面、gg sans 排版与令牌化组件规范全解析Open Design 中的 Discord 设计系统复刻Blurple 暗色界面、gg sans 排版与令牌化组件规范全解析 Discord 的产品体验建立AI 应用人工智能AI 技能设计系统媒体生成SavvyCAN专业级跨平台CAN总线分析工具的技术架构与应用实践SavvyCAN专业级跨平台CAN总线分析工具的技术架构与应用实践 SavvyCAN是一款基于Qt框架开发的专业级跨平台CAN总线分析工具专为汽车电子工程师AI 应用人工智能AI 技能设计系统媒体生成在 open-design 中复刻 Airbnb 设计语言Rausch 色彩系统、Cereal 字族与 Agent 提示词规范的完整实现指南在 open design 中复刻 Airbnb 设计语言Rausch 色彩系统、Cereal 字族与 Agent 提示词规范的完整实现指南 本篇指南以 opAI 应用人工智能AI 技能设计系统媒体生成上一篇FinBERT实战指南如何用Fin-Retrievers构建金融智能检索系统下一篇LKY Office Tools 使用指南一次跑通 Office 的下载、安装与激活创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考