@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,317 @@
+# Design System: Clay
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原始站点使用专有字体。对于自包含的 HTML 输出，请使用这些 CDN 替代字体：
+> - **Primary:** `DM Sans` | **Mono:** `system monospace stack`
+> - **Font stack (CSS):** `font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **Mono stack (CSS):** `font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` skill（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Clay 的网站是一场温暖而活泼的色彩庆典，它将 B2B data enrichment 视为一种手工艺，而非枯燥的企业任务。这种设计语言建立在温暖的奶油色背景（`#faf9f7`）和燕麦色调边框（`#dad4c8`、`#eee9df`）的基础之上，赋予了每个表面一种宛如手工纸张般的触感。在这块充满工匠气息的画布上，一系列鲜艳的色板迸发出强烈的个性 —— Matcha 绿、Slushie 青、Lemon 金、Ube 紫、Pomegranate 粉、Blueberry 海军蓝和 Dragonfruit 品红 —— 每一种颜色的命名都像是果汁吧里的风味，而不是企业 UI 套件里的冷冰冰的色彩。
+
+排版以 Roobert 为核心，这是一款极具个性的几何无衬线字体，加载了全套 OpenType stylistic sets（`"ss01"`、`"ss03"`、`"ss10"`、`"ss11"`、`"ss12"`），赋予了文本一种独特且略带俏皮的个性。在 Display 尺度下（80px，字重 600），Roobert 使用了极具视觉冲击力的负字间距（-3.2px），将标题压缩成有力且如同广告牌般的声明。Space Mono 则作为代码和技术标签的等宽字体伴侣，完美诠释了工艺与科技的双重属性。
+
+让 Clay 真正与众不同的是其 hover 微动画：按钮在 hover 时会轻微旋转（`rotateZ(-8deg)`）、向上位移（`translateY(-80%)`）、将背景变为对比鲜明的色板颜色，并投射出硬边缘的偏移阴影（`rgb(0,0,0) -7px 7px`）。这种俏皮的 hover 行为 —— 按钮在交互时真实地倾斜并跳跃 —— 创造了一种在 B2B 软件中极为罕见的物理愉悦感。结合大圆角容器（24px–40px radius）、虚实结合的边框线条，以及包含 inset 高光的多层阴影系统，Clay 给人的感觉就像是出自一群真正热爱创造事物的人之手的设计系统。
+
+**核心特征：**
+- 温暖的奶油色画布（`#faf9f7`）搭配燕麦色调边框（`#dad4c8`） —— 充满工匠气息，而非冷冰冰的工业化
+- 命名色板：Matcha、Slushie、Lemon、Ube、Pomegranate、Blueberry、Dragonfruit
+- 使用 5 套 OpenType stylistic sets 的 Roobert 字体 —— 独特的几何字符特征
+- 俏皮的 hover 动画：rotateZ(-8deg) + translateY(-80%) + 硬边缘偏移阴影
+- 用于代码和技术标签的 Space Mono
+- 大圆角设计：24px 卡片、40px 区块、1584px 胶囊形状
+- 混合边框风格：同一界面中同时使用实线与虚线
+- 带 inset 高光的多层阴影：`0px 1px 1px` + `-1px inset` + `-0.5px`
+
+## 2. 调色板与角色
+
+### Primary
+- **Clay Black** (`#000000`): 文本、标题、定价卡文本，`--_theme--pricing-cards---text`
+- **Pure White** (`#ffffff`): 卡片背景、按钮背景、反色文本
+- **Warm Cream** (`#faf9f7`): 页面背景 —— 温暖、如纸张般的画布
+
+### Swatch Palette — 命名颜色
+
+**Matcha (Green)**
+- **Matcha 300** (`#84e7a5`): `--_swatches---color--matcha-300`，浅绿色点缀
+- **Matcha 600** (`#078a52`): `--_swatches---color--matcha-600`，中绿色
+- **Matcha 800** (`#02492a`): `--_swatches---color--matcha-800`，用于暗色区块的深绿色
+
+**Slushie (Cyan)**
+- **Slushie 500** (`#3bd3fd`): `--_swatches---color--slushie-500`，明亮的青色点缀
+- **Slushie 800** (`#0089ad`): `--_swatches---color--slushie-800`，深青色
+
+**Lemon (Gold)**
+- **Lemon 400** (`#f8cc65`): `--_swatches---color--lemon-400`，温暖的浅金色
+- **Lemon 500** (`#fbbd41`): `--_swatches---color--lemon-500`，主金色
+- **Lemon 700** (`#d08a11`): `--_swatches---color--lemon-700`，深琥珀色
+- **Lemon 800** (`#9d6a09`): `--_swatches---color--lemon-800`，暗琥珀色
+
+**Ube (Purple)**
+- **Ube 300** (`#c1b0ff`): `--_swatches---color--ube-300`，柔和的淡紫色
+- **Ube 800** (`#43089f`): `--_swatches---color--ube-800`，深紫色
+- **Ube 900** (`#32037d`): `--_swatches---color--ube-900`，最暗的紫色
+
+**Pomegranate (Pink/Red)**
+- **Pomegranate 400** (`#fc7981`): `--_swatches---color--pomegranate-400`，温暖的珊瑚粉色
+
+**Blueberry (Navy Blue)**
+- **Blueberry 800** (`#01418d`): `--_swatches---color--blueberry-800`，深海军蓝
+
+### Neutral Scale (Warm)
+- **Warm Silver** (`#9f9b93`): 次要/弱化文本，页脚链接
+- **Warm Charcoal** (`#55534e`): 第三级文本，暗色调弱化链接
+- **Dark Charcoal** (`#333333`): 浅色背景上的链接文本
+
+### Surface & Border
+- **Oat Border** (`#dad4c8`): 主边框 —— 温暖的奶油色调结构线
+- **Oat Light** (`#eee9df`): 次要的较浅边框
+- **Cool Border** (`#e6e8ec`): 用于对比区块的冷色调边框
+- **Dark Border** (`#525a69`): 暗色区块上的边框
+- **Light Frost** (`#eff1f3`): 柔和的按钮背景（hover 时透明度为 0%）
+
+### Badges
+- **Badge Blue Bg** (`#f0f8ff`): 带有蓝色调的 Badge 表面
+- **Badge Blue Text** (`#3859f9`): 鲜艳的蓝色 Badge 文本
+- **Focus Ring** (`rgb(20, 110, 245) solid 2px`): 无障碍焦点指示器
+
+### Shadows
+- **Clay Shadow** (`rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`): 带 inset 高光的多层阴影 —— 标志性设计
+- **Hard Offset** (`rgb(0,0,0) -7px 7px`): Hover 状态 —— 俏皮的硬阴影
+
+## 3. 排版规则
+
+### Font Families
+- **Primary**: `Roobert`，回退字体：`Arial`
+- **Monospace**: `Space Mono`
+- **OpenType 特性**: 在所有 Roobert 文本上应用 `"ss01"`、`"ss03"`、`"ss10"`、`"ss11"`、`"ss12"`（Display 文本使用全部 5 套；正文/UI 使用 `"ss03"`、`"ss10"`、`"ss11"`、`"ss12"`）
+
+### 层级
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Roobert | 80px (5.00rem) | 600 | 1.00 (tight) | -3.2px | 应用全部 5 套 stylistic sets |
+| Display Secondary | Roobert | 60px (3.75rem) | 600 | 1.00 (tight) | -2.4px | 应用全部 5 套 stylistic sets |
+| Section Heading | Roobert | 44px (2.75rem) | 600 | 1.10 (tight) | -0.88px to -1.32px | 应用全部 5 套 stylistic sets |
+| Card Heading | Roobert | 32px (2.00rem) | 600 | 1.10 (tight) | -0.64px | 应用全部 5 套 stylistic sets |
+| Feature Title | Roobert | 20px (1.25rem) | 600 | 1.40 | -0.4px | 应用全部 5 套 stylistic sets |
+| Sub-heading | Roobert | 20px (1.25rem) | 500 | 1.50 | -0.16px | 4 套 stylistic sets (无 ss01) |
+| Body Large | Roobert | 20px (1.25rem) | 400 | 1.40 | normal | 4 套 stylistic sets |
+| Body | Roobert | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.36px | 4 套 stylistic sets |
+| Body Standard | Roobert | 16px (1.00rem) | 400 | 1.50 | normal | 4 套 stylistic sets |
+| Body Medium | Roobert | 16px (1.00rem) | 500 | 1.20–1.40 | -0.16px to -0.32px | 4–5 套 stylistic sets |
+| Button | Roobert | 16px (1.00rem) | 500 | 1.50 | -0.16px | 4 套 stylistic sets |
+| Button Large | Roobert | 24px (1.50rem) | 400 | 1.50 | normal | 4 套 stylistic sets |
+| Button Small | Roobert | 12.8px (0.80rem) | 500 | 1.50 | -0.128px | 4 套 stylistic sets |
+| Nav Link | Roobert | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | 4 套 stylistic sets |
+| Caption | Roobert | 14px (0.88rem) | 400 | 1.50–1.60 | -0.14px | 4 套 stylistic sets |
+| Small | Roobert | 12px (0.75rem) | 400 | 1.50 | normal | 4 套 stylistic sets |
+| Uppercase Label | Roobert | 12px (0.75rem) | 600 | 1.20 (tight) | 1.08px | `text-transform: uppercase`, 4 套 sets |
+| Badge | Roobert | 9.6px | 600 | — | — | 胶囊形 Badge |
+
+### 原则
+- **作为身份标识的五种 stylistic sets**：在 Roobert 上组合使用 `"ss01"`、`"ss03"`、`"ss10"`、`"ss11"`、`"ss12"` 创造出独特的排版个性。`ss01` 专用于标题和强调文本 —— 正文省略此设置，通过字形变化营造出微妙的层级感。
+- **极具视觉冲击力的 Display 压缩**：80px 时字间距为 -3.2px，60px 时为 -2.4px —— 这种最紧凑的 Display 字间距搭配最宽松的正文字间距（1.60 行高），形成了戏剧性的对比。
+- **标题字重 600，UI 字重 500，正文字重 400**：清晰的三级体系，每种字重都有严格的分工。
+- **带正字间距的 Uppercase 标签**：12px 的 Uppercase 搭配 1.08px 字间距，构建了系统化的视觉引导模式。
+
+## 4. 组件样式
+
+### 按钮
+
+**Primary (Transparent with Hover Animation)**
+- 背景：transparent (`rgba(239, 241, 243, 0)`)
+- 文本：`#000000`
+- Padding：6.4px 12.8px
+- 边框：none (或 `1px solid #717989` 用于描边变体)
+- Hover：背景转变为 Swatch 色彩 (例如 `#434346`)，文本变白，`rotateZ(-8deg)`，`translateY(-80%)`，硬阴影 `rgb(0,0,0) -7px 7px`
+- 焦点：`rgb(20, 110, 245) solid 2px` 轮廓
+
+**White Solid**
+- 背景：`#ffffff`
+- 文本：`#000000`
+- Padding：6.4px
+- Hover：oat-200 Swatch 色彩，动画旋转 + 阴影
+- 用途：彩色区块上的主要 CTA
+
+**Ghost Outlined**
+- 背景：transparent
+- 文本：`#000000`
+- Padding：8px
+- 边框：`1px solid #717989`
+- Radius：4px
+- Hover：dragonfruit Swatch 色彩，白色文本，动画旋转
+
+### 卡片与容器
+- 背景：奶油色画布上的 `#ffffff`
+- 边框：`1px solid #dad4c8` (暖色 oat) 或 `1px dashed #dad4c8`
+- Radius：12px (标准卡片)、24px (feature 卡片/图片)、40px (区块容器/页脚)
+- 阴影：`rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`
+- 使用 Swatch 调色板 (matcha, slushie, ube, lemon) 打造色彩丰富的区块背景
+
+### 输入框与表单
+- 文本：`#000000`
+- 边框：`1px solid #717989`
+- Radius：4px
+- 焦点：`rgb(20, 110, 245) solid 2px` 轮廓
+
+### 导航
+- 奶油色背景上的置顶导航
+- 导航链接使用 Roobert 15px，字重 500
+- Clay Logo 左对齐
+- CTA 按钮右对齐，使用胶囊形 Radius
+- 底部边框：`1px solid #dad4c8`
+- 移动端：在 767px 折叠为汉堡菜单
+
+### 图片处理
+- 产品截图放置在带有 Oat Border 的白色卡片中
+- 使用 Swatch 背景色的色彩丰富的插画区块
+- 图片应用 8px–24px Radius
+- 全宽色彩区块背景
+
+### 特色组件
+
+**Swatch 色彩区块**
+- 具有 Swatch 色彩背景 (matcha 绿、slushie 青、ube 紫、lemon 金) 的全宽区块
+- 暗色 Swatch 上使用白色文本，浅色 Swatch 上使用黑色文本
+- 每个区块通过其专属颜色讲述不同的产品故事
+
+**俏皮的 Hover 按钮**
+- Hover 时旋转 -8 度并向上位移
+- 使用硬边缘偏移阴影 (`-7px 7px`) 而非柔和模糊阴影
+- 背景过渡为对比鲜明的 Swatch 色彩
+- 营造出充满物理质感和玩具般的交互体验
+
+**虚线边框元素**
+- 将虚线边框 (`1px dashed #dad4c8`) 与实线边框混合使用
+- 用于次级容器和装饰性元素
+- 增添手绘与工艺般的质感
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 比例：1px, 2px, 4px, 6.4px, 8px, 12px, 12.8px, 16px, 18px, 20px, 24px
+
+### 网格与容器
+- 内容最大宽度居中
+- 特性 区块在白色卡片和色彩丰富的 Swatch 背景之间交替
+- 卡片网格：桌面端为 2–3 列
+- 全宽色彩区块打破网格限制
+- 页脚采用大圆角 40px 容器
+
+### 留白哲学
+- **温暖大气的呼吸感**：奶油色背景在内容块之间提供了温暖的休止符。间距慷慨但不显空洞 —— 它让人感觉充满吸引力，就像一张布置精美的餐桌。
+- **作为空间节奏的色彩**：交替的 Swatch 色彩区块通过色调而非仅仅是留白来创造视觉节奏。每个色彩区块都是其独立的“房间”。
+- **卡片内的高密度工艺感**：在卡片内部，内容紧凑且井然有序，与外部的大间距形成对比。
+
+### Border Radius 比例
+- Sharp (4px)：Ghost 按钮、输入框
+- Standard (8px)：小卡片、图片、链接
+- Badge (11px)：Tag Badge
+- Card (12px)：标准卡片、按钮
+- 特性 (24px)：特性 卡片、图片、面板
+- Section (40px)：大型区块、页脚、容器
+- Pill (1584px)：CTA、胶囊形按钮
+
+## 6. 深度与层级
+
+| 级别 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影，奶油色画布 | 页面背景 |
+| Clay Shadow (Level 1) | `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px inset, rgba(0,0,0,0.05) 0px -0.5px` | 卡片、按钮 —— 带 inset 高光的多层阴影 |
+| Hover Hard (Level 2) | `rgb(0,0,0) -7px 7px` | Hover 状态 —— 俏皮的硬边缘偏移阴影 |
+| Focus (Level 3) | `rgb(20, 110, 245) solid 2px` | 键盘焦点环 |
+
+**阴影哲学**：Clay 的阴影系统独特地分为三层：向下投射的阴影（`0px 1px 1px`）、向上嵌入的高光（`0px -1px 1px inset`）和微妙的边缘（`0px -0.5px 1px`）。这创造出一种“压入粘土”般的质感，元素感觉既是凸起的又是嵌入的 —— 就像内容被刻印在泥板表面。其 Hover 硬阴影（`-7px 7px`）刻意呈现出复古图形风格，呼应了印刷时代的投影效果，并增添了物理层面的趣味性。
+
+### 装饰性深度
+- 全宽的 Swatch 色彩区块通过色彩对比创造了极具戏剧性的深度
+- 虚线边框在实线边框之外增加了视觉纹理
+- 产品插画采用温暖、有机的艺术风格
+
+## 7. 宜与忌
+
+### 宜
+- 使用温暖的奶油色（`#faf9f7`）作为页面背景 —— 温暖感是其核心身份
+- 在 Roobert 标题上应用全部 5 套 OpenType stylistic sets：`"ss01", "ss03", "ss10", "ss11", "ss12"`
+- 使用命名的 Swatch 调色板（Matcha、Slushie、Lemon、Ube、Pomegranate、Blueberry）作为区块背景
+- 应用俏皮的 hover 动画：`rotateZ(-8deg)`、`translateY(-80%)`，硬阴影 `-7px 7px`
+- 使用温暖的 Oat Border（`#dad4c8`） —— 不要用中性灰
+- 混合使用实线和虚线边框以增加视觉多样性
+- 使用大圆角：卡片 24px，区块 40px
+- 标题严格使用字重 600，UI 使用 500，正文使用 400
+
+### 忌
+- 不要使用冷灰色背景 —— 温暖的奶油色（`#faf9f7`）是不可动摇的底线
+- 不要使用中性灰边框（`#ccc`、`#ddd`） —— 必须始终使用温暖的 Oat 色调
+- 不要在同一区块中混合使用超过 2 种 Swatch 颜色
+- 不要省略 OpenType stylistic sets —— 它们决定了 Roobert 的个性
+- 不要使用微妙的 hover 效果 —— 旋转 + 硬阴影是其标志性交互
+- 不要在特性卡片上使用小圆角（<12px） —— 大圆角是结构设计的一部分
+- 不要使用标准阴影（基于模糊的阴影） —— Clay 采用的是硬边缘偏移和多层 inset 效果
+- 不要忘记带 1.08px 字间距的 Uppercase 标签 —— 它们是视觉引导系统
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Mobile Small | <479px | 单列布局，紧凑 padding |
+| Mobile | 479–767px | 标准移动端，堆叠式布局 |
+| Tablet | 768–991px | 2 列网格，压缩导航 |
+| Desktop | 992px+ | 完整布局，3 列网格，扩展区块 |
+
+### 触摸目标
+- 按钮：至少 6.4px + 12.8px 的 padding 以提供充足的触摸区域
+- 导航链接：15px 字体搭配宽松间距
+- 移动端：全宽按钮以便于点击
+
+### 折叠策略
+- Hero 区：80px → 60px → 更小的 Display 文本
+- 导航：横向排列 → 在 767px 转换为汉堡菜单
+- 特性 区块：多列 → 堆叠排列
+- 色彩区块：保持全宽但压缩 padding
+- 卡片网格：3 列 → 2 列 → 单列
+
+### 图片行为
+- 产品截图按比例缩放
+- 色彩区块的插画适应视口宽度
+- 圆角在各断点下保持不变
+
+## 9. Agent 提示词指南
+
+### 快速色彩参考
+- 背景：Warm Cream (`#faf9f7`)
+- 文本：Clay Black (`#000000`)
+- 次要文本：Warm Silver (`#9f9b93`)
+- 边框：Oat Border (`#dad4c8`)
+- 绿色点缀：Matcha 600 (`#078a52`)
+- 青色点缀：Slushie 500 (`#3bd3fd`)
+- 金色点缀：Lemon 500 (`#fbbd41`)
+- 紫色点缀：Ube 800 (`#43089f`)
+- 粉色点缀：Pomegranate 400 (`#fc7981`)
+
+### 示例 Component Prompts
+- "在温暖的奶油色（#faf9f7）背景上创建一个 Hero 区。标题采用 80px Roobert，字重 600，行高 1.00，字间距 -3.2px，OpenType 'ss01 ss03 ss10 ss11 ss12'，黑色文本。副标题采用 20px，字重 400，行高 1.40，#9f9b93 文本。两个按钮：白色实心胶囊形（12px Radius）和 Ghost 描边型（4px Radius，1px solid #717989）。"
+- "设计一个色彩丰富的区块，背景为 Matcha 800 (#02492a)。标题采用 44px Roobert，字重 600，字间距 -1.32px，白色文本。正文采用 18px，字重 400，行高 1.60，#84e7a5 文本。带有 Oat Border (#dad4c8) 和 24px Radius 的白色 inset 卡片。"
+- "构建一个带有俏皮 Hover 效果的按钮：默认背景透明，黑色文本，16px Roobert，字重 500。Hover 时：背景 #434346，文本变白，transform rotateZ(-8deg) translateY(-80%)，硬阴影 rgb(0,0,0) -7px 7px。"
+- "创建一个卡片：白色背景，1px solid #dad4c8 边框，24px Radius。阴影：rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset。标题采用 32px Roobert，字重 600，字间距 -0.64px。"
+- "设计一个 Uppercase 标签：12px Roobert，字重 600，text-transform uppercase，字间距 1.08px，OpenType 'ss03 ss10 ss11 ss12'。"
+
+### 迭代指南
+1. 从温暖的奶油色（#faf9f7）开始 —— 绝不使用冷白色
+2. Swatch 色彩应用于整个区块，而不是微小的点缀 —— 大胆使用 matcha、slushie、ube
+3. 无处不在的 Oat Border（#dad4c8） —— 使用虚线变体作为装饰
+4. OpenType stylistic sets 是强制要求的 —— 它们让 Roobert 看起来才像 Roobert
+5. Hover 动画是标志性设计 —— 旋转 + 硬阴影，而不是微妙的淡入淡出
+6. 慷慨的 Radius：24px 卡片，40px 区块 —— 任何东西都不应该看起来锋利或充满企业气息
+7. 三种字重：600（标题）、500（UI）、400（正文） —— 角色严格划分

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

@@ -0,0 +1,294 @@
+# Design System: ClickHouse
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原始站点使用专有字体。对于自包含的 HTML 输出，请使用以下 CDN 替代字体：
+> - **Primary:** `Inter` | **Mono:** `JetBrains Mono`
+> - **Font stack (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **Mono stack (CSS):** `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 tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+ClickHouse 的界面是一个高性能的驾驶舱，在黑曜石般的纯黑底色上渲染出酸性黄绿色——这是一种在阅读任何文字之前就能呼喊出“速度”的设计。整个体验都沉浸在黑暗中：纯黑背景（`#000000`）搭配深炭灰色的卡片（`#414141` 边框），营造出一种终端级别的美感，其中唯一的色彩打断是标志性的霓虹黄绿色（`#faff69`），它像深色控制台上的荧光笔一样划过 CTA、边框和高光时刻。
+
+排版极具视觉冲击力——使用 Inter 字体，字重为 900（Black），96px 的英雄标题创造出仿佛拥有物理质量般的文本块。这个“面向 AI 的数据库”网站通过视觉重量来传达原始力量：厚重的字体、高对比度的霓虹点缀，以及以超大数字呈现的性能统计数据。ClickHouse 的设计没有任何微妙之处，而这正是其核心所在——它映射了产品对于极致速度和性能的承诺。
+
+让 ClickHouse 独具特色的是近乎全黑的画布与霓虹黄绿色点缀之间令人震撼的张力。这种颜色组合（`#faff69` 搭配 `#000000`）创造了所有科技品牌中对比度最高的搭配之一，让每一个 CTA 按钮、每一张高亮卡片以及每一道强调边框都令人无法忽视。辅助色方面，使用森林绿（`#166534`）作为次要 CTA，在不与霓虹色争夺视觉焦点的同时，为操作层级增添了深度。
+
+**核心特征：**
+- 纯黑画布 (#000000) 搭配霓虹黄绿色 (#faff69) 点缀——极致对比度
+- 极重的展示型排版：Inter 字体，字重 900 (Black)，字号最高达 96px
+- 深炭灰色卡片系统，使用 80% 不透明度的 #414141 边框
+- 森林绿 (#166534) 次要 CTA 按钮
+- 以超大展示型数字呈现的性能统计数据
+- 采用全大写并增加字间距 (1.4px) 的导航结构标签
+- 激活/按下状态时，文字转变为淡黄色 (#f4f692)
+- 所有链接在悬停时均显示为霓虹黄绿色——统一的交互信号
+- 部分元素采用内阴影，营造出“压入表面”的深度感
+
+## 2. 调色板与角色
+
+### Primary
+- **Neon Volt** (`#faff69`)：标志性的品牌颜色——一种鲜艳的酸性黄绿色，是黑色画布上唯一的色彩点缀。用于主要 CTA、强调边框、链接悬停效果和高光时刻。
+- **Forest Green** (`#166534`)：次要 CTA 颜色——一种深邃、饱满的绿色，用于“Get Started”以及需要与霓虹色区分开的主要操作按钮。
+- **Dark Forest** (`#14572f`)：较深的绿色变体，用于边框和次要强调。
+
+### Secondary & Accent
+- **Pale Yellow** (`#f4f692`)：激活/按下状态的文字颜色——一种比 Neon Volt 更柔和、更低调的版本，用于状态反馈。
+- **Border Olive** (`#4f5100`)：一种深橄榄黄色，用于幽灵按钮的边框——霓虹色的低调兄弟。
+- **Olive Dark** (`#161600`)：最深的带霓虹色调的颜色，用于细微的品牌文字。
+
+### Surface & Background
+- **Pure Black** (`#000000`)：页面主背景——绝对纯黑，以实现最大对比度。
+- **Near Black** (`#141414`)：按钮背景和略微凸起的深色表面。
+- **Charcoal** (`#414141`)：80% 不透明度下的主要边框颜色——用于限制卡片和容器边界的核心颜色。
+- **Deep Charcoal** (`#343434`)：较深的边框变体，用于细微的分隔线。
+- **Hover Gray** (`#3a3a3a`)：按钮悬停状态的背景——比 Near Black 略浅。
+
+### Neutrals & Text
+- **Pure White** (`#ffffff`)：深色表面上的主要文本。
+- **Silver** (`#a0a0a0`)：次要正文和柔和的内容文本。
+- **Mid Gray** (`#585858` at 28%)：用于深度效果的细微灰色叠加层。
+- **Border Gray** (`#e5e7eb`)：浅色边框变体（仅在极少数浅色环境中使用）。
+
+### Gradient System
+- **传统意义上没有渐变。** ClickHouse 使用纯色块和高对比度边框。这里的“渐变”就是对比度本身——纯黑背景上的霓虹黄绿色创造出一种视觉冲击力，如果使用真正的渐变反而会削弱这种效果。
+
+## 3. Typography 规则
+
+### Font Family
+- **Primary**: `Inter` (针对 Next.js 优化的变体 `__Inter_d1b8ee`)
+- **Secondary Display**: `Basier` (`__basier_a58b65`)，备用字体为：`Arial, Helvetica`
+- **Code**: `Inconsolata` (`__Inconsolata_a25f62`)
+
+### Hierarchy
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Mega | Inter | 96px (6rem) | 900 | 1.00 (tight) | normal | 极具视觉冲击力，极重 |
+| Display / Hero | Inter | 72px (4.5rem) | 700 | 1.00 (tight) | normal | 板块主标题 |
+| Feature Heading | Basier | 36px (2.25rem) | 600 | 1.30 (tight) | normal | 特性区域锚点 |
+| Sub-heading | Inter / Basier | 24px (1.5rem) | 600–700 | 1.17–1.38 | normal | 卡片标题 |
+| Feature Title | Inter / Basier | 20px (1.25rem) | 600–700 | 1.40 | normal | 小特性标题 |
+| Body Large | Inter | 18px (1.13rem) | 400–700 | 1.56 | normal | 介绍段落、按钮文字 |
+| Body / Button | Inter | 16px (1rem) | 400–700 | 1.50 | normal | 标准正文、导航、按钮 |
+| Caption | Inter | 14px (0.88rem) | 400–700 | 1.43 | normal | 元数据、描述、链接 |
+| Uppercase Label | Inter | 14px (0.88rem) | 600 | 1.43 | 1.4px | 板块引导词，宽字间距 |
+| Code | Inconsolata | 16px (1rem) | 600 | 1.50 | normal | 代码块、命令 |
+| Small | Inter | 12px (0.75rem) | 500 | 1.33 | normal | 最小号文字 |
+| Micro | Inter | 11.2px (0.7rem) | 500 | 1.79 (relaxed) | normal | 标签、微型说明 |
+
+### Principles
+- **字重 900 是杀手锏**：展示型标题使用 Inter Black (900)——这是大多数网站从不使用的字重。结合 96px 的字号，这创造出一种具有物理实感、甚至堪称建筑般存在的文字。
+- **全字重光谱**：系统使用了 400、500、600、700 和 900——涵盖了整个范围。字重即层级。
+- **最大字间距的全大写**：部分区域的引导词使用 1.4px 的字间距——比大多数系统都要宽——创造出在密集深色背景中脱颖而出的醒目结构标签。
+- **双无衬线体**：Inter 负责展示和正文；Basier 负责字重为 600 的特性区域标题。这在“数据/性能”和“产品/特性”语境之间创造了微妙的个性转换。
+
+## 4. Component 样式
+
+### Buttons
+
+**Neon Primary**
+- Background: Neon Volt (`#faff69`)
+- Text: Near Black (`#151515`)
+- Padding: 0px 16px
+- Radius: sharp (4px)
+- Border: `1px solid #faff69`
+- Hover: background shifts to dark (`rgb(29, 29, 29)`), text stays
+- Active: text shifts to Pale Yellow (`#f4f692`)
+- 抢眼的 CTA——黑底霓虹色
+
+**Dark Solid**
+- Background: Near Black (`#141414`)
+- Text: Pure White (`#ffffff`)
+- Padding: 12px 16px
+- Radius: 4px or 8px
+- Border: `1px solid #141414`
+- Hover: bg shifts to Hover Gray (`#3a3a3a`), text to 80% opacity
+- Active: text to Pale Yellow
+- 标准操作按钮
+
+**Forest Green**
+- Background: Forest Green (`#166534`)
+- Text: Pure White (`#ffffff`)
+- Padding: 12px 16px
+- Border: `1px solid #141414`
+- Hover: same dark shift
+- Active: Pale Yellow text
+- “Get Started” / 主要转化按钮
+
+**Ghost / Outlined**
+- Background: transparent
+- Text: Pure White (`#ffffff`)
+- Padding: 0px 32px
+- Radius: 4px
+- Border: `1px solid #4f5100` (olive-tinted)
+- Hover: dark bg shift
+- Active: Pale Yellow text
+- 带有霓虹色调边框的次要操作
+
+**Pill Toggle**
+- Background: transparent
+- Radius: pill (9999px)
+- 用于切换/开关元素
+
+### Cards & Containers
+- Background: transparent or Near Black
+- Border: `1px solid rgba(65, 65, 65, 0.8)` — 标志性的炭灰色边界
+- Radius: 4px (small elements) or 8px (cards, containers)
+- Shadow Level 1: subtle (`rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px`)
+- Shadow Level 2: medium (`rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px`)
+- Shadow Level 3: inset (`rgba(0,0,0,0.06) 0px 4px 4px, rgba(0,0,0,0.14) 0px 4px 25px inset`) — the "pressed" effect
+- Neon-highlighted cards: selected/active cards get neon yellow-green border or accent
+
+### Navigation
+- 黑色背景上的深色导航栏
+- Logo: ClickHouse wordmark + icon in yellow/neon
+- Links: white text, hover to Neon Volt (#faff69)
+- CTA: Neon Volt button or Forest Green button
+- 分类使用全大写标签
+
+### Distinctive Components
+
+**Performance Stats**
+- 超大号数字 (72px+, weight 700–900)
+- 下方附带简短描述
+- 关键指标使用高对比度霓虹色点缀
+- 性能主张的主要视觉证明
+
+**Neon-Highlighted Card**
+- 采用霓虹黄绿色边框高亮的标准深色卡片
+- 营造出“选中”或“特色”的视觉效果
+- 强调色边框使卡片在深色画布中脱颖而出
+
+**Code Blocks**
+- 深色表面，Inconsolata 字体，字重 600
+- 霓虹色和白色的语法高亮
+- 终端般的美学设计
+
+**Trust Bar**
+- 深色背景上的公司 Logo
+- 单色/白色 Logo 处理
+- 水平布局
+
+## 5. Layout 原则
+
+### Spacing System
+- Base unit: 8px
+- Scale: 2px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 25px, 32px, 40px, 44px, 48px, 64px
+- Button padding: 12px 16px (standard), 0px 16px (compact), 0px 32px (wide ghost)
+- Section vertical spacing: generous (48–64px)
+
+### Grid & Container
+- Max container width: up to 2200px (extra-wide) with responsive scaling
+- Hero: full-width dark with massive typography
+- 特性 sections: multi-column card grids with dark borders
+- Stats: horizontal metric bar
+- Full-dark page — no light sections
+
+### Whitespace Philosophy
+- **以黑暗虚空为画布**：纯黑的背景提供了无限的深度——元素悬浮在黑暗中。
+- **高密度信息**：特性卡片和数据统计中塞满了数据，反映了该数据库产品对性能的关注。
+- **以霓虹高光作为视觉引导**：黄绿色点缀就像跑道灯一样，引导视线穿梭于深色界面中。
+
+### Border Radius Scale
+- Sharp (4px): Buttons, badges, small elements, code blocks
+- Comfortable (8px): Cards, containers, dividers
+- Pill (9999px): Toggle buttons, status indicators
+
+## 6. 深度与层级
+
+| 等级 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Black background, text blocks |
+| Bordered (Level 1) | `1px solid rgba(65,65,65,0.8)` | Standard cards, containers |
+| Subtle (Level 2) | `0px 1px 3px rgba(0,0,0,0.1)` | Subtle card lift |
+| Elevated (Level 3) | `0px 10px 15px -3px rgba(0,0,0,0.1)` | Feature cards, hover states |
+| Pressed/Inset (Level 4) | `0px 4px 25px rgba(0,0,0,0.14) inset` | Active/pressed elements — "sunk into the surface" |
+| Neon Highlight (Level 5) | Neon Volt border (`#faff69`) | Featured/selected cards, maximum emphasis |
+
+**阴影哲学**：ClickHouse 在黑色画布上使用阴影，而在那里它们几乎不可见——它们的存在更多是为了营造微妙的立体感，而不是为了明显的层级提升。最具特色的深度机制是**内阴影**（Level 4），它创造了 ClickHouse 独有的“压入表面”效果。霓虹边框高亮（Level 5）则是吸引注意力的主要深度机制。
+
+## 7. 宜与忌
+
+### 宜
+- 将 Neon Volt (#faff69) 作为唯一的色彩点缀——它必须在纯黑背景上凸显出来
+- 对 hero 展示型文本使用字重为 900 的 Inter——极端的字重本身就是个性所在
+- 保持一切都在纯黑 (#000000) 之上——绝不要使用深灰色作为页面背景
+- 对所有卡片边界使用炭灰色边框 (rgba(65,65,65,0.8))
+- 对主要 CTA 按钮应用 Forest Green (#166534)——为了操作层级与霓虹色区分开
+- 将性能统计数据表现为超大的展示型数字——这是核心的视觉论点
+- 为区域标签使用全大写并配合宽字间距 (1.4px)
+- 对激活/按下状态的文本应用 Pale Yellow (#f4f692)
+- 链接悬停时始终转变为 Neon Volt——提供统一的交互反馈
+
+### 忌
+- 不要引入额外的颜色——调色板严格限制在黑色、霓虹色、绿色和灰色
+- 不要将霓虹色用作背景填充——它仅用于点缀和边框（CTA 按钮除外）
+- 不要将展示型字体的字重降到 700 以下——厚重的字重是其个性的核心
+- 不要在任何地方使用浅色/白色背景——整个体验都是基于深色的
+- 不要将圆角设置得超过 8px——锋利的几何感反映了数据库的精准性
+- 不要在黑色上使用柔和/漫反射的阴影——它们是看不见的。应使用基于边框的深度
+- 不要在激活状态下省略内阴影——“按压”效果是其特色所在
+- 不要使用偏暖的中性色——所有的灰色都必须是绝对中性的
+
+## 8. 响应式行为
+
+### Breakpoints
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Mobile | <640px | 单列，堆叠卡片 |
+| Small Tablet | 640–768px | 轻微调整 |
+| Tablet | 768–1024px | 双列网格 |
+| Desktop | 1024–1280px | 标准布局 |
+| Large Desktop | 1280–1536px | 扩展内容 |
+| Ultra-wide | 1536–2200px | 最大容器宽度 |
+
+### Touch Targets
+- 按钮至少具备 12px 16px padding
+- 卡片表面可作为触摸目标
+- 适当的导航链接间距
+
+### Collapsing Strategy
+- **Hero 文本**: 96px → 72px → 48px → 36px
+- **特性 grids**: Multi-column → 2 → 1 column
+- **Stats**: Horizontal → stacked
+- **Navigation**: Full → hamburger
+
+### Image Behavior
+- 产品截图保持长宽比
+- 狭窄屏幕上的代码块使用水平滚动
+- 所有图片均位于深色背景上
+
+## 9. Agent 提示词指南
+
+### Quick Color Reference
+- Brand Accent: "Neon Volt (#faff69)"
+- Page Background: "Pure Black (#000000)"
+- CTA Green: "Forest Green (#166534)"
+- Card Border: "Charcoal (rgba(65,65,65,0.8))"
+- Primary Text: "Pure White (#ffffff)"
+- Secondary Text: "Silver (#a0a0a0)"
+- Active State: "Pale Yellow (#f4f692)"
+- Button Surface: "Near Black (#141414)"
+
+### 示例 Component Prompts
+- "Create a hero section on Pure Black (#000000) with a massive headline at 96px Inter weight 900, line-height 1.0. Pure White text. Add a Neon Volt (#faff69) CTA button (dark text, 4px radius, 0px 16px padding) and a ghost button (transparent, 1px solid #4f5100 border)."
+- "Design a feature card on black with 1px solid rgba(65,65,65,0.8) border and 8px radius. Title at 24px Inter weight 700, body at 16px in Silver (#a0a0a0). Add a neon-highlighted variant with 1px solid #faff69 border."
+- "Build a performance stats bar: large numbers at 72px Inter weight 700 in Pure White. Brief descriptions at 14px in Silver. On black background."
+- "Create a Forest Green (#166534) CTA button: white text, 12px 16px padding, 4px radius, 1px solid #141414 border. Hover: bg shifts to #3a3a3a, text to 80% opacity."
+- "Design an uppercase section label: 14px Inter weight 600, letter-spacing 1.4px, uppercase. Silver (#a0a0a0) text on black background."
+
+### Iteration Guide
+1. 将所有内容保持在纯黑背景上——不要使用深灰色替代方案
+2. Neon Volt (#faff69) 仅用于点缀和 CTA——绝不要用作大面积背景
+3. Hero 使用字重 900，标题使用 700，标签使用 600，正文使用 400-500
+4. 激活状态使用 Pale Yellow (#f4f692)——不仅仅是改变不透明度
+5. 所有链接在悬停时变为 Neon Volt——提供一致的交互反馈
+6. 炭灰色边框 (rgba(65,65,65,0.8)) 是主要的深度机制