企业官网建设流程全解析

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成

本文面向 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 可以看到包内文件的分工：

• design：DESIGN.md—— 视觉意图、约束与反模式；
• tokens：tokens.css—— 结构化 Token 绑定；
• designTokens：design-tokens.json—— 派生出的 Token 契约报告；
• tailwind：tailwind-v4.css—— Tailwind v4 集成层；
• components：components.html—— 参考组件实现；
• componentsManifest：components.manifest.json—— 组件清单；
• preview：preview/colors.html、preview/typography.html、preview/spacing.html三个预览页；
• sourceFiles：source/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 Order）

USAGE.md 给出了五个步骤的接入顺序，这是 Agent 消费该包的第一条契约：

1. 先读 USAGE.md—— 理解包的整体契约（即本文所在文件）；
2. 再读 DESIGN.md—— 获取视觉意图、约束与反模式，见 DESIGN.md；
3. 把tokens.css粘贴到第一个 artifact 的<style>块中，再开始写组件 CSS —— 即:root中的全部变量必须作为一切样式的地基；
4. 用components.manifest.json作为紧凑的组件清单；当需要精确的选择器或状态（如:hover、:focus-visible）时，打开components.html查看完整实现；
5. 需要视觉抽查时，检查preview/页面—— 颜色、排版、间距三类预览各司其职。

这套顺序的本质是：契约 → 意图 → Token → 组件清单 → 视觉验证，层层递进，避免 Agent 在缺少 Token 或设计意图的情况下凭空创作。

设计亮点：四个可被复现的 Notion 风格特征

USAGE.md 提炼了四个标志性特征，它们在 DESIGN.md 中有完整展开，并在 tokens.css 中被固化为变量：

1. 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)并开启 OpenType"lnum","locl"，h2为-0.031em、h3为-0.024em且行高覆盖为 1.23，正是"大字号压缩、小字号可读"原则的落地。

2. 暖中性色板：灰色带黄棕色调，而非蓝灰。核心色阶在 tokens.css 中绑定为--surface: #f6f5f4（暖白）、--fg-2: #31302e（暖黑）、--muted: #615d59（暖灰 500）、--meta: #a39e98（暖灰 300）。DESIGN.md 特别强调：Notion 的灰永远不是蓝灰。

3. 近黑文字：正文与标题使用rgba(0,0,0,0.95)而非纯黑，即 Token--fg，带来不易察觉的微暖质感。

4. 极细边框：全程1px solid rgba(0,0,0,0.1)，即--border，DESIGN.md 称之为 "whisper-weight division"（耳语级分隔）；另有更淡的--border-soft: rgba(0,0,0,0.06)用于行分隔。阴影同样克制：--elev-raised是四层阴影栈，单层透明度最高 0.04，追求"感觉到而非看到"的深度。

唯一的饱和色：Notion Blue

DESIGN.md 反复强调 Notion Blue（#0075de，Token--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：接入时必须遵守的正面清单

1. 原样保留 schema token 名称：--bg、--surface、--fg、--accent等名称是跨品牌切换的稳定契约，不可改名。这一点由 source/token-contract.report.json 与 design-tokens.json 双向印证——后者的contract字段为TOKEN_SCHEMA，56 个 token 全部sourceBacked，评分 100、评级excellent，且undeclaredReferenced为空，说明没有任何组件引用未声明的变量。

2. 用--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悬停下划线。

3. 优先复用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 个元素。

4. 把source/文件当作 bundled fixture 回填的审计证据：evidence.md、token-contract.report.json、tokens.source.json共同说明每个 Token 的声明出处（如--bg的来源标注为tokens.css:31，reason 为 "Bundled tokens.css declares --bg; no upstream recrawl was performed"）。

Avoid：必须规避的反模式

1. 不要在复制的:rootToken 块之外使用裸 hex 值。components.manifest.json的literals统计显示 fixture 中颜色表达式 7 处、像素值 20 处、硬编码字体族 4 处——这些都是允许的少量例外，但 Agent 写组件时应一律通过var(--*)取色。

2. 不要独立于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再重新派生。

3. 不要声称拥有原始上游来源证据：该包基于 curated bundled fixture，而非对 Notion 官网的实时抓取，证据边界以 source/evidence.md 为准。

4. 不要添加components.html或DESIGN.md中未覆盖的新组件配方：新控件必须先有设计意图背书，再落进参考实现。

Token 体系与派生产物：从 tokens.css 到 Tailwind v4

tokens.css的:root块按语义分层组织，这是理解整包的核心地图：

• Surface / Foreground：--bg（纯白）、--surface（暖白，用于区块交替）、--surface-warm（别名）、--fg（近黑）、--fg-2（暖黑标题）、--muted（暖灰 500）、--meta（暖灰 300）；
• Border / Accent / Semantic：--border、--border-soft、--accent系列、--success/--warn/--danger；
• Typography：字号--text-xs(12px) 到--text-4xl(64px) 共 8 档、--leading-body(1.5)、--leading-tight(1.00)、--tracking-display(-0.033em)、字体族--font-display/--font-body/--font-mono；
• Spacing：--space-1(4px) 到--space-12(48px)，以及区块纵向节奏--section-y-desktop/tablet/phone（80/48/32px）；
• Radius / 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) 与三档 gutter（24/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 区：h1（64px、-0.033em、"lnum","locl"）+.eyebrow（12px、大写、0.08em正字距）+.lead（20px、600 字重、--muted色）+.btn-primary（Notion Blue）+.btn-secondary（rgba(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-2xl（40px）700 字重大数字 +--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:1（WCAG AA），蓝色 CTA#0075de约 4.6:1（AA 大字文本），徽章文字#097fe8在#f2f9ff底上约 4.5:1。响应式方面，DESIGN.md 定义了从 <400px 到 >1440px 的七档断点，区块纵向留白从桌面 80px 收窄至移动 48px，导航从横排 + 蓝色 CTA 折叠为汉堡菜单。这些值均已映射进tokens.css的--section-y-*与--container-gutter-*，可直接被 Agent 消费。

实战建议：一次标准的接入流程

综合以上契约，一个 Agent 或评审者在拿到本包后的推荐流程是：

1. 按 Read Order 读完 USAGE.md 与 DESIGN.md；
2. 把 tokens.css 整体复制进 artifact 的<style>块（保持:root变量名与值不变）；
3. 依据 components.manifest.json 的分组按需取用控件类，需要精确状态时对照 components.html；
4. 涉及 Tailwind 项目时，直接引入 tailwind-v4.css 获得@theme绑定，但永远以tokens.css为唯一事实源；
5. 视觉验收时打开 preview/colors.html、preview/typography.html、preview/spacing.html 三个预览页抽查，再对照 system/kit.html 与深色变体 system/kit.dark.html 检查整体观感。

需要特别提醒的是：本包在写作与评审时都不应引入上游未经验证的素材，一切取值以 bundled fixture（DESIGN.md / tokens.css / components.html）为准，这正是 USAGE.md 中"不声称原始上游证据"一约束的意义所在。

• AI 应用
• 人工智能
• AI 技能
• 设计系统
• 媒体生成