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点击查看免费下载本指南以 design-systems/discord 设计包为核心骨架系统拆解 Discord 风格设计系统的视觉基调、色彩令牌、排版层级、组件样式、间距布局与动效规范并结合 tokens.css 的 CSS 变量落地、components.html 的参考组件实现与 USAGE.md 的包契约给出可直接复制的实战方案。读完你将掌握如何用三层明度阶梯构建 dark-first 界面、如何将 Blurple 定位为唯一饱和强调色、如何用 4px 基准网格组织聊天类布局以及如何把整套规范封装为可复用的 Design Token 供 Tailwind v4 消费。1. 设计系统包结构从规范到可运行产物OpenDesign 仓库将每个品牌设计系统组织为自包含的包package。以 Discord 为例design-systems/discord/目录同时承载了人类可读的规范文档与机器可消费的产物文件角色DESIGN.md视觉意图、约束与反模式英文原版DESIGN-pt-br.md巴西葡萄牙语翻译版本指南的关联文档tokens.css结构化 Token 绑定:root块即规范的事实来源design-tokens.jsonJSON 格式的设计令牌导出tailwind-v4.cssTailwind v4 桥接层从 tokens.css 派生components.html参考组件夹具reference fixture38 个选择器、17 个类components.manifest.json组件清单与 Token 引用审计manifest.json包元数据分类、来源、推荐 craft 规则USAGE.mdAgent 与审阅者的使用顺序契约preview/colors / typography / spacing 三个可视化预览页source/证据与审计产物evidence.md、tokens.source.json、token-contract.report.json阅读顺序遵循 USAGE.md 的约定先读 USAGE.md 理解包契约 → 再读 DESIGN 文档把握视觉意图 → 将tokens.css粘贴进首个 artifact 的style块 → 用components.manifest.json做组件盘点 → 需要时用preview/页面做视觉检查。manifest.json 记录了这个包的来源类型为bundled即OpenDesign 精选内置夹具不声明对上游品牌仓库的实时抓取——source/evidence.md 明确说明了这一点。同时它建议在项目中使用时应用 color 与 accessibility-baseline 两条 craft 规则前者约束色彩角色分配后者保证对比度基线达标。2. 视觉主题与氛围为夜晚、突袭与群聊设计的 Dark-FirstDiscord 的产品场景是晚间、多人语音与群聊因此整个界面采用 dark-first 策略。默认画布是深色Background Primary#313338聊天列以略亮或略暗的层次叠加用于区分频道、子线程与侧面板。核心特征Key CharacteristicsDark-first 表面#1e1f22/#2b2d31/#313338三层深度Blurple#5865f2作为聊天表面上唯一饱和的强调色gg sansWhitney 风格用于全部文字——友好、几何、中性圆角方形服务器头像16px 圆角悬停时变为圆形聊天行紧凑间距、侧面板宽裕留白状态点绿色在线、黄色离开、红色勿扰、灰色离线像素对齐的 1px 分隔线低透明度、off-white 色调在 tokens.css 中这套氛围被压缩成三条品牌宣言文件头注释并精确映射为 Token三层深度阶梯、gg sans 的 400–800 字重梯度、Blurple 作为唯一饱和强调。--surface-warm: #1e1f22被注释为服务器列表轨道——最深一层恰好对应规范中 Background Tertiary 的职责。3. 色彩角色与 Token 映射3.1 主色Primary角色色值用途Blurple#5865f2品牌主色、主 CTA、提及高亮Blurple Hover#4752c4Blurple 的 hover/activeBlurple Soft#7289da遗留 Blurple、营销场景次要强调3.2 表面色Dark 主题默认角色色值用途Background Tertiary#1e1f22服务器列表轨道、最深背景Background Secondary#2b2d31频道侧栏、设置侧栏Background Primary#313338聊天表面、消息列Background Floating#111214悬浮 Popover、Tooltip、自动补全Background Modifier Hoverrgba(78, 80, 88, 0.3)行悬停遮罩Background Modifier Selectedrgba(78, 80, 88, 0.6)活动行3.3 表面色Light 主题角色色值用途Light Bg Primary#ffffffLight 主题聊天表面Light Bg Secondary#f2f3f5Light 主题侧栏Light Bg Tertiary#e3e5e8最深的亮色表面3.4 文本色角色色值用途Header Primary#f2f3f5频道标题、模态标题darkHeader Secondary#b5bac1次级标题Text Normal#dbdee1dark 主题正文——比纯白略冷Text Muted#949ba4时间戳、服务器名、次级元数据Text Link#00a8fc消息内超链接——天蓝区别于 blurpleChannels Default#80848e侧栏未激活频道名3.5 状态与语义色角色色值用途Status Online#23a55a在线点、成功状态Status Idle#f0b232离开/闲置点Status DND#f23f43勿扰同时充当破坏性红色Status Streaming#593695正在直播紫Status Offline#80848e离线灰Mention Highlightrgba(88, 101, 242, 0.1)含 提及行的淡 blurple 洗层3.6 边框与分隔线角色色值用途Background Modifier Accentrgba(255, 255, 255, 0.06)dark 主题标准分隔线Border Subtle#3f4147卡片实线边框3.7 从规范到 CSS 变量规范中的每一对角色→色值在 tokens.css 里都有同名或近义映射。例如:root { /* 表面三层深度 */ --bg: #313338; /* 聊天表面 / 主深色 */ --surface: #2b2d31; /* 频道侧栏、设置侧栏 */ --surface-warm: #1e1f22; /* 服务器列表轨道——最深一层 */ /* 前景 */ --fg: #dbdee1; /* text-normal */ --fg-2: #f2f3f5; /* header-primary */ --muted: #949ba4; /* text-muted */ --meta: #80848e; /* channels-default */ /* 强调 */ --accent: #5865f2; /* Blurple */ --accent-on: #ffffff; --accent-hover: #4752c4; --accent-active: color-mix(in oklab, var(--accent), black 14%); /* 语义 */ --success: #23a55a; /* status-online */ --warn: #f0b232; /* status-idle */ --danger: #f23f43; /* status-dnd / 破坏性红 */ }值得注意的工程细节--accent-active用color-mix(in oklab, ...)从主色派生按下态避免硬编码近似色--border与--border-soft分别代表低透明度白分隔线与卡片实线与规范中两类边框角色一一对应。source/tokens.source.json 为每个 Token 记录了layerA1-identity / A2 / B-slot与source行号如tokens.css:32相当于一份机器可读的规范追溯表。4. 排版规则gg sans、字重层级与永不缩小的 16px 正文4.1 字体族正文 / UI / 标题gg sansfallbackHelvetica Neue, Helvetica, Arial, sans-serifDisplay遗留 / WhitneyWhitneyfallbackgg sans代码 / 等宽gg monofallbackConsolas, Andale Mono, Courier New, Courier, monospace4.2 字号层级表角色字体字号字重行高字距备注Display Herogg sans56px (3.5rem)8001.1-0.02em营销 Hero页面标题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今日 16: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三个反引号代码块4.3 三条排版原则友好几何gg sans 取代 Whitneya/g/s 采用圆润终端——追求亲切而不牺牲小字号可读性以字重而非颜色建立对比层级来自 400→500→600→700→800 的字重梯度表面保持中性正文恒为 16px聊天消息不低于 16px密度来自行高1.375而非缩小字号。在 tokens.css 中字号被编码为从--text-xs: 12px到--text-4xl: 56px的 8 级刻度行高与字距则拆成--leading-body: 1.375、--leading-tight: 1.10、--tracking-display: -0.02em。注释明确说明h2 (32px) → 1.20、h3 (24px) → 1.25是品牌手感的一部分components.html 的样式块据此实现——h1用--text-4xl --tracking-displayh2覆盖为line-height: 1.20h3覆盖为line-height: 1.25。5. 组件样式规格5.1 按钮主按钮Primary背景#5865f2文本#ffffff内边距8px 16px圆角4pxHover#4752c4。用于主 CTA、Continue、进入服务器。次按钮Secondary背景#4e5058文本#ffffff内边距8px 16px圆角4pxHover#6d6f78。三级/弱化链接风格背景透明文本#dbdee1Hover 仅加下划线、背景不变。破坏性Destructive背景#da373c文本#ffffffHover#a12d2f。参考实现components.html为.btn基类补充了细节line-height: 1、gap: var(--space-2)、transition: background-color var(--motion-fast) var(--ease-standard)并用.btn:focus-visible { box-shadow: var(--focus-ring) }0 0 0 3px rgba(88, 101, 242, 0.3)处理键盘焦点可见性——这与 manifest 中推荐的 accessibility-baseline 规则一致。5.2 输入框背景#1e1f22文本#dbdee1边框1px solid #1e1f22圆角4px内边距10px 12px聚焦边框#5865f2components.html 中.field是标签输入框的纵向 flex 容器标签采用大写 0.04em字距 600 字重text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600placeholder 使用--muted聚焦态通过transition: border-color var(--motion-fast) var(--ease-standard)平滑切换到 Blurple 边框。5.3 服务器头像尺寸48×48px圆角默认16px圆角方形hover 与激活态过渡到50%激活态图标列左缘 4px 白色胶囊指示条components.html 把动画封装在.server-icon中transition: border-radius var(--motion-base) cubic-bezier(0.215, 0.61, 0.355, 1)hover 时border-radius: 50%——这与规范第 6 节的 350ms 圆形变换曲线完全一致。5.4 状态点尺寸10×10px边框3px solid background-tertiary制造凹槽效果位置头像右下角5.5 卡片 / Embeds背景#2b2d31dark或#f2f3f5light左边框4px solidembed 强调色圆角4px内边距8px 16px参考实现将.card定义为background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-6)。5.6 提及胶囊背景rgba(88, 101, 242, 0.3)文本#c9cdfb内边距0 2px圆角3pxcomponents.manifest.json 的组件分组审计显示buttons、inputs、cards、links、typography、layout 六组存在badges、keyboard、icons 三组未出现在该夹具中present: false。它同时记录了literals统计7 个颜色字面量、17 个像素值、3 个硬编码字体族并提供了已声明未引用Token 清单如--danger、--success、--radius-pill等这些 Token 属于为完整 schema 预留但当前组件未消费的槽位。6. 间距与布局4px 基准网格与三栏骨架基准单位4px。刻度4、8、12、16、20、24、32、40服务器轨道宽 72px固定频道侧栏宽 240px成员列表桌面端宽 240px聊天列流体最小 380pxtokens.css 将刻度编码为--space-14px到--space-1240px并额外提供区块纵向节奏--section-y-desktop: 80px/--section-y-tablet: 48px/--section-y-phone: 32px以及容器约束--container-max: 1200px与三档响应式 gutter24/16/16px。布局基元方面components.html 提供.containermax-width margin-inline: auto、.stack-3/.stack-4相邻兄弟间距、.hero-grid1.3fr/1fr1023px 断点收窄为单列与.features-grid3 列 → 2 列 → 1 列并把分隔线做成section section { border-top: 1px solid var(--border) }呼应规范中1px 低透明度分隔线的品牌特征。7. 动效规范时长hover 200ms服务器头像变圆 350mstooltip 淡入淡出 80ms缓动头像变换使用cubic-bezier(0.215, 0.61, 0.355, 1)先快后缓通知脉冲未读提及指示器1.4s ease-in-out infiniteToken 层将动效压缩为--motion-fast: 80ms、--motion-base: 200ms、--ease-standard: cubic-bezier(0.2, 0, 0, 1)头像的专用缓动曲线直接出现在.server-icon的 transition 中。聚焦环--focus-ring同样属于动效/可达性基础设施的一部分。8. 使用准则与反模式保留暗色外壳、紧凑密度与 blurple 动作层级这三者的一体性在浅色营销布局中单独使用 blurple 会破坏 Discord 产品气质。高导航强度界面应组织为轨道rail、侧栏与聊天列结构而非孤立的装饰卡片。表现人物、服务器或在线状态时使用圆角方形头像 状态点的语言。USAGE.md 的 Do/Avoid 清单给出了工程侧约束严格保留 schema Token 名称以保证跨品牌切换可靠用--accent承担主操作、链接与焦点态优先复用components.manifest.json中的组件分组而非发明新控件避免在:rootToken 块之外使用裸色值避免绕过tokens.css单独定义 Tailwind 值避免声称拥有上游原始来源证据。9. 落地集成从 CSS Token 到 Tailwind v4 与可视化验证9.1 直接引入 tokens.css按 USAGE.md 的流程将 tokens.css 粘贴进首屏 artifact 的style块之后所有组件 CSS 一律引用var(--token)不出现裸色值。参考夹具 components.html 本身就示范了这种用法它的全部可见色值均来自 Token。9.2 Tailwind v4 桥接tailwind-v4.css 是自动派生的桥接层头部注释明确Derived from tokens.css. Keep tokens.css as the source of truth.从 tokens.css 派生tokens.css 才是事实来源import tailwindcss; import ./tokens.css; theme { --color-bg: var(--bg); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-success: var(--success); --font-display: var(--font-display); --text-4xl: var(--text-4xl); --spacing-4: var(--space-4); --radius-md: var(--radius-md); --shadow-focus-ring: var(--focus-ring); --duration-base: var(--motion-base); --ease-standard: var(--ease-standard); /* ...其余映射见文件 */ }这样即可在 Tailwind 工具类如bg-accent、text-muted、rounded-md中消费整套 Discord Token。该文件是派生物应基于token-contract.report.json与 tokens.css 重新生成而非手工编辑source/evidence.md 对此有明确说明。9.3 契约审计与预览source/token-contract.report.json 将每个 TOKEN_SCHEMA 绑定映射回tokens.css的声明行用于契约审计components.manifest.json 提供组件盘点与 Token 引用统计undeclaredReferenced: []说明夹具中没有引用未声明的 Tokenpreview/colors.html、preview/typography.html、preview/spacing.html 三个预览页用于对色彩、排版与间距做视觉 sanity check。10. 可移植的 Discord 风格实现模板将上述规范汇总为一个可直接运行的落地骨架所有值来自 tokens.css并复用组件夹具中的类名style /* 第一步粘贴 tokens.css 的 :root 块见第 3.7 节 */ body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); } .server-rail { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3); background: var(--surface-warm); border-radius: var(--radius-md); } .server-icon { width: 48px; height: 48px; border-radius: 16px; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; transition: border-radius var(--motion-base) cubic-bezier(0.215, 0.61, 0.355, 1); } .server-icon:hover { border-radius: 50%; } .mention { background: rgba(88, 101, 242, 0.3); color: #c9cdfb; padding: 0 2px; border-radius: 3px; font-weight: 500; } .card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-6); } /style main div classserver-rail div classserver-iconOD/div div classserver-icon/div /div div classcard strongAda/strong span stylecolor: var(--meta); font-size: var(--text-xs)今日 16:32/span p为 span classmentionbatch-2/span 品牌添加 Token 夹具。/p /div /main总结Discord 设计系统的精髓可以浓缩为三句话dark-first 的三层明度阶梯#1e1f22 → #2b2d31 → #313338定义空间结构Blurple#5865f2作为唯一饱和强调色承担品牌与主操作gg sans 以 400–800 字重梯度建立层级16px 正文永不缩小。在 OpenDesign 仓库中这套规范已经沉淀为 tokens.css 的 Token 实现、components.html 的参考组件与 components.manifest.json 的审计清单Agent 可以按 USAGE.md 的流程直接复制消费并通过 tailwind-v4.css 桥接到 Tailwind 生态。若需查阅其他语言版本仓库还提供了 DESIGN-zh.md、DESIGN-ja.md、DESIGN-de.md 等 20 余种翻译。赞分享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 中 Discord 设计系统Blurple 暗色主题、gg sans 字体体系与可落地的 token 契约深度拆解 OpenDesign 中 Discord 设计系统Blurple 暗色主题、gg sans 字体体系与可落地的 token 契约 导读 本篇文章以AI 应用人工智能AI 技能设计系统媒体生成OpenDesign 中实现 Discord 风格设计系统暗色分层、Blurple 强调与 gg sans 排版实战指南OpenDesign 中实现 Discord 风格设计系统暗色分层、Blurple 强调与 gg sans 排版实战指南 本文以仓库内置的 Discord 设AI 应用人工智能AI 技能设计系统媒体生成复刻 Discord 暗色聊天产品质感OpenDesign 设计系统中的 Blurple 令牌与落地实践复刻 Discord 暗色聊天产品质感OpenDesign 设计系统中的 Blurple 令牌与落地实践 本文基于仓库中的设计系统规范文档 design syAI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考