企业官网建设流程全解析

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

本文以 design-systems/ibm/DESIGN-pl.md（IBM 风格设计系统规范）为核心骨架，结合仓库中 tokens.css、components.html、components.manifest.json 等落地文件展开。读者读完将掌握：IBM Carbon 设计语言的完整视觉规范（色彩、排版、组件、布局、层级、响应式），这套规范在 Open Design 设计系统包中的工程化形态（语义令牌、组件清单、Tailwind 映射），以及如何将这些规范直接改写成可供代码生成 Agent 执行的高精度提示词。

导读

在 Open Design 仓库中，每个design-systems/<slug>/子目录都是一个可移植的设计系统包，design-systems/ibm/即是以 IBM Carbon 设计系统为蓝本的规范化封装：白色 Carbon 表面、方正几何、IBM Plex 字体族，以及单一工程化蓝色信号（IBM Blue 60#0f62fe）。本指南基于该包的设计规范文档，逐层拆解其视觉语言、令牌系统与组件规则，并结合仓库中的tokens.css与组件 fixture 展示这些规范如何被编译为机器可读的语义令牌、如何映射到 Tailwind v4 主题，以及如何沉淀为可直接投喂给 Agent 的组件级提示词。读完本文，你可以直接照抄参数在任意前端项目中复现 IBM 风格界面，也可以理解 Open Design 设计系统包的内部结构与消费方式。

1. 视觉主题与氛围：工程规范化的企业权威

IBM 官网是建立在 Carbon 设计系统之上的企业权威的数字化身——一套结构化程度极高、读起来像"渲染成网页的工程规范"的设计语言。页面运行在鲜明的二元结构之上：亮白（#ffffff）画布搭配近黑（#161616）文本，由唯一不变的强调色——IBM Blue 60（#0f62fe）——进行点缀。这不是嬉皮的科技创业极简主义，而是浓缩到像素级的企业级精确：每个元素都存在于 Carbon 严格的 2x 网格内，每个颜色都映射到一个语义令牌，每个间距值都吸附在 8px 基础单元上。

IBM Plex 字体族是这套系统的骨架。IBM Plex Sans 以 300（Light）字重用于展示级标题，在大字号下营造出意料之外的轻盈质感——这是对 IBM 企业重量感的有意反衬。正文级别使用 400（Regular）字重，14px 标题文字上施加 0.16px 字间距，引入那种让 Carbon 文本"像被工程化而非被设计出来"的精密微追踪。IBM Plex Mono 服务于代码、数据与技术标签，与极少露面的 IBM Plex Serif 共同构成字体三件套。

定义 IBM 视觉身份（超越"单色+蓝色"）的核心，是对 Carbon 组件令牌系统的依赖：每一个交互状态都映射到以--cds-前缀（Carbon Design System）命名的 CSS 自定义属性。按钮没有硬编码颜色，而是引用--cds-button-primary、--cds-button-primary-hover、--cds-button-primary-active。这种令牌化架构意味着整个视觉层只是覆盖在深度系统化地基之上的一层薄壳——设计层面等价于一个类型良好的 API。

关键特征速览：

• IBM Plex Sans 300（Light）字重用于展示——通过排版克制传达企业分量
• IBM Plex Mono 用于代码与技术内容，小字号下保持 0.16px 字间距
• 单一强调色：IBM Blue 60（#0f62fe）——每个交互元素、每个 CTA、每个链接
• Carbon 令牌系统（--cds-*）驱动所有语义颜色，支持在变量层面完成主题切换
• 8px 间距网格严格执行——无任意值，一切对齐
• 基于#f4f4f4（Gray 10）表面的无边框扁平卡片——深度来自背景色分层而非阴影
• 下边框式输入框（非盒状）——Carbon 表单的标志性模式
• 主按钮 0px 圆角——毫不妥协的矩形，不做柔化

1.1 仓库中的令牌化落地

规范中的--cds-*语义在仓库包中具体化为 tokens.css 的:root令牌块。该文件顶部注释精确概括了包的视觉目标："white Carbon surfaces, square geometry, IBM Plex typography, and a single engineered blue signal"（白色 Carbon 表面、方正几何、IBM Plex 排版、单一工程化蓝色信号）。令牌采用语义命名而非品牌命名，例如：

--bg: #ffffff; /* 页面背景 */ --surface: #f4f4f4; /* 卡片/次级表面（对应 Carbon Gray 10）*/ --fg: #161616; /* 主文本（对应 Gray 100）*/ --accent: #0f62fe; /* 交互强调（Blue 60）*/ --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%); --radius-sm/md/lg: 0px; /* 圆角全部归零，仅 radius-pill 为 9999px */ --elev-flat: none; /* 扁平无阴影 */ --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0f62fe; /* 双层焦点环 */

值得注意的两点实现细节：其一，hover/active 状态没有硬编码色值，而是用 CSS 原生color-mix(in oklab, ...)从--accent推导而来，保证主题切换时状态色自动联动；其二，圆角令牌--radius-sm/md/lg统一为0px，只有--radius-pill: 9999px保留胶囊形状——与规范"矩形是系统"的立场完全一致。令牌清单及其被引用情况可核对 components.manifest.json 的tokens.declared（58 个声明令牌）与tokens.referenced字段。

2. 调色板与角色

2.1 基础色（Primary）

• IBM Blue 60（#0f62fe）：唯一的交互色。主按钮、链接、焦点状态、活动指示器。这是核心 UI 调色板中唯一的彩色。
• 白色（#ffffff）：页面背景、卡片表面、蓝底按钮上的文字，对应--cds-background。
• Gray 100（#161616）：主文本、标题、深色表面背景、导航栏、页脚，对应--cds-text-primary。

2.2 中性色阶（灰色家族）

2.3 交互色（Interactive）

• Blue 60（#0f62fe）：主要交互——按钮、链接、焦点，对应--cds-link-primary、--cds-button-primary。
• Blue 70（#0043ce）：链接 hover 态，对应--cds-link-primary-hover。
• Blue 80（#002d9c）：蓝色元素的激活/按下态。
• Blue 10（#edf5ff）：蓝色调表面、选中行背景。
• Focus Blue（#0f62fe）：--cds-focus——聚焦元素上 2px 内边框。
• Focus Inset（#ffffff）：--cds-focus-inset——深色背景上焦点用白色内环。

2.4 支持与状态色（Support & Status）

• Red 60（#da1e28）：错误、危险，对应--cds-support-error。
• Green 50（#24a148）：成功，对应--cds-support-success。
• Yellow 30（#f1c21b）：警告，对应--cds-support-warning。
• Blue 60（#0f62fe）：信息，对应--cds-support-info。

这组状态色在 tokens.css 中以--danger: #da1e28、--success: #24a148、--warn: #f1c21b呈现，并在 components.html 的.status::before指示点（background: var(--success)）中得到实际使用。

2.5 深色主题（Gray 100 主题）

3. 排版规则

3.1 字体族

• 主字体：IBM Plex Sans，回退字体：Helvetica Neue, Arial, sans-serif
• 等宽：IBM Plex Mono，回退字体：Menlo, Courier, monospace
• 衬线（限量使用）：IBM Plex Serif，用于编辑/表达性场景
• 图标字体：ibm_icons——20px 的专有图标字形

仓库对应定义在 tokens.css 的--font-display、--font-body（均为 IBM Plex Sans 栈）与--font-mono（IBM Plex Mono +SF Mono回退）。

3.2 层级字阶表（完整参数）

字阶在仓库中通过--text-xs（12px）到--text-4xl（60px）的字号令牌、--leading-tight: 1.17与--leading-body: 1.5的行高令牌、--tracking-display: 0的展示字间距令牌实现；在 components.html 中，h1使用var(--text-4xl)+var(--leading-tight)，.eyebrow使用 12px 等宽 + 0.12em 大写间距。

3.3 三条核心原则

• 展示尺寸用轻字重：Carbon 表达性字阶在 42px+ 使用 300（Light）字重，形成独特张力——内容以企业权威发声，字形却以排版轻盈低语。
• 小尺寸微追踪：14px 处 0.16px、12px 处 0.32px 字间距。这些看似无关紧要的值是 Carbon 在紧凑尺寸下保持可读性的秘密武器——恰好打开 IBM Plex 紧密字形的间距。
• 三个功能字重：300（展示/表达）、400（正文/阅读）、600（强调/UI 标签）。700（Bold）在生产字阶中有意缺席。
• 生产型 vs. 表达型：生产型字阶用更紧的行高（1.29）承载高密度 UI；表达型字阶更舒展（1.40–1.50），服务营销与编辑内容。

4. 组件样式

4.1 按钮（五态完整参数）

主按钮（蓝色）

• 背景：#0f62fe（Blue 60）→--cds-button-primary
• 文字：#ffffff（White）
• 内边距：14px 63px 14px 15px（不对称——为尾部图标预留空间）
• 边框：1px solid transparent
• 圆角：0px（锐利矩形——Carbon 签名）
• 高度：48px（默认）、40px（紧凑）、64px（表达型）
• Hover：#0353e9（Blue 60 Hover）→--cds-button-primary-hover
• Active：#002d9c（Blue 80）→--cds-button-primary-active
• Focus：2px solid #0f62fe内边框 +1px solid #ffffff内环

次按钮（灰色）：背景#393939（Gray 80）、文字#ffffff、Hover#4c4c4c（Gray 70）、Active#6f6f6f（Gray 60），内边距与圆角同主按钮。

三级按钮（Ghost 蓝）：透明背景、文字#0f62fe、边框1px solid #0f62fe、Hover 时文字变#0353e9并叠加 Blue 10 背景调、圆角0px。

Ghost 按钮：透明背景、文字#0f62fe、内边距14px 16px、无边框、Hover 叠加#e8e8e8背景调。

危险按钮：背景#da1e28（Red 60）、文字#ffffff、Hover#b81921（Red 70）。

仓库参考实现见 components.html：.btn-primary使用background: var(--accent)/color: var(--accent-on)，hover 时background: var(--accent-hover)并轻微上移translateY(-1px)；焦点使用--focus-ring双层环（外圈蓝、内圈白）；.btn-secondary通过--elev-ring描边 + hover 时边框与文字切换到--accent。

4.2 卡片与容器

• 背景：浅色主题#ffffff，抬升卡片#f4f4f4（Gray 10）
• 边框：无（扁平设计——多数卡片无边框无阴影）
• 圆角：0px（与按钮矩形美学一致）
• Hover：可点击卡片背景切换为#e8e8e8（Gray 10 Hover）
• 内容内边距：16px
• 分隔：背景色分层（白 → Gray 10 → 白）而非阴影

4.3 表单输入框

• 背景：#f4f4f4（Gray 10）→--cds-field
• 文字：#161616（Gray 100）
• 内边距：0px 16px（仅水平）
• 高度：40px（默认）、48px（大号）
• 边框：两侧与顶部无边框——底部2px solid transparent
• 激活下边框：2px solid #161616（Gray 100）
• Focus：底部2px solid #0f62fe（Blue 60）→--cds-focus
• 错误：底部2px solid #da1e28（Red 60）
• 标签：12px IBM Plex Sans、0.32px 字间距、Gray 70
• 辅助文本：12px、Gray 60
• 占位符：Gray 60（#6f6f6f）
• 圆角：顶部 0px——输入框锐角

注意：仓库 fixture components.html 中的输入框在保持令牌语义的同时做了可访问性适配——min-height: 46px、box-shadow: var(--focus-ring)+border-color: var(--accent)的焦点态。这是"规范参数"与"可运行实现"之间的合理弹性，规范值（40/48px、下边框式）仍是 Agent 生成时的基准。

4.4 导航

• 背景：#161616（Gray 100）——通栏深色 masthead
• 高度：48px
• Logo：IBM 八条杠 logo，深底白字，左对齐
• 链接：14px IBM Plex Sans、字重 400、默认#c6c6c6（Gray 30）
• 链接 Hover：文字#ffffff
• 激活链接：#ffffff配下边框指示器
• 平台切换器：左对齐水平标签页
• 搜索：图标触发的滑出式搜索框
• 移动端：汉堡菜单 + 左侧滑出面板

4.5 链接

• 默认：#0f62fe（Blue 60）无下划线
• Hover：#0043ce（Blue 70）加下划线
• 已访问：保持 Blue 60（无访问态变化）
• 行内链接：正文段落中默认带下划线

4.6 特色组件

内容块（Hero/特性区）

• 通栏白/Gray 10 交替背景带
• 左对齐标题，60px 或 48px 展示字体
• CTA 为带箭头图标的蓝色主按钮
• 插图/图片右对齐，移动端置于下方

Tile（可点击卡片）

• 背景：#f4f4f4或#ffffff
• 通栏下边框或 hover 背景切换
• hover 时右下角出现箭头图标
• 无阴影——扁平即是身份

Tag / 标签

• 背景：上下文色 10% 透明度（如 Blue 10、Red 10）
• 文字：对应 60 色阶
• 内边距：4px 8px
• 圆角：24px（胶囊——0px 规则的唯一例外）
• 字体：12px 字重 400

通知横幅

• 通栏条，通常 Blue 60 或 Gray 100 背景
• 白色 14px 文字
• 右侧关闭/忽略图标

5. 布局原则

5.1 间距系统

• 基础单元：8px（Carbon 2x 网格）
• 组件间距刻度：2px、4px、8px、12px、16px、24px、32px、40px、48px
• 布局间距刻度：16px、24px、32px、48px、64px、80px、96px、160px
• 迷你单元：8px（最小可用间距）
• 组件内边距：通常 16px
• 卡片/磁贴间距：1px（发丝线）或 16px（标准）

仓库在 tokens.css 中实现为--space-1（4px）至--space-12（48px）的间距令牌，以及--section-y-desktop: 96px/--section-y-tablet: 72px/--section-y-phone: 48px的分段纵向间距令牌（在 components.html 中随断点切换）。

5.2 网格与容器

• 16 列网格（Carbon 2x 网格系统）
• 最大内容宽度：1584px（最大断点）
• 列槽宽：32px（移动端 16px）
• 边距：16px（移动端）、32px（平板+）
• 内容通常占 8–12 列以保证可读行长
• 通栏区块与受限内容交替

仓库容器令牌为--container-max: 1312px（内容宽度）、--container-gutter-desktop/tablet/phone: 32/24/16px，通过.container { max-width: var(--container-max); margin-inline: auto; }在 components.html 中落地。

5.3 留白哲学

• 功能性密度：Carbon 偏好生产型密度而非铺张留白，区块相比消费级设计系统更紧凑——这反映 IBM 的企业 DNA。
• 背景色分区：不用巨大间距，IBM 用交替背景色（白 → Gray 10 → 白）以最小纵向空间制造视觉分隔。
• 固定 48px 节奏：主要区块过渡用 48px 纵向间距；Hero 区块可用 80px–96px。

5.4 圆角刻度

• 0px：主按钮、输入框、磁贴、卡片——主导处理。Carbon 从根本上是矩形的。
• 2px：偶尔用于小型交互元素（标签）
• 24px：标签/胶囊（唯一圆角例外）
• 50%：头像圆形、图标容器

6. 深度与层级

阴影哲学：Carbon 有意规避阴影。IBM 主要通过背景色分层实现深度——堆叠逐级变深的灰色表面而非添加 box-shadow。这造就了扁平、印刷灵感的审美：层级靠颜色明度传达，而非模拟光照。阴影仅保留给真正悬浮叠于内容之上的元素（下拉、提示框、模态）。这种克制让罕见的阴影产生有意义的冲击——在 Carbon 中，当某物"浮起"，它一定重要。

对应实现：--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)（描边式层级）、--elev-raised: 0 2px 6px rgba(0,0,0,0.12)、--focus-ring（双层焦点环）。--elev-raised在 components.html 中仅用于.panel（浮动面板），与"阴影只给浮动元素"的规范严格对应。

7. 该做与不该做（Do's and Don'ts）

该做

• 展示尺寸（42px+）使用 IBM Plex Sans 300 字重——轻盈是有意为之
• 14px 正文用 0.16px 字间距、12px 说明用 0.32px 字间距
• 按钮、输入框、卡片、磁贴使用 0px 圆角——矩形就是系统
• 实现时引用--cds-*令牌名（如--cds-button-primary、--cds-text-primary）
• 用背景色分层（白 → Gray 10 → Gray 20）制造深度而非阴影
• 表单指示用下边框（而非盒状边框）
• 保持 48px 默认按钮高度与为图标预留的不对称内边距
• 以 Blue 60（#0f62fe）作为唯一强调色——一个蓝统治一切

不该做

• 不要圆化按钮圆角——0px 圆角是 Carbon 的身份
• 不要在卡片或磁贴上用阴影——扁平是核心
• 不要引入额外强调色——IBM 系统是单色+蓝
• 不要用 700（Bold）字重——字阶止于 600（Semibold）
• 不要给展示级文字加字间距——追踪只用于 14px 及以下
• 不要给输入框加全边框——Carbon 输入框只用下边框
• 不要用渐变背景——IBM 表面是扁平纯色
• 不要偏离 8px 间距网格——每个值应能被 8 整除（2px 与 4px 仅用于微调）

8. 响应式行为

8.1 断点表

仓库中 components.html 采用三档媒体查询呼应此表：max-width: 1023px切换平板槽宽（24px）与段落纵向间距（72px），max-width: 639px切换手机槽宽（16px）与 48px 段落间距，max-width: 860px时将 hero、lower、metric-grid、card-row 折叠为单列。

8.2 触控目标

• 按钮高度：48px 默认，最低 40px（紧凑型）
• 导航链接：48px 行高利于触控
• 输入框高度：40px 默认，48px 大号
• 图标按钮：48px 方形触控区域
• 移动端菜单项：通栏 48px 行

8.3 折叠策略

• Hero：随视口变窄 60px 展示 → 42px → 32px 标题
• 导航：完整水平 masthead → 汉堡菜单 + 滑出面板
• 网格：4 列 → 2 列 → 单列
• 磁贴/卡片：水平网格 → 垂直堆叠
• 图片：保持宽高比，max-width: 100%
• 页脚：多列链接组 → 单列堆叠
• 区块内边距：48px → 32px → 16px

8.4 图片行为

• 响应式图片max-width: 100%
• 产品插图按比例缩放
• Hero 图片可从并排切换为下方堆叠
• 数据可视化保持宽高比，移动端允许水平滚动

9. Agent 提示词指南（可直接复用）

9.1 快速颜色参考

9.2 示例组件提示词

以下五条提示词均来自规范原文，可直接投喂给代码生成 Agent：

• "在白色背景上创建一个 hero 区块。标题 60px IBM Plex Sans 字重 300、line-height 1.17、颜色 #161616。副标题 16px 字重 400、line-height 1.50、颜色 #525252、max-width 640px。蓝色 CTA 按钮（#0f62fe 背景、#ffffff 文字、0px 圆角、48px 高度、14px 63px 14px 15px 内边距）。"
• "设计一个卡片磁贴：#f4f4f4 背景、0px 圆角、16px 内边距。标题 20px IBM Plex Sans 字重 600、line-height 1.40、颜色 #161616。正文 14px 字重 400、字间距 0.16px、line-height 1.29、颜色 #525252。Hover：背景切换为 #e8e8e8。"
• "构建一个表单字段：#f4f4f4 背景、0px 圆角、40px 高度、16px 水平内边距。上方标签 12px 字重 400、字间距 0.32px、颜色 #525252。下边框：默认 2px solid transparent、focus 时 2px solid #0f62fe。占位符：#6f6f6f。"
• "创建一个深色导航栏：#161616 背景、48px 高度。IBM logo 白色左对齐。链接 14px IBM Plex Sans 字重 400、颜色 #c6c6c6。Hover：#ffffff 文字。激活：#ffffff 配 2px 下边框。"
• "构建一个标签组件：Blue 10（#edf5ff）背景、Blue 60（#0f62fe）文字、4px 8px 内边距、24px 圆角、12px IBM Plex Sans 字重 400。"

9.3 迭代指南（Carbon 八条铁律）

1. 按钮、输入框、卡片一律 0px 圆角——这在 Carbon 中不可妥协
2. 字间距只用于小字号：14px 处 0.16px、12px 处 0.32px——绝不用在展示文字上
3. 三个字重：300（展示）、400（正文）、600（强调）——无粗体
4. Blue 60 是唯一强调色——不要引入次级强调色相
5. 深度来自背景色分层（白 → #f4f4f4 → #e0e0e0）而非阴影
6. 输入框只有下边框，绝不整体盒装
7. 令牌命名使用--cds-前缀以保持 Carbon 兼容
8. 48px 是交互元素的通用高度

10. 仓库中的包结构与消费方式

该设计系统在 Open Design 中以"便携式设计系统包"的形式存在。依据 design-systems/README.md，每个包的最小机器可读形态为manifest.json+DESIGN.md+tokens.css，而design-systems/ibm/属于包含全部富文件的完整包：

design-systems/ibm/ ├── manifest.json # 包元数据（id、category、文件路径声明） ├── DESIGN.md # Agent 规范正文（本文的英文母版） ├── DESIGN-*.md # 各语言翻译（含本文主题 DESIGN-pl.md） ├── USAGE.md # Agent 阅读顺序与使用约定 ├── tokens.css # 语义令牌规范样式表（唯一真源） ├── design-tokens.json # 派生的 Design Tokens JSON ├── tailwind-v4.css # 派生的 Tailwind v4 主题映射 ├── components.html # 独立组件参考 fixture ├── components.manifest.json # 派生的组件/令牌索引 ├── preview/ # 颜色/排版/间距预览页 ├── source/ # 导入证据与令牌契约报告 └── system/ # 系统级渲染页面

几点关键的消费约定（见 USAGE.md 与 manifest.json）：

• 阅读顺序：先读USAGE.md理解包契约 → 读DESIGN.md理解视觉意图与反模式 → 将tokens.css粘贴进首个 artifact 的<style>块再写组件 CSS → 需要精确选择器或状态时查components.html→ 需要视觉检查时看preview/页。
• 真源原则：tokens.css是唯一真源；design-tokens.json与tailwind-v4.css是派生产物，应基于 source/token-contract.report.json 与令牌样式表重新生成，而非手工编辑（见 source/evidence.md）。
• 令牌命名必须保留：--accent用于主操作、链接、焦点状态与唯一视觉焦点；避免在复制的:root令牌块之外使用裸十六进制色值；避免脱离tokens.css独立重定义 Tailwind 或设计令牌值。
• 证据边界：该包基于 OpenDesign 精选捆绑 fixture（curated bundled fixture）派生，不声称对上游品牌仓库或网站做过全新爬取——这是包自身声明的事实边界（manifest.json的source.type: "bundled"）。

从 components.manifest.json 的统计可见包内实现的规模：48 个选择器、26 个类、19 个元素、58 个声明令牌；组件分组覆盖按钮与 CTA、表单字段、卡片与面板、徽章/状态标签、链接、排版工具类与布局原语，其中键盘提示（keyboard）与图标槽（icons）两组标记为present: false，说明该 fixture 未包含这两类组件。令牌健康度检查显示unusedDeclared仅 7 项（如--danger、--warn、--elev-flat），且undeclaredReferenced为空——意味着样式表中不存在未声明即引用的"幽灵令牌"，令牌契约完整自洽。

若要在自己的项目中使用这套规范，推荐路径是：把 tokens.css 的:root块作为基础令牌，按需叠加 tailwind-v4.css 的@theme映射（它将每个--color-*、--font-*、--text-*、--spacing-*、--radius-*、--shadow-*令牌桥接到 Tailwind 工具类），再以 components.html 为组件基准、以本文第 9 节的提示词为生成指令驱动 Agent 产出页面。规范中的灰色阶、蓝色阶与状态色均可对照第 2 节表格逐值核对，确保生成结果与 Carbon 语义完全对齐。

结语

IBM Carbon 设计系统在 design-systems/ibm/DESIGN-pl.md 中呈现为一套可逐项执行的工程化规范：单色+蓝的严格色彩约束、300/400/600 三字重的排版纪律、0px 圆角的矩形身份、背景色分层而非阴影的深度哲学，以及 48px 的统一交互高度。而 tokens.css 与 components.html 则证明这套规范可以被编译为自洽、可审计、可跨品牌切换的语义令牌系统——这正是 Open Design 设计系统包的核心价值：把"品牌审美"转化为"可验证的工程契约"。

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