OpenDesign Editorial 设计系统实战指南杂志式排版、衬线字型与暖纸质感的设计令牌落地【免费下载链接】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/editorial/DESIGN.md 为骨架系统拆解 Editorial 设计系统Creative Artistic 类别下的杂志式排版风格的完整落地形态从视觉基调、色彩令牌、衬线字型、8pt 栅格到按钮/表单/卡片等组件规范再到 tokens.css、components.html、design-tokens.json 等包内文件的工程契约。读完本文你将掌握如何基于这套 bundled 设计系统包在自己的 OpenDesign artifact 中粘贴令牌、按组件清单复用样式、用预览页做视觉核对并理解其背后的四层令牌架构A1-identity / A1-structure / A2 / B-slot与守护校验机制。1. 包结构与读取顺序一份可机器校验的设计系统契约Editorial 不是一份孤立的说明文档而是一个完整的Design System 2.0 包。其入口 manifest.json 声明了包内所有文件及其角色DESIGN.md— 设计规范正文视觉意图、约束、反模式tokens.css— 规范化编译后的令牌样式表事实源design-tokens.json— 由tokens.csssource/token-contract.report.json派生的 Design Tokens JSONtailwind-v4.css— 由tokens.css派生的 Tailwind v4theme映射components.html— 独立组件夹具fixturecomponents.manifest.json— 从components.html与tokens.css派生的组件清单缓存preview/— 静态预览页colors.html、typography.html、spacing.htmlsource/— 导入证据evidence.md、tokens.source.json、token-contract.report.json。USAGE.md 给出了针对 OpenDesign 代理agent与评审者的推荐读取顺序先读USAGE.md理解包契约再读DESIGN.md获取视觉意图、约束与反模式将tokens.css粘贴进第一个 artifact 的style块之后才写组件 CSS用components.manifest.json获取精简组件清单需要精确选择器或状态时打开components.html需要视觉抽查时查看preview/页面。值得注意按 design-systems/_schema/AGENTS.md 中的包契约DESIGN.md与tokens.css是每个 bundled 目录的固定 v1 文件manifest 守卫scripts/check-design-system-manifests.ts会校验manifest.json中声明的路径必须存在且安全、JSON 索引可解析、components.manifest.json必须与从components.htmltokens.css的重新派生一致。2. 视觉主题与氛围Category: Creative Artistic Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.Editorial 的核心设计意图是让输出在保持可用性与可读性的前提下一眼可辨属于这一风格家族。其风格参数如下视觉风格Visual stylemodern, editorial色彩立场Color stanceprimary、secondary、neutral、success 四类角色设计意图Design intent输出保持风格家族辨识度同时不牺牲可用性与可读性。从包内实际渲染的 components.html 看这套风格被进一步具象为 editorial publishing language with warm paper surfaces, serif display type, and composed story cards——暖纸色表面、衬线展示字型、编排感的故事卡片页面主题文案 Magazine feature system杂志专题系统直接点明其应用场景长文叙事、衬线标题与慷慨的文章节奏。3. 色彩体系从风格蓝图到令牌落地DESIGN.md在色彩一节给出了风格层面的基础令牌方向标注 Token from style foundations角色设计文档中的方向值Primary#111111Secondary#F1F1F1Success#16A34AWarning#D97706Danger#DC2626Surface#FFFFFFText#111827Neutral#FFFFFF由 Surface 派生用于官方格式兼容同时给出三条使用法则强调CTA使用 Primary#111111大面积背景与卡片使用 Surface#FFFFFF正文保持 Text#111827以保证可读性。需要说明的是本包是基于 curated bundled fixture 的落地实现见 source/evidence.md 与manifest.json中source.type: bundled的声明其提交的 tokens.css 是实际可粘贴的暖纸色令牌体系与DESIGN.md记录的品牌级方向值属于蓝图 vs 落地两层关系。实际落地值如下:root { --bg: #fbf7f0; --surface: #fffdf8; --surface-warm: #f1e6d6; --fg: #1f1a16; --fg-2: #4b4038; --muted: #7d7168; --meta: #9a5a2f; --border: #ded3c5; --border-soft: #eee5da; --accent: #9a5a2f; --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; }从这些实现值可以提炼出 Editoria 的配色工程要点强调色是暖褐#9a5a2f而非纯黑--accent-hover与--accent-active通过color-mix(in oklab, …)派生保证交互状态与品牌色严格同源表面分层--bg页面底色、--surface卡片、--surface-warm暖色面板构成三级纸感层级文字分层--fg/--fg-2/--muted/--meta从主文本一路衰减到元信息与眉题eyebrow语义色success / warn / danger 齐全供状态标签使用。上述每个令牌都能在 design-tokens.json 中找到机器可读声明含type、layer、confidence: high与指向tokens.css具体行号的sources并通过 source/token-contract.report.json 映射回声明行。报告中score: 100、grade: excellent、undeclaredReferenced: []表明所有被组件引用的令牌都已声明没有引用未声明的断链风险。4. 字体排印衬线展示栈与长文行距DESIGN.md规定的字型规范为字号刻度Scale14/16/18/24/32/40字族FamiliesprimaryGelasio、displayGelasio、monoUbuntu Mono字重Weights100–900 全档标题应承载风格个性正文应优先保证可扫描性与对比度。落地到 tokens.css 后实际字型栈为完整的三层--font-display: Georgia, Times New Roman, serif; --font-body: Source Serif Pro, Georgia, serif; --font-mono: IBM Plex Mono, ui-monospace, Menlo, monospace;字号刻度则被放大为从12px到92px的完整展示级阶梯组件实际用到的为 12/14/18/21/30/44/66/92同时配套行高与字距令牌令牌值用途--text-xs/--text-sm12px / 14px眉题、元信息、标签--text-base/--text-lg18px / 21px正文、导语--text-xl~--text-4xl30px ~ 92px三级标题到主视觉标题--leading-body1.65正文行高长文可读性核心--leading-tight1标题行高--tracking-display-0.02em展示字距标题负字距在 components.html 中标题体系被这样使用h1用--text-4xl92pxfont-weight: 760max-width: 820px构成杂志封面式的大标题h2用--text-3xl66pxh3用--text-xl30px.eyebrow眉题则用等宽字体 letter-spacing: 0.12em 大写转换制造编辑刊头感。preview/typography.html也验证了这一点眉题、展示标题、导语--fg-2--text-lg--leading-body与正文--muted--text-base--leading-body全部只引用 schema 令牌确保跨 artifact 可移植。5. 间距与栅格8pt 基线网格DESIGN.md对间距的规定非常简洁但严格间距刻度8pt 基线网格各区块与组件间保持一致的垂直节奏vertical rhythm列与模块对齐到可预期的网格避免临时偏移。落地实现提供了从--space-14px到--space-1248px的 8 的倍数阶梯--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;配套的版心与章节节奏令牌--container-max: 1120px; --container-gutter-desktop: 36px; --container-gutter-tablet: 24px; --container-gutter-phone: 16px; --section-y-desktop: 112px; --section-y-tablet: 80px; --section-y-phone: 56px;components.html演示了栅格在响应式中的落地方式.container使用max-width: var(--container-max)margin-inline: auto在1023px与639px两个断点切换 guttersection的纵向留白随断点从 112px → 80px → 56px 收缩.hero采用1.1fr / 0.9fr双列网格.metric-grid为三列等宽网格.card-row为双列网格并在860px以下全部降为单列。preview/spacing.html可对该间距体系做直接视觉抽查。6. 布局与构成清晰区块与可见层级DESIGN.md的布局原则只有三条优先使用内部 padding 一致的清晰内容块层级保持明显标题 → 支持文案 → 主行动headline → support text → primary action先用留白分隔内容再考虑边框与阴影。这套原则在 components.html 的.stack与.actions中体现得最直接.stack * * { margin-block-start: var(--space-4); } .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }即同一内容块内的相邻元素仅靠margin-block-start: 16px分隔行动按钮组再以 24px 顶部留白与上方文本区隔——先用空白后用装饰被落实为具体的令牌组合。而 .panel 等容器只有在需要物理分层时才叠加1px边框与--elev-raised阴影。7. 组件规范按钮、输入框与卡片DESIGN.md规定了三类核心组件的基调按钮主行动使用#111111落地为--accent暖褐次行动保持中性输入框强 focus-visible 状态、清晰标签、可预期的错误提示卡片/区块全页统一圆角、间距与抬升elevation策略。components.manifest.json 给出了组件夹具的量化事实1 个style块、48 个选择器、26 个类、19 种元素。组件清单共 9 个分组其中 6 个已实现present: true、3 个缺席分组状态关键选择器/类buttons按钮与 CTA✅.btn、.btn-primary、.btn-secondaryinputs表单控件✅.field、input、input:focus、labelcards卡片与面板✅.card-row、.panel、.panel-head、.tilebadges徽标/状态✅.status含::before圆点links行内链接✅atypography字型工具✅.eyebrow、.lead、h1–h3layout布局原语✅.container、section、.metric-gridkeyboard键盘提示❌—icons图标槽❌—按钮的完整实现含全部状态如下.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); color: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow 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); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }输入框的聚焦规范同样是焦点环即品牌信号input:focus同时切换border-color: var(--accent)与box-shadow: var(--focus-ring)4px 的rgba(154, 90, 47, 0.24)光晕。卡片体系则通过--radius-sm/md/lg/pill四档圆角与--elev-flat/ring/raised三档抬升策略让.panel页面主卡--elev-raised大投影与.tile/.mini-card次级卡细边框 暖表面形成明确的主次秩序。8. 动效与交互克制而确定的品牌信号DESIGN.md的动效规范用细微过渡强调 Primary#111111落地为--accent作为交互信号默认短促、有目的的过渡150–250ms稳定缓动hover、focus-visible、active、disabled、loading 状态必须显式定义。落地令牌给出了精确的参数--motion-fast: 180ms; --motion-base: 280ms; --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);components.html中按钮过渡统一走--motion-fast180ms--ease-standardcubic-bezier(0.22, 1, 0.36, 1)缓出曲线hover 时仅做 1px 上移与背景色变化而.panel等容器使用--motion-base280ms。交互状态的完整性可从 components.manifest.json 的选择器清单直接验证.btn:hover、.btn:focus-visible、input:focus均显式声明键盘可达性:focus-visible被作为一等状态对待。9. 语气与品牌简洁、自信、产品化DESIGN.md对文案语气的三条要求语气与视觉风格一致简洁、自信、产品化微文案行动导向避免空泛套话标题保留风格个性UI 标签保持字面清晰。这一原则在components.html的示例文案中可见一斑眉题 Editorial design system、主标题 Magazine feature system、导语 Long-form storytelling, serif headlines, and generous article rhythm.按钮文案直接使用 Primary action / Secondary action——标题层携带风格个性控件层保持字面直白。10. 反模式四类红线DESIGN.md在结尾明确了四类禁止行为这是使用该设计系统时最需要遵守的约束不引入调色板之外的色彩——现有令牌能解决的问题不得另起 hex不用单一字号/字重压平层级——全部文本同尺寸同字重会摧毁杂志式层级不添加损害可读性或可访问性的装饰效果不在同一界面混用无关视觉隐喻。此外USAGE.md 还补充了工程层面的避免清单不要在复制的:root令牌块之外使用裸 hex 值不要绕过tokens.css单独重定义 Tailwind 或 design-token 值不要声称存在上游原始品牌抓取证据本包基于 curated bundled fixture不要新增components.html与DESIGN.md之外的组件配方。11. 在 OpenDesign artifact 中使用 Editorial 的完整流程综合USAGE.md与包内文件落地一个 Editorial 风格 artifact 的标准流程是引入令牌把 tokens.css 中完整的:root块粘贴到第一个 artifact 的style块顶部——所有组件样式必须在其之后编写这样var(--...)引用才能解析选用组件优先复用 components.manifest.json 中已有的按钮/输入框/卡片/徽标/排版分组而不是发明新控件需要精确选择器或状态定义时直接对照 components.html保持令牌名不变schema 令牌名必须逐字保留这样跨品牌切换cross-brand switching才可靠遵守令牌分层语义--accent只用于主行动、链接、焦点状态与唯一焦点元素正文只用--fg系背景与卡片用--surface系视觉核对打开 preview/colors.html、preview/typography.html、preview/spacing.html 三页分别确认色彩、字型与间距是否与预期一致如需 Tailwind v4在import tailwindcss之后导入 tailwind-v4.css它会通过theme把全部令牌映射为bg-accent、text-fg、font-display、shadow-raised等工具类——但注意该文件是派生产物必须保持tokens.css为事实源不得独立重定义数值。12. 背后的工程契约四层令牌与守护校验最后理解这套包的运行机制有助于正确使用它。按 design-systems/_schema/AGENTS.md每个共享令牌都要回答两个问题谁决定取值品牌作者 A 层还是 schema 作者 B-slot以及品牌省略时会怎样required / fallback / alias。据此分为四层层谁决定省略后果Editorial 实例A1-identity品牌守护失败--bg、--fg、--accent、--font-displayA1-structure品牌守护失败字号刻度、--container-max、--section-y-*A2品牌带 fallback守护失败当前严格模式--motion-fast、--success、--space-4、--font-monoB-slot品牌或 schema 建议别名守护失败--fg-2、--surface-warm、--meta、--border-softEditorial 的 56 个令牌在 design-tokens.json 中按此分层统计A1-identity 8 个、A1-structure 18 个、A2 26 个、B-slot 4 个且aliasTokens: 0、sourceBackedTokens: 56——意味着该品牌对四个 B-slot 都给出了独立取值暖褐--meta、暖表面--surface-warm等而非偷懒的var(--sibling)别名。其缘由在_schema/AGENTS.md中也有说明由于 artifact 是把单个品牌的:root粘贴进一个style不存在全局样式表兜底因此当前契约要求每个品牌必须声明全部共享令牌缺失的var(--motion-fast)之类引用会静默失效。components.manifest.json的 token 审计也印证了这一点声明的 56 个令牌全部被引用或已声明undeclaredReferenced为空品牌内无断链。这套规范文档DESIGN.md 令牌样式tokens.css 组件夹具components.html 派生产物design-tokens.json / tailwind-v4.css 审计证据source/的包结构正是 OpenDesign 让编码代理稳定复现某种设计风格的工程基础——Editorial 即是其中的一个完整可复用范例。【免费下载链接】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），仅供参考