@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,281 @@
+# 设计系统：Raycast
+
+
+> **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. 视觉主题与氛围
+
+Raycast 的营销网站感觉就像是精密仪器黑色的内部——一个用黑曜石雕刻而成的瑞士表壳。背景不仅仅是黑色的，它是一种近乎纯黑的蓝色调（`#07080a`），让人感觉仿佛置身于 macOS 原生应用内部，而不是一个网站。每一个表面、每一个边框、每一个阴影都经过精心校准，以唤起一种高性能桌面实用程序的感觉：快速、极简、值得信赖。
+
+标志性的设计手法是借鉴 macOS 窗口边框的层叠阴影系统：带内阴影高光的多层 box-shadow 模拟了物理深度，仿佛卡片和按钮是深色桌面上实际按下或凸起的玻璃元素。结合 Raycast Red（`#FF6363`）——几乎只部署在英雄区域标志性的对角条纹图案中——这种调色板创造了一个给人感觉是“充满个性的强大工具”的品牌。红色并不喧宾夺主；它起到了画龙点睛的作用。
+
+Inter 被应用于所有地方——标题、正文、按钮、说明文字——并使用了大量 OpenType 特性（`calt`, `kern`, `liga`, `ss03`），创造出一致且易读的排版风格。正的字间距（正文文本上为 0.2px–0.4px）对于深色 UI 来说并不常见，它赋予了文本一种轻盈、透气的特质，抵消了密集、黑暗的表面带来的压抑感。GeistMono 出现在代码元素中，强化了其作为开发者工具的身份。
+
+**核心特征：**
+- 近乎纯黑的蓝色调背景（`#07080a`）——不是纯黑，带有微妙的偏蓝倾向
+- macOS 原生阴影系统，带有多层内阴影高光，模拟物理深度
+- Raycast Red（`#FF6363`）作为强调色——用于英雄区域条纹，而非全局铺开
+- Inter 配合正字间距（0.2px），营造轻盈、易读的深色模式体验
+- Radix UI 组件原语为交互层提供支持
+- 细微的 rgba 白色边框（0.06–0.1 不透明度），用于深色表面上的视觉边界
+- 键盘快捷键样式，采用渐变键帽和浓重的阴影
+
+## 2. 调色板与角色
+
+### Primary
+- **Near-Black Blue** (`#07080a`)：主要页面背景——带有微妙偏冷蓝色调的基础虚空
+- **Pure White** (`#ffffff`)：主要标题文本，高强调度元素
+- **Raycast Red** (`#FF6363` / `hsl(0, 100%, 69%)`)：品牌强调色——英雄区域条纹、危险状态、关键高亮
+
+### Secondary & Accent
+- **Raycast Blue** (`hsl(202, 100%, 67%)` / ~`#55b3ff`)：交互强调色——链接、聚焦状态、选中项
+- **Raycast Green** (`hsl(151, 59%, 59%)` / ~`#5fc992`)：成功状态、积极指标
+- **Raycast Yellow** (`hsl(43, 100%, 60%)` / ~`#ffbc33`)：警告强调色、高亮
+- **Blue Transparent** (`hsla(202, 100%, 67%, 0.15)`)：用于交互表面的蓝色调遮罩层
+- **Red Transparent** (`hsla(0, 100%, 69%, 0.15)`)：用于危险/错误表面的红色调遮罩层
+
+### Surface & Background
+- **Deep Background** (`#07080a`)：页面画布，最暗的表面
+- **Surface 100** (`#101111`)：凸起的表面，卡片背景
+- **Key Start** (`#121212`)：键盘按键渐变起始色
+- **Key End** (`#0d0d0d`)：键盘按键渐变结束色
+- **Card Surface** (`#1b1c1e`)：徽章背景、标签填充、凸起的容器
+- **Button Foreground** (`#18191a`)：浅色背景上按钮文本的暗色表面
+
+### Neutrals & Text
+- **Near White** (`#f9f9f9` / `hsl(240, 11%, 96%)`)：主要正文文本，高强调度内容
+- **Light Gray** (`#cecece` / `#cdcdce`)：次要正文文本、描述
+- **Silver** (`#c0c0c0`)：三级文本、柔和的标签
+- **Medium Gray** (`#9c9c9d`)：链接默认颜色、辅助导航
+- **Dim Gray** (`#6a6b6c`)：禁用的文本、低强调度标签
+- **Dark Gray** (`#434345`)：柔和的边框、未激活的导航链接
+- **Border** (`hsl(195, 5%, 15%)` / ~`#252829`)：卡片和分隔线的标准边框颜色
+- **Dark Border** (`#2f3031`)：分隔线、表格边框
+
+### Semantic & Accent
+- **Error Red** (`hsl(0, 100%, 69%)`)：错误状态、破坏性操作
+- **Success Green** (`hsl(151, 59%, 59%)`)：成功确认、积极状态
+- **Warning Yellow** (`hsl(43, 100%, 60%)`)：警告、需要注意的状态
+- **Info Blue** (`hsl(202, 100%, 67%)`)：信息高亮、链接
+
+### Gradient System
+- **Keyboard Key Gradient**：从 `#121212`（顶部）到 `#0d0d0d`（底部）的线性渐变——模拟物理按键的深度
+- **Warm Glow**：`rgba(215, 201, 175, 0.05)` 径向扩散——特色元素背后微妙的温暖环境光晕
+
+## 3. 排版规则
+
+### Font Family
+- **Primary**: `Inter`——无衬线人文主义字体，无处不在。Fallbacks: `Inter Fallback`, system sans-serif
+- **System**: `SF Pro Text`——Apple 系统字体，用于特定的 macOS 原生 UI 元素。Fallbacks: `SF Pro Icons`, `Inter`, `Inter Fallback`
+- **Monospace**: `GeistMono`——Vercel 的等宽字体，用于代码元素。Fallbacks: `ui-monospace`, `SFMono-Regular`, `Roboto Mono`, `Menlo`, `Monaco`
+- **OpenType features**：全局启用 `calt`, `kern`, `liga`, `ss03`；展示文本使用 `ss02`, `ss08`；英雄标题禁用 `liga` (`"liga" 0`)
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Display Hero | 64px | 600 | 1.10 | 0px | OpenType: liga 0, ss02, ss08 |
+| Section Display | 56px | 400 | 1.17 | 0.2px | OpenType: calt, kern, liga, ss03 |
+| Section Heading | 24px | 500 | normal | 0.2px | OpenType: calt, kern, liga, ss03 |
+| Card Heading | 22px | 400 | 1.15 | 0px | OpenType: calt, kern, liga, ss03 |
+| Sub-heading | 20px | 500 | 1.60 | 0.2px | 宽松的行高以提升可读性 |
+| Body Large | 18px | 400 | 1.15 | 0.2px | OpenType: calt, kern, liga, ss03 |
+| Body | 16px | 500 | 1.60 | 0.2px | 主要正文文本，宽松节奏 |
+| Body Tight | 16px | 400 | 1.15 | 0.1px | UI 标签，紧凑上下文 |
+| Button | 16px | 600 | 1.15 | 0.3px | 半粗体，略宽的字间距 |
+| Nav Link | 16px | 500 | 1.40 | 0.3px | 导航中的链接 |
+| Caption | 14px | 500 | 1.14 | 0.2px | 小标签、元数据 |
+| Caption Bold | 14px | 600 | 1.40 | 0px | 强调的说明文字 |
+| Small | 12px | 600 | 1.33 | 0px | 徽章、标签、微型标签 |
+| Small Link | 12px | 400 | 1.50 | 0.4px | 页脚链接、附属细则 |
+| Code | 14px (GeistMono) | 500 | 1.60 | 0.3px | 代码块、技术内容 |
+| Code Small | 12px (GeistMono) | 400 | 1.60 | 0.2px | 行内代码、终端输出 |
+
+### Principles
+- **深色背景下的正字间距**：与大多数使用紧凑或中性字间距的深色 UI 不同，Raycast 应用了 +0.2px 到 +0.4px 的字间距——创造出一种轻盈、易读的感觉，以弥补深色背景带来的压抑感
+- **以 Weight 500 为基准**：大多数正文文本使用 Medium 字重（500），而不是 Regular 字重（400）——这种微妙的额外厚重感提高了在深色表面上的可读性
+- **克制的展示字**：英雄区域的 64px/600 文本自信但并不夸张——Raycast 避免了排版的奇观，而是倾向于功能性的优雅
+- **全面启用 OpenType**：`ss03`（Stylistic Set 3）在 Inter 字体中被全局启用，赋予字体一种略微更几何化、更像工具的质感
+
+## 4. 组件样式
+
+### Buttons
+- **Primary Pill**：透明背景，白色文本，胶囊形状（86px 圆角），多层内阴影（`rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset`）。Hover：opacity 0.6
+- **Secondary Button**：透明背景，白色文本，6px 圆角，`1px solid rgba(255, 255, 255, 0.1)` 边框，微妙的投射阴影（`rgba(0, 0, 0, 0.03) 0px 7px 3px`）。Hover：opacity 0.6
+- **Ghost Button**：无背景或边框，灰色文本（`#6a6b6c`），86px 圆角，相同的内阴影。Hover：opacity 0.6，文本变亮为白色
+- **CTA (Download)**：半透明白色背景（`hsla(0, 0%, 100%, 0.815)`），深色文本（`#18191a`），胶囊形状。Hover：全白背景（`hsl(0, 0%, 100%)`）
+- **Transition**：所有按钮在 hover 时使用 opacity 过渡，而不是改变 background-color——这是 Raycast 标志性的交互模式
+
+### Cards & Containers
+- **Standard Card**：`#101111` 表面，`1px solid rgba(255, 255, 255, 0.06)` 边框，12px–16px border-radius
+- **Elevated Card**：环形阴影 `rgb(27, 28, 30) 0px 0px 0px 1px` 外侧 + `rgb(7, 8, 10) 0px 0px 0px 1px inset` 内侧——创造出一种双环视觉边界
+- **特性 Card**：16px–20px border-radius，英雄元素背后有微妙的温暖光晕（`rgba(215, 201, 175, 0.05) 0px 0px 20px 5px`）
+- **Hover**：卡片通过增加边框不透明度或微妙的阴影增强来轻微变亮
+
+### Inputs & Forms
+- 深色输入框，`#07080a` 背景，`1px solid rgba(255, 255, 255, 0.08)` 边框，8px border-radius
+- Focus 状态：边框变亮，出现蓝色光晕（`hsla(202, 100%, 67%, 0.15)`）环
+- Text：`#f9f9f9` 输入颜色，`#6a6b6c` 占位符
+- Labels：`#9c9c9d`，14px 大小，weight 500
+
+### Navigation
+- **Top nav**：深色背景与页面融合，白色文本链接，16px 大小，weight 500
+- **Nav links**：灰色文本（`#9c9c9d`）→ hover 时变白，hover 时显示下划线装饰
+- **CTA button**：导航末端的半透明白色胶囊
+- **Mobile**：折叠为汉堡菜单，保持深色主题
+- **Sticky**：导航固定在顶部，带有微妙的边框分隔符
+
+### Image Treatment
+- **Product screenshots**：macOS 窗口边框风格——圆角（12px），模拟浮动窗口的深沉阴影
+- **Full-bleed sections**：深色截图无缝融入深色背景
+- **Hero illustration**：Raycast Red 的对角条纹图案——抽象、几何、定义品牌
+- **App UI embeds**：展示真实的 Raycast 命令面板和扩展——以产品本身作为内容
+
+### Keyboard Shortcut Keys
+- **Key cap styling**：渐变背景（`#121212` → `#0d0d0d`），浓重的多层阴影（`rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px` + 内阴影），创造出逼真的物理按键外观
+- Border-radius：单个按键为 4px–6px
+
+### Badges & Tags
+- **Neutral badge**：`#1b1c1e` 背景，白色文本，6px 圆角，14px 字号 weight 500，`0px 6px` 内边距
+- 紧凑、类似胶囊的处理方式，用于分类
+
+## 5. 布局原则
+
+### Spacing System
+- **Base unit**: 8px
+- **Scale**: 1px, 2px, 3px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px
+- **Section padding**：主要部分之间 80px–120px 垂直间距
+- **Card padding**：16px–32px 内部间距
+- **Component gaps**：相关元素之间 8px–16px
+
+### Grid & Container
+- **Max width**：~1200px 容器（在 1204px 断点），居中
+- **Column patterns**：单列英雄区域，2–3 列特性网格，全宽展示部分
+- **App showcase**：产品 UI 呈现在居中的窗口框架中
+
+### Whitespace Philosophy
+- **Dramatic negative space**：各个部分漂浮在广阔的黑暗虚空中，在功能之间创造出电影般的节奏感
+- **Dense product, sparse marketing**：产品 UI 截图信息密集，但周围的营销文案使用最少的文本和充足的间距
+- **Vertical rhythm**：部分内的元素之间保持一致的 24px–32px 间隙
+
+### Border Radius Scale
+- **2px–3px**：微型元素、代码 span、微小指示器
+- **4px–5px**：键盘按键、小型交互元素
+- **6px**：按钮、徽章、标签——最常用的主力圆角
+- **8px**：输入框、行内组件
+- **9px–11px**：图片、中等容器
+- **12px**：标准卡片、产品截图
+- **16px**：大卡片、特性区域
+- **20px**：英雄区域卡片、突出的容器
+- **86px+**：胶囊按钮、导航 CTA——完整的胶囊形状
+
+## 6. 深度与层级
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Void) | 无阴影，`#07080a` 表面 | 页面背景 |
+| Level 1 (Subtle) | `rgba(0, 0, 0, 0.28) 0px 1.189px 2.377px` | 极小的浮起，行内元素 |
+| Level 2 (Ring) | `rgb(27, 28, 30) 0px 0px 0px 1px` 外侧 + `rgb(7, 8, 10) 0px 0px 0px 1px inset` 内侧 | 卡片视觉边界，双环技术 |
+| Level 3 (Button) | `rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset` + `rgba(255, 255, 255, 0.25) 0px 0px 0px 1px` + `rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset` | macOS 原生按钮按压——顶部白色高光，底部深色内阴影 |
+| Level 4 (Key) | 带有内嵌按压效果的 5 层阴影堆叠 | 键盘快捷键键帽——物理 3D 外观 |
+| Level 5 (Floating) | `rgba(0, 0, 0, 0.5) 0px 0px 0px 2px` + `rgba(255, 255, 255, 0.19) 0px 0px 14px` + 内阴影 | 命令面板、浮动面板——具有光晕的厚重深度 |
+
+### Shadow Philosophy
+Raycast 的阴影系统是 Web 上最接近 macOS 原生风格的。多层阴影结合了：
+- **Outer rings** 用于视觉边界（取代传统的边框）
+- **Inset top highlights**（`rgba(255, 255, 255, 0.05–0.25)`）模拟来自上方的光源
+- **Inset bottom darks**（`rgba(0, 0, 0, 0.2)`）模拟下方的阴影
+- 效果是物理性的：元素感觉像玻璃或拉丝金属，而不是扁平的矩形
+
+### Decorative Depth
+- **Warm glow**：`rgba(215, 201, 175, 0.05) 0px 0px 20px 5px` 位于特色元素之后——在冰冷的暗色画布上微妙的温暖光环
+- **Blue info glow**：`rgba(0, 153, 255, 0.15)` 用于强调交互状态
+- **Red danger glow**：`rgba(255, 99, 99, 0.15)` 用于强调错误/破坏性状态
+
+## 7. 注意事项
+
+### Do
+- 使用 `#07080a`（而不是纯黑）作为背景——偏冷的蓝色调对于 Raycast 的感觉至关重要
+- 在正文文本上应用正字间距（+0.2px）——这是刻意与大多数深色 UI 区分开来的
+- 对交互元素使用带内阴影高光的多层阴影——macOS 原生深度是其标志
+- 将 Raycast Red（`#FF6363`）用作强调，而非全局铺开——将其保留给英雄时刻和错误状态
+- 使用 `rgba(255, 255, 255, 0.06)` 边框作为卡片边界——几乎不可见，但在结构上至关重要
+- 应用 weight 500 作为正文文本的基准——Medium 字重能提高深色模式的可读性
+- 对主要 CTA 使用胶囊形状（86px+ 半径），对次要操作使用矩形形状（6px–8px）
+- 在所有 Inter 文本上启用 OpenType 特性 `calt`, `kern`, `liga`, `ss03`
+- 对按钮交互使用 opacity 过渡（hover: opacity 0.6），而不是颜色变化
+
+### Don't
+- 使用纯黑（`#000000`）作为背景——蓝色调使 Raycast 区别于普通的深色主题
+- 在正文文本上应用负字间距——Raycast 刻意使用正字间距以保持可读性
+- 将 Raycast Blue 用作所有内容的主要强调色——蓝色代表交互/信息，红色才是品牌色
+- 创建单层扁平阴影——多层内嵌系统是 macOS 原生美学的核心
+- 在有 500 字重可用时，对正文文本使用 Regular 字重（400）——额外的字重可以防止深色模式下的文本显得单薄
+- 混合暖色和冷色边框——坚持使用冷灰色（`hsl(195, 5%, 15%)`）调色板的边框
+- 在没有内阴影配合的情况下应用厚重的投射阴影——阴影总是成对出现的（外侧 + 内嵌）
+- 使用装饰性元素、渐变或色彩丰富的背景——黑暗的虚空是舞台，内容才是表演者
+
+## 8. 响应式行为
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <600px | 单列，堆叠卡片，汉堡菜单，英雄区域文本缩小至 ~40px |
+| Small Tablet | 600px–768px | 开始 2 列网格，导航部分可见 |
+| Tablet | 768px–1024px | 2–3 列特性，导航扩展，截图缩放 |
+| Desktop | 1024px–1200px | 完整布局，所有导航链接可见，64px 英雄区域展示文本 |
+| Large Desktop | >1200px | 最大宽度容器居中，留出充足侧边距 |
+
+### Touch Targets
+- Pill buttons：86px 圆角和 20px 内边距——远超 44px 最小尺寸要求
+- Secondary buttons：最少 8px 内边距，但边框提供了视觉上的点击区域扩展
+- Nav links：16px 文本加上周围的填充，构成易于触及的触摸目标
+
+### Collapsing Strategy
+- **Navigation**：完整的水平导航 → 移动端带滑出菜单的汉堡菜单
+- **Hero**：64px 展示文本 → 48px → 跨越断点变 36px
+- **特性 grids**：3列 → 2列 → 单列堆叠
+- **Product screenshots**：在容器内缩放，保持 macOS 窗口边框比例
+- **Keyboard shortcut displays**：在不相关的移动端简化或隐藏键盘快捷键
+
+### Image Behavior
+- 产品截图在固定比例的容器内响应式缩放
+- 英雄区域对角条纹图案按比例缩放
+- macOS 窗口边框的圆角在所有尺寸下均保持
+- 没有 lazy-loading 伪影——图像对于产品叙述至关重要
+
+## 9. Agent 提示词指南
+
+### Quick Color Reference
+- Primary Background: Near-Black Blue (`#07080a`)
+- Primary Text: Near White (`#f9f9f9`)
+- Brand Accent: Raycast Red (`#FF6363`)
+- Interactive Blue: Raycast Blue (`hsl(202, 100%, 67%)` / ~`#55b3ff`)
+- Secondary Text: Medium Gray (`#9c9c9d`)
+- Card Surface: Surface 100 (`#101111`)
+- Border: Dark Border (`hsl(195, 5%, 15%)` / ~`#252829`)
+
+### 示例 Component Prompts
+- "Create a hero section on #07080a background with 64px Inter heading (weight 600, line-height 1.1), near-white text (#f9f9f9), and a semi-transparent white pill CTA button (hsla(0,0%,100%,0.815), 86px radius, dark text #18191a)"
+- "Design a feature card with #101111 background, 1px solid rgba(255,255,255,0.06) border, 16px border-radius, double-ring shadow (rgb(27,28,30) 0px 0px 0px 1px outer), 22px Inter heading, and #9c9c9d body text"
+- "Build a navigation bar on dark background (#07080a), Inter links at 16px weight 500 in #9c9c9d, hover to white, and a translucent white pill button at the right end"
+- "Create a keyboard shortcut display with key caps using gradient background (#121212→#0d0d0d), 5-layer shadow for physical depth, 4px radius, Inter 12px weight 600 text"
+- "Design an alert card with #101111 surface, Raycast Red (#FF6363) left border accent, translucent red glow (hsla(0,100%,69%,0.15)), white heading, and #cecece description text"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Check the background is `#07080a` not pure black — the blue tint is critical
+2. Verify letter-spacing is positive (+0.2px) on body text — negative spacing breaks the Raycast aesthetic
+3. Ensure shadows have both outer and inset layers — single-layer shadows look flat and wrong
+4. Confirm Inter has OpenType features `calt`, `kern`, `liga`, `ss03` enabled
+5. Test that hover states use opacity transitions (0.6) not color swaps — this is a core interaction pattern

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

@@ -0,0 +1,274 @@
+# 设计系统：Replicate
+
+
+> **Hermes Agent — Implementation 说明**
+>
+> 原始站点使用了专有字体。对于独立的 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` 技能（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Replicate 的界面是一个充满创造活力的开发者游乐场——大胆、高对比度的设计，让人感觉更像是一张音乐节海报，而不是典型的 API 平台。Hero section 采用充满活力的橙色-红色-洋红色渐变效果，瞬间传递出“这就是 AI 模型焕发生机之地”的信号，而页面主体则扎根于干净的白色画布之上，让代码片段和模型画廊成为视觉焦点。
+
+该设计的个性由两种极致选择所定义：**超大的展示字体**（高达 128px），使用定制的 rb-freigeist-neue 字体；以及**纯粹的胶囊形状几何**（所有元素的圆角均为 9999px）。展示字体粗犷、醒目且自信——在超大字号下，其粗重的字重营造出一种充满欢乐的呼喊感，而非带有压迫感的权威感。结合用于正文 的 basier-square（一款简洁的几何无衬线字体）和用于代码的 JetBrains Mono，该系统完美服务于那些既追求强大功能又希望保留趣味性的开发者。
+
+Replicate 的独特之处在于其社区驱动的活力。展示 AI 生成图像的模型画廊、带有点状下划线的链接、绿色状态徽章，以及“Imagine what you can build.”的结语宣言，共同营造出一个充满活力且极具参与感的氛围——它不是一个冷冰冰的企业产品页，而是专为充满创造力的开发者打造的发射台。
+
+**关键特征：**
+- 爆发式的橙色-红色-洋红色 hero 渐变（以 #ea2804 为品牌主色调）
+- 采用粗重 rb-freigeist-neue 字体的超大展示排版 (128px)
+- 纯粹的胶囊形状几何：所有元素的圆角均为 9999px
+- 高对比度的黑色 (#202020) 与白色调色板，辅以红色品牌强调色
+- 开发者社区活力：模型画廊、代码示例、点状下划线链接
+- 用于表示在线/运行状态的绿色状态徽章 (#2b9a66)
+- 粗重/厚实的字重 (600-700) 营造出最大的排版视觉冲击力
+- 充满趣味性的结语宣言：“Imagine what you can build.”
+
+## 2. 调色板与角色
+
+### Primary
+- **Replicate Dark** (`#202020`)：主要文本颜色和深色表面——一种近乎纯黑的色调，是所有文本和边框的基础。比纯 #000 稍微偏暖一点。
+- **Replicate Red** (`#ea2804`)：核心品牌色——一种鲜艳、饱和的橙红色，用于 hero 渐变、强调边框以及高吸引力的关键时刻。
+- **Secondary Red** (`#dd4425`)：一种稍微偏暖的变体，用于按钮边框和链接的 hover 状态。
+
+### Secondary & Accent
+- **Status Green** (`#2b9a66`)：用于表示“运行中”或操作状态的徽章/胶囊背景色。
+- **GitHub Dark** (`#24292e`)：一种带蓝色调的深色，用于代码块背景和开发者场景。
+
+### Surface & Background
+- **Pure White** (`#ffffff`)：页面的主要正文背景色。
+- **Near White** (`#fcfcfc`)：深色表面上的按钮文本以及最浅色的内容。
+- **Hero Gradient**：用于 hero section 的极具视觉冲击力的橙色 → 红色 → 洋红色 → 粉色渐变。从暖色调（#ea2804 系列）过渡到亮粉色。
+
+### Neutrals & Text
+- **Medium Gray** (`#646464`)：辅助正文文本和弱化内容。
+- **Warm Gray** (`#4e4e4e`)：强调用的辅助文本。
+- **Mid Silver** (`#8d8d8d`)：三级文本、脚注。
+- **Light Silver** (`#bbbbbb`)：点状下划线链接的装饰色、柔和的元数据。
+- **Pure Black** (`#000000`)：用于最高强度强调的边框和偶尔出现的文本。
+
+### Gradient System
+- **Hero Blaze**：一种富有戏剧性的多节点渐变，流经橙色 (`#ea2804`) → 红色 → 洋红色 → 亮粉色。该渐变占据了整个 hero section，是页面上最具视觉统治力的元素。
+- **Dark Sections**：深色（#202020）区块结合白色/近白色文本，与白色正文形成强烈对比。
+
+## 3. 排版规则
+
+### Font Family
+- **Display**: `rb-freigeist-neue`，备用字体：`ui-sans-serif, system-ui`
+- **Body / UI**: `basier-square`，备用字体：`ui-sans-serif, system-ui`
+- **Code**: `jetbrains-mono`，备用字体：`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`
+
+### Hierarchy
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字母间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Mega | rb-freigeist-neue | 128px (8rem) | 700 | 1.00 (tight) | normal | 最大尺寸：结语宣言 |
+| Display / Hero | rb-freigeist-neue | 72px (4.5rem) | 700 | 1.00 (tight) | -1.8px | Hero section 标题 |
+| Section Heading | rb-freigeist-neue | 48px (3rem) | 400–700 | 1.00 (tight) | normal | 特性区 标题 |
+| Sub-heading | rb-freigeist-neue | 30px (1.88rem) | 600 | 1.20 (tight) | normal | 卡片标题 |
+| Sub-heading Sans | basier-square | 38.4px (2.4rem) | 400 | 0.83 (ultra-tight) | normal | 大号正文标题 |
+| Feature Title | basier-square / rb-freigeist-neue | 18px (1.13rem) | 600 | 1.56 | normal | 小节标题，标签 |
+| Body Large | basier-square | 20px (1.25rem) | 400 | 1.40 | normal | 介绍性段落 |
+| Body / Button | basier-square | 16–18px (1–1.13rem) | 400–600 | 1.50–1.56 | normal | 标准文本，按钮 |
+| Caption | basier-square | 14px (0.88rem) | 400–600 | 1.43 | -0.35px to normal | 元数据，描述 |
+| Small / Tag | basier-square | 12px (0.75rem) | 400 | 1.33 | normal | 标签 (lowercase 转换) |
+| Code | jetbrains-mono | 14px (0.88rem) | 400 | 1.43 | normal | 代码片段，API 示例 |
+| Code Small | jetbrains-mono | 11px (0.69rem) | 400 | 1.50 | normal | 微小的代码引用 |
+
+### Principles
+- **重展示，轻正文**：rb-freigeist-neue 的 700 字重打造出雷鸣般的标题，而 basier-square 的 400 字重则以宁静的效率处理正文文本。这种对比极其强烈且刻意为之。
+- **128px 是实际尺寸**：结语宣言“Imagine what you can build.”使用了 128px——比大多数移动设备屏幕还要大。这相当于设计界在屋顶上的大声呼喊。
+- **Hero 使用负字间距**：72px 下的 -1.8px 字母间距营造了紧凑、极具冲击力的 hero 文本。
+- **小写标签**：12px 的 basier-square 采用了 `text-transform: lowercase`——这是一个不寻常的选择，营造出了一种随性、对开发者友好的氛围。
+- **字重 600 作为强调**：当 basier-square 需要强调时，它使用 600（semibold）——从不使用 bold（700），因为 700 是为 rb-freigeist-neue 展示文本保留的。
+
+## 4. 组件样式
+
+### 按钮
+
+**Dark Solid**
+- Background: Replicate Dark (`#202020`)
+- Text: Near White (`#fcfcfc`)
+- Padding: 0px 4px (extremely compact)
+- Outline: Replicate Dark 4px solid
+- Radius: pill-shaped (implied by system)
+- 最高强度强调——浅色表面上的深色胶囊按钮
+
+**White Outlined**
+- Background: Pure White (`#ffffff`)
+- Text: Replicate Dark (`#202020`)
+- Border: `1px solid #202020`
+- Radius: pill-shaped
+- 用于辅助操作的简洁轮廓胶囊按钮
+
+**Transparent Glass**
+- Background: `rgba(255, 255, 255, 0.1)` (frosted glass)
+- Text: Replicate Dark (`#202020`)
+- Padding: 6px 56px 6px 28px (asymmetric — icon/search layout)
+- Border: transparent
+- Outline: Light Silver (`#bbbbbb`) 1px solid
+- 用于搜索/类似输入框的按钮
+
+### 卡片与容器
+- Background: Pure White 或 subtle gray
+- Border: `1px solid #202020` 用于突出的包裹效果
+- Radius: pill-shaped (9999px) 用于徽章、标签、图片
+- Shadow: minimal standard shadows
+- 模型画廊：由 AI 生成的图像缩略图组成的网格
+- Accent border: `1px solid #ea2804` 用于高亮/特色展示项
+
+### 输入框与表单
+- Background: `rgba(255, 255, 255, 0.1)` (frosted glass)
+- Text: Replicate Dark (`#202020`)
+- Border: transparent with outline
+- Padding: 6px 56px 6px 28px (search-bar style)
+
+### 导航
+- Clean horizontal nav on white
+- Logo: Replicate wordmark in dark
+- Links: dark text with dotted underline on hover
+- CTA: Dark pill button
+- GitHub 链接和登录入口
+
+### 图像处理
+- 画廊网格中的 AI 生成模型输出图像
+- Pill-shaped image containers (9999px)
+- Full-width gradient hero section
+- 深色背景的产品截图
+
+### 特色组件
+
+**模型画廊网格**
+- 水平滚动或由 AI 生成图像组成的网格
+- 每张图片都位于 pill-shaped container 中
+- 显示模型名称和运行次数
+- 社区平台的视觉核心
+
+**点状下划线链接**
+- Links use `text-decoration: underline dotted #bbbbbb`
+- 一种独特的、充满开发者笔记本气质的美学
+- 比实线下划线更轻盈、更随意
+
+**状态徽章**
+- Status Green (`#2b9a66`) background with white text
+- Pill-shaped (9999px)
+- 14px font size
+- 指示模型的可用性/运行状态
+
+**宣言区块**
+- "Imagine what you can build." at 128px
+- Dark background with white text
+- 单词之间嵌有图像
+- 页面的情感高潮
+
+## 5. 布局原则
+
+### 间距系统
+- Base unit: 8px
+- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 160px, 192px
+- Button padding: varies widely (0px 4px to 6px 56px)
+- Section vertical spacing: very generous (96–192px)
+
+### Grid & Container
+- Fluid width with responsive constraints
+- Hero: full-width gradient with centered content
+- Model gallery: multi-column responsive grid
+- 特性区：混合布局
+- Code examples: contained dark blocks
+
+### 留白哲学
+- **大胆而慷慨**：各部分之间巨大的间距（高达 192px）创造了界限分明的区域。
+- **画廊内部紧凑**：模型图像在网格中紧密排列，以提供适合浏览的高密度展示。
+- **渐变即留白**：hero gradient section 作为一种带有色彩的空白区域，占据了显著的垂直空间。
+
+### Border Radius Scale
+- **Pill (9999px)**：系统中唯一的圆角值。每个交互元素、每张图片、每个徽章、每个标签、每个容器都使用 9999px。这是所有主要科技品牌中对胶囊圆角最极致的坚持。
+
+## 6. 深度与层级
+
+| 层级 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | 白色正文，文本块 |
+| Bordered (Level 1) | `1px solid #202020` | 卡片，按钮，容器 |
+| Accent Border (Level 2) | `1px solid #ea2804` | 精选/高亮项 |
+| Gradient Hero (Level 3) | Full-width blaze gradient | Hero section，最大视觉冲击力 |
+| Dark Section (Level 4) | Dark bg (#202020) with light text | 宣言区块，页脚，特性区 |
+
+**阴影哲学**：Replicate 依靠 **borders and background color** 而不是阴影来营造深度。`1px solid #202020` 边框是主要的包裹机制。富有戏剧性的 gradient hero 和深/浅色区块的交替提供了该设计所需的全部深度感。
+
+## 7. 宜与忌
+
+### 宜
+- 在所有元素（按钮、图片、徽章、容器）上使用 pill-shaped (9999px) radius
+- 使用 rb-freigeist-neue 的 700 字重作为展示文本——要做就做大（72px+），否则宁可不做
+- 将橙红色的品牌渐变用于 hero 区
+- 使用 Replicate Dark (#202020) 作为主要深色——而不是纯黑色
+- 在文本链接上应用点状下划线装饰 (#bbbbbb)
+- 使用 Status Green (#2b9a66) 作为操作中/成功状态的徽章
+- 保持正文使用 basier-square 字体，字重维持在 400–600
+- 所有的代码内容均使用 JetBrains Mono
+- 创建一个带有 128px 字体的“宣言”区块以营造情感冲击力
+
+### 忌
+- 不要使用除 9999px 之外的任何 border-radius——胶囊系统是绝对的
+- 不要将品牌红 (#ea2804) 作为表面/背景颜色——它只用于渐变和强调边框
+- 不要在桌面端将展示文本缩小到 48px 以下——厚重的展示字体需要足够的尺寸空间来展现其气场
+- 不要在 rb-freigeist-neue 上使用 light/thin（细体）字重——600–700 才是适用范围
+- 不要在链接上使用实线下划线——点状下划线才是标志性特征
+- 不要添加落影（投影）——深度来源于边框和背景色
+- 不要使用偏暖的中性色——灰度阶是纯粹中性的（#202020 → #bbbbbb）
+- 不要省略代码示例——它们是主要内容，而不是装饰
+- 不要让 hero gradient 显得平淡温和——它应该是 BOLD（大胆醒目）且充满活力的
+
+## 8. 响应式行为
+
+### 断点
+*未检测到显式断点——很可能使用的是 fluid/container-query 响应式系统。*
+
+### 触摸目标
+- Pill buttons with generous padding
+- Gallery images as large touch targets
+- Navigation adequately spaced
+
+### 折叠策略
+- **Hero text**: 128px → 72px → 48px progressive scaling
+- **Model gallery**: Grid reduces columns
+- **Navigation**: Collapses to hamburger
+- **Manifesto**: Scales down but maintains impact
+
+### 图像行为
+- AI-generated images scale within pill containers
+- Gallery reflows to fewer columns on narrow screens
+- Hero gradient maintained at all sizes
+
+## 9. Agent 提示词指南
+
+### 颜色快速参考
+- Primary Text: "Replicate Dark (#202020)"
+- Page Background: "Pure White (#ffffff)"
+- Brand Accent: "Replicate Red (#ea2804)"
+- Secondary Text: "Medium Gray (#646464)"
+- Muted/Decoration: "Light Silver (#bbbbbb)"
+- Status: "Status Green (#2b9a66)"
+- Dark Surface: "Replicate Dark (#202020)"
+
+### 示例 Component Prompts
+- "Create a hero section with a vibrant orange-red-magenta gradient background. Headline at 72px rb-freigeist-neue weight 700, white text, -1.8px letter-spacing. Include a dark pill CTA button and a white outlined pill button."
+- "Design a model card with pill-shaped (9999px) image container, model name at 16px basier-square weight 600, run count at 14px in Medium Gray. Border: 1px solid #202020."
+- "Build a status badge: pill-shaped (9999px), Status Green (#2b9a66) background, white text at 14px basier-square."
+- "Create a manifesto section on Replicate Dark (#202020) with 'Imagine what you can build.' at 128px rb-freigeist-neue weight 700, white text. Embed small AI-generated images between the words."
+- "Design a code block: dark background (#24292e), JetBrains Mono at 14px, white text. Pill-shaped container."
+
+### 迭代指南
+1. Everything is pill-shaped — never specify any other border-radius
+2. Display text is HEAVY — weight 700, sizes 48px+
+3. Links use dotted underline (#bbbbbb) — never solid
+4. The gradient hero is the visual anchor — make it bold
+5. Use basier-square for body, rb-freigeist-neue for display, JetBrains Mono for code