@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,320 @@
+# Design System: Composio
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原始站点使用专有字体。对于独立的 HTML 输出，请使用以下 CDN 替代字体：
+> - **Primary:** `DM Sans` | **Mono:** `JetBrains Mono`
+> - **Font stack (CSS):** `font-family: 'DM Sans', 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=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，并通过 `generative-widgets` skill (cloudflared tunnel) 提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Composio 的界面是一个夜间指挥中心——一种密集的、以开发者为中心的暗色调，点缀着电光青色和深钴蓝色的信号。整个体验建立在几乎纯黑的画布（`#0f0f0f`）之上，内容悬浮在几乎不可见的包围边框内，营造出一种高科技控制面板的感觉，而不是传统的营销页面。对于生活在暗色终端中的开发者来说，这个网站在向他们悄悄宣告着权威。
+
+视觉语言严重倾向于代码编辑器和终端窗口的美学。JetBrains Mono 与 abcDiatype 的几何精度并驾齐驱，强化了这是一个*由*开发者构建、*为*开发者服务的工具这一信息。装饰元素克制但极具冲击力——卡片和部分发出微妙的青蓝色渐变光晕，就像深海中的发光生物，而特定元素上的硬偏移阴影（`4px 4px`）则增添了一种原始的、粗野主义的边缘感，防止设计显得过于死板无趣。
+
+让 Composio 独具特色的是它在极简主义与战略性的发光色彩爆发之间的张力。该网站从不喧哗——标题使用紧凑的行高（0.87），将文本压缩成密集、具有权威性的块状。颜色被像稀有资源一样配给：白色文本用于主要内容，半透明白色（`rgba(255,255,255,0.5-0.6)`）用于次要内容，而品牌蓝（`#0007cd`）或电光青（`#00ffff`）则专门保留用于交互瞬间和强调光晕。
+
+**主要特征：**
+- 沥青黑画布，搭配几乎不可见的白色边框容器（4-12% 不透明度）
+- 双字体标识：几何无衬线体用于内容，等宽体用于技术可信度
+- 超紧凑的标题行高（0.87-1.0），创造出压缩且极具冲击力的文本块
+- 生物发光的强调策略——青色和蓝色光晕，感觉像是从内部发出的光
+- 特定交互元素上的硬偏移粗野主义阴影（`4px 4px`）
+- 单色层次结构，仅在最高信号强度的时刻使用颜色
+- 开发者终端美学，连接了营销与文档
+
+## 2. 色彩调色板与角色
+
+### Primary
+- **Composio Cobalt** (`#0007cd`)：核心品牌色——一种深邃、饱和的蓝色，少量用于高优先级的交互元素和品牌瞬间。它以平静的强度锚定了品牌标识。
+
+### Secondary & Accent
+- **Electric Cyan** (`#00ffff`)：引人注目的强调色——以低不透明度（`rgba(0,255,255,0.12)`）用于发光的按钮背景和卡片高亮。在全饱和度下，它作为暗色画布上充满活力的对立面。
+- **Signal Blue** (`#0089ff` / `rgb(0,137,255)`)：用于特定的按钮边框和交互聚焦状态，架起了 Cobalt 和 Cyan 之间的桥梁。
+- **Ocean Blue** (`#0096ff` / `rgb(0,150,255)`)：CTA 按钮上的强调边框色，比 Signal Blue 略暖。
+
+### Surface & Background
+- **Void Black** (`#0f0f0f`)：主要页面背景——不是纯黑，而是稍微暖一点，减少了暗色显示屏上的视觉疲劳。
+- **Pure Black** (`#000000`)：用于卡片内部和深度嵌套的容器，与页面背景形成微妙的深度区分。
+- **Charcoal** (`#2c2c2c` / `rgb(44,44,44)`)：用于次要按钮边框和暗色表面上的分割线。
+
+### Neutrals & Text
+- **Pure White** (`#ffffff`)：暗色表面上的主要标题和高强调文本颜色。
+- **Muted Smoke** (`#444444`)：弱化的正文文本、元数据和三级内容。
+- **Ghost White** (`rgba(255,255,255,0.6)`)：次要正文文本和链接标签——可见但故意淡化。
+- **Whisper White** (`rgba(255,255,255,0.5)`)：三级按钮文本和占位符内容。
+- **Phantom White** (`rgba(255,255,255,0.2)`)：微妙的按钮背景和深度淡化的 UI 外围元素。
+
+### Semantic & Accent
+- **Border Mist 12** (`rgba(255,255,255,0.12)`)：最高不透明度的边框处理——用于突出的卡片边缘和内容分隔符。
+- **Border Mist 10** (`rgba(255,255,255,0.10)`)：暗色表面上的标准容器边框。
+- **Border Mist 08** (`rgba(255,255,255,0.08)`)：微妙的区块分割线和次要卡片边缘。
+- **Border Mist 06** (`rgba(255,255,255,0.06)`)：用于背景分组的几乎不可见的包围边框。
+- **Border Mist 04** (`rgba(255,255,255,0.04)`)：最微弱的边框——仅用于氛围分隔。
+- **Light Border** (`#e0e0e0` / `rgb(224,224,224)`)：保留用于浅色表面环境（在此站点上很少见）。
+
+### Gradient System
+- **Cyan Glow**：使用极低不透明度的 `#00ffff` 的径向渐变，在卡片和特性区块后方创造出生物发光的光晕。
+- **Blue-to-Black Fade**：从 Composio Cobalt (`#0007cd`) 渐变为 Void Black (`#0f0f0f`) 的线性渐变，用于 Hero 背景和区块过渡。
+- **White Fog**：页面底部的渐变，从暗色过渡到扩散的白色/灰色，在页脚附近创造出一种氛围感的“地平线”效果。
+
+## 3. 排版规则
+
+### Font Family
+- **Primary**: `abcDiatype`, fallbacks: `abcDiatype Fallback, ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji`
+- **Monospace**: `JetBrains Mono`, fallbacks: `JetBrains Mono Fallback, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`
+- **System Monospace** (fallback): `Menlo`, `monospace` 用于最小的行内代码
+
+### Hierarchy
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | abcDiatype | 64px (4rem) | 400 | 0.87 (超紧凑) | normal | 巨大、压缩的标题 |
+| Section Heading | abcDiatype | 48px (3rem) | 400 | 1.00 (紧凑) | normal | 主要特性区块标题 |
+| Sub-heading Large | abcDiatype | 40px (2.5rem) | 400 | 1.00 (紧凑) | normal | 次要区块标记 |
+| Sub-heading | abcDiatype | 28px (1.75rem) | 400 | 1.20 (紧凑) | normal | 卡片标题，特性名称 |
+| Card Title | abcDiatype | 24px (1.5rem) | 500 | 1.20 (紧凑) | normal | 中等强调的卡片标题 |
+| Feature Label | abcDiatype | 20px (1.25rem) | 500 | 1.20 (紧凑) | normal | 较小的卡片标题、标签 |
+| Body Large | abcDiatype | 18px (1.125rem) | 400 | 1.20 (紧凑) | normal | 介绍性段落 |
+| Body / Button | abcDiatype | 16px (1rem) | 400 | 1.50 | normal | 标准正文文本、导航链接、按钮 |
+| Body Small | abcDiatype | 15px (0.94rem) | 400 | 1.63 (宽松) | normal | 长篇正文文本 |
+| Caption | abcDiatype | 14px (0.875rem) | 400 | 1.63 (宽松) | normal | 描述，元数据 |
+| Label | abcDiatype | 13px (0.81rem) | 500 | 1.50 | normal | UI 标签、徽章 |
+| Tag / Overline | abcDiatype | 12px (0.75rem) | 500 | 1.00 (紧凑) | 0.3px | 大写 Overline 标签 |
+| Micro | abcDiatype | 12px (0.75rem) | 400 | 1.00 (紧凑) | 0.3px | 最小的无衬线文本 |
+| Code Body | JetBrains Mono | 16px (1rem) | 400 | 1.50 | -0.32px | 行内代码、终端输出 |
+| Code Small | JetBrains Mono | 14px (0.875rem) | 400 | 1.50 | -0.28px | 代码片段、技术标签 |
+| Code Caption | JetBrains Mono | 12px (0.75rem) | 400 | 1.50 | -0.28px | 小型代码引用 |
+| Code Overline | JetBrains Mono | 14px (0.875rem) | 400 | 1.43 | 0.7px | 大写技术标签 |
+| Code Micro | JetBrains Mono | 11px (0.69rem) | 400 | 1.33 | 0.55px | 极小的大写代码标签 |
+| Code Nano | JetBrains Mono | 9-10px | 400 | 1.33 | 0.45-0.5px | 最小的等宽文本 |
+
+### Principles
+- **压缩创造权威感**：标题行高极其紧凑（0.87-1.0），使大文本显得密集且具有命令感，而不是空洞和装饰性的。
+- **双重个性**：abcDiatype 承载营销声音——几何、精准、友好。JetBrains Mono 承载技术声音——可信、实用、为开发者所熟悉。
+- **克制字重**：几乎所有内容的字重都是 400 (regular)。字重 500 (medium) 保留给小标签、徽章和特定的卡片标题。字重 700 (bold) 仅出现在极小的系统等宽体环境中。
+- **代码使用负字间距**：JetBrains Mono 使用负字间距（-0.28px 到 -0.98px）来创建密集、紧凑的代码块，感觉就像真实的 IDE。
+- **赢得的大写**：`uppercase` + `letter-spacing` 处理专门保留给微小的 overline 标签和技术标签——绝不用于标题。
+
+## 4. 组件样式
+
+### Buttons
+
+**Primary CTA (White Fill)**
+- 背景：Pure White (`#ffffff`)
+- 文本：Near Black (`oklch(0.145 0 0)`)
+- 内边距：舒适（8px 24px）
+- 边框：无
+- 圆角：微圆（基于 token 刻度可能是 4px）
+- 悬停：可能是微妙的透明度降低或轻微的灰色偏移
+
+**Cyan Accent CTA**
+- 背景：Electric Cyan，12% 不透明度（`rgba(0,255,255,0.12)`）
+- 文本：Near Black (`oklch(0.145 0 0)`)
+- 内边距：舒适（8px 24px）
+- 边框：细实线 Ocean Blue（`1px solid rgb(0,150,255)`）
+- 圆角：微圆（4px）
+- 在暗色背景上创造一种“内部发光”效果
+
+**Ghost / Outline (Signal Blue)**
+- 背景：透明
+- 文本：Near Black (`oklch(0.145 0 0)`)
+- 内边距：平衡（10px）
+- 边框：细实线 Signal Blue（`1px solid rgb(0,137,255)`）
+- 悬停：可能是填充或边框颜色偏移
+
+**Ghost / Outline (Charcoal)**
+- 背景：透明
+- 文本：Near Black (`oklch(0.145 0 0)`)
+- 内边距：平衡（10px）
+- 边框：细实线 Charcoal（`1px solid rgb(44,44,44)`）
+- 用于暗色表面上的次要/三级操作
+
+**Phantom Button**
+- 背景：Phantom White (`rgba(255,255,255,0.2)`)
+- 文本：Whisper White (`rgba(255,255,255,0.5)`)
+- 无可见边框
+- 用于深度淡化的操作
+
+### Cards & Containers
+- 背景：Pure Black (`#000000`) 或透明
+- 边框：极低不透明度的白色，范围从 Border Mist 04 (`rgba(255,255,255,0.04)`) 到 Border Mist 12 (`rgba(255,255,255,0.12)`)，取决于显著程度
+- 圆角：几乎为直角（行内元素为 2px，内容卡片为 4px）
+- 阴影：特定卡片使用硬偏移粗野主义阴影（`rgba(0,0,0,0.15) 4px 4px 0px 0px`）——一种独特的设计选择，增添了原始的深度感
+- 海拔阴影：更深的容器使用柔和的漫射阴影（`rgba(0,0,0,0.5) 0px 8px 32px`）
+- 悬停行为：可能是微妙的边框不透明度增加或微弱的光晕效果
+
+### Inputs & Forms
+- 未提取到显式的输入框 token 数据——输入框可能遵循暗色表面模式：
+  - 背景：透明或 Pure Black
+  - 边框：Border Mist 10 (`rgba(255,255,255,0.10)`)
+  - 聚焦：边框转变为 Signal Blue (`#0089ff`) 或 Electric Cyan
+  - 文本：Pure White 带有 Ghost White 占位符
+
+### Navigation
+- 暗色/黑色背景上的粘性顶部导航栏
+- Logo（白色 SVG）：左侧的 Composio 文字标记
+- 导航链接：标准正文大小（16px, abcDiatype）的 Pure White (`#ffffff`)
+- 导航栏中的 CTA 按钮：White Fill Primary 样式
+- 移动端：折叠为汉堡菜单，单列布局
+- 导航栏上的微妙底部边框（Border Mist 06-08）
+
+### Image Treatment
+- 以暗色主题的产品截图和 UI 模型为主
+- 图像位于与卡片系统匹配的带边框容器内
+- 特性图像后方或下方有蓝色/青色渐变光晕
+- 图像除了容器的圆角（4px）外，没有可见的 border-radius
+- 在其卡片容器内全出血展示
+
+### Distinctive Components
+
+**Stats/Metrics Display**
+- 大型等宽数字（JetBrains Mono）——“10k+” 风格
+- 紧凑的布局，下方带有微妙的标签文本
+
+**Code Blocks / Terminal Previews**
+- 使用 JetBrains Mono 的暗色容器
+- 语法高亮的内容
+- 微妙的带边框容器（Border Mist 10）
+
+**Integration/Partner Logos Grid**
+- 暗色表面上的工具 Logo 网格布局
+- 包含在带边框的卡片内
+- 展示生态系统的广度
+
+**"COMPOSIO" Brand Display**
+- 超大品牌排版——可能是页面上最大的文本
+- 用作区块分隔符/品牌宣言
+- 黑底纯白字
+
+## 5. 布局原则
+
+### Spacing System
+- 基础单位：8px
+- 刻度：1px, 2px, 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 30px, 32px, 40px
+- 组件内边距：通常为 10px（按钮）到 24px（CTA 按钮水平）
+- 区块内边距：充足的垂直间距（主要区块间估计为 80-120px）
+- 卡片内部内边距：约 24-32px
+
+### Grid & Container
+- 最大容器宽度：约 1200px，居中
+- 内容区块使用单列或 2-3 列网格展示特性卡片
+- Hero：居中的单列，以达到最大视觉冲击力
+- 特性区块：混合文本块与产品截图的非对称布局
+
+### Whitespace Philosophy
+- **区块间的呼吸空间**：巨大的垂直间隙在页面滚动中创造了独特的“章节”。
+- **组件内部密集**：卡片和文本块在内部是紧凑的（紧凑的行高，极小的内部内边距），创造出聚焦的信息节点。
+- **对比驱动的分隔**：Composio 不完全依赖留白，而是利用边框不透明度的差异和微妙的背景变化来勾勒内容区域。
+
+### Border Radius Scale
+- 近似直角（2px）：行内代码跨度、小标签、pre 块——最锐利的处理，传达出技术精确性
+- 微圆（4px）：内容卡片、图像、标准容器——主力圆角
+- 胶囊形（37px）：特定的按钮和徽章——为关键 CTA 创造更柔和、更平易近人的感觉
+- 全圆（9999px+）：圆形元素、头像式容器、装饰性圆点
+
+## 6. 深度与海拔
+
+| 级别 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影，无边框 | 页面背景，行内文本 |
+| Contained (Level 1) | Border Mist 04-08，无阴影 | 背景分组，微妙区块 |
+| Card (Level 2) | Border Mist 10-12，无阴影 | 标准内容卡片，代码块 |
+| Brutalist (Level 3) | 硬偏移阴影（`4px 4px`, 15% 黑色） | 选定的交互卡片，独特的特性高亮 |
+| Floating (Level 4) | 柔和漫射阴影（`0px 8px 32px`, 50% 黑色） | 模态框，叠加层，深度悬浮的内容 |
+
+**阴影哲学**：Composio 谨慎且带有明确对比地使用阴影。硬偏移粗野主义阴影是其标志——它以一种原始的、几乎是复古计算的感觉打破了顺滑的暗色调。柔和的漫射阴影保留给真正悬浮的元素。大多数深度感是通过边框不透明度的渐变来传达的，而不是阴影。
+
+### Decorative Depth
+- **Cyan Glow Halos**：在特性卡片和图像后方使用低不透明度的 Electric Cyan 径向渐变光晕。创造出一种“屏幕发光”效果，仿佛 UI 元素正在发光。
+- **Blue-Black Gradient Washes**：从 Composio Cobalt 到 Void Black 的线性渐变作为区块背景，增添了微妙的色温变化。
+- **White Fog Horizon**：页面底部从暗色到扩散白色/灰色的渐变，在页脚之前创造出一种氛围感的“破晓”效果。
+
+## 7. 宜与忌
+
+### 宜
+- 使用 Void Black (`#0f0f0f`) 作为主要页面背景——主表面绝不要使用纯白
+- 保持标题行高极度紧凑（0.87-1.0），以获得压缩且具权威感的文本块
+- 使用白色透明度边框（4-12%）进行包裹——在这里它们比阴影更重要
+- 仅将 Electric Cyan (`#00ffff`) 保留给高信号时刻——CTA、光晕、交互强调
+- 将 abcDiatype 与 JetBrains Mono 搭配使用，以强化开发者工具标识
+- 在选定的元素上有意地使用硬偏移阴影（`4px 4px`），展现粗野主义个性
+- 即使在最暗的背景上也保持按钮文本为暗色（`oklch(0.145 0 0)`）——按钮拥有自己的表面
+- 分层基于不透明度的边框，在没有阴影的情况下创造微妙的深度
+- 仅在微小的 Overline 标签（12px 或更小）上使用大写 + 字间距
+
+### 忌
+- 不要使用明亮的背景或浅色表面作为主要容器
+- 不要到处使用沉重的阴影——深度来自边框不透明度，而不是 box-shadow
+- 不要使用 Composio Cobalt (`#0007cd`) 作为文本颜色——它在暗色背景上太暗，在浅色背景上太饱和
+- 不要将标题行高增加到 1.2 以上——压缩感是标识的核心
+- 不要在正文或标题文本中使用粗体（700）字重——400-500 是上限
+- 不要混合暖色调——调色板严格偏冷色（蓝色、青色、白色、黑色）
+- 不要在内容卡片上使用大于 4px 的 border-radius——近直角的精确性是有意为之的
+- 不要在大面积表面上使用全不透明度的 Electric Cyan——它是一种强调色，用于背景时最多不超过 12%
+- 不要使用装饰性的衬线体或手写字体——整个标识就是几何无衬线体 + 等宽体
+- 不要在技术内容上跳过等宽字体——JetBrains Mono 不是装饰，而是可信度的标志
+
+## 8. 响应式行为
+
+### Breakpoints
+| 名称 | 宽度 | 主要变化 |
+|------|-------|-------------|
+| Mobile | <768px | 单列，汉堡导航，全宽卡片，减少的区块内边距，Hero 文本缩小至 ~28-40px |
+| Tablet | 768-1024px | 卡片采用 2 列网格，压缩的导航，略微缩小的 Hero 文本 |
+| Desktop | 1024-1440px | 完整的多列布局，展开的导航显示所有链接，大型 Hero 排版（64px） |
+| Large Desktop | >1440px | 最大宽度的容器居中，充足的水平边距 |
+
+### Touch Targets
+- 最小触摸目标：所有交互元素为 44x44px
+- 按钮使用舒适的内边距（最小 8px 24px），确保足够的触摸区域
+- 导航链接间隔有足够的间隙，便于拇指导航
+
+### Collapsing Strategy
+- **导航**：桌面端的全水平导航在移动端折叠为汉堡菜单
+- **特性网格**：3 列 → 2 列 → 单列堆叠
+- **Hero 文本**：64px → 40px → 28px 渐进缩放
+- **区块内边距**：按比例减少，但保持充足的垂直节奏
+- **卡片**：在移动端垂直堆叠，采用全宽处理
+- **代码块**：在较小的视口上水平滚动，而不是换行
+
+### Image Behavior
+- 产品截图在其容器内按比例缩放
+- 暗色主题的图像在所有尺寸下都能在暗色背景上保持对比度
+- 渐变光晕效果随容器大小缩放
+- 在断点之间没有可见的 art direction 变化——相同的裁剪，比例缩放
+
+## 9. Agent 提示词指南
+
+### Quick Color Reference
+- Primary CTA: "Pure White (#ffffff)"
+- Page Background: "Void Black (#0f0f0f)"
+- Brand Accent: "Composio Cobalt (#0007cd)"
+- Glow Accent: "Electric Cyan (#00ffff)"
+- Heading Text: "Pure White (#ffffff)"
+- Body Text: "Ghost White (rgba(255,255,255,0.6))"
+- Card Border: "Border Mist 10 (rgba(255,255,255,0.10))"
+- Button Border: "Signal Blue (#0089ff)"
+
+### 示例 Component Prompts
+- “创建一个具有近黑色背景（#000000）、10% 不透明度的几乎不可见的白色边框、微圆角（4px）以及硬偏移阴影（向右 4px，向下 4px，15% 黑色）的特性卡片。标题使用 abcDiatype 字体，Pure White，24px，字重 500，描述使用 16px 的 Ghost White（60% 不透明度）。”
+- “设计一个带有纯白背景、近黑色文本、舒适内边距（垂直 8px，水平 24px）和微圆角的主要 CTA 按钮。将其放置在一个具有透明背景、Signal Blue 边框和匹配内边距的次要按钮旁边。”
+- “在 Void Black (#0f0f0f) 上构建一个 Hero 区块，使用 abcDiatype 字体，64px 大小、0.87 行高的巨大标题。文本居中。在内容后方添加微妙的蓝黑渐变光晕。在下方包含一个白色 CTA 按钮和一个青色强调的次要按钮。”
+- “创建一个代码片段展示，使用 JetBrains Mono 字体，14px 大小，-0.28px 字间距，位于黑色背景上。添加 Border Mist 10 边框 (rgba(255,255,255,0.10)) 和 4px 圆角。显示带有白色和青色文本的语法高亮内容。”
+- “在 Void Black 上设计一个导航栏，左侧为白色的 Composio 文字标记，4-5 个白色的 abcDiatype 16px 导航链接，以及右侧一个白色填充的 CTA 按钮。添加 Border Mist 06 底部边框。”
+
+### Iteration Guide
+使用此设计系统优化已生成的屏幕时：
+1. 每次专注于一个组件
+2. 引用本文档中的特定颜色名称和十六进制代码——“使用 Ghost White (rgba(255,255,255,0.6))”而不是“让它变亮一点”
+3. 使用自然语言描述——“让边框几乎不可见”= Border Mist 04-06
+4. 将期望的“感觉”与具体的测量数据一起描述——“48px、行高 1.0 的压缩且具权威感的标题”
+5. 对于光晕效果，指明“12% 不透明度的 Electric Cyan 作为元素后方的径向渐变”
+6. 始终指定使用哪种字体——abcDiatype 用于营销内容，JetBrains Mono 用于技术/代码内容

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

@@ -0,0 +1,322 @@
+# Design System: Cursor
+
+
+> **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` skill (cloudflared tunnel) 提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Cursor 的网站是温暖极简主义与代码编辑器优雅气质的典范。整个体验建立在温暖的灰白画布（`#f2f1ed`）和深色暖棕色文本（`#26251e`）之上——不是纯黑，不是中性灰，而是一种带有黄色底色的极度温暖的近黑色，让人联想到旧纸张、墨水和工艺品。这种温暖渗透到每一个表面：背景倾向于奶油色（`#e6e5e0`、`#ebeae5`），边框使用 `oklab` 色彩空间消融为透明的暖色叠加层，甚至错误状态（`#cf2d56`）也带有温度，而不是冷酷的红色。最终的效果让人感觉更像是一本优质的印刷出版物，而不是一个科技网站。
+
+定制的 CursorGothic 字体是其排版的标志——这是一种哥特式无衬线字体，在展示尺寸下具有极强的负字间距（72px 时为 -2.16px），营造出一种紧凑的、工程化的感觉。作为次要声音，jjannon 衬线字体（带有 OpenType `"cswh"` 上下文花体备选字）为正文和编辑段落提供了文学性的对照。等宽字体的声音来自 berkeleyMono，这是一种精致的编码字体，将营销网站与 Cursor 作为代码编辑器的核心身份连接起来。这套三字体系统（哥特式展示、衬线正文、等宽代码）赋予了 Cursor 在开发工具领域最丰富的排版调色板之一。
+
+边框系统尤为独特——Cursor 使用 `oklab()` 色彩空间来设定边框颜色，在不同 Alpha 级别（0.1、0.2、0.55）下应用暖棕色，以创造出有机而非机械的边框感。标志性的边框颜色 `oklab(0.263084 -0.00230259 0.0124794 / 0.1)` 并非简单的 rgba 值，而是一种在感知上均匀的颜色，能够在不同背景下保持视觉一致性。
+
+**主要特征：**
+- CursorGothic 带有极强的负字间距（72px 时为 -2.16px，36px 时为 -0.72px），用于紧凑的展示标题
+- jjannon 衬线字体用于正文，带有 OpenType `"cswh"`（上下文花体备选字）
+- berkeleyMono 用于代码和技术标签
+- 温暖的灰白背景（`#f2f1ed`）而非纯白——整个系统向暖色调偏移
+- 主文本颜色 `#26251e`（带有黄色底色的温暖近黑色）
+- 强调色橙色 `#f54e00` 用于品牌高亮和链接
+- oklab 空间的边框采用不同 Alpha 级别，以实现感知上均匀的边缘效果
+- 胶囊状元素带有极大的圆角（33.5M px，实际为全胶囊状）
+- 8px 基础间距系统，带有细粒度的 8px 以下增量（1.5px、2px、2.5px、3px、4px、5px、6px）
+
+## 2. 调色板与角色
+
+### Primary
+- **Cursor Dark** (`#26251e`)：主要文本、标题、深色 UI 表面。一种具有明显黄棕底色的温暖近黑色——该系统的定义色。
+- **Cursor Cream** (`#f2f1ed`)：页面背景、主要表面。不是白色，而是一种奠定整体暖色调的温暖奶油色。
+- **Cursor Light** (`#e6e5e0`)：次要表面、按钮背景、卡片填充。一种稍微暖一点、深一点的奶油色。
+- **Pure White** (`#ffffff`)：极少使用，用于最大对比度的元素和特定表面高亮。
+- **True Black** (`#000000`)：极少使用，用于特定的代码/控制台环境。
+
+### Accent
+- **Cursor Orange** (`#f54e00`)：品牌强调色，`--color-accent`。一种充满活力的红橙色，用于主要 CTA、活动链接和品牌瞬间。温暖且急促。
+- **Gold** (`#c08532`)：次要强调色，温暖的金色，用于高级或高亮的上下文。
+
+### Semantic
+- **Error** (`#cf2d56`)：`--color-error`。一种温暖的绯红-玫瑰色，而不是冷酷的红色。
+- **Success** (`#1f8a65`)：`--color-success`。一种柔和的青绿色，向暖色调偏移。
+
+### Timeline / 特性 颜色
+- **Thinking** (`#dfa88f`)：AI 时间轴中“思考”状态的温暖桃色。
+- **Grep** (`#9fc9a2`)：用于搜索/grep 操作的柔和鼠尾草绿。
+- **Read** (`#9fbbe0`)：用于文件读取操作的柔和蓝色。
+- **Edit** (`#c0a8dd`)：用于编辑操作的柔和淡紫色。
+
+### Surface Scale
+- **Surface 100** (`#f7f7f4`)：最浅的按钮/卡片表面，几乎没有色调。
+- **Surface 200** (`#f2f1ed`)：主要页面背景。
+- **Surface 300** (`#ebeae5`)：按钮默认背景，轻微强调。
+- **Surface 400** (`#e6e5e0`)：卡片背景，次要表面。
+- **Surface 500** (`#e1e0db`)：三级按钮背景，更深的强调。
+
+### Border Colors
+- **Border Primary** (`oklab(0.263084 -0.00230259 0.0124794 / 0.1)`)：标准边框，oklab 空间中 10% 的暖棕色。
+- **Border Medium** (`oklab(0.263084 -0.00230259 0.0124794 / 0.2)`)：强调边框，20% 暖棕色。
+- **Border Strong** (`rgba(38, 37, 30, 0.55)`)：强壮边框，表格标尺。
+- **Border Solid** (`#26251e`)：用于最大对比度的全不透明深色边框。
+- **Border Light** (`#f2f1ed`)：与页面背景匹配的浅色边框。
+
+### Shadows & Depth
+- **Card Shadow** (`rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px`)：带有暖色 oklab 边框环的重度悬浮卡片。
+- **Ambient Shadow** (`rgba(0,0,0,0.02) 0px 0px 16px, rgba(0,0,0,0.008) 0px 0px 8px`)：用于浮动元素的微妙环境光晕。
+
+## 3. 排版规则
+
+### Font Family
+- **Display/Headlines**: `CursorGothic`，回退顺序：`CursorGothic Fallback, system-ui, Helvetica Neue, Helvetica, Arial`
+- **Body/Editorial**: `jjannon`，回退顺序：`Iowan Old Style, Palatino Linotype, URW Palladio L, P052, ui-serif, Georgia, Cambria, Times New Roman, Times`
+- **Code/Technical**: `berkeleyMono`，回退顺序：`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`
+- **UI/System**: `system-ui`，回退顺序：`-apple-system, Segoe UI, Helvetica Neue, Arial`
+- **Icons**: `CursorIcons16`（14px 和 12px 的图标字体）
+- **OpenType 特性**: jjannon 正文使用 `"cswh"`，CursorGothic 按钮/说明文字使用 `"ss09"`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | CursorGothic | 72px (4.50rem) | 400 | 1.10 (tight) | -2.16px | 最大压缩，Hero 声明 |
+| Section Heading | CursorGothic | 36px (2.25rem) | 400 | 1.20 (tight) | -0.72px | 特性板块，CTA 标题 |
+| Sub-heading | CursorGothic | 26px (1.63rem) | 400 | 1.25 (tight) | -0.325px | 卡片标题，子板块 |
+| Title Small | CursorGothic | 22px (1.38rem) | 400 | 1.30 (tight) | -0.11px | 较小标题，列表标题 |
+| Body Serif | jjannon | 19.2px (1.20rem) | 500 | 1.50 | normal | 带有 `"cswh"` 的编辑正文 |
+| Body Serif SM | jjannon | 17.28px (1.08rem) | 400 | 1.35 | normal | 标准正文文本，描述 |
+| Body Sans | CursorGothic | 16px (1.00rem) | 400 | 1.50 | normal/0.08px | UI 正文文本 |
+| Button Label | CursorGothic | 14px (0.88rem) | 400 | 1.00 (tight) | normal | 主要按钮文本 |
+| Button Caption | CursorGothic | 14px (0.88rem) | 400 | 1.50 | 0.14px | 带有 `"ss09"` 的次要按钮 |
+| Caption | CursorGothic | 11px (0.69rem) | 400-500 | 1.50 | normal | 小号说明文字，元数据 |
+| System Heading | system-ui | 20px (1.25rem) | 700 | 1.55 | normal | 系统 UI 标题 |
+| System Caption | system-ui | 13px (0.81rem) | 500-600 | 1.33 | normal | 系统 UI 标签 |
+| System Micro | system-ui | 11px (0.69rem) | 500 | 1.27 (tight) | 0.048px | 大写微型标签 |
+| Mono Body | berkeleyMono | 12px (0.75rem) | 400 | 1.67 (relaxed) | normal | 代码块 |
+| Mono Small | berkeleyMono | 11px (0.69rem) | 400 | 1.33 | -0.275px | 行内代码，终端 |
+| Lato Heading | Lato | 16px (1.00rem) | 600 | 1.33 | normal | Lato 板块标题 |
+| Lato Caption | Lato | 14px (0.88rem) | 400-600 | 1.33 | normal | Lato 说明文字 |
+| Lato Micro | Lato | 12px (0.75rem) | 400-600 | 1.27 (tight) | 0.053px | Lato 小标签 |
+
+### Principles
+- **为了冲击力而进行的哥特式压缩**：CursorGothic 在展示尺寸下使用 -2.16px 字间距（72px 时），并逐渐放宽：36px 时为 -0.72px，26px 时为 -0.325px，22px 时为 -0.11px，16px 及以下为正常。字间距营造出一种精密工程的感觉。
+- **赋予灵魂的衬线体**：jjannon 提供了文学温度。`"cswh"` 特性增加了上下文花体备选字，赋予正文一种书法质感。
+- **三种排版声音**：哥特式（展示/UI），衬线体（编辑/正文），等宽体（代码/技术）。每种都有其独特的沟通目的。
+- **字重克制**：CursorGothic 几乎只使用 400 字重，依靠字号和字距来建立层级，而不是字重。System-ui 组件使用 500-700 进行功能性强调。
+
+## 4. 组件样式
+
+### Buttons
+
+**Primary (Warm Surface)**
+- Background: `#ebeae5` (Surface 300)
+- Text: `#26251e` (Cursor Dark)
+- Padding: 10px 12px 10px 14px
+- Radius: 8px
+- Outline: none
+- Hover: text shifts to `var(--color-error)` (`#cf2d56`)
+- Focus shadow: `rgba(0,0,0,0.1) 0px 4px 12px`
+- Use: 主要操作，主要 CTA
+
+**Secondary Pill**
+- Background: `#e6e5e0` (Surface 400)
+- Text: `oklab(0.263 / 0.6)` (60% warm brown)
+- Padding: 3px 8px
+- Radius: full pill (33.5M px)
+- Hover: text shifts to `var(--color-error)`
+- Use: 标签，过滤器，次要操作
+
+**Tertiary Pill**
+- Background: `#e1e0db` (Surface 500)
+- Text: `oklab(0.263 / 0.6)` (60% warm brown)
+- Radius: full pill
+- Use: 激活的过滤器状态，选中的标签
+
+**Ghost (Transparent)**
+- Background: `rgba(38, 37, 30, 0.06)` (6% warm brown)
+- Text: `rgba(38, 37, 30, 0.55)` (55% warm brown)
+- Padding: 6px 12px
+- Use: 三级操作，关闭按钮
+
+**Light Surface**
+- Background: `#f7f7f4` (Surface 100) 或 `#f2f1ed` (Surface 200)
+- Text: `#26251e` 或 `oklab(0.263 / 0.9)` (90%)
+- Padding: 0px 8px 1px 12px
+- Use: 下拉触发器，微妙的交互元素
+
+### Cards & Containers
+- Background: `#e6e5e0` 或 `#f2f1ed`
+- Border: `1px solid oklab(0.263 / 0.1)` (10% 暖棕色)
+- Radius: 8px (标准)，4px (紧凑)，10px (特色)
+- Shadow: `rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px` 用于悬浮卡片
+- Hover: 阴影加深
+
+### Inputs & Forms
+- Background: transparent 或 surface
+- Text: `#26251e`
+- Padding: 8px 8px 6px (textarea)
+- Border: `1px solid oklab(0.263 / 0.1)`
+- Focus: 边框变为 `oklab(0.263 / 0.2)` 或强调橙色
+
+### Navigation
+- 温暖奶油色背景上的干净水平导航
+- 左对齐的 Cursor 标志（约 96x24px）
+- Links: 14px CursorGothic 或 system-ui，字重 500
+- CTA button: 温暖表面带 Cursor Dark 文本
+- Tab navigation: 底部边框 `1px solid oklab(0.263 / 0.1)`，带有激活标签页区分
+
+### Image Treatment
+- 带有 `1px solid oklab(0.263 / 0.1)` 边框的代码编辑器截图
+- 圆角：标准 8px
+- AI 聊天/时间轴截图在特性板块中占据主导地位
+- Hero 图片背后使用温暖的渐变或纯奶油色背景
+
+### Distinctive Components
+
+**AI Timeline**
+- 显示 AI 操作的垂直时间轴：thinking (桃色)、grep (鼠尾草绿)、read (蓝色)、edit (淡紫色)
+- 每个步骤使用其语义颜色，并配有相应文本
+- 用垂直线连接
+- Cursor 的 AI 优先编码体验的核心视觉隐喻
+
+**Code Editor Previews**
+- 带有温暖奶油色边框的深色代码编辑器截图
+- 代码文本使用 berkeleyMono
+- 使用时间轴颜色进行语法高亮
+
+**Pricing Cards**
+- 带有边框容器的温暖表面背景
+- 特性列表使用 jjannon 衬线体以提高可读性
+- 带有强调橙色或主深色样式的 CTA 按钮
+
+## 5. 布局原则
+
+### Spacing System
+- Base unit: 8px
+- Fine scale: 1.5px, 2px, 2.5px, 3px, 4px, 5px, 6px (用于微调的 8px 以下级别)
+- Standard scale: 8px, 10px, 12px, 14px (提取得出)
+- Extended scale (推断): 16px, 24px, 32px, 48px, 64px, 96px
+- Notable: 用于精确图标/文本对齐的细粒度 8px 以下增量
+
+### Grid & Container
+- 最大内容宽度：约 1200px
+- Hero：居中单列，顶部留有充足内边距 (80-120px)
+- 特性 sections: 用于卡片和特性的 2-3 列网格
+- 全宽板块，带有温暖奶油色或略深背景
+- 文档和设置页面的侧边栏布局
+
+### Whitespace Philosophy
+- **温暖的负空间**：奶油色背景意味着留白具有温度和纹理，不同于冷冰冰的白色极简主义。大片空白区域让人感到舒适而不是冷漠。
+- **紧凑文本，开阔布局**：CursorGothic 标题上强烈的负字间距被周围宽裕的边距所平衡。文本密集；周围的空间在呼吸。
+- **板块变化**：交替的表面色调（奶油色 → 较浅奶油色 → 奶油色）创造了微妙的板块区分，而没有生硬的边界。
+
+### Border Radius Scale
+- Micro (1.5px): 精细细节元素
+- Small (2px): 行内元素，代码跨度
+- Medium (3px): 小容器，行内徽章
+- Standard (4px): 卡片，图片，紧凑按钮
+- Comfortable (8px): 主要按钮，卡片，菜单
+- Featured (10px): 较大容器，特色卡片
+- Full Pill (33.5M px / 9999px): 胶囊按钮，标签，徽章
+
+## 6. 深度与悬浮感
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影 | 页面背景，文本块 |
+| Border Ring (Level 1) | `oklab(0.263 / 0.1) 0px 0px 0px 1px` | 标准卡片/容器边框（温暖 oklab） |
+| Border Medium (Level 1b) | `oklab(0.263 / 0.2) 0px 0px 0px 1px` | 强调边框，激活状态 |
+| Ambient (Level 2) | `rgba(0,0,0,0.02) 0px 0px 16px, rgba(0,0,0,0.008) 0px 0px 8px` | 浮动元素，微妙光晕 |
+| Elevated Card (Level 3) | `rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px, oklab ring` | 模态框，弹出框，悬浮卡片 |
+| Focus | `rgba(0,0,0,0.1) 0px 4px 12px` 应用于按钮聚焦 | 交互焦点反馈 |
+
+**Shadow Philosophy**: Cursor 的深度系统围绕两个理念构建。首先，边框使用感知均匀的 oklab 色彩空间而不是 rgba，确保温暖的棕色边框在不同背景色调下看起来一致。其次，悬浮阴影使用巨大的模糊值（28px, 70px）配合适中的透明度（0.14, 0.1），创造出一种扩散的、氛围般的提升感，而不是硬边缘的投射阴影。卡片看起来不像悬浮在页面之上——它们看起来就像是页面轻轻为它们腾出了一个空间。
+
+### Decorative Depth
+- 温暖的奶油色表面变化在没有阴影的情况下创造了微妙的色调深度
+- 10% 和 20% 的 oklab 边框创造了边缘清晰度的层次
+- 没有刺眼的分割线——通过背景色调转变和间距来实现板块分离
+
+## 7. 交互与运动
+
+### Hover States
+- Buttons: 鼠标悬停时文本颜色变为 `--color-error` (`#cf2d56`)——一种标志交互性的独特温暖绯红色
+- Links: 颜色变为强调橙色 (`#f54e00`) 或使用 `rgba(38, 37, 30, 0.4)` 进行下划线装饰
+- Cards: 悬停时阴影加深 (ambient → elevated)
+
+### Focus States
+- 基于阴影的焦点：`rgba(0,0,0,0.1) 0px 4px 12px` 用于基于深度的焦点指示
+- 边框焦点：`oklab(0.263 / 0.2)` (20% 边框) 用于输入框/表单焦点
+- 所有焦点状态保持一致的暖色调——没有冷蓝色的焦点环
+
+### Transitions
+- Color transitions: 150ms ease 用于文本/背景颜色变化
+- Shadow transitions: 200ms ease 用于深度变化
+- Transform: 微妙的缩放或平移用于交互反馈
+
+## 8. 响应式行为
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <600px | 单列，减少内边距，堆叠导航 |
+| Tablet Small | 600-768px | 开始出现 2 列网格 |
+| Tablet | 768-900px | 扩展卡片网格，出现侧边栏 |
+| Desktop Small | 900-1279px | 完整布局成型 |
+| Desktop | >1279px | 完整布局，最大内容宽度 |
+
+### Touch Targets
+- 按钮使用舒适的内边距（垂直 6px-14px，水平 8px-14px）
+- 胶囊按钮保持对触控友好的尺寸，带有 3px-10px 内边距
+- 导航链接为 14px，带有足够的触摸间距
+
+### Collapsing Strategy
+- Hero: 72px CursorGothic → 36px → 26px 在较小屏幕上，保持比例字间距
+- Navigation: 水平链接 → 移动端上的汉堡菜单
+- 特性 cards: 3 列 → 2 列 → 单列堆叠
+- 代码编辑器截图：保持长宽比，可能在保留边框处理的同时缩小
+- Timeline visualization：水平 → 垂直堆叠
+- Section spacing：80px+ → 48px → 32px 在移动设备上
+
+### Image Behavior
+- 编辑器截图在所有尺寸下保持温暖的边框处理
+- AI 时间轴从水平布局适应为垂直布局
+- 产品截图使用具有一致边框半径的响应式图片
+- 全宽 Hero 图片按比例缩放
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA background: `#ebeae5` (温暖奶油色按钮)
+- Page background: `#f2f1ed` (温暖灰白色)
+- Text color: `#26251e` (温暖近黑色)
+- Secondary text: `rgba(38, 37, 30, 0.55)` (55% 暖棕色)
+- Accent: `#f54e00` (橙色)
+- Error/hover: `#cf2d56` (温暖绯红色)
+- Success: `#1f8a65` (柔和青色)
+- Border: `oklab(0.263084 -0.00230259 0.0124794 / 0.1)` 或 `rgba(38, 37, 30, 0.1)` 作为回退
+
+### 示例 Component Prompts
+- "在 `#f2f1ed` 温暖奶油色背景上创建一个 Hero 板块。标题为 72px CursorGothic weight 400，line-height 1.10，letter-spacing -2.16px，颜色 `#26251e`。副标题为 17.28px jjannon weight 400，line-height 1.35，颜色 `rgba(38,37,30,0.55)`。主要 CTA 按钮（`#ebeae5` 背景，8px 圆角，10px 14px 内边距），鼠标悬停时文本变为 `#cf2d56`。"
+- "设计一张卡片：`#e6e5e0` 背景，边框 `1px solid rgba(38,37,30,0.1)`。圆角 8px。标题为 22px CursorGothic weight 400，letter-spacing -0.11px。正文为 17.28px jjannon weight 400，颜色 `rgba(38,37,30,0.55)`。链接强调色使用 `#f54e00`。"
+- "构建一个胶囊标签：`#e6e5e0` 背景，`rgba(38,37,30,0.6)` 文本，全胶囊圆角 (9999px)，3px 8px 内边距，14px CursorGothic weight 400。"
+- "创建导航：带 backdrop-filter blur 的粘性 `#f2f1ed` 背景。链接使用 14px system-ui weight 500，`#26251e` 文本。右对齐的 CTA 按钮，带有 `#ebeae5` 背景和 8px 圆角。底部边框 `1px solid rgba(38,37,30,0.1)`。"
+- "设计一个显示四个步骤的 AI 时间轴：Thinking (`#dfa88f`)、Grep (`#9fc9a2`)、Read (`#9fbbe0`)、Edit (`#c0a8dd`)。每个步骤：14px system-ui 标签 + 16px CursorGothic 描述 + `rgba(38,37,30,0.1)` 的垂直连接线。"
+
+### Iteration Guide
+1. 始终使用暖色调——`#f2f1ed` 背景，`#26251e` 文本，主要表面绝不使用纯白/纯黑
+2. 字间距随 CursorGothic 的字号缩放：72px 时为 -2.16px，36px 时为 -0.72px，26px 时为 -0.325px，16px 时为正常
+3. 使用 `rgba(38, 37, 30, alpha)` 作为 oklab 边框的 CSS 兼容回退
+4. 三种字体，三种声音：CursorGothic（展示/UI），jjannon（编辑），berkeleyMono（代码）
+5. 标签和过滤器使用胶囊形状（9999px 圆角）；主要按钮和卡片使用 8px 圆角
+6. 悬停状态使用 `#cf2d56` 文本颜色——温暖的绯红色变化是其标志性交互
+7. 阴影使用大模糊值（28px, 70px）以营造扩散的氛围深度
+8. 8px 以下间距比例（1.5, 2, 2.5, 3, 4, 5, 6px）对于图标/文本微对齐至关重要