@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,311 @@
+# 设计系统：Lovable
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原网站使用专有字体。对于自包含的 HTML 输出，请使用以下 CDN 替代字体：
+> - **主要字体:** `DM Sans` | **等宽字体:** `system monospace stack`
+> - **字体堆栈 (CSS):** `font-family: 'DM Sans', 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=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` skill (cloudflared tunnel) 提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Lovable 的网站通过克制散发出温暖的气息。整个页面建立在奶油色、羊皮纸色调的背景 (`#f7f4ed`) 上，这使其立即与大多数开发者工具网站的冷白惯例区分开来。这并不是为了极简而极简——这是一种刻意的选择，旨在让人感到平易近人，几乎带有模拟感，就像一本制作精美的笔记本。在这种温暖的奶油色背景下，接近黑色的文本 (`#1c1c1c`) 创造了对眼睛友好的对比度，同时保持了清晰的易读性。
+
+定制的 Camera Plain Variable 字体是系统的基础王牌。与标志着“科技公司”的几何无衬线字体不同，Camera Plain 具有人文主义的温暖感——略微圆润的终端、有机的曲线和舒适的阅读节奏。在展示尺寸 (48px–60px) 下，字重 600 以及激进的负字间距 (-0.9px 到 -1.5px) 将标题压缩为自信的、具有编辑风格的陈述。该字体使用 `ui-sans-serif`, `system-ui` 作为后备，承认定制字体承载着品牌个性。
+
+Lovable 视觉系统的独特之处在于其基于不透明度的深度模型。系统没有使用传统的灰度，而是调制了不同不透明度 (0.03, 0.04, 0.4, 0.82–0.83) 的 `#1c1c1c` 来创建统一的色调范围。页面上的每一种灰色阴影在技术上都是相同的色调——只是透明度高低不同。这创造了一种几乎无法通过任意十六进制值实现的视觉连贯性。边框系统也随之效仿：`1px solid #eceae4` 用于轻微的分割，`1px solid rgba(28, 28, 28, 0.4)` 用于更强的交互边界。
+
+**关键特征：**
+- 温暖的羊皮纸背景 (`#f7f4ed`) —— 不是白色，不是米色，而是经过精心挑选的刻意奶油色
+- Camera Plain Variable 字体，在展示尺寸下具有人文温暖感和编辑风格的字间距
+- 基于不透明度的颜色系统：所有灰色均源自不同透明度级别的 `#1c1c1c`
+- 按钮上的内阴影技术：`rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset`
+- 温暖的中性边框调色板：`#eceae4` 用于微妙效果，`rgba(28,28,28,0.4)` 用于交互元素
+- 全圆角半径 (`9999px`) 广泛用于操作按钮和图标容器
+- 聚焦状态使用 `rgba(0,0,0,0.1) 0px 4px 12px` 阴影以实现柔和、温暖的强调
+- shadcn/ui + Radix UI 组件原语结合 Tailwind CSS 实用样式
+
+## 2. 调色板与角色
+
+### 主要颜色
+- **奶油色** (`#f7f4ed`)：页面背景、卡片表面、按钮表面。基础色——温暖、如纸张般、人性化。
+- **木炭色** (`#1c1c1c`)：主要文本、标题、深色按钮背景。不是纯黑色——具有有机的温暖感。
+- **灰白色** (`#fcfbf8`)：深色背景上的按钮文本、微妙的强调高光。与纯白色几乎无法区分。
+
+### 中性梯度（基于透明度）
+- **木炭色 100%** (`#1c1c1c`)：主要文本、标题、深色表面。
+- **木炭色 83%** (`rgba(28,28,28,0.83)`)：强烈的次要文本。
+- **木炭色 82%** (`rgba(28,28,28,0.82)`)：正文内容。
+- **柔和灰色** (`#5f5f5d`)：次要文本、描述、说明文字。
+- **木炭色 40%** (`rgba(28,28,28,0.4)`)：交互边框、按钮轮廓。
+- **木炭色 4%** (`rgba(28,28,28,0.04)`)：细微的悬停背景、微型染色。
+- **木炭色 3%** (`rgba(28,28,28,0.03)`)：几乎不可见的遮罩层、背景深度。
+
+### 表面与边框
+- **浅奶油色** (`#eceae4`)：卡片边框、分隔线、图像轮廓。温暖的分割线。
+- **奶油表面** (`#f7f4ed`)：卡片背景、区域填充——与页面背景相同，以实现无缝融合。
+
+### 交互
+- **环形蓝色** (`#3b82f6`，50% 不透明度)：`--tw-ring-color`，Tailwind 聚焦环。
+- **聚焦阴影** (`rgba(0,0,0,0.1) 0px 4px 12px`)：聚焦和激活状态阴影——柔和、温暖、漫反射。
+
+### 内阴影
+- **按钮内阴影** (`rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px`)：深色按钮上标志性的多层内阴影。
+
+## 3. 排版规则
+
+### 字体系列
+- **主要**：`Camera Plain Variable`，后备字体：`ui-sans-serif, system-ui`
+- **字重范围**：400（正文/阅读），480（特殊展示），600（标题/强调）
+- **特性**：具有连续字重轴的可变字体——允许进行微调的中间字重，如 480。
+
+### 层级结构
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| 展示级标题 | Camera Plain Variable | 60px (3.75rem) | 600 | 1.00–1.10 (紧凑) | -1.5px | 最大视觉冲击力，编辑风格 |
+| 替代展示级 | Camera Plain Variable | 60px (3.75rem) | 480 | 1.00 (紧凑) | normal | 较轻的标题变体 |
+| 区域标题 | Camera Plain Variable | 48px (3.00rem) | 600 | 1.00 (紧凑) | -1.2px | 特性区域标题 |
+| 副标题 | Camera Plain Variable | 36px (2.25rem) | 600 | 1.10 (紧凑) | -0.9px | 次级区域 |
+| 卡片标题 | Camera Plain Variable | 20px (1.25rem) | 400 | 1.25 (紧凑) | normal | 卡片标题 |
+| 大号正文 | Camera Plain Variable | 18px (1.13rem) | 400 | 1.38 | normal | 介绍性文本 |
+| 正文 | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | 标准阅读文本 |
+| 按钮 | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | 按钮标签 |
+| 小号按钮 | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | 紧凑型按钮 |
+| 链接 | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | 下划线装饰 |
+| 小号链接 | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | 页脚链接 |
+| 说明文字 | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | 元数据、小号文本 |
+
+### 原则
+- **温暖的人文声音**：Camera Plain Variable 赋予了 Lovable 平易近人的个性。略微圆润的终端和有机曲线与大多数开发工具使用的锐利几何无衬线字体形成对比。
+- **作为设计工具的可变字重**：该字体支持连续的粗细值（例如 480），从而能够实现超越标准字重节点的细微层次。60px 下的 480 字重创造了一种展示风格，感觉比半粗体更轻，但比常规体更强。
+- **按比例压缩**：标题使用负字间距 (-0.9px 到 -1.5px) 以产生编辑冲击力。正文保持正常字间距，以提供舒适的阅读体验。
+- **两种字重，角色明确**：400（正文/UI/链接/按钮）和 600（标题/强调）。狭窄的字重范围通过大小和间距而非字重变化来创建层级结构。
+
+## 4. 组件样式
+
+### 按钮
+
+**深色主要按钮（内阴影）**
+- 背景：`#1c1c1c`
+- 文本：`#fcfbf8`
+- 内边距：8px 16px
+- 圆角：6px
+- 阴影：`rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px`
+- 激活：不透明度 0.8
+- 聚焦：`rgba(0,0,0,0.1) 0px 4px 12px` 阴影
+- 用途：主要 CTA（“Start Building”, “Get Started”）
+
+**幽灵 / 轮廓按钮**
+- 背景：transparent
+- 文本：`#1c1c1c`
+- 内边距：8px 16px
+- 圆角：6px
+- 边框：`1px solid rgba(28,28,28,0.4)`
+- 激活：不透明度 0.8
+- 聚焦：`rgba(0,0,0,0.1) 0px 4px 12px` 阴影
+- 用途：次要操作（“Log In”, “Documentation”）
+
+**奶油表面按钮**
+- 背景：`#f7f4ed`
+- 文本：`#1c1c1c`
+- 内边距：8px 16px
+- 圆角：6px
+- 无边框
+- 激活：不透明度 0.8
+- 用途：第三级操作、工具栏按钮
+
+**药丸 / 图标按钮**
+- 背景：`#f7f4ed`
+- 文本：`#1c1c1c`
+- 圆角：9999px（全药丸形）
+- 阴影：与深色主要按钮相同的内阴影模式
+- 不透明度：0.5（默认），0.8（激活）
+- 用途：附加操作、计划模式切换、语音录制
+
+### 卡片与容器
+- 背景：`#f7f4ed`（与页面匹配）
+- 边框：`1px solid #eceae4`
+- 圆角：12px（标准），16px（特色），8px（紧凑）
+- 默认无 box-shadow —— 边界由边框定义
+- 图片卡片：`1px solid #eceae4`，12px 圆角
+
+### 输入框与表单
+- 背景：`#f7f4ed`
+- 文本：`#1c1c1c`
+- 边框：`1px solid #eceae4`
+- 圆角：6px
+- 聚焦：环形蓝色 (`rgba(59,130,246,0.5)`) 轮廓
+- 占位符：`#5f5f5d`
+
+### 导航
+- 奶油色背景上的简洁水平导航栏，固定定位
+- Logo/文字标志左对齐 (128.75 x 22px)
+- 链接：Camera Plain 14–16px 字重 400，`#1c1c1c` 文本
+- CTA：带内阴影的深色按钮，6px 圆角
+- 移动端：带有 6px 圆角按钮的汉堡菜单
+- 滚动时带有细微边框或无边框
+
+### 链接
+- 颜色：`#1c1c1c`
+- 装饰：underline（默认）
+- 悬停：主要强调色（通过 CSS 变量 `hsl(var(--primary))`）
+- 悬停时无颜色变化 —— 装饰承载交互信号
+
+### 图像处理
+- 展示/作品集图像带有 `1px solid #eceae4` 边框
+- 所有图像容器保持 12px 圆角
+- Hero 内容背景后方有柔和的渐变背景（温暖的多色渲染）
+- 用于模板/项目展示的画廊式呈现
+
+### 独特组件
+
+**AI 聊天输入框**
+- 带有柔和边框的大型提示词输入区域
+- 带有 `#eceae4` 边框的建议药丸组件
+- 语音录制 / 计划模式切换按钮为药丸形状 (9999px)
+- 温暖、诱人的输入区域——没有临床感
+
+**模板库**
+- 展示项目模板的卡片网格
+- 每张卡片：图像 + 标题，`1px solid #eceae4` 边框，12px 圆角
+- 悬停：细微的阴影或边框加深
+- 分类标签作为文本链接
+
+**统计栏**
+- 大型指标：“0M+” 模式，48px+，字重 600
+- 下方为柔和灰色的描述性文本
+- 带有宽敞间距的水平布局
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 梯度：8px, 10px, 12px, 16px, 24px, 32px, 40px, 56px, 80px, 96px, 128px, 176px, 192px, 208px
+- 梯度在顶端大幅扩展——区域使用 80px–208px 的垂直间距以提供编辑级别的呼吸空间
+
+### 网格与容器
+- 最大内容宽度：约 1200px（居中）
+- Hero：居中的单列布局，具有巨大的垂直内边距 (96px+)
+- 特性区域：2–3 列网格
+- 全宽页脚，带有多列链接布局
+- 带有居中卡片网格的展示区域
+
+### 留白理念
+- **慷慨的编辑级间距**：Lovable 在区域边界处的间距非常宽裕 (80px–208px)。温暖的奶油色背景让这些广阔的区域感觉舒适而不是空旷。
+- **内容驱动的节奏**：卡片内部紧凑的间距 (12–24px) 与宽阔的区域间隙形成对比，创造出在专注内容和视觉休息之间交替的阅读节奏。
+- **区域分隔**：页脚使用 `1px solid #eceae4` 边框和 16px 圆角容器。区域由宽敞的间距而非边框线定义。
+
+### 边框圆角梯度
+- 微型 (4px)：小按钮、交互元素
+- 标准 (6px)：按钮、输入框、导航菜单
+- 舒适 (8px)：紧凑卡片、div
+- 卡片 (12px)：标准卡片、图像容器、模板
+- 容器 (16px)：大型容器、页脚区域
+- 全药丸形 (9999px)：操作药丸组件、图标按钮、切换开关
+
+## 6. 深度与层级
+
+| 级别 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| 平面 (Level 0) | 无阴影，奶油色背景 | 页面表面、大多数内容 |
+| 带边框 (Level 1) | `1px solid #eceae4` | 卡片、图像、分隔线 |
+| 内阴影 (Level 2) | `rgba(255,255,255,0.2) 0px 0.5px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px` | 深色按钮、主要操作 |
+| 聚焦 (Level 3) | `rgba(0,0,0,0.1) 0px 4px 12px` | 激活/聚焦状态 |
+| 环形（无障碍） | `rgba(59,130,246,0.5)` 2px ring | 输入框上的键盘聚焦 |
+
+**阴影理念**：Lovable 的深度系统刻意保持浅显。系统没有使用带有夸张投影的悬浮卡片，而是依靠温暖的边框 (`#eceae4`) 在奶油色表面上创造轻柔的包容感。唯一值得注意的阴影模式是深色按钮上的内阴影——这是一种微妙的多层技术，顶部边缘有白色高光线，而深色环和柔和投影则处理底部。这创造了一种触觉的、压入表面的感觉，而不是悬浮在表面的感觉。温暖的聚焦阴影 (`rgba(0,0,0,0.1) 0px 4px 12px`) 刻意进行了漫反射和放大，产生柔和的光晕而不是锐利的轮廓。
+
+### 装饰深度
+- Hero：柔和、温暖的多色渐变渲染（粉色、橙色、蓝色）位于 Hero 之后——充满氛围感，几乎不可见
+- 页脚：带有向底部过渡的温暖色调的渐变背景
+- 没有刺眼的区域分隔线——通过间距和背景的温暖感处理过渡
+
+## 7. 注意事项 (该做与不该做)
+
+### 建议
+- 使用温暖的奶油色背景 (`#f7f4ed`) 作为页面基础——这是品牌标志性的温暖感
+- 在展示尺寸下使用 Camera Plain Variable，并带有负字间距 (-0.9px 到 -1.5px)
+- 从不同不透明度级别的 `#1c1c1c` 派生所有灰色，以实现色调统一
+- 在深色按钮上使用内阴影技术以获得触觉深度
+- 使用 `#eceae4` 边框代替阴影来进行卡片包围
+- 保持字重系统狭窄：400 用于正文/UI，600 用于标题
+- 仅对操作药丸组件和图标按钮使用全药丸圆角 (9999px)
+- 在激活状态时应用 0.8 不透明度，以获得响应式触觉反馈
+
+### 不建议
+- 不要使用纯白色 (`#ffffff`) 作为页面背景——奶油色是刻意为之的
+- 不要为卡片使用沉重的 box-shadows——边框才是包容机制
+- 不要引入高饱和度的强调色——调色板刻意保持温暖的中性
+- 不要使用字重 700（粗体）——600 是系统中的最大字重
+- 不要在矩形按钮上应用 9999px 圆角——药丸形仅用于图标/操作切换
+- 不要使用锐利的聚焦轮廓——系统使用基于阴影的柔和聚焦指示器
+- 不要混合边框样式——`#eceae4` 用于被动状态，`rgba(28,28,28,0.4)` 用于交互状态
+- 不要增加标题的字间距——Camera Plain 在设计上适合在大尺寸下紧凑排列
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| 小型移动端 | <600px | 紧凑单列，减少内边距 |
+| 移动端 | 600–640px | 标准移动布局 |
+| 小型平板 | 640–700px | 开始出现 2 列网格 |
+| 平板 | 700–768px | 卡片网格扩展 |
+| 小型桌面 | 768–1024px | 多列布局 |
+| 桌面 | 1024–1280px | 完整特性布局 |
+| 大型桌面 | 1280–1536px | 最大内容宽度，充足的边距 |
+
+### 触摸目标
+- 按钮：8px 16px 内边距（舒适的触摸体验）
+- 导航：项目之间有足够的间距
+- 药丸形按钮：9999px 圆角创造了巨大的易于点击的目标
+- 菜单切换：带有足够尺寸的 6px 圆角按钮
+
+### 折叠策略
+- Hero：60px → 48px → 36px 标题缩放，并带有成比例的字间距
+- 导航：水平链接 → 768px 处变为汉堡菜单
+- 特性卡片：3列 → 2列 → 单列堆叠
+- 模板库：网格 → 垂直堆叠的卡片
+- 统计栏：水平 → 垂直堆叠
+- 页脚：多列 → 堆叠成单列
+- 区域间距：128px+ → 移动端变为 64px
+
+### 图像行为
+- 模板截图在所有尺寸下保持 `1px solid #eceae4` 边框
+- 跨断点保留 12px 边框圆角
+- 画廊图像响应式变化，但保持一致的宽高比
+- Hero 渐变在移动端上柔化/简化
+
+## 9. Agent 提示指南
+
+### 快速颜色参考
+- 主要 CTA：木炭色 (`#1c1c1c`)
+- 背景：奶油色 (`#f7f4ed`)
+- 标题文本：木炭色 (`#1c1c1c`)
+- 正文文本：柔和灰色 (`#5f5f5d`)
+- 边框：`#eceae4`（被动），`rgba(28,28,28,0.4)`（交互）
+- 聚焦：`rgba(0,0,0,0.1) 0px 4px 12px`
+- 深色按钮文本：`#fcfbf8`
+
+### 示例组件提示词
+- "Create a hero section on cream background (#f7f4ed). Headline at 60px Camera Plain Variable weight 600, line-height 1.10, letter-spacing -1.5px, color #1c1c1c. Subtitle at 18px weight 400, line-height 1.38, color #5f5f5d. Dark CTA button (#1c1c1c bg, #fcfbf8 text, 6px radius, 8px 16px padding, inset shadow) and ghost button (transparent bg, 1px solid rgba(28,28,28,0.4) border, 6px radius)."
+- "Design a card on cream (#f7f4ed) background. Border: 1px solid #eceae4. Radius 12px. No box-shadow. Title at 20px Camera Plain Variable weight 400, line-height 1.25, color #1c1c1c. Body at 14px weight 400, color #5f5f5d."
+- "Build a template gallery: grid of cards with 12px radius, 1px solid #eceae4 border, cream backgrounds. Each card: image with 12px top radius, title below. Hover: subtle border darkening."
+- "Create navigation: sticky on cream (#f7f4ed). Camera Plain 16px weight 400 for links, #1c1c1c text. Dark CTA button right-aligned with inset shadow. Mobile: hamburger menu with 6px radius."
+- "Design a stats section: large numbers at 48px Camera Plain weight 600, letter-spacing -1.2px, #1c1c1c. Labels below at 16px weight 400, #5f5f5d. Horizontal layout with 32px gap."
+
+### 迭代指南
+1. 始终使用奶油色 (`#f7f4ed`) 作为基色——绝不使用纯白色
+2. 从不透明度级别的 `#1c1c1c` 派生灰色，而不是使用不同的十六进制值
+3. 使用 `#eceae4` 边框进行包围，而不是阴影
+4. 字间距随大小缩放：60px 时为 -1.5px，48px 时为 -1.2px，36px 时为 -0.9px，16px 时为 normal
+5. 两种字重：400（除标题外的所有内容）和 600（标题）
+6. 深色按钮上的内阴影是标志性细节——不要跳过它
+7. 字重 480 的 Camera Plain Variable 仅用于特殊的展示时刻

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

@@ -0,0 +1,270 @@
+# Design System: MiniMax
+
+
+> **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. 视觉主题与氛围
+
+MiniMax 的网站是一个简洁的产品展示平台，专为一家中国 AI 技术公司打造，在面向大众消费者的吸引力与技术可信度之间架起桥梁。其设计语言主要由留白驱动，营造出轻盈、通透的感觉——纯白背景（`#ffffff`）占据主导地位，让色彩丰富的产品卡片和 AI 模型插图成为视觉锚点。整体美学风格介于 Apple 产品营销的清晰度与圆润有趣的设计语言之间，使 AI 技术让人感觉平易近人。
+
+字体系统采用显著的多字体组合：DM Sans 作为主要的 UI 核心字体，Outfit 以几何优雅感处理展示性标题，Poppins 用于中层级标题，而 Roboto 处理数据密集的语境。这种多样性反映了一个快速成长的品牌——每种字体都服务于独特的沟通目的，而不是相互争夺注意力。主视觉标题采用 80px、字重 500（同时用于 DM Sans 和 Outfit）以及紧凑的 1.10 行高，营造出一种大胆但不具攻击性的开场白。
+
+MiniMax 的独特之处在于其用于导航和主要操作的胶囊状按钮几何形状（9999px 圆角），结合了用于产品展示的更柔和的 8px–24px 圆角卡片。产品卡片本身色彩丰富——粉色、紫色、橙色和蓝色的鲜艳渐变——营造出一种“AI 能力画廊”的感觉。在白色画布的映衬下，这些色彩斑斓的卡片就像手机主屏幕上的应用图标一样引人注目，让每个 AI 模型/产品都感觉像是一个独立的创意工具。
+
+**核心特征：**
+- 以白色为主的布局，辅以色彩丰富的产品卡片作为点缀
+- 多字体系统：DM Sans (UI)、Outfit (展示)、Poppins (中层级)、Roboto (数据)
+- 用于主导航和 CTA 的胶囊状按钮（9999px 圆角）
+- 用于产品展示的宽大圆角卡片（20px–24px 圆角）
+- 品牌蓝色谱：从 `#1456f0` (brand-6) 经过 `#3b82f6` (primary-500) 到 `#60a5fa`（浅色）
+- 品牌粉色（`#ea5ec1`）作为次要强调色
+- 白色背景上的接近黑色的文本（`#222222`、`#18181b`）
+- 带有紫色调的阴影（`rgba(44, 30, 116, 0.16)`）营造出微妙的品牌色深度感
+- 包含产品/公司链接的深色 footer 区块（`#181e25`）
+
+## 2. 色彩调色板与角色
+
+### Brand Primary
+- **Brand Blue** (`#1456f0`)：`--brand-6`，主品牌标识色
+- **Sky Blue** (`#3daeff`)：`--col-brand00`，较浅的品牌变体，用于强调
+- **Brand Pink** (`#ea5ec1`)：`--col-brand02`，次要品牌强调色
+
+### Blue Scale (Primary)
+- **Primary 200** (`#bfdbfe`)：`--color-primary-200`，浅蓝色背景
+- **Primary Light** (`#60a5fa`)：`--color-primary-light`，激活状态、高亮
+- **Primary 500** (`#3b82f6`)：`--color-primary-500`，标准蓝色操作
+- **Primary 600** (`#2563eb`)：`--color-primary-600`，悬停状态
+- **Primary 700** (`#1d4ed8`)：`--color-primary-700`，按下/激活状态
+- **Brand Deep** (`#17437d`)：`--brand-3`，用于强调的深蓝色
+
+### Text Colors
+- **Near Black** (`#222222`)：`--col-text00`，主要文本
+- **Dark** (`#18181b`)：按钮文本、标题
+- **Charcoal** (`#181e25`)：深色表面文本、footer 背景
+- **Dark Gray** (`#45515e`)：`--col-text04`，次要文本
+- **Mid Gray** (`#8e8e93`)：三级文本、弱化标签
+- **Light Gray** (`#5f5f5f`)：`--brand-2`，辅助文本
+
+### Surface & Background
+- **Pure White** (`#ffffff`)：`--col-bg13`，主背景
+- **Light Gray** (`#f0f0f0`)：次要按钮背景
+- **Glass White** (`hsla(0, 0%, 100%, 0.4)`)：`--fill-bg-white`，毛玻璃覆盖层
+- **Border Light** (`#f2f3f5`)：隐约的区块分割线
+- **Border Gray** (`#e5e7eb`)：组件边框
+
+### Semantic
+- **Success Background** (`#e8ffea`)：`--success-bg`，正面状态背景
+
+### Shadows
+- **Standard** (`rgba(0, 0, 0, 0.08) 0px 4px 6px`)：默认 card shadow
+- **Soft Glow** (`rgba(0, 0, 0, 0.08) 0px 0px 22.576px`)：环境柔光阴影
+- **Brand Purple** (`rgba(44, 30, 116, 0.16) 0px 0px 15px`)：带品牌色调的辉光
+- **Brand Purple Offset** (`rgba(44, 30, 116, 0.11) 6.5px 2px 17.5px`)：有方向性的品牌辉光
+- **Card Elevation** (`rgba(36, 36, 36, 0.08) 0px 12px 16px -4px`)：抬升的卡片阴影
+
+## 3. 排版规则
+
+### Font Families
+- **Primary UI**: `DM Sans`，备选字体：`Helvetica Neue, Helvetica, Arial`
+- **Display**: `Outfit`，备选字体：`Helvetica Neue, Helvetica, Arial`
+- **Mid-tier**: `Poppins`
+- **Data/Technical**: `Roboto`，备选字体：`Helvetica Neue, Helvetica, Arial`
+
+### Hierarchy
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 备注 |
+|------|------|------|--------|-------------|-------|
+| Display Hero | DM Sans / Outfit | 80px (5.00rem) | 500 | 1.10 (紧凑) | 首屏标题 |
+| Section Heading | Outfit | 31px (1.94rem) | 600 | 1.50 | 功能区块标题 |
+| Section Heading Alt | Roboto / DM Sans | 32px (2.00rem) | 600 | 0.88 (紧凑) | 紧凑型页眉 |
+| Card Title | Outfit | 28px (1.75rem) | 500–600 | 1.71 (宽松) | 产品卡片标题 |
+| Sub-heading | Poppins | 24px (1.50rem) | 500 | 1.50 | 中层级标题 |
+| Feature Label | Poppins | 18px (1.13rem) | 500 | 1.50 | 功能名称 |
+| Body Large | DM Sans | 20px (1.25rem) | 500 | 1.50 | 强调正文 |
+| Body | DM Sans | 16px (1.00rem) | 400–500 | 1.50 | 标准正文 |
+| Body Bold | DM Sans | 16px (1.00rem) | 700 | 1.50 | 重点强调 |
+| Nav/Link | DM Sans | 14px (0.88rem) | 400–500 | 1.50 | 导航、链接 |
+| Button Small | DM Sans | 13px (0.81rem) | 600 | 1.50 | 紧凑型按钮 |
+| Caption | DM Sans / Poppins | 13px (0.81rem) | 400 | 1.70 (宽松) | 元数据 |
+| Small Label | DM Sans | 12px (0.75rem) | 500–600 | 1.25–1.50 | 标签、徽章 |
+| Micro | DM Sans / Outfit | 10px (0.63rem) | 400–500 | 1.50–1.80 | 极小标注 |
+
+### Principles
+- **多字体目的**：DM Sans = UI 核心字体（正文、导航、按钮）；Outfit = 几何展示（标题、产品名称）；Poppins = 友好的中层级（副标题、功能特性）；Roboto = 技术/数据语境。
+- **通用的 1.50 行高**：绝大多数文本使用 1.50 的行高，无论字体或大小如何，都能创造出一致的阅读节奏。例外情况：展示性文本（1.10 紧凑）和部分说明文本（1.70 宽松）。
+- **以字重 500 作为默认强调**：大多数标题使用 500（中等）而不是粗体，营造出一种现代、平易近人的基调。区块标题使用 600，700 留作正文文本的强烈强调。
+- **紧凑的层级**：字号比例从 80px 的展示文本直接跳跃到 28–32px 的区块标题，然后是 16–20px 的正文——这是一种刻意的压缩，使视觉层级显得高效。
+
+## 4. 组件样式
+
+### Buttons
+
+**Pill Primary Dark**
+- 背景：`#181e25`
+- 文本：`#ffffff`
+- 内边距：11px 20px
+- 圆角：8px
+- 用途：主要 CTA（“开始使用”、“了解更多”）
+
+**Pill Nav**
+- 背景：`rgba(0, 0, 0, 0.05)`（隐约的色调）
+- 文本：`#18181b`
+- 圆角：9999px（全胶囊状）
+- 用途：导航标签页、筛选器切换
+
+**Pill White**
+- 背景：`#ffffff`
+- 文本：`rgba(24, 30, 37, 0.8)`
+- 圆角：9999px
+- 透明度：0.5（默认状态）
+- 用途：次要导航、非活动标签页
+
+**Secondary Light**
+- 背景：`#f0f0f0`
+- 文本：`#333333`
+- 内边距：11px 20px
+- 圆角：8px
+- 用途：次要操作
+
+### Product Cards
+- 背景：鲜艳的渐变色（粉色/紫色/橙色/蓝色）
+- 圆角：20px–24px（宽大的圆角）
+- 阴影：`rgba(44, 30, 116, 0.16) 0px 0px 15px`（品牌紫色辉光）
+- 内容：产品名称、模型版本、描述性文本
+- 每张卡片都有与其产品标识相匹配的专属配色
+
+### AI Product Cards (Matrix)
+- 背景：白色，带有微弱阴影
+- 圆角：13px–16px
+- 阴影：`rgba(0, 0, 0, 0.08) 0px 4px 6px`
+- 图标/插图在产品名称上方居中
+- 产品名称使用 DM Sans 14–16px，字重 500
+
+### Links
+- **Primary**: `#18181b` 或 `#181e25`，深色文本带下划线
+- **Secondary**: `#8e8e93`，弱化处理以降低视觉权重
+- **On Dark**: `rgba(255, 255, 255, 0.8)` 用于 footer 和深色区块
+
+### Navigation
+- 白色背景上的干净水平导航
+- MiniMax logo 左对齐（logo 中有红色点缀）
+- 导航项使用 DM Sans 14px，字重 500
+- 胶囊状的活动状态指示器（9999px 圆角）
+- “登录”文本链接，右侧操作极简化
+- 固定头部（Sticky header）行为
+
+## 5. 布局原则
+
+### Spacing System
+- 基础单位：8px
+- 比例：1px, 2px, 4px, 6px, 8px, 10px, 11px, 14px, 16px, 24px, 32px, 40px, 50px, 64px, 80px
+
+### Grid & Container
+- 最大内容宽度在页面上居中
+- 产品卡片网格：水平滚动或 3–4 列布局
+- 全宽白色区块，内容受容器限制
+- 全宽深色 footer
+
+### Breakpoints
+| 名称 | 宽度 | 主要变化 |
+|------|-------|-------------|
+| Mobile | <768px | 单列，卡片堆叠 |
+| Tablet | 768–1024px | 2 列网格 |
+| Desktop | >1024px | 完整布局，水平卡片滚动 |
+
+### Whitespace Philosophy
+- **画廊式间距**：像展示画廊作品一样呈现产品，卡片之间留有充足的空白，让每个 AI 模型都有独立展示的呼吸空间。
+- **区块节奏**：主要区块之间设置较大的垂直间距（64px–80px），创造出清晰的“章节”内容划分。
+- **卡片呼吸感**：产品卡片使用 16px–24px 的内部边距，并在文本周围留有充裕的留白。
+
+### Border Radius Scale
+- Minimal (4px)：小标签、微型徽章
+- Standard (8px)：按钮、小卡片
+- Comfortable (11px–13px)：中等卡片、面板
+- Generous (16px–20px)：大型产品卡片
+- Large (22px–24px)：首屏产品卡片、主要容器
+- Pill (30px–32px)：徽章胶囊、圆角面板
+- Full (9999px)：按钮、导航标签页
+
+## 6. 深度与层级
+
+| 级别 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影 | 白色背景、文本块 |
+| Subtle (Level 1) | `rgba(0, 0, 0, 0.08) 0px 4px 6px` | 标准卡片、容器 |
+| Ambient (Level 2) | `rgba(0, 0, 0, 0.08) 0px 0px 22.576px` | 元素周围的柔和辉光 |
+| Brand Glow (Level 3) | `rgba(44, 30, 116, 0.16) 0px 0px 15px` | 重点展示的产品卡片 |
+| Elevated (Level 4) | `rgba(36, 36, 36, 0.08) 0px 12px 16px -4px` | 抬升的卡片、悬停状态 |
+
+**阴影哲学**：MiniMax 对重点展示元素使用独特的紫色调阴影（`rgba(44, 30, 116, ...)`），营造出一种微妙的品牌色辉光，将阴影系统与蓝色品牌标识联系起来。标准阴影使用中性黑色，但透明度较低（0.08），保持整体感觉轻盈通透。带有方向性的阴影变体（6.5px 偏移量）增加了首屏产品卡片的立体趣味性。
+
+## 7. 宜与忌
+
+### 宜
+- 使用白色作为主导背景——让产品卡片来提供色彩
+- 为导航标签页和切换按钮应用胶囊状圆角（9999px）
+- 对产品展示卡片使用宽大的圆角（20px–24px）
+- 对重点展示/首屏产品卡片使用紫色调阴影
+- 保持正文文本使用 DM Sans 字重 400–500——仅按钮使用更重的字重
+- 展示标题使用 Outfit，所有功能性内容使用 DM Sans
+- 在正文文本中保持通用的 1.50 行高
+- 让色彩丰富的产品插图/渐变作为主要的视觉亮点
+
+### 忌
+- 不要给主要内容区块添加有色背景——白色是结构性的基调
+- 不要在产品卡片上使用尖锐的直角（0–4px 圆角）——圆角美学是核心
+- 不要将品牌粉色（`#ea5ec1`）应用于文本或按钮——它仅用于 logo 和装饰性点缀
+- 不要在同一个区块中混合使用超过一种展示字体（使用 Outfit 或 Poppins，不能同时使用）
+- 标题不要使用字重 700——500–600 是标准范围，700 保留给正文文本中的强烈强调
+- 不要将阴影透明度加深超过 0.16——轻盈通透的感觉需要克制
+- 不要使用 Roboto 作为标题——它仅用于数据/技术语境。
+
+## 8. 响应式行为
+
+### Breakpoints
+| 名称 | 宽度 | 主要变化 |
+|------|-------|-------------|
+| Mobile | <768px | 单列、产品卡片堆叠、汉堡菜单 |
+| Tablet | 768–1024px | 2 列产品网格、紧凑的间距 |
+| Desktop | >1024px | 完整的水平卡片布局、扩展的间距 |
+
+### Collapsing Strategy
+- Hero：80px → 在移动端自适应缩放至约 40px
+- 产品卡片网格：水平滚动 → 2 列 → 单列堆叠
+- 导航：水平排列 → 汉堡菜单
+- Footer：多列 → 堆叠区块
+- 间距：64–80px 间距 → 移动端缩减至 32–40px
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- 背景：`#ffffff` (primary)、`#181e25` (dark/footer)
+- 文本：`#222222` (primary)、`#45515e` (secondary)、`#8e8e93` (muted)
+- Brand Blue：`#1456f0` (brand)、`#3b82f6` (primary-500)、`#2563eb` (hover)
+- Brand Pink：`#ea5ec1` (accent only)
+- 边框：`#e5e7eb`、`#f2f3f5`
+
+### 示例 Component Prompts
+- "Create a hero section on white background. Headline at 80px Outfit weight 500, line-height 1.10, near-black (#222222) text. Sub-text at 16px DM Sans weight 400, line-height 1.50, #45515e. Dark CTA button (#181e25, 8px radius, 11px 20px padding, white text)."
+- "Design a product card grid: white cards with 20px border-radius, shadow rgba(44,30,116,0.16) 0px 0px 15px. Product name at 28px Outfit weight 600. Internal gradient background for the product illustration area."
+- "Build navigation bar: white background, DM Sans 14px weight 500 for links, #18181b text. Pill-shaped active tab (9999px radius, rgba(0,0,0,0.05) background). MiniMax logo left-aligned."
+- "Create an AI product matrix: 4-column grid of cards with 13px radius, subtle shadow rgba(0,0,0,0.08) 0px 4px 6px. Centered icon above product name in DM Sans 16px weight 500."
+- "Design footer on dark (#181e25) background. Product links in DM Sans 14px, rgba(255,255,255,0.8). Multi-column layout."
+
+### Iteration Guide
+1. 从白色开始——色彩仅来源于产品卡片和插图
+2. 导航/标签页使用胶囊状按钮（9999px），CTA 按钮使用标准圆角（8px）
+3. 重点展示的卡片使用紫色调阴影，其他所有元素使用中性阴影
+4. DM Sans 承载 70% 的文本——Outfit 仅用于展示，Poppins 仅用于中层级
+5. 保持适度的字重（标题使用 500–600）——品牌基调是自信但平易近人的
+6. 产品使用大圆角卡片（20–24px），UI 元素使用较小的圆角（8–13px）