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/DESIGN.md 为主体系统拆解 OpenDesign 内置 MongoDB 设计系统的完整视觉契约——从#001e2b森林黑与#00ed64霓虹绿的色彩骨架到 Serif 权威 × 几何正文 × 等宽标签 三字体体系再到按钮、卡片、表单等组件的精确取值与 Agent 提示词写法。读完本文你可以直接用这套规格复刻一个数据库公司气质的产品页面也能理解 tokens.css 中每个 CSS 变量背后的设计决策以及如何用提示词让编码 Agent 产出高度还原的界面。1. 设计系统包结构总览在 OpenDesign 仓库中MongoDB 设计系统是一个标准化的 Design System 2.0 包目录位于design-systems/mongodb/其包契约定义在 manifest.json 中文件作用DESIGN.md视觉意图、约束与反模式的权威文档本文主体tokens.css可直接粘贴进产物style块的 Token 绑定唯一事实来源design-tokens.jsonToken 结构化清单与契约评分tailwind-v4.cssTailwind v4 桥接层把 Token 映射为theme变量components.html组件参考夹具精确选择器与状态components.manifest.json组件清单分组、选择器、Token 引用USAGE.md面向 Agent 与审查者的使用顺序契约preview/colors / typography / spacing 视觉预览页source/审计证据evidence.md、tokens.source.json、token-contract.report.json包清单显示本包共声明56 个 Token全部有源文件背书sourceBackedTokens: 56契约评分为 100、等级excellent其中 26 个为 A2 层派生 Token、18 个为 A1 结构层 Token、8 个为 A1 身份层 Token、4 个为 B-slot 槽位 Token见 design-tokens.json 的summary字段。组件夹具包含 50 个选择器、26 个类与 25 个元素覆盖按钮、输入、卡片、徽章、链接、键盘提示、图标、排版与布局共 9 个组件分组。需要特别说明的事实边界根据 source/evidence.md该包是基于 OpenDesign 策展的内置夹具bundled fixture整理而成并非对 MongoDB 官网的实时爬取因此文中所有取值均以仓库内文档与样式文件为准。2. 视觉主题深林与终端之间的双模式体验MongoDB 设计系统的第一印象是深林遇见终端页面基调是最深的青黑#001e2bForest Black既暗示数据库的密度又让人联想到森林树冠的纵深。在这块近乎纯黑的画布上霓虹绿#00ed64MongoDB Green以极低的使用频率脉动——它不像赛博朋克的冷霓虹更像是黑暗中生长的生物荧光绿。这套视觉有两大支柱双模式结构Dual-mode——暗色英雄区/特性区#001e2b底 霓虹绿点缀与亮色内容区白底 银青边框#b8c4c2交替出现模式切换本身构成强烈的戏剧性对比。根据 tokens.css暗色画布对应--bg抬升卡片使用略暖的深青面板--surface: #1c2d38值得注意的是--surface-warm直接别名到--surface因为 MongoDB 调色板严格无暖色暖表面槽位不引入琥珀色阶以免破坏森林氛围。三字体分工——MongoDB Value Serif承担 96px 量级的英雄标题衬线字体出现在数据库公司尺度的标题上是我们不只是另一家科技公司的编辑式宣言Euclid Circular A以罕见的 300–700 宽字重区间承担正文与 UISource Code Pro作为代码与标签字体用 1px–3px 的极宽字距 大写处理形成数据库字段标签式的技术路标。关键特征速览深青黑背景#001e2b——森林之暗而非太空之暗霓虹绿#00ed64作为唯一品牌强调色——既电光又有机MongoDB Value Serif 用于英雄标题——科技尺度的编辑权威Euclid Circular A 正文默认字重 300light——标志性的轻盈正文Source Code Pro 宽字距大写1px–3px——技术标签专属青色染色阴影rgba(0, 30, 43, 0.12)——阴影携带森林色暗青英雄区 亮白内容区的双模式药丸按钮100px 圆角 绿边框#00684a链接蓝#006cfa悬停过渡至#3860be3. 色彩系统三色品牌骨架 分层中性色 森林色阴影3.1 主品牌色Primary Brand角色色值用途Forest Black#001e2b主暗色背景——最深的青黑MongoDB Green#00ed64主品牌强调色——高亮、下划线、渐变Dark Green#00684a按钮边框、亮色下链接文字——功能性的暗绿3.2 交互色Interactive角色色值用途Action Blue#006cfa次级强调色——链接、交互高亮Hover Blue#3860be所有链接悬停态过渡至此蓝Teal Active#1eaedb按钮悬停背景——亮青3.3 中性色阶Neutral Scale角色色值用途Deep Teal#1c2d38暗色按钮背景、次级暗表面Teal Gray#3d4f58暗色表面上的暗边框Dark Slate#21313c暗色链接文字变体Cool Gray#5c6c75暗色上的弱化文字、次级按钮文字Silver Teal#b8c4c2亮色表面边框、分隔线Light Input#e8edeb暗色表面上的输入文字Pure White#ffffff亮色区背景、暗色上的按钮文字Black#000000亮色表面文字、最暗元素3.4 阴影体系Shadows阴影值用途Forest Shadowrgba(0, 30, 43, 0.12) 0px 26px 44px, rgba(0, 0, 0, 0.13) 0px 7px 13px主卡片抬升——青色染色Standard Shadowrgba(0, 0, 0, 0.15) 0px 3px 20px通用抬升Subtle Shadowrgba(0, 0, 0, 0.1) 0px 2px 4px轻卡片浮动3.5 Token 落地映射上述取值在 tokens.css 的:root中被固化为标准化变量这是 OpenDesign 跨品牌切换可靠性的关键。几个值得注意的落地决策四层前景色阶独立绑定而非别名--fg: #ffffff标题、--fg-2: #e8edeb正文/次级标题、--muted: #b8c4c2说明文字、--meta: #5c6c75元数据/三级标签因为 MongoDB 确实会在暗色表面逐一绘制每一层tokens.css。强调色三元组--accent: #00ed64配--accent-on: #001e2b霓虹绿足够亮深色文字对比度远高于白色与--accent-hover: #00684a品牌自有的暗绿变体而非程序化压暗按下态--accent-active用color-mix(in oklab, var(--accent-hover), black 12%)在 OKLab 色彩空间混合tokens.css。边框单层化--border: #3d4f58--border-soft别名到它因为暗色模式下 MongoDB 不区分卡片边缘与内分隔线两层tokens.css。焦点环品牌化--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)——用品牌霓虹绿以 30% 强度做键盘焦点光晕而不是通用蓝环tokens.css。4. 排版系统三字体 × 四字重的权威层级4.1 字体族Font FamiliesDisplay SerifMongoDB Value Serif——编辑式英雄标题Body / UIEuclid Circular A——几何无衬线主力Code / LabelsSource Code Pro——等宽 大写标签处理FallbacksAkzidenz-Grotesk StdCJK 环境回退 Noto Sans KR/SC/JP、Times、Arial、system-uiToken 侧的实际声明tokens.css为--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;4.2 完整层级表角色字体字号字重行高字距备注Display HeroMongoDB Value Serif96px (6.00rem)4001.20 (紧)normalSerif 权威Display SecondaryMongoDB Value Serif64px (4.00rem)4001.00 (紧)normalSerif 副英雄Section HeadingEuclid Circular A36px (2.25rem)5001.33normal几何精确Sub-headingEuclid Circular A24px (1.50rem)5001.33normal特性标题Body LargeEuclid Circular A20px (1.25rem)4001.60 (松)normal导语BodyEuclid Circular A18px (1.13rem)4001.33normal标准正文Body LightEuclid Circular A16px (1.00rem)3001.50–2.00normal轻字重阅读文本Nav / UIEuclid Circular A16px (1.00rem)5001.00–1.880.16px导航、强调Body BoldEuclid Circular A15px (0.94rem)7001.50normal强强调ButtonEuclid Circular A13.5px–16px500–7001.000.135px–0.9pxCTA 标签CaptionEuclid Circular A14px (0.88rem)4001.71 (松)normal元数据SmallEuclid Circular A11px (0.69rem)6001.82 (松)0.2px标签、注释Code HeadingSource Code Pro40px (2.50rem)4001.60 (松)normal代码展示标题Code BodySource Code Pro16px (1.00rem)4001.50normal代码块Code LabelSource Code Pro14px (0.88rem)400–5001.14 (紧)1px–2pxtext-transform: uppercaseCode MicroSource Code Pro9px (0.56rem)6002.67 (松)2.5pxtext-transform: uppercase字号在 Token 中浓缩为--text-xs: 11px到--text-4xl: 96px的八级刻度tokens.css行高/字距则由--leading-body: 1.5、--leading-tight: 1.2、--tracking-display: normal承载——注意 96px 的 Serif 英雄标题采用normal字距而非负字距靠衬线字形本身传达权威不靠压缩。4.3 排版原则PrinciplesSerif 制造权威MongoDB Value Serif 在英雄尺度上制造了科技行业罕见的编辑感——传达MongoDB 是机构而非创业公司。300 字重作为正文默认Euclid Circular A 用 light(300) 作正文营造轻盈的阅读体验与厚重的暗色背景形成反差。宽字距等宽标签Source Code Pro 大写 1px–3px 字距形成像数据库字段标签一样系统化、结构化、分类化的技术路标。四档字重范围300轻盈正文→ 400标准→ 500UI/导航→ 700加粗 CTA——比多数系统更宽支持更精细的层级控制。在 components.html 中body默认即font-weight: 300.eyebrow类实现了 14px 大写 Source Code Pro 2px 字距 霓虹绿的数据库字段标签components.html与 DESIGN.md §3 的原则逐条对应。5. 组件样式5.1 按钮ButtonsPrimary Green暗色表面背景#00684a暗化的 MongoDB 绿文字#000000圆角50%圆形或 100px药丸边框1px solid #00684a阴影rgba(0,0,0,0.06) 0px 1px 6pxHover缩放 1.1Active缩放 0.85Dark Teal Button背景#1c2d38文字#5c6c75圆角100px药丸边框1px solid #3d4f58Hover背景#1eaedb、文字变白、translateX(5px)Outlined Button亮色表面背景透明文字#001e2b边框1px solid #b8c4c2圆角4px–8pxHover背景着色tint组件夹具中的落地实现components.html略有工程化调整.btn-primary直接以霓虹绿--accent为背景、Forest Black--accent-on为文字对比度远优于白字悬停时沉淀为暗绿--accent-hover.btn-secondary使用深青表面 银青文字悬停时切换为 Teal Active#1eaedb背景白字。这与 DESIGN.md 中 Dark Teal Button 的 hover 逻辑一致。5.2 卡片与容器Cards Containers亮色模式白底 1px solid #b8c4c2边框暗色模式#001e2b或#1c2d38背景 1px solid #3d4f58边框圆角16px标准、24px中等、48px大/英雄阴影rgba(0,30,43,0.12) 0px 26px 44px森林染色图片容器30px–32px 圆角Token 化实现components.html.card使用--surface背景、--border边框、--radius-lg16px圆角、--elev-raised森林阴影、--space-6内边距与--space-3内部间距。30–32px 的图片圆角与 48px 的英雄圆角属于表面特定值在components.html中以内联覆盖方式存在而非全局刻度。5.3 输入与表单Inputs FormsTextarea文字#e8edeb内边距12px 12px 12px 8px边框亮色1px solid #b8c4c2暗色1px solid #3d4f58输入圆角4px工程化细节components.html.field为纵向 flex 布局label 用 14px/500 字重input 背景--surface、文字--fg-2、字重 300:focus-visible时边框切为霓虹绿并叠加品牌焦点环占位符用--meta冷灰。5.4 导航Navigation森林黑背景上的暗色页头导航链接 Euclid Circular A 16px 字重 500MongoDB logo叶子图标 字标左对齐绿色 CTA 药丸按钮右对齐带产品分类的 Mega-menu 下拉5.5 图像处理Image Treatment暗色背景上的仪表盘截图截图中的绿色强调 UI 元素图片容器 30px–32px 圆角产品展示使用全宽暗色区块5.6 标志性组件Distinctive Components霓虹绿强调下划线0px 2px 2px 0px solid #00ed64——bottom right 边框组成的强调下划线用于特性标题与高亮文字另有#006cfa蓝变体组件夹具用渐变实现更平滑的荧光效果components.html.accent-underline通过background-image: linear-gradient(var(--accent), var(--accent)) 100% × 2px 的background-size 底部定位达到 2px 霓虹下划线并带 2px 底部留白。Source Code Label 体系14px 大写 Source Code Pro 1px–2px 字距用作标题上方的区块分类标记形成数据库字段标签美学6. 布局原则6.1 间距系统Spacing System基础单位8px刻度1px, 4px, 7px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 20px, 24px, 32pxToken 落地时文档记录的奇数子档7、14、15、18用于组件内部精细对齐结构节奏交给 schema 的 4/8/12/16/20/24/32/48--space-1到--space-12见 tokens.css。6.2 栅格与容器Grid Container居中最大内容宽度暗色英雄区承载受限内容下方为亮色内容区块卡片栅格2–3 列全宽暗色页脚Token 化--container-max: 1200px三档容器水槽--container-gutter-desktop: 24px/--container-gutter-tablet: 16px/--container-gutter-phone: 12pxtokens.css。6.3 留白哲学Whitespace Philosophy戏剧性模式切换暗青区块到白色内容的切换用对比而非纯粹留白制造内置呼吸感。慷慨的暗色区块暗色英雄与特性区使用额外垂直内边距80px让森林暗背景呼吸。紧凑的亮色区块白色内容区更密集卡片栅格更紧、垂直间距更小。Token 化--section-y-desktop: 96px/--section-y-tablet: 64px/--section-y-phone: 40pxtokens.css桌面端 96px 位于文档记录区间的慷慨一端。6.4 圆角刻度Border Radius Scale档位值用途Minimal1px–2px小 span、徽章Subtle4px输入框、小按钮Standard8px卡片、链接Card16px标准卡片、容器Toggle20px开关元素Large24px大面板Image30px–32px图片容器Hero48px英雄卡片Pill100px–999px按钮、导航药丸Full9999px最大药丸Token 化为四档--radius-sm: 4px、--radius-md: 8px、--radius-lg: 16px、--radius-pill: 9999pxtokens.css。7. 深度与层级Depth Elevation层级处理用途FlatLevel 0无阴影默认表面SubtleLevel 1rgba(0,0,0,0.1) 0px 2px 4px轻卡片浮动StandardLevel 2rgba(0,0,0,0.15) 0px 3px 9px标准卡片ProminentLevel 3rgba(0,0,0,0.15) 0px 3px 20px抬升面板ForestLevel 4rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px英雄卡片——青色染色阴影哲学MongoDB 阴影体系独特之处在于主抬升阴影使用rgba(0, 30, 43, 0.12)——一个青色染色的阴影把森林暗色品牌色带进深度体系。即使在白色表面上阴影也让人觉得属于 MongoDB 的色彩世界而非通用的中性黑。Token 侧实现了--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)与--elev-raised森林双阴影见 tokens.css。8. Dos 与 DontsDo应做暗色区块使用#001e2b森林黑而非纯黑MongoDB Green#00ed64少量使用换取最大电光冲击MongoDB Value Serif只用于英雄/展示标题——其余一律 Euclid Circular ASource Code Pro 大写 宽字距1px–3px用于技术标签主卡片抬升使用青色染色阴影rgba(0,30,43,0.12)维持暗/亮区块二元性——模式间戏剧性对比正文使用 300 字重——轻盈字重才是可读之声主行动按钮使用药丸圆角100pxDont禁忌不要用纯黑#000000做暗色背景——永远用青黑#001e2b不要把 MongoDB Green#00ed64用在背景上——它是文字、下划线与小高亮的强调色不要用标准灰阴影——永远用青色染色rgba(0,30,43,...)不要把衬线字体用于正文——MongoDB Value Serif 仅限英雄标题不要在 Source Code Pro 标签上用窄字距——宽字距本身就是身份不要在同一个区块内混用暗色与亮色处理不要用暖色——调色板严格为冷色青、绿、蓝不要忘记绿色强调下划线——它是标志性装饰元素9. 响应式行为断点Breakpoints名称宽度关键变化Mobile Small425px紧密单列Mobile425–768px标准移动端Tablet768–1024px2 列栅格开始Desktop1024–1280px标准布局Large Desktop1280–1440px扩展布局Ultra-wide1440px最大宽度、宽松边距触控目标Touch Targets药丸按钮带慷慨内边距导航链接 16px 且间距充足卡片表面作为全区域触控目标折叠策略Collapsing StrategyHeroMongoDB Value Serif 96px → 64px → 进一步缩放组件夹具实际为 96px → 64px → 44px见 components.html导航横向 mega-menu → 汉堡菜单特性卡片多列 → 堆叠暗/亮区块在任何尺寸都保持各自模式Source Code Pro 标签保持大写处理图片行为Image Behavior仪表盘截图按比例缩放暗色区块背景保持全宽图片圆角跨断点保持容器水槽与区块垂直节奏在断点下由 Token 统一降档1023px 以下切到--container-gutter-tablet与--section-y-tablet639px 以下切到手机档components.html。10. Agent 提示词指南10.1 快速颜色参考暗色背景Forest Black#001e2b品牌强调MongoDB Green#00ed64功能性绿色Dark Green#00684a链接蓝Action Blue#006cfa亮色文字Black#000000暗色文字White#ffffff或 Light Input#e8edeb亮色边框Silver Teal#b8c4c2暗色边框Teal Gray#3d4f5810.2 组件提示词示例可直接复制使用的提示词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.Build a dark section: #001e2b background, 1px solid #3d4f58 border on cards. White text. MongoDB Green (#00ed64) accent underlines on headings using bottom-border 2px solid.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).10.3 迭代指南Iteration Guide从模式决策开始hero/特性用暗色#001e2b内容用白色MongoDB Green#00ed64是电光——每区块只用一次换取最大冲击Serif 标题MongoDB Value Serif制造编辑权威——绝不用于正文300 字重正文制造轻盈阅读体验——不要默认用 400Source Code Pro 大写 宽字距做技术标签——数据库之声青色染色阴影让一切留在 MongoDB 色彩世界中11. 在 OpenDesign 中的使用方式根据 USAGE.mdAgent 与审查者的推荐阅读/使用顺序为先读 USAGE.md 理解包契约再读 DESIGN.md 理解视觉意图、约束与反模式将 tokens.css 粘贴进第一个产物的style块作为:rootToken 块之后才写组件 CSS用 components.manifest.json 获取精简组件清单需要精确选择器与状态时打开 components.html需要视觉抽查时查看preview/下的 colors / typography / spacing 页面。使用纪律保留 schema Token 名称原样保证跨品牌切换可靠--accent只用于主操作、链接、焦点态与一个明确的焦点元素优先复用 manifest 中的组件组而非发明新控件避免在:rootToken 块之外使用裸十六进制色值不要独立于tokens.css重定义 Tailwind 或 design-token 值不要声称存在上游品牌源码证据本包基于策展夹具整理。如需将 Token 接入 Tailwind v4tailwind-v4.css 提供了现成桥接import ./tokens.css后在theme中把--color-bg、--color-accent、--font-display、--text-4xl、--spacing-*、--radius-pill、--shadow-raised等逐一映射为 Tailwind 主题变量即可获得bg-bg、text-accent、font-display、text-4xl、rounded-pill、shadow-raised等原子类。结语把数据库公司的气质变成可执行的 TokenMongoDB 设计系统在 OpenDesign 中是一份极其完整的视觉 DNA它不是零散的颜色清单而是一套自洽的决策系统——森林黑画布规定了暗色世界不落纯黑、霓虹绿规定了强调色的使用纪律、Serif 英雄标题规定了字体分工、青色染色阴影把品牌色渗透进纵深体系、宽字距大写等宽标签定义了数据库字段式的技术路标。配合 tokens.css 的 56 个标准化变量与 components.html 的 9 组组件实现你既能手工复刻这套风格也能把 DESIGN.md 中的提示词直接交给编码 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点击查看免费下载相关推荐OpenDesign Neon 设计系统实战指南高对比霓虹视觉语言的规范解析与落地实现OpenDesign Neon 设计系统实战指南高对比霓虹视觉语言的规范解析与落地实现 本文基于 OpenDesign 仓库中 design systems/AI 应用人工智能AI 技能设计系统媒体生成OpenDesign 中的 Airtable 设计系统从品牌视觉语言到可落地的 CSS Token 工程实践OpenDesign 中的 Airtable 设计系统从品牌视觉语言到可落地的 CSS Token 工程实践 Airtable 设计系统是 OpenDesigAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 中的 Airbnb 设计系统包从品牌视觉规范到 Design Token 落地的完整实战指南OpenDesign 中的 Airbnb 设计系统包从品牌视觉规范到 Design Token 落地的完整实战指南 导读 本文以 design systemsAI 应用人工智能AI 技能设计系统媒体生成上一篇Gotenberg安全配置完全指南保护你的文档转换API下一篇MiniBlink 49 内嵌 PDFium 的 PWL 控件库AcroForm 表单控件的类体系与外观流渲染创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考