@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,257 @@
+# 设计系统：Runway
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原始站点使用专有字体。对于独立的 HTML 输出，请使用以下 CDN 替代字体：
+> - **主字体:** `Inter` | **等宽字体:** `system monospace stack`
+> - **字体堆栈 (CSS):** `font-family: 'Inter', 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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` skill（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Runway 的界面是一个被赋予生命的故事卷轴——一个深色、具有编辑风格、达到电影制作级别的设计，在这里，全出血（full-bleed）的摄影和视频本身就是主要的 UI 元素。这不是一个典型的科技产品页面；它是 AI 驱动创造力的视觉宣言。每一个部分都感觉像是一帧电影画面：充满戏剧性的光影、壮阔的风景，以及用主导视口的高质量图像捕捉到的私密人物瞬间。
+
+设计语言建立在单一字体之上——abcNormal——这是一种干净、几何感强的无衬线字体，处理从 48px 展示级标题到 11px 大写标签的所有内容。这种单一字体的承诺创造了极致的排版统一性，让视觉内容比文本更具表现力。标题使用紧凑的行高（1.0）和负字间距（-0.9px 到 -1.2px），创造出感觉像电影标题而非营销文案的紧凑文本块。
+
+让 Runway 独具特色的是它完全致力于将视觉内容作为设计。Runway 不是用图标或图表来说明功能，而是展示实际由 AI 生成和增强的图像——在电影感风景中行驶的汽车、艺术人像、建筑渲染图。界面本身则退居到近乎不可见的状态：极少的边框、零阴影、微妙的冷灰色文本，以及将最大焦点放在摄影上的深色调色板。
+
+**关键特征：**
+- 电影级全出血摄影和视频作为主要的 UI 元素
+- 单一字体系统：从展示级标题到微型标签均使用 abcNormal
+- 以深色为主的调色板，带有冷色调中性色（#767d88、#7d848e）
+- 零阴影、最少的边框——界面被刻意设计得不可见
+- 紧凑的展示级排版（行高 1.0）配合负字间距（-0.9px 到 -1.2px）
+- 带有正字间距的大写标签，用于构建导航结构
+- 精度细节：小型大写文本使用 450 字重（不常见的中间值）
+- 具有混合尺寸图片网格的杂志编辑排版
+
+## 2. 调色板与角色
+
+### 主色
+- **Runway Black** (`#000000`)：主要页面背景和最高强调级别的文本。
+- **Deep Black** (`#030303`)：用于分层暗色表面的几乎无法察觉的变体。
+- **Dark Surface** (`#1a1a1a`)：卡片背景和凸起的暗色容器。
+- **Pure White** (`#ffffff`)：暗色表面上的主要文本和浅色区域的背景。
+
+### 表面与背景
+- **Near White** (`#fefefe`)：最亮的表面——与纯白几乎没有区别。
+- **Cool Cloud** (`#e9ecf2`)：带有冷蓝灰色调的浅色区域背景。
+- **Border Dark** (`#27272a`)：唯一的暗色模式边框颜色——几乎不可见的约束。
+
+### 中性色与文本
+- **Charcoal** (`#404040`)：浅色表面的主要正文和次要文本。
+- **Near Charcoal** (`#3f3f3f`)：用于暗色区域次要文本的略浅变体。
+- **Cool Slate** (`#767d88`)：次要正文文本——一种明显的蓝灰色冷调中性色。
+- **Mid Slate** (`#7d848e`)：第三级文本、元数据描述。
+- **Muted Gray** (`#a7a7a7`)：弱化的内容、时间戳。
+- **Cool Silver** (`#c9ccd1`)：浅色边框和分割线。
+- **Light Silver** (`#d0d4d4`)：最浅的边框/分割线变体。
+- **Tailwind Gray** (`#6b7280`)：用于补充文本的标准 Tailwind 中性色。
+- **Dark Link** (`#0c0c0c`)：最暗的链接文本——接近黑色。
+- **Footer Gray** (`#999999`)：页脚链接和深度弱化的内容。
+
+### 渐变系统
+- **界面中没有渐变。** 视觉丰富度完全来自摄影内容——AI 生成和增强的图像提供了设计所需的所有色彩和渐变。界面本身被刻意设计成无色彩的。
+
+## 3. 排版规则
+
+### 字体系列
+- **通用**：`abcNormal`，回退字体：`abcNormal Fallback`
+
+*注意：abcNormal 是一种定制的几何无衬线字体。对于外部实现，Inter 或 DM Sans 可作为接近的替代品。*
+
+### 层级结构
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+| ------ | ------ | ------ | -------- | ------------- | ---------------- | ------- |
+| Display / Hero | abcNormal | 48px (3rem) | 400 | 1.00 (紧凑) | -1.2px | 最大尺寸，电影标题般的呈现 |
+| Section Heading | abcNormal | 40px (2.5rem) | 400 | 1.00–1.10 | -1px to 0px | 功能区域标题 |
+| Sub-heading | abcNormal | 36px (2.25rem) | 400 | 1.00 (紧凑) | -0.9px | 次要区块标记 |
+| Card Title | abcNormal | 24px (1.5rem) | 400 | 1.00 (紧凑) | normal | 文章和卡片标题 |
+| Feature Title | abcNormal | 20px (1.25rem) | 400 | 1.00 (紧凑) | normal | 小标题 |
+| Body / Button | abcNormal | 16px (1rem) | 400–600 | 1.30–1.50 | -0.16px to normal | 标准正文，导航链接 |
+| Caption / Label | abcNormal | 14px (0.88rem) | 500–600 | 1.25–1.43 | 0.35px (大写) | 元数据、区域标签 |
+| Small | abcNormal | 13px (0.81rem) | 400 | 1.30 (紧凑) | -0.16px to -0.26px | 紧凑的描述 |
+| Micro / Tag | abcNormal | 11px (0.69rem) | 450 | 1.30 (紧凑) | normal | 大写标签，微型标签 |
+
+### 原则
+- **一种字体，完整表达**：abcNormal 承担所有文本角色。设计通过大小、字重、大小写和字间距来实现多样性，而不是切换字体系列。
+- **到处都很紧凑**：几乎所有尺寸都使用 1.0–1.30 的行高——甚至正文也相对压缩。这创造了一种密集的编辑感。
+- **字重 450——精准细节**：一些小型大写标签使用字重 450，这是一种介于常规（400）和中等（500）之间的罕见中间值。这种微工艺彰显了排版的考究。
+- **负字间距为默认值**：即使是正文也使用 -0.16px 到 -0.26px 的字间距，保持所有内容都比默认状态稍微紧凑。
+- **以大写作为结构**：14px 和 11px 的标签使用 `text-transform: uppercase` 和正字间距（0.35px），以创建与紧凑小写文本形成对比的导航路标。
+
+## 4. 组件样式
+
+### 按钮
+- 文本：字重 600，14px abcNormal
+- 背景：可能透明或深色，带有最少的边框
+- 圆角：按钮类链接使用小圆角（4px）
+- 按钮设计极其克制——没有检测到厚重的填充或边框
+- 交互元素融入编辑流中
+
+### 卡片与容器
+- 背景：透明或 Dark Surface (`#1a1a1a`)
+- 边框：`1px solid #27272a`（暗色模式）——几乎不可见的约束
+- 圆角：功能元素使用小圆角（4–8px）；提示样式容器使用 16px
+- 阴影：零——任何元素都没有阴影
+- 卡片主要是图像形式——图片本身就是卡片
+
+### 导航
+- 极简的横向导航——在 hero 内容上方透明显示
+- Logo：白色/黑色的 Runway 字标
+- 链接：abcNormal，16px，字重 400–600
+- 悬停：文本变为白色或更高的不透明度
+- 极其微妙——旨在不与视觉内容抢风头
+
+### 图像处理
+- 全出血的电影级摄影和视频占据主导
+- AI 生成的内容以大尺寸作为主要视觉元素展示
+- 混合尺寸的图像网格创建杂志编辑布局
+- 在 hero 图像上添加深色覆盖层以保证文本可读性
+- 产品截图带有微妙的圆角（8px）
+
+### 独特组件
+
+**Cinematic Hero（电影感主视觉）**
+- 全视口图像或视频，带有文本覆盖层
+- 标题为 48px abcNormal，在深色图像上呈白色
+- 图像始终具有电影级画质——电影级别的构图
+
+**Research Article Cards（研究文章卡片）**
+- 带有文章标题的摄影缩略图
+- 混合尺寸的网格布局（大型主要特性 + 较小的辅助内容）
+- 干净的文本覆盖层或图像下方的字幕样式
+
+**Trust Bar（信任栏）**
+- 公司标志（各行业领先的组织）
+- 干净的单色处理
+- 横向布局，带有宽裕的间距
+
+**Mission Statement（使命宣言）**
+- "We are building AI to simulate the world through imagination, art and aesthetics"
+- 位于带有白色文本的深色背景上
+- 情感上的收尾——艺术且富有哲理
+
+## 5. 布局原则
+
+### 间距系统
+- 基准单位：8px
+- 比例：4px, 6px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 48px, 64px, 78px
+- 区域垂直间距：宽裕（48–78px）
+- 组件间距：16–24px
+
+### 网格与容器
+- 最大容器宽度：最高 1600px（电影宽幅）
+- Hero：全视口，边缘到边缘
+- 内容区域：居中并留有宽裕边距
+- 图像网格：非对称、杂志风格的混合尺寸
+- 页脚：全宽的暗色区域
+
+### 留白理念
+- **电影级的呼吸感**：区域之间的大垂直间隙创造了一种滚动体验，感觉就像在观看场景切换。
+- **图像取代留白**：在其他网站使用空白空间的地方，Runway 用摄影作品来填充。视觉内容本身就是呼吸空间。
+- **编辑网格不对称**：图像网格刻意使用多变的尺寸——将大型 hero 图像与较小的辅助图像搭配，创造视觉节奏。
+
+### 边框圆角比例
+- Sharp（锐利 4px）：按钮、小型交互元素
+- Subtle（微妙 6px）：链接、小型容器
+- Comfortable（舒适 8px）：标准容器、图像卡片
+- Generous（宽裕 16px）：提示样式容器、精选元素
+
+## 6. 深度与高度
+
+| 级别 | 处理方式 | 用途 |
+| ------- | ----------- | ----- |
+| Flat (Level 0) | 无阴影，无边框 | 所有元素——主导状态 |
+| Bordered (Level 1) | `1px solid #27272a` | 仅限提示容器 |
+| Dark Section (Level 2) | 暗色背景 (#000000 / #1a1a1a) 带浅色文字 | Hero、功能区、页脚 |
+| Light Section (Level 3) | 白色/Cool Cloud 背景带暗色文字 | 内容区域、Research |
+
+**阴影哲学**：Runway 使用**零阴影**。这是一个电影制作级别的设计决定——在电影中，深度来自光照、焦点和构图，而不是阴影。界面反映了这种哲学：深度是通过暗/亮区域的交替、摄影景深和覆盖层透明度来传达的——从不通过 CSS box-shadow。
+
+## 7. 宜与忌
+
+### 宜
+- 使用全出血的电影级摄影作为主要视觉元素
+- 所有文本使用 abcNormal——保持单一字体的承诺
+- 将展示级行高保持在 1.0，并使用负字间距以实现电影标题般的密度
+- 使用冷灰色调中性调色板（#767d88、#7d848e）作为次要文本
+- 保持零阴影——深度来自摄影和区域背景
+- 导航标签使用大写加字间距（14px，0.35px 间距）
+- 应用小圆角（4–8px）——设计不是胶囊型的
+- 让视觉内容（照片、视频）占据主导——UI 应该是不可见的
+- 微标签使用字重 450——精度很重要
+
+### 忌
+- 不要向界面添加装饰性颜色——唯一的色彩来自摄影
+- 不要使用厚重的边框或阴影——界面必须几乎不可见
+- 不要使用胶囊形的圆角——Runway 的几何形状是微妙的圆角，而不是正圆形
+- 不要使用粗体（700+）字重——400–600 是全部范围，450 作为精准工具
+- 不要与视觉内容抢风头——文本覆盖层应保持最少和克制
+- 不要在界面中使用渐变背景——渐变只存在于摄影中
+- 不要使用超过一种的字体——abcNormal 处理一切
+- 正文行高不要超过 1.50——紧凑的编辑感是核心
+- 不要降低图像质量——电影级的摄影本身就是设计
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 主要变化 |
+| ------ | ------- | ------------- |
+| Mobile | <640px | 单列、堆叠图像、缩小的 hero 文本 |
+| Tablet | 640–768px | 开始出现 2 列图像网格 |
+| Small Desktop | 768–1024px | 标准布局 |
+| Desktop | 1024–1280px | 完整布局，展开的 hero |
+| Large Desktop | 1280–1600px | 最大的电影宽幅容器 |
+
+### 触摸目标
+- 导航链接保持舒适的 16px
+- 文章卡片作为大型触摸目标
+- 按钮为 14px，字重 600，带有足够的内边距
+
+### 折叠策略
+- **导航**：在移动设备上折叠为汉堡菜单
+- **Hero**：保持全出血，文本按比例缩小
+- **图像网格**：多列 → 2 列 → 单列
+- **研究文章**：特色尺寸卡片 → 全宽堆叠
+- **信任标志**：横向滚动或减少网格列数
+
+### 图像行为
+- 电影级图像按比例缩放
+- 在所有尺寸下保持全出血的 hero
+- 图像网格重新排列为更少的列
+- 视频内容保持宽高比
+
+## 9. Agent 提示词指南
+
+### 快速颜色参考
+- 背景深色："Runway Black (#000000)"
+- 背景浅色："Pure White (#ffffff)"
+- 主要文本深色："Charcoal (#404040)"
+- 次要文本："Cool Slate (#767d88)"
+- 弱化文本："Muted Gray (#a7a7a7)"
+- 浅色边框："Cool Silver (#c9ccd1)"
+- 深色边框："Border Dark (#27272a)"
+- 卡片表面："Dark Surface (#1a1a1a)"
+
+### 示例 Component Prompts
+- "Create a cinematic hero section: full-bleed dark background with a cinematic image overlay. Headline at 48px abcNormal weight 400, line-height 1.0, letter-spacing -1.2px in white. Minimal text below in Cool Slate (#767d88) at 16px."
+- "Design a research article grid: one large card (50% width) with a cinematic image and 24px title, next to two smaller cards stacked. All images with 8px border-radius. Titles in white (dark bg) or Charcoal (#404040, light bg)."
+- "Build a section label: 14px abcNormal weight 500, uppercase, letter-spacing 0.35px in Cool Slate (#767d88). No border, no background."
+- "Create a trust bar: company logos in monochrome, horizontal layout with generous spacing. On dark background with white/gray logo treatments."
+- "Design a mission statement section: Runway Black background, white text at 36px abcNormal, line-height 1.0, letter-spacing -0.9px. Centered, with generous vertical padding."
+
+### 迭代指南
+1. 视觉内容优先——始终包含电影级摄影
+2. 所有内容使用 abcNormal——指定大小和字重，绝不更改字体
+3. 保持界面不可见——没有厚重的边框、没有阴影、没有明亮的颜色
+4. 使用冷板岩灰（#767d88、#7d848e）作为次要文本——而不是暖灰色
+5. 大写标签需要字间距（0.35px）——绝不用紧凑的大写
+6. 暗色区域应该是真正的暗色（#000000 或 #1a1a1a）——不要使用中灰色作为表面

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

@@ -0,0 +1,370 @@
+# Design System: Sanity
+
+
+> **Hermes Agent — Implementation 说明**
+>
+> 原始站点使用专属字体。对于自包含的 HTML 输出，请使用以下 CDN 替代字体：
+> - **主字体:** `Space Grotesk` | **等宽字体:** `IBM Plex Mono`
+> - **字体栈 (CSS):** `font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **等宽字体栈 (CSS):** `font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，并通过 `generative-widgets` skill（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Sanity 的网站是一个呈现为夜间指挥中心的开发者内容平台——深邃、精准且结构严谨。整个体验建立在一个近乎纯黑的画布（`#0b0b0b`）之上，这与其说是“暗黑模式切换”，不如说是为那些常年生活在终端中的用户所构建的工具的自然状态。当大多数 CMS 营销页面还在使用友好的柔和色彩和扁平插画时，Sanity 已经开始利用其产品本身的厚重感：结构化的内容理应搭配结构化的舞台。
+
+标志性的排版声音是 waldenburgNormal——一种独特的、略带几何感的无衬线字体，具有紧凑的负字间距（在展示尺寸下为 -0.32px 到 -4.48px），赋予标题一种压缩的、工程化的质感。在 112px 的 Hero 比例和 -4.48px 的字距下，字体感觉就像是机械加工出来的一样——如同精密切割的钢制字形。这与用于代码和技术标签的 IBM Plex Mono 相搭配，创造出一种双重基调的发声：编辑权威性与开发者可信度的结合。
+
+让 Sanity 独具特色的是其单色深色调色板与生动、高饱和度强调点缀之间的相互作用。中性色阶从纯黑色过渡到严格控制的灰阶（`#0b0b0b` -> `#212121` -> `#353535` -> `#797979` -> `#b9b9b9` -> `#ededed` -> `#ffffff`），没有暖色或冷色倾向——只有纯粹的、无彩色的精准度。在这种克制的背景下，霓虹绿强调色和电光蓝（`#0052ef`）犹如暗室中的信号灯般引人注目。橙红色的 CTA（`#f36458`）在这个以冷色调为主的系统中提供了唯一的温暖触感。
+
+**核心特征：**
+- 以近乎纯黑的画布（`#0b0b0b`）作为默认的自然环境——不是一种深色“模式”，而是首要的身份标识
+- 在展示尺寸下采用极限负字间距的 waldenburgNormal 字体，创造出一种精密工程化的排版发声
+- 纯粹的无彩色灰阶——没有暖色或冷色底色，纯粹的中性克制
+- 鲜艳的强调点缀：在深色背景上的霓虹绿、电光蓝（`#0052ef`）和珊瑚红（`#f36458`）
+- 胶囊状的主按钮（99999px 圆角）与用于次要操作的不明显的微圆角矩形（3-6px）形成对比
+- IBM Plex Mono 作为编辑展示字体在技术层面的抗衡
+- 全宽深色版块，内容包含在经过精确测量的最大宽度容器中
+- 所有交互元素的悬停状态均转变为电光蓝（`#0052ef`）——一种一致的“激活”信号
+
+## 2. 色彩调色板与角色
+
+### 品牌主色
+- **Sanity Black** (`#0b0b0b`)：主要画布和占据主导地位的表面颜色。不是纯黑色，但足够接近以给人一种绝对的感觉。整个视觉识别的基础。
+- **Pure Black** (`#000000`)：用于最高对比度的时刻、深层遮罩以及特定的边框点缀。
+- **Sanity Red** (`#f36458`)：主要的 CTA 和品牌强调色——一种温暖的珊瑚红，作为主要的行动号召颜色。用于“Get Started”按钮和主要转化点。
+
+### 强调色与交互色
+- **Electric Blue** (`#0052ef`)：整个系统中通用的悬停/激活状态颜色。按钮、链接和交互元素在悬停时都会变成这种蓝色。也用作 `--color-blue-700` 以提供聚焦环和激活状态。
+- **Light Blue** (`#55beff` / `#afe3ff`)：次要的蓝色变体，用于强调背景、徽章和变暗的蓝色表面。
+- **Neon Green** (`color(display-p3 .270588 1 0)`)：一种生动的广色域绿色，用作 `--color-fg-accent-green` 来表示成功状态和高级功能高光。在 sRGB 模式下回退到 `#19d600`。
+- **Accent Magenta** (`color(display-p3 .960784 0 1)`)：一种生动的广色域洋红色，用于特殊的强调时刻。
+
+### 表面与背景
+- **Near Black** (`#0b0b0b`)：默认的页面背景和主要表面。
+- **Dark Gray** (`#212121`)：用于卡片、次级容器、输入框背景以及在基础画布之上进行微妙分层的高亮表面颜色。
+- **Medium Dark** (`#353535`)：三级表面和边框颜色，用于在深色层之间创造深度。
+- **Pure White** (`#ffffff`)：用于反转版块、深底浅字文本以及特定的按钮表面。
+- **Light Gray** (`#ededed`)：用于反转/明亮版块的明亮表面以及微妙的背景色调。
+
+### 中性色与文本
+- **White** (`#ffffff`)：深色表面上的主要文本颜色，可读性最高。
+- **Silver** (`#b9b9b9`)：深色表面上的次要文本、正文内容、柔和的描述以及占位符文本。
+- **Medium Gray** (`#797979`)：三级文本、元数据、时间戳和弱化内容。
+- **Charcoal** (`#212121`)：明亮/反转表面上的文本。
+- **Near Black Text** (`#0b0b0b`)：白色/明亮按钮表面上的主要文本。
+
+### 语义色
+- **Error Red** (`#dd0000`)：破坏性操作、验证错误和严重警告——一种纯粹的、高饱和度的红色。
+- **GPC Green** (`#37cd84`)：隐私/合规指示器绿色。
+- **Focus Ring Blue** (`#0052ef`)：用于可访问性的聚焦环颜色，与交互蓝色相匹配。
+
+### 边框系统
+- **Dark Border** (`#0b0b0b`)：深色容器上的主要边框——几乎不可见，保持最小限度的包裹感。
+- **Subtle Border** (`#212121`)：深色表面上输入框、文本域和卡片边缘的标准边框。
+- **Medium Border** (`#353535`)：更明显的边框，用于强调包裹感和分割线。
+- **Light Border** (`#ffffff`)：反转/明亮元素或需要对比度分离的按钮上的边框。
+- **Orange Border** (`color(display-p3 1 0.3333 0)`)：用于高亮/精选元素的特殊强调边框。
+
+## 3. 排版规则
+
+### 字体家族
+- **展示 / 标题**: `waldenburgNormal`，回退字体: `waldenburgNormal Fallback, ui-sans-serif, system-ui`
+- **正文 / UI**: `waldenburgNormal`，回退字体: `waldenburgNormal Fallback, ui-sans-serif, system-ui`
+- **代码 / 技术文本**: `IBM Plex Mono`，回退字体: `ibmPlexMono Fallback, ui-monospace`
+- **回退 / CJK**: `Helvetica`，回退字体: `Arial, Hiragino Sans GB, STXihei, Microsoft YaHei, WenQuanYi Micro Hei`
+
+*注意：waldenburgNormal 是一种自定义字体。对于外部实现，请使用 Inter 或 Space Grotesk 作为无衬线替代字体（几何感、略带紧凑感）。IBM Plex Mono 可在 Google Fonts 上获取。*
+
+### 层级结构
+
+| 角色 | 字体 | 尺寸 | 粗细 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| 展示 / Hero | waldenburgNormal | 112px (7rem) | 400 | 1.00 (紧凑) | -4.48px | 最大视觉冲击，压缩字距 |
+| Hero 次级 | waldenburgNormal | 72px (4.5rem) | 400 | 1.05 (紧凑) | -2.88px | 大版块标题 |
+| 版块标题 | waldenburgNormal | 48px (3rem) | 400 | 1.08 (紧凑) | -1.68px | 主要版块锚点 |
+| 大标题 | waldenburgNormal | 38px (2.38rem) | 400 | 1.10 (紧凑) | -1.14px | 特性版块标题 |
+| 中标题 | waldenburgNormal | 32px (2rem) | 425 | 1.24 (紧凑) | -0.32px | 卡片标题、子版块标题 |
+| 小标题 | waldenburgNormal | 24px (1.5rem) | 425 | 1.24 (紧凑) | -0.24px | 较小的特性标题 |
+| 副标题 | waldenburgNormal | 20px (1.25rem) | 425 | 1.13 (紧凑) | -0.2px | 子版块标记 |
+| 大正文 | waldenburgNormal | 18px (1.13rem) | 400 | 1.50 | -0.18px | 介绍段落、描述说明 |
+| 正文 | waldenburgNormal | 16px (1rem) | 400 | 1.50 | normal | 标准正文文本 |
+| 小正文 | waldenburgNormal | 15px (0.94rem) | 400 | 1.50 | -0.15px | 紧凑型正文文本 |
+| 说明文本 | waldenburgNormal | 13px (0.81rem) | 400-500 | 1.30-1.50 | -0.13px | 元数据、描述、标签 |
+| 小说明 | waldenburgNormal | 12px (0.75rem) | 400 | 1.50 | -0.12px | 脚注、时间戳 |
+| 微型 / 标签 | waldenburgNormal | 11px (0.69rem) | 500-600 | 1.00-1.50 | normal | 大写标签、微型徽章 |
+| 代码正文 | IBM Plex Mono | 15px (0.94rem) | 400 | 1.50 | normal | 代码块、技术内容 |
+| 代码说明 | IBM Plex Mono | 13px (0.81rem) | 400-500 | 1.30-1.50 | normal | 行内代码、小型技术标签 |
+| 代码微型 | IBM Plex Mono | 10-12px | 400 | 1.30-1.50 | normal | 微型代码标签、大写标签 |
+
+### 原则
+- **大尺寸下的极限负字距**：72px 以上的展示标题使用强烈的负字间距（-2.88px 到 -4.48px），创造出一种紧凑、工程化的质感，使 Sanity 有别于较松散的编辑排版。
+- **单一字体，多重语境**：waldenburgNormal 同时处理编辑展示和功能性 UI 文本。字重范围很窄（大部分为 400-425，仅微型标签使用 500-600），保持了发声的一致性。
+- **OpenType 特性控制**：排版有意使用了特定的设置，包括展示尺寸下的 `"cv01", "cv11", "cv12", "cv13", "ss07"` 以及正文文本的 `"calt" 0`，针对不同语境微调了字符替用。
+- **紧凑标题，宽松正文**：标题使用 1.00-1.24 的行高（极其紧凑），而正文文本则保持在 1.50 的呼吸感。这种对比创造了清晰的视觉层级。
+- **技术标签使用大写**：IBM Plex Mono 的说明文本和小标签经常使用带有紧凑行高的 `text-transform: uppercase`，为技术元数据创造了一种“系统读数”美学。
+
+## 4. 组件样式
+
+### 按钮
+
+**主要 CTA (胶囊状)**
+- 背景：Sanity Red (`#f36458`)
+- 文本：White (`#ffffff`)
+- 内边距：8px 16px
+- 圆角：99999px (完全胶囊状)
+- 边框：无
+- 悬停：Electric Blue (`#0052ef`) 背景，白色文本
+- 字体：16px waldenburgNormal，字重 400
+
+**次要 (深色胶囊状)**
+- 背景：Near Black (`#0b0b0b`)
+- 文本：Silver (`#b9b9b9`)
+- 内边距：8px 12px
+- 圆角：99999px (完全胶囊状)
+- 边框：无
+- 悬停：Electric Blue (`#0052ef`) 背景，白色文本
+
+**描边 (浅色胶囊状)**
+- 背景：White (`#ffffff`)
+- 文本：Near Black (`#0b0b0b`)
+- 内边距：8px
+- 圆角：99999px (完全胶囊状)
+- 边框：1px solid `#0b0b0b`
+- 悬停：Electric Blue (`#0052ef`) 背景，白色文本
+
+**幽灵 / 微妙**
+- 背景：Dark Gray (`#212121`)
+- 文本：Silver (`#b9b9b9`)
+- 内边距：0px 12px
+- 圆角：5px
+- 边框：1px solid `#212121`
+- 悬停：Electric Blue (`#0052ef`) 背景，白色文本
+
+**大写标签按钮**
+- 字体：11px waldenburgNormal，字重 600，大写
+- 背景：透明或 `#212121`
+- 文本：Silver (`#b9b9b9`)
+- 字间距：normal
+- 用于类似标签页的导航和过滤控件
+
+### 卡片
+
+**深色内容卡片**
+- 背景：`#212121`
+- 边框：1px solid `#353535` 或 `#212121`
+- 圆角：6px
+- 内边距：24px
+- 文本：White (`#ffffff`) 用于标题，Silver (`#b9b9b9`) 用于正文
+- 悬停：微妙的边框颜色转变或高度变化
+
+**特性卡片 (全宽)**
+- 背景：`#0b0b0b` 或全宽图片/渐变
+- 边框：无 或 1px solid `#212121`
+- 圆角：12px
+- 内边距：32-48px
+- 包含带有覆盖文本的大型图像
+
+### 输入框
+
+**文本输入框 / 文本域**
+- 背景：Near Black (`#0b0b0b`)
+- 文本：Silver (`#b9b9b9`)
+- 边框：1px solid `#212121`
+- 内边距：8px 12px
+- 圆角：3px
+- 聚焦：带有 `var(--focus-ring-color)` (蓝色) 的轮廓，2px solid
+- 聚焦背景：转变为深青色 (`#072227`)
+
+**搜索输入框**
+- 背景：`#0b0b0b`
+- 文本：Silver (`#b9b9b9`)
+- 内边距：0px 12px
+- 圆角：3px
+- 占位符：Medium Gray (`#797979`)
+
+### 导航
+
+**顶部导航**
+- 背景：Near Black (`#0b0b0b`) 带有背景模糊
+- 高度：auto，紧凑的内边距
+- Logo：左对齐，Sanity 文字标记
+- 链接：waldenburgNormal 16px，Silver (`#b9b9b9`)
+- 链接悬停：通过 `--color-fg-accent-blue` 变为 Electric Blue
+- CTA 按钮：Sanity Red 胶囊按钮，右对齐
+- 分隔线：1px border-bottom `#212121`
+
+**页脚**
+- 背景：Near Black (`#0b0b0b`)
+- 多列链接布局
+- 链接：Silver (`#b9b9b9`)，悬停时变为蓝色
+- 版块标题：White (`#ffffff`)，13px 大写 IBM Plex Mono
+
+### 徽章 / 胶囊标记
+
+**中性微妙**
+- 背景：White (`#ffffff`)
+- 文本：Near Black (`#0b0b0b`)
+- 内边距：8px
+- 字体：13px
+- 圆角：99999px
+
+**中性填充**
+- 背景：Near Black (`#0b0b0b`)
+- 文本：White (`#ffffff`)
+- 内边距：8px
+- 字体：13px
+- 圆角：99999px
+
+## 5. 布局原则
+
+### 间距系统
+基础单位：**8px**
+
+| Token | 数值 | 用法 |
+|-------|-------|-------|
+| space-1 | 1px | 极细的间隙，类似边框的间距 |
+| space-2 | 2px | 最小化的内部填充 |
+| space-3 | 4px | 紧凑的组件内部间距 |
+| space-4 | 6px | 小型元素的间隙 |
+| space-5 | 8px | 基础单位——按钮内边距、输入框内边距、徽章内边距 |
+| space-6 | 12px | 标准组件间隙，按钮水平内边距 |
+| space-7 | 16px | 版块内部间距，卡片间距 |
+| space-8 | 24px | 大型组件内边距，卡片内部间距 |
+| space-9 | 32px | 版块内边距，容器沟槽 |
+| space-10 | 48px | 大型版块的垂直间距 |
+| space-11 | 64px | 重大版块的分隔 |
+| space-12 | 96-120px | Hero 垂直内边距，最大版块间距 |
+
+### 网格与容器
+- 最大内容宽度：~1440px（从断点推断得出）
+- 页面沟槽：桌面端 32px，移动端 16px
+- 内容版块使用全宽背景，内容居中并限制最大宽度
+- 多列布局：桌面端 2-3 列，移动端单列
+- 卡片网格：CSS Grid 布局并带有统一的间隙 (16-24px)
+
+### 留白理念
+Sanity 在各个版块之间使用了强烈的垂直间距（64-120px），以在深色画布上创造呼吸空间。在版块内部，间距更紧凑（16-32px），形成了由慷慨的留白分隔开的高密度信息群。这种节奏赋予了页面一种“幻灯片”般的质感——每个版块都感觉像是一个独立的、聚焦的画框。
+
+### 圆角比例
+
+| Token | 数值 | 用法 |
+|-------|-------|-------|
+| radius-xs | 3px | 输入框、文本域、微小的圆角 |
+| radius-sm | 4-5px | 次要按钮、小卡片、标签 |
+| radius-md | 6px | 标准卡片、容器 |
+| radius-lg | 12px | 大型卡片、特性容器、表单 |
+| radius-pill | 99999px | 主要按钮、徽章、导航胶囊 |
+
+## 6. 深度与高度
+
+### 阴影系统
+
+| 级别 | 数值 | 用法 |
+|-------|-------|-------|
+| Level 0 (扁平) | none | 大多数元素的默认状态——深色表面仅通过颜色来创造深度 |
+| Level 1 (微妙) | 0px 0px 0px 1px `#212121` | 类似边框的阴影，在没有可见边框的情况下提供最小限度的包裹感 |
+| Level 2 (聚焦) | 0 0 0 2px `var(--color-blue-500)` | 输入框和交互元素的聚焦环 |
+| Level 3 (遮罩) | 背景模糊 + 半透明深色 | 导航遮罩、模态框背景 |
+
+### 深度理念
+Sanity 的深度系统几乎完全是基于**比色法**的，而不是基于阴影。高度通过表面颜色的变化来传达：`#0b0b0b`（基础）-> `#212121`（凸起）-> `#353535`（显著）-> `#ffffff`（反转/最高）。这种方法是深色界面的原生方法，因为传统的投影在深色中将不可见。少数存在的阴影是基于环的（0px 0px 0px Npx）或基于模糊的（backdrop-filter），而不是偏移阴影，维持了扁平、精密工程化的美学。
+
+基于边框的包裹感（1px solid `#212121` 或 `#353535`）作为主要的空间分隔符，边框的暗度经过校准，可见但不具主导性。该系统避免使用“悬浮卡片”美学——一切都感觉是安装/贴附在表面上的，而不是悬浮在其上方。
+
+## 7. 宜与忌
+
+### 宜
+- 使用无彩色灰阶作为基础——保持纯粹的中性克制，不带有任何暖色/冷色染色
+- 始终一致地将 Electric Blue (`#0052ef`) 作为所有交互元素的通用悬停/激活状态
+- 在 48px 及以上的展示标题上使用极限负字间距（-2px 至 -4.48px）
+- 保持主要 CTA 为带有珊瑚红（`#f36458`）的全胶囊形状（99999px 圆角）
+- 在技术标签、标记和系统元数据上使用 IBM Plex Mono 大写形式
+- 通过表面颜色（从深到浅）而不是阴影来传达深度
+- 在深色画布上保持慷慨的垂直版块间距（64-120px）
+- 在展示型排版上使用 `"cv01", "cv11", "cv12", "cv13", "ss07"` OpenType 特性
+
+### 忌
+- 不要在中性色阶中引入暖色或冷色调——Sanity 的灰色是纯粹的无彩色
+- 不要使用投影来表现高度——深色界面需要基于比色法的深度
+- 不要使用 13px 到 99998px 之间的 border-radius——系统直接从 12px（大卡片）跳转到胶囊状（99999px）
+- 不要在同一元素中将珊瑚红 CTA 与电光蓝交互色混合使用
+- 不要使用粗字重（700+）——系统的最大值是 600，且仅用于 11px 的大写标签
+- 在未检查灰对灰的对比度比率的情况下，不要将浅色文本置于浅色表面上，或将深色文本置于深色表面上
+- 不要使用传统的偏移 box-shadows——仅使用环形阴影（0 0 0 Npx）或基于边框的包裹
+- 不要打破标题的紧凑行高——1.00-1.24 是规定范围，展示文本永远不要超过 1.5+
+
+## 8. 响应式行为
+
+### 断点
+
+| 名称 | 宽度 | 行为 |
+|------|-------|----------|
+| Desktop XL | >= 1640px | 完整布局，最大内容宽度 |
+| Desktop | >= 1440px | 标准桌面布局 |
+| Desktop Compact | >= 1200px | 略微压缩的桌面布局 |
+| Laptop | >= 1100px | 缩小的列宽 |
+| Tablet Landscape | >= 960px | 2 列布局开始折叠 |
+| Tablet | >= 768px | 过渡区，部分元素堆叠 |
+| Mobile Large | >= 720px | 接近平板的布局 |
+| Mobile | >= 480px | 单列、堆叠的布局 |
+| Mobile Small | >= 376px | 支持的最小宽度 |
+
+### 折叠策略
+- **导航**：水平链接在 768px 以下折叠为汉堡菜单
+- **Hero 排版**：在各断点间从 112px 缩减至 72px -> 48px -> 38px，保持紧凑的字间距比例
+- **网格布局**：在 ~960px 时从 3 列缩减为 2 列，在 768px 以下变为单列
+- **卡片网格**：在移动端采用水平滚动而不是换行（以保留卡片宽高比）
+- **版块间距**：移动端垂直内边距减少约 40%（120px -> 64px -> 48px）
+- **按钮尺寸**：CTA 胶囊保持内边距但缩小字体大小；幽灵按钮保持固定不变
+- **代码块**：保持等宽格式进行水平滚动
+
+### 移动端特定调整
+- 全宽版块延伸至边缘，带有 16px 的内部沟槽
+- 触摸目标：所有交互元素至少为 44px
+- 标题字间距在移动端尺寸下略微放松（不再使用那么激进的负字距）
+- 图像容器从固定的宽高比切换为带有自动高度的全宽模式
+
+## 9. Agent Prompt 指南
+
+### 快速颜色参考
+```
+Background:      #0b0b0b (near-black canvas)
+Surface:         #212121 (elevated cards/containers)
+Border:          #353535 (visible) / #212121 (subtle)
+Text Primary:    #ffffff (white on dark)
+Text Secondary:  #b9b9b9 (silver on dark)
+Text Tertiary:   #797979 (medium gray)
+CTA:             #f36458 (coral-red)
+Interactive:     #0052ef (electric blue, all hovers)
+Success:         #19d600 (green, sRGB fallback)
+Error:           #dd0000 (pure red)
+Light Surface:   #ededed / #ffffff (inverted sections)
+```
+
+### 示例 Prompts
+
+**Landing page section:**
+"Create a feature section with a near-black (#0b0b0b) background. Use a 48px heading in Inter with -1.68px letter-spacing, white text. Below it, 16px body text in #b9b9b9 with 1.50 line-height. Include a coral-red (#f36458) pill button with white text and a secondary dark (#0b0b0b) pill button with #b9b9b9 text. Both buttons hover to #0052ef blue."
+
+**Card grid:**
+"Build a 3-column card grid on a #0b0b0b background. Each card has a #212121 surface, 1px solid #353535 border, 6px border-radius, and 24px padding. Card titles are 24px white with -0.24px letter-spacing. Body text is 13px #b9b9b9. Add a 13px IBM Plex Mono uppercase tag in #797979 at the top of each card."
+
+**Form section:**
+"Design a contact form on a #0b0b0b background. Inputs have #0b0b0b background, 1px solid #212121 border, 3px border-radius, 8px 12px padding, and #b9b9b9 placeholder text. Focus state shows a 2px blue (#0052ef) ring. Submit button is a full-width coral-red (#f36458) pill. Include a 13px #797979 helper text below each field."
+
+**Navigation bar:**
+"Create a sticky top navigation on #0b0b0b with backdrop blur. Left: brand text in 15px white. Center/right: nav links in 16px #b9b9b9 that hover to blue. Far right: a coral-red (#f36458) pill CTA button. Bottom border: 1px solid #212121."
+
+### 迭代指南
+1. **从深色开始**：以 `#0b0b0b` 背景、`#ffffff` 主要文本、`#b9b9b9` 次要文本开始
+2. **添加结构**：使用 `#212121` 表面和 `#353535` 边框进行包裹——不要使用阴影
+3. **应用排版**：使用 Inter (或 Space Grotesk)，在标题上使用紧凑的字间距，正文行高设为 1.50
+4. **颜色点缀**：为 CTA 添加 `#f36458`，为所有悬停/交互状态添加 `#0052ef`
+5. **优化间距**：8px 基础单位，版块内 24-32px，版块间 64-120px
+6. **技术细节**：为标签和元数据添加 IBM Plex Mono 大写形式
+7. **润色**：确保所有交互元素悬停时变为 `#0052ef`，所有按钮均为胶囊状或微小的 5px 圆角，边框为极细的 1px