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 仓库内置的 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 semanticinfo/success/warn/danger——never decorative accents」。2. 色彩调色板与角色从品牌色到语义令牌Slack 包把色彩划分为五类品牌主色、Logo 强调色、表面与背景、文本色、语义色以及边框分隔色。在 DESIGN.md英文权威版与 DESIGN-uk.md乌克兰语版中均有完整令牌表全部被 tokens.css 落地为可复用的 CSS 变量。2.1 品牌主色aubergine 家族令牌Hex角色--color-aubergine#4A154B侧边栏背景、品牌主色--color-aubergine-dark#350d36aubergine 表面上的悬停状态--color-aubergine-light#611f69侧边栏中活动项的高亮在 tokens.css 中这三个色阶分别绑定为--accentaubergine主 CTA 与侧边栏背景、--accent-active深 aubergine按下状态与--accent-hover活动/悬停 aubergine。2.2 Logo 强调色仅用于高亮、图标、营销令牌Hex名称角色--color-blue#36C5F0天蓝频道图标、链接、信息状态--color-green#2EB67D蓝绿在线状态、成功状态--color-yellow#ECB22E金色离开状态、警告、高亮--color-red#E01E5A红宝石通知、错误、提及徽标在语义层这四色被映射为--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 表面与背景令牌Hex角色--bg-primary#FFFFFF主消息区、模态框--bg-secondary#F8F8F8线程面板、次级表面--bg-tertiary#F1F1F1输入框背景、悬停状态--bg-sidebar#4A154B左侧边栏aubergine--bg-sidebar-hoverrgba(255,255,255,0.1)侧边栏项悬停--bg-sidebar-activergba(255,255,255,0.2)侧边栏活动项--bg-message-hover#F8F8F8消息行悬停在 schema 化的 tokens.css 中表面层被收敛为--bg: #ffffff主消息区、--surface: #f8f8f8线程面板、次级表面并用--surface-warm作别名Slack 系统中没有暖色层级。这种「品牌描述 → schema 令牌」的映射是 Design System 2.0 包的标准化做法。2.4 文本色令牌Hex角色--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时间戳、弱化标签。2.5 边框与分隔线令牌Hex角色--border-default#DDDDDD标准分隔线、卡片边框--border-subtle#F1F1F1行间细微分隔--border-focus#1264A3焦点环颜色对应 schema 中的--border: #dddddd与--border-soft: #f1f1f1焦点环则由--focus-ring: 0 0 0 2px rgba(18, 100, 163, 0.25)表达基于 #1264A3 的蓝色光环。3. 排版规则15px 基准与 10 级字体刻度3.1 字体栈角色官方字体Web 回退展示 / 营销标题LarsseitLarsseit, Helvetica Neue, Arial, sans-serif界面 / 正文 / ChromeSlack Lato定制system-ui, -apple-system, BlinkMacSystemFont, sans-serif代码 / 等宽—Monaco, Menlo, Courier New, monospaceSlack 营销标题使用Larsseit产品内界面使用定制版 Lato。Web 场景下system-ui是最安全的回退。在 tokens.css 中对应--font-displayLarsseit 栈、--font-bodysystem-ui 栈与--font-monoMonaco/Menlo 栈。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默认界面文本Slack 基准尺寸Body SM13px4001.38462normal次级元数据Caption12px4001.33normal时间戳、提示Code12px4001.5normal内联代码、代码块schema 映射见 tokens.css 注释xs12, sm15, base15(body), lg18, xl22, 2xl28, 3xl36, 4xl48对应令牌--text-xs至--text-4xl行高令牌为--leading-body: 1.5与--leading-tight: 1.1048px 展示压缩字距令牌--tracking-display: -0.021em即 -1px / 48px 的归一化值。3.3 排版规则Slack 正文基准尺寸为15px——比 16px 略小以获得更高密度未读频道字重 700——加粗是未读的首要指示器时间戳12px--text-secondary仅悬停时显示代码块背景#F8F8F8、边框1px solid #DDDDDD、圆角 4px字体尺寸永远不要低于 12px营销标题大号展示尺寸使用 letter-spacing-1px4. 组件样式6 个核心组件的完整 CSS4.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 基准令牌值用途--space-14px紧凑间隙--space-28px组件内边距--space-312px输入框内边距--space-416px标准内边距--space-624px卡片内边距--space-832px分区间距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 Smith5.4 消息编辑器固定在消息区底部border: 1px solid #DDDDDD、border-radius: 8px、margin: 0 16px 16px工具栏emoji、附件、格式化、发送按钮6. 深度与层级浅色表面上的轻阴影级别用途阴影平面消息行、侧边栏项none低卡片、输入框0 1px 3px rgba(0,0,0,0.08)中下拉菜单、popover0 4px 12px rgba(0,0,0,0.12)高模态框、对话框0 8px 24px rgba(0,0,0,0.15)遮罩模态背景rgba(0,0,0,0.5)在 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. 该做与不该做Dos and Donts✅ 该做使用 aubergine#4A154B作为侧边栏——这是 Slack 最具标志性的界面元素保持主内容区白色、明亮所有正文使用#1D1C1D近黑而非纯黑加粗频道名以显示未读状态——字重就是指示器四色强调色只用于语义角色成功、警告、危险、信息消息附件与嵌入应用border-left: 4px时间戳仅悬停时显示链接与焦点状态使用#1264A3保持侧边栏项紧凑高 28px、圆角 6px❌ 不该做不要使用深色主内容区——Slack 是浅色优先不要把蓝/绿/黄/红散落为装饰性强调不要为文本使用纯黑#000000不要使用对话气泡——消息是平面行不要让按钮大圆角——4px 是标准不要一直显示时间戳频道名不要全大写不要使用低于 12px 的字体8. 响应式行为三档断点与移动端适配8.1 断点断点宽度布局移动端 768px单面板侧边栏作为左侧抽屉平板768–1024px仅侧边栏 消息区桌面 1024px完整三栏布局8.2 移动端适配侧边栏左侧抽屉右滑打开底部标签栏主页、私信、活动、我线程面板全屏覆盖编辑器固定在键盘上方频道列表项44px 触控目标高度移动端保留 aubergine 顶部标题栏9. 面向 Agent 的提示指南如何让 AI 生成 Slack 风格界面当需要 Agent 生成 Slack 风格设计时DESIGN-uk.md 第 9 节提供了完整的提示词配方可直接作为上下文注入 Agent 的 promptOpenDesign 的 Design System 表面正是通过把包内设计上下文组合进 Agent 提示词来工作的见 design-systems/README.md色彩应用主画布设置background: #FFFFFF。侧边栏使用#4A154Baubergine。所有主文本为#1D1C1D。链接与焦点环使用#1264A3。四个 Logo 色——#36C5F0、#2EB67D、#ECB22E、#E01E5A——仅作语义使用信息、成功、警告、危险。排版所有界面使用system-ui, -apple-system, sans-serif。基准尺寸 15px。未读频道字重 700。正文字重 400。时间戳12px#616061仅悬停。代码Monaco, Menlo, monospace12px背景#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 JSONpreview/——可索引的预览页colors.html、typography.html、spacing.htmlsource/——导入证据与令牌契约报告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/Donts、响应式、Agent 提示词配合包内的 tokens.css 与组件清单足以支撑你在 OpenDesign 中完整复现这一风格并将其作为高质量设计上下文注入任何 Agent 的提示词。赞分享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点击查看免费下载相关推荐Open Design 设计系统实战复刻 Shopify 暗色电影化风格的完整设计规范与 Agent 提示词指南Open Design 设计系统实战复刻 Shopify 暗色电影化风格的完整设计规范与 Agent 提示词指南 本指南以 design systems/shAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 中的 Nike 风格设计系统指南单色零售界面、排版层级与 Agent 提示词规范OpenDesign 中的 Nike 风格设计系统指南单色零售界面、排版层级与 Agent 提示词规范 本指南以仓库 design systems/nike/AI 应用人工智能AI 技能设计系统媒体生成OpenDesign 的 Webflow 设计系统包从色彩令牌到 Agent 提示词的完整实战指南OpenDesign 的 Webflow 设计系统包从色彩令牌到 Agent 提示词的完整实战指南 本文面向在 OpenDesign 中构建「WebflowAI 应用人工智能AI 技能设计系统媒体生成上一篇VnPy项目中的CTA趋势策略开发与应用指南下一篇Cheerio快速入门轻量级HTML解析与操作指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考