@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,339 @@
+# Design System: Mintlify
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原始站点使用专有字体。对于自包含的 HTML 输出，请使用这些 CDN 替代字体：
+> - **Primary:** `Inter` | **Mono:** `Geist Mono`
+> - **Font stack (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **Mono stack (CSS):** `font-family: 'Geist 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=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` 技能（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Mintlify 的网站是“文档即产品”设计的典范——一个洁白、透气且信息丰富的界面，将清晰度视为其最高美学价值。页面以明亮的白色（`#ffffff`）背景、接近纯黑（`#0d0d0d`）的文本和标志性的绿色品牌点缀（`#18E299`）开场，这种绿色在不喧宾夺主的情况下传递出新鲜感与智能感。整体氛围平静、自信，并为可读性而精心设计——这是一个在每一个像素上都在轻声诉说“我们关心您的开发者体验”的设计系统。
+
+Inter 字体家族承担了所有的排版重任。在 Display 尺寸（40–64px）下，它使用紧凑的负字间距（-0.8px 到 -1.28px）和 semibold 字重（600），创造出既聚焦又紧凑的标题感，宛如编写精良的文档标题。16–18px 的正文文本配合 150% 的行高，提供了充裕的阅读舒适度。Geist Mono 则专门用于代码和技术标签——大写、字间距拉开、尺寸小巧——这是营销页面中属于终端的语调。
+
+Mintlify 区别于其他文档平台之处在于其氛围感十足的渐变 Hero 区域。在 Hero 内容背后，柔和如云朵般的从绿到白的渐变晕染营造出一种空灵的智能感——让文档仿佛漂浮在喧嚣之上。在 Hero 区域下方，页面步入了由 5% 不透明度微妙边框分隔的纯白区域的严谨交替。卡片使用了充裕的内边距（24px+）、大圆角（16px–24px）和极细的边框，创造出一种开阔而非封闭的容器感。
+
+**关键特征：**
+- Inter 字体在 Display 尺寸下使用紧凑的负字间距（-0.8px 到 -1.28px）——紧凑但依然易读
+- Geist Mono 用于代码标签：大写、12px、字间距拉开，属于终端的语调
+- 品牌绿（`#18E299`）使用极其克制——仅用于 CTA、hover 状态、focus ring 和点缀
+- 具有云朵般绿白晕染效果的氛围渐变 Hero 区域
+- 超大圆角：容器 16px，特色卡片 24px，按钮和 pill 形状为全圆角（9999px）
+- 5% 不透明度的微妙边框（`rgba(0,0,0,0.05)`）营造出若隐若现的区隔感
+- 以 8px 为基础的间距系统，配合充裕的区块内边距（48px–96px）
+- 干净的白色画布——没有灰色背景，没有彩色区块，完全依靠边框和留白来塑造层次感
+
+## 2. 调色板与角色
+
+### Primary
+- **Near Black** (`#0d0d0d`)：Primary 文本、标题、深色表面。非纯黑——这种微小的柔和感提升了阅读舒适度。
+- **Pure White** (`#ffffff`)：页面背景、卡片表面、输入框背景。
+- **Brand Green** (`#18E299`)：标志性的点缀色——CTA、链接 hover 效果、focus ring、品牌标识。
+
+### Secondary Accents
+- **Brand Green Light** (`#d4fae8`)：用于徽章、hover 状态、微妙背景的浅绿色表面。
+- **Brand Green Deep** (`#0fa76e`)：较深的绿色，用于浅绿色徽章上的文本、品牌元素的 hover 状态。
+- **Warm Amber** (`#c37d0d`)：警告状态、提醒徽章——`--twoslash-warn-bg`。
+- **Soft Blue** (`#3772cf`)：标签背景、信息注解——`--twoslash-tag-bg`。
+- **Error Red** (`#d45656`)：错误状态、破坏性操作——`--twoslash-error-bg`。
+
+### Neutral Scale
+- **Gray 900** (`#0d0d0d`)：Primary 标题文本、导航链接。
+- **Gray 700** (`#333333`)：Secondary 文本、描述、正文副本。
+- **Gray 500** (`#666666`)：Tertiary 文本、弱化标签。
+- **Gray 400** (`#888888`)：占位符文本、禁用状态、代码注解。
+- **Gray 200** (`#e5e5e5`)：边框、分割线、卡片轮廓。
+- **Gray 100** (`#f5f5f5`)：微妙的表面背景、hover 状态。
+- **Gray 50** (`#fafafa`)：接近白色的表面色调。
+
+### Interactive
+- **Link 默认** (`#0d0d0d`)：链接颜色与文本一致，依赖下划线/上下文区分。
+- **Link Hover** (`#18E299`)：hover 时的品牌绿——`var(--color-brand)`。
+- **Focus Ring** (`#18E299`)：用于输入框和交互元素的品牌绿聚焦轮廓。
+
+### Surface & Overlay
+- **Card Background** (`#ffffff`)：白色背景上的白色卡片，通过边框区隔。
+- **Border Subtle** (`rgba(0,0,0,0.05)`)：5% 黑色透明度的边框——主要的区隔机制。
+- **Border Medium** (`rgba(0,0,0,0.08)`)：用于交互元素的稍强边框。
+- **Input Border Focus** (`var(--color-brand)`)：聚焦输入框的绿色轮廓环。
+
+### Shadows & Depth
+- **Card Shadow** (`rgba(0,0,0,0.03) 0px 2px 4px`)：几乎不可见的环境阴影，用于营造微妙的抬升感。
+- **Button Shadow** (`rgba(0,0,0,0.06) 0px 1px 2px`)：用于增加按钮层次感的微阴影。
+- **No heavy shadows**：Mintlify 依靠边框而非阴影来塑造层次感。
+
+## 3. 排版规则
+
+### Font Family
+- **Primary**: `Inter`，回退顺序：`Inter Fallback, system-ui, -apple-system, sans-serif`
+- **Monospace**: `Geist Mono`，回退顺序：`Geist Mono Fallback, ui-monospace, SFMono-Regular, monospace`
+
+### Hierarchy
+
+| 角色 | 字体 | 尺寸 | 字重 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Inter | 64px (4.00rem) | 600 | 1.15 (紧凑) | -1.28px | 最大化视觉冲击，hero 标题 |
+| Section Heading | Inter | 40px (2.50rem) | 600 | 1.10 (紧凑) | -0.8px | 功能区块标题 |
+| Sub-heading | Inter | 24px (1.50rem) | 500 | 1.30 (紧凑) | -0.24px | 卡片标题、子区块 |
+| Card Title | Inter | 20px (1.25rem) | 600 | 1.30 (紧凑) | -0.2px | 特性卡片标题 |
+| Card Title Light | Inter | 20px (1.25rem) | 500 | 1.30 (紧凑) | -0.2px | Secondary 卡片标题 |
+| Body Large | Inter | 18px (1.13rem) | 400 | 1.50 | normal | Hero 描述、介绍文本 |
+| Body | Inter | 16px (1.00rem) | 400 | 1.50 | normal | 标准阅读文本 |
+| Body Medium | Inter | 16px (1.00rem) | 500 | 1.50 | normal | 导航、强调文本 |
+| Button | Inter | 15px (0.94rem) | 500 | 1.50 | normal | 按钮标签 |
+| Link | Inter | 14px (0.88rem) | 500 | 1.50 | normal | 导航链接、小型 CTA |
+| Caption | Inter | 14px (0.88rem) | 400–500 | 1.50–1.71 | normal | 元数据、描述 |
+| Label Uppercase | Inter | 13px (0.81rem) | 500 | 1.50 | 0.65px | `text-transform: uppercase`，区块标签 |
+| Small | Inter | 13px (0.81rem) | 400–500 | 1.50 | -0.26px | 小号正文文本 |
+| Mono Code | Geist Mono | 12px (0.75rem) | 500 | 1.50 | 0.6px | `text-transform: uppercase`，技术标签 |
+| Mono Badge | Geist Mono | 12px (0.75rem) | 600 | 1.50 | 0.6px | `text-transform: uppercase`，状态徽章 |
+| Mono Micro | Geist Mono | 10px (0.63rem) | 500 | 1.50 | normal | `text-transform: uppercase`，微型标签 |
+
+### Principles
+- **Display 尺寸下的紧凑字距**：40–64px 的 Inter 使用 -0.8px 到 -1.28px 的字间距。这种压缩感让标题显得深思熟虑且节省空间——像文档标题，而非广告牌文案。
+- **正文尺寸下的放松阅读体验**：16–18px 的正文文本使用正常字距和 150% 的行高，创造出宽裕的阅读通道。文档需要舒适感。
+- **双字体系统**：Inter 用于所有人类可读的内容，Geist Mono 专门用于技术/代码语境。界限严格——不混用。
+- **大写作为层级信号**：区块标签和技术标签使用大写 + 正字间距（0.6px–0.65px）作为不同内容类型之间清晰的视觉界定。
+- **三种字重**：400（正文/阅读），500（UI/导航/强调），600（标题/称号）。系统中不使用 bold (700)。
+
+## 4. 组件样式
+
+### 按钮
+
+**Primary Brand (全圆角)**
+- 背景：`#0d0d0d` (near-black)
+- 文本：`#ffffff`
+- 内边距：8px 24px
+- 圆角：9999px (全 pill 形)
+- 字体：Inter 15px weight 500
+- 阴影：`rgba(0,0,0,0.06) 0px 1px 2px`
+- Hover：opacity 0.9
+- 用途：Primary CTA ("Get Started", "Start Building")
+
+**Secondary / Ghost (全圆角)**
+- 背景：`#ffffff`
+- 文本：`#0d0d0d`
+- 内边距：4.5px 12px
+- 圆角：9999px (全 pill 形)
+- 边框：`1px solid rgba(0,0,0,0.08)`
+- 字体：Inter 15px weight 500
+- Hover：opacity 0.9
+- 用途：次要操作 ("Request Demo", "View Docs")
+
+**Transparent / 导航按钮**
+- 背景：transparent
+- 文本：`#0d0d0d`
+- 内边距：5px 6px
+- 圆角：8px
+- 边框：none 或 `1px solid rgba(0,0,0,0.05)`
+- 用途：导航项、图标按钮
+
+**Brand Accent 按钮**
+- 背景：`#18E299`
+- 文本：`#0d0d0d`
+- 内边距：8px 24px
+- 圆角：9999px
+- 用途：特殊的促销 CTA
+
+### 卡片与容器
+
+**标准 Card**
+- 背景：`#ffffff`
+- 边框：`1px solid rgba(0,0,0,0.05)`
+- 圆角：16px
+- 内边距：24px
+- 阴影：`rgba(0,0,0,0.03) 0px 2px 4px`
+- Hover：边框微妙加深至 `rgba(0,0,0,0.08)`
+
+**特色 Card**
+- 背景：`#ffffff`
+- 边框：`1px solid rgba(0,0,0,0.05)`
+- 圆角：24px
+- 内边距：32px
+- 内部内容区域可以有自己的 16px 圆角容器
+
+**Logo/信任 Card**
+- 背景：`#fafafa` 或 `#ffffff`
+- 边框：`1px solid rgba(0,0,0,0.05)`
+- 圆角：16px
+- 居中的 logo/图标，尺寸保持一致
+
+### 输入框与表单
+
+**Email 输入框**
+- 背景：transparent 或 `#ffffff`
+- 文本：`#0d0d0d`
+- 内边距：0px 12px（高度由 line-height 控制）
+- 边框：`1px solid rgba(0,0,0,0.08)`
+- 圆角：9999px（全 pill 形，与按钮匹配）
+- 聚焦：`1px solid var(--color-brand)` + `outline: 1px solid var(--color-brand)`
+- 占位符：`#888888`
+
+### 导航
+- 白色背景上的干净水平导航，带 backdrop blur 的 sticky 效果
+- 品牌 logotype 左对齐
+- 链接：Inter 14–15px weight 500，文本色 `#0d0d0d`
+- Hover：颜色变为品牌绿 `var(--color-brand)`
+- CTA：右对齐的深色 pill 按钮（"Get Started"）
+- 移动端：在 768px 处折叠为汉堡菜单
+
+### 图片处理
+- 产品截图带有 1px 的微妙边框
+- 圆角容器：16px–24px 圆角
+- Hero 图片背后的氛围渐变背景
+- 带有柔和绿色调的云朵/天空图像
+
+### 独特组件
+
+**氛围感 Hero**
+- 全宽渐变晕染：柔和的从绿到白如云朵般的渐变
+- 字距紧凑的居中标题
+- 灰色弱化的副标题
+- 双 CTA 按钮（深色 primary + ghost secondary）
+- 这种渐变营造出一种抬升感和智能感
+
+**信任 Bar / Logo 网格**
+- "Loved by your favorite companies"（深受您喜爱的公司信赖）区块
+- 灰度弱化的公司 logo
+- 网格或水平布局，尺寸保持一致
+- logo 之间带有微妙的边框区隔
+
+**带图标的特性 Cards**
+- 顶部带有图标或插图
+- 标题为 20px weight 600
+- 说明文字为 14–16px 的灰色文本
+- 统一的内边距和边框处理
+- 网格布局：桌面端 2–3 列
+
+**CTA 页脚区块**
+- 深色或渐变背景
+- 大号标题："Make documentation your winning advantage"（让文档成为您的制胜优势）
+- pill 样式的 Email 输入框
+- CTA 上的品牌绿点缀
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 刻度：2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 24px, 32px, 48px, 64px
+- 区块内边距：垂直方向 48px–96px
+- 卡片内边距：24px–32px
+- 组件间距：8px–16px
+
+### 网格与容器
+- 内容最大宽度：约 1200px
+- Hero：居中单列，顶部留有充裕内边距（96px+）
+- 特性区块：用于卡片的 2–3 列 CSS Grid
+- 全宽区块搭配受限的内容宽度
+- 一致的水平内边距：24px (移动端) 到 32px (桌面端)
+
+### 留白哲学
+- **文档级别的呼吸空间**：每个元素周围都有宽裕的留白。Mintlify 主营文档业务，因此其营销页面本身就展示了何为阅读舒适度。
+- **区块即章节**：每个特性区块都是一个独立单元，具有 48px–96px 的垂直内边距，创造出清晰的“章节分页”。
+- **内容密度低**：与那些在页面上塞满信息的开发者工具不同，Mintlify 每个区块只传达 1–2 条关键信息，并辅以图像。
+
+### 边框圆角刻度
+- Small (4px)：行内代码、小标签、工具提示
+- Medium (8px)：导航按钮、透明按钮、小容器
+- Standard (16px)：卡片、内容容器、图片包裹层
+- Large (24px)：特色卡片、Hero 容器、区块面板
+- Full Pill (9999px)：按钮、输入框、徽章、pill 形状——标志性形状
+
+## 6. 层次与高度
+
+| 级别 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影，无边框 | 页面背景、文本块 |
+| Subtle Border (Level 1) | `1px solid rgba(0,0,0,0.05)` | 标准卡片边框、分割线 |
+| Medium Border (Level 1b) | `1px solid rgba(0,0,0,0.08)` | 交互元素、输入框边框 |
+| Ambient Shadow (Level 2) | `rgba(0,0,0,0.03) 0px 2px 4px` | 带有微妙抬升感的卡片 |
+| Button Shadow (Level 2b) | `rgba(0,0,0,0.06) 0px 1px 2px` | 按钮的微小层次感 |
+| Focus Ring (Accessibility) | `1px solid #18E299` 轮廓 | 聚焦的输入框、激活的交互元素 |
+
+**阴影哲学**：Mintlify 极少使用阴影。其层次系统几乎完全由边框驱动——极细的 5% 不透明度边框在没有视觉重量的情况下创造了区隔。当阴影出现时，它们也是氛围般的耳语（`0.03 opacity, 2px blur, 4px spread`），仅仅增添了最低限度的抬升感。这种克制让页面保持扁平化和纸质感——对于一家以清晰度和可读性为产品核心的文档公司来说，这非常合适。
+
+### 装饰性深度
+- Hero 渐变：Hero 内容背后的氛围感绿白云朵渐变
+- 无背景色交替——通体纯白
+- 深度来源于边框不透明度的变化（5% → 8%）和留白
+
+## 7. 暗黑模式
+
+### 颜色反转
+- **背景**：`#0d0d0d` (near-black)
+- **Text Primary**：`#ededed` (near-white)
+- **Text Secondary**：`#a0a0a0` (muted gray)
+- **Brand Green**：`#18E299` (保持不变——绿色在两种背景上都适用)
+- **边框**：`rgba(255,255,255,0.08)` (8% 不透明度的白色)
+- **Card Background**：`#141414` (比页面背景稍亮)
+- **阴影**：`rgba(0,0,0,0.4) 0px 2px 4px` (更强的阴影以增加对比度)
+
+### 关键调整
+- 按钮反转：白底深色字变为深底浅色字
+- 徽章背景转为更深的色调，配以更浅的文本
+- Focus ring 保持品牌绿
+- Hero 渐变转变为深色调的绿色氛围晕染
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Mobile | <768px | 单列、堆叠布局、汉堡菜单 |
+| Tablet | 768–1024px | 开始出现双列网格，扩展内边距 |
+| Desktop | >1024px | 完整布局、3 列网格、最大内容宽度 |
+
+### 触摸目标
+- 全 pill 形状的按钮具有舒适的 8px+ 垂直内边距
+- 导航链接之间保持足够的 16px+ 间距
+- 移动端菜单提供全宽点击目标
+
+### 折叠策略
+- Hero：64px → 40px 标题，按比例保持紧凑字距
+- 导航：水平链接 + CTA → 768px 处变为汉堡菜单
+- 特性卡片：3 列 → 2 列 → 单列堆叠
+- 区块间距：桌面端 96px → 移动端 48px
+- 页脚：多列 → 堆叠单列
+- 信任 bar：网格 → 水平滚动或堆叠
+
+### 图片行为
+- 产品截图通过响应式容器保持宽高比
+- Hero 渐变在移动端简化
+- 全宽区块保持边缘对齐处理
+
+## 9. Agent 提示词指南
+
+### 快速颜色参考
+- Primary CTA：Near Black (`#0d0d0d`)
+- 背景：Pure White (`#ffffff`)
+- 标题文本：Near Black (`#0d0d0d`)
+- 正文文本：Gray 700 (`#333333`)
+- 边框：`rgba(0,0,0,0.05)` (5% 不透明度)
+- 品牌点缀色：Green (`#18E299`)
+- Link hover：Brand Green (`#18E299`)
+- Focus ring：Brand Green (`#18E299`)
+
+### 示例组件提示词
+- “在白色背景上创建一个带有氛围感绿白渐变晕染的 hero 区块。标题为 64px Inter weight 600，line-height 1.15，letter-spacing -1.28px，颜色为 #0d0d0d。副标题为 18px Inter weight 400，line-height 1.50，颜色为 #666666。深色 pill 形 CTA (#0d0d0d, 9999px 圆角, 8px 24px 内边距) 以及 ghost pill 按钮（白色，1px solid rgba(0,0,0,0.08)，9999px 圆角）。”
+- “设计一张卡片：白色背景，1px solid rgba(0,0,0,0.05) 边框，16px 圆角，24px 内边距，shadow rgba(0,0,0,0.03) 0px 2px 4px。标题为 20px Inter weight 600，letter-spacing -0.2px。正文为 14px weight 400，#666666。”
+- “构建一个 pill 徽章：#d4fae8 背景，#0fa76e 文本，9999px 圆角，4px 12px 内边距，13px Inter weight 500，uppercase。”
+- “创建导航：带有 backdrop-filter blur(12px) 的白色 sticky header。链接使用 Inter 15px weight 500，文本色 #0d0d0d。右对齐的深色 pill CTA 'Get Started'，9999px 圆角。底部边框：1px solid rgba(0,0,0,0.05)。”
+- “设计一个以弱化灰色展示公司 logo 的信任区块。采用具有 16px 圆角容器、1px 5% 不透明度边框的网格布局。上方标签：'Loved by your favorite companies'，13px Inter weight 500，uppercase，tracking 0.65px。”
+
+### 迭代指南
+1. 始终为按钮和输入框使用全 pill 圆角 (9999px)——这是 Mintlify 的标志性形状
+2. 保持边框在 5% 不透明度 (`rgba(0,0,0,0.05)`)——过强的边框会破坏透气感
+3. 字间距随字体大小缩放：64px 时为 -1.28px，40px 时为 -0.8px，24px 时为 -0.24px，16px 时为 normal
+4. 仅使用三种字重：400 (阅读)，500 (交互)，600 (宣告)
+5. 品牌绿 (`#18E299`) 使用需克制——仅用于 CTA 和 hover 状态，绝不可用于装饰性填充
+6. Geist Mono uppercase 用于技术标签，Inter 用于其他所有内容
+7. 区块内边距要充裕：桌面端 64px–96px，移动端 48px
+8. 没有灰色背景区块——通体纯白，通过边框和留白进行区隔

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

@@ -0,0 +1,121 @@
+# 设计系统：Miro
+
+
+> **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. 视觉主题与氛围
+
+Miro 的网站是一个干净、注重协作工具的平台，通过大面积的留白、柔和的粉彩强调色以及充满自信的几何字体来传达“视觉化思考”。该设计主要采用白色画布，搭配接近黑色的文本（`#1c1c1e`）以及独特的粉彩色调 —— 珊瑚色、玫瑰色、蓝绿色、橙色、黄色、苔藓色 —— 每种颜色代表不同的协作场景。
+
+排版方面使用 Roobert PRO Medium 作为主要展示字体，并启用 OpenType 字符变体（`"blwf", "cv03", "cv04", "cv09", "cv11"`）和负字间距（56px 时为 -1.68px）。Noto Sans 负责正文文本，并应用了其专属的样式集（`"liga" 0, "ss01", "ss04", "ss05"`）。整个设计基于 Framer 构建，从而呈现出流畅的动画效果与现代化的组件模式。
+
+**关键特征：**
+- 白色画布搭配接近黑色（`#1c1c1e`）的文本
+- 采用 Roobert PRO Medium 并包含多种 OpenType 字符变体
+- 柔和的粉彩调色板：珊瑚色、玫瑰色、蓝绿色、橙色、黄色、苔藓色（包含浅色与深色搭配）
+- Blue 450（`#5b76fe`）作为主要的交互色
+- 成功绿（`#00b473`）用于表示正向状态
+- 较大的圆角：范围在 8px–50px 之间
+- 基于 Framer 构建，具备平滑的运动模式
+- 环形阴影边框：`rgb(224,226,232) 0px 0px 0px 1px`
+
+## 2. 色彩调色板与角色
+
+### 主色调
+- **接近黑色**（`#1c1c1e`）：主要文本
+- **白色**（`#ffffff`）：`--tw-color-white`，主要表面
+- **Blue 450**（`#5b76fe`）：`--tw-color-blue-450`，主要交互色
+- **Actionable Pressed**（`#2a41b6`）：`--tw-color-actionable-pressed`
+
+### 柔和强调色（浅色/深色搭配）
+- **Coral**：浅色 `#ffc6c6` / 深色 `#600000`
+- **Rose**：浅色 `#ffd8f4` / 深色（隐式）
+- **Teal**：浅色 `#c3faf5` / 深色 `#187574`
+- **Orange**：浅色 `#ffe6cd`
+- **Yellow**：深色 `#746019`
+- **Moss**：深色 `#187574`
+- **Pink**（`#fde0f0`）：柔和粉色表面
+- **Red**（`#fbd4d4`）：浅红色表面
+- **Dark Red**（`#e3c5c5`）：柔和的红色
+
+### 语义色
+- **Success**（`#00b473`）：`--tw-color-success-accent`
+
+### 中性色
+- **Slate**（`#555a6a`）：次要文本
+- **Input Placeholder**（`#a5a8b5`）：`--tw-color-input-placeholder`
+- **Border**（`#c7cad5`）：按钮边框
+- **Ring**（`rgb(224,226,232)`）：作为边框的阴影
+
+## 3. 排版规则
+
+### 字体系列
+- **展示字体**：`Roobert PRO Medium`，后备字体：替代字体 — `"blwf", "cv03", "cv04", "cv09", "cv11"`
+- **展示字体变体**：`Roobert PRO SemiBold`, `Roobert PRO SemiBold Italic`, `Roobert PRO`
+- **正文**：`Noto Sans` — `"liga" 0, "ss01", "ss04", "ss05"`
+
+### 层级结构
+
+| 角色 | 字体 | 尺寸 | 字重 | 行高 | 字间距 |
+| ------ | ------ | ------ | -------- | ------------- | ---------------- |
+| 展示主视觉 | Roobert PRO Medium | 56px | 400 | 1.15 | -1.68px |
+| 章节标题 | Roobert PRO Medium | 48px | 400 | 1.15 | -1.44px |
+| 卡片标题 | Roobert PRO Medium | 24px | 400 | 1.15 | -0.72px |
+| 副标题 | Noto Sans | 22px | 400 | 1.35 | -0.44px |
+| 特性文本 | Roobert PRO Medium | 18px | 600 | 1.35 | normal |
+| 正文 | Noto Sans | 18px | 400 | 1.45 | normal |
+| 标准正文 | Noto Sans | 16px | 400–600 | 1.50 | -0.16px |
+| 按钮 | Roobert PRO Medium | 17.5px | 700 | 1.29 | 0.175px |
+| 说明文本 | Roobert PRO Medium | 14px | 400 | 1.71 | normal |
+| 小号文本 | Roobert PRO Medium | 12px | 400 | 1.15 | -0.36px |
+| 微型大写文本 | Roobert PRO | 10.5px | 400 | 0.90 | uppercase |
+
+## 4. 组件样式
+
+### 按钮
+- 描边按钮：透明背景，`1px solid #c7cad5`，8px 圆角，7px 12px 内边距
+- 白色圆形按钮：50% 圆角，白色背景带阴影
+- 蓝色主要按钮（从交互色中隐式得出）
+
+### 卡片：12px–24px 圆角，柔和色彩背景
+### 输入框：白色背景，`1px solid #e9eaef`，8px 圆角，16px 内边距
+
+## 5. 布局原则
+- 间距：1–24px 基础比例
+- 圆角：8px（按钮），10px–12px（卡片），20px–24px（面板），40px–50px（大型容器）
+- 环形阴影：`rgb(224,226,232) 0px 0px 0px 1px`
+
+## 6. 深度与高度
+极简风格 —— 环形阴影 + 柔和色彩的表面对比
+
+## 7. 宜与忌
+### 宜
+- 在功能区块使用浅色/深色的柔和色彩组合
+- 应用 Roobert PRO 及 OpenType 字符变体
+- 交互元素使用 Blue 450 (#5b76fe)
+### 忌
+- 不要使用厚重的阴影
+- 单个区块内混合的强调色不要超过 2 种
+
+## 8. 响应式行为
+断点：425px, 576px, 768px, 896px, 1024px, 1200px, 1280px, 1366px, 1700px, 1920px
+
+## 9. Agent 提示词指南
+### 快速颜色参考
+- 文本：接近黑色（`#1c1c1e`）
+- 背景：白色（`#ffffff`）
+- 交互色：Blue 450（`#5b76fe`）
+- 成功色：`#00b473`
+- 边框：`#c7cad5`
+### 示例组件提示词
+- "Create hero: white background. Roobert PRO Medium 56px, line-height 1.15, letter-spacing -1.68px. Blue CTA (#5b76fe). Outlined secondary (1px solid #c7cad5, 8px radius)."