@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,268 @@
+# 设计系统：Supabase
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原始站点使用专有字体。对于独立的 HTML 输出，请使用以下 CDN 替代字体：
+> - **Primary:** `Inter` | **Mono:** `Source Code Pro`
+> - **Font stack (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **Mono stack (CSS):** `font-family: 'Source Code Pro', 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=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` skill (cloudflared tunnel) 提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Supabase 的网站是一个原生 dark-mode 的开发者平台，汲取了高级代码编辑器的美学灵感——深邃的黑色背景 (`#0f0f0f`, `#171717`) 搭配祖母绿点缀色 (`#3ecf8e`, `#00c573`)，呼应了该品牌开源、PostgreSQL 绿色的身份标识。整个设计系统感觉就像是诞生于终端窗口中，并演变成一个精密复杂的营销界面，同时没有失去其作为开发者工具的灵魂。
+
+排版基于 "Circular" 字体——这是一种带有圆润终端的几何无衬线字体，柔和了技术上的冷硬感。在 72px 字号和 1.00 行高下，首屏文本的垂直空间被压缩到了极致，创造出密集、极具冲击力且没有丝毫浪费的陈述。等宽字体 (Source Code Pro) 偶尔用于大写的技术标签，字间距为 1.2px，打造出连接营销网站与产品体验的 "开发者控制台" 标记。
+
+Supabase 的独特之处在于其复杂的基于 HSL 的 color token 系统。Supabase 并没有使用扁平的十六进制颜色值，而是对几乎所有颜色采用了带 alpha 通道的 HSL 格式 (`--colors-crimson4`, `--colors-purple5`, `--colors-slateA12`)，从而实现了一种通过透明度让颜色相互交互的精细分层系统。这种半透明效果创造了纵深感——`rgba(46, 46, 46)` 的边框、`rgba(41, 41, 41, 0.84)` 的表面，以及部分透明的强调色，全都与深色背景完美融合，仅用极少的色彩元素便营造出丰富且富有层次的调色板。
+
+绿色点缀 (`#3ecf8e`) 被有选择性地使用——出现在 Supabase 的 logo 中、链接颜色 (`#00c573`) 以及边框高亮 (`rgba(62, 207, 142, 0.3)`) 里——它始终作为 "这就是 Supabase" 的醒目标志，而非单纯的装饰元素。用于主要 CTA 的胶囊状按钮（9999px 圆角）与用于次要元素的 6px 标准圆角形成了鲜明对比，构建起清晰的视觉权重层级。
+
+**核心特征：**
+- 原生 dark-mode：近乎纯黑的背景 (`#0f0f0f`, `#171717`) —— 绝非死板的纯黑
+- 祖母绿品牌点缀色 (`#3ecf8e`, `#00c573`) 谨慎用作身份标识
+- Circular 字体 —— 带有圆润终端的几何无衬线字体
+- Source Code Pro 用于大写技术标签（1.2px 字间距）
+- 基于 HSL 并带有 alpha 通道的 color token 系统，用于实现半透明分层
+- 主要 CTA 采用胶囊状按钮 (9999px)，次要元素采用 6px 圆角
+- 从 `#171717` 过渡到 `#898989` 再到 `#fafafa` 的中性灰度
+- 采用深灰色 (`#2e2e2e`, `#363636`, `#393939`) 的边框系统
+- 极简的阴影 —— 通过边框对比度和透明度来营造纵深感
+- Radix 色彩原语（crimson, purple, violet, indigo, yellow, tomato, orange, slate）
+
+## 2. 色彩调色板与角色
+
+### 品牌色
+- **Supabase Green** (`#3ecf8e`)：主要品牌色，logo，强调边框
+- **Green Link** (`#00c573`)：用于链接和交互操作的交互绿
+- **Green Border** (`rgba(62, 207, 142, 0.3)`)：极其细微的绿色强调边框
+
+### 中性色阶
+- **Near Black** (`#0f0f0f`)：主要按钮背景，最深层面
+- **Dark** (`#171717`)：页面背景，主要画布
+- **Dark Border** (`#242424`)：水平线，区块分割线
+- **Border Dark** (`#2e2e2e`)：卡片边框，标签页边框
+- **Mid Border** (`#363636`)：按钮边框，分割线
+- **Border Light** (`#393939`)：次要边框
+- **Charcoal** (`#434343`)：三级边框，深色强调元素
+- **Dark Gray** (`#4d4d4d`)：粗重的辅助文本
+- **Mid Gray** (`#898989`)：弱化文本，链接颜色
+- **Light Gray** (`#b4b4b4`)：二级链接文本
+- **Near White** (`#efefef`)：浅色边框，细微的表面
+- **Off White** (`#fafafa`)：主要文本，按钮文本
+
+### Radix Color Tokens (基于 HSL)
+- **Slate Scale**: `--colors-slate5` 至 `--colors-slateA12` —— 中性渐变
+- **Purple**: `--colors-purple4`, `--colors-purple5`, `--colors-purpleA7` —— 强调色谱
+- **Violet**: `--colors-violet10` (`hsl(251, 63.2%, 63.2%)`) —— 鲜艳的强调色
+- **Crimson**: `--colors-crimson4`, `--colors-crimsonA9` —— 暖色强调 / 警示
+- **Indigo**: `--colors-indigoA2` —— 细微的蓝色蒙层
+- **Yellow**: `--colors-yellowA7` —— 提醒 / 警告
+- **Tomato**: `--colors-tomatoA4` —— 错误强调色
+- **Orange**: `--colors-orange6` —— 暖色强调
+
+### 表面与遮罩层
+- **Glass Dark** (`rgba(41, 41, 41, 0.84)`)：半透明深色遮罩
+- **Slate Alpha** (`hsla(210, 87.8%, 16.1%, 0.031)`)：极其细微的蓝色蒙层
+- **Fixed Scale Alpha** (`hsla(200, 90.3%, 93.4%, 0.109)`)：浅色磨砂遮罩
+
+### 阴影
+- Supabase 在其深色主题中**几乎不使用阴影**。纵深感是通过边框的对比度和表面颜色的差异来营造的，而不是依靠 box-shadows。聚焦状态使用了 `rgba(0, 0, 0, 0.1) 0px 4px 12px` —— 极简且实用。
+
+## 3. 排版规则
+
+### 字体族
+- **Primary**: `Circular`，备选字体：`custom-font, Helvetica Neue, Helvetica, Arial`
+- **Monospace**: `Source Code Pro`，备选字体：`Office Code Pro, Menlo`
+
+### 层级结构
+
+| 角色 | 字体 | 字号 | 粗细 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Circular | 72px (4.50rem) | 400 | 1.00 (紧凑) | normal | 极致密集，零浪费 |
+| Section Heading | Circular | 36px (2.25rem) | 400 | 1.25 (紧凑) | normal | 功能区块标题 |
+| Card Title | Circular | 24px (1.50rem) | 400 | 1.33 | -0.16px | 轻微的负字间距 |
+| Sub-heading | Circular | 18px (1.13rem) | 400 | 1.56 | normal | 二级标题 |
+| Body | Circular | 16px (1.00rem) | 400 | 1.50 | normal | 标准正文文本 |
+| Nav Link | Circular | 14px (0.88rem) | 500 | 1.00–1.43 | normal | 导航项 |
+| Button | Circular | 14px (0.88rem) | 500 | 1.14 (紧凑) | normal | 按钮标签 |
+| Caption | Circular | 14px (0.88rem) | 400–500 | 1.43 | normal | 元数据，标签 |
+| Small | Circular | 12px (0.75rem) | 400 | 1.33 | normal | 免责声明，页脚链接 |
+| Code Label | Source Code Pro | 12px (0.75rem) | 400 | 1.33 | 1.2px | `text-transform: uppercase` |
+
+### 设计原则
+- **克制的字重**：几乎所有文本都使用 400 (regular/book) 字重。字重 500 仅出现在导航链接和按钮标签中。在已检测的系统中没有使用粗体 (700) —— 视觉层级是通过字号而非字重打造的。
+- **1.00 的首屏行高**：首屏文本被压缩到行距为零的极致状态。这是具有决定性意义的排版姿态——文本读起来就像一条终端命令：密集、高效、没有任何浪费的垂直空间。
+- **卡片上的负字间距**：卡片标题使用了 -0.16px 的字间距，这是一种微妙的收紧处理，使其在不突兀的情况下与正文文本产生区分。
+- **等宽字体的仪式感**：大写的 Source Code Pro 配合 1.2px 的字间距是 "开发者控制台" 的专属语态——谨慎用于连接产品体验的技术标签。
+- **几何特性的人格化**：Circular 圆润的终端为原本可能冰冷、充满技术感的界面注入了温度。这种字体是其人性化的核心元素。
+
+## 4. 组件样式
+
+### 按钮
+
+**Primary Pill (Dark)**
+- Background: `#0f0f0f`
+- Text: `#fafafa`
+- Padding: 8px 32px
+- Radius: 9999px (全胶囊状)
+- Border: `1px solid #fafafa` (深色上的白色边框)
+- Focus shadow: `rgba(0, 0, 0, 0.1) 0px 4px 12px`
+- 用途：主要 CTA ("Start your project")
+
+**Secondary Pill (Dark, Muted)**
+- Background: `#0f0f0f`
+- Text: `#fafafa`
+- Padding: 8px 32px
+- Radius: 9999px
+- Border: `1px solid #2e2e2e` (深色边框)
+- Opacity: 0.8
+- 用途：伴随主要 CTA 出现的次要 CTA
+
+**Ghost Button**
+- Background: transparent
+- Text: `#fafafa`
+- Padding: 8px
+- Radius: 6px
+- Border: `1px solid transparent`
+- 用途：三级操作，图标按钮
+
+### 卡片与容器
+- Background: 深色表面 (`#171717` 或略浅的颜色)
+- Border: `1px solid #2e2e2e` 或 `#363636`
+- Radius: 8px–16px
+- 无可见阴影 —— 靠边框勾勒边缘
+- Internal padding: 16px–24px
+
+### 标签页
+- Border: `1px solid #2e2e2e`
+- Radius: 9999px (胶囊状标签)
+- Active: 绿色强调或较浅的表面
+- Inactive: 深色，弱化处理
+
+### 链接
+- **Green**: `#00c573` —— Supabase 品牌链接
+- **Primary Light**: `#fafafa` —— 深色背景上的标准链接
+- **Secondary**: `#b4b4b4` —— 弱化的链接
+- **Muted**: `#898989` —— 三级链接，页脚
+
+### 导航
+- 深色背景与页面匹配 (`#171717`)
+- 带有绿色图标的 Supabase logo
+- 导航链接采用 14px 字号、字重 500 的 Circular 字体
+- 带有产品下拉菜单的干净水平布局
+- 绿色的 "Start your project" 胶囊状 CTA 按钮
+- 固定头部行为
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 渐进尺度：1px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 90px, 96px, 128px
+- 显著的大幅跳跃：48px → 90px → 96px → 128px，用于主要区块的间距
+
+### 网格与容器
+- 宽裕的最大宽度限制下的居中内容
+- 全宽深色区块，内部内容受限
+- 特性 grids：基于图标的网格，卡片尺寸保持一致
+- 用于 "Trusted by" 区域的 Logo 网格
+- 页脚：深色背景上的多列布局
+
+### 断点
+| 名称 | 宽度 | 主要变化 |
+|------|-------|-------------|
+| Mobile | <600px | 单列，堆叠式布局 |
+| Desktop | >600px | 多列网格，展开的布局 |
+
+*注：Supabase 使用了极其精简的断点系统——主要是单一的 600px 断点，这表明其采用了移动优先配合渐进增强的开发策略。*
+
+### 留白理念
+- **戏剧化的区块间距**：主要区块之间保持 90px–128px 的间距，营造出电影般的节奏感——在深邃的视觉虚空中，每一个区块都是独立的场景。
+- **密集的内容块**：在区块内部，间距非常紧凑 (16px–24px)，形成信息高度集中的聚簇。
+- **由边框界定的空间**：Supabase 没有采用“留白 + 阴影”的区隔方式，而是在深色背景上使用了极细的边框——通过线条而非空白间距来区隔。
+
+### 边框圆角尺度
+- 标准 (6px)：Ghost buttons，小元素
+- 舒适 (8px)：卡片，容器
+- 中等 (11px–12px)：中等尺寸的面板
+- 较大 (16px)：特性卡片，主要容器
+- 胶囊状 (9999px)：主要按钮，标签页指示器
+
+## 6. 纵深与层级
+
+| 层级 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影，边框 `#2e2e2e` | 默认状态，绝大多数表面 |
+| Subtle Border (Level 1) | 边框 `#363636` 或 `#393939` | 交互元素，悬停状态 |
+| Focus (Level 2) | `rgba(0, 0, 0, 0.1) 0px 4px 12px` | 仅用于聚焦状态 |
+| Green Accent (Level 3) | 边框 `rgba(62, 207, 142, 0.3)` | 品牌高亮的元素 |
+
+**阴影哲学**：Supabase 刻意避开阴影。在原生 dark-mode 的设计中，阴影几乎是不可见的，也没有任何意义。相反，纵深感和层级是通过一套复杂的边框层级系统来传达的——从 `#242424` (几乎不可见) 到 `#2e2e2e` (标准) 再到 `#393939` (突出)。30% 不透明度的绿色强调边框 (`rgba(62, 207, 142, 0.3)`) 就是“悬浮”状态——品牌色本身成为了标识纵深感的信号。
+
+## 7. 宜与忌
+
+### 宜
+- 使用接近纯黑的背景 (`#0f0f0f`, `#171717`) —— 纵深感来源于灰色的边框层级
+- 克制使用 Supabase 绿 (`#3ecf8e`, `#00c573`) —— 它是身份标识，而不是装饰品
+- 几乎所有元素都使用字重为 400 的 Circular 字体 —— 500 仅用于按钮和导航
+- 将首屏文本的行高设定为 1.00 —— 这种零行距是其标志性的排版特征
+- 通过边框颜色的差异 (`#242424` → `#2e2e2e` → `#363636`) 来营造纵深感
+- 胶囊状 (9999px) 专属用于主要 CTA 和标签页
+- 使用带 alpha 通道的基于 HSL 的颜色来实现半透明分层效果
+- 使用大写的 Source Code Pro 标签作为开发者语境的标记
+
+### 忌
+- 不要添加 box-shadows —— 它们在深色背景上几乎不可见，且会破坏由边框定义的纵深体系
+- 不要使用粗体 (700) 字重 —— 系统仅使用 400 和 500
+- 不要将绿色应用在背景或大面积表面上 —— 它仅用于边框、链接和小面积的强调元素
+- 不要将暖色调（crimson, orange）作为主要的设计元素 —— 它们是作为代表各种状态的语义化 token 存在的
+- 不要将首屏文本的行高增加到 1.00 以上 —— 这种密集感是刻意为之的
+- 不要在按钮上使用过大的圆角 (16px+) —— 要么是胶囊状 (9999px)，要么是标准 (6px)，没有折中方案
+- 对于主要表面，不要将背景颜色改得比 `#171717` 更浅 —— 这种深邃的暗度是其结构基础
+- 不要遗漏半透明边框 —— `rgba` 边框颜色是其实现视觉分层的关键机制
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 主要变化 |
+|------|-------|-------------|
+| Mobile | <600px | 单列，堆叠式特性展示，精简导航 |
+| Desktop | >600px | 多列网格，完整导航，展开的区块 |
+
+### 折叠策略
+- Hero: 72px → 按比例缩小
+- 特性 grids: 多列 → 单列堆叠
+- Logo row: 水平排列 → 换行网格
+- Navigation: 完整菜单 → 汉堡菜单
+- Section spacing: 90–128px → 48–64px
+- Buttons: 行内排列 → 全宽堆叠
+
+## 9. Agent 提示词指南
+
+### 快速色彩参考
+- Background: `#0f0f0f` (按钮), `#171717` (页面)
+- Text: `#fafafa` (主要), `#b4b4b4` (次要), `#898989` (弱化)
+- Brand green: `#3ecf8e` (品牌), `#00c573` (链接)
+- Borders: `#242424` (细微), `#2e2e2e` (标准), `#363636` (突出)
+- Green border: `rgba(62, 207, 142, 0.3)` (强调)
+
+### 示例 Component Prompts
+- "Create a hero section on #171717 background. Headline at 72px Circular weight 400, line-height 1.00, #fafafa text. Sub-text at 16px Circular weight 400, line-height 1.50, #b4b4b4. Pill CTA button (#0f0f0f bg, #fafafa text, 9999px radius, 8px 32px padding, 1px solid #fafafa border)."
+- "Design a feature card: #171717 background, 1px solid #2e2e2e border, 16px radius. Title at 24px Circular weight 400, letter-spacing -0.16px. Body at 14px weight 400, #898989 text."
+- "Build navigation bar: #171717 background. Circular 14px weight 500 for links, #fafafa text. Supabase logo with green icon left-aligned. Green pill CTA 'Start your project' right-aligned."
+- "Create a technical label: Source Code Pro 12px, uppercase, letter-spacing 1.2px, #898989 text."
+- "Design a framework logo grid: 6-column layout on dark, grayscale logos at 60% opacity, 1px solid #2e2e2e border between sections."
+
+### 迭代指南
+1. 从 #171717 背景开始 —— 一切都是原生 dark-mode
+2. 绿色是品牌身份的标识 —— 仅将其用于链接、logo 和强调边框
+3. 纵深感来源于边框 (#242424 → #2e2e2e → #363636)，而不是阴影
+4. 字重 400 是所有元素的默认值 —— 500 仅用于交互元素
+5. 1.00 的首屏行高是其标志性的排版手法
+6. 主要操作使用胶囊状 (9999px)，次要操作使用 6px，卡片使用 8-16px
+7. 带有 alpha 通道的 HSL 创造了精密复杂的半透明分层效果

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

@@ -0,0 +1,265 @@
+# Design System: Superhuman
+
+
+> **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. 视觉主题与氛围
+
+Superhuman 的网站感觉就像打开一个豪华信封——主要以白色为主，极其干净，配以单一引人注目的戏剧性色彩点缀。Hero 区域采用电影般的紫色渐变，深邃的暮色 `#1b1938` 让人联想到黎明前的时刻，上面叠加着自信的白色排版。在这个戏剧性的入口之下，网站的其余部分几乎完全是白色画布搭配深炭色文本，创造了一种鲜明但精致的阅读体验。
+
+排版是真正的标志性特征：Super Sans VF，这是一种定制的可变字体，具有非常规的粗细档位（460, 540, 600, 700），介于传统字重类别之间。460 字重——比 regular 稍重但比 medium 轻——是主力，创造出比典型 400 字重更自信但绝不咄咄逼人的文本感觉。超紧的行高（display 文本上为 0.96）将标题压缩成密集、有力的块状，而正文文本上宽裕的 1.50 行高则提供了通透的可读性。这种压缩的力量感与呼吸空间之间的张力，定义了 Superhuman 的排版风格。
+
+设计理念是通过最少的装饰展现最大的自信。使用温暖的奶油色按钮（`#e9e5dd`）代替明亮的 CTA，几乎完全摒弃边框和阴影，并以薰衣草紫（`#cbb7fb`）作为唯一的强调色。这是一个像奢侈品牌一样推销自己的生产力工具——每一个像素都物尽其用，没有任何纯粹的装饰。品牌命名规则甚至延伸到了颜色：主紫色被称为 "Mysteria"，游走于蓝色和紫色之间，具有刻意的模糊性。
+
+**关键特征：**
+- 深紫色渐变 Hero（`#1b1938`）与以白色为主的内容主体形成对比
+- Super Sans VF 可变字体，具有非标准粗细档位（460, 540, 600, 700）——介于常规字重类别之间
+- 极度紧凑的 display 行高（0.96），创造出紧凑、有力的标题
+- 暖奶油色（`#e9e5dd`）按钮，取代了明亮/高饱和度的 CTA——低调的奢华
+- 薰衣草紫（`#cbb7fb`）作为唯一的强调色——一种柔和、平易近人的紫色
+- 极简的 border-radius 比例：仅有 8px 和 16px——没有微圆角，没有胶囊形状
+- 产品截图主导内容——UI 本身以最少的周围装饰自我推销
+
+## 2. 颜色调色板与角色
+
+### Primary
+- **Mysteria Purple** (`#1b1938`)：Hero 渐变背景，跨越蓝紫色的深紫色——品牌最暗的表达
+- **Lavender Glow** (`#cbb7fb`)：主要的强调和高亮颜色——柔和的紫色，用于重点强调、装饰元素和交互高亮
+- **Charcoal Ink** (`#292827`)：浅色表面上的主要文本和标题颜色——带有微弱棕色调的温暖近黑色
+
+### Secondary & Accent
+- **Amethyst Link** (`#714cb6`)：带下划线的链接文本——中等紫色，在连接品牌调色板的同时暗示交互性
+- **Translucent White** (`color(srgb 1 1 1 / 0.95)`)：Hero 覆盖文本——95% 不透明度的近白色，用于深色表面上的深度分层
+- **Misted White** (`color(srgb 1 1 1 / 0.8)`)：深色表面上的次要文本——80% 不透明度的白色，用于 Hero 渐变上的层次感
+
+### Surface & Background
+- **Pure White** (`#ffffff`)：主要页面背景——所有内容部分的主导画布颜色
+- **Warm Cream** (`#e9e5dd`)：按钮背景——一种温暖、中性的奶油色，避免了纯灰色的冷感
+- **Parchment Border** (`#dcd7d3`)：卡片和分割线边框——带有轻微粉色调的暖浅灰色
+
+### Neutrals & Text
+- **Charcoal Ink** (`#292827`)：白色表面上的主要标题和正文文本
+- **Amethyst Link** (`#714cb6`)：内容中带有下划线装饰的链接
+- **Translucent White 95%** (`color(srgb 1 1 1 / 0.95)`)：深色/紫色表面上的主要文本
+- **Translucent White 80%** (`color(srgb 1 1 1 / 0.8)`)：深色/紫色表面上的次要文本
+
+### Semantic & Accent
+- Superhuman 在颜色使用上极其克制——Lavender Glow (`#cbb7fb`) 是唯一真正的强调色
+- 交互状态通过不透明度变化和下划线装饰来传达，而不是颜色变化
+- 暖奶油色按钮调色板避免了任何高饱和度的语义颜色（营销页面上没有可见的红色错误或绿色成功提示）
+
+### Gradient System
+- **Hero Gradient**：深紫色渐变，从 `#1b1938` 开始，穿过 Hero 部分过渡到紫色到暮光的色调——整个网站上最具戏剧性的视觉元素
+- **Content Transition**：渐变融入白色内容区域，随着用户滚动产生电影般的帷幕拉开效果
+- 营销网站上没有其他渐变——Hero 渐变是一个独特而戏剧性的姿态
+
+## 3. 排版规则
+
+### Font Family
+- **Display & Body**: `Super Sans VF` —— 具有非标准粗细轴的定制可变字体。Fallbacks: `system-ui, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue`
+- **Product UI**（品牌中提及）: `Messina Sans` / `Messina Serif` / `Messina Mono` 来自 Luzi Type —— 产品本身用于无衬线到衬线的过渡
+
+### Hierarchy
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Super Sans VF | 64px | 540 | 0.96 | 0px | 最大压缩，强有力的块状标题 |
+| Section Display | Super Sans VF | 48px | 460 | 0.96 | -1.32px | 用于部分介绍较轻的字重 |
+| Section Heading | Super Sans VF | 48px | 460 | 0.96 | 0px | 没有字距调整的替代部分标题 |
+| Feature Title | Super Sans VF | 28px | 540 | 1.14 | -0.63px | 特性块标题，更紧凑 |
+| Sub-heading Large | Super Sans VF | 26px | 460 | 1.30 | 0px | 内容子部分 |
+| Card Heading | Super Sans VF | 22px | 460 | 0.76 | -0.315px | 极度压缩的卡片标题 |
+| Body Heading | Super Sans VF | 20px | 460 | 1.20 | 0px | 粗体内容介绍 |
+| Body Heading Alt | Super Sans VF | 20px | 460 | 1.10 | -0.55px | 用于强调的更紧凑变体 |
+| Body Heading Relaxed | Super Sans VF | 20px | 460 | 1.25 | -0.4px | 更多呼吸空间的变体 |
+| Emphasis Body | Super Sans VF | 18px | 540 | 1.50 | -0.135px | 用于提示的中等字重正文 |
+| Body | Super Sans VF | 16px | 460 | 1.50 | 0px | 标准阅读文本——宽裕的行高 |
+| Button / UI Bold | Super Sans VF | 16px | 700 | 1.00 | 0px | 粗体 UI 元素 |
+| Button / UI Semi | Super Sans VF | 16px | 600 | 1.00 | 0px | 半粗体导航和标签 |
+| Nav Link | Super Sans VF | 16px | 460 | 1.20 | 0px | 导航项 |
+| Caption | Super Sans VF | 14px | 500 | 1.20 | -0.315px | 小标签，元数据 |
+| Caption Semi | Super Sans VF | 14px | 600 | 1.29 | 0px | 强调的小文本 |
+| Caption Body | Super Sans VF | 14px | 460 | 1.50 | 0px | 小正文文本 |
+| Micro Label | Super Sans VF | 12px | 700 | 1.50 | 0px | 最小文本——徽章，标签 |
+
+### Principles
+- **非标准字重轴**：460 和 540 字重刻意介于常规的 Regular (400) 和 Medium (500) 之间，创造出一种以自信的方式让人感觉微妙“不同”的排版纹理——比预期的稍重，但绝不算粗体
+- **极端的 display 压缩**：0.96 行高的 Display 标题几乎使行与行重叠，创造出感觉具有建筑感的密集排版块
+- **正文的宽裕感**：相比之下，1.50 行高的正文文本极其宽敞，确保在密集的标题冲击后能舒适阅读
+- **选择性的负字距**：字间距是经过精心应用的——48px 标题上为 -1.32px，28px 特性上为 -0.63px，但正文文本上为 0px。文本越大，字距越紧
+- **可变字体效率**：单一字体文件即可服务于所有字重变化（460–700），实现平滑的字重过渡和微调
+
+## 4. 组件样式
+
+### Buttons
+- **Warm Cream Primary**：`#e9e5dd` 背景，Charcoal Ink (`#292827`) 文本，微妙的圆角（8px radius），无可见边框。标志性的 CTA——温暖、柔和、奢华而不具侵略性
+- **Dark Primary**（在浅色部分）：`#292827` 背景配白色文本，8px radius——暖奶油色的反转，用于对比部分
+- **Ghost / Text Link**：无背景，下划线装饰，根据上下文使用 Amethyst Link (`#714cb6`) 或 Charcoal Ink 颜色
+- **Hero CTA**：深紫色渐变上的暖奶油色——奶油色在 `#1b1938` 背景下引人注目
+- **Hover**：微妙的不透明度或亮度变化——没有戏剧性的颜色转换
+
+### Cards & Containers
+- **Content Card**：白色背景，Parchment Border (`#dcd7d3`) 1px 边框，16px border-radius——干净极简
+- **Dark Surface Card**：深色部分上的 `#292827` 边框，保持温暖中性的基调
+- **Hero Surface**：紫色渐变上的半透明白色边框（`rgba(255, 255, 255, 0.2)`）——幽灵般的容器
+- **Product Screenshot Cards**：具有清晰边缘、极简边框的大型产品 UI 图像——产品本身即是视觉核心
+- **Hover**：最小的状态变化——一致与平静胜过花哨的交互
+
+### Inputs & Forms
+- 营销网站上的表单存在感极低——Superhuman 直接引导用户注册
+- 带有 Charcoal Ink 边框和暖色调占位符文本的深色边框输入框
+- 聚焦：边框强调增加，可能从 Parchment Border 转移到 Charcoal Ink
+
+### Navigation
+- **Top nav**：内容部分采用干净的白色背景，Hero 渐变上透明
+- **Nav links**：Super Sans VF 16px，460/600 字重用于层次结构
+- **CTA button**：导航栏中的 Warm Cream (`#e9e5dd`) 胶囊按钮——微妙，不抢眼
+- **Sticky behavior**：导航栏在滚动时保持固定，并带有背景过渡
+- **Mobile**：折叠为汉堡菜单，带有简化布局
+
+### Image Treatment
+- **Product screenshots**：展示电子邮件界面的巨大、主导的产品 UI 图像——产品即是主角
+- **Lifestyle photography**：Hero 区域中的单张戏剧性图像（紫/红渐变背景下的剪影）——具有电影感和编辑风格
+- **Full-width presentation**：截图跨越容器全宽，带有微妙的阴影或无边框
+- **Aspect ratios**：产品截图采用宽横向比例（约 16:9）
+- **Color integration**：截图经过精心调色，以与紫色到白色的页面流和谐融合
+
+### Testimonial / Social Proof
+- “Your Superhuman suite”部分，包含产品特性网格
+- 特性描述与产品截图配对——通过演示而非引述来证明
+- 干净的网格布局，卡片尺寸保持一致
+
+## 5. 布局原则
+
+### Spacing System
+- **Base unit**：8px
+- **Scale**：2px, 4px, 6px, 8px, 12px, 16px, 18px, 20px, 24px, 28px, 32px, 36px, 40px, 48px, 56px
+- **Section padding**：主要部分之间的垂直间距为 48px–80px
+- **Card padding**：内部间距为 16px–32px
+- **Component gaps**：相关元素之间的间距为 8px–16px
+
+### Grid & Container
+- **Max width**：内容容器约 1200px，居中
+- **Column patterns**：全宽 Hero，用于关键信息的居中单列，用于特性卡片的 2-3 列网格
+- **特性 grid**：“Your Superhuman suite”产品展示采用均匀的列分布
+
+### Whitespace Philosophy
+- **自信的留白**：部分之间宽裕的留白彰显了高端定位——每个元素都有呼吸的空间
+- **以产品为内容**：巨大的产品截图占据了较差网站会用营销文案填充的空间
+- **渐进的密度**：Hero 部分宽敞且具有电影感，内容部分随着特性网格变得更加密集，然后在 CTA 处再次开放
+
+### Border Radius Scale
+- **8px**：按钮，行内元素（`span`, `button`, `div`）——通用的小圆角
+- **16px**：卡片，链接，较大的容器（`a`, 卡片元素）——通用的大圆角
+- 整个系统中仅有两种圆角——极度的极简主义。没有微圆角（2px），没有胶囊形状（50px+）
+
+## 6. 深度与层级
+
+| 层级 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Level 0 (Flat) | 无阴影，白色背景 | 主要页面画布，大多数内容表面 |
+| Level 1 (Border) | `1px solid #dcd7d3` (Parchment Border) | 卡片容器，部分分割线 |
+| Level 2 (Dark Border) | `1px solid #292827` | 页眉元素，深色部分分割线 |
+| Level 3 (Glow) | 微妙的阴影（检测到来自 6 个阴影定义） | 产品截图容器，悬浮的卡片 |
+| Level 4 (Hero Depth) | `rgba(255, 255, 255, 0.2)` 透明边框 | 深紫色渐变 Hero 上的元素 |
+
+### Shadow Philosophy
+Superhuman 的层级系统在营销网站上极其克制。深度主要通过以下方式传达：
+- **Border containment**：1px 的暖色调边框（`#dcd7d3`）产生温和的隔离
+- **Color contrast**：Hero 渐变通过颜色变化而非阴影创造出巨大的深度
+- **Product screenshots**：截图本身通过在扁平页面中展示分层的 UI 来创造深度
+- **Opacity layering**：Hero 渐变上的半透明白色创造了富有氛围的深度层
+
+### Decorative Depth
+- **Hero gradient**：`#1b1938` → 白色渐变过渡是主要的深度手段——一种电影般的帷幕效果
+- **Lavender accents**：`#cbb7fb` Lavender Glow 元素漂浮在深色渐变之上，营造出星空/氛围感
+- **No glassmorphism**：尽管有半透明边框，但没有模糊/磨砂玻璃效果
+- **Photography depth**：Hero 剪影图像创造了自然的氛围深度，无需人工 CSS
+
+## 7. 宜与忌
+
+### 宜
+- 使用 Super Sans VF 字重 460 作为默认——它比 regular 稍重，这是该品牌的排版签名
+- 保持 display 标题为 0.96 行高——这种压缩是刻意且有力的
+- 为主要按钮使用 Warm Cream (`#e9e5dd`)——不是白色，不是灰色，特别是温暖的奶油色
+- 将 border-radius 限制在 8px（小）和 16px（大）——这种二元的圆角系统是经过深思熟虑的
+- 仅在标题上应用负字间距 (-0.63px 到 -1.32px)——正文文本保持在 0px
+- 使用 Lavender Glow (`#cbb7fb`) 作为唯一的强调色——这是从中性调色板中唯一的颜色偏离
+- 让产品截图成为主要的视觉内容——UI 本身就是最好的展示
+- 保持戏剧性的 Hero 渐变作为独特的姿态——页面其余部分为白色
+
+### 忌
+- 使用常规字体粗细 (400, 500, 600)——Superhuman 的 460 和 540 刻意位于标准档位之间
+- 添加明亮或高饱和度的 CTA 颜色（蓝色，绿色，红色）——按钮刻意使用 Warm Cream 或 Charcoal 进行柔和化处理
+- 在 Lavender Glow 之外引入额外的强调色——调色板刻意限制为一种强调色
+- 慷慨地应用阴影——深度来自边框、颜色对比和摄影，而不是 box-shadows
+- 在正文文本上使用紧凑的行高——display 是压缩的 (0.96)，但正文是宽裕的 (1.50)
+- 添加装饰性元素、图标或插图——Superhuman 依赖于产品 UI 和极简排版
+- 创建胶囊形按钮——系统使用 8px radius，而不是圆角胶囊
+- 为文本使用纯黑（`#000000`）——Charcoal Ink (`#292827`) 更温暖、更柔和
+
+## 8. 响应式行为
+
+### Breakpoints
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Mobile | <768px | 单列，Hero 文本减小至 ~36px，堆叠的特性卡片，汉堡导航 |
+| Tablet | 768px–1024px | 开始出现 2 列特性网格，Hero 文本 ~48px，导航部分可见 |
+| Desktop | 1024px–1440px | 完整布局，64px Hero display，多列特性网格，完整导航 |
+| Large Desktop | >1440px | 最大宽度的居中容器，宽裕的侧边距 |
+
+### Touch Targets
+- 按钮：8px radius 配有舒适的 padding——满足触控目标指南
+- 导航链接：16px 文本配以充足的周围 padding
+- 移动端 CTA：全宽 Warm Cream 按钮，便于拇指触达
+- 链接：下划线装饰提供清晰的点击反馈
+
+### Collapsing Strategy
+- **导航**：完整的横向导航 → 移动端上的汉堡菜单
+- **Hero text**：64px display → 48px → ~36px 跨越断点变化
+- **特性 grid**：多列产品展示 → 2 列 → 单堆叠列
+- **Product screenshots**：在容器内缩放，保持横向比例
+- **Section spacing**：按比例减小——宽裕的桌面边距在移动端上被压缩
+
+### Image Behavior
+- 产品截图保持纵横比进行响应式缩放
+- Hero 剪影图像被裁剪或缩放——保持戏剧性的构图
+- 无 art direction 变化——所有断点上的构图相同
+- 折叠下方（below-fold）的产品截图可能采用懒加载
+
+## 9. Agent Prompt 指南
+
+### Quick Color Reference
+- Hero Background: Mysteria Purple (`#1b1938`)
+- Primary Text (浅色背景): Charcoal Ink (`#292827`)
+- Primary Text (深色背景): Translucent White (`color(srgb 1 1 1 / 0.95)` — 使用 `rgba(255,255,255,0.95)`)
+- Accent: Lavender Glow (`#cbb7fb`)
+- Button Background: Warm Cream (`#e9e5dd`)
+- Border: Parchment Border (`#dcd7d3`)
+- Link: Amethyst Link (`#714cb6`)
+- Page Background: Pure White (`#ffffff`)
+
+### 示例 Component Prompts
+- "创建一个带有深紫色渐变背景 (#1b1938) 的 hero 部分，64px Super Sans 标题（字重 540），行高 0.96，95% 不透明度的白色文本，以及一个暖奶油色按钮 (#e9e5dd, 8px radius, #292827 文本)"
+- "设计一张带有白色背景，1px #dcd7d3 边框，16px radius，20px Super Sans 标题（字重 460），以及 16px 正文文本（字重 460，行高 1.50，颜色为 #292827）的特性卡片"
+- "构建一个带有白色背景、16px 字重 460 的 Super Sans 链接、暖奶油色 CTA 按钮 (#e9e5dd, 8px radius)、sticky 定位的导航栏"
+- "创建一个产品展示部分，配有居中的 48px 标题（字重 460, -1.32px letter-spacing, #292827），下方是一个大尺寸的产品截图，背景为纯白"
+- "设计一个使用 Lavender Glow (#cbb7fb) 背景，8px radius，12px 粗体文本（字重 700）的强调徽章，用于类别标签"
+
+### Iteration Guide
+完善使用此设计系统生成的现有屏幕时：
+1. 验证正文的字体粗细是否为 460（而不是 400 或 500），display 是否为 540——非标准字重是必不可少的
+2. 检查 display 行高是否为 0.96——如果标题看起来间距太大，那就错了
+3. 确保按钮使用 Warm Cream (#e9e5dd) 而不是纯白色或灰色——这种温暖感微妙但至关重要
+4. 确认唯一的强调色是 Lavender Glow (#cbb7fb)——不应出现其他色调
+5. 整体基调应该让人感觉像是一个奢侈品的展示——极简、自信，并在 Hero 中带有一个戏剧性的颜色姿态