@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,159 @@
+# 设计系统：Intercom
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原站点使用的是专有字体。对于自包含的 HTML 输出，请使用以下 CDN 替代方案：
+> - **Primary:** `Inter` | **Mono:** `system monospace stack`
+> - **Font stack (CSS):** `font-family: 'Inter', 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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` skill（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Intercom 的网站是一个温暖、充满自信的客服平台，通过干净、富有杂志编辑感的设计语言传达出“AI 优先的服务台”理念。页面采用暖灰白色的画布（`#faf9f6`）搭配深黑色（`#111111`）的文字，营造出一种亲切的、类似杂志的阅读体验。标志性的 Fin 橙色（`#ff5600`）——以 Intercom 的 AI agent 命名——作为暖中性色调中唯一充满活力的强调色。
+
+排版使用 Saans —— 一种定制的几何无衬线字体，具有极紧的负字间距（80px 时为 -2.4px，24px 时为 -0.48px），并且在所有标题尺寸上保持一致的 1.00 行高。这创造了超紧凑的、类似广告牌的标题，给人一种经过精密工程设计的感觉。Serrif 为杂志编辑时刻提供了衬线伴侣，而 SaansMono 则处理代码和大写的技术标签。MediumLL 和 LLMedium 出现在特定的 UI 场景中，创建了一个丰富的五字体生态系统。
+
+Intercom 的独特之处在于其极其锐利的几何感——按钮上 4px 的 border-radius 创造了近乎矩形的交互元素，让人感觉工业化且精准，与温暖的表面颜色形成鲜明对比。Button 的 hover 状态使用 `scale(1.1)` 放大，创造出一种物理上的“生长”交互。border 系统使用温暖的燕麦色调（`#dedbd6`）和基于 oklab 的透明度值，以实现精细的颜色管理。
+
+**核心特征：**
+- 暖灰白色画布（`#faf9f6`）搭配燕麦色调边框（`#dedbd6`）
+- Saans 字体，具有极紧的负字间距（80px 时为 -2.4px）和 1.00 行高
+- Fin Orange（`#ff5600`）作为唯一的品牌强调色
+- 锐利的 4px border-radius —— 近乎矩形的按钮和元素
+- Hover 时 scale(1.1)，Active 时 scale(0.85) —— 物理按键般的交互反馈
+- SaansMono 大写标签，具有较宽的字间距（0.6px–1.2px）
+- 丰富的多彩报告调色板（蓝色、绿色、红色、粉色、酸橙色、橙色）
+- oklab 颜色值，用于精细的透明度管理
+
+## 2. 调色板与角色
+
+### Primary
+- **Off Black** (`#111111`)：`--color-off-black`，主要文本、按钮背景
+- **Pure White** (`#ffffff`)：`--wsc-color-content-primary`，主要表面
+- **Warm Cream** (`#faf9f6`)：按钮背景、卡片表面
+- **Fin Orange** (`#ff5600`)：`--color-fin`，主要品牌强调色
+- **Report Orange** (`#fe4c02`)：`--color-report-orange`，数据可视化
+
+### Report Palette
+- **Report Blue** (`#65b5ff`)：`--color-report-blue`
+- **Report Green** (`#0bdf50`)：`--color-report-green`
+- **Report Red** (`#c41c1c`)：`--color-report-red`
+- **Report Pink** (`#ff2067`)：`--color-report-pink`
+- **Report Lime** (`#b3e01c`)：`--color-report-lime-300`
+- **Green** (`#00da00`)：`--color-green`
+- **Deep Blue** (`#0007cb`)：深蓝色强调色
+
+### Neutral Scale (Warm)
+- **Black 80** (`#313130`)：`--wsc-color-black-80`，深色中性色
+- **Black 60** (`#626260`)：`--wsc-color-black-60`，中等中性色
+- **Black 50** (`#7b7b78`)：`--wsc-color-black-50`，柔和文本色
+- **Content Tertiary** (`#9c9fa5`)：`--wsc-color-content-tertiary`
+- **Oat Border** (`#dedbd6`)：暖色边框颜色
+- **Warm Sand** (`#d3cec6`)：浅暖中性色
+
+## 3. 排版规则
+
+### Font Families
+- **Primary**：`Saans`，回退顺序：`Saans Fallback, ui-sans-serif, system-ui`
+- **Serif**：`Serrif`，回退顺序：`Serrif Fallback, ui-serif, Georgia`
+- **Monospace**：`SaansMono`，回退顺序：`SaansMono Fallback, ui-monospace`
+- **UI**：`MediumLL` / `LLMedium`，回退顺序：`system-ui, -apple-system`
+
+### 层级结构
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 |
+| ------ | ------ | ------ | -------- | ------------- | ---------------- |
+| Display Hero | Saans | 80px | 400 | 1.00 (tight) | -2.4px |
+| Section Heading | Saans | 54px | 400 | 1.00 | -1.6px |
+| Sub-heading | Saans | 40px | 400 | 1.00 | -1.2px |
+| Card Title | Saans | 32px | 400 | 1.00 | -0.96px |
+| Feature Title | Saans | 24px | 400 | 1.00 | -0.48px |
+| Body Emphasis | Saans | 20px | 400 | 0.95 | -0.2px |
+| Nav / UI | Saans | 18px | 400 | 1.00 | normal |
+| Body | Saans | 16px | 400 | 1.50 | normal |
+| Body Light | Saans | 14px | 300 | 1.40 | normal |
+| Button | Saans | 16px / 14px | 400 | 1.50 / 1.43 | normal |
+| Button Bold | LLMedium | 16px | 700 | 1.20 | 0.16px |
+| Serif Body | Serrif | 16px | 300 | 1.40 | -0.16px |
+| Mono Label | SaansMono | 12px | 400–500 | 1.00–1.30 | 0.6px–1.2px uppercase |
+
+## 4. 组件样式
+
+### Buttons
+
+**Primary Dark**
+- Background：`#111111`
+- Text：`#ffffff`
+- Padding：0px 14px
+- Radius：4px
+- Hover：白色背景、深色文本、scale(1.1)
+- Active：绿色背景（`#2c6415`）、scale(0.85)
+
+**Outlined**
+- Background：transparent
+- Text：`#111111`
+- Border：`1px solid #111111`
+- Radius：4px
+- 相同的 scale hover/active 行为
+
+**Warm Card Button**
+- Background：`#faf9f6`
+- Text：`#111111`
+- Padding：16px
+- Border：`1px solid oklab(... / 0.1)`
+
+### Cards & Containers
+- Background：`#faf9f6`（warm cream）
+- Border：`1px solid #dedbd6`（warm oat）
+- Radius：8px
+- 无可见阴影
+
+### Navigation
+- 链接使用 Saans 16px
+- 白色背景上的 Off-black 文本
+- 小尺寸的 4px–6px radius 按钮
+- AI 功能使用橙色 Fin 强调色
+
+## 5. 布局原则
+
+### Spacing：8px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 60px, 64px, 80px, 96px
+### Border Radius：4px（buttons），6px（nav items），8px（cards, containers）
+
+## 6. 深度与阴影
+极简阴影。通过暖色边框和表面色调来体现深度。
+
+## 7. 宜与忌
+
+### 宜
+- 在所有标题上使用 Saans、1.00 行高和负字间距
+- 在按钮上应用 4px radius —— 锐利的几何感是其核心标识
+- 仅将 Fin Orange（#ff5600）用于 AI/品牌强调
+- 在按钮上应用 scale(1.1) 的 hover 效果
+- 使用暖中性色（#faf9f6, #dedbd6）
+
+### 忌
+- 不要将按钮的圆角设为超过 4px
+- 不要将 Fin Orange 用于纯装饰目的
+- 不要使用冷灰色边框 —— 必须始终使用暖色燕麦色调
+- 不要忽略标题的负字间距
+
+## 8. 响应式行为
+Breakpoints：425px, 530px, 600px, 640px, 768px, 896px
+
+## 9. Agent Prompt 指南
+
+### 快速颜色参考
+- Text：Off Black (`#111111`)
+- Background：Warm Cream (`#faf9f6`)
+- Accent：Fin Orange (`#ff5600`)
+- Border：Oat (`#dedbd6`)
+- Muted：`#7b7b78`
+
+### 示例 Component Prompts
+- "Create hero: warm cream (#faf9f6) background. Saans 80px weight 400, line-height 1.00, letter-spacing -2.4px, #111111. Dark button (#111111, 4px radius). Hover: scale(1.1), white bg."

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

@@ -0,0 +1,138 @@
+# 设计系统：Kraken
+
+
+> **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` 技能（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Kraken 的网站是一个干净、值得信赖的加密货币交易所，以紫色作为其主导品牌色。该设计在白色背景上运行，搭配 Kraken 紫色（`#7132f5`、`#5741d8`、`#5b1ecf`），营造出独特、专业的加密货币品牌形象。专有的 Kraken-Brand 字体以粗体（700）字重和负字间距处理展示标题，而 Kraken-Product（以 IBM Plex Sans 作为备选字体）则作为 UI 的主力字体。
+
+**主要特征：**
+- 以 Kraken 紫色（`#7132f5`）作为主品牌色，并具有较深的变体（`#5741d8`、`#5b1ecf`）
+- Kraken-Brand（展示）+ Kraken-Product（UI）双字体系统
+- 接近黑色（`#101114`）的文本，配有冷色调的蓝灰色中性色阶
+- 12px 圆角按钮（圆角而非药丸状）
+- 微妙的阴影（`rgba(0,0,0,0.03) 0px 4px 24px`） — 轻声细语般的存在感
+- 绿色强调色（`#149e61`）用于正面/成功状态
+
+## 2. 调色板与角色
+
+### 原色
+- **Kraken Purple** (`#7132f5`)：主要 CTA、品牌强调色、链接
+- **Purple Dark** (`#5741d8`)：按钮边框、描边变体
+- **Purple Deep** (`#5b1ecf`)：最深紫色
+- **Purple Subtle** (`rgba(133,91,251,0.16)`)：16% 不透明度的紫色 — 淡雅的按钮背景
+- **Near Black** (`#101114`)：主要文本
+
+### 中性色
+- **Cool Gray** (`#686b82`)：主要中性色，24% 不透明度的边框
+- **Silver Blue** (`#9497a9`)：次要文本、弱化元素
+- **White** (`#ffffff`)：主要表面
+- **Border Gray** (`#dedee5`)：分割线边框
+
+### 语义色
+- **Green** (`#149e61`)：成功/正面状态，16% 不透明度用于徽章
+- **Green Dark** (`#026b3f`)：徽章文本
+
+## 3. 排版规则
+
+### 字体家族
+- **展示字体**: `Kraken-Brand`，备选：`IBM Plex Sans, Helvetica, Arial`
+- **UI / 正文字体**: `Kraken-Product`，备选：`Helvetica Neue, Helvetica, Arial`
+
+### 层级
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 |
+| ------ | ------ | ------ | -------- | ------------- | ---------------- |
+| 展示 Hero | Kraken-Brand | 48px | 700 | 1.17 | -1px |
+| 区块标题 | Kraken-Brand | 36px | 700 | 1.22 | -0.5px |
+| 副标题 | Kraken-Brand | 28px | 700 | 1.29 | -0.5px |
+| 功能标题 | Kraken-Product | 22px | 600 | 1.20 | normal |
+| 正文 | Kraken-Product | 16px | 400 | 1.38 | normal |
+| 正文（中等） | Kraken-Product | 16px | 500 | 1.38 | normal |
+| 按钮 | Kraken-Product | 16px | 500–600 | 1.38 | normal |
+| 说明文字 | Kraken-Product | 14px | 400–700 | 1.43–1.71 | normal |
+| 小号文本 | Kraken-Product | 12px | 400–500 | 1.33 | normal |
+| 微型文本 | Kraken-Product | 7px | 500 | 1.00 | uppercase |
+
+## 4. 组件样式
+
+### 按钮
+
+**主紫色按钮**
+- 背景：`#7132f5`
+- 文本：`#ffffff`
+- 内边距：13px 16px
+- 圆角：12px
+
+**紫色描边按钮**
+- 背景：`#ffffff`
+- 文本：`#5741d8`
+- 边框：`1px solid #5741d8`
+- 圆角：12px
+
+**淡紫色按钮**
+- 背景：`rgba(133,91,251,0.16)`
+- 文本：`#7132f5`
+- 内边距：8px
+- 圆角：12px
+
+**白色按钮**
+- 背景：`#ffffff`
+- 文本：`#101114`
+- 圆角：10px
+- 阴影：`rgba(0,0,0,0.03) 0px 4px 24px`
+
+**次要灰色按钮**
+- 背景：`rgba(148,151,169,0.08)`
+- 文本：`#101114`
+- 圆角：12px
+
+### 徽章
+- 成功：`rgba(20,158,97,0.16)` 背景，`#026b3f` 文本，6px 圆角
+- 中性：`rgba(104,107,130,0.12)` 背景，`#484b5e` 文本，8px 圆角
+
+## 5. 布局原则
+
+### 间距: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 25px
+### 圆角: 3px, 6px, 8px, 10px, 12px, 16px, 9999px, 50%
+
+## 6. 深度与高度
+- 微妙: `rgba(0,0,0,0.03) 0px 4px 24px`
+- 微型: `rgba(16,24,40,0.04) 0px 1px 4px`
+
+## 7. 注意事项
+
+### 推荐做法
+- 在 CTA 和链接中使用 Kraken 紫色 (#7132f5)
+- 为所有按钮应用 12px 圆角
+- 标题使用 Kraken-Brand 字体，正文使用 Kraken-Product 字体
+
+### 避免做法
+- 不要使用药丸状按钮 — 12px 是按钮的最大圆角
+- 不要使用规定色阶以外的其他紫色
+
+## 8. 响应式行为
+断点：375px, 425px, 640px, 768px, 1024px, 1280px, 1536px
+
+## 9. Agent Prompt 指南
+
+### 快速颜色参考
+- 品牌色：Kraken 紫色 (`#7132f5`)
+- 深色变体：`#5741d8`
+- 文本色：接近黑色 (`#101114`)
+- 次要文本色：`#9497a9`
+- 背景色：白色 (`#ffffff`)
+
+### 示例 Component Prompts
+- "Create hero: white background. Kraken-Brand 48px weight 700, letter-spacing -1px. Purple CTA (#7132f5, 12px radius, 13px 16px padding)."

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

@@ -0,0 +1,380 @@
+# 设计系统：Linear
+
+
+> **Hermes Agent — 实施说明**
+>
+> 原网站使用专有字体。对于独立的 HTML 输出，请使用以下 CDN 替代字体：
+> - **主要字体：** `Inter` | **等宽字体 (Mono)：** `JetBrains Mono`
+> - **字体堆栈 (CSS)：** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **等宽字体堆栈 (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&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` 技能（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Linear 的网站是深色模式优先产品设计的典范——近黑色的画布（`#08090a`）让内容像星光一样从黑暗中浮现。整体印象是一种极致的精密工程设计：每个元素都存在于精心校准的亮度层级中，从几乎不可见的边框（`rgba(255,255,255,0.05)`）到柔和、发光的文字（`#f7f8f8`）。这不是在浅色设计上强加的深色主题——黑暗是其原生媒介，信息的密集程度通过白色透明度的微妙渐变来管理，而不是色彩变化。
+
+排版系统完全基于开启了 OpenType 特性 `"cv01"` 和 `"ss03"` 的 Inter Variable 字体，赋予了该字体更干净、更具几何感的特征。Inter 在惊人的字重范围内使用——从 300（细体正文）到 510（中粗体，Linear 的标志性字重），再到 590（半粗体强调）。510 字重尤为独特：它介于常规体和中粗体之间，创造出一种不张扬的微妙强调感。在展示尺寸（72px, 64px, 48px）下，Inter 使用激进的负字间距（-1.584px 到 -1.056px），创造出紧凑、权威的标题，让人觉得是工程制造出来的而非设计出来的。Berkeley Mono 作为代码和技术标签的等宽字体伴侣，具有 ui-monospace、SF Mono 和 Menlo 的备用字体。
+
+色彩系统几乎完全是消色差的——带有白色/灰色文字的深色背景——唯一的品牌强调色打破了这一点：Linear 标志性的靛紫罗兰色（背景为 `#5e6ad2`，交互强调色为 `#7170ff`）。这种强调色被刻意且节约地使用，仅出现在 CTA、激活状态和品牌元素上。边框系统使用超细、半透明的白色边框（`rgba(255,255,255,0.05)` 到 `rgba(255,255,255,0.08)`），在没有视觉噪音的情况下创建了结构，就像在月光下绘制的线框图。
+
+**关键特征：**
+- 深色模式原生：`#08090a` 营销背景，`#0f1011` 面板背景，`#191a1b` 凸起表面
+- 全局启用 `"cv01", "ss03"` 的 Inter Variable —— 几何替代字符带来更干净的美感
+- 标志性字重 510（介于常规体和中粗体之间）用于大多数 UI 文本
+- 展示尺寸下使用激进的负字间距（72px 时为 -1.584px，48px 时为 -1.056px）
+- 品牌靛紫罗兰色：`#5e6ad2`（背景）/ `#7170ff`（强调）/ `#828fff`（悬停）—— 系统中唯一的彩色
+- 通用的半透明白色边框：`rgba(255,255,255,0.05)` 到 `rgba(255,255,255,0.08)`
+- 按钮背景的透明度接近零：`rgba(255,255,255,0.02)` 到 `rgba(255,255,255,0.05)`
+- 带有内嵌变体的多层阴影，在深色表面上营造立体感
+- Radix UI 基础组件作为组件基础（检测到 6 个基础组件）
+- 成功绿色（`#27a644`, `#10b981`）仅用于状态指示器
+
+## 2. 调色板与角色
+
+### 背景表面
+- **营销黑** (`#010102` / `#08090a`)：最深的背景——主视觉区域和营销页面的画布。接近纯黑，带有难以察觉的冷蓝色调。
+- **深色面板** (`#0f1011`)：侧边栏和面板背景。比营销黑高一个层级。
+- **Level 3 表面** (`#191a1b`)：凸起的表面区域、卡片背景、下拉菜单。
+- **次要表面** (`#28282c`)：最浅的深色表面——用于悬停状态和略微凸起的组件。
+
+### 文本与内容
+- **主要文本** (`#f7f8f8`)：略带暖色调的近白色。默认文本颜色——不是纯白，防止在深色背景上引起眼睛疲劳。
+- **次要文本** (`#d0d6e0`)：冷银灰色，用于正文、描述和次要内容。
+- **三级文本** (`#8a8f98`)：柔和的灰色，用于占位符、元数据和弱化的内容。
+- **四级文本** (`#62666d`)：最暗淡的文本——时间戳、禁用状态、细微的标签。
+
+### 品牌与强调色
+- **品牌靛蓝** (`#5e6ad2`)：主要品牌颜色——用于 CTA 按钮背景、品牌标志和关键交互表面。
+- **强调紫** (`#7170ff`)：更亮的变体，用于交互元素——链接、激活状态、选中项。
+- **悬停强调** (`#828fff`)：更浅、饱和度更高的变体，用于强调元素的悬停状态。
+- **安全淡紫** (`#7a7fad`)：柔和的靛蓝色，专门用于安全相关的 UI 元素。
+
+### 状态颜色
+- **绿色** (`#27a644`)：主要成功/活跃状态。用于“进行中”指示器。
+- **翠绿** (`#10b981`)：次要成功颜色——胶囊标签、完成状态。
+
+### 边框与分割线
+- **主要边框** (`#23252a`)：实线深色边框，用于突出的分隔。
+- **次要边框** (`#34343a`)：略浅的实线边框。
+- **三级边框** (`#3e3e44`)：最浅的实线边框变体。
+- **细微边框** (`rgba(255,255,255,0.05)`)：极度细微的半透明边框——默认选项。
+- **标准边框** (`rgba(255,255,255,0.08)`)：用于卡片、输入框、代码块的标准半透明边框。
+- **染色线** (`#141516`)：几乎不可见的线条，用于最细微的分隔。
+- **三级线** (`#18191a`)：略微更明显的分割线。
+
+### 浅色模式中性色（用于浅色主题环境）
+- **浅色背景** (`#f7f8f8`)：浅色模式下的页面背景。
+- **浅色表面** (`#f3f4f5` / `#f5f6f7`)：细微的表面着色。
+- **浅色边框** (`#d0d6e0`)：浅色环境中可见的边框。
+- **替代浅色边框** (`#e6e6e6`)：替代的更浅的边框。
+- **纯白** (`#ffffff`)：卡片表面、高光。
+
+### 遮罩层
+- **主要遮罩** (`rgba(0,0,0,0.85)`)：模态框/对话框背景——极暗以实现焦点隔离。
+
+## 3. 排版规则
+
+### 字体系列
+- **主要**：`Inter Variable`，备用字体：`SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue`
+- **等宽字体**：`Berkeley Mono`，备用字体：`ui-monospace, SF Mono, Menlo`
+- **OpenType 特性**：全局启用 `"cv01", "ss03"` —— cv01 提供替代的小写字母 'a'（单层结构），ss03 调整特定字形以获得更干净的几何外观。
+
+### 层级
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display XL | Inter Variable | 72px (4.50rem) | 510 | 1.00 (tight) | -1.584px | Hero 标题，最大视觉冲击力 |
+| Display Large | Inter Variable | 64px (4.00rem) | 510 | 1.00 (tight) | -1.408px | 次要 Hero 文本 |
+| Display | Inter Variable | 48px (3.00rem) | 510 | 1.00 (tight) | -1.056px | 区块标题 |
+| Heading 1 | Inter Variable | 32px (2.00rem) | 400 | 1.13 (tight) | -0.704px | 主要区块标题 |
+| Heading 2 | Inter Variable | 24px (1.50rem) | 400 | 1.33 | -0.288px | 子区块标题 |
+| Heading 3 | Inter Variable | 20px (1.25rem) | 590 | 1.33 | -0.24px | 功能标题，卡片标题 |
+| Body Large | Inter Variable | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.165px | 引言文本，功能描述 |
+| Body Emphasis | Inter Variable | 17px (1.06rem) | 590 | 1.60 (relaxed) | normal | 强调正文，内容中的副标题 |
+| Body | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | 标准阅读文本 |
+| Body Medium | Inter Variable | 16px (1.00rem) | 510 | 1.50 | normal | 导航，标签 |
+| Body Semibold | Inter Variable | 16px (1.00rem) | 590 | 1.50 | normal | 强烈强调 |
+| Small | Inter Variable | 15px (0.94rem) | 400 | 1.60 (relaxed) | -0.165px | 次要正文 |
+| Small Medium | Inter Variable | 15px (0.94rem) | 510 | 1.60 (relaxed) | -0.165px | 强调的小号文本 |
+| Small Semibold | Inter Variable | 15px (0.94rem) | 590 | 1.60 (relaxed) | -0.165px | 强调的小号文本 |
+| Small Light | Inter Variable | 15px (0.94rem) | 300 | 1.47 | -0.165px | 弱化正文 |
+| Caption Large | Inter Variable | 14px (0.88rem) | 510–590 | 1.50 | -0.182px | 次级标签，分类标题 |
+| Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | 元数据，时间戳 |
+| Label | Inter Variable | 12px (0.75rem) | 400–590 | 1.40 | normal | 按钮文本，小标签 |
+| Micro | Inter Variable | 11px (0.69rem) | 510 | 1.40 | normal | 微小标签 |
+| Tiny | Inter Variable | 10px (0.63rem) | 400–510 | 1.50 | -0.15px | 上划线文本，有时大写 |
+| Link Large | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | 标准链接 |
+| Link Medium | Inter Variable | 15px (0.94rem) | 510 | 2.67 | normal | 间距宽松的导航链接 |
+| Link Small | Inter Variable | 14px (0.88rem) | 510 | 1.50 | normal | 紧凑链接 |
+| Link Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | 页脚，元数据链接 |
+| Mono Body | Berkeley Mono | 14px (0.88rem) | 400 | 1.50 | normal | 代码块 |
+| Mono Caption | Berkeley Mono | 13px (0.81rem) | 400 | 1.50 | normal | 代码标签 |
+| Mono Label | Berkeley Mono | 12px (0.75rem) | 400 | 1.40 | normal | 代码元数据，有时大写 |
+
+### 原则
+- **510 是标志性字重**：Linear 使用 Inter Variable 的 510 字重（介于常规体 400 和中粗体 500 之间）作为其默认强调字重。这创造了一种微妙的加粗感，而没有传统中粗体或半粗体的厚重感。
+- **按比例压缩**：展示尺寸使用逐渐收紧的字间距——72px 时为 -1.584px，64px 时为 -1.408px，48px 时为 -1.056px，32px 时为 -0.704px。在 24px 以下，间距向正常值放松。
+- **作为身份标识的 OpenType**：`"cv01", "ss03"` 不是装饰性的——它们将 Inter 转变为 Linear 独特的字体，赋予其更具几何感、更有目的性的特征。
+- **三级字重系统**：400（阅读），510（强调/UI），590（强烈强调）。300 字重仅出现在刻意弱化的场景中。
+
+## 4. 组件样式
+
+### 按钮
+
+**幽灵按钮 (默认)**
+- 背景：`rgba(255,255,255,0.02)`
+- 文本：`#e2e4e7`（近白色）
+- 内边距：舒适
+- 圆角：6px
+- 边框：`1px solid rgb(36, 40, 44)`
+- 轮廓：无
+- 聚焦阴影：`rgba(0,0,0,0.1) 0px 4px 12px`
+- 用途：标准动作，次要 CTA
+
+**细微按钮**
+- 背景：`rgba(255,255,255,0.04)`
+- 文本：`#d0d6e0`（银灰色）
+- 内边距：0px 6px
+- 圆角：6px
+- 用途：工具栏动作，上下文按钮
+
+**主要品牌按钮 (推断)**
+- 背景：`#5e6ad2`（品牌靛蓝）
+- 文本：`#ffffff`
+- 内边距：8px 16px
+- 圆角：6px
+- 悬停：切换为 `#828fff`
+- 用途：主要 CTA（“开始构建”，“注册”）
+
+**图标按钮 (圆形)**
+- 背景：`rgba(255,255,255,0.03)` 或 `rgba(255,255,255,0.05)`
+- 文本：`#f7f8f8` 或 `#ffffff`
+- 圆角：50%
+- 边框：`1px solid rgba(255,255,255,0.08)`
+- 用途：关闭，菜单切换，纯图标动作
+
+**胶囊按钮**
+- 背景：透明
+- 文本：`#d0d6e0`
+- 内边距：0px 10px 0px 5px
+- 圆角：9999px
+- 边框：`1px solid rgb(35, 37, 42)`
+- 用途：筛选标签，标签，状态指示器
+
+**小工具栏按钮**
+- 背景：`rgba(255,255,255,0.05)`
+- 文本：`#62666d`（柔和）
+- 圆角：2px
+- 边框：`1px solid rgba(255,255,255,0.05)`
+- 阴影：`rgba(0,0,0,0.03) 0px 1.2px 0px 0px`
+- 字体：12px 字重 510
+- 用途：工具栏动作，快速访问控件
+
+### 卡片与容器
+- 背景：`rgba(255,255,255,0.02)` 到 `rgba(255,255,255,0.05)`（从不使用纯色——总是半透明）
+- 边框：`1px solid rgba(255,255,255,0.08)`（标准）或 `1px solid rgba(255,255,255,0.05)`（细微）
+- 圆角：8px（标准），12px（特色），22px（大面板）
+- 阴影：`rgba(0,0,0,0.2) 0px 0px 0px 1px` 或分层多阴影堆叠
+- 悬停：背景透明度细微增加
+
+### 输入框与表单
+
+**文本区域**
+- 背景：`rgba(255,255,255,0.02)`
+- 文本：`#d0d6e0`
+- 边框：`1px solid rgba(255,255,255,0.08)`
+- 内边距：12px 14px
+- 圆角：6px
+
+**搜索输入框**
+- 背景：透明
+- 文本：`#f7f8f8`
+- 内边距：1px 32px（感知图标）
+
+**按钮样式输入框**
+- 文本：`#8a8f98`
+- 内边距：1px 6px
+- 圆角：5px
+- 聚焦阴影：多层堆叠
+
+### 徽章与标签
+
+**成功标签**
+- 背景：`#10b981`
+- 文本：`#f7f8f8`
+- 圆角：50%（圆形）
+- 字体：10px 字重 510
+- 用途：状态点，完成指示器
+
+**中性标签**
+- 背景：透明
+- 文本：`#d0d6e0`
+- 内边距：0px 10px 0px 5px
+- 圆角：9999px
+- 边框：`1px solid rgb(35, 37, 42)`
+- 字体：12px 字重 510
+- 用途：标签，筛选标签，分类标签
+
+**细微徽章**
+- 背景：`rgba(255,255,255,0.05)`
+- 文本：`#f7f8f8`
+- 内边距：0px 8px 0px 2px
+- 圆角：2px
+- 边框：`1px solid rgba(255,255,255,0.05)`
+- 字体：10px 字重 510
+- 用途：内联标签，版本标签
+
+### 导航
+- 近黑色背景上的深色粘性标题
+- 左对齐的 Linear 标志（SVG 图标）
+- 链接：Inter Variable 13–14px 字重 510，文本颜色 `#d0d6e0`
+- 激活/悬停：文本变亮为 `#f7f8f8`
+- CTA：品牌靛蓝按钮或幽灵按钮
+- 移动端：折叠为汉堡菜单
+- 搜索：命令面板触发器（`/` 或 `Cmd+K`）
+
+### 图像处理
+- 深色背景上的产品截图带有细微边框（`rgba(255,255,255,0.08)`）
+- 顶部圆角图像：`12px 12px 0px 0px` 圆角
+- 仪表板/Issue 预览主导功能区域
+- 截图下方细微的阴影：`rgba(0,0,0,0.4) 0px 2px 4px`
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 比例：1px, 4px, 7px, 8px, 11px, 12px, 16px, 19px, 20px, 22px, 24px, 28px, 32px, 35px
+- 7px 和 11px 的值用于光学对齐的微调
+- 主要节奏：8px, 16px, 24px, 32px（标准 8px 网格）
+
+### 网格与容器
+- 最大内容宽度：大约 1200px
+- Hero：居中单列，带有充足的垂直内边距
+- 特性区域：用于功能卡片的 2–3 列网格
+- 全宽深色区域，内部有最大宽度限制
+- 更新日志：单列时间轴布局
+
+### 留白理念
+- **黑暗即空间**：在 Linear 的深色画布上，空白不是白色的——而是缺失。近黑色的背景本身就是留白，内容从中浮现。
+- **压缩标题，扩展环境**：72px、字间距 -1.584px 的展示文本密集且紧凑，但位于广阔的深色内边距中。排版密度与空间宽裕度之间的对比创造了张力。
+- **区块隔离**：每个功能区由充足的垂直内边距（80px+）分隔，没有可见的分割线——深色背景提供了自然的分隔。
+
+### 圆角比例
+- 微小 (2px)：内联徽章，工具栏按钮，细微标签
+- 标准 (4px)：小型容器，列表项
+- 舒适 (6px)：按钮，输入框，功能性元素
+- 卡片 (8px)：卡片，下拉菜单，弹窗
+- 面板 (12px)：面板，特色卡片，区块容器
+- 大型 (22px)：大型面板元素
+- 全胶囊 (9999px)：标签，筛选标签，状态标记
+- 圆形 (50%)：图标按钮，头像，状态点
+
+## 6. 深度与层级
+
+| 级别 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影，`#010102` 背景 | 页面背景，最深的画布 |
+| Subtle (Level 1) | `rgba(0,0,0,0.03) 0px 1.2px 0px` | 工具栏按钮，微型立体感 |
+| Surface (Level 2) | `rgba(255,255,255,0.05)` 背景 + `1px solid rgba(255,255,255,0.08)` 边框 | 卡片，输入框，容器 |
+| Inset (Level 2b) | `rgba(0,0,0,0.2) 0px 0px 12px 0px inset` | 凹陷面板，内阴影 |
+| Ring (Level 3) | `rgba(0,0,0,0.2) 0px 0px 0px 1px` | 将边框作为阴影的技术 |
+| Elevated (Level 4) | `rgba(0,0,0,0.4) 0px 2px 4px` | 悬浮元素，下拉菜单 |
+| Dialog (Level 5) | 多层堆叠：`rgba(0,0,0,0) 0px 8px 2px, rgba(0,0,0,0.01) 0px 5px 2px, rgba(0,0,0,0.04) 0px 3px 2px, rgba(0,0,0,0.07) 0px 1px 1px, rgba(0,0,0,0.08) 0px 0px 1px` | 弹窗，命令面板，模态框 |
+| Focus | `rgba(0,0,0,0.1) 0px 4px 12px` + 附加层 | 交互元素上的键盘聚焦状态 |
+
+**阴影理念**：在深色表面上，传统的阴影（暗对暗）几乎是不可见的。Linear 通过使用半透明白色边框作为主要的深度指示器来解决此问题。层级不是通过阴影的黑暗度来传达的，而是通过背景亮度的阶梯——每个级别都会轻微增加表面背景的白色透明度（`0.02` → `0.04` → `0.05`），创造出微妙的堆叠效果。内阴影技术（`rgba(0,0,0,0.2) 0px 0px 12px 0px inset`）为凹陷面板创造了独特的“下沉”效果，增加了传统深色主题所缺乏的维度深度。
+
+## 7. 宜与忌
+
+### 宜
+- 在所有文本上使用带有 `"cv01", "ss03"` 的 Inter Variable——这些特性是 Linear 字体标识的基础
+- 使用 510 字重作为默认强调字重——这是 Linear 标志性的介于中间的字重
+- 在展示尺寸下应用激进的负字间距（72px 时为 -1.584px，48px 时为 -1.056px）
+- 在近黑色背景上进行构建：`#08090a` 用于营销，`#0f1011` 用于面板，`#191a1b` 用于凸起表面
+- 使用半透明白色边框（`rgba(255,255,255,0.05)` 到 `rgba(255,255,255,0.08)`）代替实心的深色边框
+- 保持按钮背景几乎透明：`rgba(255,255,255,0.02)` 到 `rgba(255,255,255,0.05)`
+- 将品牌靛蓝（`#5e6ad2` / `#7170ff`）仅保留用于主要 CTA 和交互强调
+- 使用 `#f7f8f8` 作为主要文本——不要用纯 `#ffffff`，那会太刺眼
+- 应用亮度堆叠模型：更深层 = 更暗的背景，凸起 = 略浅的背景
+
+### 忌
+- 不要使用纯白（`#ffffff`）作为主要文本——`#f7f8f8` 能防止眼睛疲劳
+- 不要为按钮使用纯色背景——透明度就是系统本身（rgba 白色在 0.02–0.05）
+- 不要将品牌靛蓝用于装饰——它仅保留用于交互/CTA 元素
+- 不要在展示文本上使用正字间距——Inter 在大尺寸下总是使用负间距
+- 不要在深色背景上使用可见/不透明的边框——边框应该是极其细微的半透明白色
+- 不要跳过 OpenType 特性（`"cv01", "ss03"`）——没有它们，这就是普通的 Inter，而不是 Linear 的 Inter
+- 不要使用 700（粗体）字重——Linear 的最大字重是 590，而 510 是主力字重
+- 不要将暖色引入 UI 框架——调色板是冷灰色，仅带蓝紫色强调
+- 不要在深色表面上使用投射阴影来营造立体感——应改用背景亮度步进
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Mobile Small | <600px | 单列，紧凑内边距 |
+| Mobile | 600–640px | 标准移动端布局 |
+| Tablet | 640–768px | 开始出现双列网格 |
+| Desktop Small | 768–1024px | 完整的卡片网格，扩展的内边距 |
+| Desktop | 1024–1280px | 标准桌面端，完整导航 |
+| Large Desktop | >1280px | 完整布局，宽裕的边距 |
+
+### 触摸目标
+- 按钮使用舒适的填充，最小圆角为 6px
+- 导航链接为 13–14px，带有足够的间距
+- 胶囊标签具有 10px 的水平内边距，便于触摸操作
+- 图标按钮为 50% 圆角，确保为圆形、易于点击的目标
+- 搜索触发器位置显眼，具有宽大的点击区域
+
+### 折叠策略
+- Hero：72px → 48px → 32px 展示文本，字间距按比例调整
+- 导航：水平链接 + CTA → 在 768px 时变为汉堡菜单
+- 特性卡片：3 列 → 2 列 → 堆叠单列
+- 产品截图：保持纵横比，可能会减少内边距
+- 更新日志：时间轴在所有尺寸下保持单列
+- 页脚：多列 → 堆叠单列
+- 区块间距：80px+ → 在移动端为 48px
+
+### 图像行为
+- 仪表板截图在所有尺寸下保持边框处理
+- Hero 视觉效果在移动端简化（减少浮动 UI 元素）
+- 产品截图使用响应式尺寸，并保持一致的圆角
+- 深色背景确保截图在任何视口下都能自然融合
+
+## 9. Agent 提示词指南
+
+### 快速颜色参考
+- 主要 CTA：品牌靛蓝（`#5e6ad2`）
+- 页面背景：营销黑（`#08090a`）
+- 面板背景：深色面板（`#0f1011`）
+- 表面：Level 3（`#191a1b`）
+- 标题文本：主要白色（`#f7f8f8`）
+- 正文文本：银灰色（`#d0d6e0`）
+- 柔和文本：三级灰色（`#8a8f98`）
+- 细微文本：四级灰色（`#62666d`）
+- 强调色：紫罗兰色（`#7170ff`）
+- 悬停强调色：浅紫罗兰色（`#828fff`）
+- 边框（默认）：`rgba(255,255,255,0.08)`
+- 边框（细微）：`rgba(255,255,255,0.05)`
+- 聚焦环：多层阴影堆叠
+
+### 组件提示词示例
+- “在 `#08090a` 背景上创建一个 Hero 区域。标题为 48px Inter Variable 字重 510，行高 1.00，字间距 -1.056px，颜色 `#f7f8f8`，font-feature-settings 为 `'cv01', 'ss03'`。副标题为 18px 字重 400，行高 1.60，颜色 `#8a8f98`。品牌 CTA 按钮（`#5e6ad2`，6px 圆角，8px 16px 内边距）和幽灵按钮（`rgba(255,255,255,0.02)` 背景，`1px solid rgba(255,255,255,0.08)` 边框，6px 圆角）。”
+- “在深色背景上设计一张卡片：`rgba(255,255,255,0.02)` 背景，`1px solid rgba(255,255,255,0.08)` 边框，8px 圆角。标题为 20px Inter Variable 字重 590，字间距 -0.24px，颜色 `#f7f8f8`。正文为 15px 字重 400，颜色 `#8a8f98`，字间距 -0.165px。”
+- “构建一个胶囊徽章：透明背景，`#d0d6e0` 文本，9999px 圆角，0px 10px 内边距，`1px solid #23252a` 边框，12px Inter Variable 字重 510。”
+- “创建导航：在 `#0f1011` 上的深色粘性标题。链接使用 Inter Variable 13px 字重 510，文本颜色 `#d0d6e0`。右对齐的品牌靛蓝 CTA `#5e6ad2`，6px 圆角。底部边框：`1px solid rgba(255,255,255,0.05)`。”
+- “设计一个命令面板：`#191a1b` 背景，`1px solid rgba(255,255,255,0.08)` 边框，12px 圆角，多层阴影堆叠。输入框为 16px Inter Variable 字重 400，文本 `#f7f8f8`。结果列表包含 13px 字重 510 标签（`#d0d6e0`）和 12px 元数据（`#62666d`）。”
+
+### 迭代指南
+1. 务必在所有 Inter 文本上设置 font-feature-settings `"cv01", "ss03"`——这对于 Linear 的外观是不可妥协的
+2. 字间距随字体大小缩放：72px 时为 -1.584px，48px 时为 -1.056px，32px 时为 -0.704px，16px 以下为 normal
+3. 三种字重：400（阅读），510（强调/导航），590（宣告）
+4. 通过背景透明度实现表面层级：`rgba(255,255,255, 0.02 → 0.04 → 0.05)`——在深色背景下绝不使用纯色背景
+5. 品牌靛蓝（`#5e6ad2` / `#7170ff`）是唯一的彩色——其他所有内容都是灰度的
+6. 边框始终是半透明白色，深色背景上绝不使用实心深色
+7. 任何代码或技术内容使用 Berkeley Mono，其他所有内容使用 Inter Variable