@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,275 @@
+# 设计系统：Sentry
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原始网站使用专有字体。对于自包含的 HTML 输出，请使用以下 CDN 替代字体：
+> - **主要字体:** `Rubik` | **等宽字体:** `JetBrains Mono`
+> - **字体堆栈 (CSS):** `font-family: 'Rubik', 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=Rubik:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` 技能（cloudflared 隧道）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Sentry 的网站是一个以深色模式为主的开发者工具界面，使用代码编辑器和终端窗口的语言。整体美学扎根于深紫黑色背景（`#1f1633`, `#150f23`），让人联想到 Sentry 最初为其打造的深夜调试场景。在这块墨色的画布上，精心挑选的紫色、粉色以及独特的柠檬绿强调色（`#c2ef4e`）构建出一个兼具科技感与活力的视觉系统。
+
+排版搭配是有意为之的：“Dammit Sans”以主视觉尺寸（88px，字重 700）出现，作为一种展示字体，其个性和态度与 Sentry 不拘一格的品牌调性（“代码崩溃。更快修复。”）相契合，而 Rubik 则作为所有功能性文本的主力 UI 字体——包括标题、正文、按钮、说明和导航。Monaco 为代码片段和技术内容提供了等宽字体层，完善了开发者工具的三位一体。
+
+Sentry 的独特之处在于它拥抱了“深色 IDE”美学，同时又不会显得冰冷或死板。温暖的紫色调取代了开发者工具中典型的冷灰色，而大胆的插图元素（3D 角色、色彩丰富的产品截图）则点缀在这块深色画布上。按钮系统使用标志性的柔和紫色（`#79628c`）加上内阴影，创造出一种触觉上的、几乎有实体感的质感——按钮看起来就像是按压进了表面一样。
+
+**关键特征：**
+- 深紫黑色背景（`#1f1633`, `#150f23`）—— 绝不使用纯黑色
+- 温暖的紫色强调色谱：从深色（`#362d59`）到中色（`#79628c`, `#6a5fc1`）再到鲜艳色（`#422082`）
+- 柠檬绿强调色（`#c2ef4e`）用于高可见性的 CTA 和高亮
+- 粉色/珊瑚色强调色（`#ffb287`, `#fa7faa`）用于聚焦状态和次要高亮
+- “Dammit Sans”展示字体在主视觉尺寸下展现品牌个性
+- Rubik 作为主要 UI 字体，使用大写字母并带有字间距标签
+- Monaco 等宽字体用于代码元素
+- 按钮上的内阴影营造出触觉深度
+- 毛玻璃效果使用 `blur(18px) saturate(180%)`
+
+## 2. 调色板与角色
+
+### 主品牌色
+- **深紫色**（`#1f1633`）：主要背景，定义品牌形象的颜色
+- **更深的紫色**（`#150f23`）：更深的区域、页脚、次要背景
+- **边框紫**（`#362d59`）：边框、分割线、细微的结构线
+
+### 强调色
+- **Sentry 紫**（`#6a5fc1`）：主要交互色 —— 链接、悬停状态、聚焦环
+- **柔和紫**（`#79628c`）：按钮背景、次要交互元素
+- **深紫色**（`#422082`）：下拉选择框、激活状态、高强调表面
+- **柠檬绿**（`#c2ef4e`）：高可见度强调色、特殊链接、徽章高亮
+- **珊瑚色**（`#ffb287`）：聚焦状态背景、暖色调强调
+- **粉色**（`#fa7faa`）：聚焦轮廓、装饰性强调
+
+### 文本颜色
+- **纯白**（`#ffffff`）：深色背景上的主要文本
+- **浅灰色**（`#e5e7eb`）：次要文本、柔和内容
+- **代码黄**（`#dcdcaa`）：语法高亮、代码 token
+
+### 表面与遮罩
+- **玻璃白**（`rgba(255, 255, 255, 0.18)`）：毛玻璃按钮背景
+- **玻璃暗**（`rgba(54, 22, 107, 0.14)`）：玻璃元素上的悬停遮罩
+- **输入框白**（`#ffffff`）：表单输入背景（浅色上下文）
+- **输入框边框**（`#cfcfdb`）：表单字段边框
+
+### 阴影
+- **环境光**（`rgba(22, 15, 36, 0.9) 0px 4px 4px 9px`）：深紫色环境阴影
+- **按钮悬停**（`rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem`）：抬升的悬停状态
+- **卡片阴影**（`rgba(0, 0, 0, 0.1) 0px 10px 15px -3px`）：标准卡片层级
+- **内陷按钮**（`rgba(0, 0, 0, 0.1) 0px 1px 3px 0px inset`）：触觉按压效果
+
+## 3. 排版规则
+
+### 字体系列
+- **展示字体**：`Dammit Sans` —— 用于主视觉标题的品牌个性字体
+- **主要 UI 字体**：`Rubik`，备用字体：`-apple-system, system-ui, Segoe UI, Helvetica, Arial`
+- **等宽字体**：`Monaco`，备用字体：`Menlo, Ubuntu Mono`
+
+### 层级
+
+| 角色 | 字体 | 尺寸 | 字重 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| 主视觉标题 | Dammit Sans | 88px (5.50rem) | 700 | 1.20 (紧凑) | normal | 最大视觉冲击力，体现品牌调性 |
+| 次级展示标题 | Dammit Sans | 60px (3.75rem) | 500 | 1.10 (紧凑) | normal | 次要的主视觉文本 |
+| 分区标题 | Rubik | 30px (1.88rem) | 400 | 1.20 (紧凑) | normal | 主要区块标题 |
+| 副标题 | Rubik | 27px (1.69rem) | 500 | 1.25 (紧凑) | normal | 功能区块标题 |
+| 卡片标题 | Rubik | 24px (1.50rem) | 500 | 1.25 (紧凑) | normal | 卡片和区块标题 |
+| 特性标题 | Rubik | 20px (1.25rem) | 600 | 1.25 (紧凑) | normal | 强调的特性名称 |
+| 正文 | Rubik | 16px (1.00rem) | 400 | 1.50 | normal | 标准正文文本 |
+| 强调正文 | Rubik | 16px (1.00rem) | 500–600 | 1.50 | normal | 加粗正文、导航项 |
+| 导航标签 | Rubik | 15px (0.94rem) | 500 | 1.40 | normal | 导航链接 |
+| 大写标签 | Rubik | 15px (0.94rem) | 500 | 1.25 (紧凑) | normal | `text-transform: uppercase` |
+| 按钮文本 | Rubik | 14px (0.88rem) | 500–700 | 1.14–1.29 (紧凑) | 0.2px | `text-transform: uppercase` |
+| 说明 | Rubik | 14px (0.88rem) | 500–700 | 1.00–1.43 | 0.2px | 通常为大写 |
+| 小号说明 | Rubik | 12px (0.75rem) | 600 | 2.00 (宽松) | normal | 细微的注释 |
+| 微标签 | Rubik | 10px (0.63rem) | 600 | 1.80 (宽松) | 0.25px | `text-transform: uppercase` |
+| 代码 | Monaco | 16px (1.00rem) | 400–700 | 1.50 | normal | 代码块、技术文本 |
+
+### 原则
+- **双重个性**：Dammit Sans 在展示尺寸下带来了不羁的品牌特征；而 Rubik 为所有功能性内容提供了干净的专业感。
+- **系统化大写**：按钮、说明、标签和微文本都使用了 `text-transform: uppercase` 以及微小的字间距（0.2px–0.25px），在整个系统中创造了系统的“技术标签”模式。
+- **字重分级**：Rubik 使用 400（正文）、500（强调/导航）、600（标题/重点）、700（按钮/CTA）——一个干净的四层字重系统。
+- **紧凑标题，宽松正文**：所有标题使用 1.10–1.25 的行高；正文使用 1.50；小号说明扩展到 2.00 以确保微小尺寸下的可读性。
+
+## 4. 组件样式
+
+### 按钮
+
+**主要柔和紫色**
+- 背景：`#79628c` (rgb(121, 98, 140))
+- 文本：`#ffffff`，大写，14px，字重 500–700，字间距 0.2px
+- 边框：`1px solid #584674`
+- 圆角：13px
+- 阴影：`rgba(0, 0, 0, 0.1) 0px 1px 3px 0px inset`（触觉内陷）
+- 悬停：抬升的阴影 `rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem`
+
+**玻璃白**
+- 背景：`rgba(255, 255, 255, 0.18)`（毛玻璃）
+- 文本：`#ffffff`
+- 内边距：8px
+- 圆角：12px（左对齐变体：`12px 0px 0px 12px`）
+- 阴影：`rgba(0, 0, 0, 0.08) 0px 2px 8px`
+- 悬停背景：`rgba(54, 22, 107, 0.14)`
+- 用途：深色表面上的次要操作
+
+**纯白**
+- 背景：`#ffffff`
+- 文本：`#1f1633`
+- 内边距：12px 16px
+- 圆角：8px
+- 悬停：背景过渡为 `#6a5fc1`，文本变白
+- 聚焦：背景 `#ffb287`（珊瑚色），轮廓 `rgb(106, 95, 193) solid 0.125rem`
+- 用途：深色背景上的高可见度 CTA
+
+**深紫色（选择/下拉菜单）**
+- 背景：`#422082`
+- 文本：`#ffffff`
+- 内边距：8px 16px
+- 圆角：8px
+
+### 输入框
+
+**文本输入框**
+- 背景：`#ffffff`
+- 文本：`#1f1633`
+- 边框：`1px solid #cfcfdb`
+- 内边距：8px 12px
+- 圆角：6px
+- 聚焦：边框颜色保持为 `#cfcfdb`，阴影 `rgba(0, 0, 0, 0.15) 0px 2px 10px inset`
+
+### 链接
+- **在深色背景上的默认状态**：`#ffffff`，下划线装饰
+- **悬停**：颜色过渡为 `#6a5fc1`（Sentry 紫）
+- **紫色链接**：默认为 `#6a5fc1`，悬停显示下划线
+- **柠檬绿强调链接**：默认为 `#c2ef4e`，悬停过渡为 `#6a5fc1`
+- **深色上下文链接**：`#362d59`，悬停过渡为 `#ffffff`
+
+### 卡片与容器
+- 背景：半透明或深紫色表面
+- 圆角：8px–12px
+- 阴影：`rgba(0, 0, 0, 0.1) 0px 10px 15px -3px`
+- 背景滤镜：`blur(18px) saturate(180%)` 用于实现毛玻璃效果
+
+### 导航
+- 悬浮在主视觉内容上方的深色透明页眉
+- 导航链接使用 Rubik 15px 字重 500
+- 白色文本，悬停过渡为 Sentry 紫（`#6a5fc1`）
+- 分类使用大写标签，带有 0.2px 字间距
+- 移动端：汉堡菜单，全宽展开
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 比例：1px, 2px, 4px, 5px, 6px, 8px, 12px, 16px, 24px, 32px, 40px, 44px, 45px, 47px
+
+### 网格与容器
+- 最大内容宽度：1152px（XL 断点）
+- 响应式内边距：2rem（移动端） → 4rem（平板及以上）
+- 内容在容器内居中
+- 全宽的深色区块，内部包含受限的内容
+
+### 断点
+| 名称 | 宽度 | 主要变化 |
+|------|-------|-------------|
+| 移动端 | < 576px | 单列，堆叠布局 |
+| 小型平板 | 576–640px | 微小的宽度调整 |
+| 平板 | 640–768px | 开始出现双列 |
+| 小型桌面 | 768–992px | 显示完整导航 |
+| 桌面 | 992–1152px | 标准布局 |
+| 大型桌面 | 1152–1440px | 内容达到最大宽度 |
+
+### 留白理念
+- **深色呼吸空间**：各区块之间充足的垂直间距（64px–80px+）让深色背景作为视觉上的休息区。
+- **内容孤岛**：特性区块是漂浮在深紫色海洋中的独立区块，每个区块都有自己的内部间距节奏。
+- **非对称内边距**：按钮使用非对称的内边距模式（12px 16px, 8px 12px），感觉更自然而不是死板。
+
+### 圆角比例
+- 最小 (6px)：表单输入框、小型交互元素
+- 标准 (8px)：按钮、卡片、容器
+- 舒适 (10px–12px)：较大的容器、毛玻璃面板
+- 圆润 (13px)：主要的柔和紫色按钮
+- 药丸形 (18px)：图片容器、徽章
+
+## 6. 深度与层级
+
+| 级别 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| 下沉 (Level -1) | 内阴影 `rgba(0, 0, 0, 0.1) 0px 1px 3px inset` | 主要按钮（触觉按压感） |
+| 扁平 (Level 0) | 无阴影 | 默认表面、深色背景 |
+| 表面 (Level 1) | `rgba(0, 0, 0, 0.08) 0px 2px 8px` | 玻璃按钮、细微的卡片 |
+| 抬升 (Level 2) | `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px` | 卡片、浮动面板 |
+| 显著 (Level 3) | `rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem` | 悬停状态、模态框 |
+| 环境 (Level 4) | `rgba(22, 15, 36, 0.9) 0px 4px 4px 9px` | 主视觉周围的深紫色环境光 |
+
+**阴影理念**：Sentry 使用了内阴影（按钮感觉像是按压进了表面）和环境光（内容从深色背景中散发出来）的独特组合。深紫色环境阴影（`rgba(22, 15, 36, 0.9)`）是其标志性特征——它创造出一种生物发光的质感，内容似乎在散发自己的紫调光芒。
+
+## 7. 注意事项（宜与忌）
+
+### 宜
+- 使用深紫色背景（`#1f1633`, `#150f23`）—— 绝不使用纯黑色（`#000000`）
+- 为主按钮应用内阴影以获得触觉按压效果
+- 仅将 Dammit Sans 用于主视觉/展示标题 —— 其他情况一律使用 Rubik
+- 在按钮和标签上应用 `text-transform: uppercase` 和 `letter-spacing: 0.2px`
+- 谨慎使用柠檬绿强调色（`#c2ef4e`）以获得最大视觉冲击力
+- 对分层的表面采用毛玻璃效果（`blur(18px) saturate(180%)`）
+- 保持温暖的紫调阴影色调 —— 阴影应带有紫色调，而不是中性灰色
+- 使用 Rubik 的四层字重系统：400（正文）、500（导航/强调）、600（标题）、700（CTA）
+
+### 忌
+- 不要使用纯黑色（`#000000`）作为背景 —— 始终使用带有暖色调的紫黑色
+- 不要将 Dammit Sans 应用于正文或 UI 元素 —— 它仅用于展示
+- 不要使用标准的灰色（`#666`, `#999`）作为边框 —— 使用带有紫色调的灰色（`#362d59`, `#584674`）
+- 不要取消按钮的大写处理 —— 这是一个全系统的模式
+- 不要使用尖角（0px 圆角）—— 所有交互元素至少为 6px
+- 不要在同一个组件中混合使用柠檬绿强调色与珊瑚色/粉色强调色
+- 不要在主按钮上使用扁平（非内陷）阴影 —— 触觉质感是其标志性特征
+- 不要忘记大写文本的字间距 —— 至少 0.2px
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 主要变化 |
+|------|-------|-------------|
+| 移动端 | <576px | 单列，汉堡导航，堆叠的 CTA |
+| 平板 | 576–768px | 开始出现双列特性网格 |
+| 小型桌面 | 768–992px | 完整导航，并排布局 |
+| 桌面 | 992–1152px | 最大宽度容器，完整布局 |
+| 大型设备 | >1152px | 保持内容最大宽度，充足的边距 |
+
+### 折叠策略
+- 主视觉文本：88px Dammit Sans → 60px → 移动端缩放
+- 导航：水平排列 → 带有滑出菜单的汉堡菜单
+- 特性区块：并排 → 堆叠的卡片
+- 按钮：内联 → 移动端全宽堆叠
+- 容器内边距：4rem → 2rem
+
+## 9. Agent 提示词指南
+
+### 颜色快速参考
+- 背景：`#1f1633`（主要），`#150f23`（更深）
+- 文本：`#ffffff`（主要），`#e5e7eb`（次要）
+- 交互：`#6a5fc1`（链接/悬停），`#79628c`（按钮）
+- 强调：`#c2ef4e`（柠檬色高亮），`#ffb287`（珊瑚色聚焦）
+- 边框：`#362d59`（深色），`#cfcfdb`（浅色上下文）
+
+### 示例组件提示词
+- “在深紫色背景（#1f1633）上创建一个主视觉区块。标题使用 88px Dammit Sans，字重 700，行高 1.20，白色文本。副文本使用 16px Rubik，字重 400，行高 1.50。纯白色 CTA 按钮（8px 圆角，12px 16px 内边距），悬停时过渡为 #6a5fc1。”
+- “设计一个导航栏：在深色背景上透明。使用 Rubik 15px 字重 500，白色文本。大写的分类标签带有 0.2px 字间距。悬停颜色为 #6a5fc1。”
+- “构建一个主按钮：背景 #79628c，1px 实线边框 #584674，内阴影 rgba(0,0,0,0.1) 0px 1px 3px，14px Rubik 字重 700 的白色大写文本，字间距 0.2px，13px 圆角。悬停：阴影 rgba(0,0,0,0.18) 0px 0.5rem 1.5rem。”
+- “创建一个玻璃卡片面板：背景 rgba(255,255,255,0.18)，backdrop-filter blur(18px) saturate(180%)，12px 圆角。内部为白色文本内容。”
+- “设计一个特性区块：#150f23 背景，24px Rubik 字重 500 标题，16px Rubik 字重 400 正文。标题上方为 14px 大写柠檬绿（#c2ef4e）标签。”
+
+### 迭代指南
+1. 始终从深紫色背景开始 —— 调色板是专门为深色模式构建的
+2. 在按钮上使用内阴影，在主视觉区块使用紫色环境光
+3. 大写 + 字间距是标签、按钮和说明的系统性模式
+4. 柠檬绿（#c2ef4e）是“流行”色 —— 每个区块最多使用一次
+5. 覆盖面板使用毛玻璃效果，主要表面使用纯紫色
+6. Rubik 处理 90% 的排版 —— Dammit Sans 仅用于主视觉

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

@@ -0,0 +1,207 @@
+# Design System: SpaceX
+
+
+> **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. 视觉主题与氛围
+
+SpaceX 的网站是一个全屏的电影级体验，将航空航天工程视为一部电影——每个部分都是一个场景，每张照片都是一帧画面，而界面则完全隐没在图像背后。设计采用纯黑色（`#000000`），火箭、太空和行星的照片占据了 100% 的视口。文本覆盖层直接位于这些照片上，没有背景面板、卡片或容器——只有图像上的文字，醒目而纯粹。
+
+排版系统使用 D-DIN，这是一种具有 DIN 背景（德国工业标准）的工业几何字体。其决定性特征在于，几乎所有文字都是大写的，并带有正字间距（0.96px–1.17px），这创造了一种军事/航空航天标签系统，让人感觉每个字词都是用模板喷涂在航天器船体上的。主视觉区使用 48px 的 D-DIN-Bold，采用大写和 0.96px 的字间距，使得标题感觉就像任务简报的名称。即使是 16px 的正文，在较小的尺度下也保持了大写/字距处理。
+
+SpaceX 的独特之处在于其极致的极简主义：没有阴影，没有边框（除了一个 ghost button 边框为 `rgba(240,240,250,0.35)`），没有颜色（只有黑色和接近白色的光谱色 `#f0f0fa`），没有卡片，没有网格。唯一的视觉元素是摄影 + 文本。带有 `rgba(240,240,250,0.1)` 背景和 32px 圆角的 ghost button 是唯一的交互元素——几乎不可见，像平视显示器一样漂浮在图像上。传统意义上讲，这并不是一个设计系统——这是一个带有排版系统和单一按钮的摄影展。
+
+**关键特征：**
+- 纯黑色画布搭配全视口电影级摄影——界面完全隐形
+- D-DIN / D-DIN-Bold——具有工业标准 DIN 血统的字体
+- 全面大写 + 正字间距（0.96px–1.17px）——航空航天喷漆美学
+- 近乎白色的光谱文本（`#f0f0fa`）——不是纯白，带有一点轻微的蓝紫色调
+- 零阴影、零卡片、零容器——仅在图像上覆盖文本
+- 单一 ghost button：`rgba(240,240,250,0.1)` 背景搭配光谱边框
+- 全视口区块——每个区块都是一个电影级的“场景”
+- 没有装饰性元素——每个像素都在为摄影服务
+
+## 2. 色彩调色板与角色
+
+### Primary
+- **Space Black** (`#000000`)：页面背景，代表太空的虚无——以 50% 的不透明度用于覆盖层渐变
+- **Spectral White** (`#f0f0fa`)：文本颜色——不是纯白，带有一点模拟星光的轻微蓝紫色调
+
+### Interactive
+- **Ghost Surface** (`rgba(240, 240, 250, 0.1)`)：按钮背景——几乎不可见，10% 不透明度
+- **Ghost Border** (`rgba(240, 240, 250, 0.35)`)：按钮边框——光谱色，35% 不透明度
+- **Hover White** (`var(--white-100)`)：链接悬停状态——全亮度的光谱白
+
+### Gradient
+- **Dark Overlay** (`rgba(0, 0, 0, 0.5)`)：照片上的渐变覆盖层，确保文字清晰可读
+
+## 3. 排版规则
+
+### 字体系列
+- **Display**: `D-DIN-Bold` — 粗体工业几何风格
+- **Body / UI**: `D-DIN`，fallbacks: `Arial, Verdana`
+
+### 层级结构
+
+| 角色 | 字体 | 大小 | 粗细 | 行高 | 字间距 | 备注 |
+| ------ | ------ | ------ | -------- | ------------- | ---------------- | ------- |
+| Display Hero | D-DIN-Bold | 48px (3.00rem) | 700 | 1.00 (紧凑) | 0.96px | `text-transform: uppercase` |
+| Body | D-DIN | 16px (1.00rem) | 400 | 1.50–1.70 | normal | 标准阅读文本 |
+| Nav Link Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (紧凑) | 1.17px | `text-transform: uppercase` |
+| Nav Link | D-DIN | 12px (0.75rem) | 400 | 2.00 (宽松) | normal | `text-transform: uppercase` |
+| Caption Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (紧凑) | 1.17px | `text-transform: uppercase` |
+| Caption | D-DIN | 12px (0.75rem) | 400 | 1.00 (紧凑) | normal | `text-transform: uppercase` |
+| Micro | D-DIN | 10px (0.63rem) | 400 | 0.94 (紧凑) | 1px | `text-transform: uppercase` |
+
+### 设计原则
+- **全面大写**：几乎每个文本元素都使用 `text-transform: uppercase`。这创造了一种系统化的军事/航空航天基调，所有的交流都感觉像是官方文件。
+- **正字间距作为核心标识**：主视觉区使用 0.96px，导航使用 1.17px——宽字距营造出一种喷漆风格的工业感，这与 DIN 作为德国工程标准的背景相契合。
+- **两种字重，严格的层级**：标题和导航强调使用 D-DIN-Bold (700)，正文使用 D-DIN (400)。系统中不存在 medium 或 semibold 字重。
+- **紧凑的行高**：大部分文本的行高在 0.94–1.00 之间——压缩、高效、关键任务式的沟通风格。
+
+## 4. 组件样式
+
+### 按钮
+
+**Ghost Button**
+- Background: `rgba(240, 240, 250, 0.1)`（几乎不可见）
+- Text: Spectral White (`#f0f0fa`)
+- Padding: 18px
+- Radius: 32px
+- Border: `1px solid rgba(240, 250, 250, 0.35)`
+- Hover: 背景变亮，文字变为 `var(--white-100)`
+- Use: 唯一的按钮变体——用于摄影背景上的 "LEARN MORE" CTA
+
+### 卡片与容器
+- **不存在。** SpaceX 不使用卡片、面板或容器。所有内容都是直接位于全视口照片上的文字。容器的缺失本身就是一种设计。
+
+### 输入框与表单
+- 首页上没有出现。该网站纯粹是为了展示。
+
+### 导航
+- 悬浮在摄影上的透明导航
+- D-DIN 13px weight 700，大写，1.17px 字间距
+- 深色图像上的光谱白文字
+- Logo: SpaceX 字标尺寸为 147x19px
+- Mobile: 折叠为汉堡菜单
+
+### 图像处理
+- 全视口 (100vh) 摄影区块
+- 专业航空航天摄影：火箭、火星、太空
+- 深色渐变覆盖层 (`rgba(0,0,0,0.5)`) 以保证文字可读性
+- 每个区块 = 一张全屏照片配文字覆盖
+- 没有圆角，没有边框——边缘到边缘的满版图像
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位: 8px
+- 比例: 3px, 5px, 12px, 15px, 18px, 20px, 24px, 30px
+- 极简比例——间距不是组织原则；摄影才是
+
+### 网格与容器
+- 没有传统网格——每个区块都是一个全视口的电影级画框
+- 文字采用绝对定位或通过充足的 padding 悬浮在图像上
+- 在摄影背景上采用左对齐的文本块
+- 没有 max-width 容器——内容直接延伸到视口边缘
+
+### 留白理念
+- **摄影本身就是留白**：设计中的空白区域绝不是空的——它被浩瀚的黑暗太空、行星的弧线或火箭发动机的火焰填满。传统的留白概念在这里不适用。
+- **通过视口控制垂直节奏**：每个区块的高度刚好是一个视口的大小，创造了一种有节奏的滚动体验，每一次“翻页”都会展现一个新场景。
+
+### 圆角比例
+- Sharp (4px): 小型分割线、实用工具元素
+- Button (32px): Ghost buttons——系统中唯一的圆角元素
+
+## 6. 深度与层级
+
+| 层级 | 处理方式 | 用途 |
+| ------- | ----------- | ----- |
+| 摄影 (Level 0) | 全视口图像 | 背景层——永远存在 |
+| 覆盖层 (Level 1) | `rgba(0, 0, 0, 0.5)` 渐变 | 位于摄影上方，用于保证文字清晰度 |
+| 文本 (Level 2) | 光谱白文字，无阴影 | 内容层——文字直接悬浮在图像上 |
+| 幽灵层 (Level 3) | `rgba(240, 240, 250, 0.1)` 表面 | 几乎不可见的交互层 |
+
+**阴影理念**：SpaceX 使用零阴影。在一个完全基于摄影构建的设计中，阴影毫无意义——每个表面本身就是一张带有自然光照的照片。深度来自于摄影内容本身：地球向后弯曲的弧度、火箭逐渐变小的轨迹、火星周围的大气雾霾。
+
+## 7. 宜与忌
+
+### 宜
+- 使用全视口摄影作为核心设计元素——每个区块都是一个场景
+- 对所有文字应用大写 + 正字间距——营造航空航天喷漆风格
+- 专门使用 D-DIN——系统中不存在其他字体
+- 调色板仅限于黑色 + 光谱白 (`#f0f0fa`)
+- 仅使用 ghost buttons (`rgba(240,240,250,0.1)`) 作为唯一的交互元素
+- 应用深色渐变覆盖层，以保证照片上的文字可读性
+- 让摄影承载情感分量——排版系统是功能性的，而非表现性的
+
+### 忌
+- 不要添加卡片、面板或容器——文字直接位于照片上
+- 不要使用阴影——它们在摄影语境中毫无意义
+- 不要引入颜色——调色板严格限制为无彩色加上极微量的光谱色调
+- 不要使用句首大写以外的 sentence case——所有内容全部大写
+- 不要使用负字间距——所有字距均为正数 (0.96px–1.17px)
+- 不要将照片缩小为缩略图——每张图片都是全视口的
+- 不要添加装饰性元素（图标、徽章、分割线）——设计构成只有摄影 + 文字 + 一个按钮
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 主要变化 |
+| ------ | ------- | ------------- |
+| Mobile | <600px | 堆叠排列，减小 padding，缩小字体 |
+| Tablet Small | 600–960px | 调整布局 |
+| Tablet | 960–1280px | 标准缩放 |
+| Desktop | 1280–1350px | 完整布局 |
+| Large Desktop | 1350–1500px | 扩展布局 |
+| Ultra-wide | >1500px | 最大视口 |
+
+### 触摸目标
+- Ghost buttons: 18px padding 提供了充足的触摸区域
+- 导航链接: 大写字母搭配宽裕的字间距有助于提高可读性
+
+### 折叠策略
+- 摄影: 在所有尺寸下保持全视口，内容重新定位
+- 主视觉文字: 48px → 按比例缩小
+- 导航: 水平排列 → 汉堡菜单
+- 文本块: 重新定位，但保持在照片上覆盖的模式
+- 在移动端保持全视口区块
+
+### 图像行为
+- 在所有视口尺寸下保持边缘到边缘的摄影
+- Background-size: cover 并居中聚焦
+- 深色覆盖渐变适应内容位置
+- 没有艺术指导方向的变化——使用相同的照片，仅作响应式定位
+
+## 9. Agent 提示指南
+
+### 快速色彩参考
+- Background: Space Black (`#000000`)
+- Text: Spectral White (`#f0f0fa`)
+- Button background: Ghost (`rgba(240, 240, 250, 0.1)`)
+- Button border: Ghost Border (`rgba(240, 240, 250, 0.35)`)
+- Overlay: `rgba(0, 0, 0, 0.5)`
+
+### 示例 Component Prompts
+- "Create a full-viewport hero: background-image covering 100vh, dark gradient overlay rgba(0,0,0,0.5). Headline at 48px D-DIN-Bold, uppercase, letter-spacing 0.96px, spectral white (#f0f0fa) text. Ghost CTA button: rgba(240,240,250,0.1) bg, 1px solid rgba(240,240,250,0.35) border, 32px radius, 18px padding."
+- "Design a navigation: transparent over photography. D-DIN 13px weight 700, uppercase, letter-spacing 1.17px, spectral white text. SpaceX wordmark left-aligned."
+- "Build a content section: full-viewport height, background photography with dark overlay. Left-aligned text block with 48px D-DIN-Bold uppercase heading, 16px D-DIN body text, and ghost button below."
+- "Create a micro label: D-DIN 10px, uppercase, letter-spacing 1px, spectral white, line-height 0.94."
+
+### 迭代指南
+1. 从摄影开始——图像本身就是设计
+2. 所有文字均大写并带有正字间距——没有例外
+3. 只用两种颜色：黑色和光谱白 (#f0f0fa)
+4. Ghost buttons 是唯一的交互元素——透明、带光谱色边框
+5. 零阴影、零卡片、零装饰性元素
+6. 每个区块都是全视口 (100vh) 的——电影般的节奏