OpenDesign GitHub 设计系统深度解析Primer 基础、功能密度与蓝白精确性的完整落地实现【免费下载链接】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-nl.mdGitHub 设计系统规范文档荷兰语版本为骨架结合 tokens.css、design-tokens.json、components.manifest.json 与 USAGE.md 等包内实现文件系统讲解 GitHub 风格界面的完整设计规范与工程化落地方式。读者读完可掌握该设计系统的全部颜色、排版、组件与间距规格并能在 OpenDesign 项目中直接粘贴 token 样式表、复用组件清单构建出具有 GitHub 气质的产品界面。1. 视觉主题与氛围工程化的表面而非装饰GitHub 设计系统文档分类为开发者工具 Developer Tools的核心主张是表面是工程构造出来的而不是装饰出来的。其页面背景为纯粹的#ffffff亮色或#0d1117深色内容以密集的矩形面板排列面板之间用发丝级细线分隔而非留白。信息密度本身就是品牌——列表行、代码行、仓库头部和通知卡片紧凑排列让进阶用户无需滚动即可扫描上百个条目。文档总结的关键特征如下纯白画布#ffffff或深海军黑#0d1117——没有暖色调、没有色偏发丝级灰色边框#d0d7de定义每个面板与区块Primer 蓝#0969da用于链接/主要操作GitHub 绿#1a7f37用于成功/合并正文使用 system-ui代码使用 SFMono——无自定义字体密集列表行、极简内边距留白是稀缺资源Octicon 图标系统为 16px / 24px——单线条、几何化、风格一致药丸形状态徽章具有强烈的颜色语义两个标志性强调色的设计哲学值得注意Primer 蓝与GitHub 绿都比消费级产品的蓝绿略显克制——饱和度足以在密集灰色文字中可读又克制到多个同时出现在一个视口中时能融入背景。这正是工具型界面与营销型界面在色彩心理上的分界线。2. 颜色体系与角色划分2.1 基础层PrimaryToken 角色色值用途Canvas Default#ffffff主要页面背景亮色主题Canvas Subtle#f6f8fa次级表面、侧边栏、输入框背景、头部条带Canvas Inset#eaeef2代码块背景、深层内嵌表面Fg Default#1f2328主要文字、标题、墨色Fg Muted#656d76次级文字、说明文字、文件路径2.2 品牌强调Brand AccentToken 角色色值用途Primer Blue#0969da链接、主要 CTA、焦点环基础色——通用交互色Primer Blue Hover#0550ae主要蓝的 hover/按下态Accent Subtle#ddf4ff柔和蓝表面用于提示框、信息横幅2.3 语义色SemanticToken 角色色值用途Success / Merge Green#1a7f37已合并的 PR、成功徽章、合并按钮Success Subtle#dafbe1成功表面色调Open Green#1a7f37打开的 issue/PR 状态Closed / Danger Red#cf222e已关闭的 PR、破坏性操作、校验错误Danger Subtle#ffebe9错误横幅表面Attention / Warning Yellow#9a6700琥珀色表面上的警告文字Attention Subtle#fff8c5警告横幅表面Done Purple#8250df已合并并归档、完成状态、高级徽章Sponsor Pink#bf3989赞助商爱心、GitHub Sponsors 品牌2.4 边框与分隔Border DividerToken 角色色值用途Border Default#d0d7de标准发丝线边框、面板轮廓Border Muted#d8dee4面板内部的细分隔线Border Subtle#eaeef2极淡的表格行分隔线2.5 深色主题Token 角色色值用途Dark Canvas#0d1117深色页面背景Dark Surface#161b22侧边栏、头部、次级表面Dark Border#30363d深色模式标准边框Dark Fg#e6edf3深色背景上的主要文字2.6 源码佐证tokens.css 中的语义绑定这套色板在 tokens.css 中体现为结构化的 CSS 自定义属性。值得注意的几条关键决策文件头注释已明确说明--bg: #ffffff; --surface: #f6f8facanvas-subtle--surface-warm直接别名到--surface——Primer 没有暖色层级--fg: #1f2328fg-default--muted: #656d76fg-muted--border: #d0d7de1px 发丝线——结构骨架--accent: #0969daPrimer Blue--accent-hover: #0550ae--success绑定到 GitHub 绿#1a7f37——合并 / 打开状态--accent-active用现代 CSS 的color-mix(in oklab, var(--accent), black 14%)计算按下态无需额外色值在 design-tokens.json 的契约报告中这套 token 的完整度评分为 100grade: excellent共 56 个 token 全部有tokens.css源码行号背书每个 token 都带有sources字段例如--bg指向tokens.css:30并分为 A1-identity8 个、B-slot4 个、A226 个、A1-structure18 个四个层级。3. 排版规则3.1 字体族正文 / UI-apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif代码 / Monoui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospaceEmojiApple Color Emoji, Segoe UI Emoji3.2 层级表角色字体字号字重行高字距备注Displaysystem-ui32px (2rem)6001.25-0.01em仓库头部、营销 heroH1system-ui24px (1.5rem)6001.25normal页面标题H2system-ui20px (1.25rem)6001.25normal章节标题H3system-ui16px (1rem)6001.25normal子章节、面板标题正文system-ui14px (0.875rem)4001.5normal默认文字大小——不是 16px小号文字system-ui12px (0.75rem)4001.4normal说明文字、文件元数据代码SFMono12px (0.75rem)4001.45normal代码块、diff行内代码SFMono0.85em400继承normal行内code片段3.3 三条核心原则14px 正文而非 16pxGitHub 的散文密度就是其身份产品以 14px 阅读以在视口内容纳更多行。二元字重默认一律 400标题与强调用 600。没有 500没有 700。永远使用系统字体绝不为 UI 加载 webfont——文字必须在慢速连接下也能即刻渲染。tokens.css 中对应的字号阶梯为--text-xs: 12px→--text-4xl: 32px12/14/14/16/20/24/28/32行高--leading-body: 1.5、--leading-tight: 1.25且只有 display 级标题使用--tracking-display: -0.01em。文档中h220px和 h316px刻意压缩靠近以换取密度的设计意图在 tailwind-v4.css 中被完整映射为--text-xl、--text-lg等 Tailwind 主题变量。4. 组件样式4.1 按钮主要按钮绿色背景#1f883d文字#ffffff边框1px solidrgba(31, 35, 40, 0.15)内边距5px 16px圆角6px阴影0 1px 0 rgba(31,35,40,0.1)Hover背景#1a7f37用途创建仓库、合并 Pull Request默认按钮背景#f6f8fa文字#1f2328边框1px solid#d0d7de内边距5px 16px圆角6pxHover背景#f3f4f6边框#d0d7de描边按钮蓝色链接风背景#ffffff文字#0969da边框1px solid#d0d7deHover背景#0969da文字#ffffff危险按钮背景#ffffff文字#cf222e边框1px solid#d0d7deHover背景#a40e26文字#ffffff边框#a40e264.2 卡片 / 方框背景#ffffff边框1px solid#d0d7de圆角6px内边距16px头部 16px内容头部带#f6f8fa条带与下边框4.3 输入框背景#ffffff边框1px solid#d0d7de圆角6px内边距5px 12px聚焦态边框#0969da光环0 0 0 3px rgba(9,105,218,0.3)4.4 状态药丸Issue / PR打开背景#1a7f37白色文字内边距 4px 10px圆角 9999px关闭背景#cf222e白色文字已合并背景#8250df白色文字草稿背景#6e7781白色文字4.5 标签Issue/PR 上的 Tag内边距0 7px圆角9999px字号12px / 500背景与文字是程序化生成的标签色 → 按对比度计算文字色4.6 源码佐证组件清单与实现components.manifest.json 是该包的组件审计清单fixture 内含 44 个选择器、21 个类、21 个元素分组为 buttons、inputs、badges、links、icons、typography、layout 七类cards 组在 fixture 中未呈现。按钮组引用的 token 包括--accent、--border、--radius-sm、--space-2、--text-sm、--motion-fast等输入框组额外引用--focus-ring审计还标注了 18 个已声明未引用的 token如--danger、--elev-raised说明组件 fixture 只覆盖了核心交互面。完整的参考实现可查看 components.html其中按钮 hover 与:focus-visible焦点环均以--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3)实现输入框 placeholder、label、focus 状态一应俱全可直接对照选择器使用。5. 间距与布局基础单位4px。间距刻度4、8、12、16、24、32、40、48。页面最大宽度1280pxContainer-xl。侧边栏桌面端 296px在 1012px 以下折叠。行内边距水平 16px、垂直 12px列表刻意紧凑。对应 tokens.css 中的--space-1至--space-12、--container-max: 1280px以及按断点划分的栅格--container-gutter-desktop: 24px/--container-gutter-tablet: 16px/--container-gutter-phone: 16px。components.html 的布局实现第 100-114 行演示了响应式写法.container使用max-width: var(--container-max)配合margin-inline: auto并在 1023px、639px 两个断点切换 padding 与section的纵向节奏--section-y-*桌面 64px / 平板 48px / 手机 32px。6. 动效时长hover 80ms菜单/popover 打开 200ms。缓动打开用ease-out关闭用ease-in。刻意回避页面加载动画、视差、持续微交互。事物直接出现不上演任何表演。tokens.css 将这三条落实为--motion-fast: 80ms、--motion-base: 200ms、--ease-standard: ease-out并在文件注释中强调GitHub 回避动画短促且目的明确。7. 使用约束Guardrails文档给出的使用准则是判断是否真的做出了 GitHub 气质界面的验收标准保持密集列表、描边方框与系统排版的一致性——孤立的绿色按钮不足以营造 GitHub 风格的产品表面。绿色只用于建设性的仓库操作蓝色用于链接与焦点红/紫/灰仅用于 issue、PR 与工作流状态。优先采用安静的 chrome、明确的边框与紧凑间距而非装饰性阴影或大型营销卡片。8. 包结构与使用顺序USAGE.mdUSAGE.md 定义了面向 OpenDesign 代理与审阅者的包级契约推荐按如下顺序消费本包先读USAGE.md理解包契约。再读 DESIGN.md规范文档英文原版DESIGN-nl.md为其荷兰语译本理解视觉意图、约束与反模式。将 tokens.css 粘贴进首个产物artifact的style块再写组件 CSS。用 components.manifest.json 获取紧凑组件清单需要精确选择器或状态时打开 components.html。需要视觉核对时查看preview/目录下的 colors.html、typography.html、spacing.html 预览页。包元数据见 manifest.jsonschema 为od-design-system-project/v1category 为 Developer ToolsimportMode为normalized并建议配合 craft 目录的 color 与 accessibility-baseline 规范使用。Do / Avoid 规则应做Do严格保留 schema token 名称保证跨品牌切换可靠。用--accent表达主要操作、链接、焦点态以及唯一清晰的视觉焦点。优先复用components.manifest.json中的组件组而不是发明新控件。将source/目录文件视为打包 fixture 回填的审计证据。应避免Avoid不要在复制的:roottoken 块之外使用裸十六进制色值。不要脱离tokens.css单独重定义 Tailwind 或 design-token 值。不要宣称存在原始上游源码证据——本包基于 OpenDesign 策展的打包 fixture见 source/evidence.md。不要添加components.html或DESIGN.md中不存在的组件配方。9. 工程化落地要点总结从规范文档到可运行代码本设计系统包的落地链路清晰完整DESIGN.md定义意图与规格 →tokens.css提供唯一的 token 事实来源 →design-tokens.json输出带源码行号背书的契约报告56 token评分 100→tailwind-v4.css将其桥接为 Tailwind 主题变量 →components.html给出全部 21 个类的参考实现 →preview/提供颜色/排版/间距三张视觉预览页。实践中最容易复现 GitHub 气质的三个关键是14px 正文与二元字重系统字体、零 webfont、发丝线边框而非阴影--elev-flat: none、--elev-raised仅用于罕见的悬浮元素、以及蓝色交互 / 绿色成功 / 红紫灰状态的严格语义分工。只要守住这三条配合上文的完整 token 表与组件规格即可在 OpenDesign 中稳定产出具备 Primer 基础与功能密度的开发者工具界面。【免费下载链接】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），仅供参考