@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,276 @@
+# Design System: Together AI
+
+
+> **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. 视觉主题与氛围
+
+Together AI 的界面是一个专为企业 AI 基础设施构建的柔和渐变梦境——这种设计不知为何让 GPU 集群和模型推理显得轻盈、透气且充满乐观气息。Hero 区域盛开着柔和的粉、蓝、薰衣草色渐变，以及唤起云朵和飞行感的抽象绘画风格插图，为“AI 原生云”的定位确立了视觉隐喻。在这种柔和的背景中，排版精准地切入：“The Future” 显示字体以 64px 搭配紧凑的负字间距（-1.92px），创造出密集、权威的标题块。
+
+该设计跨越了两个世界：一个是明亮、白色画布的浅色面，柔和的渐变和数据卡片在此创造了一个平易近人的平台概览；另一个是深海军蓝宇宙（`#010120` —— 不是灰黑色，而是深邃的午夜蓝），这里存放着研究论文和技术内容。这种双世界方法优雅地将“商业”信息（浅色、友好、数据驱动）与“研究”信息（深色、严肃、学术）区分开来。
+
+让 Together AI 独具特色的是它的字体系统。“The Future” 采用几何现代主义美学处理所有展示和正文文本，而 “PP Neue Montreal Mono” 则提供带有考究字间距的大写标签——创造出一种“有品味的科技基础设施公司”的个性。品牌点缀色——洋红（`#ef2cc1`）和橙色（`#fc4c02`）——在渐变和插图中少量出现，绝不会污染干净的 UI。
+
+**核心特征：**
+- 在纯白画布上使用柔和的渐变（粉色、蓝色、薰衣草色）
+- 用于深色/研究区域的深邃午夜蓝（`#010120`）—— 而非灰黑色
+- 自定义 “The Future” 字体贯穿始终，采用紧凑的负字间距
+- 使用 PP Neue Montreal Mono 作为大写技术标签
+- 锐利的几何圆角（4px、8px 半径）—— 不做圆角，不做胶囊形
+- 插图中仅使用洋红 (#ef2cc1) + 橙色 (#fc4c02) 作为品牌点缀色
+- 薰衣草色 (#bdbbff) 作为柔和的辅助强调色
+- 显著展示企业统计数据（2x、60%、90%）
+- 带有深蓝色调的阴影 (rgba(1, 1, 32, 0.1))
+
+## 2. 色彩调色板与角色
+
+### Primary
+- **Brand Magenta** (`#ef2cc1`)：主要的品牌强调色 —— 一种鲜艳的粉洋红色，用于渐变插图和最高级别的品牌展示时刻。绝不用作常规 UI 框架。
+- **Brand Orange** (`#fc4c02`)：次要的品牌强调色 —— 一种鲜艳的橙色，用于渐变端点和暖色调点缀时刻。
+- **Dark Blue** (`#010120`)：主要的深色表面 —— 一种深邃的午夜蓝黑色，用于研究区域、footer 和深色容器。不是灰色，也不是纯黑 —— 明显的蓝色。
+
+### Secondary & Accent
+- **Soft Lavender** (`#bdbbff`)：一种柔和的蓝紫色，用于微妙的点缀、次要指标和柔和的 UI 高光。
+- **Black 40** (`#00000066`)：半透明黑色，用于弱化覆盖层和辅助文本。
+
+### Surface & Background
+- **Pure White** (`#ffffff`)：主要的浅色区域页面背景。
+- **Dark Blue** (`#010120`)：深色区域的背景 —— 研究、footer、技术内容。
+- **Glass Light** (`rgba(255, 255, 255, 0.12)`)：深色区域上的毛玻璃按钮背景。
+- **Glass Dark** (`rgba(0, 0, 0, 0.08)`)：浅色区域上的微妙着色表面。
+
+### Neutrals & Text
+- **Pure Black** (`#000000`)：浅色表面上的主要文本。
+- **Pure White** (`#ffffff`)：深色表面上的主要文本。
+- **Black 8%** (`rgba(0, 0, 0, 0.08)`)：浅色表面上的边框和细微的封闭感。
+- **White 12%** (`rgba(255, 255, 255, 0.12)`)：深色表面上的边框和封闭感。
+
+### Gradient System
+- **Pastel Cloud Gradient**：在 Hero 插图中使用的柔和粉 → 薰衣草色 → 柔和蓝渐变。它们以抽象的绘画形式出现 —— 云朵、羽毛、流动的形状 —— 创造出没有字面意义的视觉温度。
+- **Hero Gradient**：Hero 背景在白色之上使用柔和的淡色调叠加，创造出类似黎明的氛围效果。
+
+## 3. 排版规则
+
+### Font Family
+- **Primary**: `The Future`, fallback: `Arial`
+- **Monospace / Labels**: `PP Neue Montreal Mono`, fallback: `Georgia`
+
+### Hierarchy
+
+| 角色 | Font | Size | Weight | Line Height | Letter Spacing | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | The Future | 64px (4rem) | 400–500 | 1.00–1.10 (紧凑) | -1.92px | 最大视觉冲击，密集块 |
+| Section Heading | The Future | 40px (2.5rem) | 500 | 1.20 (紧凑) | -0.8px | 功能区段标题 |
+| Sub-heading | The Future | 28px (1.75rem) | 500 | 1.15 (紧凑) | -0.42px | 卡片标题 |
+| Feature Title | The Future | 22px (1.38rem) | 500 | 1.15 (紧凑) | -0.22px | 小功能标题 |
+| Body Large | The Future | 18px (1.13rem) | 400–500 | 1.30 (紧凑) | -0.18px | 描述、区段 |
+| Body / Button | The Future | 16px (1rem) | 400–500 | 1.25–1.30 | -0.16px | 标准正文、导航、按钮 |
+| Caption | The Future | 14px (0.88rem) | 400–500 | 1.40 | normal | 元数据、描述 |
+| Mono Label | PP Neue Montreal Mono | 16px (1rem) | 500 | 1.00 (紧凑) | 0.08px | 大写区段标签 |
+| Mono Small | PP Neue Montreal Mono | 11px (0.69rem) | 500 | 1.00–1.40 | 0.055–0.08px | 小号大写标签 |
+| Mono Micro | PP Neue Montreal Mono | 10px (0.63rem) | 400 | 1.40 | 0.05px | 最小的大写标签 |
+
+### Principles
+- **处处使用负字距**：“The Future” 的每种尺寸都使用负字间距（-0.16px 到 -1.92px），创造出一致紧凑、现代的文本。
+- **用 Mono 构建结构**：PP Neue Montreal Mono 以大写形式和正字间距创造出技术性的“标签”时刻，在不与展示文本竞争的情况下构建页面结构。
+- **Weight 500 作为强调**：系统使用 400（常规）和 500（中等）—— 不使用粗体。中等字重标志着标题和强调。
+- **通篇紧凑的行高**：甚至正文也使用 1.25–1.30 的行高 —— 比通常更紧凑，创造出密集、信息丰富的感觉。
+
+## 4. 组件样式
+
+### Buttons
+
+**Glass on Dark**
+- Background: `rgba(255, 255, 255, 0.12)` (毛玻璃)
+- Text: Pure White (`#ffffff`)
+- Radius: 锐利 (4px)
+- Opacity: 0.5
+- Hover: 透明深色覆盖层
+- 用于深色区域 —— 微妙、类似玻璃质感
+
+**Dark Solid**
+- Background: Dark Blue (`#010120`) 或 Pure Black
+- Text: Pure White
+- Radius: 锐利 (4px)
+- 浅色表面上的主要 CTA
+
+**Outlined Light**
+- Border: `1px solid rgba(0, 0, 0, 0.08)`
+- Background: 透明或微弱的毛玻璃效果
+- Text: Pure Black
+- Radius: 锐利 (4px)
+- 浅色表面上的次要操作
+
+### Cards & Containers
+- Background: Pure White 或微弱的毛玻璃色调
+- Border: 浅色上为 `1px solid rgba(0, 0, 0, 0.08)`；深色上为 `1px solid rgba(255, 255, 255, 0.12)`
+- Radius: 徽章和小元素使用锐利圆角 (4px)；较大的容器使用舒适圆角 (8px)
+- Shadow: 带深蓝色调的 (`rgba(1, 1, 32, 0.1) 0px 4px 10px`) —— 温暖而微妙
+- 数据卡片醒目地展示大数字
+
+### Badges / Tags
+- Background: `rgba(0, 0, 0, 0.04)` (浅色) 或 `rgba(255, 255, 255, 0.12)` (深色)
+- Text: Black (浅色) 或 White (深色)
+- Padding: 2px 8px (紧凑)
+- Radius: 锐利 (4px)
+- Border: `1px solid rgba(0, 0, 0, 0.08)`
+- PP Neue Montreal Mono, uppercase, 16px
+
+### Navigation
+- 在白色/透明背景上的干净水平导航
+- Logo: Together AI 文字商标
+- Links: The Future 16px, weight 400
+- CTA: Dark solid 按钮
+- Hover: 无文本装饰
+
+### Image Treatment
+- 抽象的柔和渐变插图（云朵/羽毛形状）
+- 在深色/浅色表面上的产品 UI 截图
+- 编辑风格的团队照片
+- 深色背景的研究论文卡片
+
+### Distinctive Components
+
+**Stats Bar**
+- 大型性能指标（2x、60%、90%）
+- 醒目的展示数字
+- 下方的简短描述性标题
+- 干净的水平布局
+
+**Mono Section Labels**
+- PP Neue Montreal Mono, 大写, 11px, 字间距 0.055px
+- 作为整个页面的导航路标
+- 具有技术感、结构化的感觉
+
+**Research Section**
+- Dark Blue (#010120) 背景
+- 白色文本，研究论文缩略图
+- 创造出一个独特的“学术”区域
+
+**Large Footer Logo**
+- “together” 文字商标在深色 footer 中以巨大的比例呈现
+- 创造出一个具有品牌宣言意味的结尾时刻
+
+## 5. 布局原则
+
+### Spacing System
+- 基础单位: 8px
+- 比例: 1px, 2px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 44px, 48px, 80px, 100px, 120px
+- Button/badge padding: 2px 8px (紧凑)
+- Card 内部 padding: 约 24–32px
+- Section 垂直间距: 充足 (80–120px)
+
+### Grid & Container
+- Max 容器宽度: 约 1200px, 居中
+- Hero: 居中并带有柔和渐变背景
+- 特性 sections: 多列卡片网格
+- Stats: 水平排列的数据卡片
+- Research: 深色全宽 section
+
+### Whitespace Philosophy
+- **乐观的呼吸空间**：部分区域之间充足的间距创造出一种开放、诱人的感觉，让企业 AI 基础设施变得平易近人。
+- **双重氛围**：浅色部分通过留白透气；深色部分内容则更加密集。
+- **数据作为视觉锚点**：带有小标题的大数字创造出自然的视觉焦点。
+
+### Border Radius Scale
+- 锐利 (4px)：按钮、徽章、标签、小型交互元素 —— 主要的圆角半径
+- 舒适 (8px)：较大的容器、特征卡片
+
+*这是一个刻意保持克制圆角系统 —— 没有胶囊形，没有大圆角。锐利的几何感与柔和的渐变形成了鲜明对比。*
+
+## 6. 深度与层级
+
+| 级别 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影，无边框 | 页面背景，文本块 |
+| Contained (Level 1) | `1px solid rgba(0,0,0,0.08)` (浅色) 或 `rgba(255,255,255,0.12)` (深色) | 卡片、徽章、容器 |
+| Elevated (Level 2) | `rgba(1, 1, 32, 0.1) 0px 4px 10px` | 特征卡片，hover 状态 |
+| Dark Zone (Level 3) | Dark Blue (#010120) 全宽背景 | 研究、页脚、技术区段 |
+
+**阴影哲学**：Together AI 使用一种独特的单一阴影 —— 染有 Dark Blue（`rgba(1, 1, 32, 0.1)`）色调，而不是普通的黑色。这给浮起的元素带来了一种微妙的偏蓝光泽，将它们与品牌的午夜蓝深色模式联系起来。该阴影是柔和的（10px 模糊，4px 偏移）且始终向下 —— 创造出轻柔的纸张悬停般的浮起效果。
+
+## 7. 宜与忌
+
+### 宜
+- 在 Hero 插图和装饰性背景中使用柔和的渐变（粉色/蓝色/薰衣草色）
+- 在深色区段使用 Dark Blue (#010120) —— 绝不使用普通的灰黑色
+- 在所有 “The Future” 文本上应用负字间距（按大小缩放）
+- 使用 PP Neue Montreal Mono 的大写形式作为区段标签和技术标记
+- 保持徽章和交互元素的圆角锐利 (4px)
+- 使用带深蓝色调的阴影来实现悬浮效果
+- 保持浅色/深色区段的二元性 —— 商业（浅色）对比研究（深色）
+- 用大号显示数字突出展示企业数据
+
+### 忌
+- 不要将 Brand Magenta (#ef2cc1) 或 Brand Orange (#fc4c02) 作为 UI 颜色 —— 它们仅用于插图
+- 不要使用胶囊形或大圆角 —— 几何形状应当是锐利的
+- 不要使用普通的灰黑色作为深色区段 —— 始终使用 Dark Blue (#010120)
+- 不要在 “The Future” 上使用正字间距 —— 它始终是负的
+- 不要使用粗体 (700+) 字重 —— 400–500 是全部范围
+- 不要使用暖色调阴影 —— 始终保持深蓝色调
+- 不要将区段间距缩小到 48px 以下 —— 开放感是核心
+- 不要混入额外的字体 —— “The Future” + PP Neue Montreal Mono 是固定搭配
+
+## 8. 响应式行为
+
+### Breakpoints
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Mobile | <479px | 紧凑布局，所有元素垂直堆叠 |
+| Large Mobile | 479–767px | 单列布局，汉堡菜单 |
+| Tablet | 768–991px | 开始出现 2 列网格 |
+| Desktop | 992px+ | 完整的多列布局 |
+
+### Touch Targets
+- 带有充足 padding 的按钮
+- 作为触摸目标的卡片表面
+- 舒适的 16px 导航链接
+
+### Collapsing Strategy
+- **Navigation**: 在移动端折叠为汉堡菜单
+- **Hero text**: 64px → 40px → 28px 渐进缩放
+- **Stats bar**: 水平 → 垂直堆叠
+- **特性 grids**: 多列 → 单列
+- **Research section**: 卡片垂直堆叠
+
+### Image Behavior
+- 柔和渐变插图按比例缩放
+- 产品截图保持宽高比
+- 团队照片在容器内缩放
+
+## 9. Agent 提示词指南
+
+### Quick Color Reference
+- Primary Text (浅色): "Pure Black (#000000)"
+- Primary Text (深色): "Pure White (#ffffff)"
+- Page Background: "Pure White (#ffffff)"
+- Dark Surface: "Dark Blue (#010120)"
+- Brand Accent 1: "Brand Magenta (#ef2cc1)"
+- Brand Accent 2: "Brand Orange (#fc4c02)"
+- Soft Accent: "Soft Lavender (#bdbbff)"
+- Border (浅色): "rgba(0, 0, 0, 0.08)"
+
+### 示例 Component Prompts
+- "在带有柔和粉彩渐变（粉色 → 薰衣草色 → 蓝色）背景的白色画布上创建 Hero 区域。标题采用 64px 'The Future' weight 500，line-height 1.10，letter-spacing -1.92px。文本为 Pure Black。包含一个深蓝色的 CTA 按钮（#010120, 4px radius）。"
+- "设计一张数据卡片：大型显示数字（64px, weight 500）下方带有小标题（14px）。白色背景，8px radius，深蓝色调阴影 (rgba(1, 1, 32, 0.1) 0px 4px 10px)。"
+- "构建一个区段标签：PP Neue Montreal Mono, 11px, weight 500, uppercase, letter-spacing 0.055px。浅色背景上为黑色文本，深色背景上为白色。"
+- "创建一个深色研究区段：Dark Blue (#010120) 背景。白色文本，区段标题为 40px 'The Future' weight 500，letter-spacing -0.8px。卡片带有 rgba(255, 255, 255, 0.12) 边框。"
+- "设计一个徽章：4px radius，rgba(0, 0, 0, 0.04) 背景，1px solid rgba(0, 0, 0, 0.08) 边框，'The Future' 16px 文本。Padding: 2px 8px。"
+
+### Iteration Guide
+1. 始终为 "The Future" 指定负字间距（letter-spacing） —— 根据大小进行缩放
+2. 深色区段使用 #010120（午夜蓝），绝不用普通的黑色
+3. 阴影始终带深蓝色调：rgba(1, 1, 32, 0.1)
+4. Mono 标签始终为大写形式并带有正字间距
+5. 保持圆角锐利 (4px 或 8px) —— 无胶囊形，无大圆角
+6. 柔和渐变用于装饰，而非常规 UI 框架

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

@@ -0,0 +1,308 @@
+# Design System: Uber
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原始站点使用专有字体。对于自包含的 HTML 输出，请使用以下 CDN 替代字体：
+> - **Primary:** `DM Sans` | **Mono:** `system monospace stack`
+> - **Font stack (CSS):** `font-family: 'DM Sans', 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=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，并通过 `generative-widgets` skill (cloudflared tunnel) 提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Uber 的设计语言堪称自信极简主义的典范——这是一个黑白交织的宇宙，每个像素都有其用途，没有任何多余的装饰。整个体验建立在一种鲜明的二元性之上：乌黑（`#000000`）与纯白（`#ffffff`），几乎没有中灰色调来稀释核心信息。这不是初创公司那种尚未完成设计的死板极简主义——而是一个成熟品牌深思熟虑的克制，它甚至可以用轻声细语来表达。
+
+其标志性字体 UberMove 是一种专有的几何无衬线字体，具有明显的方正感和工程感。使用 UberMove Bold（粗体）52px 的标题带有广告牌般的分量——权威、直接、不容置疑。与之配套的 UberMoveText 字体以中等字重（500）处理正文和按钮，字符特性稍微柔和，更具可读性。它们共同构建了一个感觉犹如交通地图般的排版系统：清晰、高效，专为快速浏览而生。
+
+让 Uber 的设计真正与众不同的是其全出血（full-bleed）摄影和插图的使用，结合药丸形状的交互元素（999px 边框半径）。导航标签、CTA 按钮和类别选择器都共享这种胶囊形状，创造出一种极具触感、适合拇指操作的界面语言，这正是 Uber 独有的标志。其插图——展现司机、乘客和城市风光的温暖且略带风格化的场景——为人性化注入了原本可能冷冰冰的单色系统。网站在白色内容区块和全黑色页脚之间交替，基于卡片的布局使用尽可能轻柔的阴影（rgba(0,0,0,0.12-0.16)）来创造微妙的悬浮感，同时不破坏扁平的美学。
+
+**核心特征：**
+- 纯黑白基调，UI 界面中几乎没有中灰色调
+- UberMove (标题) + UberMoveText (正文/UI) —— 专有的几何无衬线字体家族
+- 万物皆药丸形状：按钮、标签、导航项均使用 999px 边框半径
+- 温暖、人性化的插图与鲜明的单色界面形成对比
+- 基于卡片的布局，搭配极轻柔的阴影（0.12-0.16 不透明度）
+- 8px 间距网格，布局紧凑且信息密集
+- 大胆的摄影作品作为全出血的主视觉背景
+- 黑色页脚奠定了页面基调，提供了一个暗色、高对比度的环境
+
+## 2. 色彩调色板与角色
+
+### Primary
+- **Uber Black** (`#000000`): 决定性的品牌颜色——用于主要按钮、标题、导航文本和页脚。不是“接近黑色”或“灰黑色”，而是真正的不妥协的纯黑。
+- **Pure White** (`#ffffff`): 主要的表面颜色和反色文本。用于页面背景、卡片表面以及黑色元素上的文本。
+
+### 交互与按钮状态
+- **Hover Gray** (`#e2e2e2`): 白色按钮的悬停状态——一种干净、清冷的浅灰色，提供清晰的反馈且不带任何暖色调。
+- **Hover Light** (`#f3f3f3`): 具有悬浮感的白色按钮的微妙悬停状态——一种几乎难以察觉的灰色，用于提供轻柔的交互反馈。
+- **Chip Gray** (`#efefef`): 二级/过滤按钮和导航标签的背景色——一种中性、极浅的灰色。
+
+### 文本与内容
+- **Body Gray** (`#4b4b4b`): 次要文本和页脚链接——一种不偏暖也不偏冷的真正中灰色。
+- **Muted Gray** (`#afafaf`): 第三级文本、弱化的页脚链接和占位符内容。
+
+### 边框与分隔
+- **Border Black** (`#000000`): 用于结构限制的 1px 细边框——很少使用，仅在分隔符和表单容器上使用。
+
+### 阴影与深度
+- **Shadow Light** (`rgba(0, 0, 0, 0.12)`): 标准的卡片悬浮——为内容卡片提供极轻的抬升效果。
+- **Shadow Medium** (`rgba(0, 0, 0, 0.16)`): 为浮动操作按钮和遮罩层提供稍强的悬浮效果。
+- **Button Press** (`rgba(0, 0, 0, 0.08)`): 用于二级按钮激活/按下状态的内阴影。
+
+### 链接状态
+- **默认 Link Blue** (`#0000ee`): 带下划线文本链接的标准浏览器蓝色——用于正文内容中。
+- **Link White** (`#ffffff`): 深色表面上的链接——用于页脚和暗色区块。
+- **Link Black** (`#000000`): 浅色表面上带有下划线装饰的链接。
+
+### 渐变系统
+- Uber 的设计**完全没有渐变**。黑/白的二元对立和扁平的色块创造了所有的视觉层级。系统中任何地方都不出现渐变——每一个表面都是纯色，每一次过渡都是生硬的边缘或阴影。
+
+## 3. 排版规则
+
+### 字体家族
+- **Headline / Display**: `UberMove`, 备用字体: `UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif`
+- **Body / UI**: `UberMoveText`, 备用字体: `system-ui, Helvetica Neue, Helvetica, Arial, sans-serif`
+
+*注意：UberMove 和 UberMoveText 是专有字体。对于外部实现，请使用 `system-ui` 或 Inter 作为最接近的可用替代品。UberMove 那种几何感、方正比例的特性可以用 Inter 或 DM Sans 来近似模拟。*
+
+### 层级
+
+| Role | Font | Size | Weight | Line Height | Notes |
+|------|------|------|--------|-------------|-------|
+| Display / Hero | UberMove | 52px (3.25rem) | 700 | 1.23 (tight) | 视觉冲击力最强，具有广告牌般的存在感 |
+| Section Heading | UberMove | 36px (2.25rem) | 700 | 1.22 (tight) | 主要板块的锚点 |
+| Card Title | UberMove | 32px (2rem) | 700 | 1.25 (tight) | 卡片和特性标题 |
+| Sub-heading | UberMove | 24px (1.5rem) | 700 | 1.33 | 次级板块标题 |
+| Small Heading | UberMove | 20px (1.25rem) | 700 | 1.40 | 紧凑型标题，列表标题 |
+| Nav / UI Large | UberMoveText | 18px (1.13rem) | 500 | 1.33 | 导航链接，突出的 UI 文本 |
+| Body / Button | UberMoveText | 16px (1rem) | 400-500 | 1.25-1.50 | 标准正文，按钮标签 |
+| Caption | UberMoveText | 14px (0.88rem) | 400-500 | 1.14-1.43 | 元数据，描述，小链接 |
+| Micro | UberMoveText | 12px (0.75rem) | 400 | 1.67 (relaxed) | 免责声明，法律文本 |
+
+### 原则
+- **粗体标题，中等字重正文**: UberMove 标题统一使用 700 (粗体) 字重——每个标题都具有广告牌般的冲击力。UberMoveText 正文和 UI 文本使用 400-500 字重，通过字重对比创造出清晰的视觉层级。
+- **紧凑的标题行高**: 所有标题的行高都在 1.22-1.40 之间——紧凑且有力，专为快速扫视而非长时间阅读设计。
+- **功能性排版**: 没有任何装饰性的排版处理。没有字间距、没有大小写转换、没有装饰性的字号。每一个文本元素都服务于直接的沟通目的。
+- **两款字体，严格分工**: UberMove 专用于标题。UberMoveText 专用于正文、按钮、链接和 UI。界限不可逾越。
+
+## 4. 组件样式
+
+### 按钮
+
+**Primary Black (CTA)**
+- 背景: Uber Black (`#000000`)
+- 文本: Pure White (`#ffffff`)
+- Padding: 10px 12px
+- Radius: 999px (full pill)
+- Outline: none
+- Focus: inset ring `rgb(255,255,255) 0px 0px 0px 2px`
+- 主要操作按钮——醒目、高对比度、不容错过
+
+**Secondary White**
+- 背景: Pure White (`#ffffff`)
+- 文本: Uber Black (`#000000`)
+- Padding: 10px 12px
+- Radius: 999px (full pill)
+- Hover: 背景变为 Hover Gray (`#e2e2e2`)
+- Focus: 背景变为 Hover Gray，出现 inset ring
+- 用于深色表面，或作为 Primary Black 的次级操作
+
+**Chip / Filter**
+- 背景: Chip Gray (`#efefef`)
+- 文本: Uber Black (`#000000`)
+- Padding: 14px 16px
+- Radius: 999px (full pill)
+- Active: inset shadow `rgba(0,0,0,0.08)`
+- 导航标签、类别选择器、过滤切换器
+
+**Floating Action**
+- 背景: Pure White (`#ffffff`)
+- 文本: Uber Black (`#000000`)
+- Padding: 14px
+- Radius: 999px (full pill)
+- Shadow: `rgba(0,0,0,0.16) 0px 2px 8px 0px`
+- Transform: `translateY(2px)` slight offset
+- Hover: 背景变为 `#f3f3f3`
+- 地图控件、回到顶部、悬浮 CTA
+
+### 卡片与容器
+- 背景: 白色页面上的 Pure White (`#ffffff`)；没有明显的卡片背景区分
+- Border: 默认无——卡片由阴影定义，而非描边
+- Radius: 标准内容卡片为 8px；特色/推广卡片为 12px
+- Shadow: `rgba(0,0,0,0.12) 0px 4px 16px 0px` 用于标准悬浮感
+- 卡片信息密集，内部 padding 极少
+- 图片主导的卡片使用全出血图片，文字覆盖在图片上或位于下方
+
+### 输入框与表单
+- 文本: Uber Black (`#000000`)
+- 背景: Pure White (`#ffffff`)
+- Border: 1px solid Black (`#000000`) ——唯一显著可见边框的地方
+- Radius: 8px
+- Padding: 标准且舒适的间距
+- Focus: 没有提取的自定义 focus 状态——依赖标准浏览器 focus ring
+
+### 导航
+- 粘性顶部导航，白色背景
+- Logo: 24x24px 的黑色 Uber 字标/图标
+- Links: UberMoveText, 14-18px, 字重 500, 颜色为 Uber Black
+- 带有 Chip Gray (`#efefef`) 背景的药丸形导航标签，用于类别导航 ("Ride", "Drive", "Business", "Uber Eats")
+- Menu toggle: 50% border-radius 的圆形按钮
+- Mobile: 抽屉式汉堡菜单
+
+### 图片处理
+- 温暖的手绘风格场景（非功能区块的照片）
+- 插图风格：略带风格化的人物、插图内部采用暖色调、现代感
+- Hero 区使用大胆的摄影或插图作为全宽背景
+- App 下载 CTA 处使用二维码
+- 包含在卡片中的所有图像均使用标准的 8px 或 12px 边框半径
+
+### 特色组件
+
+**Category Pill Navigation**
+- 用于顶级导航的一排水平药丸形按钮 ("Ride", "Drive", "Business", "Uber Eats", "About")
+- 每个标签：Chip Gray 背景，黑色文字，999px 圆角
+- 激活状态以黑底白字反色显示
+
+**Hero with Dual Action**
+- 分屏 Hero：左侧为文本/CTA，右侧为地图/插图
+- 两个并排的输入框用于输入起点/目的地
+- 黑色药丸形的 "See prices" CTA 按钮
+
+**Plan-Ahead Cards**
+- 推广 "Uber Reserve" 和行程规划等功能的卡片
+- 以插图为主，具有温暖、人性化的图像
+- 底部带有白色文本的黑色 CTA 按钮
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位: 8px
+- 尺度: 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 32px
+- 按钮 padding: 10px 12px (紧凑) 或 14px 16px (舒适)
+- 卡片内部 padding: 约 24-32px
+- 区块垂直间距：慷慨但高效——主要区块之间约 64-96px
+
+### 网格与容器
+- 最大容器宽度：约 1136px，居中
+- Hero：分屏布局，左侧文本，右侧视觉元素
+- 特性 区块：2 列卡片网格或全宽单列
+- Footer：黑色背景上的多列链接网格
+- 延伸至视口边缘的全宽区块
+
+### 留白哲学
+- **高效，不空旷**: Uber 的留白是功能性的——足以分隔元素，但绝不让人感觉空虚。这是交通系统式的间距：紧凑、清晰、目的驱动。
+- **信息密集的卡片**: 卡片紧凑地打包信息，内部间距极小，依靠阴影和圆角来界定边界。
+- **区块呼吸空间**: 主要区块拥有宽裕的垂直间距，但在区块内部，元素则是紧密组合的。
+
+### Border Radius Scale
+- Sharp (0px): 交互元素不使用直角
+- Standard (8px): 内容卡片，输入框，列表框
+- Comfortable (12px): 特色卡片，较大的容器，链接卡片
+- Full Pill (999px): 所有按钮、标签、导航项、药丸
+- Circle (50%): 头像图片，图标容器，圆形控件
+
+## 6. 深度与悬浮
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, solid background | 页面背景，内联内容，文本区块 |
+| Subtle (Level 1) | `rgba(0,0,0,0.12) 0px 4px 16px` | 标准内容卡片，功能区块 |
+| Medium (Level 2) | `rgba(0,0,0,0.16) 0px 4px 16px` | 悬浮卡片，遮罩元素 |
+| Floating (Level 3) | `rgba(0,0,0,0.16) 0px 2px 8px` + translateY(2px) | 悬浮操作按钮，地图控件 |
+| Pressed (Level 4) | `rgba(0,0,0,0.08) inset` (999px spread) | 激活/按下的按钮状态 |
+| Focus Ring | `rgb(255,255,255) 0px 0px 0px 2px inset` | 键盘焦点指示器 |
+
+**阴影哲学**：Uber 纯粹将阴影作为一种结构工具，绝不用于装饰。阴影始终是极低不透明度 (0.08-0.16) 的黑色，创造出分离内容层所需的最起码的悬浮感。模糊半径适中 (8-16px)——足以感觉自然，但绝不夸张。没有彩色阴影，没有多层阴影堆叠，也没有环境光效果。深度更多是通过黑/白区块的对比来传达，而不是通过阴影悬浮。
+
+## 7. 宜与忌
+
+### 宜
+- 使用真黑（`#000000`）和纯白（`#ffffff`）作为主色调——这种鲜明的对比就是 Uber 的核心特质
+- 为所有按钮、标签和药丸形导航元素使用 999px 边框半径
+- 所有标题保持使用 UberMove Bold (700) 以获得广告牌级别的冲击力
+- 使用极轻柔的阴影（0.12-0.16 不透明度）来提升卡片悬浮感——几乎不可见
+- 保持紧凑、信息密集的布局风格——Uber 优先考虑效率而非空旷感
+- 使用温暖、人性化的插图来柔化单色界面
+- 为内容卡片应用 8px 圆角，为特色容器应用 12px 圆角
+- 为导航和突出的 UI 文本使用字重 500 的 UberMoveText
+- 将黑色主按钮与白色次级按钮搭配，形成双操作布局
+
+### 忌
+- 不要在 UI 界面中引入颜色——Uber 的界面严格限制在黑、白、灰
+- 不要在按钮上使用小于 999px 的圆角——全药丸形状是其核心标识元素
+- 不要使用高不透明度的厚重阴影或投影——悬浮感必须是微妙的
+- 任何地方都不要使用衬线字体——Uber 的排版完全是几何无衬线体
+- 不要使用带有过多空白的空旷布局——Uber 的信息密度是刻意为之的
+- 不要使用渐变或颜色遮罩——每一个表面都是扁平的纯色
+- 不要将 UberMove 混入正文，也不要将 UberMoveText 混入标题——层级是非常严格的
+- 不要使用装饰性边框——边框是功能性的（输入框、分隔符）或完全省略
+- 不要用灰白或深灰来软化黑/白对比——这种二元对立是刻意设计的
+
+## 8. 响应式行为
+
+### 断点
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | 320px | 最小布局，单列，堆叠输入框，紧凑排版 |
+| Mobile | 600px | 标准移动端，堆叠布局，汉堡导航 |
+| Tablet Small | 768px | 开始出现双列网格，展开的卡片布局 |
+| Tablet | 1119px | 完整平板布局，并排的 Hero 内容 |
+| Desktop Small | 1120px | 桌面网格激活，水平导航标签 |
+| Desktop | 1136px | 完整桌面布局，最大容器宽度，分屏 Hero |
+
+### 触摸目标
+- 所有药丸按钮：最小 44px 高度 (10-14px 垂直 padding + line-height)
+- 导航标签：宽裕的 14px 16px padding，方便拇指点击
+- 圆形控件（菜单，关闭）：50% 圆角确保了大而容易点击的目标
+- 卡片表面在移动端作为全区域触摸目标
+
+### 折叠策略
+- **Navigation**: 水平药丸导航折叠为带有圆形切换按钮的汉堡菜单
+- **Hero**: 分屏布局（文本 + 地图/视觉）堆叠成单列——文本在上，视觉在下
+- **Input fields**: 并排的起点/目的地输入框垂直堆叠
+- **特性 cards**: 2 列网格折叠为全宽堆叠卡片
+- **Headings**: 52px 显示尺寸按 36px, 32px, 24px, 20px 顺序缩小
+- **Footer**: 多列链接网格折叠为手风琴或堆叠的单列
+- **Category pills**: 在较小屏幕上带溢出的水平滚动
+
+### 图片行为
+- 插图在其容器内按比例缩放
+- Hero 图像保持纵横比，在较小屏幕上可能会被裁剪
+- 二维码区块在移动端隐藏（应用下载切换为直接商店链接）
+- 卡片图像在所有尺寸下保持 8-12px 边框半径
+
+## 9. Agent 提示词指南
+
+### 快速颜色参考
+- Primary Button: "Uber Black (#000000)"
+- Page Background: "Pure White (#ffffff)"
+- Button Text (on black): "Pure White (#ffffff)"
+- Button Text (on white): "Uber Black (#000000)"
+- Secondary Text: "Body Gray (#4b4b4b)"
+- Tertiary Text: "Muted Gray (#afafaf)"
+- Chip Background: "Chip Gray (#efefef)"
+- Hover State: "Hover Gray (#e2e2e2)"
+- Card Shadow: "rgba(0,0,0,0.12) 0px 4px 16px"
+- Footer Background: "Uber Black (#000000)"
+
+### 示例 Component Prompts
+- "Create a hero section on Pure White (#ffffff) with a headline at 52px UberMove Bold (700), line-height 1.23. Use Uber Black (#000000) text. Add a subtitle in Body Gray (#4b4b4b) at 16px UberMoveText weight 400 with 1.50 line-height. Place an Uber Black (#000000) pill CTA button with Pure White text, 999px radius, padding 10px 12px."
+- "Design a category navigation bar with horizontal pill buttons. Each pill: Chip Gray (#efefef) background, Uber Black (#000000) text, 14px 16px padding, 999px border-radius. Active pill inverts to Uber Black background with Pure White text. Use UberMoveText at 14px weight 500."
+- "Build a feature card on Pure White (#ffffff) with 8px border-radius and shadow rgba(0,0,0,0.12) 0px 4px 16px. Title in UberMove at 24px weight 700, description in Body Gray (#4b4b4b) at 16px UberMoveText. Add a black pill CTA button at the bottom."
+- "Create a dark footer on Uber Black (#000000) with Pure White (#ffffff) heading text in UberMove at 20px weight 700. Footer links in Muted Gray (#afafaf) at 14px UberMoveText. Links hover to Pure White. Multi-column grid layout."
+- "Design a floating action button with Pure White (#ffffff) background, 999px radius, 14px padding, and shadow rgba(0,0,0,0.16) 0px 2px 8px. Hover shifts background to #f3f3f3. Use for scroll-to-top or map controls."
+
+### 迭代指南
+1. 每次只关注一个组件
+2. 引用严格的黑/白调色板——"use Uber Black (#000000)" 而不是 "make it dark"
+3. 务必为按钮和药丸指定 999px 圆角——这对于 Uber 的视觉标识是不可商量的
+4. 明确描述字体家族——"UberMove Bold for the heading, UberMoveText Medium for the label"
+5. 对于阴影，使用 "whisper shadow (rgba(0,0,0,0.12) 0px 4px 16px)"——绝不使用厚重投影
+6. 保持布局紧凑和信息密集——Uber 是高效的，而非空旷的
+7. 插图应该是温暖和人性化的——描述为 "stylized people in warm tones" 而不是抽象图形
+8. 将黑色 CTA 与白色次级操作搭配，以实现平衡的双操作布局