@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,243 @@
+# 设计系统：Pinterest
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原始站点使用专有字体。对于自包含的 HTML 输出，请使用这些 CDN 替代方案：
+> - **主字体:** `DM Sans` | **等宽字体:** `system monospace stack`
+> - **字体栈 (CSS):** `font-family: 'DM Sans', 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=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` 技能提供服务（cloudflared tunnel）。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Pinterest 的网站是一个充满温情、以灵感为导向的画布，将视觉发现视为一本生活方式杂志。该设计采用柔和、略带暖意的白色背景，并以 Pinterest 红 (`#e60023`) 作为单一、醒目的品牌强调色。与大多数科技平台的冷色调蓝色不同，Pinterest 的中性色阶具有明显的暖色调底色——灰色偏向于橄榄色/沙色 (`#91918c`, `#62625b`, `#e5e5e0`) 而不是冷峻的钢灰色，营造出一种温馨的、手工艺般的氛围，引人驻足浏览。
+
+排版使用 Pin Sans——这是一种定制的专有字体，具有包含日文字体在内的广泛备选字体栈，反映了 Pinterest 的全球化特征。在展示尺寸（70px，字重 600）下，Pin Sans 打造出宏大、引人入胜的标题。在较小尺寸下，系统变得紧凑：按钮为 12px，说明文本为 12–14px。CSS 变量命名系统 (`--comp-*`, `--sema-*`, `--base-*`) 揭示了一个复杂的三层设计令牌架构：组件级、语义级和基础级 token。
+
+Pinterest 的独特之处在于其大圆角系统（12px–40px，圆形为 50%）以及带有暖色调的按钮背景。次要按钮 (`#e5e5e0`) 具有明显的温暖、沙子般的色调，而不是冷灰色。主要的红色按钮使用 16px 圆角——圆润但不是胶囊形状。结合温暖的徽章背景 (`hsla(60,20%,98%,.5)` ——一种微妙的黄色暖晕) 和以摄影为主的布局，最终呈现出一种手工制作和个性化的设计感，而非企业化和刻板冷漠。
+
+**主要特征：**
+- 带有橄榄色/沙色调中性色的暖白色画布——温馨而不刻板
+- Pinterest 红 (`#e60023`) 作为单一的醒目强调色——从不微弱，总是充满自信
+- Pin Sans 定制字体，具备全球备选字体栈（包括 CJK）
+- 三层 token 架构：`--comp-*` / `--sema-*` / `--base-*`
+- 温暖的次级表面：沙灰色 (`#e5e5e0`)，温暖徽章 (`hsla(60,20%,98%,.5)`)
+- 大圆角：标准为 16px，大容器最高可达 40px
+- 摄影优先的内容——Pin/图片是主要的视觉元素
+- 接近深紫色的文本 (`#211922`)——温暖，带有一丝紫梅色调
+
+## 2. 调色板与角色
+
+### 品牌主色
+- **Pinterest 红** (`#e60023`)：主要 CTA，品牌强调色——大胆、自信的红色
+- **绿色 700** (`#103c25`)：`--base-color-green-700`，成功/自然主题强调色
+- **绿色 700 Hover** (`#0b2819`)：`--base-color-hover-green-700`，按下的绿色
+
+### 文本
+- **紫梅黑** (`#211922`)：主要文本——带有紫梅色调的暖接近黑
+- **纯黑** (`#000000`)：次要文本，按钮文本
+- **橄榄灰** (`#62625b`)：次要描述，弱化文本
+- **暖银色** (`#91918c`)：`--comp-button-color-text-transparent-disabled`，禁用文本，输入框边框
+- **纯白** (`#ffffff`)：深色/彩色表面上的文本
+
+### 交互色
+- **聚焦蓝** (`#435ee5`)：`--comp-button-color-border-focus-outer-transparent`，焦点环
+- **性能紫** (`#6845ab`)：`--sema-color-hover-icon-performance-plus`，性能相关特性
+- **推荐紫** (`#7e238b`)：`--sema-color-hover-text-recommendation`，AI 推荐
+- **链接蓝** (`#2b48d4`)：链接文本颜色
+- **Facebook 蓝** (`#0866ff`)：`--facebook-background-color`，社交登录
+- **按下蓝** (`#617bff`)：`--base-color-pressed-blue-200`，按下状态
+
+### 表面与边框
+- **沙灰** (`#e5e5e0`)：次要按钮背景——温暖的、手工艺感
+- **暖光色** (`#e0e0d9`)：圆形按钮背景，徽章
+- **暖晕** (`hsla(60, 20%, 98%, 0.5)`)：`--comp-badge-color-background-wash-light`，微妙的暖色徽章背景
+- **雾色** (`#f6f6f3`)：浅色表面（50% 不透明度）
+- **禁用边框** (`#c8c8c1`)：`--sema-color-border-disabled`，禁用状态的边框
+- **悬停灰** (`#bcbcb3`)：`--base-color-hover-grayscale-150`，悬停边框
+- **深色表面** (`#33332e`)：深色版块背景
+
+### 语义色
+- **错误红** (`#9e0a0a`)：复选框/表单的错误状态
+
+## 3. 排版规则
+
+### 字体族
+- **主要字体**：`Pin Sans`，备选字体：`-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
+
+### 层级结构
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字母间距 | 备注 |
+| ------ | ------ | ------ | -------- | ------------- | ---------------- | ------- |
+| 展示级标题 | Pin Sans | 70px (4.38rem) | 600 | normal | normal | 最大视觉冲击力 |
+| 版块标题 | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | 负向字间距 |
+| 正文 | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | 标准阅读体验 |
+| 粗体说明 | Pin Sans | 14px (0.88rem) | 700 | normal | normal | 强调型元数据 |
+| 说明文本 | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | 小号文本，标签 |
+| 按钮 | Pin Sans | 12px (0.75rem) | 400 | normal | normal | 按钮标签 |
+
+### 设计原则
+- **紧凑的字号比例**：范围从 12px 到 70px，跨度极大——大多数功能文本在 12–16px 之间，构建出紧凑的、应用级的信息层级。
+- **舒适的字重分布**：标题使用 600–700，正文使用 400–500。没有超细字重——字体始终显得饱满扎实。
+- **标题使用负向字间距**：在 28px 标题上应用 -1.2px 营造出舒适、亲切的版块标题。
+- **单一字体族**：Pin Sans 处理一切——未检测到次要的展示型或等宽字体。
+
+## 4. 组件样式
+
+### 按钮
+
+**主要红色按钮**
+- 背景：`#e60023` (Pinterest 红)
+- 文本：`#000000` (黑色——为了在红色上形成对比的不寻常选择)
+- 内边距：6px 14px
+- 圆角：16px (大圆角，非胶囊形)
+- 边框：`2px solid rgba(255, 255, 255, 0)` (透明)
+- 聚焦：通过 CSS 变量实现语义边框 + 轮廓
+
+**次要沙色按钮**
+- 背景：`#e5e5e0` (暖沙灰色)
+- 文本：`#000000`
+- 内边距：6px 14px
+- 圆角：16px
+- 聚焦：相同的语义边框系统
+
+**圆形操作按钮**
+- 背景：`#e0e0d9` (暖光色)
+- 文本：`#211922` (紫梅黑)
+- 圆角：50% (圆形)
+- 用途：Pin 操作，导航控件
+
+**幽灵 / 透明按钮**
+- 背景：透明
+- 文本：`#000000`
+- 无边框
+- 用途：第三级操作
+
+### 卡片与容器
+- 摄影优先的 Pin 卡片，带有大圆角 (12px–20px)
+- 大多数卡片没有传统的 box-shadow
+- 白色或温暖的雾色背景
+- 部分图片容器带有 8px 白色粗边框
+
+### 输入框
+- 邮箱输入：白色背景，`1px solid #91918c` 边框，16px 圆角，11px 15px 内边距
+- 聚焦：通过 CSS 变量实现语义边框 + 轮廓系统
+
+### 导航
+- 白色或温暖背景上的简洁页眉
+- Pinterest Logo + 居中的搜索栏
+- 导航链接使用 16px Pin Sans
+- 激活状态使用 Pinterest 红色点缀
+
+### 图片处理
+- Pin 样式的瀑布流网格（Pinterest 标志性布局）
+- 圆角：图片应用 12px–20px
+- 以摄影作为主要内容——每个 Pin 都是一张图片
+- 精选图片容器带有粗白边框 (8px)
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 比例：4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
+- 大跨度跳跃：32px → 80px → 100px 用于版块间距
+
+### 网格与容器
+- Pin 内容采用瀑布流网格（标志性布局）
+- 居中的内容版块，具有宽裕的最大宽度
+- 全宽的深色页脚
+- 搜索栏作为主导航元素
+
+### 留白理念
+- **高密度灵感**：瀑布流网格紧密排列 Pin——内容密度本身就是核心价值主张。留白存在于版块之间，而不是网格内部。
+- **上方呼吸，下方密集**：Hero/特性格版块拥有宽裕的留白；Pin 网格则紧凑且具有沉浸感。
+
+### 圆角比例
+- 标准 (12px)：小卡片，链接
+- 按钮 (16px)：按钮，输入框，中等卡片
+- 舒适 (20px)：特性卡片
+- 大型 (28px)：大型容器
+- 版块 (32px)：Tab 元素，大型面板
+- Hero (40px)：Hero 容器，大型特性区块
+- 圆形 (50%)：操作按钮，Tab 指示器
+
+## 6. 深度与层级
+
+| 级别 | 处理方式 | 用途 |
+| ------- | ----------- | ----- |
+| 扁平 (Level 0) | 无阴影 | 默认——Pin 依赖内容，而非阴影 |
+| 微弱 (Level 1) | 极小阴影 (来自 token) | 悬浮遮罩层，下拉菜单 |
+| 聚焦 (无障碍) | `--sema-color-border-focus-outer-default` 环 | 聚焦状态 |
+
+**阴影哲学**：Pinterest 使用极少的阴影。瀑布流网格依赖内容（摄影）来创造视觉趣味，而不是悬浮效果。深度来自于表面颜色的温暖感和容器的大圆角。
+
+## 7. 宜与忌
+
+### 宜
+- 使用温暖的中性色 (`#e5e5e0`, `#e0e0d9`, `#91918c`) ——温暖的橄榄色/沙色调是其身份特征
+- 仅将 Pinterest 红 (`#e60023`) 用于主要 CTA——它醒目且独一无二
+- 专门使用 Pin Sans——一种字体搞定一切
+- 采用大圆角：按钮/输入框为 16px，卡片为 20px 以上
+- 保持瀑布流网格的紧凑——内容密度即核心价值
+- 使用暖色徽章背景 (`hsla(60,20%,98%,.5)`) 营造微妙的暖晕
+- 使用 `#211922` (紫梅黑) 作为主要文本——它比纯黑更温暖
+
+### 忌
+- 不要使用冷调灰色——必须始终使用暖色/橄榄色调
+- 不要使用纯黑 (`#000000`) 作为主要文本——请使用紫梅黑 (`#211922`)
+- 不要使用胶囊形按钮——16px 圆角是圆润的，但非胶囊形
+- 不要添加厚重的阴影——Pinterest 设计上是扁平的，深度来源于内容
+- 不要在卡片上使用过小的圆角 (<12px)——大圆角是核心
+- 不要引入额外的品牌颜色——红色 + 暖中性色就是完整的调色板
+- 不要使用极细的字重——Pin Sans 最低使用 400 字重
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 主要变化 |
+| ------ | ------- | ------------- |
+| 手机 | <576px | 单列，紧凑布局 |
+| 大手机 | 576–768px | 2 列 Pin 网格 |
+| 平板 | 768–890px | 扩展网格 |
+| 小桌面 | 890–1312px | 标准瀑布流网格 |
+| 桌面 | 1312–1440px | 完整布局 |
+| 大桌面 | 1440–1680px | 扩展网格列 |
+| 超宽屏 | >1680px | 最大网格密度 |
+
+### 折叠策略
+- Pin 网格：5+ 列 → 3 → 2 → 1
+- 导航：搜索栏 + 图标 → 简化的移动端导航
+- 特性版块：左右并排 → 上下堆叠
+- Hero：70px → 按比例缩小
+- 页脚：深色多列 → 堆叠
+
+## 9. Agent 提示词指南
+
+### 快速颜色参考
+- 品牌：Pinterest 红 (`#e60023`)
+- 背景：纯白 (`#ffffff`)
+- 文本：紫梅黑 (`#211922`)
+- 次要文本：橄榄灰 (`#62625b`)
+- 按钮表面：沙灰 (`#e5e5e0`)
+- 边框：暖银色 (`#91918c`)
+- 聚焦：聚焦蓝 (`#435ee5`)
+
+### 示例 Component Prompts
+- "创建一个 hero：白色背景。标题使用 70px Pin Sans 600 字重，紫梅黑 (#211922)。红色 CTA 按钮 (#e60023, 16px 圆角, 6px 14px 内边距)。次级沙色按钮 (#e5e5e0, 16px 圆角)。"
+- "设计一个 Pin 卡片：白色背景，16px 圆角，无阴影。上方填满摄影图片，下方是 16px Pin Sans 400 字重的描述，颜色为 #62625b。"
+- "构建一个圆形操作按钮：#e0e0d9 背景，50% 圆角，#211922 图标。"
+- "创建一个输入框：白色背景，1px solid #91918c 边框，16px 圆角，11px 15px 内边距。聚焦：通过语义 token 实现蓝色轮廓。"
+- "设计深色页脚：#33332e 背景。白色的 Pinterest 手写体 Logo。12px Pin Sans 链接，颜色为 #91918c。"
+
+### 迭代指南
+1. 处处使用暖中性色——橄榄/沙灰色，绝对不使用冷钢灰色
+2. 仅在 CTA 上使用 Pinterest 红——醒目且专一
+3. 按钮/输入框使用 16px 圆角，卡片使用 20px 以上——足够圆润但不是胶囊形
+4. Pin Sans 是唯一的字体——UI 紧凑使用 12px，展示级使用 70px
+5. 摄影承载设计——UI 保持温暖和极简
+6. 文本使用紫梅黑 (#211922)——比纯黑更温暖

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

@@ -0,0 +1,269 @@
+# Design System: PostHog
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原站点使用了专有字体。对于自包含的 HTML 输出，请使用这些 CDN 替代字体：
+> - **主字体：** `Inter` | **等宽字体：** `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;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` 技能（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+PostHog 的网站感觉就像是一个初创公司内部泄露到外网的 Wiki —— 温暖、不拘一格，并且刻意反传统企业化。背景不是开发者工具中常见的清脆纯白或深邃暗色；它是一种温暖、带有鼠尾草色调的奶油色（`#fdfdf8`），赋予了每个表面一种手工制作、如纸张般的质感。色彩倾向于朴实的橄榄绿和柔和的鼠尾草绿，而不是 SaaS 世界中常见的蓝色和紫色。就好像有人在舒适的花棚里设计了一个开发者分析平台。
+
+个性是这里的主角：手绘的刺猬插图、奇特的动作手办和俏皮的图像取代了 B2B SaaS 典型的图库照片和抽象渐变。IBM Plex Sans Variable 作为字体基础 —— 这是一款具有真正技术可信度的字体（由 IBM 创建，广泛用于开发者场景），在这里用于粗体（700、800）标题，正文则使用宽松的行高。排版传达出“我们是严谨的工程师”的信息，而周围的一切则在说“但我们并不把自己太当回事”。
+
+交互设计也体现了同样的精神：悬停状态会闪烁 PostHog 橙色（`#F54E00`）文本 —— 这是一种隐藏的品牌色，静止时不出现，但在交互时会带来惊喜。深色的近黑色按钮（`#1e1f23`）在悬停时降低透明度，而不是改变颜色，并且激活状态会有轻微的缩放。边框系统使用与橄榄色文本调色板相协调的鼠尾草色调灰色（`#bfc1b7`）。它构建于 Tailwind CSS、Radix UI 和 shadcn/ui 基础组件之上，技术基础现代且由组件驱动，但视觉输出却坚持其独特性。
+
+**核心特征：**
+- 采用温暖的鼠尾草绿/橄榄色调色板取代传统蓝色 —— 朴实且平易近人
+- 使用 IBM Plex Sans Variable 粗体字重（700/800）的标题，配合 1.50 以上的宽松行高
+- 隐藏的品牌橙色（`#F54E00`）仅在悬停交互时出现 —— 令人愉悦的惊喜
+- 手绘的刺猬插图和俏皮的图像 —— 刻意反传统企业化
+- 鼠尾草色调的边框（`#bfc1b7`）和背景（`#eeefe9`）构建出统一的温暖绿色系统
+- 深色近黑色的 CTA（`#1e1f23`），使用基于透明度的悬停状态
+- 内容密集的编辑布局 —— 网站读起来像是一本杂志，而不是典型的落地页
+- Tailwind CSS + Radix UI + shadcn/ui 组件架构
+
+## 2. 调色板与角色
+
+### 主色调
+- **Olive Ink** (`#4d4f46`)：主要文本颜色 —— 一种独特的橄榄灰，赋予所有文本温暖的泥土色调
+- **Deep Olive** (`#23251d`)：链接文本和高强调度标题 —— 带有绿色底色的近乎黑色
+- **PostHog Orange** (`#F54E00`)：隐藏的品牌强调色 —— 仅在悬停状态下出现，充满活力的橙色带来惊喜
+
+### 辅助色与强调色
+- **Amber Gold** (`#F7A501`)：深色按钮上的辅助悬停强调色 —— 与橙色搭配的温暖金色
+- **Gold Border** (`#b17816`)：特殊按钮边框 —— 用于精选 CTA 的琥珀金色
+- **Focus Blue** (`#3b82f6`)：焦点环颜色（Tailwind 默认） —— 系统中唯一的蓝色，专为无障碍设计保留
+
+### 表面与背景
+- **Warm Parchment** (`#fdfdf8`)：主页面背景 —— 带有黄绿色底色的温暖近白色
+- **Sage Cream** (`#eeefe9`)：输入框背景、辅助表面 —— 浅鼠尾草色调
+- **Light Sage** (`#e5e7e0`)：按钮背景、第三级表面 —— 柔和的鼠尾草绿
+- **Warm Tan** (`#d4c9b8`)：精选按钮背景 —— 用于强调的温暖棕褐色/卡其色
+- **Hover White** (`#f4f4f4`)：通用的悬停背景状态
+
+### 中性色与文本
+- **Olive Ink** (`#4d4f46`)：主要正文和 UI 文本
+- **Muted Olive** (`#65675e`)：辅助文本，浅色背景上的按钮标签
+- **Sage Placeholder** (`#9ea096`)：占位符文本、禁用状态 —— 温暖的鼠尾草绿
+- **Sage Border** (`#bfc1b7`)：主要边框颜色 —— 用于所有边框的橄榄色调灰色
+- **Light Border** (`#b6b7af`)：辅助边框、工具栏边框 —— 稍微深一点的鼠尾草色
+
+### 语义与强调色
+- **PostHog Orange** (`#F54E00`)：悬停文本强调色 —— 传达交互性和品牌个性
+- **Amber Gold** (`#F7A501`)：深色按钮悬停强调色 —— 传递温暖感
+- **Focus Blue** (`#3b82f6`，50% 透明度)：键盘焦点环 —— 仅用于无障碍设计的颜色
+- **Dark Text** (`#111827`)：高对比度链接文本 —— 用于重要链接的近黑色
+
+### 渐变系统
+- 营销网站上没有渐变 —— PostHog 的视觉语言刻意保持扁平化和温暖
+- 深度是通过分层表面和边框包围来实现的，而不是通过颜色过渡
+
+## 3. 排版规则
+
+### 字体系列
+- **展示与正文**: `IBM Plex Sans Variable` —— 可变字体（100–700+ 字重范围）。备选字体：`IBM Plex Sans, -apple-system, system-ui, Avenir Next, Avenir, Segoe UI, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Arial`
+- **等宽**: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New` —— 系统等宽字体堆栈
+- **代码展示**: `Source Code Pro` —— 备选字体：`Menlo, Consolas, Monaco`
+
+### 层级结构
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | IBM Plex Sans Variable | 30px | 800 | 1.20 | -0.75px | 超粗、紧凑，极具视觉冲击力 |
+| Section Heading | IBM Plex Sans Variable | 36px | 700 | 1.50 | 0px | 较大但行高非常宽松 |
+| Feature Heading | IBM Plex Sans Variable | 24px | 700 | 1.33 | 0px | 特性区块标题 |
+| Card Heading | IBM Plex Sans Variable | 21.4px | 700 | 1.40 | -0.54px | 略微不寻常的大小（经过缩放） |
+| Sub-heading | IBM Plex Sans Variable | 20px | 700 | 1.40 | -0.5px | 内容子区块 |
+| Sub-heading Uppercase | IBM Plex Sans Variable | 20px | 700 | 1.40 | 0px | 用于标签的大写转换 |
+| Body Emphasis | IBM Plex Sans Variable | 19.3px | 600 | 1.56 | -0.48px | 半粗体提示文本 |
+| Label Uppercase | IBM Plex Sans Variable | 18px | 700 | 1.50 | 0px | 大写的分类标签 |
+| Body Semi | IBM Plex Sans Variable | 18px | 600 | 1.56 | 0px | 半粗体正文 |
+| Body | IBM Plex Sans Variable | 16px | 400 | 1.50 | 0px | 标准阅读文本 |
+| Body Medium | IBM Plex Sans Variable | 16px | 500 | 1.50 | 0px | 中等字重正文 |
+| Body Relaxed | IBM Plex Sans Variable | 15px | 400 | 1.71 | 0px | 适用于长篇阅读的宽松行高 |
+| Nav / UI | IBM Plex Sans Variable | 15px | 600 | 1.50 | 0px | 导航和 UI 标签 |
+| Caption | IBM Plex Sans Variable | 14px | 400–700 | 1.43 | 0px | 小号文本，多种字重 |
+| Small Label | IBM Plex Sans Variable | 13px | 500–700 | 1.00–1.50 | 0px | 标签、徽章、微型标签 |
+| Micro | IBM Plex Sans Variable | 12px | 400–700 | 1.33 | 0px | 最小号文本，部分大写 |
+| Code | Source Code Pro | 14px | 500 | 1.43 | 0px | 代码片段和终端 |
+
+### 设计原则
+- **粗体标题主导**：标题使用 700–800 字重 —— PostHog 的排版充满自信且坚定，毫不孱弱
+- **宽松的正文行高**：正文文本使用 1.50–1.71 的行高，创造了极其舒适的阅读体验 —— 该网站内容密集，专为长时间阅读而优化
+- **小数尺寸**：一些尺寸（21.4px、19.3px、13.7px）表明这是一种流动/缩放的排版系统，而不是固定的档位 —— 可能是在非标准基准下从 Tailwind 的 rem 比例计算得出的
+- **大写字母作为分类信号**：粗体大写标签（18px–20px，字重 700）用于产品分类标题 —— 这是一种杂志编辑惯例
+- **有选择的负字间距**：展示文本的字间距会收紧（30px 时为 -0.75px），而正文则放宽到 0px —— 标题压缩，正文呼吸
+
+## 4. 组件样式
+
+### 按钮
+- **深色主按钮**：`#1e1f23` 背景，白色文本，6px 圆角，`10px 12px` 内边距。悬停：透明度 0.7，带有 Amber Gold 文本。激活：透明度 0.8，带有轻微缩放变换。主要的 CTA —— 深色且充满自信
+- **浅鼠尾草色按钮**：`#e5e7e0` 背景，Olive Ink (`#4d4f46`) 文本，4px 圆角，`4px` 内边距。悬停：`#f4f4f4` 背景搭配 PostHog 橙色文本。紧凑的实用按钮
+- **暖棕色精选按钮**：`#d4c9b8` 背景，黑色文本，无明显圆角。悬停：同样的橙色文本闪烁。精选/高级操作
+- **输入框样式按钮**：`#eeefe9` 背景，Sage Placeholder (`#9ea096`) 文本，4px 圆角，1px `#b6b7af` 边框。看起来像搜索/过滤控件
+- **近白色幽灵按钮**：`#fdfdf8` 背景，Olive Ink 文本，4px 圆角，1px 透明边框。极简存在感
+- **悬停模式**：所有按钮在悬停时都会闪烁 PostHog 橙色 (`#F54E00`) 或 Amber Gold (`#F7A501`) 文本 —— 这是品牌标志性的交互惊喜
+
+### 卡片与容器
+- **带边框的卡片**：Warm Parchment (`#fdfdf8`) 或白色背景，1px `#bfc1b7` 边框，4px–6px 圆角 —— 简洁极简
+- **鼠尾草表面卡片**：`#eeefe9` 背景，用于辅助内容容器
+- **阴影卡片**：`0px 25px 50px -12px rgba(0, 0, 0, 0.25)` —— 单一的深阴影，用于悬浮内容（模态框、下拉菜单）
+- **悬停**：交互式卡片上出现橙色文本闪烁 —— 与按钮行为保持一致
+
+### 输入框与表单
+- **默认**: `#eeefe9` 背景，`#9ea096` 占位符文本，1px `#b6b7af` 边框，4px 圆角，`2px 0px 2px 8px` 内边距
+- **聚焦**：50% 透明度的 `#3b82f6` 焦点环（Tailwind 蓝色焦点环）
+- **文本颜色**：`#374151` 用于输入值 —— 比主要文本颜色深，以提高可读性
+- **边框变化**：多种边框模式 —— 一些输入框使用复合边框（仅有上边框、左边框或下边框）
+
+### 导航
+- **顶部导航**：温暖的背景，IBM Plex Sans 字体，15px，字重 600
+- **下拉菜单**：内容丰富的超级菜单结构，包含产品类别
+- **链接颜色**：导航链接使用 Deep Olive (`#23251d`)，悬停时显示下划线
+- **CTA**：导航栏中的深色主按钮 (#1e1f23) —— "Get started - free"
+- **移动端**：折叠为汉堡菜单，菜单简化
+
+### 图像处理
+- **手绘插图**：刺猬吉祥物和奇特插图 —— 标志性的视觉元素
+- **产品截图**：嵌入在设备边框或简洁容器中的 UI 截图
+- **动作手办**：刺猬小雕像的趣味产品摄影 —— 反传统企业化
+- **信任徽标**：以柔和的信任栏展示企业徽标（如 Airbus, GOV.UK）
+- **纵横比**：混合使用 —— 插图是不规则的，截图是 16:9 或宽屏
+
+### AI 聊天小部件
+- 带有对话气泡的浮动 PostHog AI 助手 —— 嵌入在营销网站中的交互式产品演示
+
+## 5. 布局原则
+
+### 间距系统
+- **基本单位**：8px
+- **比例尺**：2px, 4px, 6px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 34px
+- **区块内边距**：区块间垂直间距为 32px–48px（对于内容密集的网站来说十分紧凑）
+- **卡片内边距**：内部间距 4px–12px（非常紧凑）
+- **组件间距**：相关元素之间 4px–8px
+
+### 栅格与容器
+- **最大宽度**：1536px（最大断点），内容容器可能在 1200px–1280px 之间
+- **列模式**：多样化 —— 文本内容使用单列，特性卡片使用 2-3 列网格，产品演示使用不对称布局
+- **断点**：定义了 13 个 —— 1px, 425px, 482px, 640px, 768px, 767px, 800px, 900px, 1024px, 1076px, 1160px, 1280px, 1536px
+
+### 留白理念
+- **设计上保持内容密集**：PostHog 的网站信息丰富 —— 留白是经过精确计算的，而不是铺张浪费的
+- **编辑节奏**：内容区块像杂志一样流动，多样的布局让视线不断移动
+- **插图作为喘息空间**：手绘的刺猬艺术自然地打破了密集的内容区块
+
+### 圆角比例尺
+- **2px**：小型内联元素、标签 (`span`)
+- **4px**：主要 UI 组件 —— 按钮、输入框、下拉菜单、菜单项 (`button`, `div`, `combobox`)
+- **6px**：辅助容器 —— 较大的按钮、列表项、卡片变体 (`button`, `div`, `li`)
+- **9999px**：胶囊形状 —— 徽章、状态指示器、圆角标签 (`span`, `div`)
+
+## 6. 深度与层级
+
+| 层级 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Level 0 (扁平) | 无阴影，温暖的羊皮纸背景 | 页面画布，大多数表面 |
+| Level 1 (边框) | `1px solid #bfc1b7` (Sage Border) | 卡片轮廓、输入框边框、区块分割线 |
+| Level 2 (复合边框) | 不同侧面上的多个 1px 边框 | 输入框组合、工具栏元素 |
+| Level 3 (深阴影) | `0px 25px 50px -12px rgba(0, 0, 0, 0.25)` | 模态框、浮动元素、超级菜单下拉列表 |
+
+### 阴影理念
+PostHog 的层级系统非常极简 —— 整个系统中只存在一种阴影定义。深度通过以下方式传达：
+- **边框包围**：1px 鼠尾草色调的边框 (`#bfc1b7`) 创造出温和的温暖分离感
+- **表面颜色转换**：从 `#fdfdf8` 过渡到 `#eeefe9` 再到 `#e5e7e0`，在不需要阴影的情况下创造出层次感
+- **唯一的阴影**：定义的唯一阴影 (`0 25px 50px -12px`) 专用于浮动元素 —— 模态框、下拉菜单、弹窗。这是一种深邃、引人注目的阴影，能在需要时创造出清晰的分离感
+
+### 装饰性深度
+- **插图分层**：手绘的刺猓艺术自然地创造出视觉深度
+- **无渐变或发光**：扁平、温暖的表面系统完全依赖边框和表面颜色的区分
+- **无毛玻璃效果**：通篇使用完全不透明的表面
+
+## 7. 宜与忌
+
+### 宜
+- 文本和边框使用橄榄色/鼠尾草色系 (#4d4f46, #23251d, #bfc1b7) —— 温暖的绿色底色是该品牌的基础
+- 在悬停状态时闪烁 PostHog 橙色 (#F54E00) —— 这是隐藏的品牌标志
+- 标题使用 IBM Plex Sans 粗体字重 (700/800) —— 该字体承载着技术可信度
+- 正文文本保持宽松的行高 (1.50–1.71) —— 内容密集的网站要求极高的可读性
+- 维持温暖的羊皮纸背景 (#fdfdf8) —— 不是纯白，绝不冷漠
+- 大多数 UI 元素使用 4px 圆角 —— 保持角落微妙且实用
+- 包含俏皮的手绘插图元素 —— 这种个性是它的差异化所在
+- 在深色按钮上应用基于透明度的悬停状态（透明度 0.7），而不是颜色转换
+
+### 忌
+- 使用蓝色、紫色或典型的科技 SaaS 颜色 —— PostHog 的调色板刻意保持橄榄色/鼠尾草绿
+- 添加沉重的阴影 —— 该系统仅对浮动元素使用一种阴影；其他一切均使用边框
+- 让设计看起来具有传统意义上的“抛光”或“高级”感 —— PostHog 的魅力在于其不羁、生机勃勃的活力
+- 在正文文本上使用紧凑的行高 —— 宽松的 1.50+ 间距对于内容密集的布局至关重要
+- 在卡片上应用大圆角 (12px+) —— PostHog 使用 4px–6px，保持一切紧凑且实用
+- 移除橙色悬停闪烁效果 —— 它是核心交互模式，而非装饰
+- 用图库照片替换插图 —— 手绘的刺猓艺术就是品牌本身
+- 使用纯白色 (#ffffff) 作为页面背景 —— 温暖的鼠尾草奶油色 (#fdfdf8) 色调是基础
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Mobile Small | <425px | 单列，紧凑的内边距，堆叠卡片 |
+| Mobile | 425px–640px | 轻微的布局调整，更大的触摸目标 |
+| Tablet | 640px–768px | 开始出现双列网格，导航部分可见 |
+| Tablet Large | 768px–1024px | 多列布局，展开的导航 |
+| Desktop | 1024px–1280px | 完整布局，3 列特性网格，展开的超级菜单 |
+| Large Desktop | 1280px–1536px | 最大宽度容器，宽松的边距 |
+| Extra Large | >1536px | 居中的最大宽度容器 |
+
+### 触摸目标
+- 按钮：4px–6px 圆角，带有 `4px–12px` 内边距 —— 紧凑但可用
+- 导航链接：15px 文本，字重 600，带有充足的内边距
+- 移动端：带有简化导航的汉堡菜单
+- 输入框：宽松的垂直内边距，适合拇指操作的表单
+
+### 折叠策略
+- **导航**：带有下拉菜单的完整超级菜单 → 移动端上的汉堡菜单
+- **特性网格**：3 列 → 2 列 → 单列堆叠
+- **排版**：展示尺寸在不同断点间缩小（30px → 更小）
+- **插图**：在容器内缩放，部分可能为了节省空间而在移动端隐藏
+- **区块间距**：按比例缩小，同时保持可读性
+
+### 图像行为
+- 插图在容器内响应式缩放
+- 产品截图保持纵横比
+- 信任徽标在移动端重排为多行网格
+- AI 聊天小部件可能会在小屏幕上重新定位或简化
+
+## 9. Agent 提示词指南
+
+### 快速颜色参考
+- 主要文本：Olive Ink (`#4d4f46`)
+- 深色文本：Deep Olive (`#23251d`)
+- 悬停强调：PostHog Orange (`#F54E00`)
+- 深色 CTA：Near-Black (`#1e1f23`)
+- 按钮表面：Light Sage (`#e5e7e0`)
+- 页面背景：Warm Parchment (`#fdfdf8`)
+- 边框：Sage Border (`#bfc1b7`)
+- 占位符：Sage Placeholder (`#9ea096`)
+
+### 示例组件提示词
+- "在温暖的羊皮纸背景 (#fdfdf8) 上创建一个 hero 区块，标题使用 30px IBM Plex Sans，字重 800，行高 1.20，字间距 -0.75px，文本颜色为 olive ink (#4d4f46)，并带有一个深色 CTA 按钮 (#1e1f23, 6px 圆角，白色文本，悬停时透明度 0.7)"
+- "设计一个特性卡片，背景为 #fdfdf8，1px #bfc1b7 边框，4px 圆角，标题使用 IBM Plex Sans 20px 字重 700，正文文本为 16px 字重 400，行高 1.50，文本颜色为 olive ink (#4d4f46)"
+- "构建一个导航栏，背景温暖，IBM Plex Sans 链接为 15px 字重 600，文本颜色为 deep olive (#23251d)，悬停时显示下划线，右侧带有一个深色 CTA 按钮 (#1e1f23)"
+- "创建一个按钮组：主深色按钮 (#1e1f23, 白色文本, 6px 圆角)，辅助鼠尾草色按钮 (#e5e7e0, #4d4f46 文本, 4px 圆角)，以及幽灵/文本按钮 —— 所有按钮在悬停时均闪烁 #F54E00 橙色文本"
+- "设计一个输入框，背景为 #eeefe9，1px #b6b7af 边框，4px 圆角，#9ea096 占位符文本，焦点环为 50% 透明度的 #3b82f6"
+
+### 迭代指南
+优化使用此设计系统生成的现有屏幕时：
+1. 确认背景是温暖的羊皮纸色 (#fdfdf8) 而不是纯白色 —— 鼠尾草奶油色的温暖感至关重要
+2. 检查所有文本是否使用了橄榄色系 (#4d4f46, #23251d) 而不是纯黑或中性灰
+3. 确保悬停状态会闪烁 PostHog 橙色 (#F54E00) —— 如果悬停感觉平淡，说明你遗漏了这一点
+4. 确认边框使用了鼠尾草色调的灰色 (#bfc1b7) 而不是中性灰 —— 温暖感贯穿每一个元素
+5. 整体基调应该感觉像是一个有趣、生机勃勃的初创公司 Wiki —— 绝不能是企业般抛光或冷冰冰的