@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,278 @@
+# Design System: ElevenLabs
+
+
+> **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. 视觉主题与氛围
+
+ElevenLabs 的网站是克制优雅的典范——一个近乎纯白的画布（`#ffffff`, `#f5f5f5`），在这里排版和微妙的阴影承担了所有核心工作。这种设计感觉就像一份高级的音频产品宣传册：干净、宽敞且充满自信，足以让内容自己说话（考虑到 ElevenLabs 制作的是语音 AI，这里的“说话”是字面意义上的）。其留白策略具有一种近乎 Apple 般的品质，但又更加温暖——偶尔出现的暖石色调（`#f5f2ef`, `#777169`）避免了纯白带来的冷冰冰的临床感。
+
+排版系统建立在一个迷人的二元性之上：Waldenburg 字重在 300（细体）的展示标题创造出空灵、细如发丝的标题，感觉就像是文字化的声波——精致、精确，在大尺寸下具有惊人的视觉冲击力。这种细体展示的处理方式是该设计的标志——当大多数网站使用粗体标题来吸引注意力时，ElevenLabs 却利用轻盈感来创造吸引力。Inter 负责所有的正文和 UI 文本，表现极其可靠，使用轻微的正向字间距（0.14px–0.18px），赋予正文一种充满空气感、间距良好的质感。WaldenburgFH 作为粗体大写变体出现在特定的按钮标签上。
+
+让 ElevenLabs 独具特色的是其多层阴影系统。元素并没有使用简单的 box-shadows，而是采用了复杂的堆叠：inset border-shadows (`rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset`)、outline shadows (`rgba(0,0,0,0.06) 0px 0px 0px 1px`) 和柔和的 elevation shadows (`rgba(0,0,0,0.04) 0px 4px 4px`)——所有这些都在极低的不透明度下运行。这样的结果是，设计中的表面似乎仅仅勉强存在，以最轻柔的触感漂浮在页面上方。胶囊形按钮（9999px）搭配暖色调背景（`rgba(245,242,239,0.8)`）和暖色阴影（`rgba(78,50,23,0.04)`），增添了一种触觉上的实体感。
+
+**关键特征：**
+- 带有暖色调底色的近乎纯白的画布 (`#f5f5f5`, `#f5f2ef`)
+- Waldenburg weight 300 (light) 用于展示——空灵、轻盈的标题
+- Inter 搭配正向字间距 (0.14–0.18px) 用于正文——充满空气感的可读性
+- 不透明度低于 0.1 的多层阴影堆叠——表面几乎察觉不到
+- 带有暖石色调背景的胶囊按钮 (9999px)
+- WaldenburgFH 粗体大写用于特定的 CTA 标签
+- 暖色阴影色调：`rgba(78, 50, 23, 0.04)` —— 阴影带有色彩，而不仅仅是黑暗
+- Geist Mono / ui-monospace 用于代码片段
+
+## 2. 调色板与角色
+
+### Primary
+- **Pure White** (`#ffffff`): 主要背景、卡片表面、按钮背景
+- **Light Gray** (`#f5f5f5`): 次要表面、细微的区域区分
+- **Warm Stone** (`#f5f2ef`): 按钮背景（80% 不透明度）—— 温暖的标志性颜色
+- **Black** (`#000000`): 主要文本、标题、深色按钮
+
+### Neutral Scale
+- **Dark Gray** (`#4e4e4e`): 次要文本、描述
+- **Warm Gray** (`#777169`): 第三级文本、静默链接、装饰性下划线
+- **Near White** (`#f6f6f6`): 备用的浅色表面
+
+### Interactive
+- **Grid Cyan** (`#7fffff`): `--grid-column-bg`，25% 不透明度 —— 装饰性网格叠加
+- **Ring Blue** (`rgb(147 197 253 / 0.5)`): `--tw-ring-color`，聚焦环
+- **Border Light** (`#e5e5e5`): 明确的边框
+- **Border Subtle** (`rgba(0, 0, 0, 0.05)`): 极其细微的底部边框
+
+### Shadows
+- **Inset Border** (`rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset`): 内部边缘定义
+- **Inset Dark** (`rgba(0,0,0,0.1) 0px 0px 0px 0.5px inset`): 更强的内阴影变体
+- **Outline Ring** (`rgba(0,0,0,0.06) 0px 0px 0px 1px`): 阴影作为边框
+- **Soft Elevation** (`rgba(0,0,0,0.04) 0px 4px 4px`): 温和的悬浮感
+- **Card Shadow** (`rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`): 按钮/卡片悬浮
+- **Warm Shadow** (`rgba(78,50,23,0.04) 0px 6px 16px`): 暖色调按钮阴影
+- **Edge Shadow** (`rgba(0,0,0,0.08) 0px 0px 0px 0.5px`): 细微的边缘定义
+- **Inset Ring** (`rgba(0,0,0,0.1) 0px 0px 0px 1px inset`): 强烈的内嵌边框
+
+## 3. 排版规则
+
+### Font Families
+- **Display**: `Waldenburg`, fallback: `Waldenburg Fallback`
+- **Display Bold**: `WaldenburgFH`, fallback: `WaldenburgFH Fallback`
+- **Body / UI**: `Inter`, fallback: `Inter Fallback`
+- **Monospace**: `Geist Mono` 或 `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Waldenburg | 48px (3.00rem) | 300 | 1.08 (tight) | -0.96px | 细如发丝，空灵 |
+| Section Heading | Waldenburg | 36px (2.25rem) | 300 | 1.17 (tight) | normal | 轻量级展示 |
+| Card Heading | Waldenburg | 32px (2.00rem) | 300 | 1.13 (tight) | normal | 轻量级卡片标题 |
+| Body Large | Inter | 20px (1.25rem) | 400 | 1.35 | normal | 介绍文字 |
+| Body | Inter | 18px (1.13rem) | 400 | 1.44–1.60 | 0.18px | 标准阅读文本 |
+| Body Standard | Inter | 16px (1.00rem) | 400 | 1.50 | 0.16px | UI 文本 |
+| Body Medium | Inter | 16px (1.00rem) | 500 | 1.50 | 0.16px | 强调正文 |
+| Nav / UI | Inter | 15px (0.94rem) | 500 | 1.33–1.47 | 0.15px | 导航链接 |
+| Button | Inter | 15px (0.94rem) | 500 | 1.47 | normal | 按钮标签 |
+| Button Uppercase | WaldenburgFH | 14px (0.88rem) | 700 | 1.10 (tight) | 0.7px | `text-transform: uppercase` |
+| Caption | Inter | 14px (0.88rem) | 400–500 | 1.43–1.50 | 0.14px | 元数据 |
+| Small | Inter | 13px (0.81rem) | 500 | 1.38 | normal | 标签，徽章 |
+| Code | Geist Mono | 13px (0.81rem) | 400 | 1.85 (relaxed) | normal | 代码块 |
+| Micro | Inter | 12px (0.75rem) | 500 | 1.33 | normal | 微小标签 |
+| Tiny | Inter | 10px (0.63rem) | 400 | 1.60 (relaxed) | normal | 附属细则 |
+
+### Principles
+- **细体作为主打字重**：Waldenburg 的 weight 300 是决定性的排版选择。其他设计系统使用粗体来制造冲击力，而 ElevenLabs 却利用轻盈感——细笔触感觉就像音频波形，通过克制来创造吸引力。
+- **正文使用正向字间距**：Inter 在正文文本中使用了 +0.14px 到 +0.18px 的字间距，创造出一种充满空气感、间距良好的阅读节奏，这与紧凑的展示字间距 (-0.96px) 形成了对比。
+- **WaldenburgFH 用于强调**：Waldenburg 的粗体 (700) 大写变体仅出现在带有 0.7px 字间距的特定 CTA 按钮标签中——这是整个字体系统中唯一“响亮”的地方。
+- **等宽字体作为环境点缀**：Geist Mono 采用宽松的行高 (1.85) 用于代码块，感觉从容且易读。
+
+## 4. 组件样式
+
+### Buttons
+
+**Primary Black Pill**
+- Background: `#000000`
+- Text: `#ffffff`
+- Padding: 0px 14px
+- Radius: 9999px (full pill)
+- Use: Primary CTA
+
+**White Pill (Shadow-bordered)**
+- Background: `#ffffff`
+- Text: `#000000`
+- Radius: 9999px
+- Shadow: `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`
+- Use: Secondary CTA on white
+
+**Warm Stone Pill**
+- Background: `rgba(245, 242, 239, 0.8)` (warm translucent)
+- Text: `#000000`
+- Padding: 12px 20px 12px 14px (asymmetric)
+- Radius: 30px
+- Shadow: `rgba(78, 50, 23, 0.04) 0px 6px 16px` (warm-tinted)
+- Use: Featured CTA, hero action — the signature warm button
+
+**Uppercase Waldenburg Button**
+- Font: WaldenburgFH 14px weight 700
+- Text-transform: uppercase
+- Letter-spacing: 0.7px
+- Use: Specific bold CTA labels
+
+### Cards & Containers
+- Background: `#ffffff`
+- Border: `1px solid #e5e5e5` 或 shadow-as-border
+- Radius: 16px–24px
+- Shadow: multi-layer stack (inset + outline + elevation)
+- Content: 产品截图、代码示例、音频波形预览
+
+### Inputs & Forms
+- Textarea: padding 12px 20px, transparent text at default
+- Select: white background, standard styling
+- Radio: standard with tw-ring focus
+- Focus: `var(--tw-ring-offset-shadow)` ring system
+
+### Navigation
+- 干净的白色固定式页眉
+- Inter 15px weight 500 用于导航链接
+- 右对齐的胶囊形 CTA（黑色为主，白色为次）
+- 移动端：在 1024px 时折叠为汉堡菜单
+
+### Image Treatment
+- 产品截图和音频波形可视化
+- 特性区域中的暖色渐变背景
+- 图片容器使用 20px–24px 圆角
+- 全宽区域交替使用白色和浅灰色
+
+### Distinctive Components
+
+**Audio Waveform Sections**
+- 展示 voice AI 能力的多彩渐变背景
+- 产品演示背后的温暖琥珀色、蓝色和绿色渐变
+- ElevenLabs 产品界面的截图
+
+**Warm Stone CTA Block**
+- `rgba(245,242,239,0.8)` 背景搭配暖色阴影
+- 不对称的内边距（右侧内边距更多）
+- 创造出 ElevenLabs 独有的实体触感
+
+## 5. 布局原则
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 3px, 4px, 8px, 9px, 10px, 11px, 12px, 16px, 18px, 20px, 24px, 28px, 32px, 40px
+
+### Grid & Container
+- 具有宽敞最大宽度的居中内容
+- 单列 hero 布局，扩展为特性网格
+- 用于产品展示的全宽渐变区域
+- 浅灰色背景上的白色卡片网格
+
+### Whitespace Philosophy
+- **Apple 式的慷慨**：各个部分之间大量的垂直间距营造了一种高级、从容的节奏。每个区域都是一件展品。
+- **温暖的留白**：这里的留白并不冰冷——暖石色调的底色和暖色阴影赋予了空白空间一种触觉上的实体质感。
+- **由排版主导的节奏**：Waldenburg 的轻量级标题创造出视觉上的“低语”，引导视线穿过广阔的白色空间。
+
+### Border Radius Scale
+- Minimal (2px): 小链接、内联元素
+- Subtle (4px): 导航项、标签面板、标签
+- Standard (8px): 小型容器
+- Comfortable (10px–12px): 中型卡片、下拉菜单
+- Card (16px): 标准卡片、文章
+- Large (18px–20px): 特色卡片、代码面板
+- Section (24px): 大型面板、区块容器
+- Warm Button (30px): Warm stone CTA
+- Pill (9999px): 主按钮、导航胶囊
+
+## 6. 深度与悬浮感
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | 页面背景、文本块 |
+| Inset Edge (Level 0.5) | `rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset, #fff 0px 0px 0px 0px inset` | 内部边框定义 |
+| Outline Ring (Level 1) | `rgba(0,0,0,0.06) 0px 0px 0px 1px` + `rgba(0,0,0,0.04) 0px 1px 2px` + `rgba(0,0,0,0.04) 0px 2px 4px` | 卡片的 shadow-as-border |
+| Card (Level 2) | `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px` | 按钮悬浮感、突出的卡片 |
+| Warm Lift (Level 3) | `rgba(78,50,23,0.04) 0px 6px 16px` | Featured CTAs — warm-tinted |
+| Focus (Accessibility) | `var(--tw-ring-offset-shadow)` blue ring | 键盘聚焦 |
+
+**Shadow Philosophy**: ElevenLabs 使用了在所有分析过的设计系统中最精细的阴影系统。每一个阴影的不透明度都低于 0.1，许多阴影同时包含了向外投射和向内 inset 的组件，而暖色的 CTA 阴影使用的是真正的暖色 (`rgba(78,50,23,...)`) 而不是中性黑。半像素的内嵌边框 (`0px 0px 0px 0.5px inset`) 创造出的边缘如此微妙，以至于更多是被感觉到而不是被看到——表面通过最轻微的触感界定了自己。
+
+## 7. 宜与忌
+
+### Do
+- 所有展示标题使用 Waldenburg weight 300 —— 轻盈感即品牌所在
+- 在低于 0.1 的不透明度下应用多层阴影 (inset + outline + elevation)
+- 为特色元素使用暖石色调 (`#f5f2ef`, `rgba(245,242,239,0.8)`)
+- 在 Inter 正文文本上应用正向字间距 (+0.14px 到 +0.18px)
+- 主按钮使用 9999px 圆角 —— 胶囊形是标准
+- 在 Featured CTAs 上使用暖色调阴影 (`rgba(78,50,23,0.04)`)
+- 保持页面以白色为主，使用微妙的灰色进行区域区分
+- WaldenburgFH 粗体大写仅用于特定的 CTA 按钮标签
+
+### Don't
+- 不要在标题上使用粗体 (700) Waldenburg —— weight 300 是不可动摇的原则
+- 不要使用浓重的阴影 (>0.1 opacity) —— 空灵的质感需要耳语级别的深度
+- 不要使用冷灰色边框 —— 整个系统充满了暖色调
+- 不要省略 inset 阴影组件 —— 半像素内嵌边框定义了边缘
+- 不要对正文文本应用负向字间距 —— Inter 使用正向字间距
+- 不要在卡片上使用尖锐的圆角 (<8px) —— 宽大的圆角是结构性的
+- 不要引入品牌颜色 —— 调色板是有意为之的无彩色并带有暖色底色
+- 不要让按钮变得不透明和沉重 —— 暖色的半透明石材处理是其标志性特征
+
+## 8. 响应式行为
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <1024px | 单列、汉堡菜单、堆叠的区块 |
+| Desktop | >1024px | 完整布局、水平导航、多列网格 |
+
+### Touch Targets
+- 带有充裕内边距的胶囊形按钮 (12px–20px)
+- 15px 的导航链接，具有充足的间距
+- Select 下拉菜单保持舒适的尺寸
+
+### Collapsing Strategy
+- Navigation: horizontal → hamburger at 1024px
+- 特性 grids: multi-column → stacked
+- Hero: maintains centered layout, font scales proportionally
+- Gradient sections: full-width maintained, content stacks
+- Spacing compresses proportionally
+
+### Image Behavior
+- 产品截图响应式缩放
+- 渐变背景在移动端简化
+- 音频波形预览保持纵横比
+- 圆角在各个断点中保持不变
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: Pure White (`#ffffff`) 或 Light Gray (`#f5f5f5`)
+- Text: Black (`#000000`)
+- Secondary text: Dark Gray (`#4e4e4e`)
+- Muted text: Warm Gray (`#777169`)
+- Warm surface: Warm Stone (`rgba(245, 242, 239, 0.8)`)
+- Border: `#e5e5e5` 或 `rgba(0,0,0,0.05)`
+
+### 示例 Component Prompts
+- "Create a hero on white background. Headline at 48px Waldenburg weight 300, line-height 1.08, letter-spacing -0.96px, black text. Subtitle at 18px Inter weight 400, line-height 1.60, letter-spacing 0.18px, #4e4e4e text. Two pill buttons: black (9999px, 0px 14px padding) and warm stone (rgba(245,242,239,0.8), 30px radius, 12px 20px padding, warm shadow rgba(78,50,23,0.04) 0px 6px 16px)."
+- "Design a card: white background, 20px radius. Shadow: rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px. Title at 32px Waldenburg weight 300, body at 16px Inter weight 400 letter-spacing 0.16px, #4e4e4e."
+- "Build a white pill button: white bg, 9999px radius. Shadow: rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px. Text at 15px Inter weight 500."
+- "Create an uppercase CTA label: 14px WaldenburgFH weight 700, text-transform uppercase, letter-spacing 0.7px."
+- "Design navigation: white sticky header. Inter 15px weight 500. Black pill CTA right-aligned. Border-bottom: rgba(0,0,0,0.05)."
+
+### Iteration Guide
+1. 从白色开始 —— 暖色调来自于阴影和石材表面，而不是背景
+2. 标题使用 Waldenburg 300 —— 绝不要用粗体，轻盈感就是它的身份
+3. 多层阴影：始终包含低于 0.1 不透明度的 inset + outline + elevation
+4. Inter 正文使用正向字间距 (+0.14px 到 +0.18px) —— 充满空气感的阅读体验
+5. Warm stone CTA 是标志性元素 —— `rgba(245,242,239,0.8)` 搭配 `rgba(78,50,23,0.04)` 阴影
+6. 按钮使用 Pill (9999px)，卡片使用宽大的圆角 (16px–24px)

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

@@ -0,0 +1,294 @@
+# 设计系统：Expo
+
+
+> **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. 视觉主题与氛围
+
+Expo 的界面是一个明亮、散发自信感的开发者平台，其构建理念是：用于构建应用的工具，其精致程度应该与应用本身一样。整个体验基于一个明亮、通透的画布——一种带有冷色调的灰白色（`#f0f0f3`），赋予了页面一种微妙的技术冷感，却不会像纯白那样显得生硬。这是一个会“呼吸”的网站：各区块之间巨大的垂直间距营造出画廊般的节奏，让每个特性都有自己的“房间”。
+
+设计语言是果断的单色风格——在最浅的背景上使用纯黑（`#000000`）标题，并利用一系列冷色调的蓝灰（`#60646c`、`#b0b4ba`、`#555860`）处理所有辅助信息的传达。界面本身几乎完全没有色彩；当颜色出现时，它们被留给产品截图、应用图标和 React 生态系统插画——这使得实际内容在中性画布的映衬下焕发出生机。
+
+Expo 的独特之处在于其胶囊状的几何形态。按钮、标签页、视频容器甚至图片都使用了大圆角或完整的胶囊形圆角（24px–9999px），创造出一种有机、平易近人的感觉，有别于典型的锐利边缘开发者工具美学。结合巨大标题上紧凑的字间距（在 64px 时为 -1.6px 到 -3px），最终呈现出一种既高端又友好的设计——就像为开发者重新构想的 Apple 产品页面。
+
+**核心特征：**
+- 明亮的冷调白色画布（`#f0f0f3`）与画廊般的垂直间距
+- 严格的单色调：纯黑标题，冷调蓝灰正文，无装饰性色彩
+- 无处不在的胶囊状几何形态——按钮、标签页、容器、图片（24px–9999px 圆角）
+- 巨大的展示级标题（64px）与极度的负字间距（-1.6px 到 -3px）
+- 仅使用 Inter 作为字体，通过 400–900 的字重实现完整的表达范围
+- 极其柔和的阴影，元素几乎只是微微抬离表面
+- 产品截图是界面中唯一的色彩来源
+
+## 2. 调色板与角色
+
+### 主要色彩
+- **Expo Black** (`#000000`)：绝对的基准色——用于主标题、CTA 按钮和品牌标识。纯黑与冷白结合，在不显得突兀的情况下创造了最大对比度。
+- **Near Black** (`#1c2024`)：正文内容的主要文字颜色——一种几乎难以察觉的蓝黑色，相比纯 #000 更柔和，适合长时间阅读。
+
+### 次要与强调色
+- **Link Cobalt** (`#0d74ce`)：标准的链接颜色——一种可靠、饱和的蓝色，在不干扰单色层级结构的情况下提示交互性。
+- **Legal Blue** (`#476cff`)：一种更明亮、更饱和的蓝色，用于法律/页脚链接——比 Link Cobalt 更引人注目。
+- **Widget Sky** (`#47c2ff`)：一种轻盈、友好的青蓝色，用于小组件品牌元素——系统中明度最高的强调色。
+- **Preview Purple** (`#8145b5`)：一种浓郁的紫色，用于“预览”或 Beta 功能标识——与标准内容形成清晰的视觉区分。
+
+### 表面与背景
+- **Cloud Gray** (`#f0f0f3`)：主要的页面背景色——一种带有极微弱蓝紫色调的冷灰白。不偏暖、不显苍白——精准的科技感。
+- **Pure White** (`#ffffff`)：卡片表面、按钮背景和抬升的内容容器。与 Cloud Gray 形成清晰的“浮起”区别。
+- **Widget Dark** (`#1a1a1a`)：用于暗色主题小组件和覆盖层元素的暗色表面。
+- **Banner Dark** (`#171717`)：最暗的表面变体，用于促销横幅和高对比度容器。
+
+### 中性色与文字
+- **Slate Gray** (`#60646c`)：主力次要文字颜色（出现 305 次）。一种冷调的蓝灰，具有权威感而不显得沉重。
+- **Mid Slate** (`#555860`)：比 Slate 稍暗，用于强调的次要文字。
+- **Silver** (`#b0b4ba`)：三级文字、占位符和弱化的元数据。阅读舒适，但明显呈后退感。
+- **Pewter** (`#999999`)：手风琴图标和暗色环境中的深度弱化 UI 元素。
+- **Light Silver** (`#cccccc`)：暗色环境中的箭头图标和装饰性元素。
+- **Dark Slate** (`#363a3f`)：暗色表面的边框、开关轨道和强调性容器边框。
+- **Charcoal** (`#333333`)：暗色模式开关背景和深色次要表面。
+
+### 语义与强调色
+- **Warning Amber** (`#ab6400`)：一种温暖、深沉的琥珀色，用于警告状态——刻意避开了亮黄色，传达出严肃感。
+- **Destructive Rose** (`#eb8e90`)：一种柔和的粉珊瑚色，用于禁用状态的破坏性操作——比典型的红色更温和，减少告警疲劳。
+- **Border Lavender** (`#e0e1e6`)：标准的卡片/容器边框——一种冷调的薰衣草灰，可见但不厚重。
+- **Input Border** (`#d9d9e0`)：按钮和表单元素边框——比卡片边框稍暖/稍暗，适用于交互元素。
+- **Dark Focus Ring** (`#2547d0`)：深蓝色，用于暗色主题环境中的键盘焦点指示器。
+
+### 渐变系统
+- 该设计在界面层上显著**不含渐变**。视觉丰富度来源于产品截图、React 生态系统插画以及精细的阴影叠加，而非色彩渐变。“无渐变”本身就是一种设计决策——渐变会破坏其严谨的精确感。
+
+## 3. 排版规则
+
+### 字体系列
+- **主要字体**: `Inter`，备用字体: `-apple-system, system-ui`
+- **等宽字体**: `JetBrains Mono`，备用字体: `ui-monospace`
+- **系统备用**: `system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji`
+
+### 层级结构
+
+| 角色 | 字体 | 字号 | 字重 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | Inter | 64px (4rem) | 700–900 | 1.10 (紧凑) | -1.6px 到 -3px | 极致视觉冲击，极端字间距 |
+| Section Heading | Inter | 48px (3rem) | 600 | 1.10 (紧凑) | -2px | 核心区块锚点标题 |
+| Sub-heading | Inter | 20px (1.25rem) | 600 | 1.20 (紧凑) | -0.25px | 卡片标题，特性名称 |
+| Body Large | Inter | 18px (1.13rem) | 400–500 | 1.40 | 标准 | 介绍性段落，区块描述 |
+| Body / Button | Inter | 16px (1rem) | 400–700 | 1.25–1.40 | 标准 | 标准文本，导航链接，按钮 |
+| Caption / Label | Inter | 14px (0.88rem) | 400–600 | 1.00–1.40 | 标准 | 描述，元数据，徽章文本 |
+| Tag / Small | Inter | 12px (0.75rem) | 500 | 1.00–1.60 | 标准 | 最小的无衬线文本，徽章 |
+| Code Body | JetBrains Mono | 16px (1rem) | 400–600 | 1.40 | 标准 | 行内代码，终端命令 |
+| Code Caption | JetBrains Mono | 14px (0.88rem) | 400–600 | 1.40 | 标准 | 代码片段，技术标签 |
+| Code Small | JetBrains Mono | 12px (0.75rem) | 400 | 1.60 | 标准 | 大写技术标签 |
+
+### 原则
+- **单一字体，完整表达**：Inter 是唯一的无衬线字体，从 400（常规）到 900（黑体）字重都在使用。这赋予了设计统一的语调，同时在轻盈柔和的正文文本与极具分量的展示级标题之间实现了戏剧性的对比。
+- **大字号下的极端负字间距**：64px 的标题使用 -1.6px 到 -3px 的字间距，创造出感觉像徽标一样的超密集文本块。这种极具压缩感的设计是标志性的排版动作。
+- **以字重体现层级**：Display 使用 700–900，标题使用 600，强调使用 500，正文使用 400。字重的跨度非常果断——没有模棱两可的中间字重。
+- **统一的 1.40 正文行高**：几乎所有正文和 UI 文本都共享 1.40 的行高，创造出富有节奏的垂直一致性。
+
+## 4. 组件样式
+
+### 按钮
+
+**Primary (白底带边框)**
+- 背景：Pure White (`#ffffff`)
+- 文本：Near Black (`#1c2024`)
+- 内边距：0px 12px（紧凑，高度由行高决定）
+- 边框：细实线 Input Border (`1px solid #d9d9e0`)
+- 圆角：微圆 (6px)
+- 阴影：悬停时显现的柔和组合阴影
+- 低调的默认状态——干净、专业、不张扬
+
+**Primary Pill (胶囊形)**
+- 与 Primary 相同，但使用胶囊形圆角 (9999px)
+- 用于 Hero 级 CTA 和高强调操作
+- 额外的圆润感传达出“从这里开始”的信号
+
+**Dark Primary (深色)**
+- 背景：Expo Black (`#000000`)
+- 文本：Pure White (`#ffffff`)
+- 胶囊形 (9999px) 或大圆角 (32–36px)
+- 无边框（黑色本身就是边框）
+- 最高强调级别的 CTA——专用于主要的转化操作
+
+### 卡片与容器
+- 背景：Pure White (`#ffffff`)——清晰地浮于 Cloud Gray 页面之上
+- 边框：细实线 Border Lavender (`1px solid #e0e1e6`) 用于标准卡片
+- 圆角：标准卡片使用舒适的圆角 (8px)；特色容器使用大圆角 (16–24px)
+- 阴影级别 1：Whisper (`rgba(0,0,0,0.08) 0px 3px 6px, rgba(0,0,0,0.07) 0px 2px 4px`)——几乎无法察觉的抬升
+- 阴影级别 2：Standard (`rgba(0,0,0,0.1) 0px 10px 20px, rgba(0,0,0,0.05) 0px 3px 6px`)——清晰的悬浮高度
+- 悬停：可能会有微妙的阴影加深或背景色调变化
+
+### 输入框与表单
+- 背景：Pure White (`#ffffff`)
+- 文本：Near Black (`#1c2024`)
+- 边框：细实线 Input Border (`1px solid #d9d9e0`)
+- 内边距：0px 12px（与按钮尺寸保持一致）
+- 圆角：微圆 (6px)
+- 聚焦：通过 CSS 自定义属性实现蓝色光环阴影
+
+### 导航
+- 吸附在顶部的导航栏，位于透明/模糊背景之上
+- Logo：黑色的 Expo 文字标识
+- 链接：Near Black (`#1c2024`) 或 Slate Gray (`#60646c`)，14–16px Inter weight 500
+- CTA：右侧的黑色胶囊形按钮（"Sign Up"）
+- GitHub star 徽章作为社会认同
+- 状态指示器（"All Systems Operational"）带有绿点
+
+### 图片处理
+- 产品截图和设备样机是视觉主角
+- 视频和图片容器使用大圆角 (24px)
+- 截图展示在逼真的设备边框中
+- 深色 UI 截图与浅色画布形成对比
+- 在圆角容器内全出血展示
+
+### 特色组件
+
+**Universe React Logo**
+- 动画/插画形式的 React logo 作为视觉核心
+- 将 Expo 的身份认同与 React 生态系统相连接
+- 是原本充满写实图片页面中唯一的插画元素
+
+**Device Preview Grid**
+- 同时展示多种设备类型（手机、平板、Web）
+- 直观展示跨平台能力
+- 每个设备都使用逼真的设备外壳
+
+**Status Badge**
+- 导航栏中的 "All Systems Operational" 胶囊徽章
+- 绿点 + 文本——紧凑的信任信号
+- 胶囊形（36px 圆角）
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 比例：1px, 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 144px
+- 按钮内边距：0px 12px（异常紧凑——高度由行高决定）
+- 卡片内边距：约 24–32px
+- 垂直区间距：巨大（主要区块间估计为 96–144px）
+- 组件间距：兄弟元素间 16–24px
+
+### 网格与容器
+- 最大容器宽度：约 1200–1400px，居中
+- Hero 区：居中的单列布局，留有巨大的呼吸空间
+- 特性区块：交替布局（左/右图片，全宽展示）
+- 卡片网格：用于特性亮点的 2–3 列布局
+- 全宽区块，内容在内部受限
+
+### 留白理念
+- **画廊般的节奏**：每个区块感觉就像自己的展品，被广阔的空白包围。这创造出一种高端、从容的浏览体验。
+- **呼吸空间即设计**：慷慨的留白本身就是主要的设计元素——它传达了自信、品质，以及每个特性都值得被单独关注的态度。
+- **内容孤岛**：各区块在空白中作为孤立的“岛屿”漂浮，通过滚动而非视觉延续性相互连接。
+
+### 圆角比例
+- 近似直角 (4px)：小型行内元素，标签
+- 微圆 (6px)：按钮，表单输入框，组合框——功能性交互圆角
+- 舒适圆角 (8px)：标准内容卡片，容器
+- 大圆角 (16px)：特性标签页，内容面板
+- 非常圆 (24px)：按钮，视频/图片容器，标签页面板——标志性的柔和感
+- 极圆 (32–36px)：Hero CTA，状态徽章，导航按钮
+- 胶囊形 (9999px)：主要操作按钮，标签，头像——最大化的亲和力
+
+## 6. 深度与高度
+
+| 级别 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影 | Cloud Gray 页面背景，行内文本 |
+| Surface (Level 1) | 白色背景，无阴影 | Cloud Gray 上的标准白色卡片 |
+| Whisper (Level 2) | `rgba(0,0,0,0.08) 0px 3px 6px` + `rgba(0,0,0,0.07) 0px 2px 4px` | 微妙的卡片抬升，悬停状态 |
+| Elevated (Level 3) | `rgba(0,0,0,0.1) 0px 10px 20px` + `rgba(0,0,0,0.05) 0px 3px 6px` | 特色展示，产品截图 |
+| Modal (Level 4) | 暗色覆盖层 (`--dialog-overlay-background-color`) + 重阴影 | 对话框，覆盖层 |
+
+**阴影理念**：Expo 将阴影用作温和的低语，而非建筑般的声明。主要的深度机制是**背景色对比**——白色卡片漂浮在 Cloud Gray 上——而不是投射阴影。当阴影出现时，它们是柔和的、弥散的且具有方向性的（向下），营造出一种纸张悬浮于书桌上方几毫米的感觉。
+
+## 7. 宜与忌
+
+### 宜
+- 使用 Cloud Gray (`#f0f0f3`) 作为页面背景，Pure White (`#ffffff`) 用于抬升的卡片——这种双色浅色系统至关重要
+- 保持展示级标题具有极度的负字间距（64px 时为 -1.6px 到 -3px），以呈现标志性的压缩视觉
+- 为主要 CTA 按钮使用胶囊形 (9999px) 圆角——这种有机形态是品牌核心标识
+- 将黑色 (`#000000`) 留给标题和主要 CTA——它在浅色画布上承载着最高权威感
+- 使用 Slate Gray (`#60646c`) 作为次要文本颜色——它在可读性与退后感之间取得了精准平衡
+- 保持区块之间巨大的垂直间距（96px+）——画廊般的节奏定义了高端质感
+- 使用产品截图作为主要视觉内容——界面保持单色，让产品带来色彩
+- 应用 Inter 的全字重范围（400–900）——字重对比本身就是层级结构
+
+### 忌
+- 不要在界面 UI 中引入装饰性色彩——单色调色板是刻意为之
+- 不要在交互元素上使用锐利的尖角（border-radius < 6px）——胶囊形/圆角几何是标志性设计
+- 不要将区块间距缩小至 64px 以下——呼吸空间本身就是设计
+- 不要使用厚重的投影——深度来源于背景对比和极其柔和的阴影
+- 不要混入其他字体——Inter 包揽了从展示到标注的所有需求
+- 不要在正文上使用超过 -0.25px 的字间距——极端的字距仅限于 Display 级别
+- 不要使用超过 2px 厚度的边框——容器边框应当是微妙的，通过背景色和温和的边界实现
+- 不要在界面中添加渐变——视觉丰富度来源于内容，而非装饰
+- 不要在语义环境之外使用高饱和度颜色——调色板严格限制为灰度 + 功能性蓝色
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Mobile | <640px | 单列布局，汉堡菜单，堆叠卡片，Hero 文本缩放至 ~36px |
+| Tablet | 640–1024px | 2 列网格，精简导航，中等大小 Hero 文本 |
+| Desktop | >1024px | 完整的多列布局，展开的导航，巨大的 Hero 文本 (64px) |
+
+*仅检测到一个明确的断点 (640px)，这表明它是一个流式的、基于容器查询或 min()/clamp() 的响应系统，而非依赖固定的断点切换。*
+
+### 触控目标
+- 按钮使用大圆角 (24–36px)，创造了宽大、利于手指触控的表面
+- 导航链接间距留有充足的间隙
+- 状态徽章尺寸适合触控（36px 圆角）
+- 建议的最小尺寸：44x44px
+
+### 折叠策略
+- **导航**：带有 CTA 的完整横向导航在移动端折叠为汉堡菜单
+- **特性区块**：多列 → 堆叠单列
+- **Hero 文本**：64px → ~36px 渐进缩放
+- **设备预览**：网格 → 堆叠/轮播
+- **卡片**：并排 → 垂直堆叠
+- **间距**：按比例缩小，但保持慷慨的节奏感
+
+### 图片行为
+- 产品截图按比例缩放
+- 设备样机可能会简化或在移动端显示更少的设备
+- 所有尺寸下均保持圆角
+- 对首屏以下内容进行懒加载
+
+## 9. Agent 提示指南
+
+### 快速色彩参考
+- 主要 CTA / 标题："Expo Black (#000000)"
+- 页面背景："Cloud Gray (#f0f0f3)"
+- 卡片表面："Pure White (#ffffff)"
+- 正文文本："Near Black (#1c2024)"
+- 次要文本："Slate Gray (#60646c)"
+- 边框："Border Lavender (#e0e1e6)"
+- 链接："Link Cobalt (#0d74ce)"
+- 第三级文本："Silver (#b0b4ba)"
+
+### 示例 Component Prompts
+- "Create a hero section on Cloud Gray (#f0f0f3) with a massive headline at 64px Inter weight 700, line-height 1.10, letter-spacing -3px. Text in Expo Black (#000000). Below, add a subtitle in Slate Gray (#60646c) at 18px. Place a black pill-shaped CTA button (9999px radius) beneath."
+- "Design a feature card on Pure White (#ffffff) with a 1px solid Border Lavender (#e0e1e6) border and comfortably rounded corners (8px). Title in Near Black (#1c2024) at 20px Inter weight 600, description in Slate Gray (#60646c) at 16px. Add a whisper shadow (rgba(0,0,0,0.08) 0px 3px 6px)."
+- "Build a navigation bar with Expo logo on the left, text links in Near Black (#1c2024) at 14px Inter weight 500, and a black pill CTA button on the right. Background: transparent with blur backdrop. Bottom border: 1px solid Border Lavender (#e0e1e6)."
+- "Create a code block using JetBrains Mono at 14px on a Pure White surface with Border Lavender border and 8px radius. Code in Near Black, keywords in Link Cobalt (#0d74ce)."
+- "Design a status badge pill (9999px radius) with a green dot and 'All Systems Operational' text in Inter 12px weight 500. Background: Pure White, border: 1px solid Input Border (#d9d9e0)."
+
+### 迭代指南
+1. 每次只关注一个组件
+2. 引用特定的颜色名称和十六进制代码——比如“使用 Slate Gray (#60646c)”，而不是“把它弄成灰色”
+3. 刻意使用圆角数值——6px 用于按钮，8px 用于卡片，24px 用于图片，9999px 用于胶囊形
+4. 在描述尺寸的同时描述“感觉”——“96px 的区块间距带来巨大的呼吸空间”
+5. 始终明确指定 Inter 及其确切字重——字重对比本身就是层级结构
+6. 对于阴影，请参照高度表格指定“whisper shadow”或“standard elevation”
+7. 保持界面单色——让产品内容成为色彩的来源