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/voltagent/USAGE.md 为骨架结合 DESIGN.md、tokens.css、components.manifest.json 与源码级证据完整讲解 VoltAgent 这一「Design System 2.0」包的使用契约如何按顺序阅读包内文件、如何将令牌接入 artifact、如何基于清单复用组件以及如何在跨品牌切换与团队协作中守住设计一致性。读完本文你将掌握 OpenDesign 设计系统包的标准消费流程、56 个设计令牌的语义用法以及面向 Agent 与人工评审者双方的可执行规则。1. 认识 VoltAgent 包一份给 Agent 与评审者的包级契约VoltAgent 是 OpenDesign 仓库design-systems/目录下众多设计系统包之一属于「AI LLM」类别其定位在 manifest.json 中被描述为Bundled OpenDesign package for VoltAgent, derived from curated DESIGN.md, tokens.css, and components.html fixtures。它不是一个需要安装运行的 npm 包而是一套可直接复制进 artifact 的规范化设计资产——包括视觉意图文档、令牌样式表、组件参考实现、令牌契约报告与预览页面。USAGE.md 开篇即点明它的读者群体Design System 2.0 package guide for OpenDesign agents and reviewers.也就是说这份文档同时服务于两条使用链路生成侧Agent在 OpenDesign 中编写原型、落地页、仪表盘、幻灯片等 artifact 时按包内契约消费令牌与组件保证输出与品牌意图一致评审侧Reviewer / 人依据同一份契约核对产物是否越界例如是否引入了令牌之外的裸色值、是否自造了清单之外的组件配方。这种「一份契约、双侧共用」的机制正是 Design System 2.0 包在 OpenDesign 中的核心价值把设计约束从人的记忆里搬到可检索、可审计的文件契约里。2. 包的目录结构与文件职责总览在动手使用之前先建立对包结构的整体认知。VoltAgent 包位于design-systems/voltagent/各文件的职责如下文件/目录角色使用时机USAGE.md包级使用契约阅读入口每次消费该包时先读DESIGN.md视觉意图、约束与反模式需要理解为什么这样设计时读tokens.css唯一令牌事实源:root块必须原样粘贴进首个 artifact 的stylecomponents.manifest.json组件清单紧凑索引复用组件前查清单components.html组件参考实现含完整选择器需要精确选择器或状态时打开design-tokens.json令牌结构化导出TOKEN_SCHEMA需要机器可读的令牌元数据时使用tailwind-v4.cssTailwind v4 主题桥接使用 Tailwind 构建时导入manifest.json包清单schemaVersion: od-design-system-project/v1包被 OpenDesign 工具链识别时读取preview/颜色 / 排版 / 间距可视化检查页需要视觉 sanity check 时在浏览器打开source/溯源证据evidence.md、token-contract.report.json、tokens.source.json审计与回填核验时使用system/index.html、kit.html、kit.dark.html、tokens.default.json包内参考产出物其中manifest.json的files字段显式声明了主资产映射design→DESIGN.md、tokens→tokens.css、designTokens→design-tokens.json、tailwind→tailwind-v4.css、components→components.htmlusage指向USAGE.mdpreview指向三个预览页sourceFiles指向溯源证据三件套。包内所有「派生产物」都以 tokens.css 为唯一事实源——这一点在source/evidence.md中写得很明确design-tokens.json与tailwind-v4.css是派生输出应基于契约报告与令牌样式表重新生成而非手工编辑。3. 推荐阅读顺序五步消费流程USAGE.md 给出了明确的五步阅读顺序这是消费该包的标准路径先读 USAGE.md理解包级契约即本文所依据的文档再读 DESIGN.md掌握视觉意图、约束与反模式——这是为什么层面的内容将 tokens.css 粘贴进首个 artifact 的style块在编写任何组件 CSS 之前用 components.manifest.json 做紧凑的组件清单检索当精确选择器或状态hover、focus-visible 等重要时打开 components.html 查看参考实现需要视觉 sanity check 时在浏览器中检查preview/页面。这套顺序的背后逻辑是分层递进契约 → 意图 → 令牌 → 组件 → 视觉验证。其中第三步是硬性要求——令牌必须先行注入任何组件 CSS 都建立在令牌之上而不是在style里新造一套变量或裸色值。3.1 预览页零成本视觉核验preview/目录下有三个自包含的 HTML 预览页均通过../tokens.css引用令牌preview/colors.html以色卡网格展示--bg、--surface、--fg、--muted、--border、--accent、--success、--warn、--danger等颜色角色的实际渲染效果preview/typography.html展示字体族与字号阶梯的实际排版效果preview/spacing.html展示间距令牌的实际空间关系。这些页面无需任何构建步骤直接打开即可核对令牌在真实浏览器中的样子适合在提交 artifact 前做快速视觉验收。4. 设计亮点碳黑画布上的单一电光绿USAGE.md 提炼了 VoltAgent 的四个核心设计特征这些特征在 DESIGN.md 中有更完整的展开碳黑画布#050507 暖灰边框#3d3a39DESIGN.md 将其称为 Abyss Black 与 Warm Charcoal强调这种暖调灰让深色界面不冰冷、不无菌形成一种驾驶舱式的暖意这是纯蓝灰做不到的单一强调色Emerald Signal Green#00d992它是整个界面唯一的彩色能量源被形容为power-on信号——电路板上的电流隐喻。注意 DESIGN.md 明确禁止把它用作大面积背景填充它是强调色而非表面色双字体系统system-ui 承担标题原生权威感、零 FOIT/FOUTInter 承担正文与 UI几何精确SFMono 承担代码开发者终端可信度超紧标题行高1.0–1.11制造密集压缩的力量块让标题读起来像技术规格书而非营销文案。值得留意的是DESIGN.md 描述的是上游 VoltAgent 品牌的视觉语言而包内实际落地的令牌值以 tokens.css 为准。例如 DESIGN.md 中的强调色是#00d992而 tokens.css 中--accent: #7cff6b、--bg: #07110c——这是定制打包 fixture与上游原始页面之间的正常差异。source/evidence.md明确声明本包基于 OpenDesign 策展的打包 fixture并不声称对上游品牌仓库做过新鲜抓取。因此落地实现时永远以 tokens.css 为准这正是 USAGE.md 在 Avoid 一节中强调不得声称拥有上游原始源码证据的原因。5. 令牌系统56 个令牌的语义与使用规则5.1 令牌事实源tokens.csstokens.css 是包内唯一的令牌事实源。文件开头的注释直接点明了设计语义/* design-systems/voltagent/tokens.css * Structured token bindings for VoltAgent. * dark agent runtime surfaces, neon green command signals, and technical orchestration cards. */整个令牌集定义在单个:root块中共 56 个变量可按用途分为几组色彩令牌含语义令牌值语义角色--bg#07110c页面底色深墨绿黑--surface#101c16卡片/按钮表面--surface-warm#14281e暖调面板表面--fg#f4fff8主前景文本--fg-2#c8dfd0次级文本--muted#8ba493弱化文本/元数据--meta#7cff6b眉题/状态色电光绿--border#254132标准边框--border-soft#1a3024细分隔线--accent#7cff6b强调色主行动、链接、焦点--accent-on#07110c强调色之上的文本色--accent-hovercolor-mix(in oklab, var(--accent), black 8%)强调色悬停态--accent-activecolor-mix(in oklab, var(--accent), black 14%)强调色按压态--success#52e875成功态--warn#facc15警告态--danger#fb7185危险态值得注意的实现细节--accent-hover与--accent-active使用了color-mix(in oklab, ...)这一现代 CSS 颜色函数从基准强调色向黑色混入 8%/14%而不是写死两个近似色值——这让强调色的明暗变体在色相上保持完全一致。字体令牌令牌值--font-displayInter, system-ui, sans-serif--font-bodyInter, system-ui, sans-serif--font-monoJetBrains Mono, ui-monospace, Menlo, monospace字号阶梯12px → 64px--text-xs: 12px、--text-sm: 13px、--text-base: 15px、--text-lg: 17px、--text-xl: 22px、--text-2xl: 32px、--text-3xl: 46px、--text-4xl: 64px配合--leading-body: 1.56正文行高、--leading-tight: 1.07标题行高、--tracking-display: -0.02em标题字距。间距与圆角间距基于 4px 基元--space-1: 4px至--space-12: 48px圆角分四级——--radius-sm: 8px、--radius-md: 12px、--radius-lg: 18px、--radius-pill: 9999px胶囊。层级、动效与容器--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised: 0 24px 70px rgba(0, 0, 0, 0.42)、--focus-ring: 0 0 0 4px rgba(124, 255, 107, 0.30)动效时长--motion-fast: 120ms/--motion-base: 210ms缓动--ease-standard: cubic-bezier(0.2, 0, 0, 1)容器--container-max: 1180px三档栅距桌面 36px / 平板 24px / 手机 16px。5.2 机器可读的令牌契约design-tokens.jsondesign-tokens.json 将上述令牌导出为结构化 JSONformat: od-design-tokens/v1contract: TOKEN_SCHEMA。摘要数据印证了包的健康度totalTokens: 56declaredTokens: 56sourceBackedTokens: 56—— 全部令牌都有 tokens.css 源码背书分层统计A1-identity: 8、A1-structure: 18、A2: 26、B-slot: 4score: 100、grade: excellent、recommendRebuild: false。每个令牌条目都带typecolor / fontFamily / dimension / number / shadow / duration / cubicBezier、layer、confidence与sources精确到tokens.css行号例如--bg的sources: [tokens.css:7]。这套元数据让 Agent 可以程序化校验我引用的令牌是否真实存在、来源是否可追溯。而 source/token-contract.report.json 则把每一个 TOKEN_SCHEMA 绑定映射回 tokens.css 的声明行作为回填审计证据。5.3 Tailwind v4 桥接tailwind-v4.css如果构建环境使用 Tailwind v4可导入 tailwind-v4.css 将令牌桥接进themeimport tailwindcss; import ./tokens.css; theme { --color-bg: var(--bg); --color-surface: var(--surface); --color-accent: var(--accent); --font-display: var(--font-display); --font-body: var(--font-body); --text-2xl: var(--text-2xl); --spacing-4: var(--space-4); --radius-md: var(--radius-md); --shadow-raised: var(--elev-raised); /* ... 完整映射见文件本体 */ }注意该文件首行注释的硬约束Derived from tokens.css. Keep tokens.css as the source of truth.派生自 tokens.css保持 tokens.css 为事实源。桥接层只是把令牌重命名为 Tailwind 约定命名空间--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*值全部引用原始变量不复制值、不重新定义。6. 组件清单复用优先自造次之components.manifest.jsonschemaVersion: 1提供了紧凑的组件清单其 fixture 摘要显示参考实现包含 1 个样式块、48 个选择器、26 个类、19 个元素。清单将组件归入 9 个组组 id标签关键选择器/类buttonsButtons and calls to action.btn、.btn-primary、.btn-secondary含:hover、:focus-visibleinputsForm fields and controls.field、input、input:focus、labelcardsCards and panels.card-row、.panel、.panel-head、.tilebadgesBadges, chips, and status labels.statuslinksLinks and inline actionsatypographyTypography scale and text utilities.eyebrow、.lead、h1–h3layoutLayout primitives.container、.metric-grid、sectionkeyboardKeyboard hints未出现present: falseiconsIcon slots未出现present: false每个组都带tokenReferences直接列出该组件组消费的令牌——例如buttons组引用--accent、--accent-on、--border、--radius-md、--space-5、--motion-fast、--ease-standard等 12 个令牌cards组引用--border、--elev-raised、--radius-lg、--surface。这形成了一条可审计的「组件 → 令牌」依赖链。清单还统计了令牌使用情况declared56 个、referenced43 个、unusedDeclared7 个--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warnundeclaredReferenced: []——即没有任何被引用却未声明的令牌印证了令牌体系的自洽性。6.1 从参考实现中提取精确选择器当需要精确选择器或状态细节时打开 components.html。其style块提供了完整可复制的组件 CSS例如.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md); font: 700 var(--text-sm) / 1 var(--font-body); transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn-primary { background: var(--accent); color: var(--accent-on); } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); box-shadow: var(--elev-ring); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }这段代码演示了本包的全部交互哲学主按钮是通电状态绿色底--accent 深色字--accent-on悬停用--accent-hover轻微压暗并上浮 1px次按钮用--elev-ring环状描边制造内嵌感悬停时边框与文字转为强调色键盘焦点统一走--focus-ring4px 半透明绿环符合可达性基线。其他关键参考片段还包括面板与指标.panel使用color-mix(in oklab, var(--surface), transparent 4%)半透明表面 --elev-raised重阴影 --radius-lg.status::before用 8px 圆形--success色点模拟在线状态灯表单输入input采用--surface背景 --border边框 --radius-sminput:focus触发--focus-ring且边框转--accent响应式media (max-width: 860px)下.hero、.lower、.metric-grid、.card-row全部坍缩为单列。7. Do 与 Avoid可执行的设计约束USAGE.md 的 Do / Avoid 两节构成了消费该包时的行为准则原文内容如下逐条继承并附实现层面的解释应当Do精确保留 schema 令牌名以保证跨品牌切换的可靠性——令牌名就是契约本身改名等于破坏契约这与 tokens.schema.ts 定义的 TOKEN_SCHEMA 约束相呼应--accent用于主行动、链接、焦点态以及一个清晰的焦点元素——强调色是唯一能量源不可滥用一次只服务一个焦点优先复用 components.manifest.json 中的组件组再考虑发明新控件把source/文件当作打包 fixture 回填的审计证据——即source/evidence.md、source/token-contract.report.json、source/tokens.source.json用于核验令牌与组件的来源合法性。避免Avoid避免在复制的:root令牌块之外使用裸十六进制色值——颜色必须经由令牌引用这一条同时是 craft/color.md 与 craft/accessibility-baseline.mdmanifest 的craft.suggested列表所倡导的实践避免脱离 tokens.css 独立重定义 Tailwind 或设计令牌值——tokens.css 是唯一事实源任何派生层tailwind-v4.css、design-tokens.json都必须引用它而不是复制它避免声称拥有上游原始源码证据——本包基于 OpenDesign 策展的打包 fixture见 source/evidence.md不得虚构抓取来源避免添加 components.html 或 DESIGN.md 中未呈现的新组件配方——组件清单之外的自造组件会破坏可审计性。8. 从 DESIGN.md 理解为什么视觉意图与反模式速览虽然落地实现以 tokens.css 为准但 DESIGN.md 提供了理解品牌意图的完整背景尤其是它的 Dont 清单——这些反模式同样值得在评审时逐条对照不要用明亮/浅色背景做主表面——整个身份建立在近黑背景上不要引入暖色橙、红、黄作为装饰强调色——暖色只留给语义状态警告、错误不要把 Emerald Signal Green 用在大面积表面或背景填充上——它是强调色不是表面色不要把标题行高提高到 1.33 以上——压缩密度是工程平台身份的核心不要滥用重阴影——层级靠边框权重1px→2px→3px与颜色迁移表达阴影只留给 Level 4–5不要用纯白#ffffff作为默认正文色——Snow White#f2f2f2才是标准不要混入衬线或装饰字体——整套系统是几何无衬线 等宽不要给内容卡用超过 8px 的圆角——9999px 胶囊只留给小标签与徽章不要跳过暖灰边框系统——没有#3d3a39边框的卡片会在深色画布上失重不要做激进动画——动画缓慢而克制跑马灯 25–100s、光晕轻微脉冲快速动效与工程精密氛围相悖。此外DESIGN.md 还给出了可直接投喂给 Agent 的组件提示词模板与迭代指南例如use Warm Parchment (#b8b3b0) not make it lighter、用边框权重而非阴影表达层级、Always specify which font这些内容与 USAGE.md 的 Do/Avoid 一脉相承是编写/评审 artifact 时的速查字典。9. 实操路线把 VoltAgent 包用于你的下一个 artifact综合以上全部信息在 OpenDesign 中使用 VoltAgent 包的标准工作流可以收敛为六步读契约打开 USAGE.md确认包级规则看意图通读 DESIGN.md 的 Key Characteristics 与 Dont 清单建立视觉心智模型注入令牌将 tokens.css 的完整:root块原样粘贴进 artifact 首个style块——这是所有后续 CSS 的地基查清单复用组件对照 components.manifest.json 的九个组件组优先复用.btn、.panel、.field、.status等既有配方需要精确选择器时参考 components.html可选接入 Tailwind若使用 Tailwind v4导入 tailwind-v4.css 完成令牌桥接切勿自行重定义值视觉验收与审计打开preview/三个页面核对令牌渲染必要时用source/token-contract.report.json与 design-tokens.json 验证令牌来源对照 USAGE.md 的 Do/Avoid 清单做最终自检。需要再次强调的边界本包是 OpenDesign 的只读资产使用时是查看、复制、引用而非修改包内文件令牌的唯一事实源是 tokens.css一切派生产物都以它为基准重建。遵循这套流程无论是人类评审还是编码 Agent都能在同一份契约下稳定地产出符合 VoltAgent 品牌意图——碳黑画布、单一电光绿、密集排版、工程终端气质——的高质量界面。赞分享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 的 Colorful 设计系统包使用指南从令牌契约到组件落地的完整实战OpenDesign 的 Colorful 设计系统包使用指南从令牌契约到组件落地的完整实战 Colorful 是 OpenDesign 仓库中以 desigAI 应用人工智能AI 技能设计系统媒体生成OpenDesign Neobrutalism 设计系统包使用指南从令牌契约到 Agent 落地实践OpenDesign Neobrutalism 设计系统包使用指南从令牌契约到 Agent 落地实践 Neobrutalism 是 OpenDesign 仓库AI 应用人工智能AI 技能设计系统媒体生成OpenDesign Pacman 设计系统包使用指南从包契约到 Token 落地的完整实操OpenDesign Pacman 设计系统包使用指南从包契约到 Token 落地的完整实操 导读本文以 OpenDesign 仓库 design systAI 应用人工智能AI 技能设计系统媒体生成上一篇如何三分钟搞定全网视频音频下载这款免费神器让你轻松获取任何网络资源下一篇终极优化指南如何让ultimateALPR-SDK在低端CPU上也能流畅运行创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考