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/retro设计系统包的完整使用指南核心基于 USAGE.md 的包契约约定并结合 DESIGN.md、tokens.css、components.manifest.json 与 design-tokens.json 等配套文件展开。读者尤其是接入 OpenDesign 的编码 Agent、设计系统评审者与前端开发者读完本文后将掌握如何按正确顺序消费 Retro 包、如何正确复制并复用 56 个设计令牌、如何引用组件清单避免发明新控件以及如何规避该包明确列出的反模式最终在 OpenDesign 生成产物中稳定复现高对比复古high-contrast retro风格。一、包契约概览Retro 是什么design-systems/retro是 OpenDesign 仓库中按 Design System 2.0 规范组织的一个「捆绑式」bundled设计系统包类别为Retro Nostalgic复古与怀旧其 manifest.json 明确声明了包的身份与文件组成{ schemaVersion: od-design-system-project/v1, id: retro, name: Retro, category: Retro Nostalgic, description: Bundled OpenDesign package for Retro, derived from curated DESIGN.md, tokens.css, and components.html fixtures., source: { type: bundled, origin: OpenDesign curated bundled fixture }, files: { design: DESIGN.md, tokens: tokens.css, designTokens: design-tokens.json, tailwind: tailwind-v4.css, components: components.html }, usage: USAGE.md, componentsManifest: components.manifest.json, importMode: normalized, craft: { applies: [], suggested: [color, accessibility-baseline] }, preview: { dir: preview, pages: [] }, sourceFiles: { evidence: source/evidence.md, tokens: source/tokens.source.json, report: source/token-contract.report.json } }值得注意的契约要点source.type bundled该包基于 OpenDesign 精选的捆绑 fixture 生成不声明对上游原始品牌仓库或网站的重新抓取source/evidence.md 对此有专门说明。importMode normalized导入模式为归一化令牌与样式在进入产物前经过标准化处理。craft.suggestedmanifest 建议在创作时套用 color 与 accessibility-baseline 两套 craft 规则——前者约束配色纪律后者给出对比度、触控目标等可量化的无障碍底线如正文常规文本需 ≥ 4.5:1 对比度、普通控件触控目标 ≥ 24×24 CSS px。preview与sourceFiles分别指向可视化预览页与审计证据文件后文会详述。二、推荐的阅读与使用顺序Read OrderUSAGE.md 给出了五步消费流程这是 Agent 与评审者接入该包的标准动作序列先读本指南USAGE.md理解包契约即当前这份文档。阅读 DESIGN.md掌握视觉意图、约束条件与反模式anti-patterns清单。将 tokens.css 粘贴到首个产物的style块中然后再编写组件 CSS——这是保证令牌体系不被绕过的关键动作。使用 components.manifest.json 获取紧凑的组件清单当需要精确选择器或状态细节时打开 components.html 查看参考实现。需要视觉抽查时检查 preview/ 下的页面。这套顺序的本质是「契约 → 意图 → 令牌 → 组件 → 视觉验证」的依赖链令牌必须先于组件 CSS 就位组件清单应先于新控件的发明被查询预览页只用于最终的人眼/工具校验。三、设计要点设计系统的「身份声明」USAGE.md 用三组关键词概括 Retro 包的设计身份这些声明在 DESIGN.md 中有完整展开维度声明值视觉风格Visual stylehigh-contrast, retro高对比、复古色彩立场Color stanceprimary, neutral, success, warning, danger设计意图Design intent在保持可用性与可读性的前提下让产出物可被识别为这一风格家族主色Primary#3B82F6来自风格基座的令牌DESIGN.md 进一步细化了该风格的落地规则色彩Primary#3B82F6用于 CTA 强调Surface#FFFFFF用于大面积背景与卡片正文保持 Text#111827以保证可读性。Secondary 为#8B5CF6Success/Warning/Danger 分别为#16A34A/#D97706/#DC2626Neutral 由 surface 令牌派生以兼容官方格式。字体桌面优先的表现性字阶desktop-first expressive scaledisplay 与 primary 家族使用 Macondomono 使用 JetBrains Mono字重覆盖 100–900标题承载风格个性正文优化扫读性与对比度。间距与栅格间距刻度为 4/8/12/16/24/32保持区块间一致的纵向节奏列与模块对齐到可预测的栅格避免临时偏移。布局与构成偏好内部内边距一致的内容块层级顺序保持「标题 → 支撑文案 → 主行动」先用留白区隔内容再考虑边框与阴影。组件按钮主行动用 Primary次行动保持中性输入框有强 focus-visible 状态、清晰标签与可预期的错误提示卡片/区块统一圆角、间距与抬升策略。动效与交互以 Primary 作为交互信号默认 150–250ms 短促过渡与稳定缓动hover、focus-visible、active、disabled、loading 状态必须显式定义。语气与品牌文案风格贴合视觉风格——简洁、自信、产品导向微文案行动导向避免通用填充语。反模式不引入调色板之外的色值不用同一字号/字重压平层级不添加损害可读性或无障碍的装饰效果不在同一界面混入无关的视觉隐喻。四、设计令牌深度解析tokens.css 的 56 个令牌tokens.css 是该包所有派生物的事实源头source of truth。文件开头的注释直接点题/* design-systems/retro/tokens.css * Structured token bindings for Retro. * retro interface with warm colors, chunky controls, and nostalgic product cards. */整个令牌体系定义在:root块中共 56 个令牌按 design-tokens.json 的分层统计可划分为四层层layer数量含义A1-identity8品牌身份令牌--bg、--surface、--fg、--muted、--border、--accent、--font-display、--font-bodyB-slot4语义槽位令牌--surface-warm、--fg-2、--meta、--border-softA226派生/补充令牌hover 态、状态色、字号、间距、圆角、阴影、动效等A1-structure18结构令牌字号刻度、行高、区块纵向间距、容器宽度与留白4.1 色彩令牌Color令牌值层--bg#fff4cfA1-identity--surface#fffaf0A1-identity--surface-warm#ffdca8B-slot--fg#2a1810A1-identity--fg-2#593625B-slot--muted#8a6652A1-identity--meta#d24b1fB-slot--border#d9aa7aA1-identity--border-soft#efd0abB-slot--accent#d24b1fA1-identity--accent-on#ffffffA2--accent-hovercolor-mix(in oklab, var(--accent), black 8%)A2--accent-activecolor-mix(in oklab, var(--accent), black 14%)A2--success#3d8f4fA2--warn#f2a93bA2--danger#b83a2fA2注意实际捆绑令牌中的主强调色是暖橙#d24b1f--accent/--meta与 DESIGN.md 中提到的通用 Primary#3B82F6属于风格基座层面的参考色以tokens.css中声明的值为准这也是 USAGE.md「Avoid 原始 hex 出现在:root令牌块之外」的用意。--accent-hover/--accent-active使用现代 CSScolor-mix(in oklab, ...)语法动态派生保证 hover/active 态始终与基色同源。4.2 字体令牌Typography令牌值--font-displayCourier New, ui-monospace, monospace--font-bodyInter, system-ui, sans-serif--font-monoCourier New, ui-monospace, monospace--text-xs/--text-sm/--text-base12px/14px/16px--text-lg/--text-xl18px/24px--text-2xl/--text-3xl/--text-4xl36px/54px/76px--leading-body/--leading-tight1.52/1.06--tracking-display0display 与 mono 家族共享 Courier New 等宽栈赋予标题与数据指标强烈的「复古终端」气质正文则回落到 Inter 无衬线以保证长文可读性——这正是「标题携带风格个性、正文优化扫读与对比」意图的令牌级落地。4.3 间距、圆角、阴影与动效Structure / A2间距刻度采用 4px 基数--space-1(4) /--space-2(8) /--space-3(12) /--space-4(16) /--space-5(20) /--space-6(24) /--space-8(32) /--space-12(48)。圆角体系--radius-sm(4px) /--radius-md(8px) /--radius-lg(12px) /--radius-pill(9999px)。阴影抬升策略--elev-flat: none平层--elev-ring: 0 0 0 1px var(--border)描边环用于次级按钮--elev-raised: 6px 6px 0 rgba(42, 24, 16, 0.26)硬偏移投影复古「硬阴影」质感--focus-ring: 0 0 0 4px rgba(210, 75, 31, 0.28)统一焦点环动效与容器--motion-fast(150ms) /--motion-base(240ms) /--ease-standard(cubic-bezier(0.2, 0, 0, 1))--container-max(1180px)gutters 桌面/平板/手机分别为 36/24/16px--section-y-*为 96/68/48px 的区块纵向节奏。4.4 令牌契约审计source/token-contract.report.json 将 TOKEN_SCHEMA 的每一个绑定映射回tokens.css的具体声明行如--bg→tokens.css:7、--accent→tokens.css:16。审计结论为summary: { totalTokens: 56, declaredTokens: 56, sourceBackedTokens: 56, aliasTokens: 0, score: 100, grade: excellent, recommendRebuild: false }即 56 个令牌全部有源码背书、无别名令牌、无未声明引用评分 100、等级 excellent。这意味着按 USAGE.md 第 3 步粘贴tokens.css后组件 CSS 中引用的每一个var(--*)都有确定来源跨品牌切换cross-brand switching时不会出现悬空引用。五、组件清单复用而非发明components.manifest.json 是包内组件的紧凑索引。它记录了参考 fixture 的规模与结构fixture: { title: Retro - reference components, description: Reference fixture for design-systems/retro: retro interface with warm colors, chunky controls, and nostalgic product cards., styleBlockCount: 1, selectorCount: 48, classCount: 26, elementCount: 19 }manifest 将组件划分为 9 个组其中 7 个存在present: true2 个缺席keyboard键盘提示、icons图标槽组 ID标签关键选择器/类buttonsButtons and calls to action.btn.btn-primary.btn-secondary引用--accent、--accent-on、--elev-ring、--motion-fast等 12 个令牌inputsForm fields and controls.fieldinputlabel引用--border、--radius-sm、--space-*cardsCards and panels.card-row.panel.panel-head.tile引用--elev-raised、--radius-lgbadgesBadges, chips, and status labels.statuslinksLinks and inline actionsa元素typographyTypography scale and text utilities.eyebrow.leadh1–h3layoutLayout primitives.containersection.metric-grid引用 gutter 与--section-y-desktop对照 components.html 可见每个组的真实实现。例如按钮组.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), ...; } .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); }min-height: 44px的触控目标恰好满足 accessibility-baseline 中 AAA 级 44×44 CSS px 的 craft 承诺:focus-visible焦点环由--focus-ring统一提供——组件实现与无障碍底线形成了可验证的对应关系。manifest 还提供令牌使用情况的统计视角referenced被引用--accent、--bg、--border、--fg、--motion-fast、--space-*等 52 个令牌在组件 CSS 中被实际消费unusedDeclared已声明未使用--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warn共 7 个——它们是预留令牌供扩展组件或状态使用undeclaredReferenced未声明却被引用空数组证明组件 CSS 没有越过令牌体系使用魔法值。六、派生产物与集成方式Retro 包提供了多套派生物方便不同技术栈的 Agent 直接消费6.1 design-tokens.json结构化令牌design-tokens.json 以od-design-tokens/v1格式输出全部 56 个令牌的结构化描述每个条目包含name、value、typecolor / fontFamily / dimension / number / shadow / duration / cubicBezier、layer、confidence与sources精确到tokens.css行号。例如{ name: --elev-raised, value: 6px 6px 0 rgba(42, 24, 16, 0.26), type: shadow, layer: A2, confidence: high, sources: [tokens.css:54] }适合需要以 JSON 形式驱动 Figma 插件、主题系统或自动化检测工具的场景。6.2 tailwind-v4.cssTailwind v4 桥接tailwind-v4.css 是面向 Tailwind CSS v4 项目的派生物文件头注释明确「Derived from tokens.css. Keep tokens.css as the source of truth.」——它通过theme块把令牌映射为 Tailwind 主题变量import tailwindcss; import ./tokens.css; theme { --color-accent: var(--accent); --color-surface-warm: var(--surface-warm); --font-display: var(--font-display); --text-4xl: var(--text-4xl); --shadow-raised: var(--elev-raised); --duration-fast: var(--motion-fast); --spacing-section-desktop: var(--section-y-desktop); /* ... */ }映射后即可在 Tailwind 类中直接书写bg-accent、text-fg-2、shadow-raised、duration-fast等工具类而值仍回溯到tokens.css。注意该文件与design-tokens.json一样属于派生输出应通过报告与令牌样式表重新生成见 source/evidence.md不应手工编辑。6.3 system/tokens.default.json运行时最小主题system/tokens.default.json 提供运行时最小的默认主题参数主色、主色背景、hover/active 派生、字号 16、圆角 8供需要轻量主题注入的宿主环境使用{ colorPrimary: #d24b1f, colorPrimaryBg: #ffdca8, colorPrimaryHover: color-mix(in oklab, var(--accent), black 8%), colorPrimaryActive: color-mix(in oklab, var(--accent), black 14%), fontSize: 16, borderRadius: 8 }七、Do 与 AvoidAgent 的纪律红线USAGE.md 明确列出了使用时必须遵守与必须避免的行为这是评审者审查 Agent 产出时的核心判据Do必须做精确保留 schema 令牌名使跨品牌切换保持可靠——令牌名是包契约的一部分改名会导致派生物与组件选择器失联用--accent承担主行动、链接、焦点态以及一个清晰的焦点元素——强调色要克制全页只有一个视觉焦点在发明新控件之前先复用 components.manifest.json 中的组件组将 source/ 文件视为「捆绑 fixture 回填」的审计证据而非上游一手资料。Avoid必须避免在复制的:root令牌块之外使用原始 hex 值——一切颜色都必须走令牌独立于 tokens.css 重新定义 Tailwind 或设计令牌值——Tailwind 桥接文件只能做变量引用映射声称拥有原始上游来源证据——该包基于精选捆绑 fixture证据边界见 source/evidence.md添加 components.html 或 DESIGN.md 中不存在的新组件配方。这些红线本质上都在保护「令牌唯一事实源」任何绕过tokens.css的值、任何超出组件清单的控件、任何未经验证的上游声明都会破坏包的可切换性与可审计性。八、预览与视觉验证包内提供两套可视化资源用于产出前的检查preview/ 预览页preview/colors.html色彩、preview/typography.html字体、preview/spacing.html间距对应 manifest 中preview.pages的 colors / typography / spacing 三种角色用于逐维度抽查令牌渲染结果system/ 系统页system/index.html、system/kit.html、system/kit.dark.html提供组件套件kit级别的整体预览kit.dark.html还覆盖暗色变体。工作流上Agent 应先以components.html为准核对选择器与状态再打开预览页做人眼/工具级的视觉抽查最终产物中不残留预览页面。九、实战从令牌到产物的最小工作流将 USAGE.md 的步骤落成一个可执行的 Agent 工作流复制 tokens.css 的完整:root块到产物style最顶部——逐字复制不改名、不加值打开 components.html按需摘取.btn、.panel、.field、.status等选择器对应的组件 CSS粘贴到令牌块之后需要新 UI 时先查 components.manifest.json 的 groups/classes 列表确认是否已有现成组件确认没有后再参考 DESIGN.md 的组件与布局规则仅使用已声明令牌编写新样式例如圆角一律用--radius-sm/md/lg抬升一律用--elev-flat/ring/raised动效一律用--motion-fast/base加--ease-standard关键交互状态补全:hover用--accent-hover:focus-visible用--focus-ringdisabled/loading 态用--muted/--border-soft明确呈现用 preview/ 页面或 system/kit.html 做视觉抽查并对照 accessibility-baseline 核验对比度与触控目标正文 ≥ 4.5:1控件 ≥ 24×24 CSS px焦点指示 ≥ 3:1。按此流程产出的界面将稳定呈现 Retro 包的高对比复古特征奶油底色#fff4cf、暖橙强调#d24b1f、Courier New 等宽标题、硬偏移投影--elev-raised与 150ms 统一动效同时保持与包契约完全一致、可审计、可跨品牌切换。十、总结design-systems/retro是一个自洽、可审计的 Design System 2.0 包它以 USAGE.md 为契约入口以 tokens.css 的 56 个令牌为唯一事实源以 components.manifest.json 与 components.html 为组件边界以 design-tokens.json 与 tailwind-v4.css 为多栈派生出口并用 source/ 审计文件锁定证据边界。对 OpenDesign 的编码 Agent 而言遵循「契约 → 意图 → 令牌 → 组件 → 验证」的消费顺序、严守 Do/Avoid 红线即可在每一次产出中精确复现复古高对比风格同时为评审者留下可追查的令牌来源与组件依据。赞分享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 Vintage 设计系统包使用指南面向 Agent 与审查者的 Design System 2.0 实战手册OpenDesign Vintage 设计系统包使用指南面向 Agent 与审查者的 Design System 2.0 实战手册 本篇技术指南以 OpenDAI 应用人工智能AI 技能设计系统媒体生成OpenDesign Uber 设计系统包使用指南面向 Agent 与审阅者的 Design System 2.0 完整实战手册OpenDesign Uber 设计系统包使用指南面向 Agent 与审阅者的 Design System 2.0 完整实战手册 Uber 设计系统包是 OpAI 应用人工智能AI 技能设计系统媒体生成OpenDesign Cosmic 设计系统包使用指南Agent 与评审者的 Design System 2.0 契约实操OpenDesign Cosmic 设计系统包使用指南Agent 与评审者的 Design System 2.0 契约实操 Cosmic 是 OpenDesiAI 应用人工智能AI 技能设计系统媒体生成创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考