OpenDesign 中的 Discord 设计系统包从 Blurple 令牌到深色优先聊天界面的完整还原指南【免费下载链接】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/discord 设计系统包展开它不依赖对上游 Discord 品牌仓库的重新抓取而是通过一份经过整理的DESIGN.md、一份tokens.css和一份components.html固定夹具完整记录了深色优先的聊天气氛、Blurple 强调色、gg sans 字体系统和三层深度阶梯等特征。阅读本文后你将了解该包的证据链结构、每个语义令牌的契约含义以及如何直接将其用于自己的 Agent 驱动的原型、落地页和仪表盘构建中。文章末尾会说明如何按包内使用指南的顺序来应用这些资产。1. 包的作用域与来源边界Discord 包是 OpenDesign 设计系统目录中 151 个捆绑包之一。每个捆绑包共享相同的最小机器可读结构design-systems/slug/ ├── manifest.json ├── DESIGN.md └── tokens.css对于discord包manifest.json 声明了schemaVersion: od-design-system-project/v1、id: discord、category: Productivity SaaS并将包标记为type: bundled来源为 OpenDesign curated bundled fixture。这正是本包及 design-systems/README.md 中描述的所有捆绑包最重要的来源边界它声称的是来源范围而不是完整的上游爬取。包内多个证据文件包括 source/evidence.md 和token-contract.report.json中的reason字段都反复强调了这一点no upstream recrawl was performed for this backfill。在撰写文档、复现流程或审计此包时永远不要声称存在上游原始来源证据。1.1 固定夹具清单source/evidence.md列出了三个固定夹具文件它们共同构成了包的组成部分DESIGN.md — 面向 Agent 的视觉意图、约束和反模式的规范散文。tokens.css — 规范编译后的语义令牌样式表。components.html — 独立的组件固定夹具。源区域还包含了支持性证据和派生工件source/ ├── evidence.md ← 来源范围声明本文件 ├── token-contract.report.json ← TOKEN_SCHEMA 契约报告 └── tokens.source.json ← 导入器的原始令牌快照在包根目录下你会发现运行时派生产物design-tokens.json派生 Design Tokens JSON、tailwind-v4.css派生 Tailwind v4 映射、components.manifest.json派生组件/令牌索引以及preview/下的colors.html、typography.html、spacing.html预览页面。根据 manifest.json 中的files和sourceFiles映射source/token-contract.report.json被声明为report字段。2. 令牌契约TOKEN_SCHEMA 报告如何绑定tokens.cssevidence.md中的关键技术陈述是source/token-contract.report.jsonmaps every TOKEN_SCHEMA binding back to the committedtokens.cssdeclaration line。换句话说审计报告将每个令牌名与它在tokens.css中的确切声明行号对应起来。打开 token-contract.report.json 后可以看到{ name: --bg, layer: A1-identity, value: #313338, confidence: high, reason: Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill., sources: [tokens.css:32], sourceName: --bg }这里的layer字段揭示了包的语义令牌架构。报告汇总将 56 个令牌按以下方式分组层数量含义A1-identity8品牌身份令牌--bg、--surface、--fg、--muted、--border、--accent、--font-display、--font-bodyA1-structure18结构令牌类型比例、行高、字距、区块节奏、容器与装订线A226派生或插槽级令牌--accent-hover、状态色、间距、半径、阴影、动效B-slot4额外插槽绑定--surface-warm、--fg-2、--meta、--border-soft所有 56 个声明令牌都得到了来源支持sourceBackedTokens: 56全部confidence: high其中 26 个是 A1 来源令牌26 个是回退令牌0 个是别名令牌。因此该报告对总分为 100 的评分给出了grade: excellent并设置recommendRebuild: false。可操作的维护契约evidence.md明确规定design-tokens.json和tailwind-v4.css是派生输出should be regenerated from the report and token stylesheet rather than edited by hand。tailwind-v4.css 第一行的注释将tokens.css标记为真相来源design-systems/README.md 的包质量部分确认了同样的三向派生规则components.manifest.json来自components.htmltokens.cssdesign-tokens.json来自令牌契约报告且必须与tokens.css一致tailwind-v4.css来自tokens.css。任何独立的重新定义都是 USAGE.md 中明确禁止的。3. 视觉主题深色优先的聊天表面包的DESIGN.md将 Discord 描述为为夜间、突袭和群组语音而打造的体验因此整个表面都是深色优先的。其核心是三层深度阶梯完全依靠亮度而非色相变化来分层层令牌值角色最深处--surface-warm#1e1f22服务器列表轨道、最深背景中间--surface#2b2d31频道侧边栏、设置侧边栏主表面--bg#313338聊天表面、消息列浮动层弹出框、工具提示、自动补全使用#111214。悬停和选中叠加使用半透明白色修饰符rgba(78, 80, 88, 0.3)和rgba(78, 80, 88, 0.6)。深色主题的文本色阶从--fg-2#f2f3f5标题到--fg#dbdee1正文比纯白稍冷再到--muted#949ba4时间戳、元数据和--meta#80848e不活跃的频道名。链接是天空蓝#00a8fc刻意与 Blurple 区分开来。3.1 唯一的饱和强调色Blurple--accent为#5865f2用于品牌标记、主要 CTA、提及和“你”的提示——刻意少量使用以便在柔和的中性色背景上凸显。它的配套状态为--accent-on: #ffffff; /* 文字/图标颜色 */ --accent-hover: #4752c4; /* 悬停/激活状态 */ --accent-active: color-mix(in oklab, var(--accent), black 14%); /* 按需按下状态 */3.2 语义状态与分割线状态色在线#23a55a--success、空闲#f0b232--warn、勿扰#f23f43--danger同时作为破坏性红色、串流#593695、离线#80848e。提及高亮rgba(88, 101, 242, 0.1)的柔和 Blurple 水洗。分割线--borderrgba(255, 255, 255, 0.06)用于标准深色模式分割线--border-soft#3f4147用于卡片实线边框。轻量主题表面#ffffff/#f2f3f5/#e3e5e8。4. 排版gg sans 与基于字重对比的层级4.1 字体族--font-display: gg sans, Helvetica Neue, Helvetica, Arial, sans-serif; --font-body: gg sans, Helvetica Neue, Helvetica, Arial, sans-serif; --font-mono: gg mono, Consolas, Andale Mono, Courier New, Courier, monospace;gg sans被定位为自定义 Whitney 替代字体采用友好的几何造型显示/传统角色回退到 Whitney在令牌级别由gg sans覆盖。4.2 层级表来自DESIGN.md§Typography Hierarchy角色字体大小字重行高字距说明显示英雄gg sans56px (3.5rem)8001.1-0.02em营销英雄区页面标题gg sans24px (1.5rem)7001.25normal设置/个人资料标题频道名gg sans16px (1rem)6001.25normal#general频道标题消息正文gg sans16px (1rem)4001.375normal标准聊天文本用户名gg sans16px (1rem)5001.25normal消息作者时间戳gg sans12px (0.75rem)5001.25normal“今天下午 4:32”侧边栏频道gg sans16px (1rem)5001.25normal频道列表行服务器名gg sans16px (1rem)6001.25normal服务器头部说明/元信息gg sans12px (0.75rem)4001.30.02em状态文本、已编辑标签行内代码gg mono0.875em400inheritnormal行内code代码块gg mono14px (0.875rem)4001.5normal三反引号围栏块令牌文件将这一规模编码为--text-xs(12) →--text-sm(14) →--text-base(16) →--text-lg(18) →--text-xl(20) →--text-2xl(24) →--text-3xl(32) →--text-4xl(56)并配套--leading-body: 1.375、--leading-tight: 1.10和--tracking-display: -0.02em。components.html在 H2/H3 上应用了品牌微调h2使用line-height: 1.20h3使用line-height: 1.25。4.3 原则友好几何gg sans 在 a/g/s 上使用圆角端子在不破坏可读性的前提下传递温暖感。字重对比优于颜色对比层级来自 400→500→600→700→800 的字重阶跃表面保持中性。16px 正文永不缩小密度来自行高1.375而不是字体大小。5. 组件样式按钮、输入、服务器图标、状态点、卡片、提及components.html是一个独立的固定夹具其可见的每个值都来自tokens.csscomponents.manifest.json 记录了 38 个选择器、17 个类、21 个元素以及一个包含 buttons、inputs、cards、links、typography 和 layout 组的分组。它还将--accent-active、--danger、--elev-*、--radius-pill、--success、--warn、--text-xl等列为已声明但未使用的令牌并报告undeclaredReferenced: []没有悬空引用。5.1 按钮变体背景文字悬停用法Primary#5865f2#ffffff#4752c4主要 CTA、“继续”、“加入服务器”Secondary#4e5058#ffffff#6d6f78次要操作Tertiarytransparent#dbdee1文字加下划线链接式操作Danger#da373c#ffffff#a12d2f破坏性操作共享.btn底座padding: 8px 16px、border-radius: var(--radius-sm)、font-weight: 500、transition: background-color var(--motion-fast) var(--ease-standard):focus-visible使用box-shadow: var(--focus-ring)0 0 0 3px rgba(88, 101, 242, 0.3)。5.2 输入框背景#1e1f22文字#dbdee11px solid #1e1f22边框border-radius: 4pxpadding: 10px 12px聚焦时边框切换到 Blurple#5865f2。标签大写、font-weight: 600、letter-spacing: 0.04em、颜色var(--fg-2)。占位符使用var(--muted)。5.3 服务器图标与状态点48×48px默认border-radius: 16px圆角方形悬停和激活时过渡到 50%。转换使用var(--motion-base)200ms缓动cubic-bezier(0.215, 0.61, 0.355, 1)。活跃状态图标列左边缘有一个 4px 白色药丸。10×10px 状态点带 3px 背景色三级边框产生“缺口”效果定位在头像右下角。绿 在线黄 空闲红 勿扰灰 离线。5.4 卡片 / 嵌入背景#2b2d31深色或#f2f3f5浅色4px 左侧强调色边框border-radius: 4pxpadding: 8px 16px。令牌级.card规则使用var(--surface)1px solid var(--border-soft)var(--radius-md)var(--space-6)内边距。5.5 提及药丸背景rgba(88, 101, 242, 0.3)文字#c9cdfbpadding: 0 2pxborder-radius: 3px——在components.html的 hero 卡片中batch-2提及固定夹具中可见。6. 间距、布局与动效6.1 间距基础单位是 4px比例 4、8、12、16、20、24、32、40编码为--space-1到--space-12。区块节奏桌面端 80px平板端 48px手机端 32px--section-y-*。6.2 布局尺寸服务器轨道固定 72px 宽固定夹具中使用.server-rail表达background: var(--surface-warm)。频道侧边栏240px。成员列表桌面端 240px。聊天列弹性最小 380px。容器使用--container-max: 1200px装订线在components.html媒体查询中自适应桌面端 24px、平板端 16px≤1023px、手机端 16px≤639px。6.3 动效悬停 200ms头像圆形变形 350ms工具提示淡入淡出 80ms。头像变形缓动cubic-bezier(0.215, 0.61, 0.355, 1)干脆然后回落。通知脉冲1.4sease-in-out无限循环作用于未读提及指示器。令牌级--motion-fast: 80ms、--motion-base: 200ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)。7. 使用护栏反模式DESIGN.md§Usage Guardrails 和 USAGE.md 中的 “Avoid” 列表共同构成了允许性边界保留深色外壳、紧凑密度和 Blurple 动作层级在浅色营销式布局中使用 Blurple 会破坏 Discord 产品感。保持以导航为主的表面围绕轨道、侧边栏和聊天列构建而不是使用孤立的装饰卡片。使用圆角方形头像和状态点语言来表示人、服务器或在线状态。在复制的:root令牌块之外避免原始十六进制值。避免独立于tokens.css重新定义 Tailwind 或设计令牌值。避免声称存在上游原始来源证据此包基于整理的捆绑固定夹具。避免添加components.html或DESIGN.md中未表示的组件配方。8. 在 OpenDesign 中应用此包USAGE.md建议按此顺序阅读然后使用首先阅读 USAGE.md 以了解包契约。阅读 DESIGN.md 了解视觉意图、约束和反模式。在编写组件 CSS 之前将 tokens.css 粘贴到第一个产物style块中。使用 components.manifest.json 作为紧凑的组件清单在需要精确选择器或状态时打开 components.html。当视觉健全性检查有用时检查 preview 页面colors.html、typography.html、spacing.html。保留模式令牌名--bg、--surface、--accent等至关重要“Preserve the schema token names exactly so cross-brand switching stays reliable”。将--accent用于主要操作、链接、焦点状态以及一个清晰的焦点元素。在发明新控件之前从components.manifest.json中复用组件组。将source/文件视为捆绑固定夹具回填的审计证据。在平台层面目录的运行时行为也适用目录在每次/api/design-systems请求时都会被扫描因此无需重启守护进程包质量防护会验证声明的路径、丰富档案、派生文件一致性、令牌契约、组件固定夹具、来源证据和预览覆盖范围详细编写规则见 design-systems/README.md 和 docs/design-systems.md。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 OpenDesign 中的 Discord 设计系统包：从 Blurple 令牌到深色优先聊天界面的完整还原指南
OpenDesign 中的 Discord 设计系统包从 Blurple 令牌到深色优先聊天界面的完整还原指南【免费下载链接】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/discord 设计系统包展开它不依赖对上游 Discord 品牌仓库的重新抓取而是通过一份经过整理的DESIGN.md、一份tokens.css和一份components.html固定夹具完整记录了深色优先的聊天气氛、Blurple 强调色、gg sans 字体系统和三层深度阶梯等特征。阅读本文后你将了解该包的证据链结构、每个语义令牌的契约含义以及如何直接将其用于自己的 Agent 驱动的原型、落地页和仪表盘构建中。文章末尾会说明如何按包内使用指南的顺序来应用这些资产。1. 包的作用域与来源边界Discord 包是 OpenDesign 设计系统目录中 151 个捆绑包之一。每个捆绑包共享相同的最小机器可读结构design-systems/slug/ ├── manifest.json ├── DESIGN.md └── tokens.css对于discord包manifest.json 声明了schemaVersion: od-design-system-project/v1、id: discord、category: Productivity SaaS并将包标记为type: bundled来源为 OpenDesign curated bundled fixture。这正是本包及 design-systems/README.md 中描述的所有捆绑包最重要的来源边界它声称的是来源范围而不是完整的上游爬取。包内多个证据文件包括 source/evidence.md 和token-contract.report.json中的reason字段都反复强调了这一点no upstream recrawl was performed for this backfill。在撰写文档、复现流程或审计此包时永远不要声称存在上游原始来源证据。1.1 固定夹具清单source/evidence.md列出了三个固定夹具文件它们共同构成了包的组成部分DESIGN.md — 面向 Agent 的视觉意图、约束和反模式的规范散文。tokens.css — 规范编译后的语义令牌样式表。components.html — 独立的组件固定夹具。源区域还包含了支持性证据和派生工件source/ ├── evidence.md ← 来源范围声明本文件 ├── token-contract.report.json ← TOKEN_SCHEMA 契约报告 └── tokens.source.json ← 导入器的原始令牌快照在包根目录下你会发现运行时派生产物design-tokens.json派生 Design Tokens JSON、tailwind-v4.css派生 Tailwind v4 映射、components.manifest.json派生组件/令牌索引以及preview/下的colors.html、typography.html、spacing.html预览页面。根据 manifest.json 中的files和sourceFiles映射source/token-contract.report.json被声明为report字段。2. 令牌契约TOKEN_SCHEMA 报告如何绑定tokens.cssevidence.md中的关键技术陈述是source/token-contract.report.jsonmaps every TOKEN_SCHEMA binding back to the committedtokens.cssdeclaration line。换句话说审计报告将每个令牌名与它在tokens.css中的确切声明行号对应起来。打开 token-contract.report.json 后可以看到{ name: --bg, layer: A1-identity, value: #313338, confidence: high, reason: Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill., sources: [tokens.css:32], sourceName: --bg }这里的layer字段揭示了包的语义令牌架构。报告汇总将 56 个令牌按以下方式分组层数量含义A1-identity8品牌身份令牌--bg、--surface、--fg、--muted、--border、--accent、--font-display、--font-bodyA1-structure18结构令牌类型比例、行高、字距、区块节奏、容器与装订线A226派生或插槽级令牌--accent-hover、状态色、间距、半径、阴影、动效B-slot4额外插槽绑定--surface-warm、--fg-2、--meta、--border-soft所有 56 个声明令牌都得到了来源支持sourceBackedTokens: 56全部confidence: high其中 26 个是 A1 来源令牌26 个是回退令牌0 个是别名令牌。因此该报告对总分为 100 的评分给出了grade: excellent并设置recommendRebuild: false。可操作的维护契约evidence.md明确规定design-tokens.json和tailwind-v4.css是派生输出should be regenerated from the report and token stylesheet rather than edited by hand。tailwind-v4.css 第一行的注释将tokens.css标记为真相来源design-systems/README.md 的包质量部分确认了同样的三向派生规则components.manifest.json来自components.htmltokens.cssdesign-tokens.json来自令牌契约报告且必须与tokens.css一致tailwind-v4.css来自tokens.css。任何独立的重新定义都是 USAGE.md 中明确禁止的。3. 视觉主题深色优先的聊天表面包的DESIGN.md将 Discord 描述为为夜间、突袭和群组语音而打造的体验因此整个表面都是深色优先的。其核心是三层深度阶梯完全依靠亮度而非色相变化来分层层令牌值角色最深处--surface-warm#1e1f22服务器列表轨道、最深背景中间--surface#2b2d31频道侧边栏、设置侧边栏主表面--bg#313338聊天表面、消息列浮动层弹出框、工具提示、自动补全使用#111214。悬停和选中叠加使用半透明白色修饰符rgba(78, 80, 88, 0.3)和rgba(78, 80, 88, 0.6)。深色主题的文本色阶从--fg-2#f2f3f5标题到--fg#dbdee1正文比纯白稍冷再到--muted#949ba4时间戳、元数据和--meta#80848e不活跃的频道名。链接是天空蓝#00a8fc刻意与 Blurple 区分开来。3.1 唯一的饱和强调色Blurple--accent为#5865f2用于品牌标记、主要 CTA、提及和“你”的提示——刻意少量使用以便在柔和的中性色背景上凸显。它的配套状态为--accent-on: #ffffff; /* 文字/图标颜色 */ --accent-hover: #4752c4; /* 悬停/激活状态 */ --accent-active: color-mix(in oklab, var(--accent), black 14%); /* 按需按下状态 */3.2 语义状态与分割线状态色在线#23a55a--success、空闲#f0b232--warn、勿扰#f23f43--danger同时作为破坏性红色、串流#593695、离线#80848e。提及高亮rgba(88, 101, 242, 0.1)的柔和 Blurple 水洗。分割线--borderrgba(255, 255, 255, 0.06)用于标准深色模式分割线--border-soft#3f4147用于卡片实线边框。轻量主题表面#ffffff/#f2f3f5/#e3e5e8。4. 排版gg sans 与基于字重对比的层级4.1 字体族--font-display: gg sans, Helvetica Neue, Helvetica, Arial, sans-serif; --font-body: gg sans, Helvetica Neue, Helvetica, Arial, sans-serif; --font-mono: gg mono, Consolas, Andale Mono, Courier New, Courier, monospace;gg sans被定位为自定义 Whitney 替代字体采用友好的几何造型显示/传统角色回退到 Whitney在令牌级别由gg sans覆盖。4.2 层级表来自DESIGN.md§Typography Hierarchy角色字体大小字重行高字距说明显示英雄gg sans56px (3.5rem)8001.1-0.02em营销英雄区页面标题gg sans24px (1.5rem)7001.25normal设置/个人资料标题频道名gg sans16px (1rem)6001.25normal#general频道标题消息正文gg sans16px (1rem)4001.375normal标准聊天文本用户名gg sans16px (1rem)5001.25normal消息作者时间戳gg sans12px (0.75rem)5001.25normal“今天下午 4:32”侧边栏频道gg sans16px (1rem)5001.25normal频道列表行服务器名gg sans16px (1rem)6001.25normal服务器头部说明/元信息gg sans12px (0.75rem)4001.30.02em状态文本、已编辑标签行内代码gg mono0.875em400inheritnormal行内code代码块gg mono14px (0.875rem)4001.5normal三反引号围栏块令牌文件将这一规模编码为--text-xs(12) →--text-sm(14) →--text-base(16) →--text-lg(18) →--text-xl(20) →--text-2xl(24) →--text-3xl(32) →--text-4xl(56)并配套--leading-body: 1.375、--leading-tight: 1.10和--tracking-display: -0.02em。components.html在 H2/H3 上应用了品牌微调h2使用line-height: 1.20h3使用line-height: 1.25。4.3 原则友好几何gg sans 在 a/g/s 上使用圆角端子在不破坏可读性的前提下传递温暖感。字重对比优于颜色对比层级来自 400→500→600→700→800 的字重阶跃表面保持中性。16px 正文永不缩小密度来自行高1.375而不是字体大小。5. 组件样式按钮、输入、服务器图标、状态点、卡片、提及components.html是一个独立的固定夹具其可见的每个值都来自tokens.csscomponents.manifest.json 记录了 38 个选择器、17 个类、21 个元素以及一个包含 buttons、inputs、cards、links、typography 和 layout 组的分组。它还将--accent-active、--danger、--elev-*、--radius-pill、--success、--warn、--text-xl等列为已声明但未使用的令牌并报告undeclaredReferenced: []没有悬空引用。5.1 按钮变体背景文字悬停用法Primary#5865f2#ffffff#4752c4主要 CTA、“继续”、“加入服务器”Secondary#4e5058#ffffff#6d6f78次要操作Tertiarytransparent#dbdee1文字加下划线链接式操作Danger#da373c#ffffff#a12d2f破坏性操作共享.btn底座padding: 8px 16px、border-radius: var(--radius-sm)、font-weight: 500、transition: background-color var(--motion-fast) var(--ease-standard):focus-visible使用box-shadow: var(--focus-ring)0 0 0 3px rgba(88, 101, 242, 0.3)。5.2 输入框背景#1e1f22文字#dbdee11px solid #1e1f22边框border-radius: 4pxpadding: 10px 12px聚焦时边框切换到 Blurple#5865f2。标签大写、font-weight: 600、letter-spacing: 0.04em、颜色var(--fg-2)。占位符使用var(--muted)。5.3 服务器图标与状态点48×48px默认border-radius: 16px圆角方形悬停和激活时过渡到 50%。转换使用var(--motion-base)200ms缓动cubic-bezier(0.215, 0.61, 0.355, 1)。活跃状态图标列左边缘有一个 4px 白色药丸。10×10px 状态点带 3px 背景色三级边框产生“缺口”效果定位在头像右下角。绿 在线黄 空闲红 勿扰灰 离线。5.4 卡片 / 嵌入背景#2b2d31深色或#f2f3f5浅色4px 左侧强调色边框border-radius: 4pxpadding: 8px 16px。令牌级.card规则使用var(--surface)1px solid var(--border-soft)var(--radius-md)var(--space-6)内边距。5.5 提及药丸背景rgba(88, 101, 242, 0.3)文字#c9cdfbpadding: 0 2pxborder-radius: 3px——在components.html的 hero 卡片中batch-2提及固定夹具中可见。6. 间距、布局与动效6.1 间距基础单位是 4px比例 4、8、12、16、20、24、32、40编码为--space-1到--space-12。区块节奏桌面端 80px平板端 48px手机端 32px--section-y-*。6.2 布局尺寸服务器轨道固定 72px 宽固定夹具中使用.server-rail表达background: var(--surface-warm)。频道侧边栏240px。成员列表桌面端 240px。聊天列弹性最小 380px。容器使用--container-max: 1200px装订线在components.html媒体查询中自适应桌面端 24px、平板端 16px≤1023px、手机端 16px≤639px。6.3 动效悬停 200ms头像圆形变形 350ms工具提示淡入淡出 80ms。头像变形缓动cubic-bezier(0.215, 0.61, 0.355, 1)干脆然后回落。通知脉冲1.4sease-in-out无限循环作用于未读提及指示器。令牌级--motion-fast: 80ms、--motion-base: 200ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)。7. 使用护栏反模式DESIGN.md§Usage Guardrails 和 USAGE.md 中的 “Avoid” 列表共同构成了允许性边界保留深色外壳、紧凑密度和 Blurple 动作层级在浅色营销式布局中使用 Blurple 会破坏 Discord 产品感。保持以导航为主的表面围绕轨道、侧边栏和聊天列构建而不是使用孤立的装饰卡片。使用圆角方形头像和状态点语言来表示人、服务器或在线状态。在复制的:root令牌块之外避免原始十六进制值。避免独立于tokens.css重新定义 Tailwind 或设计令牌值。避免声称存在上游原始来源证据此包基于整理的捆绑固定夹具。避免添加components.html或DESIGN.md中未表示的组件配方。8. 在 OpenDesign 中应用此包USAGE.md建议按此顺序阅读然后使用首先阅读 USAGE.md 以了解包契约。阅读 DESIGN.md 了解视觉意图、约束和反模式。在编写组件 CSS 之前将 tokens.css 粘贴到第一个产物style块中。使用 components.manifest.json 作为紧凑的组件清单在需要精确选择器或状态时打开 components.html。当视觉健全性检查有用时检查 preview 页面colors.html、typography.html、spacing.html。保留模式令牌名--bg、--surface、--accent等至关重要“Preserve the schema token names exactly so cross-brand switching stays reliable”。将--accent用于主要操作、链接、焦点状态以及一个清晰的焦点元素。在发明新控件之前从components.manifest.json中复用组件组。将source/文件视为捆绑固定夹具回填的审计证据。在平台层面目录的运行时行为也适用目录在每次/api/design-systems请求时都会被扫描因此无需重启守护进程包质量防护会验证声明的路径、丰富档案、派生文件一致性、令牌契约、组件固定夹具、来源证据和预览覆盖范围详细编写规则见 design-systems/README.md 和 docs/design-systems.md。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考