企业官网建设流程全解析

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.css

evidence.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 个令牌按以下方式分组：

所有 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.html+tokens.css，design-tokens.json来自令牌契约报告且必须与tokens.css一致，tailwind-v4.css来自tokens.css。任何独立的重新定义都是 USAGE.md 中明确禁止的。

3. 视觉主题：深色优先的聊天表面

包的DESIGN.md将 Discord 描述为为夜间、突袭和群组语音而打造的体验，因此整个表面都是深色优先的。其核心是三层深度阶梯，完全依靠亮度而非色相变化来分层：

浮动层（弹出框、工具提示、自动补全）使用#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）

令牌文件将这一规模编码为--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.20，h3使用line-height: 1.25。

4.3 原则

• 友好几何：gg sans 在 a/g/s 上使用圆角端子，在不破坏可读性的前提下传递温暖感。
• 字重对比优于颜色对比：层级来自 400→500→600→700→800 的字重阶跃；表面保持中性。
• 16px 正文永不缩小：密度来自行高（1.375），而不是字体大小。

5. 组件样式：按钮、输入、服务器图标、状态点、卡片、提及

components.html是一个独立的固定夹具，其可见的每个值都来自tokens.css；components.manifest.json 记录了 38 个选择器、17 个类、21 个元素，以及一个包含 buttons、inputs、cards、links、typography 和 layout 组的分组。它还将--accent-active、--danger、--elev-*、--radius-pill、--success、--warn、--text-xl等列为已声明但未使用的令牌，并报告undeclaredReferenced: []（没有悬空引用）。

5.1 按钮

共享.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，文字#dbdee1，1px solid #1e1f22边框，border-radius: 4px，padding: 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: 4px，padding: 8px 16px。令牌级.card规则使用var(--surface)+1px solid var(--border-soft)+var(--radius-md)+var(--space-6)内边距。

5.5 提及药丸

背景rgba(88, 101, 242, 0.3)，文字#c9cdfb，padding: 0 2px，border-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建议按此顺序阅读，然后使用：

1. 首先阅读 USAGE.md 以了解包契约。
2. 阅读 DESIGN.md 了解视觉意图、约束和反模式。
3. 在编写组件 CSS 之前，将 tokens.css 粘贴到第一个产物<style>块中。
4. 使用 components.manifest.json 作为紧凑的组件清单；在需要精确选择器或状态时打开 components.html。
5. 当视觉健全性检查有用时，检查 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