Open Design 设计系统复刻指南Slack 工作区界面的浅色视觉体系与 Agent 可执行规范【免费下载链接】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本指南以 Open Design 仓库内置的 Slack 设计系统包 为骨架完整解析其浅色内容区 深茄子紫侧边栏的品牌视觉体系从色彩令牌、排版刻度、组件样式、三栏布局到响应式规则与 Agent Prompt 提示词。读完本文你将掌握一套可直接复制的 Slack 风格设计规范并了解它如何在 Open Design 的设计系统 2.0 包结构中通过tokens.css、manifest.json、components.manifest.json等文件被 Agent 与审阅者消费。1. 视觉主题与氛围浅色优先的工作沟通界面Slack 的身份建立在工作也可以有人情味、甚至有点好玩的理念之上。与深色优先的工具相反其标志性界面是浅色的——白色内容区搭配深茄子紫aubergine#4A154B侧边栏。这一对比是刻意的侧边栏是安静、常驻的导航锚点内容区则明亮开放。在 Open Design 的 manifest.json 中该包被归类为Productivity SaaS描述为Aubergine-primary, multi-accent logo palette, light surfaces with dark sidebar, warm and approachable茄子紫主色、多强调色 Logo 调色板、浅色表面配深色侧边栏、温暖而亲切。这与 DESIGN.md 的主题定义完全一致。关键特征浅色优先的内容表面白色#FFFFFF与近白#F8F8F8深茄子紫#4A154B侧边栏——品牌最具辨识度的 UI 元素四个 Logo 强调色蓝、绿、黄、红仅作为点缀绝不散布于 UI标题用 Larsseit营销场景UI 用系统无衬线字体圆角克制而非卡通化大多数组件为 4–8px 圆角密集但透气紧凑的消息行与清晰的线程层级温暖、对话式的语气——emoji、reaction 与插画是一等公民注意Logo 调色板蓝、绿、黄、红主要出现在 hashtag 图标与营销语境中。在产品内部Slack 使用克制的专业色彩系统茄子紫是唯一的品牌锚点。2. 色彩令牌与角色2.1 品牌主色Brand PrimaryTokenHex角色--color-aubergine#4A154B侧边栏背景、品牌主色--color-aubergine-dark#350d36茄子紫表面上的 hover 状态--color-aubergine-light#611f69侧边栏中激活项的高亮在工程化的 tokens.css 中这三档被映射为--accent: #4a154b主 CTA 与侧边栏背景、--accent-hover: #611f69悬停/激活茄子紫与--accent-active: #350d36按压时的深茄子紫外加--accent-on: #ffffff用于强调色上的文字。2.2 Logo 强调色仅在亮点、图标与营销场景使用TokenHex名称角色--color-blue#36C5F0天蓝频道图标、链接、信息状态--color-green#2EB67D蓝绿在线状态、成功状态--color-yellow#ECB22E金色离开状态、警告、高亮--color-red#E01E5A红宝石通知、错误、提及徽章一个重要的设计决策在 tokens.css 中这四个 Logo 色直接就是语义色——--success: #2eb67dSlack 蓝绿在线/成功、--warn: #ecb22eSlack 金色离开/警告、--danger: #e01e5aSlack 红宝石通知/错误。文件头注释明确写道Logo palette: these ARE the semantic colors。也就是说Logo 色不是装饰而是被严格限定在语义角色的语义令牌。2.3 表面与背景Surface BackgroundTokenHex角色--bg-primary#FFFFFF主消息区、模态框--bg-secondary#F8F8F8线程面板、次级表面--bg-tertiary#F1F1F1输入框背景、hover 状态--bg-sidebar#4A154B左侧边栏茄子紫--bg-sidebar-hoverrgba(255,255,255,0.1)侧边栏项 hover--bg-sidebar-activergba(255,255,255,0.2)侧边栏激活项--bg-message-hover#F8F8F8消息行 hover对应到 schema 令牌--bg: #ffffff、--surface: #f8f8f8线程面板与次级表面、--border-soft: #f1f1f1行间细分隔线。值得注意的 schema 决策在 tokens.css--surface-warm直接var(--surface)别名因为 Slack 系统中没有暖色调层级。2.4 文本颜色Text ColorsTokenHex角色--text-primary#1D1C1D主要正文近黑--text-secondary#616061时间戳、弱化标签--text-sidebarrgba(255,255,255,0.9)侧边栏频道名--text-sidebar-mutedrgba(255,255,255,0.6)侧边栏非激活项--text-link#1264A3消息内联链接--text-mention#1264A3提及文字色schema 映射为--fg: #1d1c1d近黑——按品牌规范不是纯黑、--muted: #616061与--meta: #616061同一弱化层级。链接与焦点环统一使用#1264A3见 tokens.css 的--focus-ring: 0 0 0 2px rgba(18, 100, 163, 0.25)。2.5 语义色与边框语义色--color-success: #2EB67D、--color-warning: #ECB22E、--color-danger: #E01E5A、--color-info: #36C5F0。边框与分隔线--border-default: #DDDDDD标准分隔线、卡片边框、--border-subtle: #F1F1F1行间细微分隔、--border-focus: #1264A3焦点环颜色。3. 排版规则3.1 字体族Typefaces角色官方字体Web 回退Display / 营销标题LarsseitLarsseit, Helvetica Neue, Arial, sans-serifUI / 正文 / 界面Slack Lato定制system-ui, -apple-system, BlinkMacSystemFont, sans-serif代码 / 等宽—Monaco, Menlo, Courier New, monospaceSlack 在营销标题使用Larsseit产品内 UI 使用定制的 Lato 变体。Web 场景下system-ui是最安全的回退。tokens.css 中对应--font-display、--font-body、--font-mono三个令牌其中--font-body的完整回退链为system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif。3.2 字号刻度Type Scale层级字号字重行高字距用途Display XL48px8001.1-1px营销 Hero 标题Display L36px7001.15-0.5px章节 HeroHeading 128px7001.25normal模态框标题、页面页眉Heading 222px7001.3normal卡片标题、设置区块Heading 318px7001.35normal子章节标题Body L16px4001.5normal消息文本、描述Body15px4001.46667normal默认 UI 文本Slack 基础字号Body SM13px4001.38462normal次级元数据Caption12px4001.33normal时间戳、提示Code12px4001.5normal行内代码、代码块在 tokens.css 中该刻度被映射为--text-xs: 12px至--text-4xl: 48px的 8 档令牌并附有 schema 映射说明xs12, sm15, base15(body), lg18, xl22, 2xl28, 3xl36, 4xl48。行高与字距也被令牌化--leading-body: 1.5、--leading-tight: 1.1048px Display 的压缩行高、--tracking-display: -0.021em即 -1px/48px 归一化后的字距。H236px→1.15与 H328px→1.25的行高按 DESIGN.md 字号表逐一落地。3.3 排版规则要点Slack 基础字号是15px——比 16px 略小以获得更高密度未读频道字重 700——加粗是主要的未读指示器时间戳12px--text-secondary仅 hover 时显示代码块背景#F8F8F8、边框1px solid #DDDDDD、圆角 4px任何字号不得低于 12px营销标题大号 Display 使用letter-spacing: -1px4. 组件样式DESIGN.md 提供了完整、可直接复制的组件 CSS结合 components.html 参考夹具与 components.manifest.json 中登记的 42 个选择器可确认每个可见值均来自 tokens.css 令牌。4.1 按钮Buttons/* 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组件组中登记了.btn、.btn-danger、.btn-primary、.btn-primary:hover、.btn-secondary、.btn-secondary:hover与.btn:focus-visible七个选择器其令牌引用为--accent-hover、--focus-ring、--surface。也就是说hover 高亮、焦点环与次级按钮的 hover 表面全部由令牌驱动而不是硬编码。4.2 输入框Input Fields.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组件组.field、.field input、.field input::placeholder、.field input:focus、.field label的令牌引用为--fg、--muted、--text-base。4.3 侧边栏频道项Sidebar Channel Item.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 未读徽章Unread Badge.badge { background: #E01E5A; color: #FFFFFF; border-radius: 8px; font-size: 11px; font-weight: 700; padding: 1px 6px; min-width: 18px; }4.5 消息附件/卡片Message Attachments / Cards.attachment { border-left: 4px solid #DDDDDD; background: #F8F8F8; border-radius: 0 4px 4px 0; padding: 8px 12px; margin: 4px 0; }4.6 表情反应Reactions.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. 布局原则5.1 三栏布局Three-Column Layout┌──────────────┬──────────────────────────────┬─────────────┐ │ Sidebar │ Message Area │ Thread │ │ (240px) │ (flex: 1) │ (400px) │ │ #4A154B │ #FFFFFF │ optional │ └──────────────┴──────────────────────────────┴─────────────┘5.2 间距系统4px 基数Token值用途--space-14px紧凑间隙--space-28px组件内边距--space-312px输入框内边距--space-416px标准内边距--space-624px卡片内边距--space-832px区块间隙tokens.css 在此基础上还扩展了--space-5: 20px与--space-12: 48px并新增了区块节奏令牌--section-y-desktop: 80px、--section-y-tablet: 48px、--section-y-phone: 32px分别对应桌面/平板/手机三种视口的章节纵向留白见 components.html 中的媒体查询用法。5.3 侧边栏结构Sidebar Structure[Workspace Name ▼] ──────────────────── Threads All DMs Drafts Sent ──────────────────── ▼ Channels # general # random # design ● (unread) ──────────────────── ▼ Direct Messages John Doe Jane Smith5.4 消息输入栏Message Composer固定于消息区底部border: 1px solid #DDDDDD、border-radius: 8px、margin: 0 16px 16px工具栏emoji、附件、格式化、发送按钮6. 深度与层级ElevationSlack 在浅色表面上使用轻量阴影层级用途阴影Flat消息行、侧边栏项noneLow卡片、输入框0 1px 3px rgba(0,0,0,0.08)Medium下拉、弹出层0 4px 12px rgba(0,0,0,0.12)High模态框、对话框0 8px 24px rgba(0,0,0,0.15)Overlay模态遮罩rgba(0,0,0,0.5)tokens.css 将其收敛为三个核心令牌--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised: 0 4px 12px rgba(0, 0, 0, 0.12)。--elev-ring用 1px 边框环替代了低层级阴影正是浅色表面上的轻量阴影理念的工程化表达。7. Dos and Donts✅ Do侧边栏使用茄子紫#4A154B——这是 Slack 最具标志性的 UI 元素主内容区保持白色浅色正文统一用#1D1C1D近黑而非纯黑用加粗频道名表示未读状态——字重即指示器四个强调色仅用于语义角色成功、警告、危险、信息消息附件与嵌入内容使用border-left: 4px时间戳仅 hover 时显示链接与焦点状态使用#1264A3侧边栏项保持紧凑28px 高度、6px 圆角❌ Dont不要使用深色主内容区——Slack 是浅色优先的不要把蓝/绿/黄/红散布为装饰性强调色不要用纯黑#000000作为文字色不要使用对话气泡——消息是扁平行不要让按钮大圆角——4px 是标准不要永久显示时间戳频道名不要用全大写字号不要低于 12px8. 响应式行为8.1 断点Breakpoints断点宽度布局Mobile 768px单面板侧边栏变为左侧抽屉Tablet768–1024px仅侧边栏 消息区Desktop 1024px完整三栏布局8.2 移动端适配侧边栏左侧抽屉右滑打开底部标签栏Home、DMs、Activity、You线程面板全屏覆盖层输入栏固定在键盘上方频道列表项44px 触控目标高度移动端保留茄子紫顶部标题栏9. Agent Prompt Guide生成 Slack 风格设计的提示词DESIGN.md 第 9 节给出了专为 AI Agent 设计的提示指南以下为完整继承色彩应用设置background: #FFFFFF作为主画布。侧边栏使用#4A154B茄子紫。所有主文本使用#1D1C1D。链接与焦点环使用#1264A3。四个 Logo 色——#36C5F0、#2EB67D、#ECB22E、#E01E5A——仅用于语义角色info、success、warning、danger。排版所有 UI 使用system-ui, -apple-system, sans-serif。基础字号 15px。未读频道字重 700。正文字重 400。时间戳12px#616061仅 hover 显示。代码Monaco, Menlo, monospace12px背景#F8F8F8。布局三栏240px 茄子紫侧边栏 flex 白色消息区 可选 400px 线程面板。侧边栏项28px 高度、6px 圆角、未读时加粗。输入栏固定底部border: 1px solid #DDDDDD、border-radius: 8px。组件按钮4px 圆角、36px 高度、茄子紫主色。输入框1px solid #DDDDDD边框、#1264A3焦点环。消息行扁平无气泡36px 圆形头像。Reaction胶囊border: 1px solid #DDDDDD、border-radius: 24px。语气Slack 是温暖、专业、人性化的。空状态使用友好的插画。CTA 直截了当Send message、Get started。错误信息清晰且有帮助绝不令人恐慌。避免的反模式没有深色内容区。没有对话气泡。没有纯黑文本。没有散布的多色强调。没有全大写频道名。没有低于 12px 的字体。没有大按钮圆角。10. 仓库中的工程化落地Design System 2.0 包结构DESIGN.md 不仅是给人类设计师的规范更是 Open Design 设计系统 2.0 包的可消费契约。根据 USAGE.md 与 manifest.json该包的结构与消费顺序如下先读 USAGE.md 理解包契约再读 DESIGN.md 获取视觉意图、约束与反模式将 tokens.css 粘贴进第一个 artifact 的style块再编写组件 CSS用 components.manifest.json 查看紧凑的组件清单需要精确选择器或状态时打开 components.html需要视觉抽查时查看preview/下的 colors.html、typography.html、spacing.html。10.1 令牌契约与审计证据design-tokens.json 是 TOKEN_SCHEMA 契约的导出结果共 56 个令牌全部有 source 背书sourceBackedTokens: 56其中 26 个 A1-identity 层、18 个 A1-structure 层、4 个 B-slot 层、8 个 A2 层综合评分 100grade: excellent且recommendRebuild: falsesource/token-contract.report.json 将每个 TOKEN_SCHEMA 绑定映射回tokens.css的具体声明行如--bg→tokens.css:32source/evidence.md 明确声明本包由 Open Design 策展的内置夹具bundled fixture派生不声称对上游 Slack 品牌仓库或网站做过全新抓取design-tokens.json与tailwind-v4.css是派生产物应依据报告与令牌样式表重新生成而不是手工编辑。10.2 Tailwind v4 桥接层tailwind-v4.css 是 tokens.css 的派生层通过theme将每个 CSS 变量映射为 Tailwind 语义命名空间--color-accent、--font-display、--text-base、--spacing-4、--radius-sm、--shadow-raised、--duration-fast、--ease-standard、--container-max等。文件头明确要求Derived from tokens.css. Keep tokens.css as the source of truth由 tokens.css 派生保持 tokens.css 为唯一事实来源——这意味着任何视觉改动都应落在 tokens.css 一处Tailwind 层自动跟随。10.3 组件清单统计components.manifest.json 提供了可量化的组件审计数据styleBlockCount: 1、selectorCount: 42、classCount: 19、elementCount: 21并登记了 8 个组件组buttons、inputs、cards、badges、links、keyboard、icons、typography、layout其中 buttons、inputs、links、typography、layout 为 presentcards、badges、keyboard、icons 为 absent。每个组都附有令牌引用tokenReferences例如 buttons 组引用--accent-hover、--focus-ring、--surfacetypography 组引用--fg、--font-display、--leading-tight、--muted、--text-3xl。此外还统计了字面量使用情况12 个颜色表达式、19 个像素值、3 个硬编码字体族——帮助审阅者快速发现绕过令牌的硬编码。10.4 使用约束USAGE.md 还给出了 Agent 与审阅者的纪律要求保留schema 令牌名称不变保证跨品牌切换可靠--accent用于主操作、链接、焦点状态与一个明确的焦点元素复用components.manifest.json中的组件组而不是发明新控件将source/文件视为内置夹具回填的审计证据避免在拷贝的:root令牌块之外使用裸 hex 值避免脱离tokens.css独立重定义 Tailwind 或设计令牌值避免声称拥有原始上游源证据避免添加components.html与 DESIGN.md 中不存在的组件配方。结语从品牌氛围到像素级令牌Slack 设计系统包展示了一条设计文档 → CSS 变量 → 组件夹具 → 审计报告的完整链路。无论你是要手写 Slack 风格界面还是让 Agent 依据 DESIGN.md 自动生成原型这套体系都给出了可复制的颜色、排版、布局、组件与语气规范并用 tokens.css、design-tokens.json 与 components.manifest.json 保证了工程实现与设计意图的一致性。【免费下载链接】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），仅供参考