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/premium/DESIGN.md为骨架结合同目录下的tokens.css、components.manifest.json、manifest.json、USAGE.md及source/审计文件系统讲解 Open Design 项目中 Premium专业与商务风格设计系统的完整规范从视觉基调、色彩、字体、间距栅格、布局、组件、动效到文案语调与反模式清单并进一步深入到设计系统 2.0 的 Token 化落地机制。读者读完可掌握一套可直接复制的规范 → Token → 组件实施链路并理解该包在 Open Design 跨品牌设计系统架构中的定位。1. 包结构与阅读顺序Premium 是 Open Design 仓库中design-systems/下的一个完整设计系统包目录结构如下design-systems/premium/ ├── DESIGN.md # 视觉意图、约束与反模式本文主体 ├── USAGE.md # 包契约与使用规则 ├── manifest.json # 包清单schemaVersion、文件映射、预览页 ├── design-tokens.json # 设计 Token 的 JSON 形态TOKEN_SCHEMA 契约 ├── tokens.css # Token 的 CSS 实现唯一事实源 ├── tailwind-v4.css # Tailwind v4 主题映射派生产物 ├── components.html # 参考组件 Fixture ├── components.manifest.json # 组件清单选择器、类、元素、Token 引用 └── source/ # 审计证据evidence.md、token-contract.report.json、tokens.source.json ├── evidence.md ├── token-contract.report.json └── tokens.source.json根据 USAGE.md 的规定使用该包的正确阅读顺序是先读USAGE.md理解包契约再读DESIGN.md把握视觉意图、约束与反模式将tokens.css粘贴到首个 artifact 的style块中再编写组件 CSS用components.manifest.json做紧凑的组件盘点需要精确选择器或状态时打开components.html需要视觉抽查时查看preview/目录下的页面。包清单 manifest.json 声明其schemaVersion为od-design-system-project/v1category为Professional CorporateimportMode为normalized并建议搭配 craft 规范中的color与accessibility-baseline使用。值得注意的是其source.type为bundled即该包基于 Open Design 精选的捆绑 Fixture 派生而来而非对上游品牌官网的实时爬取——这一点在 source/evidence.md 中有明确声明。2. 视觉基调与设计意图DESIGN.md将 Premium 归类为Professional Corporate其核心美学描述为Apple-inspired premium aesthetic with precise spacing, modern typography, and a refined, polished visual language.受 Apple 启发的精奢美学精确的间距、现代排版、精致打磨的视觉语言。三个关键定义字段Visual style视觉风格modernColor stance色彩立场primary, neutral, success, warning, danger——即主色 中性色 状态色组成的语义色板Design intent设计意图让输出在可被该风格家族识别的同时保持可用性与可读性Keep outputs recognizable to this style family while preserving usability and readability。这一识别度优先、可用性兜底的设计意图是全文档的纲后续所有色彩、排版、间距、动效规范本质上都是为一眼可辨 好用可读这两个目标服务。3. 色彩体系语义色板与使用规则3.1 规范层的语义色板DESIGN.md给出的是风格基座style foundations层的语义色板每一枚颜色都被标记为Token from style foundations角色色值说明Primary主色#3B82F6CTA 强调的首选Secondary次色#8B5CF6辅助强调Success成功#16A34A正向状态Warning警告#D97706警示状态Danger危险#DC2626错误/危险状态Surface表面#FFFFFF大面积背景与卡片Text正文#111827正文与标题文字Neutral中性#FFFFFF由 Surface Token 派生用于官方格式兼容使用规则原文要点Favor Primary#3B82F6for CTA emphasis——主色只用于 CTA 强调Use Surface#FFFFFFfor large backgrounds and cards——大面积背景与卡片统一使用 SurfaceKeep body copy on Text#111827for legibility——正文保持深色以保证可读性。3.2 实现层的 Token 绑定规范层描述的是语义角色而实际落地时每个品牌会将语义角色映射到具体的 Token 值。当前包中捆绑的 tokens.css 即为 Premium 的具体实现其头部注释点明这套配色的真实取向premium marketing system with warm white canvas, graphite type, and muted bronze signal. 暖白画布、石墨色文字、哑光青铜色信号。实际声明的核心色彩 Token:root { --bg: #faf8f4; /* 暖白画布底色 */ --surface: #ffffff; /* 表面 */ --surface-warm: #f0e7d8; /* 暖色表面槽位 */ --fg: #1c1b19; /* 石墨色正文 */ --fg-2: #4b4740; /* 次级正文槽位 */ --muted: #746d63; /* 弱化文字 */ --meta: #a06a3b; /* 元信息槽位 */ --border: #ded6c9; /* 常规边框 */ --border-soft: #eee7dc; /* 弱边框槽位 */ --accent: #a06a3b; /* 主强调哑光青铜 */ --accent-on: #ffffff; /* 强调色上的前景 */ --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%); --success: #3f8f5f; --warn: #c4872c; --danger: #b84a4a; }这里存在一个值得注意的分层关系DESIGN.md中的 Primary/Secondary 属于风格基座语义层而tokens.css中真正被组件消费的是--accent、--bg、--surface等 schema Token。hover/active 状态色采用color-mix(in oklab, ...)在 OKLab 色彩空间动态混合生成而不是手写第二、第三个色值——这正是不引入色板外颜色这一反模式的机制化保障。从 components.manifest.json 的tokens字段可以看到按钮组实际引用了--accent、--accent-on、--border、--surface、--fg等 Token与 DESIGN.md 的主色用于 CTA规则一一对应。3.3 契约报告与 Token 分层source/token-contract.report.json 以 TOKEN_SCHEMA 契约对全部 Token 做了逐条审计共56 个 Token全部 56 个有源码背书sourceBackedTokens: 56整体评分 100、评级excellentrecommendRebuild: false。Token 分为四层A1-identity8 个品牌身份层如--bg、--surface、--fg、--muted、--border、--font-display、--font-bodyA1-structure18 个结构层如字号刻度、行高、字距、区块纵向间距、容器宽度与 gutterA226 个派生/组件层如--accent-hover、--accent-active、--success、--warn、--danger、间距刻度、圆角、阴影、动效时长B-slot4 个槽位层如--surface-warm、--fg-2、--meta、--border-soft。报告为每个 Token 记录了sources字段如tokens.css:7将契约声明行与 CSS 实现行一一锚定构成可自动核验的审计链路。4. 字体排印TypographyDESIGN.md规定的排版规范字号刻度Scale12/14/16/18/24/30/36字体族FamiliesprimaryInter、displayInter、monoJetBrains Mono字重Weights100/200/300/400/500/600/700/800/900全字重原则标题承载风格个性Headings should carry the style personality正文优先可扫读性与对比度body text should optimize scanability and contrast。实现层在tokens.css中给出了更细的排版 Token字号从--text-xs: 12px一路到--text-4xl: 84px12/14/16/19/26/40/60/84px并配套--leading-body: 1.58、--leading-tight: 1.02、--tracking-display: -0.02em展示标题的轻微负字距。字体族实现为--font-display: Canela, Georgia, serif、--font-body: Inter, system-ui, sans-serif、--font-mono: IBM Plex Mono, ui-monospace, Menlo, monospace——衬线展示字体 无衬线正文字体 等宽代码字体的组合与 DESIGN.md 的标题有风格、正文可扫读原则一致。从组件清单看排版组typographygroup包含了.eyebrow眉题、.lead导语与h1/h2/h3其 Token 引用为--fg-2、--text-4xl、--text-lg、--text-xl说明次级文字--fg-2在排版层级中承担辅助信息的角色。5. 间距与栅格DESIGN.md的间距规范非常精简间距刻度Spacing scale4/8/12/16/24/32保持各区块与组件间纵向节奏一致Keep vertical rhythm consistent across sections and components列与模块对齐到可预测的栅格避免临时偏移avoid ad-hoc offsets。tokens.css将其展开为--space-1: 4px至--space-12: 48px的完整刻度4/8/12/16/20/24/32/48px并额外定义了区块纵向间距的响应式 Token--section-y-desktop: 112px; --section-y-tablet: 80px; --section-y-phone: 56px;桌面 112px、平板 80px、手机 56px 的三档区块间距是保持纵向节奏在实现层的直接落地。栅格方面容器 Token 为--container-max: 1160pxgutter 分三档桌面36px、平板24px、手机16px。布局组layoutgroup的选择器.container与section正是这些 Token 的消费方。6. 布局与构图DESIGN.md对布局与构图给出三条原则倾向清晰的内容块内部 padding 一致Prefer clear content blocks with consistent internal padding层级一目了然标题 → 支撑文案 → 主操作headline → support text → primary action先用留白区分内容再考虑边框与阴影Use whitespace to separate concerns before adding borders or shadows。先留白、后描边是一条优先级规则在引入视觉噪音之前先依靠间距系统建立内容分组。这与 5.1 的间距刻度、5.2 的响应式区块间距共同构成完整的垂直节奏体系。从组件清单的cards组看.card-row、.panel、.panel-head、.tile等卡片类引用的 Token 集中在--border、--elev-raised、--radius-lg、--surface——即卡片通过表面色 大圆角 抬起阴影 细边框来建立层级符合留白优先的构图思想。7. 组件规范DESIGN.md对核心组件的约定按钮Buttons主操作使用 Primary规范层#3B82F6/ 实现层--accent次级操作保持中性secondary actions stay neutral输入框Inputs强 focus-visible 状态、清晰标签、可预测的错误提示卡片/区块Cards/sections全页面统一使用一致的圆角、间距与抬升策略。components.manifest.json给出了这套组件的完整盘点1 个样式块、48 个选择器、26 个类、19 个元素按 9 个组件组组织组件组是否就绪关键选择器/类主要 Token 引用buttons按钮与 CTA✅.btn、.btn-primary、.btn-secondary、.btn:focus-visible--accent、--accent-on、--border、--ease-standard、--elev-ring、--motion-fast、--radius-md、--space-5inputs表单控件✅.field、input、input:focus、label--border、--fg、--radius-sm、--space-2/4/5、--surfacecards卡片与面板✅.card-row、.panel、.panel-head、.tile--border、--elev-raised、--radius-lg、--surfacebadges徽章/状态标签✅.status—links链接与内联操作✅a—typography排版工具✅.eyebrow、.lead、h1/h2/h3--fg-2、--text-4xl、--text-lg、--text-xllayout布局原语✅.container、section、.metric-grid--container-gutter-*、--section-y-desktopkeyboard键盘提示❌——icons图标槽位❌——清单还记录了 Token 使用统计4 处颜色表达式、24 个像素值、4 处硬编码字体族literals字段未声明引用与未使用声明的 Token 均为 0/7 的合理范围--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warn已声明但当前 Fixture 未引用属于为完整契约预留的 Token。8. 动效与交互DESIGN.md的动效规范微妙过渡强调 Primary#3B82F6作为交互信号时长默认短促且有目的的过渡150–250ms使用稳定缓动状态完备hover、focus-visible、active、disabled、loading 五种状态必须显式可感知。实现层的动效 Token 与此呼应--motion-fast: 170ms; --motion-base: 280ms; --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); /* 先快后缓的出场缓动 */--motion-fast: 170ms落在规范 150–250ms 区间内是按钮、焦点等微交互的首选时长--motion-base: 280ms用于页面级稍大的过渡--ease-standard这条 cubic-bezier 曲线0.22, 1, 0.36, 1前段快速启动、后段平滑收尾是短促而有目的这一原则的数学化表达。按钮组在清单中明确引用了--motion-fast与--ease-standard说明.btn的 hover/active 状态正是这套动效 Token 的消费场景。9. 文案与品牌语调DESIGN.md对文案Voice Brand的要求语调与视觉风格一致简洁、自信、产品相关concise, confident, and product-specific微文案microcopy以行动为导向避免空泛填充语action-oriented and avoid generic filler language标题保留风格个性UI 标签保持字面直白Preserve the style identity in headlines while keeping UI labels literal and clear。这条标题有风格、标签要直白的双轨原则与排版章的标题承载个性、正文可扫读互为表里——品牌个性集中在叙事性文字上功能性 UI 文案始终服务于可用性与 Premium 整体精致但不妨碍使用的设计意图闭环。10. 反模式清单Anti-patternsDESIGN.md明确列出四条红线是评审与自动校验时的重要依据禁止引入色板外的颜色——当现有 Token 能解决问题时不得新造颜色Do not introduce off-palette colors when an existing token can solve the problem。实现层通过color-mix(in oklab, ...)派生 hover/active 色正是这条规则的机制保障禁止扁平化层级——不得对所有文本使用同一字号/字重Do not flatten hierarchy by using the same type size/weight for all text禁止装饰性效果损害可读性与可访问性Do not add decorative effects that reduce readability or accessibility禁止在同一界面混用无关视觉隐喻Do not mix unrelated visual metaphors in the same interface。11. 落地链路从规范到可运行产物Premium 包在 Open Design 中不是一份静态文档而是一条完整的、可校验的交付链路规范层DESIGN.md 定义意图与约束事实源tokens.css 中的:rootToken 块是唯一事实源使用规则明确要求避免在复制的:root块之外使用裸十六进制色值、不得脱离tokens.css单独重定义 Tailwind 或 design-token 值派生产物tailwind-v4.css 通过theme将每个 Token 映射为 Tailwind 主题变量如--color-accent、--text-4xl、--shadow-raised、--duration-fast、--spacing-section-desktop可直接生成bg-accent、text-4xl、shadow-raised等工具类design-tokens.json 则以od-design-tokens/v1格式输出同一契约的 JSON 形态供非 CSS 消费方使用组件层components.html 与 components.manifest.json 提供可直接复制的参考标记与选择器盘点审计层source/token-contract.report.json 将 56 个 Token 全部锚定回tokens.css的具体声明行source/evidence.md 声明该包为 curated bundled fixture 的回填产物并规定design-tokens.json与tailwind-v4.css应从报告与样式表重新生成而非手工编辑视觉抽查层preview/目录提供colors.html、typography.html、spacing.html三个预览页分别对应 manifest.json 的preview.pages声明供最终视觉核对。这条链路与 USAGE.md 的 Do/Avoid 规则完全对应保留 schema Token 名称以保证跨品牌切换可靠、用--accent承载主操作/链接/焦点态、优先复用清单中的组件组、以source/作为审计证据同时避免新增清单中不存在的组件配方。对于需要在 Open Design 中复用或仿照此模式构建新品牌包的使用者而言这一规范 → Token → 派生产物 → 组件 → 审计的五段式结构即是可直接套用的模板。赞分享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点击查看免费下载相关推荐open-design 的 Application 设计系统包从 DESIGN.md 视觉规范到 tokens.css 语义 Token 落地open design 的 Application 设计系统包从 DESIGN.md 视觉规范到 tokens.css 语义 Token 落地 本篇技术指南围AI 应用人工智能AI 技能设计系统媒体生成OpenDesign Apple 设计系统指南从视觉规范到 Token 化落地实践OpenDesign Apple 设计系统指南从视觉规范到 Token 化落地实践 本指南基于仓库内 design systems/apple/DESIGN.AI 应用人工智能AI 技能设计系统媒体生成OpenDesign Airtable 设计系统实践指南从视觉规范到语义化 Token 的完整落地OpenDesign Airtable 设计系统实践指南从视觉规范到语义化 Token 的完整落地 在 OpenDesign 的 150 设计系统包中 aAI 应用人工智能AI 技能设计系统媒体生成上一篇突破性能瓶颈Next.js组件混合渲染的实战指南下一篇从下载无门到一网打尽猫抓视频嗅探扩展完整实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考