OpenDesign Elegant 设计系统实战从 DESIGN.md 设计规范到语义令牌与组件实现【免费下载链接】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-designElegant 是 OpenDesign 内置的 Professional Corporate 分类设计系统包。它用优雅、克制的语言定义了一套可被编码 Agent 直接消费的设计上下文精致的排版、极简的调色板、考究的布局与明确的交互状态。本篇技术指南以仓库内 design-systems/elegant/DESIGN.md 为骨架逐节还原其视觉主题、色彩、排版、间距栅格、布局、组件、动效、语气与反模式约束并结合 tokens.css、components.html、design-tokens.json 等真实文件给出源码级佐证与可直接落地的使用路径。读完后你将掌握如何把一套 Elegant 风格的页面从设计意图编译为语义令牌 组件 CSS。1. Elegant 在 OpenDesign 中的定位一个可移植的设计系统包OpenDesign 把每个设计系统封装为一个可移植的包packageelegant是内置目录中的一员。按 design-systems/README.md 的约定每个打包系统拥有统一的最小机器可读结构design-systems/slug/ ├── manifest.json ← 发现元数据与声明文件路径 ├── DESIGN.md ← 面向 Agent 的规范设计散文本指南主体 └── tokens.css ← 编译后的语义令牌样式表运行时权威在 Design System 界面或支持的项目创建流程中选中 Elegant 后系统会把这一设计上下文组合进 Agent 的 prompt让编码 Agent 在生成页面时遵循这套风格约束。elegant包同时启用了更丰富的文件画像见 manifest.jsonschemaVersion: od-design-system-project/v1id与目录 slug 一致为elegantcategory: Professional Corporatefiles声明design: DESIGN.md、tokens: tokens.css、designTokens: design-tokens.json、tailwind: tailwind-v4.css、components: components.htmlcraft.suggested建议叠加 color 与 accessibility-baseline 两条 craft 规则preview声明preview/colors.html、preview/typography.html、preview/spacing.html三个预览页sourceFiles记录source/evidence.md、source/tokens.source.json、source/token-contract.report.json作为导入证据。包内实际文件与派生关系如下文件角色DESIGN.md设计意图、约束与反模式的规范散文tokens.css编译后的语义令牌:root自定义属性design-tokens.json由 token-contract 报告派生的 Design Tokens JSONtailwind-v4.css由 tokens.css 派生的 Tailwind v4theme映射components.html独立组件夹具fixture含完整style块components.manifest.json由 components.html 与 tokens.css 派生的组件/令牌索引USAGE.md面向 Agent 的读取顺序与使用指南source/evidence.md导入来源与证据说明关键原则见 design-systems/README.md 与 docs/design-systems.md派生文件是缓存而非竞争性的真相源——components.manifest.json由components.htmltokens.css派生design-tokens.json必须与tokens.css一致tailwind-v4.css由tokens.css派生。因此任何改动都应落在tokens.css上。2. 视觉主题与氛围优雅、克制、高级DESIGN.md 对 Elegant 的定位一句话概括Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication优雅、精致的审美细腻的排版、极简的调色板与考究的布局透出成熟气质。视觉风格Visual styleminimal, clean色彩立场Color stanceprimary、secondary、neutral、success、warning、danger 六类角色齐备设计意图Design intent在保持该风格家族可识别的前提下优先保障可用性与可读性从源码看这一意图在 tokens.css 头部注释中体现为具体实现语言elegant interface language with warm neutrals, serif display type, and quiet premium controls暖中性色、衬线展示字体、安静的高级控件。也就是说风格家族的识别度由暖中性底色 衬线标题 低饱和强调色共同承载而不是靠装饰元素堆砌。3. 色彩体系从规范色到语义令牌3.1 DESIGN.md 声明的色彩角色DESIGN.md 声明了 8 个色彩角色全部标注为 Token from style foundations角色色值说明Primary#3B82F6强调/主行动色Secondary#8B5CF6次要强调色Success#16A34A成功状态Warning#D97706警告状态Danger#DC2626危险状态Surface#FFFFFF大背景与卡片Text#111827正文保证可读性Neutral#FFFFFF由 Surface 令牌派生用于官方格式兼容配套使用指引优先用 Primary#3B82F6做 CTA 强调用 Surface#FFFFFF做大面积背景与卡片正文保持在 Text#111827上以保证可读性。3.2 tokens.css 中的编译语义令牌运行时真正生效的是 tokens.css 的:root块。值得注意编译后的令牌值与 DESIGN.md 的声明存在明显漂移——编译结果是一套暖中性 暖棕强调的优雅调色板:root { --bg: #fbf6ee; --surface: #fffdf8; --surface-warm: #f1e3cf; --fg: #201914; --fg-2: #4c4037; --muted: #7a6d63; --meta: #9b5b32; --border: #ded2c3; --border-soft: #eee4d7; --accent: #9b5b32; --accent-on: #ffffff; --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%); --success: #4f8a4f; --warn: #c9822f; --danger: #b33a3a; }从仓库文件对比可以推断DESIGN.md 中的色值更像风格家族意图的声明而 tokens.css 才是被组件、派生 JSON 与 Tailwind 映射共同消费的编译权威。同时 DESIGN.md 声明的角色名Primary/Secondary/Text…与 tokens.css 的令牌名--accent/--fg-2…并不一一对应这也印证了 USAGE.md 的要求——精确保留 schema 令牌名以保证跨品牌切换可靠。实践上写组件时请引用 tokens.css 的令牌名而非 DESIGN.md 中的角色名。3.3 色彩使用纪律craft/color.mdElegant 的 manifest 在craft.suggested中推荐叠加 color 规则。该规则要求调色板分层规划并给出了像素占比纪律层级像素占比令牌中性色 Neutrals70–90%--bg、--surface、--fg、--muted、--border强调色 Accent仅一个5–10%只用--accent绝不发明第二个强调色语义色 Semantic0–5%--success、--warn、--danger效果色 Effect1%渐变、光晕极少使用同时有硬性上限单屏--accent可见使用不超过 2 处典型搭配是一个 eyebrow/徽章 一个主 CTA链接也算强调色对比度门槛为正文≤16px4.5:1、大字18px 或 14px 加粗3:1、UI 组件与相邻表面 3:1。这与 Elegant minimal palette 的立场完全一致。4. 排版细腻的字体层级DESIGN.md 声明的排版骨架字号阶梯Scale14 / 16 / 18 / 24 / 32 / 40字体家族Familiesprimary Google Sansdisplay Google Sansmono Anonymous Pro字重Weights100、200、300、400、500、600标题应承载风格个性正文应优化可扫描性与对比度。tokens.css 中编译后的排版令牌同样是意图声明与编译实现并存的状态--font-display: Georgia, Times New Roman, serif; --font-body: Inter, system-ui, sans-serif; --font-mono: SF Mono, ui-monospace, Menlo, monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 17px; --text-lg: 20px; --text-xl: 28px; --text-2xl: 42px; --text-3xl: 64px; --text-4xl: 88px; --leading-body: 1.62; --leading-tight: 1; --tracking-display: -0.025em;实现上display 字体选择了 Georgia 衬线栈来承载精致/优雅的标题个性正文使用 Inter 系统无衬线保证可扫描性1.62 的行高与-0.025em的字间距进一步强化正文呼吸感。在 components.html 中可以看到排版的应用形态h1用--text-4xl、--leading-tight、--tracking-display.eyebrow用等宽字体 0.12em 字距 大写 --meta色作为眉题提供编辑感.lead用--text-lg--fg-2承载引导段落。5. 间距与栅格DESIGN.md 规定间距刻度Spacing scale4 / 8 / 12 / 16 / 24 / 32保持各区块与组件之间垂直节奏一致列与模块对齐到可预测的栅格避免临时偏移。tokens.css 把刻度扩展为--space-14px到--space-1248px并补充了区块级与容器级令牌--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --section-y-desktop: 112px; --section-y-tablet: 80px; --section-y-phone: 56px; --container-max: 1180px; --container-gutter-desktop: 36px; --container-gutter-tablet: 24px; --container-gutter-phone: 16px;其中--section-y-*定义了桌面/平板/手机三档区块纵向节奏--container-gutter-*定义了容器左右留白配合--container-max: 1180px构成响应式栅格骨架。在 components.html 中这些令牌通过媒体查询切换正是垂直节奏一致、栅格可预测的具体实现。6. 布局与构图DESIGN.md 的布局三条准则优先使用内边距一致、清晰的内容块层级保持明显标题headline→ 支撑文案support text→ 主行动primary action在加边框或阴影之前先用留白区分不同区域。这与 Elegant 组件夹具中的构图一一对应components.html.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: var(--space-8); align-items: center; } .stack * * { margin-block-start: var(--space-4); } .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }Hero 区左侧是eyebrow → h1 → lead → actions的经典标题→支撑→主行动纵向栈右侧是组件面板区块之间用--space-8拉开而不是靠边框。components.manifest.json的 layout 组件组也验证了这一点.container、section、.metric-grid引用的令牌正是--container-gutter-*与--section-y-desktop。7. 组件规范DESIGN.md 对组件的约束按钮Buttons主行动用 Primary编译后即--accent: #9b5b32次行动保持中性输入Inputs强 focus-visible 状态、清晰 label、可预测的错误提示卡片/区块Cards/sections页面内统一圆角、间距与抬升elevation策略。7.1 组件清单与令牌引用components.manifest.json 派生了完整的组件组索引buttons、inputs、cards、badges、links、typography、layout 七组可用keyboard 与 icons 组为present: false。每组都带有精确的令牌引用例如 buttons 组引用--accent、--accent-on、--border、--elev-ring、--motion-fast、--ease-standard、--radius-md、--text-sm等inputs 组引用--border、--focus-ring、--radius-sm、--surface等。7.2 关键组件实现按钮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); }输入框components.html.field { display: grid; gap: var(--space-2); } label { color: var(--fg-2); font-size: var(--text-sm); font-weight: 700; } input { width: 100%; min-height: 46px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; } input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }卡片与面板components.html.panel用--radius-lg 1px--border--elev-raised柔投影.metric用--text-2xl显示衬线数字、--muted承载说明.status徽章用--success圆点。整体贯彻统一圆角、间距与抬升策略。8. 动效与交互DESIGN.md 的动效立场用微妙过渡强调 Primary编译后为--accent这一交互信号默认使用短促、有目的的过渡150–250ms与稳定缓动hover、focus-visible、active、disabled、loading 状态必须显式。tokens.css 为此提供了完整的动效令牌--motion-fast: 150ms; --motion-base: 240ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --focus-ring: 0 0 0 4px rgba(155, 91, 50, 0.24); --radius-pill: 9999px;可见的实现呼应按钮过渡统一走var(--motion-fast) var(--ease-standard)主按钮 hover 用--accent-hover通过color-mix(in oklab, var(--accent), black 8%)派生并上移 1pxinput:focus与.btn:focus-visible共用--focus-ring让键盘焦点在所有控件上呈现同一系统信号。缓动曲线cubic-bezier(0.2, 0, 0, 1)偏快入慢出既短促又不生硬符合优雅的品牌基调。9. 语气与品牌DESIGN.md 对文案语气的要求语气与视觉风格一致简洁、自信、产品化微文案microcopy保持行动导向避免空泛的填充语标题保留风格个性UI 标签保持字面、清晰。这一原则在组件夹具的示例文案中有直接体现hero 眉题 Elegant design system、标题 Elegant editorial commerce、引导句 Refined typography, soft luxury neutrals, and graceful product presentation.——每个词都在传达优雅编辑感的产品语义而按钮文案则直白地使用 Primary action / Secondary action。10. 反模式Anti-patternsDESIGN.md 列出四条硬性反模式不要引入调色板之外的色彩——当现有令牌能解决问题时不要用同一字号/字重扁平化层级——所有文本同尺寸同字重会摧毁层级不要添加降低可读性或可访问性的装饰效果不要在同一个界面混用互不相关的视觉隐喻。这些约束在仓库中还有更强的执行配套。USAGE.md 的 Avoid 清单补充道不在复制的:root令牌块之外写裸 hex不脱离tokens.css独立重定义 Tailwind 或 design-token 值不添加components.html或 DESIGN.md 之外的组件配方。而 color 文档则点名了 AI 生成 UI 最常见的两类味道默认靛蓝#6366f1Tailwind indigo-500以及 hero 上紫→蓝的信任渐变——规则明确要求优先用--accent令牌、用平表面 类型驱动层级取代装饰性渐变。11. 在 Agent 工作流中实际使用 Elegant 包按 USAGE.md 约定的读取顺序先读 USAGE.md 理解包契约读 DESIGN.md 理解视觉意图、约束与反模式把 tokens.css 粘贴到第一个 artifact 的style块最前面再写组件 CSS用components.manifest.json做组件清单速查需要精确选择器或状态时打开components.html需要视觉抽查时打开preview/下的 colors、typography、spacing 三个页面。11.1 使用 Tailwind v4如果你的产物使用 Tailwind v4tailwind-v4.css 提供了从 tokens.css 派生的theme映射--color-accent: var(--accent)、--color-bg: var(--bg)、--font-display: var(--font-display)、--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)等。使用时先import tailwindcss;再import ./tokens.css;即可在类名中直接使用bg-bg、text-fg、text-accent、rounded-lg、shadow-raised等语义类。文件头部明确标注Derived from tokens.css. Keep tokens.css as the source of truth.11.2 质量与校验design-tokens.json 给出了本包令牌契约的健康度报告共 56 个令牌56 个全部有来源支持sourceBackedA1-identity 8 个、A1-structure 18 个、B-slot 4 个、A2 26 个评分 100、等级 excellent、无需重建。这意味着 tokens.css 中的每一个声明都通过了 TOKEN_SCHEMA 契约校验可以放心消费。修改包内容后仓库要求运行pnpm guard与pnpm typecheck以通过包质量守卫详见 design-systems/README.md 的 Writing a package 一节与 docs/design-systems.md。12. 使用边界与诚实说明两点需要在使用时注意DESIGN.md 与编译令牌存在版本漂移。如第 3、4 节所述DESIGN.md 声明的 Primary#3B82F6/Google Sans 等与 tokens.css 编译出的暖棕#9b5b32/Georgia 并不一致。从仓库文件对比看编译产物才是运行期真相而 DESIGN.md 负责传达风格意图与反模式约束。开发时应以 tokens.css 的令牌值为准。来源边界。source/evidence.md 明确说明本包基于 OpenDesign 的 curated bundled fixture 回填并未对上游品牌仓库或网站做新爬取因此不要声称拥有原始上游来源证据design-tokens.json与tailwind-v4.css是派生输出应通过报告与令牌样式表重新生成而非手工编辑。这也与 USAGE.md 的 Avoid claiming original upstream source evidence 要求一致。掌握上述规范、令牌与组件实现之后你就能够在 OpenDesign 的任意生成工作流中复现一套风格统一的 Elegant 页面暖中性底色 衬线标题 单一暖棕强调色 150ms 系统级动效让每一次输出都保持优雅家族的识别度同时不牺牲可用性与可读性。【免费下载链接】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），仅供参考