@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,280 @@
+# Design System: Ollama
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原网站使用专有字体。对于独立的 HTML 输出，请使用这些 CDN 替代字体：
+> - **主要字体:** `Inter` | **等宽字体:** `JetBrains Mono`
+> - **字体栈 (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 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=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. 视觉主题与氛围
+
+Ollama 的界面将极简主义推向了极致——这是一个纯白色的虚空，内容在其中浮动，没有装饰、阴影或色彩。这种设计理念反映了产品本身：剥离所有不必要的东西，直到只剩下必不可少的工具。这相当于数字世界中的 Dieter Rams 作品——每一个像素都有其存在的理由，而设计的缺失本身就是设计。
+
+整个页面存在于纯灰度之中。界面中没有任何彩色——没有品牌蓝，没有强调绿，没有语义红。唯一存在的颜色是纯黑（`#000000`）和纯白（`#ffffff`）之间的灰色调，创造了一个单色环境，让用户对 "open models" 的心智模型不受品牌偏见的影响。Ollama 的羊驼吉祥物采用简单的黑色线条画，是唯一的插图——甚至它也是单色的。
+
+让 Ollama 独具特色的是 SF Pro Rounded（Apple 的圆体系统字体）与纯粹的药丸形几何形状（所有交互元素均为 9999px 圆角）的结合。圆润的字母形态 + 圆润的按钮 + 圆润的容器创造了一种连贯的“柔软语言”，让开发者 CLI 工具显得平易近人、友好而不令人生畏。这是带有温度的极简主义——不是冰冷的瑞士风格网格极简主义，而是一种连边缘都被真实柔化的极简主义。
+
+**核心特征:**
+- 纯白画布，零彩色——完全的灰度色彩
+- SF Pro Rounded 标题创造了独特的 Apple 式柔软感
+- 二元 border-radius 系统：12px（容器）或 9999px（所有交互元素）
+- 零阴影——深度完全来自背景色的变化和边框
+- 所有交互元素（按钮、选项卡、输入框、标签）均采用药丸形几何形状
+- Ollama 羊驼作为唯一的插图——黑色线条画，没有颜色
+- 极致的内容克制——主页短小、专注且整洁
+
+## 2. 色彩调色板与角色
+
+### 主要色彩
+- **纯黑** (`#000000`): 主要标题、主要链接和最深的文本。唯一需要引起注意的“颜色”。
+- **近黑** (`#262626`): 浅色表面上的按钮文本，次要标题字重。
+- **最深表面** (`#090909`): 可能的最深表面——几乎与纯黑无法区分，用于页脚或深色容器。
+
+### 表面与背景
+- **纯白** (`#ffffff`): 主要页面背景——不是灰白，不是米白，是纯白。次要操作的按钮表面。
+- **雪白** (`#fafafa`): 与白色可能的最微妙的表面区分——用于区块背景和几乎无凸起感的容器。
+- **浅灰** (`#e5e5e5`): 按钮背景、边框和主要的包容色。核心的中性色。
+
+### 中性色与文本
+- **石灰** (`#737373`): 次要正文文本、页脚链接和弱化的内容。主要的“柔和”色调。
+- **中灰** (`#525252`): 强调的次要文本，比石灰略深。
+- **银灰** (`#a3a3a3`): 第三级文本、占位符和深度弱化的元数据。
+- **深色按钮文本** (`#404040`): 专用于白色表面的按钮文本。
+
+### 语义与强调色
+- **环蓝** (`#3b82f6` 浓度 50%): 整个系统中唯一的非灰色——Tailwind 的默认聚焦环，专门用于键盘无障碍访问。在正常的交互流程中永远不可见。
+- **浅色边框** (`#d4d4d4`): 略深的灰色，用于白色表面的按钮边框。
+
+### 渐变系统
+- **无。** Ollama 绝对不使用任何渐变。视觉分隔来自于平坦的色块和单像素边框。这是一个深思熟虑的、近乎哲学层面的设计选择。
+
+## 3. 排版规则
+
+### 字体系列
+- **Display**: `SF Pro Rounded`，备选字体: `system-ui, -apple-system, system-ui`
+- **正文 / UI**: `ui-sans-serif`，备选字体: `system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji`
+- **等宽字体**: `ui-monospace`，备选字体: `SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`
+
+*注：SF Pro Rounded 是 Apple 的系统字体——它在 macOS/iOS 上以圆角终端渲染，在其他平台上回退到系统无衬线字体。*
+
+### 层级
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字母间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | SF Pro Rounded | 48px (3rem) | 500 | 1.00 (紧凑) | normal | 最大视觉冲击力，圆润的字母形态 |
+| 区块标题 | SF Pro Rounded | 36px (2.25rem) | 500 | 1.11 (紧凑) | normal | 特性区块标题 |
+| 副标题 | SF Pro Rounded / ui-sans-serif | 30px (1.88rem) | 400–500 | 1.20 (紧凑) | normal | 卡片标题、特性名称 |
+| 卡片标题 | ui-sans-serif | 24px (1.5rem) | 400 | 1.33 | normal | 中等强调程度的标题 |
+| 大号正文 | ui-sans-serif | 18px (1.13rem) | 400–500 | 1.56 | normal | Hero 描述、按钮文本 |
+| 正文 / 链接 | ui-sans-serif | 16px (1rem) | 400–500 | 1.50 | normal | 标准正文文本、导航 |
+| 说明 | ui-sans-serif | 14px (0.88rem) | 400 | 1.43 | normal | 元数据、描述 |
+| 小号文本 | ui-sans-serif | 12px (0.75rem) | 400 | 1.33 | normal | 最小的无衬线文本 |
+| 代码正文 | ui-monospace | 16px (1rem) | 400 | 1.50 | normal | 行内代码、命令 |
+| 代码说明 | ui-monospace | 14px (0.88rem) | 400 | 1.43 | normal | 代码片段、次要内容 |
+| 小号代码 | ui-monospace | 12px (0.75rem) | 400–700 | 1.63 | normal | 标签、徽章 |
+
+### 原则
+- **圆润的 Display 字体，标准的正文字体**: SF Pro Rounded 以其独特的圆角终端承载 Display 标题，而标准的系统无衬线字体处理所有正文文本。圆润的字体本身就是品牌表达。
+- **字重克制**: 只有两个字重重要——400（常规）用于正文，500（中）用于标题。没有粗体，没有细体，没有黑体。这种极端的克制强化了极简哲学。
+- **紧凑的标题，舒适的正文**: 标题压缩至 1.0 行高，而正文文本放松至 1.43–1.56。这种对比创造了清晰的层次结构，无需字重对比。
+- **开发者身份的等宽字体**: 代码块和终端命令作为主要内容贯穿始终，使用系统等宽字体栈。
+
+## 4. 组件样式
+
+### 按钮
+
+**灰色药丸形（主要）**
+- 背景：浅灰（`#e5e5e5`）
+- 文本：近黑（`#262626`）
+- 内边距：10px 24px
+- 边框：细实线浅灰（`1px solid #e5e5e5`）
+- 圆角：药丸形（9999px）
+- 主要操作按钮——低调、灰度、始终为药丸形
+
+**白色药丸形（次要）**
+- 背景：纯白（`#ffffff`）
+- 文本：深色按钮文本（`#404040`）
+- 内边距：10px 24px
+- 边框：细实线浅色边框（`1px solid #d4d4d4`）
+- 圆角：药丸形（9999px）
+- 次要操作——在视觉上比灰色药丸形更轻
+
+**黑色药丸形 (CTA)**
+- 背景：纯黑（`#000000`）
+- 文本：纯白（`#ffffff`）
+- 圆角：药丸形（9999px）
+- 从 "Create account" 和 "Explore" 按钮推断
+- 最大程度的强调——白底黑字
+
+### 卡片与容器
+- 背景：纯白或雪白（`#fafafa`）
+- 边框：需要时使用细实线浅灰（`1px solid #e5e5e5`）
+- 圆角：舒适的圆角（12px）——系统中唯一的非药丸形圆角
+- 阴影：**无**——任何元素都没有阴影
+- Hover：可能是微妙的背景变化或边框变暗
+
+### 输入框与表单
+- 背景：纯白
+- 边框：`1px solid #e5e5e5`
+- 圆角：药丸形（9999px）——搜索输入框和表单字段是药丸形的
+- 聚焦：环蓝（`#3b82f6` 浓度 50%）光环
+- 占位符：银灰（`#a3a3a3`）
+
+### 导航
+- 简洁的水平导航，元素最少
+- Logo：黑色的 Ollama 羊驼图标 + 文字标记
+- 链接："Models"、"Docs"、"Pricing" 为黑色，16px，字重 400
+- 搜索栏：带有占位符文本的药丸形
+- 右侧："Sign in" 链接 + "Download" 黑色药丸形 CTA
+- 没有边框，没有背景——白色页面上的透明导航
+
+### 图像处理
+- Ollama 羊驼吉祥物是唯一的插图——白底黑色线条画
+- 代码截图/终端输出显示在有边框的容器中（12px 圆角）
+- 集成 logo 以简单的图标形式显示在网格中
+- 没有照片，没有渐变，没有装饰性图像
+
+### 特色组件
+
+**选项卡药丸形**
+- 药丸形选项卡选择器（例如，"Coding" | "OpenClaw"）
+- 激活：浅灰背景；未激活：透明
+- 全部为药丸形（9999px）
+
+**模型标签**
+- 小型药丸形标签（例如，"ollama"、"launch"、"claude"）
+- 浅灰背景，深色文本
+- 浏览模型的主要方式
+
+**终端命令块**
+- 显示 `ollama run` 命令的等宽字体代码
+- 极简样式——只是一个有边框的 12px 圆角容器
+- 集成了复制按钮
+
+**集成网格**
+- 集成 logo 的网格（Codex、Claude Code、OpenCode、LangChain 等）
+- 每个都位于带边框的药丸形或卡片中，包含图标 + 名称
+- 按类别划分选项卡（Coding、Documents & RAG、Automation、Chat）
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 比例：4px, 6px, 8px, 9px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 88px, 112px
+- 按钮内边距：10px 24px（在所有按钮中保持一致）
+- 卡片内部内边距：大约 24–32px
+- 区块垂直间距：非常宽裕（88px–112px）
+
+### 网格与容器
+- 最大容器宽度：大约 1024–1280px，居中
+- Hero：居中的单列布局，带有羊驼插图
+- 特性区块：2 列布局（左侧文本，右侧代码）
+- 集成网格：响应式多列
+- 页脚：简洁的单行
+
+### 留白哲学
+- **留白即奢华**: 页面非常短且稀疏——没有任何特性区块会显得冗长。每个概念都获得了最少但足够的展示空间。
+- **内容密度是刻意保持低密度的**: 当其他 AI 公司堆砌一个又一个特性时，Ollama 只提出三个想法（运行模型、与应用一起使用、集成）就停止了。
+- **留白即是品牌**: 零装饰的纯白留白传达了“这款工具不会碍你的事”。
+
+### Border Radius 比例
+- 舒适的圆角（12px）：唯一的容器圆角——代码块、卡片、面板
+- 药丸形（9999px）：所有交互元素——按钮、选项卡、输入框、标签、徽章
+
+*这种二元系统极端且独特。没有 4px，没有 8px，没有圆角渐变。元素要么是容器（12px），要么是交互式的（药丸形）。*
+
+## 6. 深度与层级
+
+| 级别 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| 扁平（级别 0） | 无阴影，无边框 | 页面背景，大多数内容 |
+| 带边框（级别 1） | `1px solid #e5e5e5` | 卡片、代码块、按钮 |
+
+**阴影哲学**：Ollama 使用 **零阴影**。这不是疏忽——而是深思熟虑的设计决定。其他所有主要 AI 产品网站都至少使用了微妙的阴影。Ollama 扁平、无阴影的方法创造了一种类似纸张的体验，元素纯粹通过背景色和单像素边框来区分。深度是通过**内容层次结构和排版字重**来传达的，而不是视觉分层。
+
+## 7. 宜与忌
+
+### 宜
+- 使用纯白（`#ffffff`）作为页面背景——绝对不要使用灰白或米白
+- 在所有交互元素上使用药丸形（9999px）圆角——按钮、选项卡、输入框、标签
+- 在所有非交互式容器上使用 12px 圆角——代码块、卡片、面板
+- 保持调色板严格为灰度——除蓝色聚焦环外没有彩色
+- Display 标题使用字重为 500 的 SF Pro Rounded——圆角终端就是品牌表达
+- 保持零阴影——深度仅来自边框和背景变化
+- 保持较低的内容密度——每个区块应展示一个清晰的想法
+- 终端命令和代码使用等宽字体——这是主要内容，而不是装饰
+- 将所有按钮的内边距保持在 10px 24px 并使用药丸形——一致性是绝对的
+
+### 忌
+- 不要引入任何彩色——没有品牌蓝，没有强调绿，没有暖色调
+- 不要使用介于 12px 和 9999px 之间的 border-radius——系统是二元的
+- 不要给任何元素添加阴影——扁平化美学是刻意的
+- 不要使用超过 500 的字重——没有粗体，没有黑体
+- 不要在羊驼吉祥物之外添加装饰性插图
+- 不要在任何地方使用渐变——仅使用平坦的色块和边框
+- 不要使布局过于复杂——最多两列，没有复杂的网格
+- 不要使用超过 1px 的边框——包容感始终应尽可能轻盈
+- 不要添加 hover 动画或过渡——交互应该感觉即时且直接
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| 移动设备 | <640px | 单列，所有内容堆叠，汉堡导航 |
+| 小型平板 | 640–768px | 对间距进行微调 |
+| 平板 | 768–850px | 开始出现 2 列布局 |
+| 桌面 | 850–1024px | 标准布局，展开的特性 |
+| 大型桌面 | 1024–1280px | 最大内容宽度 |
+
+### 点击目标
+- 所有按钮均为药丸形，具有宽裕的内边距（10px 24px）
+- 导航链接采用舒适的 16px 尺寸
+- 最小触控区域轻松超过 44x44px
+
+### 折叠策略
+- **导航**：在移动设备上折叠为汉堡菜单
+- **特性区块**：2 列 → 堆叠的单列
+- **Hero 文本**：48px → 36px → 30px 渐进缩放
+- **集成网格**：多列 → 2 列 → 单列
+- **代码块**：保持水平滚动
+
+### 图像行为
+- 羊驼吉祥物按比例缩放
+- 代码块保持等宽字体格式
+- 集成图标重排为更少的列
+- 没有艺术指导的变化
+
+## 9. Agent Prompt 指南
+
+### 快速颜色参考
+- 主要文本："Pure Black (#000000)"
+- 页面背景："Pure White (#ffffff)"
+- 次要文本："Stone (#737373)"
+- 按钮背景："Light Gray (#e5e5e5)"
+- 边框："Light Gray (#e5e5e5)"
+- 柔和文本："Silver (#a3a3a3)"
+- 深色文本："Near Black (#262626)"
+- 微妙表面："Snow (#fafafa)"
+
+### 示例 Component Prompts
+- "在纯白（#ffffff）背景上创建一个 hero 区块，插图居中放置在 48px、字重 500、行高 1.0 的 SF Pro Rounded 标题上方。使用纯黑（#000000）文本。在下方添加一个黑色药丸形 CTA 按钮（9999px 圆角，10px 24px 内边距）和一个灰色药丸形按钮。"
+- "设计一个具有 12px border-radius、1px 实线浅灰（#e5e5e5）边框、白色背景的代码块。终端命令使用 16px 的 ui-monospace 字体。无阴影。"
+- "构建一个带有药丸形选项卡（9999px 圆角）的选项卡栏。激活的选项卡：浅灰（#e5e5e5）背景，近黑（#262626）文本。未激活：透明背景，石灰（#737373）文本。"
+- "创建一个集成卡片网格。每张卡片都是带边框的药丸形（9999px 圆角）或 12px 圆角的卡片，带有 1px 实线 #e5e5e5 边框。内部包含图标 + 名称。桌面端为 4 列网格。"
+- "设计一个导航栏：透明背景，无边框。左侧是 Ollama logo，3 个文本链接（纯黑，16px，字重 400），中间是药丸形搜索输入框，右侧是 'Sign in' 文本链接和黑色药丸形 'Download' 按钮。"
+
+### 迭代指南
+1. 每次只关注一个组件
+2. 将所有值保持为灰度——使用 "Stone (#737373)" 而不是 "使用浅色"
+3. 始终指定药丸形（9999px）或容器（12px）圆角——没有介于两者之间的值
+4. 阴影始终为零——永远不要添加
+5. 字重始终为 400 或 500——绝对不要加粗
+6. 如果感觉某些东西过于装饰化，请移除它——对 Ollama 来说，少即是多

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

@@ -0,0 +1,294 @@
+# Design System: OpenCode
+
+
+> **Hermes Agent — Implementation 说明**
+>
+> 原网站使用了专有字体。对于自包含的 HTML 输出，请使用这些 CDN 替代字体：
+> - **Primary:** `JetBrains Mono` | **Mono:** `JetBrains Mono`
+> - **Font stack (CSS):** `font-family: 'JetBrains Mono', 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=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` skill（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+OpenCode 的网站体现了终端原生、monospace 优先的审美，反映了其作为开源 AI 编码 agent 的身份。整个视觉系统建立在鲜明的明暗对比之上，使用近乎纯黑的背景（`#201d1d`）和温暖的白灰色文本（`#fdfcfc`）。这不是一个通用的暗色主题——它是一种温暖、略带红棕色的暗色调，感觉就像一个精密的终端模拟器，而不是冷冰冰的 IDE。暗色和亮色中的暖色调（注意 `#201d1d` —— rgb(32, 29, 29) 中微妙的红色通道）创造出一种具有凝聚力且“有人气”的质感。
+
+Berkeley Mono 是唯一的字体，确立了毫不妥协的 monospace 身份。每个元素——标题、正文、按钮、导航——都共享这一个字体系列，创造了统一的“万物皆代码”哲学。38px 加粗、行高 1.50 的标题宽裕且易读，而 16px、字重 500 的正文提供了比正常阅读字重稍重的视觉体验，增强了屏幕上的可读性。monospace 网格自然地在整个布局中实施了强制的对齐和节奏。
+
+配色系统刻意保持极简。主色调仅由三种功能性色调组成：温暖的近黑色（`#201d1d`）、中等暖灰色（`#9a9898`）和明亮的灰白色（`#fdfcfc`）。语义颜色借鉴了 Apple HIG 调色板——蓝色强调色（`#007aff`）、红色危险（`#ff3b30`）、绿色成功（`#30d158`）、橙色警告（`#ff9f0a`）——在不增加品牌复杂性的情况下，为界面提供了熟悉且值得信赖的信号颜色。边框使用微妙的温暖透明色（`rgba(15, 0, 0, 0.12)`），与整个系统的暖色调相呼应。
+
+**主要特征：**
+- Berkeley Mono 作为唯一字体——到处都是 monospace，没有 sans-serif 或 serif 声音
+- 温暖的近黑色主色（`#201d1d`），带有红棕色的底色，而非纯黑色
+- 灰白色文本（`#fdfcfc`），带有暖色调，而非纯白色
+- 通用的最小 4px 边框圆角——锐利、实用的边角
+- 8px 基础间距系统，最高可扩展至 96px
+- 受 Apple HIG 启发的语义颜色（蓝色、红色、绿色、橙色）
+- 使用 `rgba(15, 0, 0, 0.12)` 的透明暖色边框
+- 拥有 20px 充裕内边距和 6px 圆角的电子邮件输入框——系统中圆角最宽裕的组件
+- 单一按钮变体：深色背景，浅色文本，紧凑的垂直内边距（4px 20px）
+- 带下划线的链接作为默认链接样式，强化了以文本为核心的身份
+
+## 2. 颜色调色板与角色
+
+### Primary
+- **OpenCode Dark** (`#201d1d`)：主要背景、按钮填充、链接文本。带有微妙的红棕色温暖感的近黑色—— rgb(32, 29, 29)。
+- **OpenCode Light** (`#fdfcfc`)：深色表面上的主要文本、按钮文本。略带暖色的灰白色，避免了冷冰冰的纯白色。
+- **Mid Gray** (`#9a9898`)：辅助文本、柔和的链接。中性的暖灰色，连接深色和浅色。
+
+### Secondary
+- **Dark Surface** (`#302c2c`)：比主深色略浅，用于凸起的表面和细微的区分。
+- **Border Gray** (`#646262`)：更强烈的边框，交互元素上的轮廓环。
+- **Light Surface** (`#f1eeee`)：浅色模式表面，细微的背景变化。
+
+### Accent
+- **Accent Blue** (`#007aff`)：主要强调色，链接，交互高亮。Apple 系统蓝色。
+- **Accent Blue Hover** (`#0056b3`)：用于 hover 状态的深蓝色。
+- **Accent Blue Active** (`#004085`)：用于 pressed/active 状态的最深蓝色。
+
+### Semantic
+- **Danger Red** (`#ff3b30`)：错误状态，破坏性操作。Apple 系统红色。
+- **Danger Hover** (`#d70015`)：危险元素 hover 状态的深红色。
+- **Danger Active** (`#a50011`)：危险元素 pressed 状态的最深红色。
+- **Success Green** (`#30d158`)：成功状态，积极反馈。Apple 系统绿色。
+- **Warning Orange** (`#ff9f0a`)：警告状态，警示信号。Apple 系统橙色。
+- **Warning Hover** (`#cc7f08`)：警告元素 hover 状态的深橙色。
+- **Warning Active** (`#995f06`)：警告元素 pressed 状态的最深橙色。
+
+### Text Scale
+- **Text Muted** (`#6e6e73`)：柔和的标签，禁用的文本，占位符内容。
+- **Text Secondary** (`#424245`)：浅色背景上的辅助文本，说明文本。
+
+### Border
+- **Border Warm** (`rgba(15, 0, 0, 0.12)`)：主要边框颜色，带有红色调的温暖透明黑色。
+- **Border Tab** (`#9a9898`)：选项卡下划线边框，2px 实线底部。
+- **Border Outline** (`#646262`)：用于容器的 1px 实线轮廓边框。
+
+## 3. 排版规则
+
+### Font Family
+- **Universal**: `Berkeley Mono`，带有 fallbacks：`IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace`
+
+### Hierarchy
+
+| 角色 | 大小 | 字重 | 行高 | 备注 |
+|------|------|--------|-------------|-------|
+| Heading 1 | 38px (2.38rem) | 700 | 1.50 | Hero 标题，页面标题 |
+| Heading 2 | 16px (1.00rem) | 700 | 1.50 | 模块标题，加粗强调 |
+| Body | 16px (1.00rem) | 400 | 1.50 | 标准正文文本，段落 |
+| Body Medium | 16px (1.00rem) | 500 | 1.50 | 链接，按钮文本，导航项 |
+| Body Tight | 16px (1.00rem) | 500 | 1.00 (tight) | 紧凑标签，选项卡项 |
+| Caption | 14px (0.88rem) | 400 | 2.00 (relaxed) | 脚注，元数据，小标签 |
+
+### Principles
+- **一种字体，一种声音**：专门使用 Berkeley Mono。展示、正文和代码之间没有排版变化——一切都在同一个 monospace 域中表达。层级完全通过大小和字重来实现。
+- **字重即层级**：标题使用 700，交互式/中等强调使用 500，正文使用 400。三个字重级别构成了整个层级。
+- **宽裕的行高**：1.50 作为标准行高，让文本在 monospace 网格中有呼吸的空间。说明文本上 relaxed 的 2.00 行高创造了清晰的视觉分离。
+- **交互式元素采用紧凑行高**：交互元素（选项卡、紧凑标签）使用 1.00 行高，形成密集、可点击的目标。
+
+## 4. 组件样式
+
+### Buttons
+
+**Primary (Dark Fill)**
+- Background: `#201d1d` (OpenCode Dark)
+- Text: `#fdfcfc` (OpenCode Light)
+- Padding: 4px 20px
+- Radius: 4px
+- Font: 16px Berkeley Mono, weight 500, line-height 2.00 (relaxed)
+- Outline: `rgb(253, 252, 252) none 0px`
+- 用途：主要 CTA，核心操作
+
+### Inputs
+
+**Email Input**
+- Background: `#f8f7f7` (light neutral)
+- Text: `#201d1d`
+- Border: `1px solid rgba(15, 0, 0, 0.12)`
+- Padding: 20px
+- Radius: 6px
+- Font: Berkeley Mono, standard size
+- 用途：表单字段，电子邮件捕获
+
+### Links
+
+**默认 Link**
+- Color: `#201d1d`
+- Decoration: underline 1px
+- Font-weight: 500
+- 用途：正文内容中的主要文本链接
+
+**Light Link**
+- Color: `#fdfcfc`
+- Decoration: none
+- 用途：深色背景上的链接，导航
+
+**Muted Link**
+- Color: `#9a9898`
+- Decoration: none
+- 用途：页脚链接，辅助导航
+
+### Tabs
+
+**Tab Navigation**
+- Border-bottom: `2px solid #9a9898` (active tab indicator)
+- Font: 16px, weight 500, line-height 1.00
+- 用途：模块切换，内容过滤
+
+### Navigation
+- 干净的水平布局，通篇使用 Berkeley Mono
+- 品牌 logotype 左对齐，使用 monospace
+- 链接为 16px，weight 500，带有下划线装饰
+- 深色背景与页面背景相匹配
+- 没有 backdrop blur 或透明度——仅使用纯色表面
+
+### Image Treatment
+- 将终端/代码截图作为 Hero 图像
+- 深色终端美学搭配 monospace 字体
+- 极简的边框，内容自身说话
+
+### Distinctive Components
+
+**Terminal Hero**
+- 全宽深色终端窗口作为 Hero 元素
+- 终端框架内的 ASCII 艺术/风格化 logo
+- 带有语法高亮的 monospace 命令示例
+- 强化了产品的 CLI-first 身份
+
+**特性 List**
+- 使用 Berkeley Mono 文本的项目符号列表
+- 特性名称使用 weight 500，描述使用 weight 400
+- 项目之间采用紧凑的垂直间距
+- 没有卡片或边框——纯粹的文本布局
+
+**Email Capture**
+- 浅色背景输入框（`#f8f7f7`），与深色页面形成对比
+- 宽裕的 20px 内边距，提供舒适的输入体验
+- 6px 圆角——系统中最圆的元素
+- 简报/候补名单模式
+
+## 5. 布局原则
+
+### Spacing System
+- 基础单位：8px
+- 精细刻度：1px、2px、4px（小于 8px，用于边框和微调）
+- 标准刻度：8px、12px、16px、20px、24px
+- 扩展刻度：32px、40px、48px、64px、80px、96px
+- 该系统遵循干净的 4/8px 网格，并保持一致的成倍递增
+
+### Grid & Container
+- 最大内容宽度：约 800-900px（窄，针对阅读优化）
+- 单列布局作为主要模式
+- 居中内容，拥有宽裕的水平边距
+- Hero section：全宽深色终端元素
+- 特性 sections：单列文本块
+- Footer：多列链接网格
+
+### Whitespace Philosophy
+- **Monospace 节奏**：Berkeley Mono 的固定宽度特性创造了自然的垂直网格。1.50 和 2.00 的行高保持了一致的节奏。
+- **狭窄且专注**：内容被限制在一个窄列中，创造了宽裕的侧边距，将注意力集中在文本上。
+- **通过间距区分模块**：没有装饰性的分隔符。模块之间通过宽裕的垂直间距（48-96px）来分隔，而不是通过边框或背景颜色变化。
+
+### Border Radius Scale
+- Micro (4px)：所有元素的 默认 值——按钮、容器、徽章
+- Input (6px)：表单输入框稍微圆润一些
+- 整个系统仅使用两个圆角值，强化了实用主义的审美
+
+## 6. 深度与高度
+
+| 级别 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影，无边框 | 大多数元素的默认状态 |
+| Border Subtle (Level 1) | `1px solid rgba(15, 0, 0, 0.12)` | 模块分隔符，输入框边框，水平线 |
+| Border Tab (Level 2) | `2px solid #9a9898` bottom only | 活动 Tab 指示器 |
+| Border Outline (Level 3) | `1px solid #646262` | 容器轮廓，凸起元素 |
+
+**阴影哲学**：OpenCode 的深度系统是刻意扁平化的。提取的 tokens 中没有 box-shadows——检测到零个阴影值。深度完全通过边框处理和背景颜色变化来传达。这种扁平化与终端美学保持一致：终端没有阴影，OpenCode 也没有。这三个边框级别（透明暖色、Tab 指示器、实心轮廓）在没有任何高度错觉的情况下创造了足够的视觉层次。
+
+### Decorative Depth
+- `#201d1d` 和 `#302c2c` 之间的背景颜色变化创造了微妙的表面区分
+- 12% 透明度的透明边框提供了几乎不可见的结构
+- 边框颜色中的温暖微红色调（`rgba(15, 0, 0, 0.12)`）将边框与整体的暖色深色调色板联系起来
+- 没有渐变，没有模糊，没有环境效果——纯粹的扁平终端美学
+
+## 7. 交互与动效
+
+### Hover States
+- 链接：颜色从默认值变为 Accent Blue（`#007aff`）或改变下划线样式
+- 按钮：轻微的背景变亮或边框强调
+- Accent blue 提供了三阶段 hover 序列：`#007aff` → `#0056b3` → `#004085`（默认 → hover → active）
+- Danger red：`#ff3b30` → `#d70015` → `#a50011`
+- Warning orange：`#ff9f0a` → `#cc7f08` → `#995f06`
+
+### Focus States
+- 基于边框的焦点：增加边框透明度或使用实心边框颜色
+- 没有基于阴影的焦点环——与扁平、无阴影的美学保持一致
+- 键盘焦点可能使用 outline 或将边框颜色变为 Accent Blue
+
+### Transitions
+- 预期只有极少的过渡——受终端启发的界面倾向于即时的状态变化
+- 颜色过渡：100-150ms，用于微妙的状态反馈
+- 没有 scale、rotate 或复杂的 transform 动画
+
+## 8. 响应式行为
+
+### Breakpoints
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Mobile | <640px | 单列布局，减少内边距，标题尺寸缩小 |
+| Tablet | 640-1024px | 内容宽度扩展，内边距略微增加 |
+| Desktop | >1024px | 完整内容宽度（约 800-900px 居中），最大化的留白 |
+
+### Touch Targets
+- 带有 4px 20px 内边距的按钮提供了足够的水平触摸区域
+- 带有 20px 内边距的输入框确保了舒适的移动端打字体验
+- 16px 且具有紧凑行高的 Tab 项可能需要针对移动端进行调整
+
+### Collapsing Strategy
+- Hero 标题：在更小的屏幕上从 38px → 28px → 24px
+- 导航：水平链接 → 移动端上的汉堡菜单/抽屉
+- 特性 列表：保持单列，减少水平内边距
+- Terminal hero：保持全宽，减少内部内边距
+- Footer 列：多列 → 堆叠为单列
+- 模块间距：在移动端上从 96px → 64px → 48px
+
+### Image Behavior
+- 终端截图保持宽高比和边框处理方式
+- 全宽元素按比例缩放
+- Monospace 字体由于其固定宽度的特性，在所有尺寸下均保持可读性
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- 页面背景：`#201d1d` (warm near-black)
+- 主要文本：`#fdfcfc` (warm off-white)
+- 次要文本：`#9a9898` (warm gray)
+- 柔和文本：`#6e6e73`
+- 强调色：`#007aff` (blue)
+- 危险：`#ff3b30` (red)
+- 成功：`#30d158` (green)
+- 警告：`#ff9f0a` (orange)
+- 按钮 bg：`#201d1d`，按钮文本：`#fdfcfc`
+- 边框：`rgba(15, 0, 0, 0.12)` (warm transparent)
+- 输入框 bg：`#f8f7f7`，输入框边框：`rgba(15, 0, 0, 0.12)`
+
+### 示例 Component Prompts
+- "在 `#201d1d` 暖深色背景上创建一个 hero section。标题使用 38px Berkeley Mono weight 700，line-height 1.50，颜色为 `#fdfcfc`。副标题使用 16px weight 400，颜色为 `#9a9898`。主要 CTA 按钮（背景为 `#201d1d`，带有 `1px solid #646262` 边框，4px 圆角，4px 20px 内边距，文本颜色为 `#fdfcfc`，字重 500）。"
+- "设计一个 feature 列表：在 `#201d1d` 背景上呈单列布局。特性 名称使用 16px Berkeley Mono weight 700，颜色 `#fdfcfc`。说明 使用 16px weight 400，颜色 `#9a9898`。没有卡片，没有边框——纯文本，项目之间的垂直间距为 16px。"
+- "构建一个电子邮件捕获表单：背景为 `#f8f7f7` 的输入框，`1px solid rgba(15, 0, 0, 0.12)` 边框，6px 圆角，20px 内边距。相邻的深色按钮（背景 `#201d1d`，文本 `#fdfcfc`，4px 圆角，4px 20px 内边距）。通篇使用 Berkeley Mono。"
+- "创建导航：sticky 的 `#201d1d` 背景。链接使用 16px Berkeley Mono weight 500，文本颜色 `#fdfcfc`。品牌名称左对齐使用 monospace。链接带有下划线装饰。没有模糊，没有透明度——纯深色表面。"
+- "设计 footer：`#201d1d` 背景，多列链接网格。链接使用 16px Berkeley Mono weight 400，颜色 `#9a9898`。Section 标题使用 weight 700。Border-top `1px solid rgba(15, 0, 0, 0.12)` 作为分隔符。"
+
+### Iteration Guide
+1. Berkeley Mono 是唯一的字体——永远不要引入第二种字体。大小和字重创造所有的层级。
+2. 保持表面扁平：没有阴影，没有渐变，没有模糊效果。仅使用边框和背景变化。
+3. 暖色底调很重要：使用 `#201d1d` 而不是 `#000000`，使用 `#fdfcfc` 而不是 `#ffffff`。这种红棕色的暖意虽然微妙但至关重要。
+4. 除了输入框（6px）之外，所有地方的 border radius 都是 4px。永远不要使用 rounded pills 或大的圆角半径。
+5. 语义颜色遵循 Apple HIG：`#007aff` blue，`#ff3b30` red，`#30d158` green，`#ff9f0a` orange。每种颜色都有变暗的 hover 和 active 变体。
+6. 三阶段交互：default → hover（变暗）→ active（极度变暗），适用于所有语义颜色。
+7. 边框使用 `rgba(15, 0, 0, 0.12)`——一种温暖的透明深色，而不是中性灰色。这将边框与暖色调色板联系在一起。
+8. 间距遵循 8px 网格：8、16、24、32、40、48、64、80、96px。仅将 4px 用于微调。