@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,336 @@
+# 设计系统：VoltAgent
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原网站使用专有字体。对于自包含的 HTML 输出，请使用以下 CDN 替代方案：
+> - **主字体:** `system-ui` | **等宽字体:** `JetBrains Mono`
+> - **字体栈 (CSS):** `font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;`
+> - **等宽字体栈 (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=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` 技能（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+VoltAgent 的界面是为 AI 时代打造的深空指挥终端——一种面向开发者的暗黑设计，建立在近乎纯黑的表面（`#050507`）之上，唯一的点缀是祖母绿能量带来的电脉冲感。整个体验唤起了凌晨 2 点凝视高性能 IDE 的感觉：黑暗、专注，充满目标感。这不是一个友好的 SaaS 落地页——它是一个工程平台，通过代码片段、架构图和纯粹的技术自信来宣告自身的存在。
+
+绿色强调色（`#00d992`）的使用极其精准——它像传输信号的电路板一样，在标题、边框和交互元素上发光。在碳黑色的画布上，这种绿色代表着“已通电”——这是对 AI agent 工程平台深思熟虑的视觉隐喻。辅助色板完全由暖中性灰（`#3d3a39`, `#8b949e`, `#b8b3b0`）构建，在不引入色彩噪音的情况下柔化了黑暗感，营造出一种纯蓝灰色所缺乏的驾驶舱般的温暖感。
+
+排版上，标题选用系统字体栈——以实现最快的渲染速度和原生的权威感——而正文和 UI 文本则由 Inter 以几何般的精准度呈现。代码块使用 SFMono-Regular，这是开发者在终端中看到的同款字体，在每一次滚动中强化着工具的可靠性。
+
+**核心特征：**
+- 碳黑色画布（`#050507`）结合暖灰色边界约束（`#3d3a39`）——既不冷酷也不显得生硬
+- 单一强调色身份：祖母绿信号绿（`#00d992`）作为唯一的色彩能量源
+- 双重排版系统：system-ui 用于权威标题，Inter 用于精准的 UI/正文文本，SFMono 用于提升代码的可靠性
+- 超紧凑的标题行高（1.0–1.11）构建出密集、凝练的能量块
+- 暖中性色调（`#3d3a39`, `#8b949e`, `#b8b3b0`）防止暗色主题显得过于冷峻
+- 开发者终端美学：代码片段即为核心内容
+- 绿色辉光效果（`drop-shadow`，边缘强调）让 UI 元素感觉像通电般活灵活现
+
+## 2. 色彩调色板与角色
+
+### 主色调
+- **Emerald Signal Green** (`#00d992`)：核心品牌能量——用于强调边框、辉光效果以及信号最强的交互瞬间。这是整个界面的“已通电”指示灯。
+- **VoltAgent Mint** (`#2fd6a1`)：品牌绿的按钮文本变体——比纯信号绿略暖且更具可读性，专门用于深色背景上的 CTA 文本。
+- **Tailwind Emerald** (`#10b981`)：生态系统标准绿，以低不透明度（30%）用于细微的背景着色和链接默认状态。将 VoltAgent 的自定义调色板与 Tailwind 的实用类连接起来。
+
+### 次要色调与强调色
+- **Soft Purple** (`#818cf8`)：一种冷色调的靛蓝-紫罗兰色，少量用于二次分类、代码语法高亮，在不与绿色冲突的情况下增加视觉多样性。
+- **Cobalt Primary** (`#306cce`)：Docusaurus 的主暗色——用于文档环境中的链接和交互焦点状态。
+- **Deep Cobalt** (`#2554a0`)：最深的原色色调，专为文档 UI 中的按下/激活状态保留。
+- **Ring Blue** (`#3b82f6`)：不透明度为 50% 的 Tailwind 聚焦环颜色——仅在键盘聚焦时可见，以满足无障碍合规性。
+
+### 表面与背景
+- **Abyss Black** (`#050507`)：落地页画布——一种近乎纯黑、带有极微弱暖色调底色的颜色，比大多数“暗色主题”更暗，以实现与绿色强调色的最大对比度。
+- **Carbon Surface** (`#101010`)：主要的卡片和按钮背景——比 Abyss Black 亮一个色阶，创建出一种几乎难以察觉的层级感。用于所有包含内容的表面。
+- **Warm Charcoal Border** (`#3d3a39`)：标志性的约束色——不是冷灰色，而是一种温暖、近乎棕色的深色调，防止边框在黑色画布上显得过于生硬。
+
+### 中性色与文本
+- **Snow White** (`#f2f2f2`)：深色表面上的主要文本颜色——不是纯白（`#ffffff`），而是一种柔和、护眼的灰白色。网站上使用最广泛的颜色（1008 处引用）。
+- **Pure White** (`#ffffff`)：专用于最高强调级别的时刻——幽灵按钮文本和最大对比度的标题。以低不透明度（5%）用于微妙的叠加效果。
+- **Warm Parchment** (`#b8b3b0`)：次要正文文本——一种温暖的浅灰色，带有微弱的粉色调底色，在深色画布上读起来有“纸张”的感觉。
+- **Steel Slate** (`#8b949e`)：三级文本、元数据、时间戳和弱化内容。一种冷色调的蓝灰色，在 Warm Parchment 之下提供清晰的层级。
+- **Fog Gray** (`#bdbdbd`)：页脚链接和辅助导航文本——悬停时变亮为 Pure White。
+- **Mist Gray** (`#dcdcdc`)：比 Fog Gray 略亮，用于悬停时会过渡为亮绿色的次要链接文本。
+- **Near White** (`#eeeeee`)：最高对比度的次要文本，比 Snow White 低一个层级。
+
+### 语义色与强调色
+- **Success Emerald** (`#008b00`)：深绿色，用于文档环境中的成功状态和积极确认。
+- **Success Light** (`#80d280`)：柔和的粉彩绿，用于成功背景和微妙的积极指示。
+- **Warning Amber** (`#ffba00`)：明亮的琥珀色，用于警告提醒和注意状态。
+- **Warning Pale** (`#ffdd80`）：柔和的琥珀色，用于警告背景填充。
+- **Danger Coral** (`#fb565b`）：鲜艳的红色，用于错误状态和破坏性操作警告。
+- **Danger Rose** (`#fd9c9f`)：柔和的珊瑚粉色，用于错误背景。
+- **Info Teal** (`#4cb3d4`）：冷色调的青蓝色，用于信息提示和温馨提示。
+- **Dashed Border Slate** (`40%` 不透明度的 `#4f5d75`)：一种柔和的蓝灰色，专门用于工作流图表中的装饰性虚线边框。
+
+### 渐变系统
+- **Green Signal Glow**：`drop-shadow(0 0 2px #00d992)` 动画过渡到 `drop-shadow(0 0 8px #00d992)`——在 VoltAgent 闪电图标和交互元素上创造了一种脉动的“电荷”效果。这种辉光像心跳一样扩张和收缩。
+- **Warm Ambient Haze**：`rgba(92, 88, 85, 0.2) 0px 0px 15px`——一种暖色调的漫反射阴影，在悬浮的卡片周围营造出柔和的大气辉光，边缘可见且没有锐利的边界。
+- **Deep Dramatic Elevation**：`rgba(0, 0, 0, 0.7) 0px 20px 60px` 配合 `rgba(148, 163, 184, 0.1) 0px 0px 0px 1px inset`——厚重的戏剧性向下阴影，加上一圈微弱的内嵌板岩灰光环，专用于最突出的浮动元素。
+
+## 3. 排版规则
+
+### 字体系列
+- **主字体 (标题)**：`system-ui`，备选字体：`-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol`
+- **次要字体 (正文/UI)**：`Inter`，备选字体继承自 system-ui 栈。OpenType 特性：`"calt", "rlig"`（上下文备选和必需连字）
+- **等宽字体 (代码)**：`SFMono-Regular`，备选字体：`Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace`
+
+### 层级
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | system-ui | 60px (3.75rem) | 400 | 1.00 (紧凑) | -0.65px | 最大视觉冲击，压缩块 |
+| Section Heading | system-ui | 36px (2.25rem) | 400 | 1.11 (紧凑) | -0.9px | 系统中最紧凑的字间距 |
+| Sub-heading | system-ui | 24px (1.50rem) | 700 | 1.33 | -0.6px | 当前尺寸下使用粗体强调 |
+| Sub-heading Light | system-ui / Inter | 24px (1.50rem) | 300–400 | 1.33 | -0.6px | 细体变体，用于更柔和的层级 |
+| Overline | system-ui | 20px (1.25rem) | 600 | 1.40 | 0.5px | 大写转换，正字间距 |
+| Feature Title | Inter | 20px (1.25rem) | 500–600 | 1.40 | normal | 卡片标题，功能名称 |
+| Overline Small | Inter | 18px (1.13rem) | 600 | 1.56 | 0.45px | 大写区段标签 |
+| Body / Button | Inter | 16px (1.00rem) | 400–600 | 1.50–1.65 | normal | 标准文本，导航链接，按钮 |
+| Nav Link | Inter | 14.45px (0.90rem) | 500 | 1.65 | normal | 导航专用尺寸 |
+| Caption / Label | Inter | 14px (0.88rem) | 400–600 | 1.43–1.65 | normal | 描述，元数据，徽章文本 |
+| Tag / Overline Tiny | system-ui | 14px (0.88rem) | 600 | 1.43 | 2.52px | 最宽字间距——专用于大写标签 |
+| Micro | Inter | 12px (0.75rem) | 400–500 | 1.33 | normal | 最小的无衬线文本 |
+| Code Body | SFMono-Regular | 13–14px | 400–686 | 1.23–1.43 | normal | 行内代码，终端输出，语法变量字重 |
+| Code Small | SFMono-Regular | 11–12px | 400 | 1.33–1.45 | normal | 微小的代码引用，行号 |
+| Code Button | monospace | 13px (0.81rem) | 700 | 1.65 | normal | 复制到剪贴板按钮标签 |
+
+### 原则
+- **系统原生的权威感**：Display 标题使用 system-ui 而不是自定义的 Web 字体——这意味着最大的文本会瞬间渲染（无 FOIT/FOUT）并继承操作系统的原生个性。在 macOS 上是 SF Pro，在 Windows 上是 Segoe UI。设计将这种多变性视为一种特性，而非缺陷。
+- **紧凑压缩创造密度**：Hero 行高极度压缩（1.0）并带有负字间距（-0.65px 到 -0.9px），创造出读起来像密集的技术规格说明的文本块，而不是空洞的营销文案。
+- **字重渐变，而非字重对比**：系统使用平滑的 300→400→500→600→700 字重过渡。粗体（700）专用于副标题和代码按钮的强调。大多数正文位于 400–500，创造出微妙而非戏剧化的层级。
+- **大写是赢得的且宽阔的**：当出现大写字母时，总是伴随着宽松的字间距（0.45px–2.52px），将密集的单词转化为间距开阔的 overline 标签。这种处理绝不应用于标题。
+- **默认启用 OpenType**：system-ui 和 Inter 都启用了 `"calt"` 和 `"rlig"` 特性，确保全程的上下文字符调整和连字渲染。
+
+## 4. 组件样式
+
+### 按钮
+
+**幽灵 / 描边按钮 (标准)**
+- 背景：透明
+- 文本：Pure White (`#ffffff`)
+- 内边距：舒适 (12px 16px)
+- 边框：细实线 Warm Charcoal (`1px solid #3d3a39`)
+- 圆角：舒适圆角 (6px)
+- 悬停：背景加深至 `rgba(0, 0, 0, 0.2)`，不透明度降至 0.4
+- 轮廓：微弱的绿色色调 (`rgba(33, 196, 93, 0.5)`)
+- 默认的交互元素——低调但清晰可点击
+
+**主绿色 CTA**
+- 背景：Carbon Surface (`#101010`)
+- 文本：VoltAgent Mint (`#2fd6a1`)
+- 内边距：舒适 (12px 16px)
+- 边框：不可见（基于轮廓的焦点指示器）
+- 轮廓：VoltAgent Mint (`rgb(47, 214, 161)`)
+- 悬停：与幽灵按钮相同的加深行为
+- “已通电”按钮——深色背景上的绿色文本读起来就像活动的终端命令
+
+**三级 / 强调容器按钮**
+- 背景：Carbon Surface (`#101010`)
+- 文本：Snow White (`#f2f2f2`)
+- 内边距：宽裕（四周 20px）
+- 边框：粗实线 Warm Charcoal (`3px solid #3d3a39`)
+- 圆角：舒适圆角 (8px)
+- 一种类似卡片的按钮处理方式，适用于较大的交互表面（代码复制块、功能 CTA）
+
+### 卡片与容器
+- 背景：Carbon Surface (`#101010`)——比页面画布亮一个色阶
+- 边框：标准约束使用 `1px solid #3d3a39` (Warm Charcoal)；高亮/激活的卡片使用 `2px solid #00d992`
+- 圆角：内容卡片使用舒适圆角 (8px)；较小的内联容器使用微圆角 (4–6px)
+- 阴影级别 1：Warm Ambient Haze (`rgba(92, 88, 85, 0.2) 0px 0px 15px`)，用于标准的悬浮感
+- 阴影级别 2：Deep Dramatic (`rgba(0, 0, 0, 0.7) 0px 20px 60px` + `rgba(148, 163, 184, 0.1) 0px 0px 0px 1px inset`)，用于 Hero/核心功能展示卡片
+- 悬停行为：边框颜色可能向绿色强调色偏移，或微弱地增加不透明度
+- 虚线变体：`1px dashed rgba(79, 93, 117, 0.4)` 用于工作流/图表容器——在视觉上与实线边框的内容卡片区分开
+
+### 输入框与表单
+- 没有提取到明确的输入框 token 数据——网站专注于落地页，表单 UI 极少
+- npm 安装命令 (`npm create voltagent-app@latest`) 以代码块的形式呈现，而不是输入框
+- 推断样式：Carbon Surface 背景，Warm Charcoal 边框，VoltAgent Mint 焦点环，Snow White 文本
+
+### 导航
+- Abyss Black 画布上的粘性顶部导航栏
+- Logo：带有动态绿色辉光的 VoltAgent 闪电图标 (`drop-shadow` 在 2px–8px 之间循环)
+- 导航结构：Logo → Product 下拉菜单 → Use Cases 下拉菜单 → Resources 下拉菜单 → GitHub 星标徽章 → Docs CTA
+- 链接文本：14–16px Inter，字重 500 的 Snow White (`#f2f2f2`)
+- 悬停：链接过渡到绿色变体（`#00c182` 或 `#00ffaa`）
+- GitHub 徽章：直接集成在导航中的社会认同元素
+- 移动端：折叠为汉堡菜单，单列垂直布局
+
+### 图像处理
+- 以深色主题的产品截图和架构图为主
+- 代码块被视为主要的视觉内容——使用 SFMono-Regular 进行语法高亮
+- Agent 工作流可视化显示为带有绿色连接线的交互式节点图
+- Hero 部分背后出现装饰性的点阵背景
+- 在卡片容器内全出血，遵循 8px 圆角弧度
+
+### 特色组件
+
+**npm 安装 Command Block**
+- 突出的代码片段 (`npm create voltagent-app@latest`)，样式化为可复制的命令
+- 在 Carbon Surface 上使用 SFMono-Regular，配有一个复制到剪贴板的按钮
+- 作为主要的 CTA 发挥作用——符合开发者“先安装，后阅读”的心理
+
+**公司 Logo 展示**
+- 开发者/公司 logo 的水平滚动条
+- 无限循环动画（`scrollLeft`/`scrollRight`，持续 25–80 秒）
+- 鼠标悬停时暂停，并针对有减少动态偏好的用户暂停
+- 展示生态系统的采用情况，而不会使布局显得杂乱
+
+**特性 Section Cards**
+- 结合了代码示例和描述性文字的大卡片
+- 左侧：带语法高亮的代码片段；右侧：功能描述
+- 高亮/激活的功能上带有绿色强调边框 (`2px solid #00d992`)
+- 内部边距：宽裕（估计为 24–32px）
+
+**Agent Flow Diagrams**
+- 展示 agent 协调的交互式节点图可视化
+- 连接线使用 VoltAgent 绿色变体
+- 节点样式化为 Warm Charcoal 边框系统内的微型卡片
+
+**社区 / GitHub Section**
+- 大型的 GitHub 图标作为视觉锚点
+- 星标数和贡献者指标显著展示
+- 温暖的社会认同：页脚提供 Discord, X, Reddit, LinkedIn, YouTube 链接
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 比例：2px, 4px, 5px, 6px, 6.4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 64px
+- 按钮内边距：12px 16px（标准），20px（容器按钮）
+- 卡片内部边距：约 24–32px
+- 区段垂直间距：宽裕（主要区段之间估计为 64–96px）
+- 组件间距：兄弟卡片/元素之间为 16–24px
+
+### 网格与容器
+- 最大容器宽度：居中，约 1280–1440px
+- Hero：居中的单列，留有最大限度的呼吸空间
+- 特性部分：交替的不对称布局（左代码 / 右文本，然后反转）
+- Logo 跑马灯：全宽水平滚动，打破容器约束
+- 卡片网格：用于功能展示的 2–3 列布局
+- 集成网格：用于合作伙伴/集成图标的响应式多列布局
+
+### 留白哲学
+- **区段之间具有电影般的呼吸感**：巨大的垂直间隙创造了“滚动浏览章节”的体验——每个部分都像是一个新场景。
+- **组件内部紧凑**：卡片和代码块在内部是紧凑的，具有严格的行高和受控的内边距。信息是浓缩的，而非分散的。
+- **由边框定义的隔离**：VoltAgent 不完全依赖留白，而是使用 Warm Charcoal 边框系统（`#3d3a39`）来划定内容区域。边框本身就是留白的信号。
+- **Hero 优先的层级**：页面顶部占据了最大的空间——“AI Agent 工程平台”标题和 npm 命令在第一个内容区段出现之前，获得了最大的垂直展示空间。
+
+### 边框圆角比例
+- 近乎方形 (4px)：小型内联元素、SVG 容器、代码块——最锐利的处理方式，传达出技术精准感
+- 微圆角 (6px)：按钮、链接、剪贴板操作——交互元素的主力圆角
+- 代码专用 (6.4px)：代码块、`pre` 元素、剪贴板复制目标——与标准 6px 刻意的微小区别
+- 舒适圆角 (8px)：内容卡片、功能容器、强调按钮——标准的容器圆角
+- 胶囊形 (9999px)：标签、徽章、状态指示器、胶囊形导航元素——小型分类标签最圆的处理方式
+
+## 6. 深度与层级
+
+| 级别 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| 扁平 (Level 0) | 无阴影，无边框 | 页面背景 (`#050507`)，行内文本 |
+| 约束 (Level 1) | `1px solid #3d3a39`，无阴影 | 标准卡片、导航栏、代码块 |
+| 强调 (Level 2) | `3px solid #3d3a39`，无阴影 | 大型交互按钮、强调容器 |
+| 激活 (Level 3) | `2px solid #00d992`，无阴影 | 激活/高亮的功能卡片、选中状态 |
+| 环境辉光 (Level 4) | `rgba(92, 88, 85, 0.2) 0px 0px 15px` | 悬浮的卡片、悬停状态、柔和的大气抬升感 |
+| 戏剧性悬浮 (Level 5) | `rgba(0, 0, 0, 0.7) 0px 20px 60px` + `rgba(148, 163, 184, 0.1) 1px inset` | Hero 功能展示、模态框、最高层级的内容 |
+
+**阴影哲学**：VoltAgent 主要通过**边框的粗细和颜色**而非阴影来传达深度。标准的 `1px solid #3d3a39` 边框本身就是层级——增加 `3px` 的边框粗细或切换为绿色（`#00d992`）比添加阴影更能传达重要性。当阴影确实出现时，它们要么是温暖且漫反射的（Level 4），要么是电影级且具有戏剧性的（Level 5）——绝不会是中等的或普通的。
+
+### 装饰性深度
+- **Green Signal Glow**：VoltAgent 闪电图标的辉光伴随着 `drop-shadow` 动画在 Emerald Signal Green 中循环于 2px 和 8px 模糊半径之间。这是最具特色的装饰元素——它让 logo 感觉像是“已通电”。
+- **Warm Charcoal Containment Lines**：`#3d3a39` 边框的暖色调在冷酷的黑色背景上创造出一种微妙的视觉暖意，就好像卡片内部正微微发热。
+- **Dashed Workflow Lines**：`1px dashed rgba(79, 93, 117, 0.4)` 为架构图创造了类似蓝图的美学，在视觉上与实线的内容边框截然不同。
+
+## 7. 宜与忌
+
+### 宜
+- 使用 Abyss Black (`#050507`) 作为落地页背景，使用 Carbon Surface (`#101010`) 作为所有包含内容的元素——这种双色阶的暗色系统是至关重要的
+- 将 Emerald Signal Green (`#00d992`) 专门保留用于高强度信号时刻：激活边框、辉光效果以及最重要的交互强调
+- 在深色表面上的按钮文本中使用 VoltAgent Mint (`#2fd6a1`)——它比纯 Signal Green 更具可读性
+- 保持标题行高紧凑（1.0–1.11）并带有负字间距，以打造密集、具权威感的文本块
+- 使用暖灰色调（`#3d3a39`, `#8b949e`, `#b8b3b0`）作为边框和次要文本——暖意能防止暗色主题显得生硬
+- 将代码片段作为主要内容呈现——它们是主角元素，而不是辅助说明图
+- 使用边框粗细（1px → 2px → 3px）和颜色转换（`#3d3a39` → `#00d992`）来传达深度和重要性，而不是依赖阴影
+- 标题搭配 system-ui，正文搭配 Inter——原生字体的速度/权威感结合几何无衬线字体的精准度
+- 所有代码内容均使用 SFMono-Regular——这是开发者可靠性的信号
+- 在所有文本中应用 `"calt"` 和 `"rlig"` OpenType 特性
+
+### 忌
+- 不要使用明亮或浅色的背景作为主要表面——整个身份认同都建立在近乎纯黑的底色上
+- 不要引入暖色（橙色、红色、黄色）作为装饰性强调色——调色板严格限制为黑色背景上的绿色 + 暖中性色。暖色仅保留用于语义状态（警告、错误）
+- 不要在大面积表面上使用 Emerald Signal Green (`#00d992`) 或作为背景填充——它是强调色，绝不是表面色
+- 不要将标题行高增加到 1.33 以上——紧凑的密度是工程平台身份认同的核心
+- 不要滥用厚重的阴影——深度来自于边框处理，而不是 box-shadow。阴影仅保留给 Level 4–5 的层级
+- 不要使用纯白（`#ffffff`）作为默认正文文本——Snow White (`#f2f2f2`) 是标准色。纯白仅保留给最大强调的标题和按钮文本
+- 不要混入衬线体或装饰性字体——整个系统完全由几何无衬线体 + 等宽体构成
+- 不要在内容卡片上使用大于 8px 的 border-radius——9999px（胶囊形）仅适用于小型标签和徽章
+- 不要省略暖灰色边框系统——没有 `#3d3a39` 边框的卡片会失去约束感，在深色画布上显得漂浮不定
+- 不要使用过于激进的动画——动画应该是缓慢而微妙的（跑马灯持续 25–100 秒，辉光柔和地脉动）。快速的运动与“工程精准度”的氛围背道而驰
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 主要变化 |
+|------|-------|-------------|
+| 小型移动设备 | <420px | 最小布局，所有内容垂直堆叠，hero 文本缩小至约 24px |
+| 移动设备 | 420–767px | 单列，汉堡导航，全宽卡片，hero 文本约 36px |
+| 平板 | 768–1024px | 开始出现 2 列网格，紧凑导航，中等大小 hero 文本 |
+| 桌面 | 1025–1440px | 完整的多列布局，展开带下拉菜单的导航，大型 hero (60px) |
+| 大型桌面 | >1440px | 居中的最大宽度容器（估计 1280–1440px），宽裕的水平边距 |
+
+*总共检测到 23 个断点，范围从 360px 到 1992px——表明这是一个流式的、高度响应的网格系统，而不是固定的断点跳跃。*
+
+### 触控目标
+- 按钮使用舒适的内边距（最小 12px 16px），确保充足的触控区域
+- 导航链接间距充足，便于大拇指导航
+- 交互式卡片表面足够大，可作为完整的触控目标
+- 建议的最小触控目标：44x44px
+
+### 折叠策略
+- **导航**：带下拉菜单的完整水平导航在移动端折叠为汉堡菜单
+- **特性网格**：3 列 → 2 列 → 单列垂直堆叠
+- **Hero 文本**：60px → 36px → 24px 渐进缩放，同时保持压缩比例
+- **Logo 跑马灯**：调整滚动速度和项目大小；保持无限循环
+- **代码块**：在较小的视口上水平滚动，而不是换行——保持代码的可读性
+- **区段内边距**：按比例减小，但在各章节之间保持宽裕的垂直节奏
+- **卡片**：在移动端垂直堆叠，使用全宽处理方式并保持内部边距
+
+### 图像行为
+- 深色主题的截图和图表在容器内按比例缩放
+- Agent 流程图在狭窄的视口上简化或水平滚动
+- 点阵装饰背景随视口缩放
+- 断点之间没有可见的 art direction 更改——相同的裁剪，按比例缩放
+- 折叠下方图像的懒加载（Docusaurus 默认行为）
+
+## 9. Agent 提示词指南
+
+### 快速色彩参考
+- 品牌强调色："Emerald Signal Green (#00d992)"
+- 按钮文本："VoltAgent Mint (#2fd6a1)"
+- 页面背景："Abyss Black (#050507)"
+- 卡片表面："Carbon Surface (#101010)"
+- 边框 / 约束："Warm Charcoal (#3d3a39)"
+- 主要文本："Snow White (#f2f2f2)"
+- 次要文本："Warm Parchment (#b8b3b0)"
+- 三级文本："Steel Slate (#8b949e)"
+
+### 示例 Component Prompts
+- "Create a feature card on Carbon Surface (#101010) with a 1px solid Warm Charcoal (#3d3a39) border, comfortably rounded corners (8px). Use Snow White (#f2f2f2) for the title in system-ui at 24px weight 700, and Warm Parchment (#b8b3b0) for the description in Inter at 16px. Add a subtle Warm Ambient shadow (rgba(92, 88, 85, 0.2) 0px 0px 15px)."
+- "Design a ghost button with transparent background, Snow White (#f2f2f2) text in Inter at 16px, a 1px solid Warm Charcoal (#3d3a39) border, and subtly rounded corners (6px). Padding: 12px vertical, 16px horizontal. On hover, background shifts to rgba(0, 0, 0, 0.2)."
+- "Build a hero section on Abyss Black (#050507) with a massive heading at 60px system-ui, line-height 1.0, letter-spacing -0.65px. The word 'Platform' should be colored in Emerald Signal Green (#00d992). Below the heading, place a code block showing 'npm create voltagent-app@latest' in SFMono-Regular at 14px on Carbon Surface (#101010) with a copy button."
+- "Create a highlighted feature card using a 2px solid Emerald Signal Green (#00d992) border instead of the standard Warm Charcoal. Keep Carbon Surface background, comfortably rounded corners (8px), and include a code snippet on the left with feature description text on the right."
+- "Design a navigation bar on Abyss Black (#050507) with the VoltAgent logo (bolt icon with animated green glow) on the left, nav links in Inter at 14px weight 500 in Snow White, and a green CTA button (Carbon Surface bg, VoltAgent Mint text) on the right. Add a 1px solid Warm Charcoal bottom border."
+
+### 迭代指南
+当使用此设计系统优化已生成的屏幕时：
+1. 每次只专注于 ONE 组件
+2. 引用特定的颜色名称和十六进制代码——说“use Warm Parchment (#b8b3b0)”而不是“让它变亮一点”
+3. 使用边框处理来传达层级：“change the border to 2px solid Emerald Signal Green (#00d992)”以进行强调
+4. 将测量数据与期望的“感觉”一同描述——“compressed and authoritative heading at 36px with line-height 1.11 and -0.9px letter-spacing”
+5. 对于辉光效果，请指定“Emerald Signal Green (#00d992) as a drop-shadow with 2–8px blur radius”
+6. 务必指定使用哪种字体——标题使用 system-ui，正文/UI 使用 Inter，代码使用 SFMono-Regular
+7. 保持动画缓慢而微妙——跑马灯滚动 25–80 秒，辉光柔和地脉动

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

@@ -0,0 +1,265 @@
+# 设计系统：Warp
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原始网站使用了专有字体。对于自包含的 HTML 输出，请使用这些 CDN 替代字体：
+> - **Primary:** `Geist` | **Mono:** `Geist Mono`
+> - **Font stack (CSS):** `font-family: 'Geist', 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=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` 技能（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Warp 的网站感觉就像是坐在深林的篝火旁——温暖、幽暗，充满着宁静的自信。与大多数开发者工具偏爱的冷色调蓝黑不同，Warp 将一切包裹在温暖的近黑色中，感觉就像烧焦的木头或深色的泥土。文本也不是纯白色的——而是 Warm Parchment (`#faf9f6`)，一种几乎难以察觉的奶油色，它柔化了所有的标题，让深色画布显得平易近人，而不是冷峻 austere。
+
+排版是秘密武器：Matter，一种具有鲜明个性的几何无衬线字体，在几乎所有文本中都使用 Regular 字重。这种字体选择对于开发者工具来说很不寻常——Matter 具有一种柔软和人性化感，暗示着“这款终端是为所有人设计的，而不仅仅是经验丰富的老手。”结合紧凑的行高和标题上受控的负字间距，这种效果既精致又平易近人。自然摄影穿插在终端截图之间，创造出一种视觉语言：这款工具能让你更接近心流，享受平静的生产力。
+
+整体设计理念是通过温暖来体现克制。极少的色彩（几乎是单色的暖灰色），极少的装饰，以及将产品展示置于电影般深色风景中的焦点。这是一家像生活方式品牌一样营销的终端公司。
+
+**关键特征：**
+- 温暖的深色背景——不是冷峻的黑色，而是带有暖灰色底色的泥土般的近黑色
+- 使用 Warm Parchment (`#faf9f6`) 文本代替纯白色——微妙的奶油暖意
+- Matter 字体家族（Regular 字重）——几何风格但平易近人，不是典型的开发者工具字体
+- 自然摄影与产品截图交错——生活方式与开发者工具的结合
+- 几乎单色的暖灰色调——没有大胆的强调色
+- 带有宽字间距 (2.4px) 的大写标签用于分类——编辑信号
+
+## 2. 色彩调色板与角色
+
+### Primary
+- **Warm Parchment** (`#faf9f6`)：Primary 文本颜色——一种柔和的米白色，软化所有表面
+- **Earth Gray** (`#353534`)：Button 背景、深色交互表面——温暖，不寒冷
+- **Deep Void**（接近黑色，页面背景）：源自 body 背景的温暖深色画布
+
+### Secondary & Accent
+- **Stone Gray** (`#868584`)：Secondary 文本、柔和描述——温暖的中灰色
+- **Ash Gray** (`#afaeac`)：Body 文本、button 文本——主要的阅读颜色
+- **Purple-Tint Gray** (`#666469`)：带有微妙紫色底色的 Link 文本——内容中的带下划线链接
+
+### Surface & Background
+- **Frosted Veil** (`rgba(255, 255, 255, 0.04)`)：用于区分表面的极微妙的白色叠加层
+- **Mist Border** (`rgba(226, 226, 226, 0.35)` / `rgba(227, 227, 227, 0.337)`)：用于卡片包裹的半透明边框
+- **Translucent Parchment** (`rgba(250, 249, 246, 0.9)`)：稍微透明的 Primary 表面，营造纵深感
+
+### Neutrals & Text
+- **Warm Parchment** (`#faf9f6`)：标题、高强调文本
+- **Ash Gray** (`#afaeac`)：Body 段落、描述
+- **Stone Gray** (`#868584`)：Secondary 标签、柔和信息
+- **Muted Purple** (`#666469`)：带下划线链接、tertiary 内容
+- **Dark Charcoal** (`#454545` / `#353534`)：边框、Button 背景
+
+### Semantic & Accent
+- Warp 作为一个几乎单色的系统运行——没有大胆的强调色
+- 交互状态通过 opacity 变化和下划线装饰来传达，而不是颜色转换
+- 任何强调色都会破坏温暖、克制的调色板
+
+### Gradient System
+- 营销网站上没有明确的渐变
+- 纵深感是通过分层的半透明表面和摄影来创造的，而不是通过颜色渐变
+
+## 3. 排版规则
+
+### Font Family
+- **Display & Body**: `Matter Regular` —— 具有柔和特性的几何无衬线字体。Fallbacks：`Matter Regular Placeholder`，system sans-serif
+- **Medium**: `Matter Medium` —— 用于强调的 500 字重变体。Fallbacks：`Matter Medium Placeholder`
+- **Square**: `Matter SQ Regular` —— 用于特定展示环境的方形变体。Fallbacks：`Matter SQ Regular Placeholder`
+- **UI Supplement**: `Inter` —— 用于特定 UI 元素。Fallbacks：`Inter Placeholder`
+- **Monospace Display**: `Geist Mono` —— 用于代码/终端展示标题
+- **Monospace Body**: `Matter Mono Regular` —— 自定义等宽伴侣字体。Fallbacks：`Matter Mono Regular Placeholder`
+
+### 层级
+
+| 角色 | Font | Size | Weight | Line Height | Letter Spacing | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Matter Regular | 80px | 400 | 1.00 | -2.4px | 最大压缩，hero 冲击力 |
+| Section Display | Matter Regular | 56px | 400 | 1.20 | -0.56px | 特性区域标题 |
+| Section Heading | Matter Regular | 48px | 400 | 1.20 | -0.48px 至 -0.96px | 备选标题字重 |
+| Feature Heading | Matter Regular | 40px | 400 | 1.10 | -0.4px | 特性区块标题 |
+| Sub-heading Large | Matter Regular | 36px | 400 | 1.15 | -0.72px | 子区域标题 |
+| Card Display | Matter SQ Regular | 42px | 400 | 1.00 | 0px | 用于特殊展示的方形变体 |
+| Sub-heading | Matter Regular | 32px | 400 | 1.19 | 0px | 内容子标题 |
+| Body Heading | Matter Regular | 24px | 400 | 1.20 | -0.72px 至 0px | 加粗的内容介绍 |
+| Card Title | Matter Medium | 22px | 500 | 1.14 | 0px | 强调的卡片标题 |
+| Body Large | Matter Regular | 20px | 400 | 1.40 | -0.2px | Primary body 文本，宽松 |
+| Body | Matter Regular | 18px | 400 | 1.30 | -0.18px | 标准 body 段落 |
+| Nav/UI | Matter Regular | 16px | 400 | 1.20 | 0px | 导航链接、UI 文本 |
+| Button Text | Matter Medium | 16px | 500 | 1.20 | 0px | Button 标签 |
+| Caption | Matter Regular | 14px | 400 | 1.00 | 1.4px | 大写标签（transform: uppercase） |
+| Small Label | Matter Regular | 12px | 400 | 1.35 | 2.4px | 大写微型标签（transform: uppercase） |
+| Micro | Matter Regular | 11px | 400 | 1.20 | 0px | 最小的文本元素 |
+| Code UI | Geist Mono | 16px | 400 | 1.00 | 0px | 终端/代码展示 |
+| Code Body | Matter Mono Regular | 16px | 400 | 1.00 | -0.2px | 代码内容 |
+| UI Supplement | Inter | 16px | 500 | 1.00 | -0.2px | 特定 UI 元素 |
+
+### 原则
+- **Regular 字重主导**：几乎所有文本都使用 400 字重——甚至是标题。Matter Medium (500) 仅在需要强调的时候出现，如卡片标题和 Button。这创造了一种极其均匀、平静的排版质感
+- **大写作为编辑信号**：小标签和类别使用大写转换并配以宽字间距 (1.4px–2.4px)，创建了杂志编辑分类系统
+- **温暖的易读性**：Matter 的几何柔和感 + 暖色调文本颜色 (#faf9f6) + 受控的负字间距相结合，创造出在深色表面上毫不费力、充满人性的文本阅读体验
+- **没有粗体展示**：任何地方都没有使用粗体 (700+) 字重——克制即是其哲学
+
+## 4. 组件样式
+
+### Button
+- **Dark Pill**：`#353534` 背景，Ash Gray (`#afaeac`) 文本，药丸形状（50px 圆角），`10px` 内边距。Primary CTA——温暖、柔和、低调
+- **Frosted Tag**：`rgba(255, 255, 255, 0.16)` 背景，黑色文本 (`rgb(0, 0, 0)`)，矩形（6px 圆角），`1px 6px` 内边距。小型内联标签式 Button
+- **Ghost**：没有可见背景，仅有文本，hover 时显示下划线装饰
+- **Hover**：微妙的 opacity 或亮度变化——没有戏剧性的颜色变化
+
+### Card 与 Container
+- **Photography Card**：全出血自然图像带覆盖文本，8px–12px 边框圆角
+- **Terminal Screenshot Card**：嵌入在深色容器中的产品 UI，带有圆角（8px–12px）
+- **Bordered Card**：用于包裹的半透明边框 (`rgba(226, 226, 226, 0.35)`)，12px–14px 圆角
+- **Hover**：极少变化——内容卡片在 hover 时不会发生剧变，保持平静的美学
+
+### Input 与 Form
+- 营销网站上的 Form 存在感极低
+- 深色背景的 input 配有暖灰色文本
+- Focus：边框亮度增加，没有彩色光环（与单色调色板保持一致）
+
+### 导航
+- **顶部导航**：深色背景，暖羊皮纸纸品牌文本，链接使用 Matter Regular 16px
+- **Link 颜色**：使用 Stone Gray (`#868584`) 实现柔和导航，active/hover 时使用 Warm Parchment
+- **CTA Button**：导航栏末尾的 Dark pill (#353534)——克制，不引人注目
+- **Mobile**：折叠为简化的导航
+- **Sticky**：滚动时导航保持固定
+
+### 图像处理
+- **自然摄影**：风景、森林、黄金时刻场景——对于开发者工具来说完全独一无二
+- **终端截图**：在逼真的终端窗口框架中展示产品 UI
+- **混合构图**：自然图像和终端截图交替出现，创造了生活方式与工具相遇的叙事
+- **全出血**：图像通常跨越整个容器宽度，带有 8px 圆角
+- **视频**：视频元素具有 10px 边框圆角
+
+### 推荐语部分
+- 社会认同区域（“不要只听我们的一面之词”）包含引言
+- 柔和的样式与整体克制风格保持一致
+
+## 5. 布局原则
+
+### 间距系统
+- **基本单位**：8px
+- **比例**：1px, 4px, 5px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 24px, 26px, 30px, 32px, 36px
+- **区域间距**：主要区域之间垂直间距为 80px–120px
+- **Card 间距**：内部间距为 16px–32px
+- **组件间距**：相关元素之间为 8px–16px
+
+### Grid 与 Container
+- **最大宽度**：约 1500px 的容器（断点在 1500px），居中
+- **列模式**：全宽 hero，带照片的 2 列特性区域，单列推荐语
+- **电影感布局**：宽容器让摄影有呼吸空间
+
+### 留白哲学
+- **广阔而温暖**：区域间宽敞的间距——深色背景创造了温暖的空白，感觉是深思熟虑的，而不是空洞的
+- **摄影即留白**：自然图像在密集的产品信息之间充当视觉呼吸空间
+- **编辑节奏**：布局读起来就像一本杂志——每个区域都是刻意的翻页时刻
+
+### Border Radius 比例
+- **4px**：小型交互元素——Button、标签
+- **5px–6px**：标准组件——链接、小容器
+- **8px**：图像、视频容器、标准 Card
+- **10px**：视频元素、中等容器
+- **12px**：特性卡片、大图像
+- **14px**：大型容器、突出的 Card
+- **40px**：大型圆角区域
+- **50px**：Pill button——Primary CTA
+- **200px**：进度条——完整的 pill 形状
+
+## 6. 深度与层级
+
+| 级别 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Level 0 (Flat) | 无 shadow，深色背景 | 页面画布、大多数表面 |
+| Level 1 (Veil) | `rgba(255, 255, 255, 0.04)` 叠加层 | 微妙的表面区分 |
+| Level 2 (Border) | `rgba(226, 226, 226, 0.35) 1px` 边框 | Card 包裹、区域分隔 |
+| Level 3 (Ambient) | `rgba(0, 0, 0, 0.2) 0px 5px 15px`（从设计中推断） | 图像容器、浮动元素 |
+
+### Shadow 哲学
+Warp 的层级系统极其扁平——营销网站上几乎不使用 shadow。深度通过以下方式传达：
+- **半透明边框**代替 shadow——35% opacity 的边框创造了幽灵般的包裹感
+- **摄影分层**——图像创造了自然的深度，无需人工 shadow
+- **表面 opacity 变化**——`rgba(255, 255, 255, 0.04)` 叠加层创造了难以察觉的层次差异
+- 其效果是平静而踏实的——没有东西是悬浮的，一切都安放着
+
+### 装饰深度
+- **摄影即深度**：自然图像创造了 shadow 无法创造的氛围深度
+- **没有毛玻璃或模糊效果**：设计完全避免了流行的毛玻璃效果
+- **温暖的环境**：任何发光都来自摄影的自然光线，而不是人工 CSS
+
+## 7. 宜与忌
+
+### 宜
+- 使用暖灰白色 (`#faf9f6`) 作为文本颜色而不是纯白色——奶油底色是必不可少的
+- 保持 Button 克制和柔和——深色填充 (#353534) 配柔和文本 (#afaeac)，不要明亮的 CTA
+- 几乎所有内容都应用 Matter Regular（字重 400）——甚至是标题。仅在需要强调时使用 Medium（500）
+- 使用带有宽字间距（1.4px–2.4px）的大写标签进行分类
+- 将自然摄影与产品截图穿插——这是品牌标识的核心
+- 保持几乎单色的暖灰色调——没有大胆的强调色
+- 使用半透明边框（`rgba(226, 226, 226, 0.35)`）来包裹 Card，而不是使用 shadow
+- 在标题上保持负字间距（-0.4px 到 -2.4px），以体现 Matter 压缩的展示处理效果
+
+### 忌
+- 使用纯白色 (#ffffff) 作为文本——它始终是温暖的羊皮纸色 (#faf9f6)
+- 添加大胆的强调色（蓝色、红色、绿色）——该系统是刻意设计的单色暖灰色
+- 对任何文本应用粗体字重（700+）——Warp 从不超过 Medium（500）
+- 使用厚重的 drop shadow——深度来自边框、摄影和 opacity 变化
+- 创建冷色调或带蓝色底色的深色背景——温暖是必不可少的
+- 添加装饰性渐变或发光效果——摄影提供了所有的视觉趣味
+- 使用紧凑、压缩的布局——编辑间距是宽敞且经过深思熟虑的
+- 混入 Matter 家族 + Inter 补充字体之外的其他字体
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Mobile | <810px | 单列、堆叠区域、hero 文本缩小至 ~48px、汉堡菜单 |
+| Tablet | 810px–1500px | 开始出现 2 列特性、摄影缩放、导航链接部分可见 |
+| Desktop | >1500px | 完整的电影感布局、80px hero 展示、并排的摄影 + 文本 |
+
+### 触摸目标
+- Pill button：50px 圆角，10px 内边距——舒适的触摸目标
+- 导航链接：16px 文本带周围内边距，便于无障碍访问
+| Mobile CTA：Mobile 设备上的全宽 pill，方便拇指触达
+
+### 折叠策略
+- **导航**：完整的横向导航 → 简化的移动端导航
+- **Hero 文本**：80px 展示 → 56px → 48px（跨断点变化）
+- **特性区域**：并排的摄影 + 文本 → 垂直堆叠
+- **摄影**：在容器内缩放，保持电影般的宽高比
+- **区域间距**：按比例缩小——宽敞的桌面端 → 紧凑的移动端
+
+### 图像行为
+- 自然摄影响应式缩放，保持宽广的电影比例
+- 终端截图在响应式容器内保持宽高比
+- 视频元素缩放，保持 10px 圆角
+- 没有艺术指导更改——跨断点的组合相同
+
+## 9. Agent 提示指南
+
+### 快速颜色参考
+- Primary 文本：Warm Parchment (`#faf9f6`)
+- Secondary 文本：Ash Gray (`#afaeac`)
+- Tertiary 文本：Stone Gray (`#868584`)
+- Button 背景：Earth Gray (`#353534`)
+- 边框：Mist Border (`rgba(226, 226, 226, 0.35)`)
+- 背景：Deep warm near-black（页面背景）
+
+### 示例组件提示
+- “在温暖的深色背景上创建一个 hero 区域，使用 80px Matter Regular 标题，颜色为暖羊皮纸色 (#faf9f6)，行高 1.0，字间距 -2.4px，以及一个 dark pill button（#353534，50px 圆角，#afaeac 文本）”
+- “设计一张带有半透明边框（rgba(226,226,226,0.35)）、12px 圆角、温暖深色背景的特性 Card，使用 24px Matter Regular 标题，以及 18px Ash Gray (#afaeac) Body 文本”
+- “构建一个类别标签，使用 12px Matter Regular，大写转换，字间距 2.4px，Stone Gray (#868584) 颜色——编辑杂志风格”
+- “创建一个推荐语区域，引言使用 24px Matter Regular 的暖羊皮纸色，署名使用 Stone Gray (#868584)，背景为深色，极少装饰”
+- “设计一个导航栏，具有温暖的深色背景，16px 的 Matter Regular 链接使用 Stone Gray (#868584)，hover 时变为暖羊皮纸色 (#faf9f6)，右侧带有一个 dark pill CTA Button (#353534)”
+
+### 迭代指南
+在使用此设计系统优化生成的现有屏幕时：
+1. 验证文本颜色是 Warm Parchment (#faf9f6) 而不是纯白色——这种温暖感虽微妙但必不可少
+2. 确保所有 Button 都使用克制的深色调色板 (#353534)——没有明亮或多彩的 CTA
+3. 检查 Matter Regular (400) 是否为默认字重——Medium (500) 仅用于强调
+4. 确认大写标签具有宽字间距（1.4px–2.4px）——紧凑的大写字母在这里会显得不合适
+5. 整体基调应该感觉温暖和平静，就像一本设计精美的杂志——而不是激进或科技感炫目的