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/github/DESIGN-ko.md为骨架结合仓库内的 tokens.css、USAGE.md、manifest.json 与 design-tokens.json 等配套产物展开。读者将掌握如何复刻 GitHub 式开发者工具产品界面紧凑密度、发丝级边框、Primer 蓝绿语义如何将整套设计语言落地为可复用的 CSS 设计令牌以及如何在 open-design 生态中把它当作一个可被 Agent 直接消费的设计系统包来使用。GitHub 风格设计系统Design System 2.0 包是 open-design 仓库design-systems/目录下按品牌维度组织的一类设计资产定位为Developer Tools开发者工具品类代码优先的平台、功能性的信息密度、蓝底白字的精确性、Primer 基础。它不是一份抽象的品牌愿景文档而是一份从色值到组件再到令牌都给出明确数值的、可直接复制运行的技术规范——既面向设计者也面向调用该设计系统的 AI Agent 与代码审查者。1. 视觉主题与氛围工程化的表面而非装饰GitHub 的界面是被工程化的而不是被装饰的。文档给出的核心判据是每一个像素都在宣告一种立场——这是为关心 diff、构建与 pull request 的人打造的工具。具体到视觉实现页面背景是干净的#ffffff亮色或#0d1117暗色不带任何暖色调或色偏内容不是靠留白分割而是靠发丝级灰色边框#d0d7de划分成一个个紧凑的矩形面板信息密度本身就是品牌列表行、代码行、仓库头部、通知卡片全部紧密排布让重度用户无需滚动即可扫读上百条条目。两个签名强调色Primer 蓝#0969da——链接与主要动作GitHub 绿#1a7f37——合并状态、成功、合并按钮本身。文档特别强调这两个颜色相比消费级产品常用的蓝绿要略微克制——饱和度足以在密集的灰字中读出又克制到同屏出现多个时能退入背景。关键特征清单全部有源码对应纯白画布#ffffff或深海军黑#0d1117——无暖意、无色调发丝灰边框#d0d7de定义每个面板Primer 蓝#0969da用于链接/主操作GitHub 绿#1a7f37用于成功/合并正文用 system-ui代码用 SFMono——不引入任何自定义字体最小内边距的紧凑列表行留白是稀缺资源Octicon 图标体系16px / 24px——单线条、几何化、高度一致带强色彩语义的药丸形状态徽章。2. 颜色调色板与角色2.1 主要Primary颜色令牌名色值用途Canvas Default#ffffff页面主背景亮色主题Canvas Subtle#f6f8fa次级表面、侧边栏、输入框背景、头部条带Canvas Inset#eaeef2代码块背景、深层内嵌表面Fg Default#1f2328主文本、标题、inkFg Muted#656d76次级文本、说明文字、文件路径2.2 品牌强调色Brand Accent令牌名色值用途Primer Blue#0969da链接、主要 CTA、焦点环基色——通用交互色Primer Blue Hover#0550ae主蓝的 hover / pressed 状态Accent Subtle#ddf4ff软蓝表面用于提示框、信息横幅2.3 语义色Semantic令牌名色值用途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 Default#d0d7de标准发丝边框、面板外轮廓Border Muted#d8dee4面板内部的分隔线Border Subtle#eaeef2极淡的表格行分隔线2.5 暗色主题令牌名色值用途Dark Canvas#0d1117暗色页面背景Dark Surface#161b22侧边栏、头部、次级表面Dark Border#30363d标准暗色模式边框Dark Fg#e6edf3暗色背景上的主文本3. 排版规则3.1 字体族正文 / UI-apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif代码 / 等宽ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospaceEmojiApple Color Emoji, Segoe UI Emoji3.2 层级Hierarchy角色字体字号字重行高字距备注Displaysystem-ui32px (2rem)6001.25-0.01em仓库头部、营销 heroH1system-ui24px (1.5rem)6001.25normal页面标题H2system-ui20px (1.25rem)6001.25normal区块标题H3system-ui16px (1rem)6001.25normal子区块、面板标题Bodysystem-ui14px (0.875rem)4001.5normal默认文本尺寸——不是 16pxBody Smallsystem-ui12px (0.75rem)4001.4normal说明文字、文件元数据CodeSFMono12px (0.75rem)4001.45normal代码块、diffCode InlineSFMono0.85em400inheritnormal行内code片段3.3 排版原则14px 正文而非 16pxGitHub 的散文密度就是它的身份用 14px 才能在单个视口内容纳更多行字重二分法默认一律 400标题与强调用 600。没有 500也没有 700永远使用系统字体不为 chrome 加载 webfont——即使在慢速连接下文本也必须即时渲染。这些数值在 tokens.css 中被一一落为令牌第 61–78 行--text-xs: 12px、--text-sm: 14px、--text-base: 14px、--text-4xl: 32px行高--leading-body: 1.5、--leading-tight: 1.25以及唯一的负字距--tracking-display: -0.01em仅 Display 级标题使用。文件中还注释了一句设计判断h220px与 h316px刻意压得较近以维持密度。4. 组件样式4.1 按钮Primary绿色背景#1f883d文本#ffffff边框1px solidrgba(31, 35, 40, 0.15)内边距5px 16px圆角6px阴影0 1px 0 rgba(31,35,40,0.1)Hover背景#1a7f37用途Create repository、Merge pull requestDefault背景#f6f8fa文本#1f2328边框1px solid#d0d7de内边距5px 16px圆角6pxHover背景#f3f4f6、边框#d0d7deOutline蓝色链接样式背景#ffffff文本#0969da边框1px solid#d0d7deHover背景#0969da、文本#ffffffDanger背景#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 / PROpen背景#1a7f37、白字、内边距 4px 10px、圆角 9999pxClosed背景#cf222e、白字Merged背景#8250df、白字Draft背景#6e7781、白字4.5 标签Issue / PR 上的 Tag内边距0 7px圆角9999px字体12px / 500背景与文本色程序化决定给定标签色 → 计算保证对比度的文本色组件层的落地证据在 components.manifest.json 中按钮组buttons的令牌引用为--accent / --bg / --border / --ease-standard / --fg / --font-body / --motion-fast / --radius-sm / --space-2 / --surface / --text-sm输入组inputs额外引用--focus-ring徽章组badges对应.status-open / .status-closed / .status-merged / .status-draft / .status-pill五个类。整个 fixture 共 44 个选择器、21 个类unusedDeclared与undeclaredReferenced均为可控集合说明令牌声明与组件引用之间是经过校验的闭环。5. 间距与布局基准单位4px。间距刻度4、8、12、16、24、32、40、48。页面最大宽度1280pxContainer-xl。侧边栏桌面端 296px在 1012px 及以下折叠。行内边距水平 16px、垂直 12px列表有意设计为紧凑。在 tokens.css 中这套规则对应--space-1到--space-124/8/12/16/20/24/32/48px第 81–89 行、--container-max: 1280px、桌面/平板/手机三档容器排水沟--container-gutter-desktop: 24px、tablet/phone 均为 16px第 121–124 行以及响应式区块节奏--section-y-desktop: 64px、--section-y-tablet: 48px、--section-y-phone: 32px。6. 动效时长hover 80ms菜单 / popover 打开 200ms。缓动打开用ease-out关闭用ease-in。明确回避页面加载动画、视差、持续性的微交互。元素是出现的而不是表演的。令牌层面对应--motion-fast: 80ms、--motion-base: 200ms、--ease-standard: ease-outtokens.css 第 114–118 行。7. 使用护栏Usage Guardrails原文档在使用指南中给出三条硬性约束必须整体遵守保持紧凑列表 边框盒子 系统排版三者同时存在——孤立的绿色按钮不足以营造 GitHub 式的产品表面颜色语义严格分区绿色只用于建设性仓库动作蓝色用于链接与焦点红 / 紫 / 灰只用于 issue、PR 与工作流状态优先安静的 chrome、明确的边框、紧凑的间距而不是装饰性阴影或大型营销卡片。补充一条来自 USAGE.md 的工程约束保持 schema 令牌名完全一致以保证跨品牌切换cross-brand switching的可靠性不要越过复制的:root令牌块去写裸色值也不要脱离tokens.css单独重定义 Tailwind 或 design-token 值。8. 源码级佐证从规范到可执行的设计系统包design-systems/github/不是一份孤立的 md 文档而是一套结构完整的 Design System 2.0 包。依据 manifest.json它的包契约如下schemaVersion: od-design-system-project/v1id: githubcategory: Developer Tools核心文件DESIGN.md视觉意图与反模式、tokens.css结构化令牌绑定、design-tokens.json派生令牌清单、tailwind-v4.cssTailwind v4 映射、components.html组件参考实现、components.manifest.json组件清单预览页preview/colors.html、preview/typography.html、preview/spacing.html审计证据source/evidence.md、source/tokens.source.json、source/token-contract.report.json引用方式importMode: normalized建议关联 craft 规范 color 与 accessibility-baseline。需要特别说明的边界source/evidence.md 明确指出该包基于 open-design 仓库内 curated 的 bundled fixture 派生并未声称对上游品牌仓库/官网做了重新爬取。因此引用时不应声称原始上游源码证据这是包自身声明的合规边界。8.1 tokens.css令牌如何表达设计决策tokens.css 的头部注释用三句话概括品牌身份同时也解释了几个关键的 schema 决策纯白画布#ffffff--surface: #f6f8fa次级表面 发丝边框#d0d7de——密度优先于装饰全站 system-ui不加载自定义 webfont14px 正文就是 GitHub 的产品密度Primer 蓝#0969da覆盖所有交互提示GitHub 绿#1a7f37只保留给 success / merge 状态。值得注意的映射细节--surface-warm别名为--surface——因为 Primer 体系里没有暖色调层第 32 行--fg-2与--meta同样是对--fg/--muted的别名第 36、38 行——Primer 中没有 B 槽位的拆分聚焦环--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3)第 112 行对应文档中输入框的 Focus 规范高度体系刻意扁平--elev-flat: none主深度信号是发丝边框而非阴影--elev-raised仅为罕见浮层保留第 103–108 行。8.2 design-tokens.json契约评分与分层design-tokens.json 是对令牌契约的机器可读核验结果共 56 个令牌全部有源码回源sourceBackedTokens: 56/56分层统计为 A1-identity 8 个、B-slot 4 个、A2 26 个、A1-structure 18 个契约评分为 100等级excellent且recommendRebuild: false——也就是说该包当前的令牌声明与 schema 契约完全一致无需重建。每个令牌都带有confidence: high及sources字段如tokens.css:30方便审计回溯。8.3 tailwind-v4.css设计令牌与 Tailwind 的桥接tailwind-v4.css 通过import ./tokens.css把设计令牌接入 Tailwind v4 的theme块并将语义令牌映射为工具类命名空间颜色--color-bg / --color-surface / --color-fg / --color-muted / --color-accent / --color-success / --color-warn / --color-danger等字体--font-display / --font-body / --font-sans / --font-mono字号与行高--text-xs … --text-4xl、--leading-body / --leading-tight、--tracking-display间距与圆角--spacing-1 … --spacing-12、--radius-sm / --radius-md / --radius-lg / --radius-pill阴影与动效--shadow-flat / --shadow-ring / --shadow-raised / --shadow-focus-ring、--duration-fast / --duration-base / --ease-standard布局--container-max与三档--spacing-container-*。文件首行注释明确了生成关系Derived from tokens.css. Keep tokens.css as the source of truth.——令牌的唯一事实源是 tokens.cssTailwind 映射与 design-tokens.json 都是派生产物不应手工编辑。9. 在 open-design 中消费该设计系统包依据 USAGE.md无论是人工开发还是 Agent 生成产物推荐的阅读与使用顺序为先读USAGE.md理解包契约读DESIGN.md英文规范本仓库同时提供 DESIGN-ko.md 等二十余种语言的翻译版内容与英文版一致掌握视觉意图、约束与反模式把tokens.css粘贴到首个产物style块的最前面再编写组件 CSS用components.manifest.json做紧凑的组件清单索引需要精确选择器或状态时打开components.html需要视觉抽查时查看preview/页面。Do保持 schema 令牌名精确一致以保障跨品牌切换用--accent承担主操作、链接、焦点态与唯一焦点元素优先复用components.manifest.json中的组件组而不是自造控件将source/文件视为打包 fixture 回填的审计证据。Avoid越过复制的:root令牌块写裸色值脱离tokens.css单独重定义 Tailwind 或 design-token 值声称存在原始上游源码证据本包基于 curated bundled fixture添加components.html或DESIGN.md中不存在的组件配方。在 open-design 前端应用apps/web/src中DesignSystemFlow、DesignSystemSwitchPicker、DesignSystemsSection等组件均消费design-systems/目录下的品牌包说明这套规范文档 令牌 组件清单 预览页 审计报告的包结构正是项目内设计系统切换与生成流程的实际输入。若想复刻到自己的项目中最小可行做法是复制tokens.css的:root块 → 按需引入tailwind-v4.css的theme映射 → 依据components.html复用组件选择器 → 用preview/三个页面做最终视觉校验。结语从一份设计意图文档出发open-design 将 GitHub 风格拆解为可验证、可生成、可审计的三层资产数值规范DESIGN 系列文档、令牌实现tokens.css / design-tokens.json / tailwind-v4.css、组件与审计产物components.html / components.manifest.json / source/。对希望让自己的产品具备开发者工具气质的团队这套包直接给出了从#0969da与#1a7f37到 14px 正文、4px 网格与 80ms 动效的完整答案对 AI Agent 而言它则是一份自带契约评分100 / excellent与回源证据tokens.css:N行号的、可以直接消费的结构化输入。赞分享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点击查看免费下载相关推荐GitHub 风格设计系统落地指南以 Open Design 的 Primer 基础与功能密度 Token 实现为准绳GitHub 风格设计系统落地指南以 Open Design 的 Primer 基础与功能密度 Token 实现为准绳 本篇指南以 Open Design 仓AI 应用人工智能AI 技能设计系统媒体生成OpenDesign 中的 GitHub 风格设计系统Primer 基础、功能密度与代码向界面规范OpenDesign 中的 GitHub 风格设计系统Primer 基础、功能密度与代码向界面规范 本文基于 design systems/github/DEAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 中的 GitHub 风格设计系统基于 Primer 规范的高密度开发者工具界面构建指南OpenDesign 中的 GitHub 风格设计系统基于 Primer 规范的高密度开发者工具界面构建指南 本文围绕 OpenDesign 仓库中 desiAI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考