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 仓库中 design-systems/github/ 设计系统包展开。它是一套面向代码开发者工具的完整品牌设计规范以 Primer 蓝白精确、功能化信息密度和 system-ui 系统字体为核心最终沉淀为DESIGN.md设计散文、tokens.css语义化 Token 样式表、components.html参考组件夹具与manifest.json包元数据四件套。读完本文你将掌握该包的全部设计 Token、组件配方、使用边界以及它在 OpenDesign设计系统 2.0包契约中的运行方式能够直接把它拼进 Agent 提示词或落地为真实产品界面。1. 包结构与阅读顺序一个可移植的设计系统包长什么样OpenDesign 的 design-systems/README.md 规定每个子目录都是一个可移植的设计系统包目录骨架为design-systems/slug/其中manifest.json、DESIGN.md、tokens.css是三个必需文件github包还额外携带了富文件design-systems/github/ ├── manifest.json # 稳定发现元数据、来源归属、包路径声明 ├── DESIGN.md # 面向 Agent 的规范设计散文本文基于 DESIGN-es.md 西班牙语版 ├── tokens.css # 编译后的语义 Token 样式表唯一事实来源 ├── USAGE.md # Agent/评审者的包契约阅读指南 ├── components.html # 独立组件参考夹具 ├── components.manifest.json # 由 components.html tokens.css 派生的组件/Token 索引 ├── design-tokens.json # 派生的 Design Tokens JSON ├── tailwind-v4.css # 派生的 Tailwind v4 映射 ├── preview/ # 索引预览页colors / typography / spacing ├── source/ # 导入证据、Token 契约报告 └── DESIGN-*.md # 多语言规范副本zh / es / ja / fr ...USAGE.md 明确给出了包契约的阅读顺序先读USAGE.md理解包契约再读DESIGN.md了解视觉意图、约束与反模式将tokens.css粘贴进第一个产物的style块之后再写组件 CSS用components.manifest.json获得紧凑的组件清单需要精确选择器或状态时打开components.html需要视觉抽查时查看preview/页面。从源码结构看manifest.json 使用od-design-system-project/v1schema声明了source.type: bundled来源为 OpenDesign 策划的打包夹具并给出了craft.suggested为color与accessibility-baseline两个规范约束。source/evidence.md 也特别强调该包不声称对上游原始品牌仓库或官网做过重新抓取它是基于策划好的打包夹具派生的——这是使用时需要明确的来源边界。2. 视觉主题与氛围工程化的表面而非装饰GitHub 的表面是被工程化出来的不是被装饰出来的。每个像素都在宣告一种立场这是给关心 diff、构建和 pull request 的人使用的工具。页面背景是干净的#ffffff浅色或#0d1117暗色内容被布置在密集的矩形面板中面板之间用一像素的细边框hairline而非留白分隔。信息密度就是品牌本身——列表行、代码行、仓库头部、通知卡片都挤在一起让高级用户可以不滚动就扫完上百个条目。标志性强调色是两个Primer 蓝#0969da——用于链接与主要操作GitHub 绿#1a7f37——用于已合并状态、成功状态与 merge 按钮本身。两者与消费类产品的蓝绿相比都显得略微收敛饱和度足以在密集灰字上被辨认又克制到多个同时出现在一个视口时能退入背景。排版上整个产品使用system-ui字体栈保证文本在任何操作系统上都清晰渲染代码使用SFMono / Menlo / Consolas。没有编辑性展示字体——GitHub 的声音就是用户当前所在系统的声音。关键特征一览继承自规范特征取值画布纯白#ffffff或深藏青黑#0d1117——无暖意、无色调边框灰色细边框#d0d7de定义每个面板与区块强调色Primer 蓝#0969da链接/主操作GitHub 绿#1a7f37成功/合并字体system-ui 用于散文SFMono 用于代码——无自定义字体密度列表行填充最小化留白稀缺图标Octicon 风格 16px / 24px——单笔划、几何化、一致徽章药丸形状态徽章语义色明确3. 颜色调色板与角色3.1 主色PrimaryToken 角色色值用途Canvas Default#ffffff页面主背景浅色主题Canvas Subtle#f6f8fa次级表面、侧边栏、输入框背景、头部色带Canvas Inset#eaeef2代码块背景、深层内嵌表面Fg Default#1f2328主文本、标题、墨色Fg Muted#656d76次级文本、说明文字、文件路径3.2 品牌强调色Brand AccentToken 角色色值用途Primer Blue#0969da链接、主 CTA、焦点环底色——通用交互色Primer Blue Hover#0550ae主蓝的 hover/按下态Accent Subtle#ddf4ff提示条、信息横幅的柔和蓝色表面3.3 语义色SemanticToken 角色色值用途Success / Merge Green#1a7f37已合并 PR、成功徽章、merge 按钮Success Subtle#dafbe1成功表面淡色Open Green#1a7f37issue/PR 的打开状态Closed / Danger Red#cf222e已关闭 PR、破坏性操作、校验错误Danger Subtle#ffebe9错误横幅表面Attention / Warning Yellow#9a6700琥珀色表面上的警告文本Attention Subtle#fff8c5警告横幅表面Done Purple#8250df已合并并归档、完成状态、高级徽章Sponsor Pink#bf3989赞助者爱心、GitHub Sponsors 品牌3.4 边框与分隔线Border DividerToken 角色色值用途Border Default#d0d7de标准一像素边框、面板轮廓Border Muted#d8dee4面板内部的分隔线Border Subtle#eaeef2表格行之间的细微分隔线3.5 暗色主题Dark ThemeToken 角色色值用途Dark Canvas#0d1117暗色页面背景Dark Surface#161b22侧边栏、头部、次级表面Dark Border#30363d暗色模式标准边框Dark Fg#e6edf3暗背景上的主文本4. 排版规则4.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 Emoji4.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子章节、面板头部Bodysystem-ui14px (0.875rem)4001.5normal默认文本尺寸——不是 16pxBody Smallsystem-ui12px (0.75rem)4001.4normal说明文字、文件元数据CodeSFMono12px (0.75rem)4001.45normal代码块、diffCode InlineSFMono0.85em400inheritnormal行内code片段4.3 三条原则正文 14px 而非 16pxGitHub 的散文密度就是它的身份产品以 14px 阅读是为了在视口中容纳更多行。字重二元化默认全部 400标题与强调用 600。没有 500、没有 700组件中的标签与按钮主色等少数位置除外。永远使用系统字体绝不为界面 chrome 加载 webfont——慢网速下文本也必须即时渲染。5. 组件样式配方5.1 按钮Buttons主按钮绿色 Primary属性值Background#1f883dText#ffffffBorder1px solidrgba(31, 35, 40, 0.15)Padding5px 16pxRadius6pxShadow0 1px 0 rgba(31,35,40,0.1)Hoverbackground#1a7f37用途创建仓库、合并 pull request默认按钮Default属性值Background#f6f8faText#1f2328Border1px solid#d0d7dePadding5px 16pxRadius6pxHoverbackground#f3f4f6、border#d0d7de描边按钮Outline蓝链风格属性值Background#ffffffText#0969daBorder1px solid#d0d7deHoverbackground#0969da、text#ffffff危险按钮Danger属性值Background#ffffffText#cf222eBorder1px solid#d0d7deHoverbackground#a40e26、text#ffffff、border#a40e265.2 卡片 / 盒子Cards / BoxesBackground#ffffffBorder1px solid#d0d7deRadius6pxPadding16px头部 16px主体头部有一条#f6f8fa色带并带下边框5.3 输入框InputsBackground#ffffffBorder1px solid#d0d7deRadius6pxPadding5px 12pxFocusborder#0969da、ring0 0 0 3px rgba(9,105,218,0.3)5.4 状态药丸Status PillsIssue / PR状态背景文本Open打开#1a7f37白色padding 4px 10pxradius 9999pxClosed关闭#cf222e白色Merged已合并#8250df白色Draft草稿#6e7781白色5.5 标签LabelsIssues/PRs 上的标签Padding0 7pxRadius9999pxFont12px / 500背景与文本是程序化计算的标签颜色 → 按对比度计算文本色6. 间距与布局基准单位4px。间距刻度4、8、12、16、24、32、40、48。页面最大宽度1280pxContainer-xl。侧边栏桌面端 296px在 1012px 以下折叠。行填充水平 16px、垂直 12px列表按设计保持密集。7. 动效Motion时长hover 用 80ms菜单/弹出层打开用 200ms。缓动打开用ease-out关闭用ease-in。刻意避免页面加载动画、视差、持续性微交互。东西是出现的不是表演的。8. 使用限制Usage Guardrails密集列表、带边框的盒子与系统排版必须组合出现孤立的绿色按钮不足以构成类似 GitHub 的产品表面。绿色只用于仓库的建设性操作蓝色用于链接与焦点红/紫/灰仅用于 issue、PR 与工作流状态。偏好安静的界面 chrome、明确的边框与紧凑间距而非装饰性阴影或营销风大卡片。9. tokens.css 源码级解读语义 Token 契约tokens.css 是这套规范唯一的编译后事实来源。它在头部注释中直接给出了三条品牌身份陈述并逐条记录 schema 决策--bg: #ffffff、--surface: #f6f8facanvas-subtle--surface-warm直接别名--surfacePrimer 没有暖色层--fg: #1f2328fg-default、--muted: #656d76fg-muted--border: #d0d7de——1px 细边框即结构骨架--accent: #0969daPrimer Blue、--accent-hover: #0550ae--success绑定 GitHub 绿#1a7f37合并 / 打开状态--tracking-display: -0.01em仅 Display 级标题使用--text-base: 14px14px 正文就是 GitHub 的产品密度--radius-sm: 6px按钮/输入框通用的 Primer 圆角。值得注意的几处细节焦点环统一为--focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3)输入框与按钮:focus-visible共用深度信号GitHub 用细边框而非阴影表达层级--elev-flat: none是默认--elev-raised只是极少漂浮元素的轻量提示圆角体系--radius-sm与--radius-md都是 6px统一 Primer 圆角--radius-lg12px药丸为--radius-pill: 9999px响应式间距--section-y-desktop: 64px / tablet: 48px / phone: 32px配合--container-gutter-desktop/tablet/phone形成完整断点体系。10. 组件夹具与派生文件规范如何被验证10.1 components.html唯一可见值来自 Tokencomponents.html 是完整可运行的参考组件夹具其meta namedescription明确声明每个可见值都来自 tokens.css——没有裸 hex、没有脱离 Token 的字体。它覆盖了 hero 网格、features 三栏、PR 状态盒子、表单字段等真实场景并对应 components.manifest.json 中的组件分组索引buttons按钮、inputs输入框、badges状态药丸、links链接、icons图标、typography排版、layout布局共 7 组其中cards分组标记为present: false该夹具中盒子由.box结构承担。该清单还统计了 44 个选择器、21 个类、21 个元素并列出每个组引用的 Token如 buttons 组引用--accent、--radius-sm、--motion-fast等可据此核对组件→Token的依赖关系。10.2 design-tokens.json契约评分design-tokens.json 是派生的 Design Tokens JSONod-design-tokens/v1格式摘要显示共 56 个 Token全部声明并有源码背书分层为 A1-identity8、B-slot4、A226、A1-structure18整体评分 100、评级 excellent、建议不重建recommendRebuild: false。每个 Token 都带sources字段回指tokens.css的具体声明行例如--bg→tokens.css:30构成完整的溯源链。10.3 tailwind-v4.css与 Token 同步的映射tailwind-v4.css 以import ./tokens.css为源头在theme块中把语义 Token 一一映射为 Tailwind v4 设计变量--color-accent、--font-sans、--text-base、--spacing-*、--radius-*、--shadow-*、--duration-*、--ease-standard等。它属于派生缓存而非并列事实来源——USAGE.md 明确要求不要脱离 tokens.css 重新定义 Tailwind 或设计 Token 值。10.4 预览页与来源证据preview/ 下提供colors.html、typography.html、spacing.html三个视觉抽查页对应 manifest 中preview.pages的 colors / typography / spacing 三种角色source/ 下的evidence.md与token-contract.report.json则是打包夹具回填的审计证据。整个派生链的关系是tokens.css为唯一源头components.manifest.json由components.htmltokens.css派生design-tokens.json由契约报告派生且必须与tokens.css一致tailwind-v4.css由tokens.css派生见 design-systems/README.md。11. 实战应用如何在 OpenDesign 中消费这个包在 OpenDesign 中选中该包或走项目创建流程时包的设计上下文会被组合进 Agent 提示词见 design-systems/README.md。落地到实际产物时推荐的接入方式是粘贴 Token把 tokens.css 的:root块粘贴到产物第一个style块后续组件 CSS 一律引用var(--*)不写裸 hex复用组件优先从 components.manifest.json 复用既有组件组而不是发明新控件需要精确选择器时对照 components.html保留 schema 名称严格保留 Token 的 schema 名称--bg、--surface、--accent、--success、--border等这样跨品牌切换在 OpenDesign 的 151 个包目录间切换时才能保持可靠遵守语义分工--accent只用于主操作、链接、焦点与唯一视觉焦点元素绿色只用于成功/合并红色/紫色/灰色只用于 issue、PR、工作流状态视觉抽查需要快速确认效果时打开 preview/colors.html、preview/typography.html、preview/spacing.html 三个预览页。12. 结论与避坑清单GitHub 风格的本质不是一个绿色按钮而是密集列表 细边框盒子 系统字体 克制的语义色四位一体的组合。使用该包时记住三条硬约束不要在原:rootToken 块之外使用裸 hex 值不要脱离tokens.css重新定义 Tailwind 或设计 Token 值不要添加components.html或DESIGN.md中不存在的组件配方。此外来源归属上要保持清醒该包是基于 OpenDesign 策划的打包夹具派生的source.type: bundled不应声称是上游原始品牌资产的官方规范见 source/evidence.md。遵循以上规则你就能在 OpenDesign 的 Agent 工作流里稳定复刻出高保真的 GitHub 工程化界面。赞分享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 中复刻 Miro 视觉协作风设计系统从 DESIGN.md 到 tokens.css 的完整实战指南在 OpenDesign 中复刻 Miro 视觉协作风设计系统从 DESIGN.md 到 tokens.css 的完整实战指南 本文以仓库内 design sAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 苹果风格设计系统包实战指南从 DESIGN.md 设计规范到 tokens.css 可执行令牌OpenDesign 苹果风格设计系统包实战指南从 DESIGN.md 设计规范到 tokens.css 可执行令牌 本文围绕 OpenDesign 仓库内置AI 应用人工智能AI 技能设计系统媒体生成OpenDesign 中的 Agentic 设计系统从 DESIGN.md 设计意图到 tokens.css 编译产物的完整解析OpenDesign 中的 Agentic 设计系统从 DESIGN.md 设计意图到 tokens.css 编译产物的完整解析 本篇以 OpenDesignAI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考