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/mongodb/source/evidence.md 为骨架围绕 OpenDesign 仓库中 MongoDB 设计系统包的「来源证据Source Evidence」与「令牌合约Token Contract」机制展开并深度展开其背后的视觉规范森林暗色画布、霓虹绿强调色、三段式字体层级与 56 个设计令牌的具体取值。读完本文你将掌握该设计系统包的文件分工、TOKEN_SCHEMA审计报告的解读方式以及如何在编码代理Agent场景下直接引用这套 tokens 与组件配方生成 MongoDB 风格的真实界面。一、来源证据这套设计系统从哪里来source/evidence.md 是 MongoDB 设计系统包的「证据文件」它首先划定了严谨的来源边界This Design System 2.0 backfill is derived from the curated OpenDesign bundled fixture. It does not claim a fresh crawl of the original upstream brand repository or website.这是一条重要的诚实声明本设计系统是 OpenDesign内置精选夹具bundled fixture的回填backfill产物并非对 MongoDB 上游品牌仓库或官网的重新抓取。因此在引用本包时不应声称拥有「原始上游来源证据」。包含的 Fixture 文件evidence.md 明确列出本回填所依赖的三个来源文件文件作用design-systems/mongodb/DESIGN.md视觉意图、约束与反模式anti-patterns的完整文字规范design-systems/mongodb/tokens.css56 个设计令牌CSS 自定义属性的结构化绑定design-systems/mongodb/components.html参考组件夹具含完整选择器与状态从包的 manifest.json 可以看到该包的source.type为bundledimportMode为normalized并建议在视觉审查时参考 craft 规范color、accessibility-baseline。这也印证了 evidence.md 的定位它是整个包的审计入口而非普通的设计说明文档。二、令牌合约TOKEN_SCHEMA 如何映射回 tokens.cssevidence.md 的核心技术声明只有两句却定义了整条可审计的令牌流水线source/token-contract.report.jsonmaps every TOKEN_SCHEMA binding back to the committedtokens.cssdeclaration line.design-tokens.jsonandtailwind-v4.cssare derived outputs and should be regenerated from the report and token stylesheet rather than edited by hand.即source/token-contract.report.json把每一个TOKEN_SCHEMA绑定都映射回已提交的tokens.css声明行号而design-tokens.json与tailwind-v4.css是衍生产物应基于报告与令牌样式表重新生成而不是手工编辑。审计报告的结构与评分打开 source/token-contract.report.json可以看到这份机器生成的报告包含三个关键部分summary汇总共 56 个令牌其中 26 个为A1-identity身份层、18 个为A1-structure结构层、26 个为A2衍生层、4 个为B-slot槽位层aliasTokens为 2即--surface-warm: var(--surface)、--border-soft: var(--border)评分 100 分、等级excellent、recommendRebuild: false。tokens 数组每个令牌记录name、layer、value、confidence全部为high、reason统一声明为 bundled 回填未做上游重爬、sources精确到tokens.css:33这样的行号、sourceName。sourceScopeopen-design-bundled-fixture确认数据来源域。{ name: --accent, layer: A1-identity, value: #00ed64, confidence: high, sources: [tokens.css:63], sourceName: --accent }对比 source/tokens.source.json 可以发现两者 token 集合完全一致——tokens.source.json是简化版的源映射只含name、value、layer、source而token-contract.report.json是带评分与置信度的完整审计报告。打开 tokens.css 第 63 行确实可以看到--accent: #00ed64;的声明即证据链「报告行号 → 样式表声明」可以直接验证。为什么禁止手改衍生文件design-tokens.json 的source字段明确写着tokensCss: tokens.css与tokenContractReport: source/token-contract.report.json而 tailwind-v4.css 的第一行注释是/* Derived from tokens.css. Keep tokens.css as the source of truth. */tailwind-v4.css通过import ./tokens.css与theme { --color-bg: var(--bg); ... }把每个 CSS 变量映射为 Tailwind v4 主题令牌如--color-accent、--font-display、--spacing-12、--shadow-raised、--duration-fast。这意味着唯一的手工编辑入口是tokens.css其余文件都应从「报告 令牌样式表」重新生成否则会产生漂移drift。这也正是 USAGE.md 中「避免在tokens.css之外直接定义 Tailwind 或设计令牌值」的原因。三、从令牌到视觉森林暗色的 MongoDB 设计语言令牌值本身只是数据真正定义「为什么是这些值」的是 DESIGN.md。它把 MongoDB 官网描述为「deep-forest-meets-terminal」体验最深的青黑teal-black画布#001e2b承载数据库的密度与森林树冠的纵深其上只有一个霓虹绿强调色#00ed64在脉冲发光——不是赛博朋克的冷霓虹而是「在黑暗中生长的生物荧光绿」。双模设计Dual-ModeMongoDB 体系最显著的结构特征是双模世界暗色世界#001e2bForest Black背景 #00ed64MongoDB Green强调用于 hero 与特性区块亮色世界白色背景 银青边框#b8c4c2用于内容区块。两个模式之间的切换产生强烈的戏剧化对比且模式之间严禁混用见下文 Dos and Donts。完整的色板角色表DESIGN.md §2给出了每个色值的功能角色与其在 tokens.css 中的绑定一一对应角色色值令牌用途Forest Black#001e2b--bg主暗色画布绝不使用纯黑MongoDB Green#00ed64--accent唯一品牌强调色高亮、下划线、渐变Dark Green#00684a--accent-hover按钮边框、亮色下的链接文本Action Blue#006cfa—组件内联次强调色链接、交互高亮Hover Blue#3860be—组件内联所有链接 hover 的目标色Teal Active#1eaedb—组件内联按钮 hover 背景Deep Teal#1c2d38--surface暗色按钮背景、次级暗色面板Teal Gray#3d4f58--border暗色表面边框Cool Gray#5c6c75--meta暗色下的弱化文本Silver Teal#b8c4c2--muted亮色表面边框、分隔线、说明文本Light Input#e8edeb--fg-2暗色表面输入文本Pure White#ffffff--fg亮色区块背景、暗色上的按钮文本Black#000000—亮色表面上的正文文本值得注意的实现细节tokens.css 的注释指出--accent-on是Forest Black 而非白色——因为霓虹绿足够亮深色文字在绿色 CTA 上的对比度远高于白色文字--accent-hover直接采用品牌自有的 muted Dark Green#00684a来自 DESIGN.md §2而不是合成压暗--accent-active则用现代 CSS 的color-mix(in oklab, var(--accent-hover), black 12%)在 OKLab 色彩空间压暗 12%保证色彩数学上的可复现。阴影把品牌色带进纵深体系这是 MongoDB 体系中最独特的设计决策——主阴影使用青色调染色Forest Shadowrgba(0, 30, 43, 0.12) 0px 26px 44px, rgba(0, 0, 0, 0.13) 0px 7px 13px对应--elev-raised见 tokens.css 第 152 行Standard Shadowrgba(0, 0, 0, 0.15) 0px 3px 20pxSubtle Shadowrgba(0, 0, 0, 0.1) 0px 2px 4px。DESIGN.md §6将其定义为 Level 0–4 的完整纵深阶梯且明确即使阴影落在白色表面上rgba(0,30,43,...)的青色调也让阴影属于 MongoDB 的色彩世界而不是中性的黑色阴影。tokens.css还额外提供了--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)——键盘焦点环也是品牌强调色的 30% 透明度光晕而不是通用蓝环。四、排版衬线权威 几何正文 等宽标签的三段式体系DESIGN.md §3定义了三个字体家族的明确分工字体职责MongoDB Value Serif巨型 hero 标题96px编辑级的权威感Euclid Circular A正文与 UI 文本罕见的 300–700 宽字重跨度Source Code Pro代码与标签超宽字距1px–3px的大写处理tokens.css 第 83–85 行 对应的字体栈为--font-display: MongoDB Value Serif, Times New Roman, Times, ui-serif, Georgia, serif; --font-body: Euclid Circular A, Akzidenz-Grotesk Std, -apple-system, Segoe UI, Helvetica, Arial, sans-serif; --font-mono: Source Code Pro, ui-monospace, SF Mono, JetBrains Mono, Menlo, Monaco, Consolas, monospace;字号层级Hierarchy速查表DESIGN.md §3的完整层级表均已落入tokens.css的--text-*令牌角色字体字号字重行高字距Display HeroValue Serif96px--text-4xl4001.20normalDisplay SecondaryValue Serif64px--text-3xl4001.00normalSection HeadingEuclid Circular A36px--text-2xl5001.33normalSub-headingEuclid Circular A24px--text-xl5001.33normalBody LargeEuclid Circular A20px--text-lg4001.60normalBodyEuclid Circular A18px4001.33normalBody LightEuclid Circular A16px--text-base3001.50–2.00normalNav / UIEuclid Circular A16px5001.00–1.880.16pxCode LabelSource Code Pro14px--text-sm400–5001.141–2pxuppercaseCode MicroSource Code Pro9px6002.672.5pxuppercase四个排版原则值得单独强调衬线只服务于权威标题96px 的衬线 hero 是数据库公司的编辑级宣言字重 300 是正文默认轻盈的阅读体验与厚重的暗色背景形成对比宽字距大写等宽标签是「数据库字段名」式技术路标300→400→500→700 四档字重比多数设计系统更宽支撑更细粒度的层级。五、组件样式与布局原则按钮三态DESIGN.md §4 定义了三种按钮对应 components.manifest.json 中buttons组的.btn、.btn-primary、.btn-secondaryPrimary Green暗色表面背景#00684a文字#000000半径 100px 药丸形边框1px solid #00684ahover 缩放 1.1active 缩放 0.85Dark Teal 按钮背景#1c2d38文字#5c6c75hover 时背景变#1eaedb、文字转白并translateX(5px)Outlined亮色表面透明背景文字#001e2b边框1px solid #b8c4c2半径 4–8px。卡片、表单与签名装饰卡片亮色模式白底 1px solid #b8c4c2暗色模式#001e2b/#1c2d381px solid #3d4f58半径 16/24/48px 三档阴影用 forest-tinted 主阴影--elev-raised表单暗色输入文字#e8edeb内边距12px 12px 12px 8px输入框半径 4px--radius-sm霓虹绿强调下划线0px 2px 2px 0px solid #00ed64底部 右侧边框用于特性标题与高亮文本另有#006cfa蓝色变体——这是整个体系最具辨识度的装饰元素也是 components.manifest.json 中.accent-underline类所对应的实现Source Code 标签系统14px 大写 1–2px 字距置于标题上方作为「章节类别标记」。布局与间距基础单位 8px规模 1/4/7/8/10/12/14/15/16/18/20/24/32px含 7/14/15/18 等奇数子层用于精细的字型对齐仅组件内部使用tokens.css的--space-*覆盖 4/8/12/16/20/24/32/48 的结构性节奏内容最大宽度 1200px--container-max桌面/平板/手机槽距分别为 24/16/12px圆角阶梯1–2px徽章→ 4px输入框→ 8px卡片/链接→ 16px标准卡→ 20px开关→ 24px大面板→ 30–32px图片容器→ 48pxhero 卡→ 100–999px药丸按钮→ 9999px最大药丸留白哲学通过模式切换制造呼吸感——暗色 hero/特性区块用 80px 的慷慨纵向内边距--section-y-desktop: 96px而亮色内容区块更紧凑、卡片网格更密。六、响应式与「该做/不该做」清单断点策略DESIGN.md §8定义六个断点Mobile Small425px紧致单列→ Mobile425–768px→ Tablet768–1024px双列网格开始→ Desktop1024–1280px→ Large Desktop1280–1440px→ Ultra-wide1440px最大宽度与慷慨边距。折叠策略上hero 的 96px 衬线标题逐级缩到 64px导航从横向 mega-menu 收进汉堡菜单特性卡片从多列堆叠为单列暗/亮模式在任何尺寸下都保持各自模式不变。Dos and Donts可直接用于 Agent 约束应当暗色区块用#001e2bforest-black绝不用纯黑MongoDB Green#00ed64要吝啬使用以获得最大电力冲击每屏不超过 1–2 处tokens.css 注释建议 ≤2 处/屏MongoDB Value Serif只用于 hero/展示级标题其余一律 Euclid Circular ASource Code Pro 大写 宽字距1–3px用于技术标签主卡片抬升用青色调阴影rgba(0,30,43,0.12)保持暗/亮双模的戏剧化对比正文默认字重 300主操作按钮用 100px 药丸半径。禁止禁止用纯黑#000000作暗色背景禁止把霓虹绿铺在背景上——它只服务于文本、下划线和小面积高亮禁止使用标准灰色阴影始终用青色调rgba(0,30,43,...)禁止把衬线字体用在正文禁止收窄 Source Code Pro 标签的字距宽字距本身就是身份禁止在同一区块内混用暗/亮处理禁止暖色调色板严格为冷色teal、green、blue禁止遗漏绿色强调下划线——它是签名装饰元素。七、Agent 提示词指南让编码代理直接产出 MongoDB 风格DESIGN.md §9 专门为 Agent 提供了可直接复制的提示词配方结合本包文件可以按以下顺序落地来自 USAGE.md 的 Read Order先读 USAGE.md 理解包契约读 DESIGN.md 理解视觉意图与反模式把tokens.css粘贴进首个 artifact 的style块再写组件 CSS用 components.manifest.json 做紧凑组件清单含 9 个组件组buttons/inputs/cards/badges/links/keyboard/icons/typography/layout每个组都标注了tokenReferences需要精确选择器或状态时打开 components.html需要视觉核验时打开 preview/colors.html、preview/typography.html、preview/spacing.html。可直接使用的示例提示词节选自 DESIGN.md §9Hero「Create a hero on forest-black (#001e2b) background. Headline at 96px MongoDB Value Serif weight 400, line-height 1.20, white text with potential highlighted in MongoDB Green (#00ed64). Subtitle at 18px Euclid Circular A weight 400. Green pill CTA (#00684a, 100px radius). Neon green gradient glow behind product screenshot.」卡片「Design a card on white background: 1px solid #b8c4c2 border, 16px radius, shadow rgba(0,30,43,0.12) 0px 26px 44px. Title at 24px Euclid Circular A weight 500. Body at 16px weight 300. Source Code Pro 14px uppercase label above title with 2px letter-spacing.」技术标签「Create technical label: Source Code Pro 14px, text-transform uppercase, letter-spacing 2px, weight 500, #00ed64 color on dark background.」药丸按钮「Design a pill button: #1c2d38 background, 1px solid #3d4f58 border, 100px radius, #5c6c75 text. Hover: #1eaedb background, white text, translateX(5px).」迭代清单Iteration Guide先做模式决策暗色#001e2b用于 hero/特性白色用于内容霓虹绿是电光——每个区块最多用一次以获得最大冲击衬线标题塑造编辑权威——绝不用于正文字重 300 的正文创造轻盈阅读体验——不要默认 400Source Code Pro 大写 宽字距是「数据库之声」青色调阴影让一切保持在 MongoDB 的色彩世界内。同时遵循 USAGE.md 的硬约束严格保留 schema 令牌名以保证跨品牌切换可靠--accent用于主操作、链接、焦点态与一个清晰的焦点元素优先复用components.manifest.json中的组件组而非自造新控件source/目录仅作为 bundled fixture 回填的审计证据。八、证据链自查一份可验证的令牌清单为方便你在仓库中逐条核对这里给出 evidence.md 所指向证据链的完整落点report 行号 → tokens.css 声明行令牌值报告来源行所属层--bg#001e2btokens.css:33A1-identity--surface#1c2d38tokens.css:34A1-identity--fg#fffffftokens.css:42A1-identity--accent#00ed64tokens.css:63A1-identity--accent-on#001e2btokens.css:64A2--accent-hover#00684atokens.css:65A2--font-displayMongoDB Value Serif 栈tokens.css:83A1-identity--text-4xl96pxtokens.css:99A1-structure--radius-pill9999pxtokens.css:142A2--elev-raisedforest-tinted 阴影tokens.css:152A2--focus-ring霓虹绿 30% 光晕tokens.css:160A2--container-max1200pxtokens.css:172A1-structure从token-contract.report.json的 summary 可以看到56 个令牌全部declared、全部sourceBacked、26 个sourceBackedA1、26 个fallback、2 个别名审计得分 100、等级excellent、recommendRebuild: false——这是一条闭环且零漂移的令牌供应链。九、小结source/evidence.md虽短却是整个 MongoDB 设计系统包的「可信度锚点」它用两段话划定了来源边界bundled fixture 回填、非上游爬取、列明了三个 fixture 文件、并定义了「报告映射行号 → 样式表声明」的审计契约与「tokens.css 为唯一真源、其余文件重新生成」的维护纪律。配合 DESIGN.md 的完整视觉规范、tokens.css 的 56 个令牌绑定、components.manifest.json 的组件组清单以及 USAGE.md 的落地顺序这套「森林暗色 霓虹绿 衬线权威 青调阴影」的设计语言完全可以被编码代理直接消费生成真实、可导出、风格统一的 MongoDB 风格界面。赞分享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 中的 MongoDB 设计系统森林黑 × 霓虹绿的后端品牌视觉体系OpenDesign 中的 MongoDB 设计系统森林黑 × 霓虹绿的后端品牌视觉体系 导读 本文以 design systems/mongodb/DESAI 应用人工智能AI 技能设计系统媒体生成OpenDesign Colorful 设计系统来源证据与 Token 契约审计指南OpenDesign Colorful 设计系统来源证据与 Token 契约审计指南 本文以 design systems/colorful/source/evAI 应用人工智能AI 技能设计系统媒体生成OpenDesign Dramatic 设计系统基于 Token 契约的来源证据Source Evidence体系解析OpenDesign Dramatic 设计系统基于 Token 契约的来源证据Source Evidence体系解析 本篇文章聚焦 OpenDesignAI 应用人工智能AI 技能设计系统媒体生成上一篇Claude-Code-Game-Studios Unreal 引擎专家 Agent 测试规范深度解析Blueprint/C 决策、版本感知与域边界校验下一篇MiroFlow核心架构解析模块化设计如何实现SOTA级研究能力创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考