@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,274 @@
+# 设计系统：Mistral AI
+
+
+> **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. 视觉主题与氛围
+
+Mistral AI 的界面是一幅用代码渲染的阳光普照的风景画——一种温暖、大胆、毫不妥协的欧洲设计，用金琥珀色、焦橙色以及法国南部午后阳光的感觉，取代了典型的蓝屏 AI 美学。每一个表面都散发着温暖：背景从淡奶油色渐变为深琥珀色，阴影带有金色的底色（`rgba(127, 99, 21, ...)`），而品牌标志性的橙色（`#fa520f`）像信号火一样穿透整个页面。
+
+这种设计语言在温暖感上是极繁主义的，但在结构上是极简主义的。巨大的展示标题（82px）以极具攻击性的负字间距（-2.05px）冲入视口，创造出感觉像广告牌或抗议海报的文本块——是宣言而不是描述。排版使用 Arial（可能是自定义字体，以 Arial 为后备）在极端尺寸下显示，创造出一种原始、未经修饰的声音，在表达“我们构建前沿 AI”时无需任何装饰。
+
+让 Mistral 独树一帜的是对暖色温的完全承诺。标志性的“色块”标识——一个从明黄色（`#ffd900`）流经琥珀色（`#ffa110`）到焦橙色（`#fa520f`）的渐变系统——创造了一种立即可识别的视觉标识。即使是阴影也是温暖的，使用带有琥珀色调的黑色而不是冷灰色。结合金色调的戏剧性风景摄影，这种设计感觉不太像一家科技公司，而更像是一个恰好开发语言模型的欧洲奢侈品牌。
+
+**关键特征：**
+- 金琥珀色宇宙：从淡奶油色（#fffaeb）到焦橙色（#fa520f）的每一种色调
+- 巨大的展示排版（82px），具有极具攻击性的负字间距（-2.05px）
+- 使用琥珀色调 rgba 值的温暖金色阴影系统
+- Mistral 的“M”色块标识——从黄色到橙色的渐变
+- 暖金色调的戏剧性风景摄影
+- 战略性地将大写排版用于分区标签和 CTA
+- 近乎为零的 border-radius——锐利、建筑般的几何形状
+- 法式欧洲自信：大胆、温暖、宣言式
+
+## 2. 调色板与角色
+
+### Primary
+- **Mistral Orange** (`#fa520f`)：核心品牌色——一种鲜艳、饱和的橙红色，奠定了整个标识的基调。用于主要强调、品牌色块以及最高信号量的时刻。
+- **Mistral Flame** (`#fb6424`)：品牌橙色的一种稍微更暖、更亮的变体，用于次要品牌时刻和 hover 状态。
+- **Block Orange** (`#ff8105`)：渐变色块系统中使用的一种纯橙色——比 Mistral Orange 更暖且红色更少。
+
+### Secondary & Accent
+- **Sunshine 900** (`#ff8a00`)：深金琥珀色——最深的阳光色调，用于强烈的强调时刻。
+- **Sunshine 700** (`#ffa110`)：温暖的琥珀金色——用于背景和交互元素的核心阳光强调色。
+- **Sunshine 500** (`#ffb83e`)：中等金色——为中级强调提供平衡的温暖感。
+- **Sunshine 300** (`#ffd06a`)：浅金色——用于微妙的暖色调和次要背景。
+- **Block Gold** (`#ffe295`)：淡金色——柔和的背景点缀和温和的暖意。
+- **Bright Yellow** (`#ffd900`)：渐变中最亮的色调——用于色块标识的“顶部”。
+
+### Surface & Background
+- **Warm Ivory** (`#fffaeb`)：最浅的页面背景——几乎感觉不到的暖色调，基础画布。
+- **Cream** (`#fff0c2`)：主要的暖色表面和次要按钮背景——明显的金色。
+- **Pure White** (`#ffffff`)：用于最大对比度的元素和弹出层（popover）表面。
+- **Mistral Black** (`#1f1f1f`)：用于按钮、文本和暗色区域的主要暗色表面。
+- **Accent Orange** (定义为 `hsl(17, 96%, 52%)`)：用于交互状态的功能强调色。
+
+### Neutrals & Text
+- **Mistral Black** (`#1f1f1f`)：主要文本颜色和深色按钮背景——一种接近纯黑但比纯 #000 更暖的颜色。
+- **Black Tint** (定义为 `hsl(0, 0%, 24%)`)：中等深灰色，用于浅色背景上的次要文本。
+- **Pure White** (`#ffffff`)：深色表面上的文本和 CTA 标签。
+
+### Semantic & Accent
+- **Input Border** (定义为 `hsl(240, 5.9%, 90%)`)：用于表单边框的冷色调浅灰色——系统中为数不多的冷色调之一。
+- **White Overlay** (`oklab(1, 0, 0 / 0.088–0.1)`)：半透明白色，用于磨砂玻璃效果和按钮叠加层。
+
+### Gradient System
+- **Mistral Block Gradient**：标志性的身份特征——一个多段渐变，流经黄色（`#ffd900`）→ 金色（`#ffe295`）→ 琥珀色（`#ffa110`）→ 橙色（`#ff8105`）→ 火焰色（`#fb6424`）→ Mistral Orange（`#fa520f`）。这种渐变出现在 logo 色块、章节背景和装饰元素中。
+- **Golden Landscape Wash**：摄影和背景使用温暖的琥珀色叠加，在整个页面营造出一致的金色调温度。
+- **Warm Shadow Cascade**：多层金色阴影，利用琥珀色的透明度而不是灰色来构建深度。
+
+## 3. 排版规则
+
+### Font Family
+- **Primary**: 可能是自定义字体（检测到 Font Source），以 `Arial` 作为后备，扩展堆栈为：`ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji`
+
+### Hierarchy
+
+| 角色 | 字体 | 大小 | 粗细 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | Arial (custom) | 82px (5.13rem) | 400 | 1.00 (tight) | -2.05px | 最大视觉冲击力，广告牌尺寸 |
+| Section Heading | Arial (custom) | 56px (3.5rem) | 400 | 0.95 (ultra-tight) | normal | 特性区块标题 |
+| Sub-heading Large | Arial (custom) | 48px (3rem) | 400 | 0.95 (ultra-tight) | normal | 次要区块标题 |
+| Sub-heading | Arial (custom) | 32px (2rem) | 400 | 1.15 (tight) | normal | 卡片标题，功能名称 |
+| Card Title | Arial (custom) | 30px (1.88rem) | 400 | 1.20 (tight) | normal | 中级标题 |
+| Feature Title | Arial (custom) | 24px (1.5rem) | 400 | 1.33 | normal | 小标题 |
+| Body / Button | Arial (custom) | 16px (1rem) | 400 | 1.50 | normal | 标准正文，按钮文本 |
+| Button Uppercase | Arial (custom) | 16px (1rem) | 400 | 1.50 | normal | 大写 CTA 标签 |
+| Caption / Link | Arial (custom) | 14px (0.88rem) | 400 | 1.43 | normal | 元数据，次要链接 |
+
+### Principles
+- **单一粗细，最大冲击力**：整个系统使用 400 weight（常规体）——即使在 82px 时也是如此。这创造了一种出人意料的优雅效果，仅靠尺寸就承载了权威感，而不需要使用粗体。
+- **超大尺寸下的极致紧凑**：在展示尺寸下，0.95–1.00 的行高创建了字母上伸部分几乎接触到上一行字母下伸部分的文本块——营造出密集的、海报般的构图。
+- **展示文本的强烈字间距压缩**：在 82px 下设置 -2.05px 的字间距，将 hero 文本压缩成一个整体的色块。
+- **大写作为强调**：在按钮标签和分区标记上战略性地使用 `text-transform: uppercase`，创造出正式的欧洲标牌质感。
+- **无粗细变化**：大多数系统使用 300–700 的字重范围，而 Mistral 处处使用 400。层次感来源于尺寸和颜色，从不来源于粗细。
+
+## 4. 组件样式
+
+### Buttons
+
+**Cream Surface**
+- 背景：Cream (`#fff0c2`)
+- 文本：Mistral Black (`#1f1f1f`)
+- 无可见边框
+- 温暖、诱人的次要 CTA
+
+**Dark Solid**
+- 背景：Mistral Black (`#1f1f1f`)
+- 文本：Pure White (`#ffffff`)
+- Padding：12px（四周）
+- 无可见边框
+- 主要操作按钮——暖色背景上的深色
+
+**Ghost / Transparent**
+- 背景：transparent 配合轻微的深色遮罩（`oklab(0, 0, 0 / 0.1)`）
+- 文本：Mistral Black (`#1f1f1f`)
+- Opacity：0.4
+- 用于次要/弱化操作
+
+**Text / Underline**
+- 背景：transparent
+- 文本：Mistral Black (`#1f1f1f`)
+- Padding：8px 0px 0px（仅顶部）
+- 极简样式——作为按钮的文本链接
+- 用于第三级导航操作
+
+### Cards & Containers
+- 背景：Warm Ivory (`#fffaeb`)、Cream (`#fff0c2`) 或 Pure White
+- 边框：极少或没有——容器由背景色定义
+- 圆角：近乎为零——锐利的、建筑感的边角
+- 阴影：温暖的金色多层阴影（`rgba(127, 99, 21, 0.12) -8px 16px 39px, rgba(127, 99, 21, 0.1) -33px 64px 72px, rgba(127, 99, 21, 0.06) -73px 144px 97px, ...`）——一种戏剧性的、阶梯式的暖色阴影
+- 独特之处：金色阴影营造出一种“黄金时刻”的光照效果
+
+### Inputs & Forms
+- 边框：`hsl(240, 5.9%, 90%)`——系统中唯一的冷色调元素
+- 聚焦：强调色光环
+- 与整体简约美学保持一致的极简样式
+
+### Navigation
+- 覆盖在暖色 hero 区域上的透明导航
+- Logo：Mistral 的“M”字标
+- 链接：深色文本（在暗色区域为白色）
+- CTA：深色实心按钮或奶油色表面按钮
+- 极简、间距宽阔的布局
+
+### Image Treatment
+- 暖金色调的戏剧性风景摄影
+- 蜿蜒穿过金色山丘的道路——反复出现的视觉主题
+- 在金色背景上大比例渲染的 Mistral“M”
+- 所有摄影作品均采用暖色调调色
+- 包含摄影作品的全出血区域
+
+### Distinctive Components
+
+**Mistral Block Identity**
+- 一排形成渐变的彩色块：黄色 → 琥珀色 → 橙色 → 焦橙色
+- 每个色块逐渐变得更橙/红
+- 品牌的视觉 DNA——在任何尺寸下都具有辨识度
+
+**Golden Shadow Cards**
+- 通过温暖的琥珀色多层阴影悬浮的卡片
+- 从 16px 到 400px 偏移量的 5 层阴影
+- 创造出一种 Mistral 独有的“悬浮在金光中”的效果
+
+**Dark Footer Gradient**
+- Footer 通过戏剧性的渐变从温暖的琥珀色过渡到暗色
+- 在页面结尾营造出一种“日落”效果
+
+## 5. 布局原则
+
+### Spacing System
+- 基础单位：8px
+- 比例：2px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 98px, 100px
+- 按钮 padding：12px 或 8px 0px（紧凑）
+- 垂直间距：非常充裕（80px–100px）
+
+### Grid & Container
+- 最大容器宽度：约 1280px，居中
+- Hero：全宽，配以覆盖在暖色背景上的巨大排版
+- 特性区域：带有戏剧性图像的宽幅布局
+- 卡片网格：2–3 列布局
+
+### Whitespace Philosophy
+- **大胆的宣言**：被充裕留白包围的巨大标题创造出广告牌般的冲击力——每一个陈述都有自己的呼吸空间。
+- **温暖的空白**：因为背景被染成了象牙白/奶油色而不是纯白色，空白空间本身也感觉温暖。
+- **摄影作为空间填充物**：大型风景图像兼具内容和装饰性留白的双重作用。
+
+### Border Radius Scale
+- 近乎为零：占主导地位的圆角值——大多数元素上具有锐利的、建筑感的边角
+- 这种极致的锐利与色彩的温暖形成对比，在柔和色彩与坚硬几何形状之间制造了一种张力。
+
+## 6. 深度与层级
+
+| 层级 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影 | 页面背景，文本块 |
+| Golden Float (Level 1) | 多层暖色阴影（5 层，12%→0% 不透明度，琥珀色调） | 特性卡片，产品展示，悬浮突出的内容 |
+
+**Shadow Philosophy**：Mistral 使用了一种单一但极其复杂的阴影——**五层阶梯式**的琥珀色调阴影（`rgba(127, 99, 21, ...)`），从近距离的 16px 偏移一直构建到远距离的 400px 偏移。其结果是一种浓郁、温暖的“黄金时刻”光照效果，让悬浮元素看起来像沐浴在午后的阳光中。这是所有主要 AI 品牌中最具特色的阴影系统。
+
+## 7. 宜与忌
+
+### 宜
+- 专门使用暖色谱：象牙白、奶油色、琥珀色、金色、橙色
+- 在 hero 区域保持 82px+ 的展示排版，并带有 -2.05px 的字间距
+- 在品牌呈现时刻使用 Mistral 色块渐变（黄色 → 琥珀色 → 橙色）
+- 为悬浮突出的元素应用温暖的金色阴影（琥珀色调 rgba）
+- 使用 Mistral Black (#1f1f1f) 作为文本颜色——绝不使用纯 #000000
+- 始终保持字体粗细为 400——让尺寸和颜色承载层级关系
+- 使用锐利的、建筑感的边角——近乎为零的 border-radius
+- 在按钮标签和分区标记上应用大写字母，以体现欧洲式的正式感
+- 使用带有金黄色调风景摄影
+
+### 忌
+- 不要引入冷色（蓝色、绿色、紫色）——调色板完全是暖色的
+- 不要使用粗体（700+）——400 是唯一的字重
+- 不要使用圆角——锐利的几何形状是刻意为之的
+- 不要使用冷色调阴影——阴影必须带有琥珀色的温暖
+- 不要使用纯白色作为页面背景——始终使用带暖色调的背景（至少为 #fffaeb）
+- 不要在桌面端将 hero 文本减小到 48px 以下——广告牌般的尺寸是核心
+- 不要使用超过 2 种字体粗细——用尺寸变化代替粗细变化
+- 不要在暖色谱之外添加渐变——不要蓝到紫的渐变，不要冷色调过渡
+- 不要使用普通的灰色作为文本——即使是中性色也应带有暖色调
+
+## 8. 响应式行为
+
+### Breakpoints
+| 名称 | 宽度 | 主要变化 |
+|------|-------|-------------|
+| Mobile | <640px | 单列，所有内容堆叠，hero 文本减小至 ~32px |
+| Tablet | 640–768px | 轻微的布局调整 |
+| Small Desktop | 768–1024px | 开始出现 2 列布局 |
+| Desktop | 1024–1280px | 包含最大排版比例的完整布局 |
+
+### Touch Targets
+- 按钮采用充裕的 padding（最少 12px）
+- 导航元素间距充足
+- 卡片充当大面积的触摸目标
+
+### Collapsing Strategy
+- **Navigation**: 在移动端折叠为汉堡菜单
+- **Hero text**: 82px → 56px → 48px → 32px 渐进缩放
+- **特性 sections**: 多列 → 堆叠
+- **Photography**: 按比例缩放，在移动端可能会被裁剪
+- **Block identity**: 按比例缩小
+
+### Image Behavior
+- 风景摄影按比例缩放
+- 在所有尺寸下保持暖色调调色
+- 色块渐变元素流畅地缩放
+- 无艺术指导变更——在所有尺寸下保持相同的温暖构图
+
+## 9. Agent 提示词指南
+
+### Quick Color Reference
+- Brand Orange: "Mistral Orange (#fa520f)"
+- Page Background: "Warm Ivory (#fffaeb)"
+- Warm Surface: "Cream (#fff0c2)"
+- Primary Text: "Mistral Black (#1f1f1f)"
+- Sunshine Amber: "Sunshine 700 (#ffa110)"
+- Bright Gold: "Bright Yellow (#ffd900)"
+- Text on Dark: "Pure White (#ffffff)"
+
+### 示例 Component Prompts
+- "Create a hero section on Warm Ivory (#fffaeb) with a massive headline at 82px Arial weight 400, line-height 1.0, letter-spacing -2.05px. Mistral Black (#1f1f1f) text. Add a dark solid CTA button (#1f1f1f bg, white text, 12px padding, sharp corners) and a cream secondary button (#fff0c2 bg)."
+- "Design a feature card on Cream (#fff0c2) with sharp corners (no border-radius). Apply the golden shadow system: rgba(127, 99, 21, 0.12) -8px 16px 39px as the primary layer. Title at 32px weight 400, body at 16px."
+- "Build the Mistral block identity: a row of colored blocks from Bright Yellow (#ffd900) through Sunshine 700 (#ffa110) to Mistral Orange (#fa520f). Sharp corners, no gaps."
+- "Create a dark footer section on Mistral Black (#1f1f1f) with Pure White (#ffffff) text. Footer links at 14px. Add a warm gradient from Sunshine 700 (#ffa110) at the top fading to Mistral Black."
+
+### Iteration Guide
+1. 保持温暖的色温——“偏向琥珀色”而不是“偏向灰色”
+2. 使用尺寸建立层级——82px → 56px → 48px → 32px → 24px → 16px
+3. 绝不添加 border-radius——只使用锐利的边角
+4. 阴影始终是温暖的：“带有琥珀色调的金色阴影”
+5. 字体粗细始终为 400——通过尺寸和颜色来描述强调

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

@@ -0,0 +1,279 @@
+# 设计系统：MongoDB
+
+
+> **Hermes Agent — Implementation 说明**
+>
+> 原网站使用专有字体。对于自包含的 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;600&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` skill（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+MongoDB 的网站是一场“深邃森林遇见终端”的体验——这套设计系统根植于最深的蓝绿色/黑色（`#001e2b`），让人联想到数据库的密集度与森林冠层的深邃。在这种接近黑色的画布上，引人注目的霓虹绿（`#00ed64`）作为品牌强调色在跳动——明亮得令人感到触电，又足够有机以至于显得生机勃勃。这不是赛博朋克冰冷的霓虹灯，而是黑暗中生长的物体的生物发光绿。
+
+排版系统在建筑结构上极具野心：MongoDB Value Serif 用于巨型大标题（96px），创造出一种充满编辑感和权威感的存在——在数据库公司的规模上使用衬线字体是一个大胆的选择，传达出“我们不仅是一家科技公司”的理念。Euclid Circular A 凭借异常宽泛的字重范围（300–700）承担了正文和 UI 文本繁重的展示任务，而 Source Code Pro 则作为代码和标签字体，采用了独特的宽字间距（1px–3px）大写处理。这套三字体系统创造了一种涵盖“编辑式优雅 → 几何专业感 → 工程精密度”的层级结构。
+
+让 MongoDB 独具特色的是其双模式设计：一个黑暗的 Hero/特性区域世界（`#001e2b` 搭配霓虹绿点缀）与一个明亮的内容世界（白色搭配蓝灰色边框 `#b8c4c2`）。这些模式之间的转换创造了戏剧性的对比。阴影系统使用带有蓝绿色调的深色阴影（`rgba(0, 30, 43, 0.12)`），即使在浅色表面上也能维持森林暗色的氛围。按钮使用胶囊形状（100px–999px 圆角）以及 MongoDB 绿色边框（`#00684a`），整个组件系统参考了 LeafyGreen 设计系统。
+
+**关键特征：**
+- 深蓝绿色背景（`#001e2b`）——森林般的暗色，而非太空般的纯黑
+- 霓虹 MongoDB 绿（`#00ed64`）作为单一的品牌强调色——充满电子感与有机感
+- MongoDB Value Serif 用于 Hero 大标题——在科技维度展现出编辑权威感
+- Euclid Circular A 用于正文，字重 300（细体）作为标志性的正文字重
+- Source Code Pro 使用宽字间距大写（1px–3px）作为技术标签
+- 蓝绿色调阴影：`rgba(0, 30, 43, 0.12)` —— 阴影承载着森林的色彩
+- 双模式：深蓝绿色 Hero 区域 + 白色明亮内容区域
+- 胶囊状按钮（100px 圆角）搭配绿色边框（`#00684a`）
+- 链接蓝色（`#006cfa`），hover 状态过渡为 `#3860be`
+
+## 2. 色彩调色板与角色
+
+### 品牌主色
+- **Forest Black** (`#001e2b`)：主要深色背景——最深的蓝绿色/黑色
+- **MongoDB Green** (`#00ed64`)：主要品牌强调色——用于高光、下划线、渐变的霓虹绿
+- **Dark Green** (`#00684a`)：按钮边框，浅色上的链接文本——功能性使用的柔和绿色
+
+### 交互色
+- **Action Blue** (`#006cfa`)：次要强调色——链接、交互式高亮
+- **Hover Blue** (`#3860be`)：所有链接的 hover 状态过渡到此蓝色
+- **Teal Active** (`#1eaedb`)：按钮 hover 背景——明亮的蓝绿色
+
+### 中性色阶
+- **Deep Teal** (`#1c2d38`)：深色按钮背景，次要深色表面
+- **Teal Gray** (`#3d4f58`)：深色表面上的深色边框
+- **Dark Slate** (`#21313c`)：深色链接文本变体
+- **Cool Gray** (`#5c6c75`)：深色背景上的柔和文本，次要按钮文本
+- **Silver Teal** (`#b8c4c2`)：浅色表面上的边框，分割线
+- **Light Input** (`#e8edeb`)：深色表面上的输入文本
+- **Pure White** (`#ffffff`)：浅色区域背景，深色上的按钮文本
+- **Black** (`#000000`)：浅色表面上的文本，最暗的元素
+
+### 阴影
+- **Forest Shadow** (`rgba(0, 30, 43, 0.12) 0px 26px 44px, rgba(0, 0, 0, 0.13) 0px 7px 13px`)：主要卡片悬浮——蓝绿色调
+- **Standard Shadow** (`rgba(0, 0, 0, 0.15) 0px 3px 20px`)：常规悬浮
+- **Subtle Shadow** (`rgba(0, 0, 0, 0.1) 0px 2px 4px`)：浅色卡片提升
+
+## 3. 排版规则
+
+### 字体系列
+- **Display Serif**: `MongoDB Value Serif` —— 编辑风格的 Hero 大标题
+- **Body / UI**: `Euclid Circular A` —— 几何无衬线主力字体
+- **Code / Labels**: `Source Code Pro` —— 带有大写标签处理的等宽字体
+- **Fallbacks**: `Akzidenz-Grotesk Std`（CJK 使用：Noto Sans KR/SC/JP）, `Times`, `Arial`, `system-ui`
+
+### 层级结构
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | MongoDB Value Serif | 96px (6.00rem) | 400 | 1.20 (紧凑) | normal | 衬线权威感 |
+| Display Secondary | MongoDB Value Serif | 64px (4.00rem) | 400 | 1.00 (紧凑) | normal | 衬线次级标题 |
+| Section Heading | Euclid Circular A | 36px (2.25rem) | 500 | 1.33 | normal | 几何精密度 |
+| Sub-heading | Euclid Circular A | 24px (1.50rem) | 500 | 1.33 | normal | 特性标题 |
+| Body Large | Euclid Circular A | 20px (1.25rem) | 400 | 1.60 (宽松) | normal | 介绍语 |
+| Body | Euclid Circular A | 18px (1.13rem) | 400 | 1.33 | normal | 标准正文 |
+| Body Light | Euclid Circular A | 16px (1.00rem) | 300 | 1.50–2.00 | normal | 细体阅读文本 |
+| Nav / UI | Euclid Circular A | 16px (1.00rem) | 500 | 1.00–1.88 | 0.16px | 导航，强调 |
+| Body Bold | Euclid Circular A | 15px (0.94rem) | 700 | 1.50 | normal | 强烈强调 |
+| Button | Euclid Circular A | 13.5px–16px | 500–700 | 1.00 | 0.135px–0.9px | CTA 标签 |
+| Caption | Euclid Circular A | 14px (0.88rem) | 400 | 1.71 (宽松) | normal | 元数据 |
+| Small | Euclid Circular A | 11px (0.69rem) | 600 | 1.82 (宽松) | 0.2px | 标签，注释 |
+| Code Heading | Source Code Pro | 40px (2.50rem) | 400 | 1.60 (宽松) | normal | 代码展示标题 |
+| Code Body | Source Code Pro | 16px (1.00rem) | 400 | 1.50 | normal | 代码块 |
+| Code Label | Source Code Pro | 14px (0.88rem) | 400–500 | 1.14 (紧凑) | 1px–2px | `text-transform: uppercase` |
+| Code Micro | Source Code Pro | 9px (0.56rem) | 600 | 2.67 (宽松) | 2.5px | `text-transform: uppercase` |
+
+### 原则
+- **权威的衬线体**：在 Hero 规模下使用 MongoDB Value Serif 创造了一种在科技界罕见的编辑感——它传达出 MongoDB 是一个机构，而不仅仅是一家初创公司。
+- **字重 300 作为正文默认值**：Euclid Circular A 使用细体（300）作为正文文本，创造出一种轻盈的阅读体验，与密集、暗色的背景形成对比。
+- **宽间距等宽标签**：Source Code Pro 大写形式搭配 1px–3px 的字间距，创造了感觉像数据库字段标签的技术路标——系统化、结构化、已分类。
+- **四种字重范围**：300（细体正文）→ 400（标准）→ 500（UI/导航）→ 700（加粗 CTA）——比大多数系统更宽的范围，实现了精细的层级控制。
+
+## 4. 组件样式
+
+### 按钮
+
+**Primary Green (Dark Surface)**
+- Background: `#00684a` (柔和的 MongoDB 绿)
+- Text: `#000000`
+- Radius: 50% (圆形) 或 100px (胶囊状)
+- Border: `1px solid #00684a`
+- Shadow: `rgba(0,0,0,0.06) 0px 1px 6px`
+- Hover: scale 1.1
+- Active: scale 0.85
+
+**Dark Teal Button**
+- Background: `#1c2d38`
+- Text: `#5c6c75`
+- Radius: 100px (胶囊状)
+- Border: `1px solid #3d4f58`
+- Hover: background `#1eaedb`, text white, translateX(5px)
+
+**Outlined Button (Light Surface)**
+- Background: transparent
+- Text: `#001e2b`
+- Border: `1px solid #b8c4c2`
+- Radius: 4px–8px
+- Hover: background tint
+
+### 卡片与容器
+- 浅色模式：白色背景搭配 `1px solid #b8c4c2` 边框
+- 深色模式：`#001e2b` 或 `#1c2d38` 背景搭配 `1px solid #3d4f58`
+- Radius: 16px (标准), 24px (中等), 48px (大/Hero)
+- Shadow: `rgba(0,30,43,0.12) 0px 26px 44px` (森林色调)
+- 图片容器：30px–32px 圆角
+
+### 输入框与表单
+- Textarea: text `#e8edeb`, padding 12px 12px 12px 8px
+- Borders: 浅色上为 `1px solid #b8c4c2`，深色上为 `1px solid #3d4f58`
+- Input radius: 4px
+
+### 导航
+- 森林黑色背景上的深色页眉
+- Euclid Circular A 16px 字重 500 用于导航链接
+- MongoDB logo（叶子图标 + 字标）左对齐
+- 绿色 CTA 胶囊按钮右对齐
+- 包含产品类别的 Mega-menu 下拉菜单
+
+### 图片处理
+- 深色背景上的仪表盘截图
+- 截图中带有绿色调的 UI 元素
+- 图片容器使用 30px–32px 圆角
+- 用于产品展示的全宽深色区块
+
+### 独特组件
+
+**霓虹绿色调下划线**
+- `0px 2px 2px 0px solid #00ed64` —— 底部 + 右侧边框形成强调下划线
+- 用于特性标题和高亮文本
+- 也会以 `#006cfa` (蓝色) 变体出现
+
+**Source Code 标签系统**
+- 14px 大写 Source Code Pro，字间距 1px–2px
+- 用作标题上方的区块类别标记
+- 营造出一种“数据库字段标签”的美感
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 比例：1px, 4px, 7px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 20px, 24px, 32px
+
+### 栅格与容器
+- 居中的最大内容宽度
+- 包含内容的深色 Hero 区块
+- 下方的浅色内容区块
+- 卡片栅格：2–3 列
+- 全宽的深色页脚
+
+### 留白哲学
+- **戏剧性的模式转换**：从深蓝绿色区块到白色内容的转变，通过对比而非仅仅是空间，创造了内在的视觉呼吸感。
+- **大方的深色区块**：深色 Hero 和特性区域使用额外的垂直内边距（80px+），让森林暗色背景得以“呼吸”。
+- **紧凑的浅色区块**：白色内容区域更加密集，具有更紧凑的卡片栅格和更少的垂直间距。
+
+### 圆角比例
+- Minimal (1px–2px)：小跨度，徽章
+- Subtle (4px)：输入框，小按钮
+- Standard (8px)：卡片，链接
+- Card (16px)：标准卡片，容器
+- Toggle (20px)：切换元素
+- Large (24px)：大面板
+- Image (30px–32px)：图片容器
+- Hero (48px)：Hero 卡片
+- Pill (100px–999px)：按钮，导航胶囊
+- Full (9999px)：最大胶囊状
+
+## 6. 深度与悬浮
+
+| 等级 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影 | 默认表面 |
+| Subtle (Level 1) | `rgba(0,0,0,0.1) 0px 2px 4px` | 浅色卡片提升 |
+| Standard (Level 2) | `rgba(0,0,0,0.15) 0px 3px 9px` | 标准卡片 |
+| Prominent (Level 3) | `rgba(0,0,0,0.15) 0px 3px 20px` | 悬浮面板 |
+| Forest (Level 4) | `rgba(0,30,43,0.12) 0px 26px 44px, rgba(0,0,0,0.13) 0px 7px 13px` | Hero 卡片 —— 蓝绿色调 |
+
+**阴影哲学**：MongoDB 的阴影系统独特之处在于，其主要悬浮阴影使用了 `rgba(0, 30, 43, 0.12)` —— 一种蓝绿色调的阴影，将森林暗色的品牌色彩带入了深度系统中。这意味着即使在白色表面上，阴影依然感觉属于 MongoDB 的色彩世界，而不是通用的中性黑色。
+
+## 7. 宜与忌
+
+### 宜
+- 在深色区块使用 `#001e2b`（森林黑）—— 而非纯黑
+- 谨慎使用 MongoDB 绿（`#00ed64`）以获得最大的电子冲击力
+- 仅将 MongoDB Value Serif 用于 Hero/Display 标题 —— 其他所有内容均使用 Euclid Circular A
+- 对技术标签应用大写且具有宽间距（1px–3px）的 Source Code Pro
+- 使用蓝绿色调阴影（`rgba(0,30,43,0.12)`）作为主要卡片悬浮
+- 保持暗/亮区块的二元性 —— 模式之间具有戏剧性的对比
+- 正文字本使用字重 300 —— 细体是易读的嗓音
+- 对主要操作按钮应用胶囊圆角（100px）
+
+### 忌
+- 不要使用纯黑（`#000000`）作为深色背景 —— 务必使用蓝绿黑（`#001e2b`）
+- 不要将 MongoDB 绿（`#00ed64`）用于背景 —— 它是用于文本、下划线和小面积高亮的强调色
+- 不要使用标准的灰色阴影 —— 务必使用蓝绿色调（`rgba(0,30,43,...)`）
+- 不要将衬线字体应用于正文文本 —— MongoDB Value Serif 仅限用于 Hero
+- 不要在 Source Code Pro 标签上使用窄字间距 —— 宽间距本身就是其身份标识
+- 不要在同一区块内混合使用深色和浅色区块处理方式
+- 不要使用暖色 —— 调色板严格限制为冷色（蓝绿、绿、蓝）
+- 不要忘记绿色调强调下划线 —— 它们是标志性的装饰元素
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Mobile Small | <425px | 紧凑的单列 |
+| Mobile | 425–768px | 标准移动端 |
+| Tablet | 768–1024px | 开始出现 2 列栅格 |
+| Desktop | 1024–1280px | 标准布局 |
+| Large Desktop | 1280–1440px | 扩展布局 |
+| Ultra-wide | >1440px | 最大宽度，大边距 |
+
+### 触摸目标
+- 带有充足内边距的胶囊状按钮
+- 16px 导航链接，具有足够的间距
+- 卡片表面作为全区域触摸目标
+
+### 折叠策略
+- Hero：MongoDB Value Serif 96px → 64px → 进一步缩放
+- 导航：水平 Mega-menu → 汉堡菜单
+- 特性卡片：多列 → 堆叠
+- 深色/浅色区块在所有尺寸下均保持其模式
+- Source Code Pro 标签保持大写处理
+
+### 图片行为
+- 仪表盘截图按比例缩放
+- 深色区块背景保持全宽
+- 跨断点保持图片圆角
+
+## 9. Agent Prompt 指南
+
+### 快速颜色参考
+- 深色背景：Forest Black (`#001e2b`)
+- 品牌强调色：MongoDB Green (`#00ed64`)
+- 功能绿色：Dark Green (`#00684a`)
+- 链接蓝色：Action Blue (`#006cfa`)
+- 浅色背景文字：Black (`#000000`)
+- 深色背景文字：White (`#ffffff`) 或 Light Input (`#e8edeb`)
+- 浅色边框：Silver Teal (`#b8c4c2`)
+- 深色边框：Teal Gray (`#3d4f58`)
+
+### 示例 Component Prompts
+- "Create a hero on forest-black (#001e2b) background. Headline at 96px MongoDB Value Serif weight 400, line-height 1.20, white text with 'potential' highlighted in MongoDB Green (#00ed64). Subtitle at 18px Euclid Circular A weight 400. Green pill CTA (#00684a, 100px radius). Neon green gradient glow behind product screenshot."
+- "Design a card on white background: 1px solid #b8c4c2 border, 16px radius, shadow rgba(0,30,43,0.12) 0px 26px 44px. Title at 24px Euclid Circular A weight 500. Body at 16px weight 300. Source Code Pro 14px uppercase label above title with 2px letter-spacing."
+- "Build a dark section: #001e2b background, 1px solid #3d4f58 border on cards. White text. MongoDB Green (#00ed64) accent underlines on headings using bottom-border 2px solid."
+- "Create technical label: Source Code Pro 14px, text-transform uppercase, letter-spacing 2px, weight 500, #00ed64 color on dark background."
+- "Design a pill button: #1c2d38 background, 1px solid #3d4f58 border, 100px radius, #5c6c75 text. Hover: #1eaedb background, white text, translateX(5px)."
+
+### 迭代指南
+1. 从模式决定开始：Hero/特性区使用深色（#001e2b），内容区使用白色
+2. MongoDB 绿（#00ed64）极具冲击力 —— 每个区块使用一次以达到最大影响力
+3. 衬线标题创造编辑权威感 —— 绝对不要用于正文
+4. 字重 300 的正文文本创造轻盈的阅读体验 —— 不要默认使用 400
+5. 具有宽间距的 Source Code Pro 大写形式用于技术标签 —— 数据库的嗓音
+6. 蓝绿色调的阴影让一切保持在 MongoDB 的色彩世界中