@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,105 @@
+# 设计系统：Webflow
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原始网站使用专有字体。对于独立的 HTML 输出，请使用以下 CDN 替代字体：
+> - **主字体：** `Inter` | **等宽字体：** `system monospace stack`
+> - **字体栈 (CSS)：** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **等宽字体栈 (CSS)：** `font-family: 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&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` skill（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Webflow 网站是一个视觉丰富、以工具为导向的平台，通过纯净的白色表面、标志性的 Webflow 蓝（`#146ef5`）以及丰富的辅助调色板（紫色、粉色、绿色、橙色、黄色、红色），传达出“无代码设计”的理念。定制的 WF Visual Sans Variable 字体创建了一套自信、精准的排版系统，标题字重为 600，正文字重为 500。
+
+**关键特征：**
+- 白色画布配以接近纯黑（`#080808`）的文本
+- Webflow 蓝（`#146ef5`）作为主要品牌与交互色
+- WF Visual Sans Variable — 字重 500–600 的自定义可变字体
+- 丰富的辅助调色板：紫色 `#7a3dff`、粉色 `#ed52cb`、绿色 `#00d722`、橙色 `#ff6b00`、黄色 `#ffae13`、红色 `#ee1d36`
+- 保守的 4px–8px border-radius — 锐利，不显圆润
+- 多层阴影堆栈（5 层级联阴影）
+- 大写标签：10px–15px，字重 500–600，宽字间距（0.6px–1.5px）
+- 按钮上的 translate(6px) 悬停动画
+
+## 2. 调色板与角色
+
+### 主色调
+- **接近纯黑** (`#080808`)：主要文本
+- **Webflow 蓝** (`#146ef5`)：`--_color---primary--webflow-blue`，主要 CTA 与链接
+- **Blue 400** (`#3b89ff`)：`--_color---primary--blue-400`，较浅的交互蓝
+- **Blue 300** (`#006acc`)：`--_color---blue-300`，较深的蓝色变体
+- **Button Hover Blue** (`#0055d4`)：`--mkto-embed-color-button-hover`
+
+### 辅助强调色
+- **紫色** (`#7a3dff`)：`--_color---secondary--purple`
+- **粉色** (`#ed52cb`)：`--_color---secondary--pink`
+- **绿色** (`#00d722`)：`--_color---secondary--green`
+- **橙色** (`#ff6b00`)：`--_color---secondary--orange`
+- **黄色** (`#ffae13`)：`--_color---secondary--yellow`
+- **红色** (`#ee1d36`)：`--_color---secondary--red`
+
+### 中性色
+- **Gray 800** (`#222222`)：深色辅助文本
+- **Gray 700** (`#363636`)：中等文本
+- **Gray 300** (`#ababab`)：柔和文本，占位符
+- **Mid Gray** (`#5a5a5a`)：链接文本
+- **Border Gray** (`#d8d8d8`)：边框，分割线
+- **Border Hover** (`#898989`)：悬停边框
+
+### 阴影
+- **5 层级联**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`
+
+## 3. 排版规则
+
+### 字体：`WF Visual Sans Variable`，回退字体：`Arial`
+
+| 角色 | 字号 | 字重 | 行高 | 字间距 | 备注 |
+| ------ | ------ | -------- | ------------- | ---------------- | ------- |
+| Display Hero | 80px | 600 | 1.04 | -0.8px |  |
+| Section Heading | 56px | 600 | 1.04 | normal |  |
+| Sub-heading | 32px | 500 | 1.30 | normal |  |
+| Feature Title | 24px | 500–600 | 1.30 | normal |  |
+| Body | 20px | 400–500 | 1.40–1.50 | normal |  |
+| Body Standard | 16px | 400–500 | 1.60 | -0.16px |  |
+| Button | 16px | 500 | 1.60 | -0.16px |  |
+| Uppercase Label | 15px | 500 | 1.30 | 1.5px | uppercase |
+| Caption | 14px | 400–500 | 1.40–1.60 | normal |  |
+| Badge Uppercase | 12.8px | 550 | 1.20 | normal | uppercase |
+| Micro Uppercase | 10px | 500–600 | 1.30 | 1px | uppercase |
+| Code: Inconsolata（配套等宽字体）
+
+## 4. 组件样式
+
+### 按钮
+- 透明：文本 `#080808`，悬停时 translate(6px)
+- 白色圆圈：50% radius，白色背景
+- 蓝色徽章：`#146ef5` 背景，4px radius，字重 550
+
+### 卡片：`1px solid #d8d8d8`，4px–8px radius
+### 徽章：10% 不透明度的浅蓝色背景，4px radius
+
+## 5. 布局
+- 间距：分数比例（1px, 2.4px, 3.2px, 4px, 5.6px, 6px, 7.2px, 8px, 9.6px, 12px, 16px, 24px）
+- 圆角：2px, 4px, 8px, 50% — 保守、锐利
+- 断点：479px, 768px, 992px
+
+## 6. 深度：5 层级联阴影系统
+
+## 7. 宜与忌
+- 宜：使用字重为 500–600 的 WF Visual Sans Variable。CTA 使用蓝色 (#146ef5)。使用 4px radius。使用 translate(6px) 悬停效果。
+- 忌：功能性元素的圆角超过 8px。在主要 CTA 上使用辅助色。
+
+## 8. 响应式：479px, 768px, 992px
+
+## 9. Agent 提示词指南
+- 文本：接近纯黑（`#080808`）
+- CTA：Webflow 蓝（`#146ef5`）
+- 背景：白色（`#ffffff`）
+- 边框：`#d8d8d8`
+- 辅助色：紫色 `#7a3dff`，粉色 `#ed52cb`，绿色 `#00d722`

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

@@ -0,0 +1,186 @@
+# Design System: Wise
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原始站点使用了专有字体。对于自包含的 HTML 输出，请使用以下 CDN 替代字体：
+> - **主字体:** `Inter` | **等宽字体:** `system monospace stack`
+> - **字体堆栈 (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **等宽字体堆栈 (CSS):** `font-family: 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&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` skill（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Wise 的网站是一个大胆且充满自信的金融科技平台，通过巨大的排版和独特的柠檬绿点缀色来传达“无国界理财”的理念。该设计以温暖的米白色为画布，搭配接近黑色的文字（`#0e0f0c`）和标志性的 Wise Green（`#9fe870`）——这是一种清新、明亮的柠檬色，让人感觉充满活力与乐观，完全不同于传统银行业的企业蓝。
+
+排版使用 Wise Sans —— 这是一种专有字体，用于展示标题时采用极高的 900 (black) 字重，行高极其紧凑，仅为 0.85，并开启了 OpenType `"calt"`（上下文替代字形）。在 126px 的字号下，文字显得非常密集，让人感觉就像是一张抗议标语——大胆、紧迫且不容忽视。Inter 作为正文字体，默认使用 600 字重以示强调，营造出始终如一的自信语调。
+
+Wise 的独特之处在于其绿、白、黑的材质调色板。柠檬绿（`#9fe870`）出现在按钮上并搭配深绿色文字（`#163300`），创造出一种灵感源自自然、令人倍感清新的 CTA。Hover 状态使用 `scale(1.05)` 放大效果而非颜色变化——按钮在交互时会物理放大。Border-radius 系统在按钮上使用 9999px（药丸形），在卡片上使用 30px–40px，而阴影系统极其简约——仅使用 `rgba(14,15,12,0.12) 0px 0px 0px 1px` 的环形阴影。
+
+**关键特征:**
+- Wise Sans 900 字重，0.85 行高 —— 广告牌级别的粗体标题
+- 柠檬绿（`#9fe870`）点缀色搭配深绿色文字（`#163300`） —— 灵感源自自然的金融科技
+- Inter 正文字体默认 600 字重 —— 自信，不显单薄
+- 近黑色（`#0e0f0c`）主色调，带有温暖的绿色底色
+- Scale(1.05) hover 动画 —— 按钮产生物理放大效果
+- 所有文本启用 OpenType `"calt"`
+- 药丸形按钮 (9999px) 和大圆角卡片 (30px–40px)
+- 语义化颜色系统，配备全面的状态管理
+
+## 2. 调色板与角色
+
+### 品牌主色
+- **近黑色** (`#0e0f0c`): 主要文本，深色区域背景
+- **Wise Green** (`#9fe870`): 主要 CTA 按钮，品牌点缀色
+- **深绿色** (`#163300`): 绿色按钮上的文字，深绿色点缀
+- **浅薄荷色** (`#e2f6d5`): 柔和的绿色表面，徽章背景
+- **柔和绿** (`#cdffad`): `--color-interactive-contrast-hover`, hover 点缀色
+
+### 语义化颜色
+- **积极绿** (`#054d28`): `--color-sentiment-positive-primary`, 成功
+- **危险红** (`#d03238`): `--color-interactive-negative-hover`, 错误/破坏性操作
+- **警告黄** (`#ffd11a`): `--color-sentiment-warning-hover`, 警告
+- **背景青色** (`rgba(56,200,255,0.10)`): `--color-background-accent`, 信息色调
+- **亮橙色** (`#ffc091`): `--color-bright-orange`, 暖色调点缀
+
+### 中性色
+- **暖深色** (`#454745`): 次要文本，边框
+- **灰色** (`#868685`): 柔和文本，第三级元素
+- **浅色表面** (`#e8ebe6`): 带有微妙绿色色调的浅色表面
+
+## 3. 排版规则
+
+### 字体系列
+- **Display**: `Wise Sans`, fallback: `Inter` — 所有文本开启 OpenType `"calt"`
+- **正文 / UI**: `Inter`, fallbacks: `Helvetica, Arial`
+
+### 层级
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+| ------ | ------ | ------ | -------- | ------------- | ---------------- | ------- |
+| Display Mega | Wise Sans | 126px (7.88rem) | 900 | 0.85 (超紧凑) | normal | `"calt"` |
+| Display Hero | Wise Sans | 96px (6.00rem) | 900 | 0.85 | normal | `"calt"` |
+| Section Heading | Wise Sans | 64px (4.00rem) | 900 | 0.85 | normal | `"calt"` |
+| Sub-heading | Wise Sans | 40px (2.50rem) | 900 | 0.85 | normal | `"calt"` |
+| Alt Heading | Inter | 78px (4.88rem) | 600 | 1.10 (紧凑) | -2.34px | `"calt"` |
+| Card Title | Inter | 26px (1.62rem) | 600 | 1.23 (紧凑) | -0.39px | `"calt"` |
+| Feature Title | Inter | 22px (1.38rem) | 600 | 1.25 (紧凑) | -0.396px | `"calt"` |
+| Body | Inter | 18px (1.13rem) | 400 | 1.44 | 0.18px | `"calt"` |
+| Body Semibold | Inter | 18px (1.13rem) | 600 | 1.44 | -0.108px | `"calt"` |
+| Button | Inter | 18px–22px | 600 | 1.00–1.44 | -0.108px | `"calt"` |
+| Caption | Inter | 14px (0.88rem) | 400–600 | 1.50–1.86 | -0.084px to -0.108px | `"calt"` |
+| Small | Inter | 12px (0.75rem) | 400–600 | 1.00–2.17 | -0.084px to -0.108px | `"calt"` |
+
+### 设计原则
+- **以 900 字重为特征**: Wise Sans Black (900) 专用于展示标题——这是所有分析系统中最重的字重。它创造出一种仿佛经过冲压、压制般，充满物理实体感的文字效果。
+- **0.85 行高**: 经过分析中最紧凑的展示行高。字母在垂直方向上产生重叠，营造出密集的、类似广告牌的文本块。
+- **无处不在的 "calt"**: 所有文本均启用上下文替代字形——无论是 Wise Sans 还是 Inter。
+- **正文默认 600 字重**: Inter Semibold 是标准的阅读字重——自信，不显单薄。
+
+## 4. 组件样式
+
+### 按钮
+
+**Primary Green Pill**
+- Background: `#9fe870` (Wise Green)
+- Text: `#163300` (Dark Green)
+- Padding: 5px 16px
+- Radius: 9999px
+- Hover: scale(1.05) — 按钮产生物理放大效果
+- Active: scale(0.95) — 按钮收缩
+- Focus: inset ring + outline
+
+**Secondary Subtle Pill**
+- Background: `rgba(22, 51, 0, 0.08)` (8% 透明度的深绿色)
+- Text: `#0e0f0c`
+- Padding: 8px 12px 8px 16px
+- Radius: 9999px
+- 相同的缩放 hover/active 行为
+
+### 卡片与容器
+- Radius: 16px (small), 30px (medium), 40px (large cards/tables)
+- Border: `1px solid rgba(14,15,12,0.12)` 或 `1px solid #9fe870` (绿色点缀)
+- Shadow: `rgba(14,15,12,0.12) 0px 0px 0px 1px` (环形阴影)
+
+### 导航
+- 带有绿色调的导航 hover: `rgba(211,242,192,0.4)`
+- 简洁的页眉搭配 Wise 字标
+- 右对齐的药丸形 CTA
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位: 8px
+- 比例: 1px, 2px, 3px, 4px, 5px, 8px, 10px, 11px, 12px, 16px, 18px, 19px, 20px, 22px, 24px
+
+### Border Radius 比例
+- Minimal (2px): 链接，输入框
+- Standard (10px): 组合框，输入框
+- Card (16px): 小卡片，按钮，单选框
+- Medium (20px): 链接，中等卡片
+- Large (30px): 功能卡片
+- Section (40px): 表格，大卡片
+- Mega (1000px): 展示元素
+- Pill (9999px): 所有按钮，图片
+- Circle (50%): 图标，徽章
+
+## 6. 深度与高度
+
+| 层级 | 处理方式 | 用途 |
+| ------- | ----------- | ----- |
+| Flat (Level 0) | 无阴影 | 默认值 |
+| Ring (Level 1) | `rgba(14,15,12,0.12) 0px 0px 0px 1px` | Card borders |
+| Inset (Level 2) | `rgb(134,134,133) 0px 0px 0px 1px inset` | Input focus |
+
+**阴影理念**: Wise 采用极简阴影——仅使用环形阴影。纵深感来自于中性画布上大胆的绿色点缀。
+
+## 7. 宜与忌
+
+### 宜
+- 在展示标题中使用 Wise Sans 900 字重 —— 极致的粗体即是品牌本身
+- 在 Wise Sans 展示文本中应用 0.85 行高 —— 超紧凑是有意为之的设计
+- 使用柠檬绿 (#9fe870) 作为主要 CTA 搭配深绿色 (#163300) 文字
+- 在按钮上应用 scale(1.05) hover 和 scale(0.95) active 效果
+- 在所有文本上启用 "calt"
+- 使用 Inter 600 字重作为正文默认样式
+
+### 忌
+- 不要为 Wise Sans 使用细字重 —— 只能用 900
+- 不要放宽展示文本的 0.85 行高 —— 密集感即是其特征
+- 不要将 Wise Green 作为大面积表面的背景 —— 它专用于按钮和点缀
+- 不要在按钮上跳过缩放动画
+- 不要使用传统阴影 —— 仅限环形阴影
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 主要变化 |
+| ------ | ------- | ------------- |
+| 移动端 | <576px | 单列 |
+| 平板 | 576–992px | 双列 |
+| 桌面端 | 992–1440px | 完整布局 |
+| 大屏 | >1440px | 拉宽 |
+
+## 9. Agent 提示词指南
+
+### 快速颜色参考
+- 文本: 近黑色 (`#0e0f0c`)
+- 背景: 白色 (`#ffffff` / off-white)
+- 点缀: Wise Green (`#9fe870`)
+- 按钮文本: 深绿色 (`#163300`)
+- 次要内容: 灰色 (`#868685`)
+
+### 示例 Component Prompts
+- "Create hero: white background. Headline at 96px Wise Sans weight 900, line-height 0.85, 'calt' enabled, #0e0f0c text. Green pill CTA (#9fe870, 9999px radius, 5px 16px padding, #163300 text). Hover: scale(1.05)."
+- "Build a card: 30px radius, 1px solid rgba(14,15,12,0.12). Title at 22px Inter weight 600, body at 18px weight 400."
+
+### 迭代指南
+1. Wise Sans 900 搭配 0.85 行高 —— 极致的字重即是品牌本身
+2. 柠檬绿仅用于按钮 —— 绿色背景上搭配深绿色文字
+3. 在所有交互元素上使用缩放动画 (1.05 hover, 0.95 active)
+4. 所有元素开启 "calt" —— 上下文替代字形是强制要求的
+5. 正文使用 Inter 600 —— 自信的阅读字重

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

@@ -0,0 +1,270 @@
+# Design System: xAI
+
+
+> **Hermes Agent — Implementation 说明**
+>
+> 原始站点使用了专有字体。对于独立的 HTML 输出，请使用这些 CDN 替代字体：
+> - **主字体:** `Geist Mono` | **等宽字体:** `Geist Mono`
+> - **字体堆栈 (CSS):** `font-family: 'Geist Mono', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **等宽字体堆栈 (CSS):** `font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` skill (cloudflared tunnel) 提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+xAI 的网站是深色优先、等宽字体驱动的粗野主义极简设计的典范——这种设计系统让人感觉是由深谙“克制才是极致复杂”的工程师所构建的。整个体验以近乎纯黑的背景 (`#1f2228`) 搭配纯白文本 (`#ffffff`) 为基础，营造出一种高对比度、受终端启发的外观，彰显了深厚的技术可信度。没有渐变，没有装饰性插图，也没有互相争夺注意力的彩色点缀。这是一个通过“留白”来沟通的网站。
+
+排版系统在两款精心挑选的字体之间进行了划分。`GeistMono`（Vercel 的等宽字体）用于处理极其夸张的 320px、字重 300 的展示级标题，同时也在按钮文本中作为大写字母使用，并增加了字间距 (1.4px)。`universalSans` 则以干净、几何无衬线字体的语感处理所有的正文和次级标题文本。将等宽字体用作展示字体是决定其美学基调的关键选择——它将 xAI 定位为不是一款消费级产品，而是基础设施，是由常年生活在终端中的人们所构建的事物。
+
+间距系统运行在以 8px 为基础网格的设定上，数值集中在较小的一端（4px、8px、24px、48px），反映出一种紧凑的、以信息为核心的布局哲学。圆角被控制在极小范围内——网站几乎不使用任何圆角，以保持锐利、充满建筑感的边缘。没有装饰性的阴影，没有渐变，也没有多层级的悬浮感。深度完全通过对比度和留白来传达。
+
+**关键特征：**
+- 纯深色主题：`#1f2228` 背景，`#ffffff` 文本——没有灰色的折中地带
+- 极致展示尺寸的 GeistMono (320px, 字重 300)——将等宽字体打造为奢华感
+- 大写等宽字体按钮，1.4px 字间距——充满技术感与威严感
+- universalSans 用于正文 (16px/1.5) 和标题 (30px/1.2)——干净的对比
+- 零装饰元素：无阴影，无渐变，无彩色点缀
+- 8px 间距网格，具有稀疏且深思熟虑的刻度
+- Heroicons SVG 图标系统——极简，实用
+- Tailwind CSS 结合任意值——实用优先的工程化方法
+
+## 2. 调色板与角色
+
+### 主色
+- **纯白** (`#ffffff`)：唯一的文本颜色、链接颜色以及所有前景元素。在 xAI 的系统中，白色不是背景——它是发声的喉舌。
+- **深色背景** (`#1f2228`)：画布。一种带有一点微弱蓝色底色（不是纯黑，也不是中性灰）的暖调近黑色。这种特定的色调能防止 `#000000` 带来的刺眼疲劳感，同时保持深邃的暗度。
+
+### 交互色
+- **White 默认** (`#ffffff`)：默认状态下的链接和交互元素颜色。
+- **White Muted** (`rgba(255, 255, 255, 0.5)`)：链接的 Hover 状态——刻意变暗而不是变亮，这种处理与众不同且极具辨识度。
+- **White Subtle** (`rgba(255, 255, 255, 0.2)`)：边框、分割线和微妙的表面处理。
+- **Ring Blue** (`rgb(59, 130, 246) / 0.5`)：Tailwind 默认的焦点环颜色 (`--tw-ring-color`)，用于键盘无障碍焦点状态。
+
+### 表面与边框
+- **Surface Elevated** (`rgba(255, 255, 255, 0.05)`)：微妙的卡片背景和 hover 表面——几乎不可见的抬升感。
+- **Surface Hover** (`rgba(255, 255, 255, 0.08)`)：交互容器在 hover 时稍微更明显的状态。
+- **Border 默认** (`rgba(255, 255, 255, 0.1)`)：卡片、分割线和容器的标准边框。
+- **Border Strong** (`rgba(255, 255, 255, 0.2)`)：用于激活状态和按钮轮廓的强调边框。
+
+### 功能色
+- **Text Primary** (`#ffffff`)：所有标题、正文、标签。
+- **Text Secondary** (`rgba(255, 255, 255, 0.7)`)：描述、说明文字、辅助文本。
+- **Text Tertiary** (`rgba(255, 255, 255, 0.5)`)：弱化标签、占位符文本、时间戳。
+- **Text Quaternary** (`rgba(255, 255, 255, 0.3)`)：禁用的文本、极其微弱的标注。
+
+## 3. 排版规则
+
+### 字体族
+- **展示 / 按钮**: `GeistMono`，备用字体: `ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New`
+- **正文 / 标题**: `universalSans`，备用字体: `universalSans Fallback`
+
+### 层级
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 大小写 | 备注 |
+|------|------|------|--------|-------------|----------------|-----------|-------|
+| Display Hero | GeistMono | 320px (20rem) | 300 | 1.50 | normal | none | 极致缩放，等宽字体的奢华感 |
+| Section Heading | universalSans | 30px (1.88rem) | 400 | 1.20 (紧凑) | normal | none | 干净的无衬线对比 |
+| Body | universalSans | 16px (1rem) | 400 | 1.50 | normal | none | 标准阅读文本 |
+| Button | GeistMono | 14px (0.88rem) | 400 | 1.43 | 1.4px | uppercase | 带字间距的等宽字体，充满威严 |
+| Label / Caption | universalSans | 14px (0.88rem) | 400 | 1.50 | normal | none | 辅助文本 |
+| Small / Meta | universalSans | 12px (0.75rem) | 400 | 1.50 | normal | none | 时间戳，脚注 |
+
+### 原则
+- **等宽字体作为展示字体**：320px 的 GeistMono 绝不是一种噱头——它是品牌的宣言。在极致缩放下，固定宽度的字符创造出一种任何比例字体都无法达到的、充满韵律感和建筑感的特质。
+- **大字号下的轻字重**：320px 标题使用 300 字重，防止了等宽字体在超大尺寸下显得沉重或粗暴。它传递出精确感，而不是压迫感。
+- **大写按钮**：所有按钮文本均为大写的 GeistMono，字间距 1.4px。这为交互元素创造了一种独特的技术感，几乎带有命令行的美学特征。
+- **用于阅读的无衬线字体**：16px/1.5 的 universalSans 为正文内容提供了出色的可读性，与等宽展示元素形成了干净的对比。
+- **双字体的清晰度**：系统精确地使用了两种具有明确角色的字体——等宽字体用于冲击力和交互，无衬线字体用于信息和阅读。没有重叠，没有歧义。
+
+## 4. 组件样式
+
+### 按钮
+
+**Primary (深底白字)**
+- 背景: `#ffffff`
+- 文本: `#1f2228`
+- 内边距: 12px 24px
+- 圆角: 0px (锐利直角)
+- 字体: GeistMono 14px weight 400, uppercase, letter-spacing 1.4px
+- Hover: `rgba(255, 255, 255, 0.9)` 背景
+- 用途: 主要 CTA ("TRY GROK", "GET STARTED")
+
+**Ghost / Outlined**
+- 背景: transparent
+- 文本: `#ffffff`
+- 内边距: 12px 24px
+- 圆角: 0px
+- 边框: `1px solid rgba(255, 255, 255, 0.2)`
+- 字体: GeistMono 14px weight 400, uppercase, letter-spacing 1.4px
+- Hover: `rgba(255, 255, 255, 0.05)` 背景
+- 用途: 次要操作 ("LEARN MORE", "VIEW API")
+
+**Text Link**
+- 背景: none
+- 文本: `#ffffff`
+- 字体: universalSans 16px weight 400
+- Hover: `rgba(255, 255, 255, 0.5)` -- hover 时变暗
+- 用途: 行内链接，导航项
+
+### 卡片与容器
+- 背景: `rgba(255, 255, 255, 0.03)` 或 transparent
+- 边框: `1px solid rgba(255, 255, 255, 0.1)`
+- 圆角: 0px (锐角) 或 4px (微圆)
+- 阴影: none -- xAI 不使用 box shadows
+- Hover: 边框过渡为 `rgba(255, 255, 255, 0.2)`
+
+### 导航
+- 匹配页面的深色背景 (`#1f2228`)
+- 品牌 logo 字体：白色文本，左对齐
+- 链接: universalSans 14px weight 400, `#ffffff` 文本
+- Hover: `rgba(255, 255, 255, 0.5)` 文本颜色
+- CTA: 白色主按钮，右对齐
+- 移动端: 汉堡菜单切换开关
+
+### 徽章 / 标签
+**Monospace Tag**
+- 背景: transparent
+- 文本: `#ffffff`
+- 内边距: 4px 8px
+- 边框: `1px solid rgba(255, 255, 255, 0.2)`
+- 圆角: 0px
+- 字体: GeistMono 12px uppercase, letter-spacing 1px
+
+### 输入框与表单
+- 背景: transparent 或 `rgba(255, 255, 255, 0.05)`
+- 边框: `1px solid rgba(255, 255, 255, 0.2)`
+- 圆角: 0px
+- 焦点状态: ring with `rgb(59, 130, 246) / 0.5`
+- 文本: `#ffffff`
+- 占位符: `rgba(255, 255, 255, 0.3)`
+- 标签: `rgba(255, 255, 255, 0.7)`, universalSans 14px
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位: 8px
+- 刻度: 4px, 8px, 24px, 48px
+- 刻度刻意保持稀疏——xAI 避免细微的间距区分，更倾向于通过较大的跨度，纯粹依靠留白来创造清晰的视觉层级
+
+### 网格与容器
+- 最大内容宽度：约 1200px
+- Hero 区：全视口高度，配以居中的巨大等宽字体标题
+- 特性区域：简单的垂直堆叠，带有充裕的区域间距 (48px-96px)
+- 桌面端用于特性描述的双栏布局
+- 全宽深色区域始终保持着单一的深色背景
+
+### 留白哲学
+- **极致慷慨**：xAI 使用了大量的留白。320px 的标题加上 48px+ 的周围内边距，创造出一种本身就是设计宣言的空旷感——内容如此重要，它需要呼吸的空间。
+- **垂直韵律胜过水平密度**：内容垂直堆叠，区域之间留有巨大间隔，而不是在水平方向上挤满内容。这创造出一种由滚动驱动的、感觉刻意且具有电影感的体验。
+- **无视觉噪音**：由于缺乏装饰性元素、区域间的边框以及丰富的色彩变化，留白成为了主要的结构工具。
+
+### 断点
+- 2000px, 1536px, 1280px, 1024px, 1000px, 768px, 640px
+- Tailwind 响应式修饰符驱动断点行为
+
+### 圆角刻度
+- Sharp (0px)：按钮、卡片、输入框的主要处理方式——默认选项
+- Subtle (4px)：偶尔用于柔化次级容器
+- 趋近于零的圆角哲学是该品牌粗野主义标识的核心
+
+## 6. 深度与悬浮感
+
+| 层级 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影，无边框 | 页面背景，正文内容 |
+| Surface (Level 1) | `rgba(255,255,255,0.03)` 背景 | 微妙的卡片表面 |
+| Bordered (Level 2) | `1px solid rgba(255,255,255,0.1)` 边框 | 卡片，容器，分割线 |
+| Active (Level 3) | `1px solid rgba(255,255,255,0.2)` 边框 | Hover 状态，激活的元素 |
+| Focus (无障碍) | 带有 `rgb(59,130,246)/0.5` 的 `ring` | 键盘焦点指示器 |
+
+**悬浮感哲学**：xAI 彻底摒弃了传统的基于阴影的悬浮感系统。整个网站没有任何 box-shadows。相反，深度是通过三种机制传达的：(1) 基于透明度的边框，在交互时会变亮，营造出一种元素被“激活”而不是被“抬起”的感觉；(2) 极其微妙的背景透明度转换（从 `0.03` 到 `0.08`），创造出几乎无法察觉的表面差异化；(3) 320px 展示型文字与 16px 正文文本之间巨大的比例对比，从而营造出排版上的深度。这是通过对比度和透明度实现的悬浮感，而不是通过模拟光与影。
+
+## 7. 宜与忌
+
+### 宜
+- 使用 `#1f2228` 作为通用背景——绝不使用纯黑 `#000000`
+- 将 GeistMono 用于所有展示级标题和按钮文本——等宽字体即是品牌本身
+- 对所有按钮标签应用大写转换 + 1.4px 字间距
+- 巨大的展示级标题 (320px) 使用 weight 300
+- 保持边框为 `rgba(255, 255, 255, 0.1)`——几乎不可见，但并非缺失
+- Hover 时将交互元素变暗为 `rgba(255, 255, 255, 0.5)`——与常规做法截然相反
+- 保持锐利的直角 (0px 圆角) 作为默认设置——粗野主义的精准感
+- 所有正文和阅读文本使用 universalSans，尺寸为 16px/1.5
+
+### 忌
+- 不要使用 box-shadows——xAI 没有零度的阴影悬浮感
+- 不要引入除白色和深色背景之外的任何彩色点缀——单色调色板是神圣不可侵犯的
+- 不要使用大的圆角（8px+，药丸形状）——锐利的边缘是刻意为之的
+- 标题不要使用粗字重 (600-700)——仅限 weight 300-400
+- Hover 时不要让元素变得更亮——xAI 会将其透明度变暗至 `0.5`
+- 不要添加装饰性的渐变、插图或色块
+- 按钮不要使用比例字体——必须使用大写的 GeistMono
+- 除非绝对必要，否则不要使用彩色状态指示器——保持一切都在白/深色色谱内
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Mobile | <640px | 单栏，hero 标题大幅度缩小 |
+| Small Tablet | 640-768px | 内边距略微增加 |
+| Tablet | 768-1024px | 开始出现双栏布局，标题尺寸增加 |
+| Desktop | 1024-1280px | 完整布局，慷慨的留白 |
+| Large | 1280-1536px | 更宽的容器，更多呼吸空间 |
+| Extra Large | 1536-2000px | 最大内容宽度，居中 |
+| Ultra | >2000px | 内容保持居中，极端的边缘留白 |
+
+### 触摸目标
+- 按钮使用 12px 24px 内边距以提供舒适的触摸体验
+- 导航链接间距为 24px
+- 最小触摸目标：44px 高度
+- 移动端：全宽按钮，方便大拇指触达
+
+### 折叠策略
+- Hero 区：320px 等宽标题在移动端会大幅缩小（至 ~48px-64px）
+- 导航：水平链接折叠成汉堡菜单
+- 特性区域：从双栏变为单栏堆叠
+- 区域内边距：在各断点间从 96px -> 48px -> 24px 变化
+- 巨大的展示型文字是首选需要调整尺寸的元素——它必须保持冲击力，但不能溢出
+
+### 图片行为
+- 极简的图像运用——网站依赖于排版和留白
+- 任何产品截图都保持锐利的边缘直角
+- 全宽媒体随视口按比例缩放
+
+## 9. Agent Prompt Guide
+
+### 快速颜色参考
+- 背景：Dark (`#1f2228`)
+- Text Primary：White (`#ffffff`)
+- Text Secondary：White 70% (`rgba(255, 255, 255, 0.7)`)
+- Text Muted：White 50% (`rgba(255, 255, 255, 0.5)`)
+- Text Disabled：White 30% (`rgba(255, 255, 255, 0.3)`)
+- Border 默认：White 10% (`rgba(255, 255, 255, 0.1)`)
+- Border Strong：White 20% (`rgba(255, 255, 255, 0.2)`)
+- Surface Subtle：White 3% (`rgba(255, 255, 255, 0.03)`)
+- Surface Hover：White 8% (`rgba(255, 255, 255, 0.08)`)
+- Focus Ring：Blue (`rgb(59, 130, 246)` 50% 不透明度)
+- Button Primary BG：White (`#ffffff`)，文本 Dark (`#1f2228`)
+
+### 示例 Component Prompts
+- "Create a hero section on #1f2228 background. Headline in GeistMono at 72px weight 300, color #ffffff, centered. Subtitle in universalSans 18px weight 400, rgba(255,255,255,0.7), max-width 600px centered. Two buttons: primary (white bg, #1f2228 text, 0px radius, GeistMono 14px uppercase, 1.4px letter-spacing, 12px 24px padding) and ghost (transparent bg, 1px solid rgba(255,255,255,0.2), white text, same font treatment)."
+- "Design a card: transparent or rgba(255,255,255,0.03) background, 1px solid rgba(255,255,255,0.1) border, 0px radius, 24px padding. No shadow. Title in universalSans 22px weight 400, #ffffff. Body in universalSans 16px weight 400, rgba(255,255,255,0.7), line-height 1.5. Hover: border changes to rgba(255,255,255,0.2)."
+- "Build navigation: #1f2228 background, full-width. Brand text left (GeistMono 14px uppercase). Links in universalSans 14px #ffffff with hover to rgba(255,255,255,0.5). White primary button right-aligned (GeistMono 14px uppercase, 1.4px letter-spacing)."
+- "Create a form: dark background #1f2228. Label in universalSans 14px rgba(255,255,255,0.7). Input with transparent bg, 1px solid rgba(255,255,255,0.2) border, 0px radius, white text 16px universalSans. Focus: blue ring rgb(59,130,246)/0.5. Placeholder: rgba(255,255,255,0.3)."
+- "Design a monospace tag/badge: transparent bg, 1px solid rgba(255,255,255,0.2), 0px radius, GeistMono 12px uppercase, 1px letter-spacing, white text, 4px 8px padding."
+
+### 迭代指南
+1. 始终以 `#1f2228` 背景作为开端——切勿使用纯黑或灰色背景
+2. 展示级元素和按钮使用 GeistMono，其他所有地方使用 universalSans——切勿混淆这些角色
+3. 所有按钮必须是 GeistMono 大写形式并带有 1.4px 字间距——这是不可妥协的
+4. 绝不使用阴影——深度只能来自边框透明度和背景透明度
+5. 边框始终是低透明度的白色（默认 0.1，强调时为 0.2）
+6. Hover 行为是变暗至 0.5 透明度，而不是变亮——这与大多数系统的做法截然相反
+7. 默认保持锐利直角 (0px)——仅在特定的次级容器使用 4px
+8. 正文使用 16px universalSans 以及 1.5 行高，以提供舒适的阅读体验
+9. 慷慨的区域间距 (48px-96px)——让内容在黑暗中呼吸
+10. 白字深底的单色配色方案是绝对的——除非出于功能关键性需要，否则抵制添加任何色彩