Open Design Professional 设计系统实战从 DESIGN.md 到可落地的 tokens.css 商业级界面规范【免费下载链接】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 仓库中 design-systems/professional/DESIGN.md 展开系统讲解Professional专业商务设计语言包的视觉主题、色彩、排版、间距网格、组件、动效、品牌语调与反模式九大规范并结合同目录下的 tokens.css、components.html、manifest.json 等包内文件说明设计意图如何被编译为语义化 Design Token 并最终落地到 Agent 生成的前端产物中。读完本文你将掌握Professional 风格包的完整设计决策、token 命名契约与层级、以及将 DESIGN.md 规范映射为可复用 CSS 变量与 Tailwind v4 主题的实际方法。1. 包结构与阅读顺序一个可移植的设计系统包是如何组织的在 Open Design 仓库中每个design-systems/slug/子目录都是一个可移植的设计系统包。根据 design-systems/README.md所有内置包都拥有相同的最小机器可读结构design-systems/slug/ ├── manifest.json # 稳定发现元数据、来源声明与包内路径 ├── DESIGN.md # 面向 Agent 的规范化设计散文本文主体 └── tokens.css # 规范化编译的语义 token 样式表professional包在此之上还携带了完整的富包文件rich package files在 manifest.json 中逐一声明USAGE.md Agent 阅读顺序与使用指南 components.html 独立组件夹具fixture components.manifest.json 由 components.html tokens.css 派生的组件/token 索引 design-tokens.json 派生的 Design Tokens JSON56 个 token评分 100评级 excellent tailwind-v4.css 派生的 Tailwind v4 映射 preview/ 可索引的预览页colors / typography / spacing source/ 导入证据、token 契约报告与来源 tokenUSAGE.md 给出了 Agent 和评审者的推荐阅读顺序先读 USAGE.md 理解包契约再读 DESIGN.md 掌握视觉意图与约束随后将tokens.css粘贴进首个 artifact 的style块用components.manifest.json做组件清单必要时用preview/页面做视觉抽查。从源码结构看manifest.json的files字段声明了design、tokens、designTokens、tailwind、components五个规范化文件名且schemaVersion固定为od-design-system-project/v1。运行时manifest 元数据优先于 DESIGN.md 中遗留的 Markdown H1 与 Category:约定后者仅作为兼容性回退具体优先级规则见 docs/design-systems.md。2. 视觉主题与氛围Modern 风格的商业可信度DESIGN.md 将 Professional 包归入Professional Corporate类别并给出唯一的设计意图声明Polished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.精致、可直接用于商业场景的设计现代排版、结构化布局、可信赖的视觉身份。其元数据字段明确Visual style视觉风格modernColor stance色彩立场primary, secondary, neutral, success, warning, danger全语义色位齐全Design intent设计意图让输出保持对该风格家族的辨识度同时不牺牲可用性与可读性这与包内组件夹具的描述一致components.html 的meta namedescription写着 professional services interface with restrained blue, crisp cards, and business-first structure克制的蓝色、利落的卡片、业务优先的结构。可以推断Professional 的视觉气质核心是克制不靠装饰取胜而靠层级、留白与一致性的秩序感建立信任。3. 色彩系统语义 token 的完整映射DESIGN.md 第 2 节给出了 Professional 的设计意图色彩表。注意一个关键事实DESIGN.md 描述的是风格意图黄色主色#FECE14而仓库中实际捆绑的 tokens.css 是经重着色后的curated bundled fixture蓝色系。USAGE.md 明确提示不要声称存在原始上游来源证据因此本文以下表忠实呈现 DESIGN.md 的意图值并在后文说明落地时的 token 层。Token 角色意图值用途说明Primary#FECE14CTA 强调色style foundations tokenSecondary#000000次级强调style foundations tokenSuccess#16A34A成功态style foundations tokenWarning#D97706警告态style foundations tokenDanger#DC2626危险/错误态style foundations tokenSurface#FFFFFF大背景与卡片Text#111827正文可读性基准Neutral#FFFFFF由 surface token 派生用于官方格式兼容DESIGN.md 给出的三条使用铁律CTA 强调优先用 Primary#FECE14大背景和卡片用 Surface#FFFFFF正文保持 Text#111827以保证可读性。3.1 实际捆绑的语义 token 层tokens.css 源码解读落到代码层面tokens.css 的:root块声明了 56 个 token见 design-tokens.json 的 summarytotalTokens: 56, sourceBackedTokens: 56, score: 100, grade: excellent。按其分层统计A1-identity 8 个、B-slot 4 个、A2 26 个、A1-structure 18 个。关键色彩 token 如下:root { --bg: #f5f8ff; /* 页面底色极浅蓝 */ --surface: #ffffff; /* 卡片/面板表面 */ --surface-warm: #eaf1ff; /* 暖色面板蓝色调 */ --fg: #101828; /* 主前景/正文 */ --fg-2: #344054; /* 次级前景 */ --muted: #667085; /* 弱化文本 */ --meta: #2563eb; /* 元信息/眉题色eyebrow */ --border: #d7e0ef; /* 标准边框 */ --border-soft: #edf2f8; /* 弱化边框 */ --accent: #2563eb; /* 品牌强调色重着色为蓝 */ --accent-on: #ffffff; /* 强调色上的前景 */ --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%); --success: #16a34a; --warn: #f59e0b; --danger: #ef4444; }这里有三点值得注意的实现细节hover/active 派生方式--accent-hover与--accent-active使用 CSScolor-mix(in oklab, ...)从--accent动态派生避免手写近似色保证换肤后状态色自动跟随focus-ring 与 accent 绑定--focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22)与 accent 同色系保证交互信号统一呼应 DESIGN.md 第 7 节语义完整DESIGN.md 的 color stanceprimary/secondary/neutral/success/warning/danger在 token 层对应为--accent/--fg/--muted/--success/--warn/--danger契约字段在 components.manifest.json 的tokens一节有完整的 declared / referenced / unused 审计undeclaredReferenced: []即组件用到的 token 全部有声明。4. 排版移动优先的紧凑字阶与三字体栈DESIGN.md 第 3 节规定Scale字阶mobile-first compact scale移动优先紧凑字阶Families字体族primaryPoppinsdisplayPoppinsmonoIBM Plex MonoWeights字重100–900 全档位原则标题承载风格个性正文优化可扫读性与对比度。4.1 token 层的字阶实现tokens.css 将其编译为一套 7 级字号阶梯与行高/字距 tokenToken值用途--text-xs12px眉题/状态文本--text-sm14px标签、辅助文本--text-base16px正文基准--text-lg18pxlead 段--text-xl24pxH3--text-2xl36pxH2--text-3xl54pxH1 大屏--text-4xl76pxHero 级标题--leading-body1.52正文行高--leading-tight1.06标题行高--tracking-display-0.025em标题字距负字距收紧实际捆绑的字体栈为Inter, system-ui, sans-serifdisplay/body 共用与SF Mono, ui-monospace, Menlo, monospacemono。这与 DESIGN.md 意图中的 Poppins/IBM Plex Mono 不同——这是bundled fixture重着色/重选字体的结果。在组件夹具 components.html 中可以看到这套字阶的实际消费方式h1用var(--text-4xl)font-weight: 760var(--tracking-display).eyebrow用var(--font-mono)var(--text-xs)0.12em字距 大写转换形成等宽眉题 大标题 lead 段的商务信息层级。5. 间距与网格4 的倍数的节奏系统DESIGN.md 第 4 节规定Spacing scale间距刻度4/8/12/16/24/32即 4px 基数上的 4/8/12/16/24/32各区块与组件间保持一致的垂直节奏列与模块对齐到可预期的网格避免临时偏移。5.1 token 层的间距与区块节奏tokens.css 将间距刻度扩展为 8 档并补充了区块纵向节奏与容器约束Token值说明--space-1…--space-64 / 8 / 12 / 16 / 20 / 24px组件内部间距--space-8/--space-1232 / 48px组件间与区块内间距--section-y-desktop96px桌面区块上下留白--section-y-tablet68px平板区块上下留白--section-y-phone48px手机区块上下留白--container-max1180px容器最大宽度--container-gutter-desktop/tablet/phone36 / 24 / 16px响应式容器侧边距在 components.html 中响应式断点是这样落地的media (max-width: 1023px)时容器改用--container-gutter-tablet、区块改用--section-y-tabletmedia (max-width: 639px)时降级到 phone 档。这也印证了mobile-first compact字阶背后的完整响应式策略同一套 token随断点切换数值而不是写死魔法数字。6. 布局与构图清晰的区块与显式层级DESIGN.md 第 5 节给出构图三原则优先清晰的内容块内部 padding 保持一致层级必须一目了然headline标题→ support text支撑文本→ primary action主操作先用留白区分关注点再考虑边框或阴影——即 whitespace-first 的分层策略。在 components.html 中这套构图哲学被具象化为几个可复用的布局类.hero两栏网格grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr)左栏堆叠文本、右栏放面板.stack * *用margin-block-start: var(--space-4)统一堆叠间距.metric-grid/.card-row/.lower三列、两列、三列的业务数据网格.panel.panel-head.metric仪表面板式组件由--elev-raised阴影 --radius-lg圆角 --border边框共同定义抬升层级。components.manifest.json的groups字段给出了组件的 token 依赖清单例如 layout 组引用--container-gutter-phone/tablet与--section-y-desktopcards 组引用--elev-raised、--radius-lg、--surface、--border。这证明布局决策确实全部由 token 驱动而非散落的硬编码。7. 组件规范按钮、输入、卡片的 token 级约束DESIGN.md 第 6 节对三类核心组件给出要求Buttons按钮主操作使用#FECE14次级操作保持中性Inputs输入框强 focus-visible 状态、清晰 label、可预期的错误提示Cards/sections卡片/区块全页使用一致的圆角、间距与抬升策略。7.1 组件夹具中的实际实现在 components.html 中按钮体系拆分为.btn基类.btn-primary.btn-secondary.btn { min-height: 44px; padding: 0 var(--space-5); 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); }输入体系则强调焦点可见性input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }——焦点环与品牌色同源完全呼应 DESIGN.md 第 7 节以 Primary 作为交互信号的要求。components.manifest.json的统计可作为量化佐证组件夹具含 48 个选择器、26 个类、19 种元素groups显示 buttons / inputs / cards / badges / links / typography / layout 七类组件组齐全keyboard、icons 缺席且undeclaredReferenced: []说明组件引用的每个 token 都有声明契约闭合。8. 动效与交互短促、克制、以品牌色为信号DESIGN.md 第 7 节规定动效四原则使用微妙过渡以 Primary#FECE14作为交互信号默认短促、有目的的过渡150–250ms与稳定缓动hover、focus-visible、active、disabled、loading 五种状态必须显式存在。8.1 token 层的动效实现tokens.css 提供了三个动效 token并全部被组件消费Token值说明--motion-fast150ms悬停/按下等即时反馈按钮 transition 使用--motion-base240ms一般过渡基准--ease-standardcubic-bezier(0.2, 0, 0, 1)标准缓动曲线components.manifest.json的 buttons 组 tokenReferences 明确列出--ease-standard与--motion-fast说明动效 token 与组件绑定是经过契约审计的。DESIGN.md 的 150–250ms 区间在实现中被收敛为 150ms/240ms 两档——这正是短促、有目的的落地形态。9. 品牌语调克制、自信、面向产品DESIGN.md 第 8 节给出文案与品牌语调规范语调应反映视觉风格简洁、自信、产品化微文案microcopy要行动导向避免泛泛的填充语言标题保留风格个性但 UI 标签保持字面、清晰。组件夹具中的文案即示范Trustworthy layouts, conservative controls, and polished business hierarchy.可信布局、克制控件、精炼的商务层级。components.manifest.json中literals字段显示整个夹具仅有 3 处颜色表达式、24 个像素值、4 个硬编码字体族——意味着连示例页面都尽量复用 token符合语调克制、实现亦克制的一致性原则。10. 反模式清单质量守门员的四条红线DESIGN.md 第 9 节定义了四条反模式anti-patterns是评审 Agent 输出的核心判据禁止引入调色板之外的色彩——已有 token 能解决的问题就不许新造色值禁止用同一字号/字重抹平层级——层级必须通过字阶差异显式表达禁止添加降低可读性或可访问性的装饰效果禁止在同一界面混用无关的视觉隐喻。这四条红线与 USAGE.md 的 Avoid 清单相互印证避免在复制的:roottoken 块之外使用裸十六进制色值、避免绕过tokens.css单独重定义 Tailwind 或 design-token 值、避免新增components.html与 DESIGN.md 之外的组件配方。同时manifest.json 的craft字段为 Professional 包建议了两份 Craft 规范color与accessibility-baseline对应 craft/color.md、craft/accessibility-baseline.md可直接作为质量守门员的审查依据。11. 落地实践从 DESIGN.md 到 Tailwind v4 主题的三步走11.1 第一步复制 tokens.css 为唯一事实源按 USAGE.md 的流程将 tokens.css 的:root块作为首个 artifactstyle块的内容后续组件 CSS 一律通过var(--token)引用不再出现裸色值。11.2 第二步用 tailwind-v4.css 桥接 Tailwind 主题tailwind-v4.css 演示了将 tokens 桥接进 Tailwind v4theme的标准写法import tailwindcss; import ./tokens.css; theme { --color-accent: var(--accent); --color-surface: var(--surface); --font-sans: var(--font-body); --text-2xl: var(--text-2xl); --spacing-6: var(--space-6); --radius-md: var(--radius-md); --shadow-raised: var(--elev-raised); --duration-fast: var(--motion-fast); --ease-standard: var(--ease-standard); }注意该文件头注释明确写着 Derived from tokens.css. Keep tokens.css as the source of truth.——派生文件只是缓存不是并列的事实源这一点在 design-systems/README.md 中有同样表述tailwind-v4.css由tokens.css派生design-tokens.json由 token 契约报告派生且必须与tokens.css一致components.manifest.json由components.html与tokens.css派生。11.3 第三步用 manifest 与契约审计自检manifest.json的preview字段指向 preview/colors.html、preview/typography.html、preview/spacing.html 三个视觉抽查页source/目录存放 source/token-contract.report.json 等审计证据。包质量守卫见 design-systems/_schema/AGENTS.md会校验声明的路径、富包档案、派生文件一致性、token 契约、组件夹具、来源证据与预览覆盖最终可通过仓库根目录的pnpm guard与pnpm typecheck统一验证。12. 小结Professional 包展示了 Open Design 设计系统体系的标准范式DESIGN.md 承载设计师可读的意图与红线tokens.css 承载机器可消费的语义契约components.html / manifest.json / design-tokens.json 等派生物则保证意图—实现—审计三者闭环。九大规范中色彩立场全语义色位、移动优先字阶、4 基数间距、whitespace-first 构图、短促动效与四条反模式共同定义了一个克制、可信、业务就绪的商业界面风格。无论你是要用它指导 Agent 生成 landing page、dashboard 还是 SaaS 原型都可以按 USAGE.md 的阅读顺序把 DESIGN.md 当作审美裁判、把 tokens.css 当作唯一事实源从而在 Open Design 中产出风格一致且可访问的前端产物。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考