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/sentry/DESIGN.md 展开完整解析 Sentry 风格设计系统的视觉语言深紫黑画布、暖紫强调色、青柠绿高亮、Dammit Sans Rubik Monaco 三字体体系并结合 tokens.css、components.html 与 token-schema.ts 等源码文件说明这套设计规范如何被落成可复制的 CSS 变量、可校验的组件清单以及如何把设计意图转化为可直接交给 AI Agent 的生成提示词。1. 设计系统定位为后端与数据场景打造的暗色 IDE 美学在 OpenDesign 的 design-systems 目录中Sentry 风格被归类为Backend Data类别一句话概括其气质Error monitoring. Dark dashboard,>--font-display: Dammit Sans, Rubik, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif; --font-body: Rubik, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif; --font-mono: Monaco, Menlo, Ubuntu Mono, ui-monospace, monospace;对比 defaults.css 中共享 schema 的等宽字体默认值ui-monospace, SF Mono, ...Sentry 包刻意把 Monaco 提到首位——DESIGN.md §1 明确把 Monaco 选为开发者工具三件套的一员。3.2 字号层级表RoleFontSizeWeightLine HeightLetter SpacingNotesDisplay HeroDammit Sans88px (5.50rem)7001.20 (tight)normal最大冲击力品牌声线Display SecondaryDammit Sans60px (3.75rem)5001.10 (tight)normal次级 Hero 文本Section HeadingRubik30px (1.88rem)4001.20 (tight)normal主要章节标题Sub-headingRubik27px (1.69rem)5001.25 (tight)normal功能区块标题Card TitleRubik24px (1.50rem)5001.25 (tight)normal卡片与区块标题Feature TitleRubik20px (1.25rem)6001.25 (tight)normal强调功能名BodyRubik16px (1.00rem)4001.50normal标准正文Body EmphasisRubik16px (1.00rem)500–6001.50normal加粗正文、导航项Nav LabelRubik15px (0.94rem)5001.40normal导航链接Uppercase LabelRubik15px (0.94rem)5001.25 (tight)normaltext-transform: uppercaseButton TextRubik14px (0.88rem)500–7001.14–1.29 (tight)0.2pxtext-transform: uppercaseCaptionRubik14px (0.88rem)500–7001.00–1.430.2px常为大写Small CaptionRubik12px (0.75rem)6002.00 (relaxed)normal细微标注Micro LabelRubik10px (0.63rem)6001.80 (relaxed)0.25pxtext-transform: uppercaseCodeMonaco16px (1.00rem)400–7001.50normal代码块、技术文本3.3 排版原则双重人格Dammit Sans 在展示尺度带来不羁的品牌性格Rubik 负责一切功能性文本的干净专业。大写字母系统化按钮、说明、标签、微文本统一text-transform: uppercase 0.2–0.25px 字距形成整套技术标签模式。字重分层Rubik 四档字重——400正文、500强调/导航、600标题、700按钮/CTA。标题紧凑、正文舒展所有标题行高 1.10–1.25正文 1.50小号说明在极小时放宽到 2.00。在 components.html 中可以看到实现对照h1使用var(--text-4xl)88px weight 700 var(--tracking-display)h2使用var(--text-2xl)30px weight 400.eyebrow类实现 10px 大写 0.2px 字距的技术标签模式.eyebrow-pop则用#c2ef4e青柠绿承载每屏一次的 pop 强调。4. 组件样式4.1 按钮三态体系Primary Muted Purple主力哑光紫按钮背景#79628crgb(121,98,140)文本#ffffff大写14px字重 500–700字距 0.2px边框1px solid #584674圆角 13px阴影rgba(0,0,0,0.1) 0px 1px 3px 0px inset触感内阴影悬停抬升阴影rgba(0,0,0,0.18) 0px 0.5rem 1.5remGlass White毛玻璃按钮背景rgba(255,255,255,0.18)磨砂玻璃文本#ffffff内边距 8px圆角 12px左对齐变体为12px 0px 0px 12px阴影rgba(0,0,0,0.08) 0px 2px 8px悬停背景rgba(54,22,107,0.14)用途暗色表面上的次要操作White Solid白色实心 CTA背景#ffffff文本#1f1633内边距 12px 16px圆角 8px悬停背景过渡到#6a5fc1文本转白焦点背景#ffb287珊瑚色描边rgb(106,95,193) solid 0.125rem用途暗背景上的高可见度 CTADeep Violet下拉/选择器背景#422082文本#ffffff内边距 8px 16px圆角 8pxcomponents.html 的实现把上述三种形态落为.btn基础大写 0.2px 字距 var(--motion-fast)过渡、.btn-primary白底 → hover 转 Sentry Purple、.btn-secondary哑光紫 1px solid #584674 inset 阴影 → hover 时color-mix(in oklab, #79628c, white 6%)提亮并抬升阴影。--focus-ring统一由.btn:focus-visible的box-shadow承载。4.2 输入框背景#ffffff文本#1f1633边框1px solid #cfcfdb内边距 8px 12px圆角 6px焦点态边框色保持#cfcfdb阴影rgba(0,0,0,0.15) 0px 2px 10px inset注意其设计意图在暗色画布上使用白色输入框background: var(--fg)与整体暗色形成强对比的亮色语境。4.3 链接暗色背景默认#ffffff 下划线装饰悬停过渡到#6a5fc1Sentry Purple紫色链接默认#6a5fc1悬停下划线青柠绿链接默认#c2ef4e悬停转#6a5fc1暗色语境链接默认#362d59悬停转#ffffff4.4 卡片与容器背景半透明或暗紫表面var(--surface)圆角 8–12px阴影rgba(0,0,0,0.1) 0px 10px 15px -3px玻璃效果 backdrop-filterblur(18px) saturate(180%)components.html 的.card使用var(--surface)1px solid var(--border)var(--radius-lg)var(--elev-raised)卡片内链接默认var(--accent)、悬停转var(--fg)。4.5 导航深色透明头部覆盖在 Hero 内容之上导航链接 Rubik 15px 字重 500白色文本悬停转 Sentry Purple#6a5fc1分类标签大写 0.2px 字距移动端汉堡菜单 全宽展开5. 布局原则5.1 间距系统基准单位8px刻度1px、2px、4px、5px、6px、8px、12px、16px、24px、32px、40px、44px、45px、47pxtokens.css 将间距归一为共享 schema 的--space-1(4px) 到--space-12(48px) 八档符合 defaults.css 中4px 网格基准的约定文档中出现的 5/12/40px 等中间档位在 components.html 中以内联值按组件落地。5.2 网格与容器最大内容宽度1152pxXL 断点响应式内边距2rem移动端→ 4rem平板及以上内容居中于容器内全宽暗色区块 内部约束内容5.3 断点表NameWidthKey ChangesMobile 576px单列、堆叠布局Small Tablet576–640px小幅宽度调整Tablet640–768px开始 2 列Small Desktop768–992px完整导航可见Desktop992–1152px标准布局Large Desktop1152–1440px最大宽度内容components.html 中的容器实现与断点一一对应.container用max-width: var(--container-max)居中padding-inline按断点切换--container-gutter-desktop/tablet/phone64/32/24pxsection的padding-block按断点切换--section-y-desktop/tablet/phone80/64/48px。5.4 留白哲学暗色呼吸感区块间 64–80px 的垂直间距让暗色背景成为视觉休息区内容孤岛功能区块像漂浮在暗紫海面上的自足容器非对称内边距按钮使用 12px 16px、8px 12px 等非对称内边距显得自然而非僵硬5.5 圆角刻度最小 6px表单输入、小型交互元素标准 8px按钮、卡片、容器舒适 10–12px大型容器、玻璃面板圆润 13px主力哑光按钮药丸 18px图片容器、徽章tokens.css 将此归一为--radius-sm: 6px比 schema 默认 8px 收窄因为输入框是文档明确给出的 6px 下限、--radius-md: 8px、--radius-lg: 12px、--radius-pill: 9999px13px 与 18px 属于形状特定值保留为组件内联而非结构 token。6. 深度与层级ElevationLevelTreatmentUseSunken (Level -1)Inset shadowrgba(0,0,0,0.1) 0px 1px 3px inset主按钮可按压触感Flat (Level 0)无阴影默认表面、暗色背景Surface (Level 1)rgba(0,0,0,0.08) 0px 2px 8px玻璃按钮、轻卡片Elevated (Level 2)rgba(0,0,0,0.1) 0px 10px 15px -3px卡片、浮动面板Prominent (Level 3)rgba(0,0,0,0.18) 0px 0.5rem 1.5rem悬停态、模态框Ambient (Level 4)rgba(22,15,36,0.9) 0px 4px 4px 9pxHero 周围深紫环境辉光阴影哲学Sentry 独特地组合了内阴影按钮像被按进表面与环境辉光内容像从暗背景中辐射出来。深紫环境阴影rgba(22,15,36,0.9)是签名元素——它制造一种生物发光感内容似乎在发出自带的紫色光。在 token 落地时tokens.css--elev-raised精确复刻 Level 2 的卡片阴影而 Level -1 的内阴影与 Level 4 的环境辉光是品牌签名处理故意不编码进共享抬升层——否则每张卡片都会被环境辉光过度笼罩。--elev-flat与--elev-ring则继承 schema 默认。7. Dos 与 Donts规范红线应当遵循使用深紫背景#1f1633、#150f23——绝不用纯黑#000000主按钮使用内阴影制造可按压触感Dammit Sans只用于 Hero/展示标题其余全部使用 Rubik按钮与标签应用text-transform: uppercaseletter-spacing: 0.2px青柠绿#c2ef4e克制使用以换取最大冲击力每屏最多一次用blur(18px) saturate(180%)实现分层表面的毛玻璃效果保持紫色调阴影——阴影应是紫色调的而非中性灰遵循 Rubik 四档字重400正文、500导航/强调、600标题、700CTA严禁违反禁止用纯黑#000000做背景——永远使用暖紫黑禁止把 Dammit Sans 用于正文或 UI 元素——仅限展示禁止用标准灰#666、#999做边框——用紫色调灰#362d59、#584674禁止去掉按钮的大写处理——这是全系统模式禁止用尖角0px 圆角——所有交互元素最小 6px禁止在同一个组件里混用青柠绿与珊瑚/粉强调色禁止主按钮使用平面非内嵌阴影——触感是签名禁止忘记大写文本的字距——最小 0.2px8. 响应式行为断点与策略NameWidthKey ChangesMobile 576px单列、汉堡导航、堆叠 CTATablet576–768px功能网格开始 2 列Small Desktop768–992px完整导航、并排布局Desktop992–1152px最大宽度容器、完整布局Large 1152px内容保持最大宽度、宽松边距折叠策略Hero 文本88px Dammit Sans → 60px → 移动端继续缩放导航横向 → 汉堡 滑出功能区块并排 → 堆叠卡片按钮行内 → 移动端全宽堆叠容器内边距4rem → 2rem9. 源码级落地从 DESIGN.md 到可校验的包DESIGN.md 不是一份孤立的视觉说明它在 OpenDesign 的 Design System 2.0 体系中被落实为一套可被 Agent 消费、可被机器校验的包结构读取顺序见 USAGE.mddesign-systems/sentry/ ├── DESIGN.md # 视觉意图、约束与反模式本文主体 ├── USAGE.md # 包契约与阅读顺序 ├── manifest.json # 包清单schemaVersion: od-design-system-project/v1 ├── tokens.css # 共享 schema 的 CSS 变量绑定源真相 ├── tailwind-v4.css # 从 tokens.css 派生的 Tailwind v4 theme 绑定 ├── design-tokens.json # 派生 token 输出 ├── components.html # 参考组件实现55 个选择器 / 27 个类 ├── components.manifest.json # 组件清单9 个组件组 token 引用审计 ├── preview/ # colors / typography / spacing 预览页 └── source/ # evidence.md token-contract.report.json 审计证据9.1 Token 分层A1 / A2 / B-slottokens.schema.ts 定义了所有品牌共享的 token 分层契约TokenLayerA1-identity--bg、--fg、--accent、字体栈等——token 即品牌无跨品牌默认值品牌必须自行创作A1-structure字号阶梯--text-xs~--text-4xl、行高、容器宽度、区块节奏——结构性决策按品牌差异设计A2--accent-on、--success/warn/danger、间距/圆角/阴影/动效等——在最终 tokens.css 中必需但fallback字段提供合理默认镜像在 defaults.cssB-slot--surface-warm、--fg-2、--meta、--border-soft等跨品牌槽位通过var()别名解析。Sentry 包对 A2 默认值的偏离是文档与实现互证的典型范例schema 默认--radius-sm: 8px而 Sentry 收紧为6pxschema 默认焦点环是 3px alpha 光晕Sentry 改为0 0 0 2px var(--accent)的锐利 2px 实线——每次偏离都能在 tokens.css 头部注释中找到对 DESIGN.md 章节的精确引用。9.2 组件清单与 token 引用审计components.manifest.json 对 components.html 做了机器可读的盘点9 个组件组buttons、inputs、cards、badges、links、keyboard、icons、typography、layout、55 个选择器、27 个类、26 个元素并给出每个组引用的 token 清单如 buttons 组引用--accent、--accent-on、--fg、--focus-ring。它还审计了 token 的 declared / referenced / unused / undeclared 四方状态——--accent-hover等被声明但未被组件引用的 token 会被标记为 unused而被引用却未声明undeclaredReferenced为零保证了规范的封闭一致性。9.3 派生产物与审计证据source/evidence.md 明确声明本包基于 OpenDesign 策展的 bundled fixture 派生不声称对上游品牌仓库做过新抓取token-contract.report.json把每个 TOKEN_SCHEMA 绑定映射回 tokens.css 的声明行design-tokens.json与tailwind-v4.css是派生输出应从报告与 token 样式表重新生成而非手工编辑。10. Agent Prompt 指南把设计系统喂给生成式 Agent10.1 快速颜色参考背景#1f1633主、#150f23更深文本#ffffff主、#e5e7eb次级交互#6a5fc1链接/悬停、#79628c按钮强调#c2ef4e青柠高亮、#ffb287珊瑚焦点边框#362d59暗色、#cfcfdb亮色语境10.2 组件级提示词模板可直接复用Hero 区Create a hero section on deep purple background (#1f1633). Headline at 88px Dammit Sans weight 700, line-height 1.20, white text. Sub-text at 16px Rubik weight 400, line-height 1.50. White solid CTA button (8px radius, 12px 16px padding), hover transitions to #6a5fc1.导航栏Design a navigation bar: transparent over dark background. Rubik 15px weight 500, white text. Uppercase category labels with 0.2px letter-spacing. Hover color #6a5fc1.主按钮Build a primary button: background #79628c, border 1px solid #584674, inset shadow rgba(0,0,0,0.1) 0px 1px 3px, white uppercase text at 14px Rubik weight 700, letter-spacing 0.2px, radius 13px. Hover: shadow rgba(0,0,0,0.18) 0px 0.5rem 1.5rem.玻璃卡片Create a glass card panel: background rgba(255,255,255,0.18), backdrop-filter blur(18px) saturate(180%), radius 12px. White text content inside.功能区块Design a feature section: #150f23 background, 24px Rubik weight 500 heading, 16px Rubik weight 400 body text. 14px uppercase lime-green (#c2ef4e) label above heading.10.3 迭代指南生成器的执行顺序永远从暗紫背景开始——整套色板就是为暗色模式构建的按钮用内阴影、Hero 区用环境紫光大写 字距是标签、按钮、说明的系统性模式青柠绿#c2ef4e是pop色——每个区块最多一次覆盖面板用毛玻璃主表面用实心紫Rubik 承担 90% 的排版Dammit Sans 仅限 Hero。在 OpenDesign 的工作流中Agent 生成 artifact 的标准做法见 USAGE.md是把 tokens.css 的:root块原样粘贴到首个style块之后所有样式一律通过var(--*)引用避免在组件 CSS 中散落裸 hex组件优先复用components.manifest.json中已有的组件组视觉检查可打开preview/下的 colors、typography、spacing 三个预览页。配套的 lint 强制见 tokens.css 头注释引用的apps/daemon/src/lint-artifact.ts会校验--accent每屏最多两次可见使用等规则确保生成的界面在规范正确与视觉统一两个维度同时达标。11. 一页速查给实现者的最终检查表背景只用#1f1633/#150f23禁止纯黑边框只用紫色调灰#362d59、#584674禁止#666/#999交互一律走--accent#6a5fc1青柠绿每屏最多一次按钮 大写 0.2px 字距 内阴影触感是签名焦点 2px 实线--accent环不用 alpha 辉光标题行高 1.2、正文 1.5Dammit Sans 仅限 Hero容器最大 1152px区块垂直节奏 80/64/48px圆角从 6px输入到 9999px药丸交互元素最小 6px生成 artifact 时先粘贴:roottoken 块再写组件 CSS禁止裸 hex。赞分享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 Mission Control 设计系统实战深空指挥中心风格的暗色运维监控界面OpenDesign Mission Control 设计系统实战深空指挥中心风格的暗色运维监控界面 导读 本文以 OpenDesign 仓库内置的 misAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 中的 Kraken 设计系统实战指南紫罗兰金融暗色界面的视觉规范与 Token 落地OpenDesign 中的 Kraken 设计系统实战指南紫罗兰金融暗色界面的视觉规范与 Token 落地 本指南以 design systems/krakeAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 的 OpenCode 设计系统包使用指南终端原生暗色主题的 Token 契约与 Agent 集成实践OpenDesign 的 OpenCode 设计系统包使用指南终端原生暗色主题的 Token 契约与 Agent 集成实践 导读 design systemsAI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考