@baimingtao/lbs-agent 1.0.0

package/extensions/skills/builtin/creative/popular-web-designs/templates/hashicorp.md

@@ -0,0 +1,291 @@
+# Design System: HashiCorp
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原始站点使用专有字体。对于独立的 HTML 输出，请使用以下 CDN 替代字体：
+> - **主字体:** `Inter` | **等宽字体:** `JetBrains Mono`
+> - **字体栈:** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **等宽字体栈:** `font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，并通过 `generative-widgets` 技能（cloudflared 隧道）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+HashiCorp 的网站让企业级基础设施变得可触可感——这是一个必须传达云基础设施管理复杂性的设计系统，同时保持平易近人。视觉语言分为两种模式：用于信息部分的干净明亮的浅色模式，以及用于英雄区域和产品展示的具有戏剧性效果的深色模式（`#15181e`、`#0d0e12`），创造出一种呼应“在光明中构建，在黑暗中部署”开发者工作流的日/夜双重性。
+
+排版以自定义的品牌字体（HashiCorp Sans，加载为 `__hashicorpSans_96f0ca`）为基石，它承载着极大的字重——字面意义上的。标题使用 600–700 的字重和紧凑的行高（1.17–1.19），创造出密集且具有权威感的文本块，传达出企业的自信。英雄区主标题为 82px、字重 600 并启用 OpenType `"kern"`，这绝非装饰——而是基础设施级别的排版。
+
+HashiCorp 的独特之处在于其多产品颜色系统。产品组合中的每个产品都有自己的品牌颜色——Terraform 紫色 (`#7b42bc`)、Vault 黄色 (`#ffcf25`)、Waypoint 青色 (`#14c6cb`)、Vagrant 蓝色 (`#1868f2`)——这些颜色通过 CSS 自定义属性系统 (`--mds-color-*`) 作为强调色贯穿始终。这在设计系统内创建了一个设计系统：父品牌是带有蓝色点缀的黑白风格，而每个子产品都注入了各自的彩色特征。
+
+组件系统使用 `mds` (Markdown Design System) 前缀，表明这是一种系统化的、由 token 驱动的方法，其中颜色、间距和状态都通过 CSS 变量进行管理。阴影非常微妙——使用 `rgba(97, 104, 117, 0.05)` 的双层微阴影几乎不可见，但提供了刚好足够的深度，将交互界面与背景区分开来。
+
+**主要特征：**
+- 双模式：干净的白色区域 + 具有戏剧性的深色（`#15181e`）英雄/产品区域
+- 自定义 HashiCorp Sans 字体，字重 600–700 并带有 `"kern"` 特性
+- 通过 `--mds-color-*` CSS 自定义属性实现的多产品颜色系统
+- 产品品牌颜色：Terraform 紫、Vault 黄、Waypoint 青、Vagrant 蓝
+- 全大写字间距标题（13px，字重 600，字间距 1.3px）
+- 微阴影：0.05 不透明度的双层——通过“低语”而非“呼喊”来展现深度
+- 由 token 驱动的 `mds` 组件系统，具有语义化的变量名
+- 严格的圆角：2px–8px，没有胶囊形或纯圆形
+- 用于辅助文本的 system-ui 回退字体栈
+
+## 2. 色彩调色板与角色
+
+### 品牌主色
+- **黑色** (`#000000`)：主要品牌颜色，浅色背景上的文字，`--mds-color-hcp-brand`
+- **深炭灰** (`#15181e`)：深色模式背景，英雄区域
+- **近黑色** (`#0d0e12`)：最深的深色模式表面，深色背景下的表单输入框
+
+### 中性色阶
+- **浅灰色** (`#f1f2f3`)：浅色背景，微妙的表面
+- **中灰色** (`#d5d7db`)：边框，深色模式下的按钮文字
+- **冷灰色** (`#b2b6bd`)：边框强调色（不透明度 0.1–0.4）
+- **深灰色** (`#656a76`)：辅助文本，次要标签，`--mds-form-helper-text-color`
+- **炭黑色** (`#3b3d45`)：浅色模式下的次要文字，按钮边框
+- **近白色** (`#efeff1`)：深色背景上的主要文字
+
+### 产品品牌颜色
+- **Terraform 紫色** (`#7b42bc`)：`--mds-color-terraform-button-background`
+- **Vault 黄色** (`#ffcf25`)：`--mds-color-vault-button-background`
+- **Waypoint 青色** (`#14c6cb`)：`--mds-color-waypoint-button-background-focus`
+- **Waypoint 青色悬停** (`#12b6bb`)：`--mds-color-waypoint-button-background-hover`
+- **Vagrant 蓝色** (`#1868f2`)：`--mds-color-vagrant-brand`
+- **紫色强调** (`#911ced`)：`--mds-color-palette-purple-300`
+- **已访问紫色** (`#a737ff`)：`--mds-color-foreground-action-visited`
+
+### 语义颜色
+- **行动蓝** (`#1060ff`)：深色背景上的主要操作链接
+- **链接蓝** (`#2264d6`)：浅色背景上的主要链接
+- **亮蓝色** (`#2b89ff`)：活动链接，悬停强调
+- **琥珀色** (`#bb5a00`)：`--mds-color-palette-amber-200`，警告状态
+- **浅琥珀色** (`#fbeabf`)：`--mds-color-palette-amber-100`，警告背景
+- **Vault 淡黄色** (`#fff9cf`)：`--mds-color-vault-radar-gradient-faint-stop`
+- **橙色** (`#a9722e`)：`--mds-color-unified-core-orange-6`
+- **红色** (`#731e25`)：`--mds-color-unified-core-red-7`，错误状态
+- **海军蓝** (`#101a59`)：`--mds-color-unified-core-blue-7`
+
+### 阴影
+- **微阴影** (`rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px`)：默认 card/button elevation
+- **焦点轮廓**：`3px solid var(--mds-color-focus-action-external)` — 系统化的聚焦环
+
+## 3. 排版规则
+
+### 字体家族
+- **主品牌字体**：`__hashicorpSans_96f0ca` (HashiCorp Sans)，回退字体：`__hashicorpSans_Fallback_96f0ca`
+- **系统 UI**：`system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial`
+
+### 层级
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | HashiCorp Sans | 82px (5.13rem) | 600 | 1.17 (紧凑) | normal | 启用 `"kern"` |
+| Section Heading | HashiCorp Sans | 52px (3.25rem) | 600 | 1.19 (紧凑) | normal | 启用 `"kern"` |
+| Feature Heading | HashiCorp Sans | 42px (2.63rem) | 700 | 1.19 (紧凑) | -0.42px | 负向字间距 |
+| Sub-heading | HashiCorp Sans | 34px (2.13rem) | 600–700 | 1.18 (紧凑) | normal | 特性区块 |
+| Card Title | HashiCorp Sans | 26px (1.63rem) | 700 | 1.19 (紧凑) | normal | 卡片和面板标题 |
+| Small Title | HashiCorp Sans | 19px (1.19rem) | 700 | 1.21 (紧凑) | normal | 紧凑型标题 |
+| Body Emphasis | HashiCorp Sans | 17px (1.06rem) | 600–700 | 1.18–1.35 | normal | 粗体正文 |
+| Body Large | system-ui | 20px (1.25rem) | 400–600 | 1.50 | normal | 英雄区描述 |
+| Body | system-ui | 16px (1.00rem) | 400–500 | 1.63–1.69 (宽松) | normal | 标准正文 |
+| Nav Link | system-ui | 15px (0.94rem) | 500 | 1.60 (宽松) | normal | 导航项 |
+| Small Body | system-ui | 14px (0.88rem) | 400–500 | 1.29–1.71 | normal | 次要内容 |
+| Caption | system-ui | 13px (0.81rem) | 400–500 | 1.23–1.69 | normal | 元数据，页脚链接 |
+| Uppercase Label | HashiCorp Sans | 13px (0.81rem) | 600 | 1.69 (宽松) | 1.3px | `text-transform: uppercase` |
+
+### 原则
+- **品牌/系统分离**：标题和品牌关键文本使用 HashiCorp Sans；正文、导航和功能性文本使用 system-ui。品牌字体承载分量，system-ui 承载文字。
+- **始终开启字距调整**：所有 HashiCorp Sans 文本均启用 OpenType `"kern"` —— 字母间距调整是不可妥协的。
+- **紧凑的标题**：所有标题均使用 1.17–1.21 的行高，创造出密集的、堆叠的文本块，让人感觉像基础设施一样——稳固且承重。
+- **宽松的正文**：正文使用 1.50–1.69 的行高（非常宽裕），在密集的标题下方营造出舒适的阅读节奏。
+- **作为路标的大写标签**：13px 全大写、带有 1.3px 字间距的文本作为系统化的分类/章节标记——始终使用 HashiCorp Sans 字重 600。
+
+## 4. 组件样式
+
+### 按钮
+
+**深色主按钮**
+- 背景：`#15181e`
+- 文字：`#d5d7db`
+- 内边距：9px 9px 9px 15px（非对称，左侧内边距更大）
+- 圆角：5px
+- 边框：`1px solid rgba(178, 182, 189, 0.4)`
+- 阴影：`rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px`
+- 聚焦：`3px solid var(--mds-color-focus-action-external)`
+- 悬停：使用 `--mds-color-surface-interactive` token
+
+**浅色次按钮**
+- 背景：`#ffffff`
+- 文字：`#3b3d45`
+- 内边距：8px 12px
+- 圆角：4px
+- 悬停：`--mds-color-surface-interactive` + 低阴影 elevation
+- 聚焦：`3px solid transparent` 轮廓
+- 干净、极简的外观
+
+**产品颜色按钮**
+- Terraform：背景 `#7b42bc`
+- Vault：背景 `#ffcf25`（深色文字）
+- Waypoint：背景 `#14c6cb`，悬停 `#12b6bb`
+- 每个产品按钮遵循相同的结构模式，但使用其品牌颜色
+
+### 徽章 / 胶囊
+- 背景：`#42225b`（深紫色）
+- 文字：`#efeff1`
+- 内边距：3px 7px
+- 圆角：5px
+- 边框：`1px solid rgb(180, 87, 255)`
+- 字体：16px
+
+### 输入框
+
+**文本输入框（深色模式）**
+- 背景：`#0d0e12`
+- 文字：`#efeff1`
+- 边框：`1px solid rgb(97, 104, 117)`
+- 内边距：11px
+- 圆角：5px
+- 聚焦：`3px solid var(--mds-color-focus-action-external)` 轮廓
+
+**复选框**
+- 背景：`#0d0e12`
+- 边框：`1px solid rgb(97, 104, 117)`
+- 圆角：3px
+
+### 链接
+- **浅色背景上的行动蓝**：`#2264d6`，悬停 → blue-600 变量，悬停时显示下划线
+- **深色背景上的行动蓝**：`#1060ff` 或 `#2b89ff`，悬停时显示下划线
+- **深色背景上的白色**：`#ffffff`，透明下划线 → 悬停时显示可见下划线
+- **浅色背景上的中性色**：`#3b3d45`，透明下划线 → 悬停时显示可见下划线
+- **深色背景上的浅色**：`#efeff1`，类似的悬停模式
+- 所有链接均使用 `var(--wpl-blue-600)` 作为悬停颜色
+
+### 卡片与容器
+- 浅色模式：白色背景，微阴影 elevation
+- 深色模式：`#15181e` 或更暗的表面
+- 圆角：卡片和容器使用 8px
+- 带有渐变边框或强调光照的产品展示卡片
+
+### 导航
+- 带有大型下拉菜单的整洁水平导航
+- 左对齐的 HashiCorp Logo
+- 链接使用 system-ui 15px 字重 500
+- 产品类别按生命周期管理组进行组织
+- 页眉包含“开始使用”和“联系我们” CTA
+- 英雄区域使用深色模式变体
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 比例：2px, 3px, 4px, 6px, 7px, 8px, 9px, 11px, 12px, 16px, 20px, 24px, 32px, 40px, 48px
+
+### 网格与容器
+- 最大内容宽度：~1150px（xl 断点）
+- 带有受限内容区域的全宽深色英雄区
+- 卡片网格：2–3 列布局
+- 在桌面端尺度下提供宽裕的水平内边距
+
+### 断点
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Mobile Small | <375px | 紧凑的单列 |
+| Mobile | 375–480px | 标准移动端 |
+| Small Tablet | 480–600px | 细微调整 |
+| Tablet | 600–768px | 开始出现 2 列网格 |
+| Small Desktop | 768–992px | 显示完整导航 |
+| Desktop | 992–1120px | 标准布局 |
+| Large Desktop | 1120–1440px | 最大宽度内容 |
+| Ultra-wide | >1440px | 居中，宽裕的边距 |
+
+### 留白哲学
+- **企业级呼吸空间**：各部分之间宽裕的垂直间距（48px–80px+）传达出稳定性和严肃感。
+- **密集标题，宽敞正文**：紧凑行高的标题位于宽松的正文之上，在每个区域的顶部创造出视觉上的“重量感”。
+- **深色作为画布**：深色英雄区使用额外的垂直内边距，让 3D 插图和渐变有呼吸的空间。
+
+### 圆角比例
+- 极小 (2px)：链接，小型行内元素
+- 微妙 (3px)：复选框，小型输入框
+- 标准 (4px)：次要按钮
+- 舒适 (5px)：主要按钮，徽章，输入框
+- 卡片 (8px)：卡片，容器，图片
+
+## 6. 深度与 Elevation
+
+| 级别 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影 | 默认表面，文本块 |
+| Whisper (Level 1) | `rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px` | 卡片，按钮，交互表面 |
+| Focus (Level 2) | `3px solid var(--mds-color-focus-action-external)` 轮廓 | 聚焦环 —— 颜色与上下文匹配 |
+
+**阴影哲学**：HashiCorp 使用了可以说是现代网页设计中最微妙的阴影系统。5% 不透明度的双层阴影几乎不可见——它们的存在不是为了创造视觉深度，而是为了标示交互性。如果你能看清阴影，那它就太强了。这种克制传达了企业级稳定性的价值——没有东西是悬浮的，没有东西是不确定的。
+
+## 7. 宜与忌
+
+### 宜
+- 标题和品牌文字使用 HashiCorp Sans，正文和 UI 文字使用 system-ui
+- 在所有 HashiCorp Sans 文本上启用 `"kern"`
+- **仅**将产品品牌颜色用于其对应的产品（Terraform = 紫色，Vault = 黄色等）
+- 使用 13px 字重 600 且带有 1.3px 字间距的全大写标签作为部分标记
+- 将阴影保持在“低语”级别（0.05 不透明度的双层）
+- 使用 `--mds-color-*` token 系统以保持一致的颜色应用
+- 维持紧凑标题/宽松正文的节奏（行高 1.17–1.21 对比 1.50–1.69）
+- 使用 `3px solid` 的焦点轮廓以保证无障碍访问
+
+### 忌
+- 不要在产品上下文之外使用产品品牌颜色（例如 Vault 内容上不要出现 Terraform 紫色）
+- 不要将阴影不透明度增加到 0.1 以上 —— “低语”级别是刻意为之的
+- 不要使用胶囊形按钮（>8px 圆角）—— 锋利、极简的圆角是结构性的
+- 不要在标题上跳过 `"kern"` 特性 —— 该字体需要它
+- 不要将 HashiCorp Sans 用于小号正文 —— 它专为 17px 以上的标题用途而设计
+- 不要在同一个组件中混合产品颜色 —— 每个产品只有一种颜色
+- 不要使用纯黑色（`#000000`）作为深色背景 —— 请使用 `#15181e` 或 `#0d0e12`
+- 不要忘记非对称的按钮内边距 —— 9px 9px 9px 15px 是刻意设计的
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Mobile | <768px | 单列，汉堡菜单，堆叠的 CTA |
+| Tablet | 768–992px | 2 列网格，导航开始展开 |
+| Desktop | 992–1150px | 完整布局，大型菜单导航 |
+| Large | >1150px | 最大宽度居中，宽裕的边距 |
+
+### 折叠策略
+- 英雄区：标题大小 82px → 52px → 42px
+- 导航：大型菜单 → 汉堡菜单
+- 产品卡片：3 列 → 2 列 → 堆叠
+- 深色区域保持全宽，但压缩内边距
+- 按钮：行内 → 移动端全宽堆叠
+
+## 9. Agent 提示指南
+
+### 快速颜色参考
+- 浅色背景：`#ffffff`，`#f1f2f3`
+- 深色背景：`#15181e`，`#0d0e12`
+- 浅色文字：`#000000`，`#3b3d45`
+- 深色文字：`#efeff1`，`#d5d7db`
+- 链接：`#2264d6` (浅色)，`#1060ff` (深色)，`#2b89ff` (活动)
+- 辅助文本：`#656a76`
+- 边框：`rgba(178, 182, 189, 0.4)`，`rgb(97, 104, 117)`
+- 聚焦：`3px solid` 适合产品的颜色
+
+### 示例 Component Prompts
+- "Create a hero on dark background (#15181e). Headline at 82px HashiCorp Sans weight 600, line-height 1.17, kern enabled, white text. Sub-text at 20px system-ui weight 400, line-height 1.50, #d5d7db text. Two buttons: primary dark (#15181e, 5px radius, 9px 15px padding) and secondary white (#ffffff, 4px radius, 8px 12px padding)."
+- "Design a product card: white background, 8px radius, dual-layer shadow at rgba(97,104,117,0.05). Title at 26px HashiCorp Sans weight 700, body at 16px system-ui weight 400 line-height 1.63."
+- "Build an uppercase section label: 13px HashiCorp Sans weight 600, line-height 1.69, letter-spacing 1.3px, text-transform uppercase, #656a76 color."
+- "Create a product-specific CTA button: Terraform → #7b42bc background, Vault → #ffcf25 with dark text, Waypoint → #14c6cb. All: 5px radius, 500 weight text, 16px system-ui."
+- "Design a dark form: #0d0e12 input background, #efeff1 text, 1px solid rgb(97,104,117) border, 5px radius, 11px padding. Focus: 3px solid accent-color outline."
+
+### 迭代指南
+1. 始终从模式决定开始：信息类内容使用浅色（白色），英雄/产品区使用深色（#15181e）
+2. 仅标题使用 HashiCorp Sans（17px+），其余一切使用 system-ui
+3. 阴影处于“低语”级别（0.05 不透明度）—— 如果可见，请减小
+4. 产品颜色是神圣的 —— 每个产品只拥有一种颜色
+5. 聚焦环始终为 3px 实线，颜色与产品上下文相匹配
+6. 全大写标签是系统化的寻路模式 —— 13px，字重 600，1.3px 追踪间距

package/extensions/skills/builtin/creative/popular-web-designs/templates/ibm.md

@@ -0,0 +1,345 @@
+# Design System: IBM
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原网站使用专有字体。对于自包含的 HTML 输出，请使用这些 CDN 替代字体：
+> - **Primary:** `IBM Plex Sans` | **Mono:** `IBM Plex Mono`
+> - **Font stack (CSS):** `font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **Mono stack (CSS):** `font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` 技能（cloudflared tunnel）进行服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+IBM 网站是建立在 Carbon Design System 之上的企业权威的数字化体现——这是一种结构极其严谨的设计语言，读起来就像是渲染成网页的工程规范。该页面在强烈的二元性上运作：明亮的白色（`#ffffff`）画布搭配接近黑色的（`#161616`）文本，并辅以单一且不变的强调色——IBM Blue 60（`#0f62fe`）。这不是爱玩的科技初创公司的极简主义；它是提炼成像素的企业级精准度。每个元素都存在于 Carbon 严格的 2x 网格内，每种颜色都映射到一个语义 token，每个间距值都对齐到 8px 的基础单位。
+
+IBM Plex 字体系列是该系统的骨干。轻字重（300）的 IBM Plex Sans 用于展示性标题，在大尺寸下创造出一种意想不到的轻盈感，甚至近乎精致——这是对 IBM 企业庄重感的一种刻意反衬。在正文尺寸下，常规字重（400）配合 0.16px 的字间距应用于 14px 的说明文字，引入了细致的微调，使得 Carbon 的文本看起来像是工程化而非单纯设计出来的。IBM Plex Mono 用于代码、数据和技术标签，与极少露面的 IBM Plex Serif 一起构成了该家族的三位一体。
+
+除了黑白加蓝色之外，定义 IBM 视觉标识的是对 Carbon 组件 token 系统的依赖。每个交互状态都映射到带有 `--cds-`（Carbon Design System）前缀的 CSS 自定义属性。按钮没有硬编码的颜色；它们引用 `--cds-button-primary`、`--cds-button-primary-hover`、`--cds-button-primary-active`。这种 token 化架构意味着整个视觉层是深厚系统化基础上的一层薄皮——等同于设计界中一个类型完备的 API。
+
+**核心特征：**
+- 字重 300 (Light) 的 IBM Plex Sans 用于展示——通过排版上的克制体现企业的庄重感
+- IBM Plex Mono 用于代码和技术内容，在小尺寸下保持一致的 0.16px 字间距
+- 单一强调色：IBM Blue 60 (`#0f62fe`)——应用于每个交互元素、每个 CTA、每个链接
+- Carbon token 系统 (`--cds-*`) 驱动所有语义颜色，在变量层级实现主题切换
+- 严格遵循 8px 间距网格——没有任意值，一切皆对齐
+- 在 `#f4f4f4` Gray 10 背景上的扁平、无边界卡片——通过背景色分层而非阴影来体现深度
+- 底边框输入框（非全边框框选）——标志性的 Carbon 表单模式
+- 主按钮的 border-radius 为 0px——毫不妥协的矩形，没有柔和处理
+
+## 2. 色彩调色板与角色
+
+### Primary
+- **IBM Blue 60** (`#0f62fe`)：唯一的交互色。主按钮、链接、聚焦状态、活动指示器。这是核心 UI 调色板中唯一的彩色色调。
+- **White** (`#ffffff`)：页面背景、卡片表面、蓝色按钮上的文本，`--cds-background`。
+- **Gray 100** (`#161616`)：主要文本、标题、深色表面背景、导航栏、页脚。`--cds-text-primary`。
+
+### Neutral Scale (Gray Family)
+- **Gray 100** (`#161616`)：主要文本、标题、深色 UI chrome、页脚背景。
+- **Gray 90** (`#262626`)：次要深色表面，深色背景上的悬停状态。
+- **Gray 80** (`#393939`)：第三级深色，活动状态。
+- **Gray 70** (`#525252`)：次要文本、辅助文本、描述。`--cds-text-secondary`。
+- **Gray 60** (`#6f6f6f`)：占位符文本、禁用状态的文本。
+- **Gray 50** (`#8d8d8d`)：禁用状态的图标、柔和的标签。
+- **Gray 30** (`#c6c6c6`)：边框、分割线、输入框底边框。`--cds-border-subtle`。
+- **Gray 20** (`#e0e0e0`)：细微边框、卡片轮廓。
+- **Gray 10** (`#f4f4f4`)：次要表面背景、卡片填充、交替行。`--cds-layer-01`。
+- **Gray 10 Hover** (`#e8e8e8`)：Gray 10 表面的悬停状态。
+
+### Interactive
+- **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`——深色背景上用于聚焦的白色内环。
+
+### 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`。
+
+### Dark Theme (Gray 100 Theme)
+- **Background**: Gray 100 (`#161616`)。`--cds-background`。
+- **Layer 01**: Gray 90 (`#262626`)。卡片和容器表面。
+- **Layer 02**: Gray 80 (`#393939`)。抬升的表面。
+- **Text Primary**: Gray 10 (`#f4f4f4`)。`--cds-text-primary`。
+- **Text Secondary**: Gray 30 (`#c6c6c6`)。`--cds-text-secondary`。
+- **Border Subtle**: Gray 80 (`#393939`)。`--cds-border-subtle`。
+- **Interactive**: Blue 40 (`#78a9ff`)。链接和交互元素变浅以提高对比度。
+
+## 3. 排版规则
+
+### Font Family
+- **Primary**: `IBM Plex Sans`，降级字体：`Helvetica Neue, Arial, sans-serif`
+- **Monospace**: `IBM Plex Mono`，降级字体：`Menlo, Courier, monospace`
+- **Serif** (限量使用): `IBM Plex Serif`，用于社论/表达性语境
+- **Icon Font**: `ibm_icons`——20px 的专有图标字符
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display 01 | IBM Plex Sans | 60px (3.75rem) | 300 (Light) | 1.17 (70px) | 0 | 极具冲击力，使用轻字重体现优雅 |
+| Display 02 | IBM Plex Sans | 48px (3.00rem) | 300 (Light) | 1.17 (56px) | 0 | 次级 Hero，响应式降级 |
+| Heading 01 | IBM Plex Sans | 42px (2.63rem) | 300 (Light) | 1.19 (50px) | 0 | 富有表现力的标题 |
+| Heading 02 | IBM Plex Sans | 32px (2.00rem) | 400 (Regular) | 1.25 (40px) | 0 | 区块标题 |
+| Heading 03 | IBM Plex Sans | 24px (1.50rem) | 400 (Regular) | 1.33 (32px) | 0 | 子区块标题 |
+| Heading 04 | IBM Plex Sans | 20px (1.25rem) | 600 (Semibold) | 1.40 (28px) | 0 | 卡片标题、功能区标题 |
+| Heading 05 | IBM Plex Sans | 20px (1.25rem) | 400 (Regular) | 1.40 (28px) | 0 | 较轻字重的卡片标题 |
+| Body Long 01 | IBM Plex Sans | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | 标准阅读文本 |
+| Body Long 02 | IBM Plex Sans | 16px (1.00rem) | 600 (Semibold) | 1.50 (24px) | 0 | 强调正文、标签 |
+| Body Short 01 | IBM Plex Sans | 14px (0.88rem) | 400 (Regular) | 1.29 (18px) | 0.16px | 紧凑正文、说明文字 |
+| Body Short 02 | IBM Plex Sans | 14px (0.88rem) | 600 (Semibold) | 1.29 (18px) | 0.16px | 粗体说明文字、导航项 |
+| Caption 01 | IBM Plex Sans | 12px (0.75rem) | 400 (Regular) | 1.33 (16px) | 0.32px | 元数据、时间戳 |
+| Code 01 | IBM Plex Mono | 14px (0.88rem) | 400 (Regular) | 1.43 (20px) | 0.16px | 行内代码、终端 |
+| Code 02 | IBM Plex Mono | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | 代码块 |
+| Mono Display | IBM Plex Mono | 42px (2.63rem) | 400 (Regular) | 1.19 (50px) | 0 | Hero 区等宽装饰字 |
+
+### Principles
+- **展示尺寸下的轻字重**：Carbon 的表现力排版在 42px 及以上尺寸使用字重 300 (Light)。这创造了一种独特的张力——内容以企业级的权威性发声，而字体的字形却以排版的轻盈感低语。
+- **小尺寸下的微调字间距**：14px 时使用 0.16px 字间距，12px 时使用 0.32px。这些看似微不足道的数值是 Carbon 在紧凑尺寸下保持可读性的秘密武器——它们恰好将 IBM Plex 紧凑的字形稍微展开了些。
+- **三种功能性字重**：300 (展示/表现力)、400 (正文/阅读)、600 (强调/UI 标签)。字重 700 被刻意排除在生产环境的排版比例之外。
+- **Productive vs. Expressive**：Productive 型排版使用更紧凑的行高 (1.29) 以适应高密度的 UI。Expressive 型排版则留出更多呼吸空间 (1.40-1.50) 给营销和社论内容。
+
+## 4. 组件样式
+
+### Buttons
+
+**Primary Button (Blue)**
+- Background: `#0f62fe` (Blue 60) → `--cds-button-primary`
+- Text: `#ffffff` (White)
+- Padding: 14px 63px 14px 15px (不对称——为尾部图标预留空间)
+- Border: 1px solid transparent
+- Border-radius: 0px (尖锐矩形——Carbon 的标志性特征)
+- Height: 48px (默认), 40px (紧凑), 64px (富有表现力)
+- Hover: `#0353e9` (Blue 60 Hover) → `--cds-button-primary-hover`
+- Active: `#002d9c` (Blue 80) → `--cds-button-primary-active`
+- Focus: `2px solid #0f62fe` inset + `1px solid #ffffff` inner
+
+**Secondary Button (Gray)**
+- Background: `#393939` (Gray 80)
+- Text: `#ffffff`
+- Hover: `#4c4c4c` (Gray 70)
+- Active: `#6f6f6f` (Gray 60)
+- Padding/radius 同主按钮
+
+**Tertiary Button (Ghost Blue)**
+- Background: transparent
+- Text: `#0f62fe` (Blue 60)
+- Border: 1px solid `#0f62fe`
+- Hover: `#0353e9` text + Blue 10 background tint
+- Border-radius: 0px
+
+**Ghost Button**
+- Background: transparent
+- Text: `#0f62fe` (Blue 60)
+- Padding: 14px 16px
+- Border: none
+- Hover: `#e8e8e8` background tint
+
+**Danger Button**
+- Background: `#da1e28` (Red 60)
+- Text: `#ffffff`
+- Hover: `#b81921` (Red 70)
+
+### Cards & Containers
+- Background: 白色主题下的 `#ffffff`，抬升卡片使用 `#f4f4f4` (Gray 10)
+- Border: none (扁平设计——大多数卡片无边框或阴影)
+- Border-radius: 0px (与矩形的按钮美学保持一致)
+- Hover: 可点击卡片的背景色变为 `#e8e8e8` (Gray 10 Hover)
+- Content padding: 16px
+- Separation: 通过背景色分层（白色 → gray 10 → 白色）而不是阴影来区分
+
+### Inputs & Forms
+- Background: `#f4f4f4` (Gray 10) — `--cds-field`
+- Text: `#161616` (Gray 100)
+- Padding: 0px 16px (仅水平方向)
+- Height: 40px (默认), 48px (大)
+- Border: 两侧/顶部 none — 底部 `2px solid transparent`
+- Bottom-border active: `2px solid #161616` (Gray 100)
+- Focus: `2px solid #0f62fe` (Blue 60) bottom-border — `--cds-focus`
+- Error: `2px solid #da1e28` (Red 60) bottom-border
+- Label: 12px IBM Plex Sans, 0.32px letter-spacing, Gray 70
+- Helper text: 12px, Gray 60
+- Placeholder: Gray 60 (`#6f6f6f`)
+- Border-radius: 0px (顶部) — 输入框为尖角
+
+### Navigation
+- Background: `#161616` (Gray 100) — 全宽深色导航条
+- Height: 48px
+- Logo: IBM 8-bar logo, 白色配深色背景, 左对齐
+- Links: 14px IBM Plex Sans, weight 400, `#c6c6c6` (Gray 30) default
+- Link hover: `#ffffff` text
+- Active link: `#ffffff` with bottom-border indicator
+- Platform switcher: 左对齐的水平标签页
+- Search: 图标触发的滑出式搜索框
+- Mobile: 汉堡菜单搭配向左滑出的面板
+
+### Links
+- 默认: `#0f62fe` (Blue 60) 无下划线
+- Hover: `#0043ce` (Blue 70) 带下划线
+- Visited: 保持 Blue 60 (无访问后的状态变化)
+- Inline links: 在正文段落中默认带下划线
+
+### Distinctive Components
+
+**Content Block (Hero/Features)**
+- 全宽的白色/gray-10 交替背景条带
+- 标题左对齐，使用 60px 或 48px 展示型字体
+- CTA 为带箭头图标的蓝色主按钮
+- 图片/插画右对齐，或在移动端置于下方
+
+**Tile (Clickable Card)**
+- Background: `#f4f4f4` 或 `#ffffff`
+- 全宽底边框或背景变色悬停效果
+- Hover 时右下角出现箭头图标
+- 无阴影 —— 扁平化是其视觉标识
+
+**Tag / Label**
+- Background: 上下文相关的颜色，10% 不透明度 (例如：Blue 10, Red 10)
+- Text: 对应的 60 级颜色
+- Padding: 4px 8px
+- Border-radius: 24px (胶囊形——0px 规则的特例)
+- Font: 12px weight 400
+
+**Notification Banner**
+- 全宽长条，通常为 Blue 60 或 Gray 100 背景
+- 白色文本，14px
+- 右对齐的关闭/消除图标
+
+## 5. 布局原则
+
+### Spacing System
+- Base unit: 8px (Carbon 2x grid)
+- Component spacing scale: 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px
+- Layout spacing scale: 16px, 24px, 32px, 48px, 64px, 80px, 96px, 160px
+- Mini unit: 8px (最小可用间距)
+- Padding within components: 通常为 16px
+- Gap between cards/tiles: 1px (极细线) 或 16px (标准)
+
+### Grid & Container
+- 16-column grid (Carbon 的 2x 网格系统)
+- Max content width: 1584px (max breakpoint)
+- Column gutters: 32px (移动端 16px)
+- Margin: 16px (移动端), 32px (平板及以上)
+- 内容通常跨越 8-12 列以保持可读的行宽
+- 通栏区块与受约束的内容交替出现
+
+### Whitespace Philosophy
+- **功能性密度**：Carbon 倾向于生产级的高密度，而非大面积留白。与消费级设计系统相比，各区块排布紧密——这反映了 IBM 的企业级基因。
+- **背景色分区**：IBM 不使用巨大的区块内边距，而是使用交替的背景颜色 (白色 → gray 10 → 白色) 来创造视觉分离，同时占用最小的垂直空间。
+- **一致的 48px 节奏**：主要区块过渡使用 48px 垂直间距。Hero 区可使用 80px–96px。
+
+### Border Radius Scale
+- **0px**：主按钮、输入框、磁贴、卡片——主导的样式处理。Carbon 从根本上说是矩形的。
+- **2px**：偶尔用于小型交互元素 (标签)
+- **24px**：标签/标记 (胶囊形——唯一的圆角特例)
+- **50%**：头像圆形、图标容器
+
+## 6. 深度与层级
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影，`#ffffff` 背景 | 默认页面表面 |
+| Layer 01 | 无阴影，`#f4f4f4` 背景 | 卡片、磁贴、交替区块 |
+| Layer 02 | 无阴影，`#e0e0e0` 背景 | Layer 01 内部的抬升面板 |
+| Raised | `0 2px 6px rgba(0,0,0,0.3)` | 下拉菜单、工具提示、溢出菜单 |
+| Overlay | `0 2px 6px rgba(0,0,0,0.3)` + 深色遮罩 | 模态对话框、侧边栏面板 |
+| Focus | `2px solid #0f62fe` inset + `1px solid #ffffff` | 键盘聚焦环 |
+| Bottom-border | 底边 `2px solid #161616` | 活动输入框、活动标签指示器 |
+
+**阴影哲学**：Carbon 刻意避免使用阴影。IBM 主要通过背景色分层来实现深度——堆叠逐渐变暗的灰色表面，而不是添加 box-shadows。这创造了一种扁平、受印刷启发的美学，层级通过颜色明暗度传达，而非模拟光照。阴影专门保留给真正覆盖内容的浮动元素 (下拉菜单、工具提示、模态框)。这种克制赋予了罕见的阴影以强大的冲击力——在 Carbon 中，当某个元素浮动时，它必定至关重要。
+
+## 7. 注意事项
+
+### 推荐
+- 在展示尺寸 (42px+) 下使用字重 300 的 IBM Plex Sans——这种轻盈感是刻意为之
+- 在 14px 正文文本上应用 0.16px 字间距，在 12px 说明文字上应用 0.32px 字间距
+- 在按钮、输入框、卡片和磁贴上使用 0px border-radius——矩形是系统的法则
+- 实现时引用 `--cds-*` token 名称 (例如：`--cds-button-primary`, `--cds-text-primary`)
+- 使用背景色分层 (白色 → gray 10 → gray 20) 代替阴影来体现深度
+- 使用底边框 (而非全边框) 作为输入框指示器
+- 保持 48px 的默认按钮高度和用于容纳图标的不对称 padding
+- 应用 Blue 60 (`#0f62fe`) 作为唯一强调色——一种蓝色统领一切
+
+### 禁忌
+- 不要圆角化按钮边角——0px 半径是 Carbon 的视觉标识
+- 不要在卡片或磁贴上使用阴影——扁平化才是目的
+- 不要引入额外的强调色——IBM 的系统是单色系 + 蓝色
+- 不要使用字重 700 (Bold)——字号比例最高到 600 (Semibold) 为止
+- 不要为展示尺寸的文本添加字间距——字间距仅适用于 14px 及以下
+- 不要用全边框框选输入框——Carbon 输入框仅使用底边框
+- 不要使用渐变背景——IBM 的表面是扁平的纯色
+- 不要偏离 8px 间距网格——每个值都应该能被 8 整除 (允许使用 2px 和 4px 进行微调)
+
+## 8. 响应式行为
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Small (sm) | 320px | 单列布局，汉堡导航，16px 边距 |
+| Medium (md) | 672px | 开始出现双列网格，内容展开 |
+| Large (lg) | 1056px | 显示完整导航，3-4 列网格 |
+| X-Large (xlg) | 1312px | 最大内容密度，宽屏布局 |
+| Max | 1584px | 最大内容宽度，居中并带有边距 |
+
+### Touch Targets
+- Button height: 48px 默认，最小 40px (紧凑型)
+- Navigation links: 48px 行高以便于触摸
+- Input height: 40px 默认，48px (大)
+- Icon buttons: 48px 见方的触摸热区
+- Mobile menu items: 全宽 48px 行高
+
+### Collapsing Strategy
+- Hero: 随着视口变窄，60px display 字号 → 42px → 32px heading 字号
+- Navigation: 完整的水平横向导航条 → 汉堡菜单及滑出式面板
+- Grid: 4 列 → 2 列 → 单列
+- Tiles/cards: 水平网格 → 垂直堆叠
+- Images: 保持纵横比，max-width 100%
+- Footer: 多列链接组 → 堆叠成单列
+- Section padding: 48px → 32px → 16px
+
+### Image Behavior
+- 使用 `max-width: 100%` 的响应式图片
+- 产品插画按比例缩放
+- Hero 图片可能会从左右并排切换为在下方堆叠
+- 数据可视化保持纵横比，移动端支持横向滚动
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: IBM Blue 60 (`#0f62fe`)
+- Background: White (`#ffffff`)
+- Heading text: Gray 100 (`#161616`)
+- Body text: Gray 100 (`#161616`)
+- Secondary text: Gray 70 (`#525252`)
+- Surface/Card: Gray 10 (`#f4f4f4`)
+- Border: Gray 30 (`#c6c6c6`)
+- Link: Blue 60 (`#0f62fe`)
+- Link hover: Blue 70 (`#0043ce`)
+- Focus ring: Blue 60 (`#0f62fe`)
+- Error: Red 60 (`#da1e28`)
+- Success: Green 50 (`#24a148`)
+
+### 示例 Component Prompts
+- "在白色背景上创建一个 Hero 区。标题使用 60px IBM Plex Sans weight 300，line-height 1.17，颜色 #161616。副标题使用 16px weight 400，line-height 1.50，颜色 #525252，max-width 640px。蓝色 CTA 按钮（背景色 #0f62fe，文字颜色 #ffffff，0px border-radius，高度 48px，padding 为 14px 63px 14px 15px）。"
+- "设计一个卡片磁贴：背景色 #f4f4f4，0px border-radius，padding 为 16px。标题使用 20px IBM Plex Sans weight 600，line-height 1.40，颜色 #161616。正文使用 14px weight 400，letter-spacing 0.16px，line-height 1.29，颜色 #525252。Hover 状态：背景色变为 #e8e8e8。"
+- "构建一个表单字段：背景色 #f4f4f4，0px border-radius，高度 40px，水平 padding 为 16px。上方标签使用 12px weight 400，letter-spacing 0.32px，颜色 #525252。Bottom-border：默认为 2px solid transparent，聚焦时为 2px solid #0f62fe。Placeholder：#6f6f6f。"
+- "创建一个深色导航栏：背景色 #161616，高度 48px。IBM logo 白色左对齐。链接使用 14px IBM Plex Sans weight 400，颜色 #c6c6c6。Hover 状态：文字颜色 #ffffff。Active 状态：文字颜色 #ffffff 并带有 2px 底边框。"
+- "构建一个标签组件：背景色 Blue 10 (#edf5ff)，文字颜色 Blue 60 (#0f62fe)，padding 4px 8px，24px border-radius，12px IBM Plex Sans weight 400。"
+
+### Iteration Guide
+1. 在按钮、输入框和卡片上始终使用 0px border-radius——这在 Carbon 中是不可妥协的
+2. 字间距仅用于小尺寸：14px 用 0.16px，12px 用 0.32px——绝不用于展示型文本
+3. 三种字重：300 (展示型)、400 (正文)、600 (强调)——禁用 bold
+4. Blue 60 是唯一的强调色——不要引入次要的强调色调
+5. 深度来自于背景色分层（白色 → #f4f4f4 → #e0e0e0），而不是阴影
+6. 输入框只有底边框，永远不要使用全边框框选
+7. 使用 `--cds-` 前缀进行 token 命名，以保持与 Carbon 兼容
+8. 48px 是所有交互元素的通用高度