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/skeumorphism/USAGE.md 为核心脉络系统讲解 OpenDesign 仓库中 Skeumorphism拟物风格Design System 2.0 包的完整使用契约。你将掌握该包的阅读顺序、56 个设计 Token 的完整取值与分层、组件清单的结构、派生产物design-tokens.json / tailwind-v4.css的生成关系以及面向 Agent 与人工评审者的 Do / Avoid 使用规范从而在生成 artifacts 时可靠地复现这一风格家族。一、包定位Design System 2.0 的标准化结构Skeumorphism 是 OpenDesign 仓库design-systems/目录下按 Design System 2.0 规范组织的一个完整风格包。与早期仅含DESIGN.md的系统不同它通过manifest.json提供了稳定的发现层让 picker、daemon、importer 等程序代码无需猜测目录内容即可定位到规范的设计文档、编译后的 Token、组件夹具与预览页。从 design-systems/_schema/manifest.schema.ts 的注释可以看出该契约的设计意图是DESIGN.md是 Agent 阅读的散文式规范源而manifest.json是围绕它的稳定发现层。本包的结构如下design-systems/skeumorphism/ ├── USAGE.md # 使用契约本文核心 ├── DESIGN.md # 视觉意图、约束与反模式 ├── tokens.css # 编译后的 Token 样式表唯一事实源 ├── design-tokens.json # 由 tokens.css 派生的 JSON 产物 ├── tailwind-v4.css # Tailwind v4 theme 派生产物 ├── manifest.json # Design System Project 清单 ├── components.html # 组件参考夹具 ├── components.manifest.json # 组件清单缓存可由夹具重建 ├── preview/ # 视觉抽查页colors / typography / spacing └── source/ # 审计证据evidence / 契约报告 / 原始 token其中manifest.json的files字段固定了规范文件名的契约design: DESIGN.md、tokens: tokens.css并可选声明designTokens、tailwind、components三个派生/可选产物这一约束同样在 manifest.schema.ts 的DesignSystemProjectFiles类型中强制校验。二、阅读顺序官方规定的包契约使用流程USAGE.md 为 Agent 与评审者规定了明确的阅读顺序这是使用本包的第一步必须严格遵循先读USAGE.md理解包契约即本文再读DESIGN.md把握视觉意图、约束与反模式将tokens.css粘贴进第一个 artifact 的style块然后再编写组件 CSS——这是保证 Token 唯一事实源生效的关键步骤使用components.manifest.json获取精简组件清单当需要精确选择器或状态时打开components.html查看完整实现需要视觉抽查时打开preview/目录下的页面colors.html、typography.html、spacing.html。这条顺序的本质是先契约、后规范、再 Token、然后组件、最后视觉验证的层层递进确保任何消费方人类或 Agent在动手前已经掌握完整的约束上下文。三、设计亮点与视觉基调USAGE.md 的 Design Highlights 与 DESIGN.md 第一节共同定义了本包的设计身份视觉风格Visual styleplayful俏皮、有玩味感色彩立场Color stanceprimary、secondary、neutral、success、warning、danger 六类完整语义色设计意图Design intent让产出对这一风格家族具有可识别性同时保持可用性与可读性——即拟物但不牺牲可用性主色#FA3C00来自 style foundations 的 Token。从风格分类看本包属于Morphism Effects形态与效果类别其设计母题是以真实物体为原型的拟物界面纹理化表面、3D 效果、熟悉的物理隐喻。3.1 色彩规范DESIGN.md 层DESIGN.md 第二节给出了面向风格家族的语义色参考值角色参考值说明Primary#FA3C00CTA 强调色Secondary#F08321次级强调Success#16A34A成功状态Warning#D97706警告状态Danger#DC2626危险状态Surface#FFFFFF大面积背景与卡片Text#111827正文保证可读性Neutral#FFFFFF由 surface 派生保证官方格式兼容使用要点CTA 强调优先使用 Primary大背景和卡片使用 Surface正文一律落在 Text 上以保障对比度。3.2 排版、间距与动效DESIGN.md 层字号阶梯12 / 14 / 16 / 20 / 24 / 32字体族primary Robotodisplay Germania Onemono JetBrains Mono字重100–900 全档位间距刻度4 / 8 / 12 / 16 / 24 / 32动效默认 150–250ms 短促过渡稳定缓动曲线hover、focus-visible、active、disabled、loading 状态必须显式定义。规则上强调标题承载风格个性正文优化可扫读性与对比度区块内保持一致的垂直节奏优先用留白而非边框/阴影来区分层级。四、Token 体系tokens.css 全量 56 个 Token 解析tokens.css 是这套系统的唯一 Token 事实源source/evidence.md 与tailwind-v4.css头注释均明确声明 Keep tokens.css as the source of truth。整个:root块共声明 56 个 Token按 design-tokens.json 的分层统计可归为四层A1-identity身份层8 个——决定品牌身份的核心色与字体A1-structure结构层18 个——字号、行高、间距、容器等结构度量A2应用层26 个——交互色、圆角、阴影、动效等实现细节B-slot插槽层4 个——--surface-warm、--fg-2、--meta、--border-soft等派生语义位。值得注意这套实际编译出的 Token 采用了暖棕色拟物配色accent 为#b46a46与 DESIGN.md 记录的风格基础色primary#FA3C00作用不同——前者是渲染时真正生效的绑定后者是风格意图的参考值。以实际渲染效果为准时以tokens.css为准。4.1 色彩 Token15 个Token值层级用途--bg#f7eee6A1-identity页面背景暖米色--surface#fff8f1A1-identity卡片/面板表面--surface-warm#ead6c7B-slot暖色次级表面--fg#2b211cA1-identity主前景文字--fg-2#5a4b43B-slot次级文字--muted#8a7a70A1-identity弱化文字--meta#b46a46B-slot眉题/元信息色--border#dac8b9A1-identity常规边框--border-soft#eaded4B-slot弱化分隔线--accent#b46a46A1-identity主交互强调色--accent-on#ffffffA2强调色上的前景--accent-hovercolor-mix(in oklab, var(--accent), black 8%)A2hover 态动态混合--accent-activecolor-mix(in oklab, var(--accent), black 14%)A2active 态--success/--warn/--danger#4d8f5a/#c88735/#b84c4cA2状态语义色--accent-hover与--accent-active使用 CSScolor-mix(in oklab, ...)基于 accent 动态压暗生成保证品牌色变更时交互状态自动联动。4.2 字体与排版 TokenToken值说明--font-displayGeorgia, Times New Roman, serif展示字体衬线--font-bodyInter, system-ui, sans-serif正文字体--font-monoSF Mono, ui-monospace, Menlo, monospace等宽字体眉题/状态--text-xs~--text-4xl12px / 14px / 16px / 18px / 24px / 36px / 54px / 76px8 档字号阶梯--leading-body1.52正文行高--leading-tight1.06标题紧凑行高--tracking-display-0.025em展示字距4.3 间距与网格 TokenToken值说明--space-1~--space-124 / 8 / 12 / 16 / 20 / 24 / 32 / 48px8 档间距刻度--section-y-desktop/-tablet/-phone96 / 68 / 48px分区纵向节奏响应式--container-max1180px内容最大宽度--container-gutter-desktop/-tablet/-phone36 / 24 / 16px容器内边距响应式4.4 圆角、阴影与动效 TokenToken值说明--radius-sm/-md/-lg14 / 22 / 34px圆角阶梯偏大符合拟物圆润感--radius-pill9999px胶囊/状态点--elev-flatnone无阴影层级--elev-ring0 0 0 1px var(--border)细描边层级--elev-raised8px 10px 24px rgba(128,92,70,.18), -8px -8px 20px rgba(255,255,255,.70)凸起层级暖色投影 白色高光典型拟物立体感--focus-ring0 0 0 4px rgba(180,106,70,.24)焦点环--motion-fast/-base150ms / 240ms动效时长--ease-standardcubic-bezier(0.2, 0, 0, 1)标准缓动--elev-raised的双层阴影下方暖色投影 上方白色高光正是拟物风格凸起按键/卡片质感的核心来源。五、组件清单components.manifest.json 与 components.htmlcomponents.manifest.json 是本包的组件索引缓存source.componentsHtml与source.tokensCss指明其由components.htmltokens.css重建。夹具统计信息如下style 块数量1选择器数量48类数量26元素数量19Token 审计声明 56 个、被引用 47 个、未使用声明 7 个--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warn无未声明却引用的 TokenundeclaredReferenced: []——说明夹具与 Token 契约完全对齐。清单将组件划分为 9 个语义组groups其中实际存在present: true的有组 ID标签关键选择器/类buttons按钮与 CTA.btn、.btn-primary、.btn-secondary及 hover/focus-visible 态inputs表单字段.field、input、input:focus、labelcards卡片与面板.card-row、.panel、.panel-head、.tilebadges徽章/状态标签.status含::before状态点links链接与行内动作atypography排版阶梯.eyebrow、.lead、h1、h2、h3layout布局原语.container、section、.metric-grid未覆盖的组为keyboard键盘提示与icons图标插槽即本夹具不含这两类组件。5.1 组件实现要点源自 components.htmlcomponents.html 提供了完整可运行的参考夹具Skeuomorphic control panel 控制面板示例页其中几个关键实现值得在复用组件时参考按钮.btn基础态min-height: 44px、border-radius: var(--radius-md).btn-primary使用var(--accent)背景 var(--accent-on)前景hover 时切换var(--accent-hover)并translateY(-1px)模拟按下浮起.btn-secondary使用 surface 背景 var(--elev-ring)描边阴影焦点态统一.btn:focus-visible与input:focus共用var(--focus-ring)保证系统级焦点信号一致面板/指标卡.panel用var(--elev-raised)凸起阴影 var(--radius-lg)大圆角.metric strong走 display 字体与--text-2xl.metric span落--muted状态徽章.status::before用 8px 圆点 var(--success)表达在线响应式1023px / 860px / 639px 三个断点分别切换 gutter、section 纵向节奏与 hero/网格单列布局。六、派生产物design-tokens.json 与 tailwind-v4.css本包的两个派生产物均由tokens.css生成不应手工编辑见 source/evidence.mddesign-tokens.jsonTOKEN_SCHEMA 契约的 JSON 形态逐 Token 记录name、value、typecolor / fontFamily / dimension / number / shadow / duration / cubicBezier、layerA1-identity / A1-structure / A2 / B-slot、confidence与sources回指tokens.css行号。本包 56 个 Token 全部 source-backed评分100 / excellentrecommendRebuild: falsetailwind-v4.css通过theme将全部 Token 映射为 Tailwind v4 命名空间例如--color-accent、--font-display、--text-2xl、--spacing-8、--radius-lg、--shadow-raised、--duration-fast、--ease-standard。使用时先import ./tokens.css再定义theme即可在 Tailwind 类名中直接消费同一套 Token。七、使用规范Do 与 AvoidUSAGE.md 给出了面向 Agent 与评审者的明确行为规范这是保证跨品牌切换可靠性的核心。7.1 应当做Do逐字保留 schema Token 名称确保跨品牌切换cross-brand switching始终可靠使用--accent表达主操作、链接、焦点态以及页面上唯一清晰的视觉焦点优先复用components.manifest.json中的组件组再考虑发明新控件将source/目录中的文件视为审计证据用于 bundled fixture 的回填验证。7.2 应当避免Avoid避免在复制的:rootToken 块之外使用裸十六进制颜色——所有颜色必须走 Token避免脱离tokens.css独立重定义Tailwind 或 design-token 值防止派生产物与事实源漂移避免声称拥有上游原始品牌仓库的证据——本包基于 OpenDesign 策展的 bundled fixturemanifest.json中source.type: bundled、origin: OpenDesign curated bundled fixture并非对上游站点的重新抓取避免添加components.html或DESIGN.md未覆盖的新组件配方。八、契约与审计链路manifest.json 与 source/manifest.json 遵循od-design-system-project/v1schema校验实现在 design-systems/_schema/manifest.schema.ts校验规则包括 slug 格式、路径安全性、schema 版本字面量等关键字段包括files规范文件固定名DESIGN.md / tokens.css与可选派生产物usage指向USAGE.md——这正是本文所讲契约的挂载点importMode: normalized导入规范化模式craft建议关联的 craft 规范为 craft/color.md 与 craft/accessibility-baseline.md应用列表为空无豁免preview索引了preview/下的三个抽查页sourceFiles审计证据链evidence、tokens.source.json、token-contract.report.json。source/目录构成完整的可追溯链路source/evidence.md声明包来源为 curated bundled fixture不声称上游新抓取source/token-contract.report.json将每个 TOKEN_SCHEMA 绑定回tokens.css的具体声明行如tokens.css:7实现契约级可审计source/tokens.source.json原始 Token 快照。九、实战将 Skeumorphism 应用到 artifact综合 USAGE.md 的阅读顺序与上文的 Token 明细一个标准的落地流程如下将tokens.css的完整:root块粘贴到 artifact 首个style块若使用 Tailwind v4则import该文件并按 tailwind-v4.css 配置theme从 components.manifest.json 的组件组中挑选所需控件按钮、输入框、面板、状态徽章、排版与布局原语精确实现参考 components.html颜色一律引用 Token主交互用--accent背景用--surface/--surface-warm正文用--fg/--fg-2弱化用--muted状态用--success/--warn/--danger绝不裸写十六进制层级表达遵循 DESIGN.md 的标题 → 支撑文字 → 主操作清晰次序间距用--space-*刻度立体感交给--elev-raised双层阴影动效统一走--motion-fast/--motion-base--ease-standard焦点态一律挂--focus-ring完成后可打开 preview/colors.html、preview/typography.html、preview/spacing.html 做视觉抽查对照。遵循以上流程即可让产出的原型、落地页、看板等 artifact 稳定保持 Skeumorphism 风格家族的识别度同时不牺牲可读性与可访问性——这正是本包设计意图的落点。赞分享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 Brutalism 设计系统包实战指南Design System 2.0 使用契约、Token 体系与组件清单全解析OpenDesign Brutalism 设计系统包实战指南Design System 2.0 使用契约、Token 体系与组件清单全解析 BrutalismAI 应用人工智能AI 技能设计系统媒体生成OpenDesign Neobrutalism 设计系统包解析Token 契约、组件清单与 Source Evidence 审计机制OpenDesign Neobrutalism 设计系统包解析Token 契约、组件清单与 Source Evidence 审计机制 导读 本文围绕 OpenAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 设计系统 2.0 包使用指南Meta (Store) 的阅读顺序、Token 契约与组件清单实战OpenDesign 设计系统 2.0 包使用指南Meta Store 的阅读顺序、Token 契约与组件清单实战 本指南以 OpenDesign 仓库中 dAI 应用人工智能AI 技能设计系统媒体生成上一篇告别后端烦恼Next.js与Supabase打造实时无服务应用新范式下一篇如何快速实现文件在线预览kkFileView的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考