企业官网建设流程全解析

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成

本文基于 OpenDesign 仓库内置的 Slack 设计系统包（design-systems/slack/DESIGN-uk.md）展开，系统梳理其视觉主题、颜色令牌、排版规则、组件样式、三栏布局、响应式行为与面向 Agent 的提示词规范，并结合包内的 tokens.css、components.manifest.json 与 manifest.json 等源码佐证实现细节。读完本文，你将掌握如何用一套结构化的语义令牌在 OpenDesign 中复现「浅色内容区 + 深色 aubergine 侧边栏」的 Slack 风格工作区界面，并能在提示 Agent 生成界面时准确传达其视觉约束。

1. 视觉主题与氛围：浅色优先，aubergine 为唯一品牌锚点

Slack 的身份建立在「工作应该感觉有人情味，甚至有点好玩」这一理念之上。其经典表面是浅色——白色内容区搭配深 aubergine（#4A154B）侧边栏——与「深色优先」的工具形成鲜明对比。这一对比是有意设计的：侧边栏是沉静、常驻的导航锚点，而内容区明亮开阔。

Logo 的四色（蓝、绿、黄、红）主要出现在井号图标与营销场景中，而不是散落在整个界面里。在产品内部，Slack 使用克制、专业的色彩系统，aubergine 是唯一的品牌锚点。

关键特征：

• 浅色优先的内容表面：白色#FFFFFF与近白#F8F8F8
• 深 aubergine#4A154B侧边栏——品牌最具辨识度的界面元素
• 四个 Logo 强调色（蓝、绿、黄、红）仅作点缀性高亮使用
• 标题用 Larsseit（营销场景），界面用系统无衬线字体
• 圆润但不卡通：多数组件圆角为 4–8px
• 紧凑但有呼吸感：紧凑的消息行与清晰的线程层级
• 温暖、对话式的语气——emoji、表情回应与插画是一等公民

在仓库中，这一包被归类为「Productivity & SaaS」（见 manifest.json 的category字段），描述为「职场沟通平台。aubergine 主色、多强调色 Logo 调色板、浅色表面配深色侧边栏、温暖友好」。包内的 tokens.css 文件头用三句话概括了品牌身份，其中明确强调：四色 Logo 强调色「strictly semantic（info/success/warn/danger）——never decorative accents」。

2. 色彩调色板与角色：从品牌色到语义令牌

Slack 包把色彩划分为五类：品牌主色、Logo 强调色、表面与背景、文本色、语义色，以及边框分隔色。在 DESIGN.md（英文权威版）与 DESIGN-uk.md（乌克兰语版）中均有完整令牌表，全部被 tokens.css 落地为可复用的 CSS 变量。

2.1 品牌主色（aubergine 家族）

在 tokens.css 中，这三个色阶分别绑定为--accent（aubergine，主 CTA 与侧边栏背景）、--accent-active（深 aubergine，按下状态）与--accent-hover（活动/悬停 aubergine）。

2.2 Logo 强调色（仅用于高亮、图标、营销）

在语义层，这四色被映射为--success（#2EB67D）、--warn（#ECB22E）、--danger（#E01E5A），而--color-info（#36C5F0）对应信息高亮。正如 tokens.css 注释所写：「Logo palette: these ARE the semantic colors (info/success/warn/danger)」——Logo 调色板就是语义色，不得当作装饰性强调。

2.3 表面与背景

在 schema 化的 tokens.css 中，表面层被收敛为--bg: #ffffff（主消息区）、--surface: #f8f8f8（线程面板、次级表面），并用--surface-warm作别名（Slack 系统中没有暖色层级）。这种「品牌描述 → schema 令牌」的映射是 Design System 2.0 包的标准化做法。

2.4 文本色

schema 层面对应--fg: #1d1c1d（近黑——按品牌规范不是纯黑）、--muted: #616061（时间戳、弱化标签）。

2.5 边框与分隔线

对应 schema 中的--border: #dddddd与--border-soft: #f1f1f1，焦点环则由--focus-ring: 0 0 0 2px rgba(18, 100, 163, 0.25)表达（基于 #1264A3 的蓝色光环）。

3. 排版规则：15px 基准与 10 级字体刻度

3.1 字体栈

Slack 营销标题使用Larsseit，产品内界面使用定制版 Lato。Web 场景下system-ui是最安全的回退。

在 tokens.css 中对应--font-display（Larsseit 栈）、--font-body（system-ui 栈）与--font-mono（Monaco/Menlo 栈）。

3.2 字体刻度（Type Scale）

schema 映射（见 tokens.css 注释）：xs=12, sm=15, base=15(=body), lg=18, xl=22, 2xl=28, 3xl=36, 4xl=48，对应令牌--text-xs至--text-4xl；行高令牌为--leading-body: 1.5与--leading-tight: 1.10（48px 展示压缩）；字距令牌--tracking-display: -0.021em（即 -1px / 48px 的归一化值）。

3.3 排版规则

• Slack 正文基准尺寸为15px——比 16px 略小以获得更高密度
• 未读频道：字重 700——加粗是未读的首要指示器
• 时间戳：12px--text-secondary，仅悬停时显示
• 代码块：背景#F8F8F8、边框1px solid #DDDDDD、圆角 4px
• 字体尺寸永远不要低于 12px
• 营销标题：大号展示尺寸使用 letter-spacing-1px

4. 组件样式：6 个核心组件的完整 CSS

4.1 按钮（圆角 4px、高 36px、aubergine 主按钮）

/* Primary */ .btn-primary { background: #4A154B; color: #FFFFFF; border-radius: 4px; padding: 0 16px; height: 36px; font-size: 15px; font-weight: 700; border: none; } .btn-primary:hover { background: #611f69; } /* Secondary */ .btn-secondary { background: #FFFFFF; color: #1D1C1D; border: 1px solid #DDDDDD; border-radius: 4px; padding: 0 16px; height: 36px; font-size: 15px; font-weight: 700; } .btn-secondary:hover { background: #F8F8F8; } /* Danger */ .btn-danger { background: #E01E5A; color: #FFFFFF; border-radius: 4px; } .btn-danger:hover { background: #B3114A; }

在 components.manifest.json 的buttons组件组中，引用令牌为--accent-hover、--focus-ring、--surface，说明按钮样式已完全令牌化。

4.2 输入框（边框#DDDDDD、焦点环#1264A3）

.input { background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 4px; color: #1D1C1D; font-size: 15px; padding: 8px 12px; height: 36px; } .input:focus { border-color: #1264A3; box-shadow: 0 0 0 2px rgba(18,100,163,0.25); outline: none; }

对应的inputs组件组引用令牌--fg、--muted、--text-base。

4.3 侧边栏频道项（紧凑：高 28px、圆角 6px）

.channel-item { height: 28px; padding: 0 16px; border-radius: 6px; color: rgba(255,255,255,0.7); font-size: 15px; font-weight: 400; } .channel-item:hover { background: rgba(255,255,255,0.1); color: #FFFFFF; } .channel-item.active { background: rgba(255,255,255,0.2); color: #FFFFFF; } .channel-item.unread { color: #FFFFFF; font-weight: 700; }

4.4 未读徽标（红宝石色胶囊）

.badge { background: #E01E5A; color: #FFFFFF; border-radius: 8px; font-size: 11px; font-weight: 700; padding: 1px 6px; min-width: 18px; }

4.5 消息附件 / 卡片（左侧 4px 强调条）

.attachment { border-left: 4px solid #DDDDDD; background: #F8F8F8; border-radius: 0 4px 4px 0; padding: 8px 12px; margin: 4px 0; }

4.6 表情回应（pill 形态）

.reaction { border: 1px solid #DDDDDD; border-radius: 24px; background: #F8F8F8; padding: 2px 8px; font-size: 13px; cursor: pointer; } .reaction:hover { background: #F1F1F1; } .reaction.active { background: rgba(18,100,163,0.1); border-color: #1264A3; }

5. 布局原则：240px 侧边栏 + 弹性消息区 + 可选 400px 线程面板

5.1 三栏布局

┌──────────────┬──────────────────────────────┬─────────────┐ │ 侧边栏 │ 消息区 │ 线程 │ │ (240px) │ (flex: 1) │ (400px) │ │ #4A154B │ #FFFFFF │ 可选 │ └──────────────┴──────────────────────────────┴─────────────┘

5.2 间距系统（4px 基准）

tokens.css 在 4px 基准网格上还额外提供了--space-5: 20px与--space-12: 48px，并定义了分区节奏令牌--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px，以及容器令牌--container-max: 1200px和三档 gutter（桌面 24px / 平板、手机 16px）。

5.3 侧边栏结构

[工作区名称 ▼] ──────────────────── 线程 所有私信 草稿与已发送 ──────────────────── ▼ 频道 # general # random # design ● (未读) ──────────────────── ▼ 私信 John Doe Jane Smith

5.4 消息编辑器

• 固定在消息区底部
• border: 1px solid #DDDDDD、border-radius: 8px、margin: 0 16px 16px
• 工具栏：emoji、附件、格式化、发送按钮

6. 深度与层级：浅色表面上的轻阴影

在 schema 中，阴影收敛为--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)与--elev-raised: 0 4px 12px rgba(0,0,0,0.12)，并补充了动效令牌--motion-fast: 150ms、--motion-base: 200ms与--ease-standard: cubic-bezier(0.2, 0, 0, 1)。

7. 该做与不该做（Do's and Don'ts）

✅ 该做

• 使用 aubergine#4A154B作为侧边栏——这是 Slack 最具标志性的界面元素
• 保持主内容区白色、明亮
• 所有正文使用#1D1C1D（近黑），而非纯黑
• 加粗频道名以显示未读状态——字重就是指示器
• 四色强调色只用于语义角色（成功、警告、危险、信息）
• 消息附件与嵌入应用border-left: 4px
• 时间戳仅悬停时显示
• 链接与焦点状态使用#1264A3
• 保持侧边栏项紧凑：高 28px、圆角 6px

❌ 不该做

• 不要使用深色主内容区——Slack 是浅色优先
• 不要把蓝/绿/黄/红散落为装饰性强调
• 不要为文本使用纯黑#000000
• 不要使用对话气泡——消息是平面行
• 不要让按钮大圆角——4px 是标准
• 不要一直显示时间戳
• 频道名不要全大写
• 不要使用低于 12px 的字体

8. 响应式行为：三档断点与移动端适配

8.1 断点

8.2 移动端适配

• 侧边栏：左侧抽屉，右滑打开
• 底部标签栏：主页、私信、活动、我
• 线程面板：全屏覆盖
• 编辑器：固定在键盘上方
• 频道列表项：44px 触控目标高度
• 移动端保留 aubergine 顶部标题栏

9. 面向 Agent 的提示指南：如何让 AI 生成 Slack 风格界面

当需要 Agent 生成 Slack 风格设计时，DESIGN-uk.md 第 9 节提供了完整的提示词配方，可直接作为上下文注入 Agent 的 prompt（OpenDesign 的 Design System 表面正是通过把包内设计上下文组合进 Agent 提示词来工作的，见 design-systems/README.md）：

色彩应用：

主画布设置background: #FFFFFF。侧边栏使用#4A154B（aubergine）。所有主文本为#1D1C1D。链接与焦点环使用#1264A3。四个 Logo 色——#36C5F0、#2EB67D、#ECB22E、#E01E5A——仅作语义使用：信息、成功、警告、危险。

排版：

所有界面使用system-ui, -apple-system, sans-serif。基准尺寸 15px。未读频道：字重 700。正文：字重 400。时间戳：12px#616061，仅悬停。代码：Monaco, Menlo, monospace，12px，背景#F8F8F8。

布局：

三栏：240px aubergine 侧边栏 + 弹性白色消息区 + 可选 400px 线程面板。侧边栏项：高 28px、圆角 6px、未读时加粗。编辑器：固定在底部，border: 1px solid #DDDDDD、border-radius: 8px。

组件：

按钮：圆角 4px、高 36px、aubergine 主按钮。输入框：1px solid #DDDDDD边框、#1264A3焦点环。消息行：平面、无气泡、36px 圆形头像。回应：pillborder: 1px solid #DDDDDD、border-radius: 24px。

语气：

Slack 温暖、专业、有人情味。空状态使用友好插画。CTA 直接：「发送消息」「开始使用」。错误信息清晰有用，绝不吓人。

需要避免的反模式：

无深色内容区。无对话气泡。无纯黑文本。无散落的彩色强调。频道名无全大写。无低于 12px 的字体。无大圆角按钮。

10. 包结构与使用方式：从 DESIGN.md 到 tokens.css 的完整链路

该 Slack 设计系统包遵循 OpenDesign 设计系统 2.0 包的标准化结构，核心文件包括：

• manifest.json——schemaVersion 为od-design-system-project/v1，声明id: "slack"、类别、来源（bundled fixture）以及各派生文件的路径
• DESIGN.md——面向 Agent 的权威设计散文（另有 20+ 语言版本）
• tokens.css——编译后的语义令牌样式表，是令牌的唯一事实来源
• USAGE.md——面向 Agent 与审查者的包使用指南，建议按「先读 USAGE → 读 DESIGN → 把 tokens.css 粘贴进首个 artifact 的<style>块 → 用 components.manifest.json 查组件清单 → 需要时查看 preview/ 页面」的顺序工作
• components.manifest.json——组件/令牌索引（42 个选择器、19 个类、21 个元素、8 个组件组），其中cards、badges、keyboard、icons组标记为present: false，说明该夹具聚焦于按钮、输入框、排版与布局原语
• components.html——独立组件夹具
• tailwind-v4.css——由 tokens.css 派生的 Tailwind v4 映射（@theme块将--color-*、--text-*、--spacing-*、--radius-*等绑定到语义令牌）
• design-tokens.json——由令牌契约报告派生的 Design Tokens JSON
• preview/——可索引的预览页（colors.html、typography.html、spacing.html）
• source/——导入证据与令牌契约报告（evidence.md 明确说明该包来自 OpenDesign 策展的 bundled fixture，不声称抓取原始上游品牌仓库）

据 design-systems/README.md 所述，目录中的派生文件是缓存而非竞争性事实来源：components.manifest.json由components.html与tokens.css派生，design-tokens.json由令牌契约报告派生且必须与tokens.css一致，tailwind-v4.css由tokens.css派生。因此在实际使用中，永远以tokens.css为修改与阅读的入口，避免在派生文件中直接硬编码十六进制值（这也是 USAGE.md 明确告诫的）。

在实际生成界面时，把tokens.css的:root令牌块整体粘贴进首个 artifact 的<style>块，然后基于--bg、--surface、--fg、--accent、--success/--warn/--danger、--border、--focus-ring等语义令牌编写组件 CSS，即可实现跨品牌切换时令牌名保持一致（USAGE.md 强调「Preserve the schema token names exactly so cross-brand switching stays reliable」）。

11. 结语

Slack 设计系统包是 OpenDesign 内置 151 个设计系统包（design-systems/README.md）中极具代表性的「Productivity & SaaS」案例：它以 aubergine 深色侧边栏 + 浅色内容区为核心对比，用四色 Logo 调色板承担全部语义角色，以 15px 基准排版与 4px 圆角塑造紧凑、专业、温暖的界面气质。本文继承的九节骨架（视觉主题、色彩、排版、组件、布局、深度、Do/Don'ts、响应式、Agent 提示词）配合包内的 tokens.css 与组件清单，足以支撑你在 OpenDesign 中完整复现这一风格，并将其作为高质量设计上下文注入任何 Agent 的提示词。

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成