@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,322 @@
+# Design System: Notion
+
+
+> **Hermes Agent — Implementation 说明**
+>
+> 原网站使用专有字体。对于独立的 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. 视觉主题与氛围
+
+Notion 的网站体现了该工具本身的哲学：一块不会碍事的空白画布。该设计系统建立在温暖的中性色之上，而非冷灰色，创造出一种极其平易近人的极简主义，感觉就像高质量的纸张，而不是毫无生气的玻璃。页面画布是纯白色的（`#ffffff`），但文本并不是纯黑色的——它是一种温暖的接近黑色的颜色（`rgba(0,0,0,0.95)`），在不知不觉中柔化了阅读体验。暖灰色阶（`#f6f5f4`、`#31302e`、`#615d59`、`#a39e98`）带有微妙的黄棕色调，赋予界面一种触手可及的、近乎模拟的温暖感。
+
+定制的 NotionInter 字体（经过修改的 Inter）是该系统的骨干。在 display 尺寸（64px）下，它使用了激进的负字间距（-2.125px），使标题感觉紧凑而精确。字重范围比典型系统更广：400 用于正文，500 用于 UI 元素，600 用于半粗体标签，700 用于 display 标题。OpenType 特性 `"lnum"`（lining numerals）和 `"locl"`（localized forms）在较大文本上启用，增加了排版的精致感，经得起仔细阅读。
+
+让 Notion 视觉语言与众不同的是它的边框哲学。Notion 不使用粗重的边框或阴影，而是使用超薄的 `1px solid rgba(0,0,0,0.1)` 边框——这些边框就像呢喃一样，几乎难以察觉的分割线创造了结构而没有增加重量。阴影系统同样克制：多层堆叠的累计透明度从不超过 0.05，创造出能感觉到而不是看到的深度。
+
+**关键特征：**
+- NotionInter（修改后的 Inter）在 display 尺寸下使用负字间距（64px 时为 -2.125px）
+- 暖中性色调：灰色带有黄棕色调（`#f6f5f4` 暖白，`#31302e` 暖黑）
+- 通过 `rgba(0,0,0,0.95)` 实现的接近黑色的文本——不是纯黑，创造了微妙的温暖感
+- 超薄边框：通篇使用 `1px solid rgba(0,0,0,0.1)`——呢喃般重量的分隔线
+- 透明度低于 0.05 的多层阴影堆叠，营造若有若无的深度
+- Notion Blue（`#0075de`）作为 CTA 和交互元素的单一强调色
+- 带有浅蓝色背景的 Pill 徽章（9999px 圆角），用于状态指示器
+- 8px 基础间距单位，具有有机的、非僵硬的比例
+
+## 2. 色彩调色板与角色
+
+### Primary
+- **Notion Black** (`rgba(0,0,0,0.95)` / `#000000f2`)：主文本、标题、正文内容。95% 的不透明度在不牺牲可读性的情况下柔化了纯黑色。
+- **Pure White** (`#ffffff`)：页面背景、卡片表面、蓝色按钮上的文本。
+- **Notion Blue** (`#0075de`)：主要 CTA、链接颜色、交互强调色——核心 UI 框架中唯一的高饱和度颜色。
+
+### Brand Secondary
+- **Deep Navy** (`#213183`)：次要品牌色，少量用于强调和深色特性区块。
+- **Active Blue** (`#005bab`)：按钮的 active/pressed 状态——Notion Blue 的较深变体。
+
+### Warm Neutral Scale
+- **Warm White** (`#f6f5f4`)：背景表面色调、区块交替、微妙的卡片填充。黄色底调是关键。
+- **Warm Dark** (`#31302e`)：深色表面背景、深色区块文本。比标准灰色更暖。
+- **Warm Gray 500** (`#615d59`)：次要文本、描述、柔和的标签。
+- **Warm Gray 300** (`#a39e98`)：Placeholder 文本、disabled 状态、caption 文本。
+
+### Semantic Accent Colors
+- **Teal** (`#2a9d99`)：Success 状态、积极指标。
+- **Green** (`#1aae39`)：确认、完成徽章。
+- **Orange** (`#dd5b00`)：Warning 状态、注意力指标。
+- **Pink** (`#ff64c8`)：装饰性强调、特性高亮。
+- **Purple** (`#391c57`)：Premium 特性、深层强调。
+- **Brown** (`#523410`)：泥土系强调色、温暖特性区块。
+
+### Interactive
+- **Link Blue** (`#0075de`)：主链接颜色，hover 时显示下划线。
+- **Link Light Blue** (`#62aef0`)：用于深色背景的较浅链接变体。
+- **Focus Blue** (`#097fe8`)：交互元素的 Focus ring。
+- **Badge Blue Bg** (`#f2f9ff`)：Pill 徽章背景，浅蓝色表面。
+- **Badge Blue Text** (`#097fe8`)：Pill 徽章文本，为了可读性使用较深的蓝色。
+
+### Shadows & Depth
+- **Card Shadow** (`rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`)：多层卡片悬浮。
+- **Deep Shadow** (`rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px`)：用于模态框和精选内容的五层深度悬浮。
+- **Whisper Border** (`1px solid rgba(0,0,0,0.1)`)：标准分隔边框——卡片、分隔符、区块。
+
+## 3. 排版规则
+
+### Font Family
+- **Primary**：`NotionInter`，带有 fallbacks：`Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol`
+- **OpenType 特性**：在 display 和 heading 文本上启用 `"lnum"`（lining numerals）和 `"locl"`（localized forms）。
+
+### 层级
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | NotionInter | 64px (4.00rem) | 700 | 1.00 (tight) | -2.125px | 最大压缩，广告牌式标题 |
+| Display Secondary | NotionInter | 54px (3.38rem) | 700 | 1.04 (tight) | -1.875px | 次级 Hero，特性标题 |
+| Section Heading | NotionInter | 48px (3.00rem) | 700 | 1.00 (tight) | -1.5px | 特性区块标题，带有 `"lnum"` |
+| Sub-heading Large | NotionInter | 40px (2.50rem) | 700 | 1.50 | normal | 卡片标题，特性子区块 |
+| Sub-heading | NotionInter | 26px (1.63rem) | 700 | 1.23 (tight) | -0.625px | 区块副标题，内容标题 |
+| Card Title | NotionInter | 22px (1.38rem) | 700 | 1.27 (tight) | -0.25px | 特性卡片，列表标题 |
+| Body Large | NotionInter | 20px (1.25rem) | 600 | 1.40 | -0.125px | 简介，特性描述 |
+| Body | NotionInter | 16px (1.00rem) | 400 | 1.50 | normal | 标准阅读文本 |
+| Body Medium | NotionInter | 16px (1.00rem) | 500 | 1.50 | normal | 导航，强调的 UI 文本 |
+| Body Semibold | NotionInter | 16px (1.00rem) | 600 | 1.50 | normal | 强标签，Active 状态 |
+| Body Bold | NotionInter | 16px (1.00rem) | 700 | 1.50 | normal | 正文大小的标题 |
+| Nav / Button | NotionInter | 15px (0.94rem) | 600 | 1.33 | normal | 导航链接，按钮文本 |
+| Caption | NotionInter | 14px (0.88rem) | 500 | 1.43 | normal | 元数据，次要标签 |
+| Caption Light | NotionInter | 14px (0.88rem) | 400 | 1.43 | normal | 正文说明，描述 |
+| Badge | NotionInter | 12px (0.75rem) | 600 | 1.33 | 0.125px | Pill 徽章，标签，状态标签 |
+| Micro Label | NotionInter | 12px (0.75rem) | 400 | 1.33 | 0.125px | 小型元数据，时间戳 |
+
+### 原则
+- **按比例压缩**：NotionInter 在 display 尺寸下使用 -2.125px 字间距（64px），逐渐放宽到 26px 时的 -0.625px 和 16px 时的 normal。这种压缩在标题处创造了密度，同时在正文尺寸下保持了可读性。
+- **四字重系统**：400（正文/阅读），500（UI/交互），600（强调/导航），700（标题/display）。与大多数系统相比，更宽的字重范围允许细致的层级划分。
+- **暖缩放**：行高随着尺寸增加而收紧——正文（16px）为 1.50，副标题为 1.23-1.27，display 为 1.00-1.04。这创造了更密集、更有冲击力的标题。
+- **Badge 微调**：12px 的 badge 文本使用正字间距（0.125px）——系统中唯一的正字间距，创造了更宽、更易读的小文本。
+
+## 4. 组件样式
+
+### 按钮
+
+**Primary Blue**
+- Background：`#0075de`（Notion Blue）
+- Text：`#ffffff`
+- Padding：8px 16px
+- Radius：4px（subtle）
+- Border：`1px solid transparent`
+- Hover：背景变暗至 `#005bab`
+- Active：scale(0.9) 变换
+- Focus：`2px solid` focus outline，`var(--shadow-level-200)` shadow
+- 用途：主要 CTA（"Get Notion free"、"Try it"）
+
+**Secondary / Tertiary**
+- Background：`rgba(0,0,0,0.05)`（半透明暖灰）
+- Text：`#000000`（near-black）
+- Padding：8px 16px
+- Radius：4px
+- Hover：文本颜色改变，scale(1.05)
+- Active：scale(0.9) 变换
+- 用途：次要操作，表单提交
+
+**Ghost / Link Button**
+- Background：transparent
+- Text：`rgba(0,0,0,0.95)`
+- Decoration：hover 时显示下划线
+- 用途：第三级操作，内联链接
+
+**Pill Badge Button**
+- Background：`#f2f9ff`（浅蓝）
+- Text：`#097fe8`
+- Padding：4px 8px
+- Radius：9999px（全 Pill）
+- Font：12px weight 600
+- 用途：状态徽章、特性标签、"New" 标签
+
+### 卡片与容器
+- Background：`#ffffff`
+- Border：`1px solid rgba(0,0,0,0.1)`（whisper border）
+- Radius：12px（标准卡片），16px（精选/Hero 卡片）
+- Shadow：`rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`
+- Hover：微妙的阴影加深
+- 图片卡片：顶部 12px 圆角，图片填充上半部分
+
+### 输入框与表单
+- Background：`#ffffff`
+- Text：`rgba(0,0,0,0.9)`
+- Border：`1px solid #dddddd`
+- Padding：6px
+- Radius：4px
+- Focus：蓝色 outline ring
+- Placeholder：暖灰 `#a39e98`
+
+### 导航
+- 白色背景上的干净水平导航，不吸顶
+- 品牌 logo 左对齐（33x34px 图标 + 字标）
+- Links：NotionInter 15px weight 500-600，near-black 文本
+- Hover：颜色变为 `var(--color-link-primary-text-hover)`
+- CTA：蓝色 Pill 按钮（"Get Notion free"）右对齐
+- 移动端：折叠为汉堡菜单
+- 带有多级分类菜单的产品下拉菜单
+
+### 图片处理
+- 产品截图带有 `1px solid rgba(0,0,0,0.1)` 边框
+- 顶部圆角图片：`12px 12px 0px 0px` radius
+- 仪表盘/工作区预览截图主导特性区块
+- Hero 插图（装饰性角色插图）背后的暖色渐变背景
+
+### 独特组件
+
+**带有插图的特性卡片**
+- 大型插图标题（神奈川冲浪里、产品 UI 截图）
+- 12px radius 卡片，带有 whisper border
+- 标题为 22px weight 700，描述为 16px weight 400
+- 暖白（`#f6f5f4`）背景变体，用于交替区块
+
+**Trust Bar / Logo Grid**
+- 企业 Logo（受信任的团队区块）使用其品牌颜色
+- 水平滚动或网格布局，带有团队数量
+- 指标显示：大数字 + 描述模式
+
+**指标卡片**
+- 大数字显示（例如 "$4,200 ROI"）
+- 指标使用 NotionInter 40px+ weight 700
+- 下方的说明使用暖灰色正文文本
+- 带 Whisper 边框的卡片容器
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 比例：2px, 3px, 4px, 5px, 6px, 7px, 8px, 11px, 12px, 14px, 16px, 24px, 32px
+- 非僵硬的有机比例，带有小数值（5.6px、6.4px）用于微调
+
+### 网格与容器
+- 最大内容宽度：约 1200px
+- Hero：居中单列，带有充足的顶部 padding（80-120px）
+- 特性区块：用于卡片的 2-3 列网格
+- 全宽暖白（`#f6f5f4`）区块背景，用于交替展示
+- 代码/仪表盘截图带有 Whisper 边框容器
+
+### 留白哲学
+- **慷慨的垂直节奏**：主要区块间保持 64-120px 间距。Notion 利用巨大的垂直内边距让内容呼吸。
+- **暖色交替**：白色区块与暖白（`#f6f5f4`）区块交替，在没有刺眼颜色破坏的情况下创造温和的视觉节奏。
+- **内容优先的密度**：正文文本块很紧凑（行高 1.50），但被充足的 margin 包围，在白色的海洋中创造出可读的内容岛屿。
+
+### 边框圆角比例
+- Micro (4px)：按钮、输入框、功能性交互元素
+- Subtle (5px)：链接、列表项、菜单项
+- Standard (8px)：小卡片、容器、内联元素
+- Comfortable (12px)：标准卡片、特性容器、图片顶部
+- Large (16px)：Hero 卡片、精选内容、促销区块
+- Full Pill (9999px)：Badge、Pill、状态指示器
+- Circle (100%)：Tab 指示器、头像
+
+## 6. 深度与悬浮
+
+| 等级 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影，无边框 | 页面背景，文本块 |
+| Whisper (Level 1) | `1px solid rgba(0,0,0,0.1)` | 标准边框，卡片轮廓，分隔线 |
+| Soft Card (Level 2) | 4层阴影堆叠（最大不透明度 0.04） | 内容卡片，特性块 |
+| Deep Card (Level 3) | 5层阴影堆叠（最大不透明度 0.05，52px 模糊） | 模态框，精选面板，Hero 元素 |
+| Focus (Accessibility) | `2px solid var(--focus-color)` outline | 所有交互元素上的键盘 focus |
+
+**阴影哲学**：Notion 的阴影系统使用了具有极低个体不透明度（0.01 到 0.05）的多层，累积成柔和、自然的悬浮感。4 层卡片阴影的模糊范围从 1.04px 到 18px，创造了深度的渐变，而不是单一的生硬阴影。5 层深度阴影在 0.05 不透明度下扩展到 52px 模糊，产生的环境光遮蔽感觉像自然光而不是计算机生成的深度。这种分层方法让元素感觉像是嵌入在页面中，而不是悬浮在页面之上。
+
+### 装饰性深度
+- Hero 区块：装饰性角色插图（俏皮、手绘风格）
+- 区块交替：白色到暖白（`#f6f5f4`）背景转换
+- 没有生硬的区块边框——分离感来自背景颜色变化和间距
+
+## 7. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Mobile Small | <400px | 紧凑单列，最小 padding |
+| Mobile | 400-600px | 标准移动端，堆叠布局 |
+| Tablet Small | 600-768px | 开始出现 2 列网格 |
+| Tablet | 768-1080px | 完整卡片网格，扩展 padding |
+| Desktop Small | 1080-1200px | 标准桌面布局 |
+| Desktop | 1200-1440px | 完整布局，最大内容宽度 |
+| Large Desktop | >1440px | 居中，慷慨的 margin |
+
+### 触摸目标
+- 按钮使用舒适的 padding（垂直 8px-16px）
+- 导航链接 15px，带有充足间距
+- Pill 徽章具有 8px 水平 padding 以满足触摸目标要求
+- 移动菜单切换使用标准汉堡按钮
+
+### 折叠策略
+- Hero：64px display -> 缩放至 40px -> 移动端 26px，保持比例化的字间距
+- 导航：水平链接 + 蓝色 CTA -> 汉堡菜单
+- 特性卡片：3 列 -> 2 列 -> 单列堆叠
+- 产品截图：通过响应式图片保持纵横比
+- Trust bar Logo：网格 -> 移动端水平滚动
+- 页脚：多列 -> 堆叠单列
+- 区块间距：80px+ -> 移动端 48px
+
+### 图片行为
+- 工作区截图在所有尺寸下都保持 Whisper 边框
+- Hero 插图按比例缩放
+- 产品截图使用响应式图片，保持一致的边框圆角
+- 全宽暖白区块保持边缘到边缘的处理
+
+## 8. 无障碍与状态
+
+### Focus 系统
+- 所有交互元素都会显示可见的 Focus 指示器
+- Focus outline：`2px solid` 带有 focus 颜色 + shadow level 200
+- 所有交互组件均支持 Tab 键导航
+- 高对比度文本：白底接近黑色超过 WCAG AAA（比率 >14:1）
+
+### 交互状态
+- **默认**：带有 whisper 边框的标准外观
+- **Hover**：文本颜色变化，按钮 scale(1.05)，链接显示下划线
+- **Active/Pressed**：scale(0.9) 变换，较深的背景变体
+- **Focus**：蓝色 outline ring，带有阴影强化
+- **Disabled**：暖灰（`#a39e98`）文本，降低不透明度
+
+### 颜色对比度
+- Primary text (rgba(0,0,0,0.95)) 在白色上：约 18:1 比例
+- Secondary text (#615d59) 在白色上：约 5.5:1 比例（WCAG AA）
+- Blue CTA (#0075de) 在白色上：约 4.6:1 比例（针对大文本的 WCAG AA）
+- Badge text (#097fe8) 在 badge bg (#f2f9ff) 上：约 4.5:1 比例（针对大文本的 WCAG AA）
+
+## 9. Agent Prompt 指南
+
+### 快速颜色参考
+- Primary CTA：Notion Blue (`#0075de`)
+- Background：Pure White (`#ffffff`)
+- Alt Background：Warm White (`#f6f5f4`)
+- Heading text：Near-Black (`rgba(0,0,0,0.95)`)
+- Body text：Near-Black (`rgba(0,0,0,0.95)`)
+- Secondary text：Warm Gray 500 (`#615d59`)
+- Muted text：Warm Gray 300 (`#a39e98`)
+- Border：`1px solid rgba(0,0,0,0.1)`
+- Link：Notion Blue (`#0075de`)
+- Focus ring：Focus Blue (`#097fe8`)
+
+### 示例组件 Prompts
+- "Create a hero section on white background. Headline at 64px NotionInter weight 700, line-height 1.00, letter-spacing -2.125px, color rgba(0,0,0,0.95). Subtitle at 20px weight 600, line-height 1.40, color #615d59. Blue CTA button (#0075de, 4px radius, 8px 16px padding, white text) and ghost button (transparent bg, near-black text, underline on hover)."
+- "Design a card: white background, 1px solid rgba(0,0,0,0.1) border, 12px radius. Use shadow stack: rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px. Title at 22px NotionInter weight 700, letter-spacing -0.25px. Body at 16px weight 400, color #615d59."
+- "Build a pill badge: #f2f9ff background, #097fe8 text, 9999px radius, 4px 8px padding, 12px NotionInter weight 600, letter-spacing 0.125px."
+- "Create navigation: white header. NotionInter 15px weight 600 for links, near-black text. Blue pill CTA 'Get Notion free' right-aligned (#0075de bg, white text, 4px radius)."
+- "Design an alternating section layout: white sections alternate with warm white (#f6f5f4) sections. Each section has 64-80px vertical padding, max-width 1200px centered. Section heading at 48px weight 700, line-height 1.00, letter-spacing -1.5px."
+
+### 迭代指南
+1. 始终使用暖中性色——Notion 的灰色带有黄棕色调（#f6f5f4、#31302e、#615d59、#a39e98），绝不要用蓝灰色
+2. 字间距随字号缩放：64px 时 -2.125px，54px 时 -1.875px，26px 时 -0.625px，16px 时 normal
+3. 四种字重：400（read），500（interact），600（emphasize），700（announce）
+4. 边框是呢喃：1px solid rgba(0,0,0,0.1)——绝不要更重
+5. 阴影使用 4-5 层，个体不透明度绝不超过 0.05
+6. 暖白（#f6f5f4）区块背景对于视觉节奏至关重要
+7. Pill 徽章（9999px）用于状态/标签，4px 圆角用于按钮和输入框
+8. Notion Blue（#0075de）是核心 UI 中唯一的高饱和度颜色——请 sparingly 地用于 CTA 和链接

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

@@ -0,0 +1,306 @@
+# Design System: NVIDIA
+
+
+> **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. 视觉主题与氛围
+
+NVIDIA 的网站是一种高对比度、技术至上的体验，通过克制的设计传达出原始的计算能力。页面建立在鲜明的黑色（`#000000`）和白色（`#ffffff`）基础上，并以 NVIDIA 标志性的绿色（`#76b900`）作为点缀——这种颜色非常独特，起到了品牌指纹的作用。这不是大自然中那种郁郁葱葱的绿色；它是 GPU 渲染光线时那种带电荷的、偏黄绿的绿色，介于/chartreuse/和/kelly green/之间，能让任何科技领域的人立刻联想到“NVIDIA”。
+
+定制的 NVIDIA-EMEA 字体家族（以 Arial 和 Helvetica 作为后备字体）营造出一种干净、工业化的排版风格。36px 粗体且行高紧凑（1.25）的标题创建出密集、权威的文本块。这种字体缺乏硅谷无衬线字体的几何趣味性——它是欧洲风格的、务实的、专注于工程的。正文文字大小为 15-16px，阅读体验舒适但不过分宽裕，维持了一种屏幕空间像 GPU 内存一样被高度优化的感觉。
+
+将 NVIDIA 的设计与其他深色背景科技网站区分开来的是对绿色点缀的自律使用。`#76b900` 出现在边框（`2px solid #76b900`）、链接下划线（`underline 2px rgb(118, 185, 0)`）和 CTA 中——但绝不会作为背景或主要内容区域的大面积底色。这里的绿色是一种信号，而不是一种表面底色。结合深沉的阴影系统（`rgba(0, 0, 0, 0.3) 0px 0px 5px`）和极小的圆角（1-2px），整体效果就像是用像素渲染出来的精密工程硬件。
+
+**关键特征：**
+- NVIDIA Green（`#76b900`）作为纯粹的点缀——仅用于边框、下划线和交互高亮
+- 以黑色（`#000000`）为主的背景，深色区域使用白色（`#ffffff`）文字
+- 定制的 NVIDIA-EMEA 字体，后备为 Arial/Helvetica——工业风、欧洲风、干净
+- 紧凑的行高（标题为 1.25），创建出密集、权威的文本块
+- 极小的圆角（1-2px）——整体呈现锐利、工程化的直角
+- 绿色边框按钮（`2px solid #76b900`）作为主要的交互模式
+- 字重为 900 的 Font Awesome 6 Pro/Sharp 图标系统，提供锐利的图标
+- 多框架架构（PrimeReact, Fluent UI, Element Plus）支持丰富的交互组件
+
+## 2. 调色板与角色
+
+### 主品牌色
+- **NVIDIA Green** (`#76b900`)：标志色——用于边框、链接下划线、CTA 轮廓、激活指示器。绝不用于大面积填充。
+- **True Black** (`#000000`)：主要页面背景，浅色表面上的文字，主导色调。
+- **Pure White** (`#ffffff`)：深色背景上的文字，浅色版块的背景，卡片表面。
+
+### 扩展品牌调色板
+- **NVIDIA Green Light** (`#bff230`)：明亮的柠檬色点缀，用于高亮和 hover 状态。
+- **Orange 400** (`#df6500`)：暖色点缀，用于警报、特色徽章或与能源相关的场景。
+- **Yellow 300** (`#ef9100`)：次要的暖色点缀，产品类别高亮。
+- **Yellow 050** (`#feeeb2`)：浅暖色表面，用于提示框背景。
+
+### 状态与语义
+- **Red 500** (`#e52020`)：错误状态、破坏性操作、严重警报。
+- **Red 800** (`#650b0b`)：深红色，用于严重的警告背景。
+- **Green 500** (`#3f8500`)：成功状态、积极指示器（比品牌绿色更深）。
+- **Blue 700** (`#0046a4`)：信息类点缀，链接 hover 的替代色。
+
+### 装饰色
+- **Purple 800** (`#4d1368`)：用于渐变末端、高端/AI 场景的深紫色。
+- **Purple 100** (`#f9d4ff`)：浅紫色表面色调。
+- **Fuchsia 700** (`#8c1c55`)：浓郁的点缀色，用于特别促销或精选内容。
+
+### 中性灰阶
+- **Gray 300** (`#a7a7a7`)：柔和的文字，禁用的标签。
+- **Gray 400** (`#898989`)：辅助文字，元数据。
+- **Gray 500** (`#757575`)：三级文字，占位符，页脚。
+- **Gray Border** (`#5e5e5e`)：细微的边框，分割线。
+- **Near Black** (`#1a1a1a`)：深色表面，黑色页面上的卡片背景。
+
+### 交互状态
+- **Link 默认 (dark bg)** (`#ffffff`)：深色背景上的白色链接。
+- **Link 默认 (light bg)** (`#000000`)：浅色背景上的黑色链接，带绿色下划线。
+- **Link Hover** (`#3860be`)：所有链接变体在 hover 时变为蓝色。
+- **Button Hover** (`#1eaedb`)：按钮 hover 状态的青色高亮。
+- **Button Active** (`#007fff`)：激活/按下按钮状态的亮蓝色。
+- **Focus Ring** (`#000000 solid 2px`)：键盘聚焦的黑色轮廓。
+
+### 阴影与深度
+- **Card Shadow** (`rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`)：用于悬浮卡片的细微环境阴影。
+
+## 3. 排版规则
+
+### 字体家族
+- **Primary**: `NVIDIA-EMEA`，后备字体为：`Arial, Helvetica, sans-serif`
+- **Icon Font**: `Font Awesome 6 Pro`（实心图标字重为 900，常规为 700）
+- **Icon Sharp**: `Font Awesome 6 Sharp`（轻量图标字重为 300，常规为 400）
+
+### 层级结构
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | NVIDIA-EMEA | 36px (2.25rem) | 700 | 1.25 (紧凑) | normal | 具有最大视觉冲击力的标题 |
+| Section Heading | NVIDIA-EMEA | 24px (1.50rem) | 700 | 1.25 (紧凑) | normal | 版块标题，卡片标题 |
+| Sub-heading | NVIDIA-EMEA | 22px (1.38rem) | 400 | 1.75 (宽松) | normal | 功能描述，副标题 |
+| Card Title | NVIDIA-EMEA | 20px (1.25rem) | 700 | 1.25 (紧凑) | normal | 卡片和模块标题 |
+| Body Large | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.67 (宽松) | normal | 强调正文，引导段落 |
+| Body | NVIDIA-EMEA | 16px (1.00rem) | 400 | 1.50 | normal | 标准阅读文本 |
+| Body Bold | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.50 | normal | 强调标签，导航项 |
+| Body Small | NVIDIA-EMEA | 15px (0.94rem) | 400 | 1.67 (宽松) | normal | 次要内容，描述 |
+| Body Small Bold | NVIDIA-EMEA | 15px (0.94rem) | 700 | 1.50 | normal | 强调的次要内容 |
+| Button Large | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.25 (紧凑) | normal | 主要 CTA 按钮 |
+| Button | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.25 (紧凑) | normal | 标准按钮 |
+| Button Compact | NVIDIA-EMEA | 14.4px (0.90rem) | 700 | 1.00 (紧凑) | 0.144px | 小/紧凑型按钮 |
+| Link | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | 导航链接 |
+| Link Uppercase | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | `text-transform: uppercase`，导航标签 |
+| Caption | NVIDIA-EMEA | 14px (0.88rem) | 600 | 1.50 | normal | 元数据，时间戳 |
+| Caption Small | NVIDIA-EMEA | 12px (0.75rem) | 400 | 1.25 (紧凑) | normal | 免责声明，法律文本 |
+| Micro Label | NVIDIA-EMEA | 10px (0.63rem) | 700 | 1.50 | normal | `text-transform: uppercase`，微小徽章 |
+| Micro | NVIDIA-EMEA | 11px (0.69rem) | 700 | 1.00 (紧凑) | normal | 最小的 UI 文本 |
+
+### 原则
+- **粗体作为默认风格**：NVIDIA 在标题、按钮、链接和标签上大量使用字重 700。字重 400 专用于正文和描述——其他所有内容均为粗体，彰显自信与权威。
+- **紧凑标题，宽松正文**：标题行高一致为 1.25（紧凑），而正文行高宽松至 1.50-1.67。这种对比在内容块顶部创造了视觉密度，并在段落中提供了舒适的阅读体验。
+- **导航使用大写**：链接标签使用 `text-transform: uppercase` 和字重 700，创造出读起来像硬件规格标签的导航风格。
+- **无装饰性字间距**：除了紧凑型按钮（0.144px）外，整体字间距保持正常。字体本身无需额外操纵即可承载工业特性。
+
+## 4. 组件样式
+
+### 按钮
+
+**Primary (Green Border)**
+- Background: `transparent`
+- Text: `#000000`
+- Padding: 11px 13px
+- Border: `2px solid #76b900`
+- Radius: 2px
+- Font: 16px weight 700
+- Hover: background `#1eaedb`, text `#ffffff`
+- Active: background `#007fff`, text `#ffffff`, border `1px solid #003eff`, scale(1)
+- Focus: background `#1eaedb`, text `#ffffff`, outline `#000000 solid 2px`, opacity 0.9
+- Use: 主要 CTA（“了解更多”，“探索解决方案”）
+
+**Secondary (Green Border Thin)**
+- Background: transparent
+- Border: `1px solid #76b900`
+- Radius: 2px
+- Use: 次要操作，备选 CTA
+
+**Compact / Inline**
+- Font: 14.4px weight 700
+- Letter-spacing: 0.144px
+- Line-height: 1.00
+- Use: 内联 CTA，紧凑型导航
+
+### 卡片与容器
+- Background: `#ffffff`（浅色）或 `#1a1a1a`（深色版块）
+- Border: none（干净边缘）或 `1px solid #5e5e5e`
+- Radius: 2px
+- Shadow: 悬浮卡片使用 `rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`
+- Hover: 阴影加深
+- Padding: 16-24px internal
+
+### 链接
+- **On Dark Background**: `#ffffff`, no underline, hover shifts to `#3860be`
+- **On Light Background**: `#000000` or `#1a1a1a`, underline `2px solid #76b900`, hover shifts to `#3860be`, underline removed
+- **Green Links**: `#76b900`, hover shifts to `#3860be`
+- **Muted Links**: `#666666`, hover shifts to `#3860be`
+
+### 导航
+- 深黑色背景（`#000000`）
+- Logo 左对齐，突出的 NVIDIA 字标
+- Links: NVIDIA-EMEA 14px weight 700 uppercase, `#ffffff`
+- Hover: color shift, no underline change
+- 产品类别的 Mega-menu dropdowns
+- Sticky on scroll with backdrop
+
+### 图像处理
+- 产品/GPU 渲染图作为 hero image，通常为全宽
+- 截图带有微妙的阴影以增加深度
+- 深色 hero 版块上的绿色渐变叠加层
+- 50% 圆角的圆形头像容器
+
+### 特色组件
+
+**Product Cards**
+- 干净的白色或深色卡片，极小的圆角（2px）
+- 标题上的绿色点缀边框或下划线
+- 粗体标题 + 较轻字重描述的模式
+- 底部带有绿色边框的 CTA
+
+**Tech Spec Tables**
+- 工业网格布局
+- 交替的行背景（微妙的灰度变化）
+- 粗体标签，常规数值
+- 关键指标的绿色高亮
+
+**Cookie/Consent Banner**
+- 固定在底部
+- 圆角按钮（2px radius）
+- 灰色边框处理
+
+## 5. 布局原则
+
+### 间距系统
+- Base unit: 8px
+- Scale: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 15px
+- Primary padding values: 8px, 11px, 13px, 16px, 24px, 32px
+- Section spacing: 48-80px vertical padding
+
+### 网格与容器
+- Max content width: approximately 1200px (contained)
+- Full-width hero sections with contained text
+- 特性版块：用于产品卡片的 2-3 列网格
+- Single-column for article/blog content
+- Sidebar layouts for documentation
+
+### 留白理念
+- **有目的的密度**：NVIDIA 使用的间距比典型的 SaaS 网站更紧凑，反映了技术内容的密度。留白的存在是为了区隔概念，而不是为了营造奢华的空旷感。
+- **版块节奏**：深色版块与白色版块交替，使用背景色（而不仅仅是间距）来分隔内容块。
+- **卡片密度**：产品卡片紧密排列，间距为 16-20px，营造出一种目录感而非画廊感。
+
+### 边框圆角比例
+- Micro (1px): Inline spans, tiny elements
+- Standard (2px): Buttons, cards, containers, inputs -- the default for nearly everything
+- Circle (50%): Avatar images, circular tab indicators
+
+## 6. 深度与层级
+
+| 级别 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | 页面背景，内联文本 |
+| Subtle (Level 1) | `rgba(0,0,0,0.3) 0px 0px 5px 0px` | 标准卡片，模态框 |
+| Border (Level 1b) | `1px solid #5e5e5e` | 内容分割线，版块边框 |
+| Green accent (Level 2) | `2px solid #76b900` | 交互元素，CTA，选中项 |
+| Focus (Accessibility) | `2px solid #000000` outline | 键盘聚焦环 |
+
+**阴影理念**：NVIDIA 的深度系统是极简且实用的。基本上只有一个阴影值——具有 30% 不透明度的 5px 环境模糊——谨慎地用于卡片和模态框。主要的深度信号不是阴影，而是 _颜色对比_：黑色背景紧邻白色版块，黑色表面上的绿色边框。这创造了一种类似硬件的视觉分层，其深度来自于材质的差异，而不是模拟的光照。
+
+### 装饰性深度
+- Hero 内容背后的绿色渐变流光
+- 用于版块过渡的“从深色到更深色”渐变（从黑到接近黑）
+- 没有毛玻璃效果（glassmorphism）或模糊效果——追求清晰度而非氛围感
+
+## 7. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 主要变化 |
+|------|-------|-------------|
+| Mobile Small | <375px | 紧凑型单列，减少 padding |
+| Mobile | 375-425px | 标准移动布局 |
+| Mobile Large | 425-600px | 更宽的移动端，开始出现 2 列提示 |
+| Tablet Small | 600-768px | 2 列网格开始 |
+| Tablet | 768-1024px | 完整卡片网格，展开的导航 |
+| Desktop | 1024-1350px | 标准桌面布局 |
+| Large Desktop | >1350px | 最大内容宽度，宽裕的边距 |
+
+### 触控目标
+- 按钮使用 11px 13px padding 以提供舒适的点按区域
+- 导航链接为 14px 大写字母，并具有充足的间距
+- 深色背景上，绿色边框的按钮提供了高对比度的触控目标
+- Mobile: hamburger menu collapse with full-screen overlay
+
+### 折叠策略
+- Hero: 36px 标题按比例缩小
+- Navigation: 完整的水平导航在 ~1024px 时折叠为 hamburger menu
+- Product cards: 3-column 到 2-column 再到 single column 堆叠
+- Footer: 多列网格折叠为单个堆叠列
+- Section spacing: 64-80px 在移动端减少为 32-48px
+- Images: maintain aspect ratio, scale to container width
+
+### 图像行为
+- GPU/产品渲染图在所有尺寸下均保持高分辨率
+- Hero images 随视口按比例缩放
+- 卡片图像使用一致的宽高比
+- 全出血（Full-bleed）深色版块保持边缘到边缘的处理方式
+
+## 8. 响应式行为（扩展）
+
+### 排版缩放
+- Display 36px 在移动端缩放至 ~24px
+- Section headings 24px 在移动端缩放至 ~20px
+- Body text 在所有断点下保持 15-16px
+- Button text 保持 16px 以实现一致的点按目标
+
+### 深/浅色版块策略
+- 深色版块（黑底白字）与浅色版块（白底黑字）交替出现
+- 绿色点缀在两种表面类型上保持一致
+- 深色背景上：链接是白色的，下划线是绿色的
+- 浅色背景上：链接是黑色的，下划线是绿色的
+- 这种交替创造了自然的滚动节奏和内容分组
+
+## 9. Agent 提示词指南
+
+### 快速颜色参考
+- Primary accent: NVIDIA Green (`#76b900`)
+- Background dark: True Black (`#000000`)
+- Background light: Pure White (`#ffffff`)
+- Heading text (dark bg): White (`#ffffff`)
+- Heading text (light bg): Black (`#000000`)
+- Body text (light bg): Black (`#000000`) or Near Black (`#1a1a1a`)
+- Body text (dark bg): White (`#ffffff`) or Gray 300 (`#a7a7a7`)
+- Link hover: Blue (`#3860be`)
+- Border accent: `2px solid #76b900`
+- Button hover: Teal (`#1eaedb`)
+
+### 示例 Component Prompts
+- "Create a hero section on black background. Headline at 36px NVIDIA-EMEA weight 700, line-height 1.25, color #ffffff. Subtitle at 18px weight 400, line-height 1.67, color #a7a7a7. CTA button with transparent background, 2px solid #76b900 border, 2px radius, 11px 13px padding, text #ffffff. Hover: background #1eaedb, text white."
+- "Design a product card: white background, 2px border-radius, box-shadow rgba(0,0,0,0.3) 0px 0px 5px. Title at 20px NVIDIA-EMEA weight 700, line-height 1.25, color #000000. Body at 15px weight 400, line-height 1.67, color #757575. Green underline accent on title: border-bottom 2px solid #76b900."
+- "Build a navigation bar: #000000 background, sticky top. NVIDIA logo left-aligned. Links at 14px NVIDIA-EMEA weight 700 uppercase, color #ffffff. Hover: color #3860be. Green-bordered CTA button right-aligned."
+- "Create a dark feature section: #000000 background. Section label at 14px weight 700 uppercase, color #76b900. Heading at 24px weight 700, color #ffffff. 说明 at 16px weight 400, color #a7a7a7. Three product cards in a row with 20px gap."
+- "Design a footer: #000000 background. Multi-column layout with link groups. Links at 14px weight 400, color #a7a7a7. Hover: color #76b900. Bottom bar with legal text at 12px, color #757575."
+
+### 迭代指南
+1. 始终使用 `#76b900` 作为点缀，绝不能作为背景填充——它是用于边框、下划线和高亮的信号色
+2. 默认情况下，按钮是透明的并带有绿色边框——只有在 hover/active 状态下才会出现填充背景
+3. 字重 700 是所有交互和标题元素的主导风格；字重 400 仅用于正文段落
+4. 任何元素的 border radius 均为 2px——这种锐利、极小的圆角是工业美学的核心
+5. 深色版块使用白色文字；浅色版块使用黑色文字——绿色点缀在两者上的表现完全一致
+6. 无论链接的默认颜色是什么，其 hover 状态始终为 `#3860be`（蓝色）
+7. 标题行高为 1.25，正文行高为 1.50-1.67——保持这种对比以维持视觉层级
+8. 导航使用大写的 14px 粗体——这种硬件标签式的排版是品牌声音的一部分