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点击查看免费下载本指南以仓库内 design-systems/opencode-ai/DESIGN.md 为骨架结合同目录的 token 样式表、组件 fixture 与派生清单完整还原一套「AI 编码平台」风格的设计系统。读者读完后将掌握如何用暖近黑底 暖米白字 Berkeley Mono 全站单字体构建终端原生暗色界面如何在零阴影的扁平深度体系下用边框与背景位移表达层级以及如何将整套规范编码为 Agent 可直接消费的设计提示词。OpenCode 的视觉语言是一套「一切皆代码」的终端原生暗色系统不追求冷冰冰的 IDE 观感而是用带红褐暖调的近黑画布与暖米白文字营造出高级终端模拟器的氛围。本文将从视觉基调、色彩角色、排版规则、组件样式、布局原则、深度体系、交互动效、响应式行为与 Agent 提示指南九个维度展开并逐项对照仓库中 tokens.css 与 components.html 的实现证据。一、视觉主题与氛围暖色终端而非冷色 IDEOpenCode 官网的核心审美是terminal-native终端原生与 monospace-first等宽优先。整个视觉系统建立在高对比的深底浅字之上近黑背景#201d1d并非纯黑而是带红褐暖调的暖黑RGB 为rgb(32, 29, 29)红色通道的微妙存在让暗色有了生活感暖米白文字#fdfcfc避免临床式的纯白同样带极淡暖色单一字体 Berkeley Mono标题、正文、按钮、导航全部共用同一等宽字体everything is code一切皆代码的理念贯穿始终极简 4px 圆角全局锐利、实用主义的转角8px 基准间距系统向上扩展到 96pxApple HIG 语义色蓝、红、绿、橙提供熟悉的信号色暖色透明边框rgba(15, 0, 0, 0.12)与整体暖调呼应唯一的按钮变体深底浅字、紧凑垂直内边距4px 20px默认下划线链接强化文本中心身份。DESIGN.md 归纳的关键特征清单Key Characteristics在仓库的 tokens.css 文件头注释中得到了完整复刻例如Dark-on-dark:#201d1d为页面背景、#302c2c为 surface、#fdfcfc为一级文字——绝不用纯白、FLAT depth system——零阴影等决策都被显式编码为注释与 token。为什么暖调很重要#201d1d与#fdfcfc的暖色并非装饰。在组件 fixture components.html 的 hero 文案中直接写着 Warm near-black canvas (#201d1d)并把暖调描述为该系统的关键识别特征。仿制此风格时最容易犯的错误就是退化为纯黑#000000与纯白#ffffff。二、颜色体系与角色分工2.1 主色PrimaryToken色值角色OpenCode Dark#201d1d主背景、按钮填充、链接文字暖近黑rgb(32, 29, 29)OpenCode Light#fdfcfc深色面上的主文字、按钮文字略暖的米白Mid Gray#9a9898次级文字、弱化链接连接深浅的中性暖灰2.2 次级色SecondaryToken色值角色Dark Surface#302c2c比主背景略浅用于抬升的面与细微区分Border Gray#646262更强的边框、交互元素的轮廓环Light Surface#f1eeee亮色模式表面、细微背景变化2.3 强调色AccentToken色值角色Accent Blue#007aff主强调色、链接、交互高亮Apple 系统蓝Accent Blue Hover#0056b3hover 态深蓝Accent Blue Active#004085pressed/激活态最深蓝2.4 语义色SemanticToken色值角色Danger Red#ff3b30错误态、破坏性操作Apple 系统红Danger Hover / Active#d70015/#a50011危险元素 hover / pressed 深红Success Green#30d158成功态、正向反馈Apple 系统绿Warning Orange#ff9f0a警告态、警示信号Apple 系统橙Warning Hover / Active#cc7f08/#995f06警告元素 hover / pressed 深橙2.5 文字与边框层级Text Muted#6e6e73弱化标签、禁用文字、占位内容Text Secondary#424245亮色背景上的次级文字、说明文字Border Warmrgba(15, 0, 0, 0.12)主边框色带红调的透明黑Border Tab#9a9898标签页下划线边框2px 实底Border Outline#646262容器 1px 实线轮廓。这些角色在 tokens.css 中都有对应的 CSS 自定义属性绑定例如--bg: #201d1d、--surface: #302c2c、--fg: #fdfcfc、--muted: #9a9898、--accent: #007aff等。值得注意的细节tokens.css 为每个语义色都显式声明了 hover 与 active 变体--accent-hover、--accent-active等对应 DESIGN.md 描述的三段式交互序列。三、排版规则一个字体的三种权重3.1 字体族全局唯一字体栈--font-display: Berkeley Mono, IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace; --font-body: Berkeley Mono, IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace; --font-mono: Berkeley Mono, IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;三个 token 指向同一套字体栈见 tokens.css这正是一个字体的三种角色名的实现方式display、body、mono 在 OpenCode 系统中没有字体差异层级仅靠字号与字重区分。3.2 层级量表角色字号字重行高用途Heading 138px2.38rem7001.50Hero 大标题、页面标题Heading 216px1.00rem7001.50小节标题、粗体强调Body16px1.00rem4001.50标准正文、段落Body Medium16px1.00rem5001.50链接、按钮文字、导航项Body Tight16px1.00rem5001.00紧凑紧凑标签、标签页项Caption14px0.88rem4002.00宽松脚注、元数据、小标签在 tokens.css 中文字量表被编码为--text-xs: 12px、--text-sm: 14px、--text-base: 16px、--text-lg: 18px、--text-xl: 22px、--text-2xl: 28px、--text-3xl: 38px、--text-4xl: 48px并附注释说明38px 为 Heading 1其余为 16px 变体系统刻意压缩——终端尺度。3.3 排版三原则一字体一言Berkeley Mono 独占显示、正文、代码之间零字体切换层级只靠字号与字重字重即层级700 用于标题500 用于交互/中等强调400 用于正文三级字重构成全部层级慷慨行高 紧凑交互1.50 标准行高让等宽网格呼吸caption 的 2.00 宽松行高制造清晰视觉分隔标签页等交互元素用 1.00 紧凑行高保证点击密度。在组件 fixture components.html 中可见落地实现h1 { font-size: var(--text-3xl); }38px、h2 { font-size: var(--text-2xl); }28px、h3 { font-size: var(--text-xl); }22px全部使用--font-display且letter-spacing: 0——等宽字体不需要字距调整。四、组件样式规范4.1 按钮Primary深色填充属性值背景#201d1dOpenCode Dark文字#fdfcfcOpenCode Light内边距4px 20px圆角4px字体16px Berkeley Mono字重 500行高 2.00用途主 CTA、主要操作fixture 中的实际按钮实现略有演进.btn基类采用padding: 8px 16px、border-radius: var(--radius-sm)4px.btn-primary使用--accentApple 蓝作为主 CTA 背景并带 hover/active 深蓝变体.btn-secondary则为透明底 --border描边hover 时background: var(--surface)见 components.html。交互反馈方面.btn:active { transform: translateY(1px); }提供轻微按下位移.btn:focus-visible使用box-shadow: var(--focus-ring)——即 2px 的 Apple 蓝环而非阴影模糊。4.2 输入框Email Input电子邮件输入属性值背景#f8f7f7浅中性色文字#201d1d边框1px solid rgba(15, 0, 0, 0.12)内边距20px圆角6px字体Berkeley Mono 标准字号用途表单字段、邮件收集fixture 的表单实现展示了这套规范的配置键式表达label 使用--text-xs的等宽小字如ANTHROPIC_API_KEY、DEFAULT_MODEL输入框使用--radius-md6px全系统最圆润的元素、--border边框与--surface背景:focus-visible时边框转为--accent并叠加 2px 焦点环components.html。占位符与帮助文字使用--meta弱化。4.3 链接变体颜色装饰用途Default Link#201d1d1px 下划线正文主文本链接Light Link#fdfcfc无深色背景上的链接、导航Muted Link#9a9898无页脚链接、次级导航在暗色 fixture 中链接落地为a { color: var(--accent); }hover 时添加下划线——与 DESIGN.md 所述默认下划线链接强化文本中心身份的方向一致浅色面用深色文字加下划线深色面用强调蓝。4.4 标签页、导航与图片Tab Navigation底部2px solid #9a9898的激活指示线16px、字重 500、行高 1.00Navigation纯横向布局、Berkeley Mono 贯穿品牌字标左对齐链接 16px 字重 500 带下划线装饰背景与页面背景一致无背景模糊、无透明只允许实色表面Image Treatment终端/代码截图作为 hero 主图暗色终端美学 等宽排版极简边框。4.5 特色组件Terminal Hero全宽暗色终端窗口作为 hero 元素终端框内含 ASCII 艺术/风格化 Logo、带语法高亮的等宽命令示例强化 CLI-first 产品身份Feature ListBerkeley Mono 项目符号列表特性名 500、描述 400条目间紧凑垂直间距无卡片无边框的纯文本布局Email Capture浅色背景输入框#f8f7f7与暗色页面形成对比20px 慷慨内边距、6px 圆角——全系统最圆的元素典型 newsletter/waitlist 模式。fixture components.html 中还能看到 DESIGN.md 未展开的补充组件.prompt带$前缀的终端提示行绿色文字、kbd键盘提示、.badge语义徽章success/danger/warn/accent 四色均用 12% 透明度底色、.card卡片用--surface背景 1px--border描边制造深度不用阴影。五、布局原则8px 网格与 880px 窄阅读列5.1 间距系统基准单位8px精细刻度1px、2px、4px用于边框与微调sub-8px标准刻度8px、12px、16px、20px、24px扩展刻度32px、40px、48px、64px、80px、96px遵循干净的 4/8px 网格持续倍增在 tokens.css 中间距被编码为--space-1: 4px至--space-12: 48px并补充了响应式章节间距--section-y-desktop: 80px、--section-y-tablet: 64px、--section-y-phone: 48px。5.2 网格与容器最大内容宽度约 800–900px窄列、阅读优化tokens.css 明确取880px--container-max: 880px单列布局为基本模式内容居中、横向留白慷慨Hero 区全宽暗色终端元素特性区单列文本块页脚多列链接网格。5.3 留白哲学等宽韵律Berkeley Mono 的定宽特性天然形成垂直网格1.50/2.00 行高维持稳定节奏窄而专注内容约束在窄列内两侧慷慨边距把注意力引向文本用间距切分章节不设装饰性分隔线靠 48–96px 的章节垂直间距划分区块。fixture 中.container { max-width: var(--container-max); margin-inline: auto; }与section { padding-block: var(--section-y-desktop); }、section section { border-top: 1px solid var(--border); }是上述原则的直接落地components.html。5.4 圆角量表整个系统只使用两个圆角值Micro 4px默认按钮、容器、徽章与Input 6px表单输入略圆。两个值强化了实用主义审美——终端没有圆角。六、深度与抬升零阴影的扁平体系层级处理方式用途FlatLevel 0无阴影、无边框绝大多数元素的默认态Border SubtleLevel 11px solid rgba(15, 0, 0, 0.12)章节分隔、输入框边框、水平线Border TabLevel 2仅底部2px solid #9a9898激活标签页指示Border OutlineLevel 31px solid #646262容器轮廓、抬升元素阴影哲学OpenCode 的深度系统刻意扁平。提取的 token 中没有任何 box-shadow 值零阴影值。深度完全靠边框处理与背景色位移表达。这与终端美学一致——终端没有阴影OpenCode 也没有。三种边框层级透明暖边、标签指示线、实色轮廓无需任何抬升幻象即可构成足够的视觉层级。装饰性深度方面#201d1d与#302c2c的背景位移制造微妙表面区分12% 透明边框提供近乎不可见的结构边框的暖红调rgba(15, 0, 0, 0.12)把边框锚定在整个暖暗色调中无渐变、无模糊、无环境光效果。tokens.css 中的落地实现清晰可见tokens.css--elev-flat: none; --elev-ring: 0 0 0 1px var(--border); --elev-raised: 0 0 0 2px var(--border); /* 更明显的环——无模糊 */ --focus-ring: 0 0 0 2px var(--accent);三个抬升层级全部使用 ring 描边而非投影焦点环同样用 2px 实色环表达——焦点环无阴影符合扁平体系。fixture 的.card也印证了这一点border: 1px solid var(--border);的注释明确写着 Ring creates depth — NO shadow。七、交互与动效瞬时反馈克制变化7.1 Hover 状态链接颜色从默认态向强调蓝#007aff过渡或下划线样式变化按钮轻微背景提亮或边框强调语义色三段式序列默认 → hover变深→ active更深语义色默认HoverActiveAccent Blue#007aff#0056b3#004085Danger Red#ff3b30#d70015#a50011Warning Orange#ff9f0a#cc7f08#995f067.2 Focus 状态基于边框的焦点提高边框不透明度或转为实色无阴影焦点环——与扁平无阴影美学一致键盘焦点大概率使用 outline 或边框色位移至强调蓝fixture 已确认实现为border-color: var(--accent)box-shadow: var(--focus-ring)。7.3 过渡极简过渡预期终端启发的界面偏好瞬时状态变化颜色过渡 100–150ms用于细微状态反馈无缩放、旋转或复杂 transform 动画fixture 唯一的位移是按钮按下时的translateY(1px)。tokens.css 将动效参数化为--motion-fast: 100ms、--motion-base: 150ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)tokens.css按钮与输入框的transition均引用这些 token。八、响应式行为8.1 断点名称宽度关键变化Mobile640px单列、内边距缩减、标题缩小Tablet640–1024px内容宽度扩展、内边距略微增加Desktop1024px全内容宽度约 800–900px 居中、最大留白fixture 的实现对应关系media (max-width: 1023px)切换 tablet gutter 与章节间距media (max-width: 639px)切换 phone guttercomponents.html。8.2 触控目标4px 20px 内边距的按钮提供充足横向触控区20px 内边距的输入框保证移动端输入舒适16px 紧凑行高的标签项在移动端可能需要适配。8.3 折叠策略Hero 标题38px → 28px → 24px小屏逐级缩小导航横向链接 → 移动端汉堡/抽屉菜单特性列表保持单列缩减横向内边距Terminal hero保持全宽缩减内部内边距页脚多列 → 堆叠单列章节间距96px → 64px → 48px移动端对应--section-y-desktop/tablet/phone三个 token。8.4 图片行为终端截图保持宽高比与边框处理全宽元素等比缩放等宽字体因定宽特性在任意尺寸下都保持可读性。九、Agent 提示指南把规范变成可消费的指令DESIGN.md 的最后一章是本系统最工程化的部分——它把整套规范压缩为 Agent 可直接读取的提示语这正是 Open Design 把设计系统提示词化的体现设计系统包通过 manifest 与 prompt 组合进入 Agent 上下文参见 design-systems/README.md 与 USAGE.md。9.1 快速颜色速查页面背景#201d1d暖近黑主文字#fdfcfc暖米白次级文字#9a9898暖灰弱化文字#6e6e73强调色#007aff蓝危险色#ff3b30红成功色#30d158绿警告色#ff9f0a橙按钮背景#201d1d按钮文字#fdfcfc边框rgba(15, 0, 0, 0.12)暖透明输入框背景#f8f7f7输入框边框rgba(15, 0, 0, 0.12)9.2 示例组件提示词可直接复用Hero 区Create a hero section on#201d1dwarm dark background. Headline at 38px Berkeley Mono weight 700, line-height 1.50, color#fdfcfc. Subtitle at 16px weight 400, color#9a9898. Primary CTA button (#201d1dbg with1px solid #646262border, 4px radius, 4px 20px padding,#fdfcfctext at weight 500).特性列表Design a feature list: single-column on#201d1dbackground. Feature name at 16px Berkeley Mono weight 700, color#fdfcfc. Description at 16px weight 400, color#9a9898. No cards, no borders — pure text with 16px vertical gap between items.邮件收集表单Build an email capture form:#f8f7f7background input,1px solid rgba(15, 0, 0, 0.12)border, 6px radius, 20px padding. Adjacent dark button (#201d1dbg,#fdfcfctext, 4px radius, 4px 20px padding). Berkeley Mono throughout.导航Create navigation: sticky#201d1dbackground. 16px Berkeley Mono weight 500 for links,#fdfcfctext. Brand name left-aligned in monospace. Links with underline decoration. No blur, no transparency — solid dark surface.页脚Design a footer:#201d1dbackground, multi-column link grid. Links at 16px Berkeley Mono weight 400, color#9a9898. Section headers at weight 700. Border-top1px solid rgba(15, 0, 0, 0.12)separator.9.3 迭代指南八条铁律Berkeley Mono 是唯一字体——永不引入第二种字体层级全部由字号与字重创造保持表面扁平无阴影、无渐变、无模糊效果只用边框与背景位移暖调至关重要用#201d1d而非#000000用#fdfcfc而非#ffffff红褐暖意微妙但必需圆角全系统 4px仅输入框 6px永不使用胶囊形或大圆角语义色遵循 Apple HIG#007aff蓝、#ff3b30红、#30d158绿、#ff9f0a橙各带 hover/active 深色变体所有语义色采用三段式交互默认 → hover变深→ active更深边框用rgba(15, 0, 0, 0.12)——暖色透明黑而非中性灰把边框锚定在暖色调中间距遵循 8px 网格8、16、24、32、40、48、64、80、96px4px 仅用于微调。十、仓库配套从 DESIGN.md 到可运行的设计系统包DESIGN.md 只是该设计系统包的设计散文层。以 design-systems/opencode-ai/ 目录为例Open Design 要求每个设计系统包具备统一的机器可读结构详见 design-systems/README.mddesign-systems/opencode-ai/ ├── manifest.json 稳定发现元数据、来源与包路径 ├── DESIGN.md 面向 Agent 的规范散文本文主体 ├── tokens.css 编译后的语义 token 样式表规范事实源 ├── USAGE.md Agent 阅读顺序与使用指南 ├── components.html 独立组件 fixture52 个选择器 ├── components.manifest.json 派生组件/token 索引 ├── design-tokens.json 派生 Design Tokens JSON56 个 token ├── tailwind-v4.css 派生 Tailwind v4 映射 ├── tokens.default.json 默认 token 快照 ├── preview/ 索引预览页colors / typography / spacing └── source/ 导入证据、token 契约报告10.1 token 契约规范可验证的基石design-tokens.json 对tokens.css的 56 个声明 token 逐一绑定总计 56 个 token全部 source-backed26 个 A1-identity、18 个 A1-structure、4 个 B-slot、26 个 A2契约评分 100、评级 excellent、不推荐重建。source/token-contract.report.json将每个 TOKEN_SCHEMA 绑定映射回tokens.css的具体声明行source/evidence.md 同时声明本包基于 OpenDesign 策展的 bundled fixture 派生不主张对上游品牌仓库或官网做过全新抓取。10.2 派生产物与单一事实源components.manifest.json由components.html与tokens.css派生design-tokens.json由 token 契约报告派生必须与tokens.css一致tailwind-v4.css由tokens.css派生文件头明确 Keep tokens.css as the source of truth。tailwind-v4.css 展示了 token 向 Tailwindtheme的映射方式--color-bg: var(--bg)、--color-accent: var(--accent)、--spacing-2: var(--space-2)、--shadow-focus-ring: var(--focus-ring)、--container-max: var(--container-max)等让使用者可以在 Tailwind v4 项目中以bg-bg、text-fg、shadow-focus-ring这类工具类消费整套规范。10.3 使用顺序USAGE.md 契约按 USAGE.md 的推荐顺序使用本包先读 USAGE.md 理解包契约读 DESIGN.md 理解视觉意图、约束与反模式把tokens.css粘贴进第一个 artifact 的style块再写组件 CSS用components.manifest.json做紧凑组件清单需要精确选择器或状态时打开components.html需要视觉抽查时查看preview/页面。Do严格保留 schema token 名称以保证跨品牌切换可靠用--accent表示主操作、链接、焦点态与唯一视觉焦点元素优先复用components.manifest.json中的组件组把source/文件当作 bundled fixture 回填的审计证据。Avoid在复制的:roottoken 块之外使用裸 hex 值脱离tokens.css单独重定义 Tailwind 或 design-token 值宣称存在原始上游来源证据本包基于策展 bundled fixture新增components.html或DESIGN.md中未体现的组件配方。结语给实现者的一句话总结OpenCode 设计系统在 Open Design 仓库中的落地是一份克制的范本一个字体、两个圆角、三档字重、四色语义、八像素网格、零阴影。如果你正在为 AI 编码工具、开发者文档或任何 CLI-first 产品做界面可以直接复制 tokens.css 的:root块作为起点对照 components.html 的组件实现逐项落地并以上一章的八条迭代铁律作为验收清单——尤其记住暖调不可省略、扁平不可妥协这两条最容易走样的约束。赞分享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 设计系统实战解析 Cursor 风格「温暖极简 AI 原生」设计语言的完整实现Open Design 设计系统实战解析 Cursor 风格「温暖极简 AI 原生」设计语言的完整实现 导读 本文围绕仓库中 design systemsAI 应用人工智能AI 技能设计系统媒体生成Open Design Pinterest 设计系统解析暖色视觉探索画布的设计令牌、组件规范与 Agent 提示词实战指南Open Design Pinterest 设计系统解析暖色视觉探索画布的设计令牌、组件规范与 Agent 提示词实战指南 本文以 Open Design 仓AI 应用人工智能AI 技能设计系统媒体生成open-design 中的 NVIDIA 设计系统实战从 76b900 品牌绿到 Agent 提示词工程open design 中的 NVIDIA 设计系统实战从 76b900 品牌绿到 Agent 提示词工程 本篇技术指南以 design systems/nvAI 应用人工智能AI 技能设计系统媒体生成上一篇wiliwili代码评审效率提升自动化检查下一篇BotBrowser安全测试最佳实践授权隐私研究环境配置指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考