企业官网建设流程全解析

OpenDesign 中的 IBM Carbon 设计系统落地指南：从--cds-*令牌到 Agent 提示词的完整还原

【免费下载链接】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

本文档基于 design-systems/ibm/DESIGN-fr.md（即 DESIGN.md 的法语版）展开，结合 tokens.css、components.html 与 components.manifest.json 等仓库内实现，系统讲解如何在 OpenDesign 中复刻 IBM 官方网站所承载的 Carbon Design System 视觉语言。读者读完可掌握 IBM 风格页面的完整规范：精确到十六进制值的色彩角色体系、14 级排版阶梯、零圆角组件语言、8px 间距网格与无阴影的层级表达，并可直接套用文末的 Agent 提示词与迭代检查清单完成实战落地。

1. 视觉主题与整体氛围：企业权威的像素化表达

IBM 官网是建立在Carbon Design System之上的企业权威的数字化体现——一个结构严谨到"读起来像工程规范"的设计语言。整套体系建立在一组鲜明的二元对立之上：

• 明亮白色画布（#ffffff）搭配近乎黑色的文字（#161616）；
• 由唯一的强调色 IBM Blue 60（#0f62fe）点缀所有交互元素；
• 每个元素都存在于 Carbon 严格的2x 网格中，每种颜色都映射到一个语义化 token，每个间距值都对齐8px 基础单位。

这不是科技创业公司俏皮式的最小化，而是"提炼为像素的企业级精确"。

1.1 IBM Plex 字体家族是系统的骨架

• IBM Plex Sans 以 300（Light）字重用于展示级标题，在大字号下营造出出人意料的轻盈感——这是对 IBM 企业庄重感的刻意反差；
• 正文尺寸下，400（Regular）字重 + 14px 字幕上 0.16px 的字距引入精密的微字距（micro-tracking），让 Carbon 文字"看起来是被工程化设计而非被排版设计"；
• IBM Plex Mono服务于代码、数据与技术标签，与极少露面的 IBM Plex Serif 共同构成字体三元组。

1.2--cds-*：组件 token 系统是视觉层的"类型化 API"

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

在仓库中，这套理念被压缩为可直接粘贴的 CSS 变量块（tokens.css），并可通过 preview/colors.html、preview/typography.html、preview/spacing.html 进行可视化核对。

核心特征速览：

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

2. 色彩体系与角色分工

2.1 主色（Primaire）

2.2 中性灰阶（Gray 家族）

2.3 交互色（Interactif）

• Blue 60（#0f62fe）：主要交互——按钮、链接、焦点，对应--cds-link-primary、--cds-button-primary；
• Blue 70（#0043ce）：链接悬停态，对应--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 & Statut）

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

2.5 深色主题（Gray 100 主题）

源码印证：在 tokens.css 的:root块中，这些角色被压缩为一组扁平命名变量——--bg: #ffffff、--surface: #f4f4f4、--surface-warm: #edf5ff（对应 Blue 10）、--fg: #161616、--fg-2: #525252、--muted: #6f6f6f、--meta: #8d8d8d、--border: #c6c6c6、--border-soft: #e0e0e0、--accent: #0f62fe、--success: #24a148、--warn: #f1c21b、--danger: #da1e28。注意仓库将原文档的--cds-*语义映射统一到了更精简的--*命名空间，但角色一一对应，跨品牌切换时只需整体替换变量值即可（详见 USAGE.md 的 "Preserve the schema token names exactly so cross-brand switching stays reliable" 要求）。

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 栈）。

3.2 完整排版阶梯

3.3 排版原则

• 展示字号用轻字重：Carbon 的表达型字体集在 42px+ 使用 300（Light）。这制造了独特的张力——内容以企业权威发声，而字形以排版轻盈低语；
• 小字号微字距：14px 处 0.16px、12px 处 0.32px 的字距，是 Carbon 在紧凑尺寸下保证可读性的秘密武器——恰好撑开 IBM Plex 紧凑的字形；
• 三个功能字重：300（展示/表达）、400（正文/阅读）、600（强调/UI 标签）。700（Bold）被有意排除在生产字号表之外；
• 生产力 vs. 表现力：生产力套件（Productive）使用更紧的行高（1.29）服务密集 UI；表现力套件（Expressive）使用更松弛的行高（1.40–1.50）服务营销与编辑内容。

仓库的 tokens.css 用--text-xs: 12px、--text-sm: 14px、--text-base: 16px、--text-xl: 20px、--text-2xl: 32px、--text-3xl: 42px、--text-4xl: 60px直接落地了这一阶梯；components.manifest.json 的typography组件组确认了h1/h2/h3、.eyebrow、.lead等选择器与--text-4xl、--text-xl、--text-lg、--fg-2的绑定关系。

4. 组件样式规格

4.1 按钮（Boutons）

主按钮（蓝色）

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

次按钮（灰色）

• 背景：#393939（Gray 80），文字#ffffff；
• 悬停：#4c4c4c（Gray 70）；激活：#6f6f6f（Gray 60）；
• 与主按钮相同的 padding 与圆角。

三级按钮（Ghost Blue）

• 背景透明，文字#0f62fe，边框1px solid #0f62fe；
• 悬停：文字变#0353e9+ Blue 10 背景色晕；圆角0px。

Ghost 按钮

• 背景透明，文字#0f62fe，padding14px 16px，无边框；
• 悬停：#e8e8e8背景色晕。

危险按钮

• 背景#da1e28（Red 60），文字#ffffff；悬停#b81921（Red 70）。

从 components.manifest.json 的buttons组件组可见，实际 fixture 中按钮实现为.btn、.btn-primary、.btn-secondary（含:hover与:focus-visible），共引用--accent、--accent-on、--elev-ring、--radius-md、--space-5、--text-sm等 13 个 token——这意味着只要替换 tokens.css 中的变量值，即可在保持按钮结构不变的前提下完成品牌切换。

4.2 卡片与容器

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

4.3 输入框与表单

• 背景：#f4f4f4（Gray 10）→--cds-field；文字#161616；
• Padding：0px 16px（仅水平）；高度 40px（默认）、48px（大）；
• 边框：两侧与顶部无边框，底部2px solid transparent；
• 激活底边框：2px solid #161616（Gray 100）；
• 焦点：底边框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——输入框为尖角。

manifest 中inputs组件组（.field、input、input:focus、label）证实该模式已落地，token 引用为--border、--fg、--radius-sm、--space-2、--space-4、--space-5、--surface。

4.4 导航

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

4.5 链接

• 默认：#0f62fe（Blue 60）无下划线；
• 悬停：#0043ce（Blue 70）加下划线；
• 访问后：保持 Blue 60（无访问状态变化）；
• 正文中的行内链接：默认带下划线。

4.6 特色组件（Composants distinctifs）

内容块（Hero/功能块）

• 全宽白/gray-10 交替背景带；标题左对齐，使用 60px 或 48px 展示型字体；
• CTA 为带箭头图标的蓝色主按钮；图片/插画右对齐，移动端下移。

Tile（可点击卡片）

• 背景#f4f4f4或#ffffff；悬停时全宽底边框或背景切换；
• 悬停时右下角出现箭头图标；无阴影——扁平即身份。

Tag/标签

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

通知横幅

• 全宽横条，通常 Blue 60 或 Gray 100 背景；白色 14px 文字；关闭/忽略图标右对齐。

在组件层，components.html 提供了上述组件的完整参考实现（fixture 元数据见 components.manifest.json：1 个 style 块、48 个选择器、26 个类、19 个元素），需要精确选择器或状态时可打开该文件核对，紧凑清单则直接读 manifest。

5. 布局原则

5.1 间距系统

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

在 tokens.css 中对应--space-1: 4px到--space-12: 48px的完整刻度，以及--section-y-desktop: 96px、--section-y-tablet: 72px、--section-y-phone: 48px的分级章节垂直间距。

5.2 网格与容器

• 16 列网格（Carbon 2x 网格系统）；
• 内容最大宽度：1584px（最大断点）；
• 列间距：32px（移动端 16px）；外边距：16px（移动端）、32px（平板+）；
• 内容通常跨 8–12 列以保证可读行长；全出血（full-bleed）章节与受约束内容交替。

仓库的 tokens.css 将容器收窄为--container-max: 1312px，并定义--container-gutter-desktop: 32px、--container-gutter-tablet: 24px、--container-gutter-phone: 16px三档槽宽——与layout组件组中.container、section的 token 引用一致。

5.3 留白哲学

• 功能性密度：Carbon 偏好生产性密度而非大段留白。相比消费级设计系统，各章节打包更紧凑——这反映了 IBM 的企业 DNA；
• 背景色分区：不用大 padding 分隔章节，而是用交替背景色（白 → gray 10 → 白）以最小垂直空间制造视觉分隔；
• 一致的 48px 节奏：主要章节过渡使用 48px 垂直间距；Hero 章节可使用 80px–96px。

5.4 圆角刻度

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

tokens.css 中--radius-sm: 0px、--radius-md: 0px、--radius-lg: 0px、--radius-pill: 9999px完美复刻了这一"全零 + 唯一胶囊"的刻度。

6. 深度与层级（Profondeur et élévation）

阴影哲学：Carbon 刻意回避阴影。IBM 主要靠背景色分层获得深度——堆叠逐渐变深的灰色表面，而非叠加 box-shadow。这造就了扁平、印刷灵感的审美，层级由颜色明度而非模拟光照传达。阴影仅保留给真正悬浮重叠内容的元素（下拉菜单、工具提示、模态框）。这种克制让罕见的阴影具备显著冲击力——在 Carbon 中，当某物浮起时，它一定重要。

仓库中对应 token：--elev-flat: none、--elev-ring: 0 0 0 1px var(--border)、--elev-raised: 0 2px 6px rgba(0, 0, 0, 0.12)、--focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0f62fe。

7. 做与不做（À faire et à ne pas faire）

应做（Do）

• 展示字号（42px+）使用 IBM Plex Sans 300 字重——轻盈是有意为之；
• 14px 正文加 0.16px 字距、12px 字幕加 0.32px 字距；
• 按钮、输入框、卡片、tile 一律 0px 圆角——矩形就是系统；
• 实现时引用--cds-*token 名（如--cds-button-primary、--cds-text-primary）；
• 用背景色分层（白 → gray 10 → gray 20）而非阴影表达深度；
• 输入框用底边框（而非盒式）作状态指示；
• 保持 48px 默认按钮高度与不对称 padding，为图标留空间；
• 以 Blue 60（#0f62fe）作为唯一强调色——一个蓝色统治一切。

不应做（Don't）

• 不要给按钮加圆角——0px 圆角是 Carbon 的身份；
• 不要在卡片或 tile 上使用阴影——扁平才是要点；
• 不要引入额外强调色——IBM 系统是单色 + 蓝；
• 不要使用 700（Bold）字重——刻度止于 600（Semibold）；
• 不要给展示字号加字距——字距只用于 14px 及以下；
• 不要用完整边框包裹输入框——Carbon 输入框只用底边框；
• 不要使用渐变背景——IBM 的表面是扁平纯色；
• 不要偏离 8px 间距网格——每个值都应能被 8 整除（2px 与 4px 仅用于微调）。

仓库层面，USAGE.md 进一步补充了包级约束：保留 schema token 名以保证跨品牌切换可靠；用--accent承载主操作、链接、焦点态；优先复用 components.manifest.json 中的组件组而非新造控件；避免在复制的:roottoken 块之外使用裸十六进制值；避免绕过tokens.css独立重定义 Tailwind 或 design-token 值。

8. 响应式行为（Comportement responsive）

8.1 断点

8.2 触控目标

• 按钮高度：48px 默认，最小 40px（紧凑）；
• 导航链接：48px 行高便于触控；
• 输入框高度：40px 默认、48px 大号；
• 图标按钮：48px 方形触控目标；
• 移动端菜单项：全宽 48px 行。

8.3 折叠策略

• Hero：60px 展示 → 42px → 32px 标题，随视口收窄逐级下降；
• 导航：全宽横向 masthead → 汉堡 + 滑出面板；
• 网格：4 列 → 2 列 → 单列；
• Tile/卡片：横向网格 → 垂直堆叠；
• 图片：保持宽高比，max-width: 100%；
• 页脚：多列链接组 → 单列堆叠；
• 章节 padding：48px → 32px → 16px。

8.4 图片行为

• 响应式图片max-width: 100%；产品插画等比缩放；
• Hero 图片可从并排变为下方堆叠；
• 数据可视化保持宽高比，移动端横向滚动。

9. Agent 提示词指南（Guide de prompts pour agents）

9.1 快速颜色速查

• 主 CTA：IBM Blue 60（#0f62fe）；背景：白（#ffffff）；
• 标题文字：Gray 100（#161616）；正文：Gray 100（#161616）；
• 次要文字：Gray 70（#525252）；表面/卡片：Gray 10（#f4f4f4）；
• 边框：Gray 30（#c6c6c6）；链接：Blue 60（#0f62fe）；
• 链接悬停：Blue 70（#0043ce）；焦点环：Blue 60（#0f62fe）；
• 错误：Red 60（#da1e28）；成功：Green 50（#24a148）。

9.2 组件提示词示例（可直接喂给编码 Agent）

• Hero 区："在白底上创建一个 hero 区。标题 60px IBM Plex Sans 300 字重、行高 1.17、颜色 #161616。副标题 16px 400 字重、行高 1.50、颜色 #525252、最大宽度 640px。蓝色 CTA 按钮（背景 #0f62fe、文字 #ffffff、0px 圆角、48px 高、padding 14px 63px 14px 15px）。"
• 卡片 tile："设计一张卡片 tile：#f4f4f4 背景、0px 圆角、16px padding。标题 20px IBM Plex Sans 600 字重、行高 1.40、颜色 #161616。正文 14px 400 字重、字距 0.16px、行高 1.29、颜色 #525252。悬停：背景变为 #e8e8e8。"
• 表单字段："构建表单字段：#f4f4f4 背景、0px 圆角、40px 高、16px 水平 padding。上方标签 12px 400 字重、字距 0.32px、颜色 #525252。底边框：默认 2px solid transparent，聚焦 2px solid #0f62fe。占位符：#6f6f6f。"
• 深色导航栏："创建深色导航栏：#161616 背景、48px 高。IBM Logo 白色左对齐。链接 14px IBM Plex Sans 400 字重、颜色 #c6c6c6。悬停：#ffffff 文字。激活：#ffffff + 2px 底边框。"
• Tag 组件："构建 tag 组件：Blue 10（#edf5ff）背景、Blue 60（#0f62fe）文字、padding 4px 8px、24px 圆角、12px IBM Plex Sans 400 字重。"

9.3 迭代检查清单

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

10. 在 OpenDesign 中的落地路径

这套 IBM 规范在仓库中并非孤立文档，而是完整的 Design System 2.0 包（manifest.json 定义了包的 schema、来源与文件清单），推荐按以下顺序使用：

1. 先读 USAGE.md 理解包契约；
2. 读 DESIGN.md（或法语版 DESIGN-fr.md）理解视觉意图、约束与反模式；
3. 将 tokens.css 粘贴到首个产物的<style>块中，再编写组件 CSS——所有颜色、间距、字体、圆角、阴影都以:root变量形式就位；
4. 用 components.manifest.json 做紧凑组件清单，需要精确选择器或状态时打开 components.html；
5. 需要可视化校对时，检查 preview/colors.html、preview/typography.html 与 preview/spacing.html 三个预览页；
6. 若使用 Tailwind v4，可引入由 tokens.css 派生的 tailwind-v4.css——它通过@theme将每个 token 映射为 Tailwind 主题变量（如--color-accent、--font-sans、--spacing-4），且注释明确要求"以 tokens.css 为准"（source of truth），派生产物（含 design-tokens.json）应通过报告与样式表重新生成，而非手工修改（见 source/evidence.md 与 source/token-contract.report.json 的 token 契约映射）。

一句话总结这套体系：白底、深灰文字、唯一蓝强调、Plex 三字体、8px 网格、0px 圆角、无阴影的扁平企业美学——从 tokens.css 的变量到 Agent 提示词，Carbon 的语言已被完整编码进 OpenDesign 的 IBM 设计系统包中，任何编码 Agent 都可以按此规范产出像素级一致的 IBM 风格界面。

【免费下载链接】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