@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,326 @@
+# 设计系统：Apple
+
+
+> **Hermes Agent — 实施说明**
+>
+> 原始网站使用专有字体。对于自包含的 HTML 输出，请使用以下 CDN 替代方案：
+> - **Primary:** `system-ui` | **Mono:** `SF Mono (system)`
+> - **Font stack (CSS):** `font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;`
+> - **Mono stack (CSS):** `font-family: 'SF Mono (system)', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
+> ```html
+> <!-- No CDN needed — uses system fonts -->
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` skill（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Apple 的网站是控制张力的教科书级典范——大片纯净的黑色和接近白色的背景如同电影画布，衬托着那些被拍得如同画廊中雕塑般的产品。其设计哲学本质上就是极简：每一个像素的存在都是为了服务于产品，界面本身则不断退隐，直到变得不可见。这不是作为审美偏好的极简主义，而是出于对产品对象的敬畏。
+
+排版是一切的基石。San Francisco（大字号使用 SF Pro Display，正文使用 SF Pro Text）是 Apple 的专有字体，采用光学尺寸技术，可根据字号自动调整字形。在展示尺寸（56px）下，字重为 600，行高极其紧凑（1.07），并带有微妙的负字间距（-0.28px），创造出一种如同机器加工而非人工排版出来的标题——精准、自信且直截了当。在正文尺寸（17px）下，字间距略微放松（-0.374px），行高扩展至 1.47，营造出一种舒适但绝不松散的阅读节奏。
+
+色彩运用呈现极其鲜明的二元对立。产品展示区在纯黑（`#000000`）背景配白字和浅灰（`#f5f5f7`）背景配接近黑色的文字（`#1d1d1f`）之间交替。这创造出一种电影般的节奏感——深色区域让人感到沉浸和高级，浅色区域则显得开放并带有信息属性。唯一的彩色点缀是 Apple Blue（`#0071e3`），专门用于交互元素：链接、按钮和聚焦状态。在一片中性色海洋中，这种单一的强调色赋予了每一个可点击元素无可错辨的可见性。
+
+**核心特征：**
+- 采用光学尺寸技术的 SF Pro Display/Text —— 字形会根据尺寸上下文自动适应
+- 二元化的明暗区域节奏：黑色（`#000000`）与浅灰色（`#f5f5f7`）交替
+- 单一强调色：Apple Blue（`#0071e3`）专门用于交互元素
+- 产品作为主角，在纯色背景上进行摄影 —— 无渐变、无纹理、无干扰
+- 极度紧凑的标题行高（1.07-1.14），创造出具有压缩感、如广告牌般的视觉冲击力
+- 全宽区块布局，内容居中 —— 视口即是画布
+- 胶囊形 CTA（980px 圆角），创造出柔和、平易近人的操作按钮
+- 区块之间充裕的留白，让每个产品展示都有呼吸的空间
+
+## 2. 调色板与角色
+
+### Primary
+- **Pure Black** (`#000000`)：Hero 区背景，沉浸式产品展示。为最亮眼的产品提供最暗的画布。
+- **Light Gray** (`#f5f5f7`)：交替的区块背景，信息展示区。不是纯白——略带蓝灰色调，避免了死板感。
+- **Near Black** (`#1d1d1f`)：浅色背景上的主要文本，深色按钮填充。比纯黑稍暖，以提供舒适的阅读体验。
+
+### Interactive
+- **Apple Blue** (`#0071e3`)：`--sk-focus-color`，主要 CTA 背景，聚焦环。界面中唯一的彩色。
+- **Link Blue** (`#0066cc`)：`--sk-body-link-color`，行内文本链接。比 Apple Blue 稍暗，以保证文本级别的可读性。
+- **Bright Blue** (`#2997ff`)：深色背景上的链接。在黑色区块上具有更高的亮度以保证对比度。
+
+### Text
+- **White** (`#ffffff`)：深色背景上的文本，蓝色/深色 CTA 上的按钮文本。
+- **Near Black** (`#1d1d1f`)：浅色背景上的主要正文。
+- **Black 80%** (`rgba(0, 0, 0, 0.8)`)：辅助文本，浅色背景上的导航项。略微柔和。
+- **Black 48%** (`rgba(0, 0, 0, 0.48)`)：三级文本，禁用状态，轮播控件。
+
+### Surface & Dark Variants
+- **Dark Surface 1** (`#272729`)：深色区块中的卡片背景。
+- **Dark Surface 2** (`#262628`)：深色环境中的细微表面变化。
+- **Dark Surface 3** (`#28282a`)：深色背景上凸起的卡片。
+- **Dark Surface 4** (`#2a2a2d`)：最高的深色表面高度。
+- **Dark Surface 5** (`#242426`)：最深的暗色表面色调。
+
+### Button States
+- **Button Active** (`#ededf2`)：浅色按钮的激活/按下状态。
+- **Button 默认 Light** (`#fafafc`)：搜索/过滤按钮背景。
+- **Overlay** (`rgba(210, 210, 215, 0.64)`)：媒体控件遮罩，覆盖层。
+- **White 32%** (`rgba(255, 255, 255, 0.32)`)：深色模态框关闭按钮的悬停状态。
+
+### Shadows
+- **Card Shadow** (`rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`)：为产品卡片提供柔和、分散的高度感。偏移量和宽模糊半径创造出自然、具有照片质感的阴影。
+
+## 3. 排版规则
+
+### Font Family
+- **Display**: `SF Pro Display`，备选：`SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
+- **Body**: `SF Pro Text`，备选：`SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
+- SF Pro Display 用于 20px 及以上；SF Pro Text 针对 19px 及以下进行优化。
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | SF Pro Display | 56px (3.50rem) | 600 | 1.07 (tight) | -0.28px | 产品发布标题，最大视觉冲击力 |
+| Section Heading | SF Pro Display | 40px (2.50rem) | 600 | 1.10 (tight) | normal | 功能区块标题 |
+| Tile Heading | SF Pro Display | 28px (1.75rem) | 400 | 1.14 (tight) | 0.196px | 产品磁贴标题 |
+| Card Title | SF Pro Display | 21px (1.31rem) | 700 | 1.19 (tight) | 0.231px | 粗体卡片标题 |
+| Sub-heading | SF Pro Display | 21px (1.31rem) | 400 | 1.19 (tight) | 0.231px | 常规卡片标题 |
+| Nav Heading | SF Pro Text | 34px (2.13rem) | 600 | 1.47 | -0.374px | 大导航标题 |
+| Sub-nav | SF Pro Text | 24px (1.50rem) | 300 | 1.50 | normal | 细体子导航文本 |
+| Body | SF Pro Text | 17px (1.06rem) | 400 | 1.47 | -0.374px | 标准阅读文本 |
+| Body Emphasis | SF Pro Text | 17px (1.06rem) | 600 | 1.24 (tight) | -0.374px | 强调正文，标签 |
+| Button Large | SF Pro Text | 18px (1.13rem) | 300 | 1.00 (tight) | normal | 大按钮文本，细体 |
+| Button | SF Pro Text | 17px (1.06rem) | 400 | 2.41 (relaxed) | normal | 标准按钮文本 |
+| Link | SF Pro Text | 14px (0.88rem) | 400 | 1.43 | -0.224px | 正文链接，“Learn more” |
+| Caption | SF Pro Text | 14px (0.88rem) | 400 | 1.29 (tight) | -0.224px | 辅助文本，描述 |
+| Caption Bold | SF Pro Text | 14px (0.88rem) | 600 | 1.29 (tight) | -0.224px | 强调说明文本 |
+| Micro | SF Pro Text | 12px (0.75rem) | 400 | 1.33 | -0.12px | 免责声明，脚注 |
+| Micro Bold | SF Pro Text | 12px (0.75rem) | 600 | 1.33 | -0.12px | 粗体免责声明 |
+| Nano | SF Pro Text | 10px (0.63rem) | 400 | 1.47 | -0.08px | 法律文本，最小字号 |
+
+### Principles
+- **光学尺寸作为设计哲学**：SF Pro 会自动在 Display 和 Text 光学尺寸之间切换。Display 版本具有更宽的字间距和更细的笔画，针对大号字体进行了优化；Text 版本则更紧凑、更结实，适合小号字体。这意味着字体会根据上下文真正改变其 DNA。
+- **克制的字重**：字阶跨度从 300（细体）到 700（粗体），但大部分文本使用 400（常规）和 600（半粗体）。字重 300 仅出现在大型装饰文本上。字重 700 非常罕见，仅用于加粗的卡片标题。
+- **所有尺寸均采用负字间距**：与大多数仅在标题上调整字间距的系统不同，Apple 甚至在正文尺寸下也应用了微妙的负字间距（17px 时为 -0.374px，14px 时为 -0.224px，12px 时为 -0.12px）。这创造出普遍紧凑、高效的文本。
+- **极端的行高范围**：标题压缩至 1.07，而正文行高扩展至 1.47，某些按钮上下文甚至拉伸至 2.41。这种夸张的范围仅通过节奏感就创造了清晰的视觉层级。
+
+## 4. 组件样式
+
+### Buttons
+
+**Primary Blue (CTA)**
+- Background: `#0071e3` (Apple Blue)
+- Text: `#ffffff`
+- Padding: 8px 15px
+- Radius: 8px
+- Border: 1px solid transparent
+- Font: SF Pro Text, 17px, weight 400
+- Hover: background brightens slightly
+- Active: `#ededf2` background shift
+- Focus: `2px solid var(--sk-focus-color, #0071E3)` outline
+- Use: Primary call-to-action ("Buy", "Shop iPhone")
+
+**Primary Dark**
+- Background: `#1d1d1f`
+- Text: `#ffffff`
+- Padding: 8px 15px
+- Radius: 8px
+- Font: SF Pro Text, 17px, weight 400
+- Use: Secondary CTA, dark variant
+
+**Pill Link (Learn More / Shop)**
+- Background: transparent
+- Text: `#0066cc` (light bg) or `#2997ff` (dark bg)
+- Radius: 980px (full pill)
+- Border: 1px solid `#0066cc`
+- Font: SF Pro Text, 14px-17px
+- Hover: underline decoration
+- Use: "Learn more" and "Shop" links — the signature Apple inline CTA
+
+**Filter / Search Button**
+- Background: `#fafafc`
+- Text: `rgba(0, 0, 0, 0.8)`
+- Padding: 0px 14px
+- Radius: 11px
+- Border: 3px solid `rgba(0, 0, 0, 0.04)`
+- Focus: `2px solid var(--sk-focus-color, #0071E3)` outline
+- Use: Search bars, filter controls
+
+**Media Control**
+- Background: `rgba(210, 210, 215, 0.64)`
+- Text: `rgba(0, 0, 0, 0.48)`
+- Radius: 50% (circular)
+- Active: scale(0.9), background shifts
+- Focus: `2px solid var(--sk-focus-color, #0071e3)` outline, white bg, black text
+- Use: Play/pause, carousel arrows
+
+### Cards & Containers
+- Background: `#f5f5f7` (light) or `#272729`-`#2a2a2d` (dark)
+- Border: none（在 Apple 的系统中极少使用边框）
+- Radius: 5px-8px
+- Shadow: `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` 用于凸起的产品卡片
+- Content: 居中，留有充裕的内边距
+- Hover: 没有标准的悬停状态 —— 卡片是静态的，只有其中的链接是可交互的
+
+### Navigation
+- Background: `rgba(0, 0, 0, 0.8)`（半透明深色）配合 `backdrop-filter: saturate(180%) blur(20px)`
+- Height: 48px（紧凑）
+- Text: `#ffffff`，字号 12px，字重 400
+- Active: 悬停时显示下划线
+- Logo: Apple 标志 (SVG) 居中或左对齐，视口大小 17x48px
+- Mobile: 折叠为汉堡菜单，附带全屏覆盖菜单
+- 导航栏悬浮在内容之上，无论下方区块背景如何，始终保持其深色半透明玻璃质感
+
+### Image Treatment
+- 产品置于纯色背景（黑色或白色）上 —— 无附加背景，无额外环境，只有物体本身
+- 跨越整个视口宽度的全屏展示区块图片
+- 具有极高分辨率和细微阴影的产品摄影
+- 生活方式图片限制在圆角容器中（圆角 12px+）
+
+### Distinctive Components
+
+**Product Hero Module**
+- 全视口宽度的区块，带有纯色背景（黑色或 `#f5f5f7`）
+- 产品名称作为主标题（SF Pro Display, 56px, weight 600）
+- 下方附有一行较细字重的描述
+- 并排的两个胶囊形 CTA："Learn more"（描边）和 "Buy" / "Shop"（填充）
+
+**Product Grid Tile**
+- 位于对比背景上的正方形或接近正方形的卡片
+- 产品图片占据区块 60-70% 的空间
+- 下方为产品名称 + 一行描述
+- 底部带有 "Learn more" 和 "Shop" 链接对
+
+**特性 Comparison Strip**
+- 产品变体的横向滚动条
+- 每个变体都是一张垂直卡片，包含图片、名称和关键规格
+- 极简的 UI 框架 —— 让产品自己说话
+
+## 5. 布局原则
+
+### Spacing System
+- Base unit: 8px
+- Scale: 2px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 14px, 15px, 17px, 20px, 24px
+- 显著特征：该比例在小尺寸（2-11px）时非常密集，具有 1px 的精细增量，随后以更大的步长跳跃。这允许对排版和图标对齐进行精确的微调。
+
+### Grid & Container
+- Max content width: 约 980px（胶囊按钮中反复出现的 "980px radius" 呼应了这个宽度）
+- Hero: 具有居中内容块的全视口宽度区块
+- Product grids: 在居中容器内采用 2-3 列布局
+- 在 Hero 展示时刻采用单列布局 —— 一个产品，一条信息，全神贯注
+- 没有可见的网格线或间距槽 —— 通过留白创造出隐含的结构
+
+### Whitespace Philosophy
+- **电影般的喘息空间**：每个产品区块占据一个完整的视口高度（或接近全屏）。产品之间的留白不是空洞的——它是电影中场景之间的停顿。
+- **通过色块建立垂直节奏**：Apple 不只是使用间距来分隔区块，而是使用交替的背景色（黑色、`#f5f5f7`、白色）。每一次颜色的改变都预示着一个新的“场景”。
+- **内部压缩，外部扩张**：文本块被紧凑设置（负字间距，紧凑的行高），而它们周围的留白却非常广阔。这在密集感和开放性之间创造了一种张力。
+
+### Border Radius Scale
+- Micro (5px)：小容器，链接标签
+- Standard (8px)：按钮，产品卡片，图片容器
+- Comfortable (11px)：搜索输入框，过滤按钮
+- Large (12px)：特性面板，生活方式图片容器
+- Full Pill (980px)：CTA 链接（"Learn more", "Shop"），导航胶囊
+- Circle (50%)：媒体控件（播放/暂停，箭头）
+
+## 6. 深度与层级
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影，纯色背景 | 标准内容区块，文本块 |
+| Navigation Glass | 在 `rgba(0,0,0,0.8)` 上应用 `backdrop-filter: saturate(180%) blur(20px)` | 固定导航栏 —— 玻璃质感效果 |
+| Subtle Lift (Level 1) | `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px` | 产品卡片，悬浮元素 |
+| Media Control | `rgba(210, 210, 215, 0.64)` 背景配合 scale 变换 | 播放/暂停按钮，轮播控件 |
+| Focus (Accessibility) | `2px solid #0071e3` 轮廓 | 所有交互元素的键盘聚焦状态 |
+
+**阴影哲学**：Apple 极其克制地使用阴影。主要的阴影（`3px 5px 30px` 带有 0.22 不透明度）柔和、宽泛且带有偏移——模仿了漫反射的摄影棚灯光在实体物体下方投射出的自然阴影。这强化了“产品如同实体雕塑”的隐喻。大多数元素根本没有阴影；高度感来自于背景色的对比（例如，深色背景上的深色卡片，或稍微不同灰色调背景上的浅色卡片）。
+
+### Decorative Depth
+- 导航栏玻璃质感：半透明、模糊的导航栏是最具辨识度的深度元素，创造出一种 UI 悬浮在滚动内容之上的感觉
+- 区块颜色过渡：深度是通过黑色和浅灰色区块的交替来暗示的，而不是通过阴影
+- 产品摄影阴影：产品本身在其摄影中就会投射阴影，因此 UI 不需要再添加人造阴影
+
+## 7. 注意事项
+
+### Do
+- 在 20px 以上使用 SF Pro Display，在 20px 以下使用 SF Pro Text —— 尊重光学尺寸的边界
+- 在所有文本尺寸下应用负字间距（不仅仅是标题）—— Apple 全面采用紧凑的字间距
+- 仅将 Apple Blue (`#0071e3`) 用于交互元素 —— 它必须是唯一的强调色
+- 在黑色和浅灰色（`#f5f5f7`）区块背景之间交替，以获得电影般的节奏感
+- 为 CTA 链接使用 980px 圆角 —— Apple 标志性的链接形状
+- 将产品图像保持在纯色背景上，没有相互冲突的视觉元素
+- 为固定的导航栏使用半透明的深色玻璃质感（`rgba(0,0,0,0.8)` + 模糊）
+- 将标题行高压缩至 1.07-1.14 —— Apple 的标题以极其紧凑著称
+
+### Don't
+- 不要引入额外的强调色 —— 整个色彩预算都已花在蓝色上
+- 不要使用厚重的阴影或多层阴影 —— Apple 的阴影系统要么是单一柔和的漫反射阴影，要么完全没有
+- 不要在卡片或容器上使用边框 —— Apple 几乎从不使用可见边框（特定按钮除外）
+- 不要对 SF Pro 应用宽泛的字间距 —— 它在任何尺寸下都被设计为紧凑排列
+- 不要使用 800 或 900 的字重 —— 最大字重是 700（粗体），即便如此也非常罕见
+- 不要在背景中添加纹理、图案或渐变 —— 仅限纯色
+- 不要让导航栏变为不透明 —— 玻璃模糊效果是 Apple UI 特征不可或缺的一部分
+- 不要将正文文本居中对齐 —— Apple 的正文是左对齐的；只有标题会居中
+- 不要在矩形元素上使用大于 12px 的圆角（980px 仅适用于胶囊形状）
+
+## 8. 响应式行为
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Small Mobile | <360px | 支持的最小尺寸，单列 |
+| Mobile | 360-480px | 标准移动端布局 |
+| Mobile Large | 480-640px | 更宽的单列，更大的图片 |
+| Tablet Small | 640-834px | 开始采用 2 列产品网格 |
+| Tablet | 834-1024px | 完整的平板布局，展开导航 |
+| Desktop Small | 1024-1070px | 开始采用标准桌面布局 |
+| Desktop | 1070-1440px | 完整布局，最大内容宽度 |
+| Large Desktop | >1440px | 居中并带有宽敞的边距 |
+
+### Touch Targets
+- Primary CTAs: 8px 15px 的内边距可产生约 44px 的触摸高度
+- Navigation links: 48px 高度，并具有充足的间距
+- Media controls: 50% 圆角的圆形按钮，最小 44x44px
+- "Learn more" pills: 宽裕的内边距以提供舒适的点击区域
+
+### Collapsing Strategy
+- Hero headlines: 56px Display → 40px → 移动端 28px，按比例保持紧凑的行高
+- Product grids: 3 列 → 2 列 → 单列堆叠
+- Navigation: 完整的水平导航 → 紧凑的移动端菜单（汉堡菜单）
+- Product hero modules: 在所有尺寸下保持全屏铺满，文本按比例缩小
+- Section backgrounds: 在所有断点下保持全宽色块 —— 电影般的节奏感永远不会中断
+- Image sizing: 产品按比例缩放，从不裁剪 —— 产品的轮廓是神圣不可侵犯的
+
+### Image Behavior
+- 产品摄影在所有断点下均保持宽高比
+- Hero 产品图像会缩小，但始终保持居中
+- 全屏展示的区块背景图在每种尺寸下都持久存在
+- 生活方式图片在移动端可能会被裁剪，但会保持其圆角
+- 对视口外的产品图片进行懒加载
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: Apple Blue (`#0071e3`)
+- Page background (light): `#f5f5f7`
+- Page background (dark): `#000000`
+- Heading text (light): `#1d1d1f`
+- Heading text (dark): `#ffffff`
+- Body text: 浅色背景下为 `rgba(0, 0, 0, 0.8)`，深色背景下为 `#ffffff`
+- Link (light bg): `#0066cc`
+- Link (dark bg): `#2997ff`
+- Focus ring: `#0071e3`
+- Card shadow: `rgba(0, 0, 0, 0.22) 3px 5px 30px 0px`
+
+### 示例 Component Prompts
+- "Create a hero section on black background. Headline at 56px SF Pro Display weight 600, line-height 1.07, letter-spacing -0.28px, color white. One-line subtitle at 21px SF Pro Display weight 400, line-height 1.19, color white. Two pill CTAs: 'Learn more' (transparent bg, white text, 1px solid white border, 980px radius) and 'Buy' (Apple Blue #0071e3 bg, white text, 8px radius, 8px 15px padding)."
+- "Design a product card: #f5f5f7 background, 8px border-radius, no border, no shadow. Product image top 60% of card on solid background. Title at 28px SF Pro Display weight 400, letter-spacing 0.196px, line-height 1.14. 说明 at 14px SF Pro Text weight 400, color rgba(0,0,0,0.8). 'Learn more' and 'Shop' links in #0066cc at 14px."
+- "Build the Apple navigation: sticky, 48px height, background rgba(0,0,0,0.8) with backdrop-filter: saturate(180%) blur(20px). Links at 12px SF Pro Text weight 400, white text. Apple logo left, links centered, search and bag icons right."
+- "Create an alternating section layout: first section black bg with white text and centered product image, second section #f5f5f7 bg with #1d1d1f text. Each section near full-viewport height with 56px headline and two pill CTAs below."
+- "Design a 'Learn more' link: text #0066cc on light bg or #2997ff on dark bg, 14px SF Pro Text, underline on hover. After the text, include a right-arrow chevron character (>). Wrap in a container with 980px border-radius for pill shape when used as a standalone CTA."
+
+### Iteration Guide
+1. 每一个交互元素都使用 Apple Blue (`#0071e3`) —— 没有其他强调色
+2. 区块背景交替：黑色用于沉浸式时刻，`#f5f5f7` 用于信息展示时刻
+3. 排版光学尺寸：SF Pro Display 用于 20px 及以上，SF Pro Text 用于 20px 以下 —— 绝不混用
+4. 所有尺寸均采用负字间距：56px 时为 -0.28px，17px 时为 -0.374px，14px 时为 -0.224px，12px 时为 -0.12px
+5. 导航栏的玻璃质感效果（半透明深色 + 模糊）是不可妥协的 —— 它定义了 Apple 的网络体验
+6. 产品总是出现在纯色背景上 —— 绝不使用渐变、纹理或 Hero 模块中的生活方式背景
+7. 阴影非常罕见且总是柔和的：`3px 5px 30px 0.22 opacity` 或者完全没有阴影
+8. 胶囊形 CTA 使用 980px 圆角 —— 这创造了 Apple 标志性的、看起来像胶囊的圆角矩形形状

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

@@ -0,0 +1,193 @@
+# 设计系统：BMW
+
+
+> **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` 技能（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+BMW 的网站是汽车工程的视觉化呈现——这是一个传达精准、性能和德国工业自信的设计系统。页面在深色 hero 区（以全出血的汽车摄影为特色）和干净的白色内容区之间交替，营造出一种电影般的节奏，让人联想到在黑暗中照亮车辆的豪华汽车展厅。BMW CI2020 设计语言（他们的企业形象更新）定义了每一个元素。
+
+排版基于 BMWTypeNextLatin——一种专有字体，有两个变体：BMWTypeNextLatin Light（字重 300）用于巨大的大写展示标题，BMWTypeNextLatin Regular 用于正文和 UI 文本。字重为 300 的 60px 大写标题是其标志性的排版姿态——轻盈的字体轻声诉说权威，而不是大声喧哗。备选字体栈包含 Helvetica 和日文字体（Hiragino、Meiryo），反映了 BMW 的全球影响力。
+
+让 BMW 独具特色的是其基于 CSS 变量的主题系统。上下文感知变量（`--site-context-highlight-color: #1c69d4`、`--site-context-focus-color: #0653b6`、`--site-context-metainfo-color: #757575`）表明，这是一个为多品牌、多环境部署而构建的设计系统，可以在全局范围内替换颜色。蓝色高光颜色（`#1c69d4`）是 BMW 的标志性蓝色——仅少量用于交互元素和焦点状态，从不用于装饰。检测到零 border-radius——BMW 的设计是棱角分明的、锐利的、毫不妥协的几何风格。
+
+**关键特征：**
+- BMWTypeNextLatin Light（字重 300）大写用于展示——轻声诉说权威
+- BMW Blue（`#1c69d4`）作为单一强调色——仅用于交互元素
+- 检测到零 border-radius——棱角分明、锐利的工业几何风格
+- 深色 hero 摄影图片 + 白色内容区——展厅的照明节奏
+- 基于 CSS 变量的主题：使用 `--site-context-*` token 实现品牌灵活性
+- 字重 900 用于导航强调——与 300 的展示字体形成极端对比
+- 全局采用紧凑的 line-height（1.15–1.30）——压缩的、高效的、德国工程
+- 全出血的汽车摄影作为主要的视觉内容
+
+## 2. 调色板与角色
+
+### 品牌主色
+- **Pure White** (`#ffffff`)：`--site-context-theme-color`，主表面，卡片背景
+- **BMW Blue** (`#1c69d4`)：`--site-context-highlight-color`，主要交互强调色
+- **BMW Focus Blue** (`#0653b6`)：`--site-context-focus-color`，键盘焦点和激活状态
+
+### 中性色阶
+- **Near Black** (`#262626`)：浅色表面上的主要文本，深色链接文本
+- **Meta Gray** (`#757575`)：`--site-context-metainfo-color`，次要文本，元数据
+- **Silver** (`#bbbbbb`)：第三级文本，柔和链接，页脚元素
+
+### 交互状态
+- 所有链接悬停时变为白色（`#ffffff`）——暗示主要是深色表面的导航
+- 文本链接在悬停时使用 underline: none——干净的交互
+
+### 阴影
+- 极简的阴影系统——通过摄影和深/浅区域对比来展现层次感
+
+## 3. 排版规则
+
+### 字体系列
+- **Display Light**：`BMWTypeNextLatin Light`，备选：`Helvetica, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo`
+- **Body / UI**：`BMWTypeNextLatin`，相同的备选字体栈
+
+### 层级
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 备注 |
+| ------ | ------ | ------ | -------- | ------------- | ------- |
+| Display Hero | BMWTypeNextLatin Light | 60px (3.75rem) | 300 | 1.30 (紧凑) | `text-transform: uppercase` |
+| Section Heading | BMWTypeNextLatin | 32px (2.00rem) | 400 | 1.30 (紧凑) | 主要区块标题 |
+| Nav Emphasis | BMWTypeNextLatin | 18px (1.13rem) | 900 | 1.30 (紧凑) | 导航加粗项 |
+| Body | BMWTypeNextLatin | 16px (1.00rem) | 400 | 1.15 (紧凑) | 标准正文 |
+| Button Bold | BMWTypeNextLatin | 16px (1.00rem) | 700 | 1.20–2.88 | CTA 按钮 |
+| Button | BMWTypeNextLatin | 16px (1.00rem) | 400 | 1.15 (紧凑) | 标准按钮 |
+
+### 原则
+- **轻盈的展示字体，厚重的导航**：字重 300 的 hero 标题营造出优雅的低语；字重 900 的导航营造出鲜明的权威感。这种极端的字重对比（300 vs 900）是其标志性的排版张力。
+- **全面大写的展示字体**：60px 的 hero 总是大写的——创造出一种纪念碑式的、建筑般的质感。
+- **一切都很紧凑**：整个系统的 line-height 从 1.15 到 1.30。没有任何喘息的空间——每一行都是压缩的、高效的、德国工程的体现。
+- **单一字体系列**：BMWTypeNextLatin 处理从 60px 展示到 16px 正文的所有内容——通过同一种字体的不同字重实现统一性。
+
+## 4. 组件样式
+
+### 按钮
+- 文本：16px BMWTypeNextLatin，主要按钮字重 700，次要按钮字重 400
+- 行高：1.15–2.88（巨大的差异表明尺寸是由 padding 驱动的）
+- 边框：深色表面上使用白色底部边框（`1px solid #ffffff`）
+- 无 border-radius——锐利的矩形按钮
+
+### 卡片与容器
+- 无 border-radius——所有容器都是锐角的矩形
+- 浅色区块上使用白色背景
+- hero/功能区块上使用深色背景
+- 大多数元素没有可见的边框
+
+### 导航
+- BMWTypeNextLatin 18px 字重 900 用于主导航链接
+- 深色页眉上的白色文本
+- BMW logo 54x54px
+- 悬停：保持白色，text-decoration 为 none
+- 页眉中的 "Home" 文本链接
+
+### 图像处理
+- 全出血的汽车摄影
+- 电影般的深色照明
+- 边缘到边缘的 hero 图像
+- 汽车摄影作为主要的视觉内容
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 比例：1px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 30px, 32px, 40px, 45px, 56px, 60px
+
+### 网格与容器
+- 全宽的 hero 摄影图片
+- 居中的内容区
+- 页脚：多列链接网格
+
+### 留白哲学
+- **展厅节奏**：带有充足 padding 的深色 hero 区营造出漫步展厅的感觉，每一辆车都在自己的空间里被聚光灯照亮。
+- **压缩的内容**：正文区域使用紧凑的 line-height 和狭窄的间距——信息密集，没有浪费。
+
+### Border Radius 比例
+- **未检测到。** BMW 专门使用锐利的边角——每一个元素都是一个精准的矩形。这是所分析过的最具棱角的设计系统。
+
+## 6. 深度与高度
+
+| 级别 | 处理方式 | 用途 |
+| ------- | ----------- | ----- |
+| 摄影（级别 0） | 全出血深色图像 | hero 背景 |
+| 扁平（级别 1） | 白色表面，无阴影 | 内容区块 |
+| 焦点（无障碍） | BMW Focus Blue (`#0653b6`) | 焦点状态 |
+
+**阴影哲学**：BMW 几乎不使用任何阴影。深度完全是通过深色摄影区块和白色内容区块之间的对比创造出来的——汽车照明完成了提升层次的工作。
+
+## 7. 宜与忌
+
+### 宜
+- 所有展示标题使用 BMWTypeNextLatin Light (300) 大写
+- 保持所有边角锐利（0px radius）——棱角分明的几何形状是不容妥协的
+- 仅将 BMW Blue (`#1c69d4`) 用于交互元素——绝不用于装饰
+- 导航强调应用字重 900——极端的字重对比是刻意为之的
+- hero 区使用全出血的汽车摄影
+- 全局保持紧凑的 line-height (1.15–1.30)
+- 使用 `--site-context-*` CSS 变量进行主题设置
+
+### 忌
+- 不要使用圆角——零 radius 就是 BMW 的身份标识
+- 不要将 BMW Blue 用于背景或大面积表面——它仅仅是强调色
+- 不要使用中等字重 (500–600)——该系统使用 300、400、700、900 这些极端字重
+- 不要添加装饰性元素——摄影和排版承载了一切
+- 不要使用宽松的 line-height——BMW 的文本始终是压缩的
+- 不要淡化深色的 hero 区——与白色的对比本身就是设计
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 关键变化 |
+| ------ | ------- | ------------- |
+| Mobile Small | <375px | 支持的最小尺寸 |
+| Mobile | 375–480px | 单列 |
+| Mobile Large | 480–640px | 微调 |
+| Tablet Small | 640–768px | 开始双列 |
+| Tablet | 768–920px | 标准平板 |
+| Desktop Small | 920–1024px | 开始桌面布局 |
+| Desktop | 1024–1280px | 标准桌面 |
+| Large Desktop | 1280–1440px | 扩展 |
+| Ultra-wide | 1440–1600px | 最大布局 |
+
+### 折叠策略
+- Hero：60px → 缩小，保持大写
+- 导航：水平 → 汉堡菜单
+- 摄影图片：在所有尺寸下保持全出血
+- 内容区块：垂直堆叠
+- 页脚：多列 → 堆叠
+
+## 9. Agent 提示词指南
+
+### 快速颜色参考
+- 背景：Pure White (`#ffffff`)
+- 文本：Near Black (`#262626`)
+- 次要文本：Meta Gray (`#757575`)
+- 强调色：BMW Blue (`#1c69d4`)
+- 焦点：BMW Focus Blue (`#0653b6`)
+- 柔和色：Silver (`#bbbbbb`)
+
+### 示例 Component Prompts
+- "Create a hero: full-width dark automotive photography background. Heading at 60px BMWTypeNextLatin Light weight 300, uppercase, line-height 1.30, white text. No border-radius anywhere."
+- "Design navigation: dark background. BMWTypeNextLatin 18px weight 900 for links, white text. BMW logo 54x54. Sharp rectangular layout."
+- "Build a button: 16px BMWTypeNextLatin weight 700, line-height 1.20. Sharp corners (0px radius). White bottom border on dark surface."
+- "Create content section: white background. Heading at 32px weight 400, line-height 1.30, #262626. Body at 16px weight 400, line-height 1.15."
+
+### 迭代指南
+1. 零 border-radius——每一个边角都是锐利的，没有例外
+2. 极端字重：300（展示）、400（正文）、700（按钮）、900（导航）
+3. BMW Blue 仅用于交互——绝不作为背景或装饰
+4. 摄影承载情感——UI 是纯粹的精准
+5. 到处都是紧凑的 line-height——1.15 到 1.30 是其范围