OpenDesign Notion 设计系统 2.0 包使用指南：阅读顺序、设计亮点与 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点击查看免费下载本文面向 OpenDesign 的 Agent 与设计评审者系统讲解design-systems/notion这个 Design System 2.0 包的使用契约如何按正确顺序读取包内文件、理解 Notion 风格的核心设计亮点暖中性色、NotionInter 负字距、细边框与多层阴影以及在使用时必须遵守的 Do / Avoid 约束。读完本文你将掌握该包的标准接入流程、Token 系统的底层组织方式以及组件清单与预览页的正确用法。包是什么一个可供 Agent 直接消费的设计契约design-systems/notion是 OpenDesign 仓库中按 Design System 2.0 规范整理的品牌设计包其 manifest.json 声明了完整的元数据schemaVersion为od-design-system-project/v1类别为 Productivity SaaS描述为 Bundled OpenDesign package for Notion, derived from curated DESIGN.md, tokens.css, and components.html fixtures。从 manifest 可以看到包内文件的分工designDESIGN.md—— 视觉意图、约束与反模式tokenstokens.css—— 结构化 Token 绑定designTokensdesign-tokens.json—— 派生出的 Token 契约报告tailwindtailwind-v4.css—— Tailwind v4 集成层componentscomponents.html—— 参考组件实现componentsManifestcomponents.manifest.json—— 组件清单previewpreview/colors.html、preview/typography.html、preview/spacing.html三个预览页sourceFilessource/evidence.md、source/tokens.source.json、source/token-contract.report.json—— 作为审计证据。其中 source/evidence.md 明确界定了证据边界该包基于 OpenDesign 精选的 bundled fixture 派生并未对上游原始品牌仓库或网站进行重新抓取design-tokens.json与tailwind-v4.css是派生产物应基于tokens.css重新生成而不是手工编辑。标准阅读顺序Read OrderUSAGE.md 给出了五个步骤的接入顺序这是 Agent 消费该包的第一条契约先读 USAGE.md—— 理解包的整体契约即本文所在文件再读 DESIGN.md—— 获取视觉意图、约束与反模式见 DESIGN.md把tokens.css粘贴到第一个 artifact 的style块中再开始写组件 CSS —— 即:root中的全部变量必须作为一切样式的地基用components.manifest.json作为紧凑的组件清单当需要精确的选择器或状态如:hover、:focus-visible时打开components.html查看完整实现需要视觉抽查时检查preview/页面—— 颜色、排版、间距三类预览各司其职。这套顺序的本质是契约 → 意图 → Token → 组件清单 → 视觉验证层层递进避免 Agent 在缺少 Token 或设计意图的情况下凭空创作。设计亮点四个可被复现的 Notion 风格特征USAGE.md 提炼了四个标志性特征它们在 DESIGN.md 中有完整展开并在 tokens.css 中被固化为变量NotionInter改良版 Inter 显示级负字距64px 时字距为 -2.125px归一化为--tracking-display: -0.033em。DESIGN.md 的排版层级表给出了完整梯度64px → -2.125px、54px → -1.875px、48px → -1.5px、26px → -0.625px、16px 恢复正常字重系统为四级 400/500/600/700。在 components.html 中h1使用letter-spacing: var(--tracking-display)并开启 OpenTypelnum,loclh2为-0.031em、h3为-0.024em且行高覆盖为 1.23正是大字号压缩、小字号可读原则的落地。暖中性色板灰色带黄棕色调而非蓝灰。核心色阶在 tokens.css 中绑定为--surface: #f6f5f4暖白、--fg-2: #31302e暖黑、--muted: #615d59暖灰 500、--meta: #a39e98暖灰 300。DESIGN.md 特别强调Notion 的灰永远不是蓝灰。近黑文字正文与标题使用rgba(0,0,0,0.95)而非纯黑即 Token--fg带来不易察觉的微暖质感。极细边框全程1px solid rgba(0,0,0,0.1)即--borderDESIGN.md 称之为 whisper-weight division耳语级分隔另有更淡的--border-soft: rgba(0,0,0,0.06)用于行分隔。阴影同样克制--elev-raised是四层阴影栈单层透明度最高 0.04追求感觉到而非看到的深度。唯一的饱和色Notion BlueDESIGN.md 反复强调 Notion Blue#0075deToken--accent是核心 UI 中唯一的饱和色应节制地用于 CTA 与链接。配套状态色包括 hover 用 Active Blue#005bab--accent-hover、按钮按下态由color-mix(in oklab, var(--accent), black 14%)计算--accent-active、聚焦环--focus-ring: 0 0 0 3px rgba(9,127,232,0.3)。语义色有--success: #1aae39、--warn: #dd5b00、--danger: #dc2626。Do接入时必须遵守的正面清单原样保留 schema token 名称--bg、--surface、--fg、--accent等名称是跨品牌切换的稳定契约不可改名。这一点由 source/token-contract.report.json 与 design-tokens.json 双向印证——后者的contract字段为TOKEN_SCHEMA56 个 token 全部sourceBacked评分 100、评级excellent且undeclaredReferenced为空说明没有任何组件引用未声明的变量。用--accent表达主操作、链接、聚焦态与唯一视觉焦点从 components.html 的实现看.btn-primary的背景是var(--accent)、文字var(--accent-on)、hover 变var(--accent-hover).field input:focus同时切换border-color: var(--accent)与box-shadow: var(--focus-ring)。链接态在 DESIGN.md 中规定为 Link Blue#0075de悬停下划线。优先复用components.manifest.json中的组件分组而不是发明新控件。该清单按语义分组例如buttons.btn/.btn-primary/.btn-secondary/.btn-ghost、inputs.field系列、cards.card/.card-warm、badges.pill/.pill-blue/.pill-green、typography、layout等并记录每个分组引用的 Token 列表如badges引用--radius-pill、--space-1、--text-xs。清单还统计了 fixture 规模1 个 style 块、43 个选择器、22 个类、24 个元素。把source/文件当作 bundled fixture 回填的审计证据evidence.md、token-contract.report.json、tokens.source.json共同说明每个 Token 的声明出处如--bg的来源标注为tokens.css:31reason 为 Bundled tokens.css declares --bg; no upstream recrawl was performed。Avoid必须规避的反模式不要在复制的:rootToken 块之外使用裸 hex 值。components.manifest.json的literals统计显示 fixture 中颜色表达式 7 处、像素值 20 处、硬编码字体族 4 处——这些都是允许的少量例外但 Agent 写组件时应一律通过var(--*)取色。不要独立于tokens.css重新定义 Tailwind 或 design-token 值。tailwind-v4.css 的头注释写明 Derived from tokens.css. Keep tokens.css as the source of truth.其theme块只是把每个 Token 映射为 Tailwind 命名空间如--color-accent: var(--accent)、--shadow-raised: var(--elev-raised)任何修改都应改tokens.css再重新派生。不要声称拥有原始上游来源证据该包基于 curated bundled fixture而非对 Notion 官网的实时抓取证据边界以 source/evidence.md 为准。不要添加components.html或DESIGN.md中未覆盖的新组件配方新控件必须先有设计意图背书再落进参考实现。Token 体系与派生产物从 tokens.css 到 Tailwind v4tokens.css的:root块按语义分层组织这是理解整包的核心地图Surface / Foreground--bg纯白、--surface暖白用于区块交替、--surface-warm别名、--fg近黑、--fg-2暖黑标题、--muted暖灰 500、--meta暖灰 300Border / Accent / Semantic--border、--border-soft、--accent系列、--success/--warn/--dangerTypography字号--text-xs(12px) 到--text-4xl(64px) 共 8 档、--leading-body(1.5)、--leading-tight(1.00)、--tracking-display(-0.033em)、字体族--font-display/--font-body/--font-monoSpacing--space-1(4px) 到--space-12(48px)以及区块纵向节奏--section-y-desktop/tablet/phone80/48/32pxRadius / Elevation / Focus / Motion / Layout--radius-sm(4px)、--radius-md(8px)、--radius-lg(12px)、--radius-pill(9999px)--elev-flat/--elev-ring/--elev-raised--focus-ring--motion-fast(150ms)、--motion-base(200ms)、--ease-standard--container-max(1200px) 与三档 gutter24/16/12px。design-tokens.json用分层统计印证了这套体系56 个 Token 中 A1-identity 8 个、A1-structure 18 个、A2 26 个、B-slot 4 个。tailwind-v4.css则通过theme将每个 Token 暴露为 Tailwind 工具类变量例如用text-4xl对应 64px、shadow-raised对应四层阴影、spacing-section-desktop对应区块节奏实现一套 Token两种消费方式。组件实现速览参考 fixture 的实际形态components.html是一个可直接在浏览器打开、也可供 Agent 解析的参考页其中三个区块覆盖了包内绝大多数选择器Hero 区h164px、-0.033em、lnum,locl.eyebrow12px、大写、0.08em正字距.lead20px、600 字重、--muted色.btn-primaryNotion Blue.btn-secondaryrgba(0,0,0,0.05)半透明暖灰.pill-blue徽章右侧为.card-warm信任条与.pill-green运行状态徽章特性区暖白背景background: var(--surface)上的三列.features-grid卡片为.card白底、--border细边框、12px 圆角、hover 时浮现--elev-raised阴影响应式断点与 DESIGN.md 一致——1023px 以下两列、639px 以下单列表单区.field纵向布局输入框静止态1px solid #dddddd、聚焦态蓝色边框 --focus-ring阴影占位符--meta暖灰指标卡用--text-2xl40px700 字重大数字 --muted描述。按钮的交互状态与 DESIGN.md 一致.btn在:active时scale(0.95)DESIGN.md 描述为 0.9以实际 fixture 为准、:focus-visible显示--focus-ring过渡使用--motion-fast与--ease-standard。无障碍与响应式基线DESIGN.md 第 8 节给出了该包的可访问性基线所有交互元素必须有可见聚焦指示2px 聚焦色描边 阴影强化近黑文字在白底上的对比度约 18:1--muted(#615d59) 约 5.5:1WCAG AA蓝色 CTA#0075de约 4.6:1AA 大字文本徽章文字#097fe8在#f2f9ff底上约 4.5:1。响应式方面DESIGN.md 定义了从 400px 到 1440px 的七档断点区块纵向留白从桌面 80px 收窄至移动 48px导航从横排 蓝色 CTA 折叠为汉堡菜单。这些值均已映射进tokens.css的--section-y-*与--container-gutter-*可直接被 Agent 消费。实战建议一次标准的接入流程综合以上契约一个 Agent 或评审者在拿到本包后的推荐流程是按 Read Order 读完 USAGE.md 与 DESIGN.md把 tokens.css 整体复制进 artifact 的style块保持:root变量名与值不变依据 components.manifest.json 的分组按需取用控件类需要精确状态时对照 components.html涉及 Tailwind 项目时直接引入 tailwind-v4.css 获得theme绑定但永远以tokens.css为唯一事实源视觉验收时打开 preview/colors.html、preview/typography.html、preview/spacing.html 三个预览页抽查再对照 system/kit.html 与深色变体 system/kit.dark.html 检查整体观感。需要特别提醒的是本包在写作与评审时都不应引入上游未经验证的素材一切取值以 bundled fixtureDESIGN.md / tokens.css / components.html为准这正是 USAGE.md 中不声称原始上游证据一约束的意义所在。赞分享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 设计系统 2.0 包使用指南Meta (Store) 的阅读顺序、Token 契约与组件清单实战OpenDesign 设计系统 2.0 包使用指南Meta Store 的阅读顺序、Token 契约与组件清单实战 本指南以 OpenDesign 仓库中 dAI 应用人工智能AI 技能设计系统媒体生成OpenDesign 设计系统 2.0 包使用指南以 Luxury 为例的契约、Token 与组件实践OpenDesign 设计系统 2.0 包使用指南以 Luxury 为例的契约、Token 与组件实践 导读 Luxury奢华是 OpenDesign 仓AI 应用人工智能AI 技能设计系统媒体生成OpenDesign GitHub 设计系统包使用指南Design System 2.0 契约解读与实战OpenDesign GitHub 设计系统包使用指南Design System 2.0 契约解读与实战 本篇指南围绕 OpenDesign 仓库中 desiAI 应用人工智能AI 技能设计系统媒体生成上一篇告别配置混乱Nuclei多层级配置系统完全指南下一篇免费 2D 动画软件 OpenToonz从安装到画完第一帧的完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考