@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,233 @@
+# 设计系统：Figma
+
+
+> **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. 视觉主题与氛围
+
+Figma 的界面是自我设计的设计工具——这是一堂排版精妙性的大师课，其自定义可变字体 (figmaSans) 在极细（字重 320）与粗体（字重 700）之间调节，并停留在大多数字体系统从未探索过的罕见中间值（330、340、450、480、540）上。这种精细的字重控制赋予了每个文本元素精确校准的视觉重量，通过微小区别而非“常规对比粗体”这种生硬工具来创建层级。
+
+页面呈现出迷人的二元性：界面结构严格限制为黑白（实际上检测到的颜色仅有 `#000000` 和 `#ffffff`），而 hero 区域与产品展示则爆发出充满活力的多色渐变——电光绿、明黄、深紫和热粉色。这种分离意味着设计系统本身是无色的，将产品丰富多彩的输出作为核心内容。Figma 的营销页面本质上是一面展示多彩艺术的白色画廊墙。
+
+除了可变字体之外，让 Figma 独具特色的是其圆形与药丸形的几何结构。按钮使用 50px 圆角（药丸形）或 50%（用于图标按钮的完美圆形），营造出一种有机的、类似工具调色板的感觉。虚线轮廓的焦点指示器（`dashed 2px`）是刻意的设计选择，呼应了 Figma 编辑器本身的选择手柄——网站的 UI 语言引用了产品的 UI 语言。
+
+**核心特征：**
+- 自定义可变字体，具有独特的字重停驻点：320、330、340、450、480、540、700
+- 严格黑白限制的界面结构——颜色仅存在于产品内容中
+- 使用 figmaMono 呈现大写技术标签，并加宽字间距
+- 药丸形 (50px) 和圆形 (50%) 按钮几何结构
+- 虚线焦点轮廓，呼应 Figma 编辑器的选择手柄
+- 充满活力的多色 hero 渐变（绿色、黄色、紫色、粉色）
+- 全局启用 OpenType `"kern"` 特性
+- 全面采用负字间距——即使是正文文本也采用 -0.14px 至 -0.26px 的间距
+
+## 2. 调色板与角色
+
+### 主色
+- **纯黑色** (`#000000`)：用于所有文本、所有实心按钮和所有边框。这是界面的唯一“色彩”。
+- **纯白色** (`#ffffff`)：用于所有背景、白色按钮以及深色表面上的文字。这是二元对立的另一半。
+
+*注意：Figma 的营销网站在其界面层仅使用这两种颜色。所有鲜艳的色彩仅出现在产品截图、hero 渐变和嵌入内容中。*
+
+### 表面与背景
+- **纯白色** (`#ffffff`)：主页面背景和卡片表面。
+- **玻璃黑** (`rgba(0, 0, 0, 0.08)`)：用于次级圆形按钮和玻璃效果的微妙深色叠加层。
+- **玻璃白** (`rgba(255, 255, 255, 0.16)`)：用于深色/彩色表面按钮的磨砂玻璃叠加层。
+
+### 渐变系统
+- **Hero 渐变**：使用电光绿、明黄、深紫和热粉色的鲜艳多节点渐变。该渐变是 hero 区域的视觉标志——代表了该工具的创造潜能。
+- **产品区渐变**：各个单独的产品区（Design、Dev Mode、Prototyping）在其展示中可以使用独特的色彩主题。
+
+## 3. 排版规则
+
+### 字体家族
+- **主字体**：`figmaSans`，备选字体：`figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **等宽/标签字体**：`figmaMono`，备选字体：`figmaMono Fallback, SF Mono, menlo`
+
+### 层级结构
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+| ------ | ------ | ------ | -------- | ------------- | ---------------- | ------- |
+| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (紧凑) | -1.72px | 追求最大视觉冲击力，极端字间距 |
+| Section Heading | figmaSans | 64px (4rem) | 400 | 1.10 (紧凑) | -0.96px | 功能区块标题 |
+| Sub-heading | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | 强调区块文本 |
+| Sub-heading Light | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | 细体区块文本 |
+| Feature Title | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | 加粗的卡片标题 |
+| Body Large | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px to -0.14px | 描述、介绍文本 |
+| Body / Button | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px to normal | 标准正文、导航、按钮 |
+| Body Light | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px to normal | 轻量级正文文本 |
+| Mono Label | figmaMono | 18px (1.13rem) | 400 | 1.30 (紧凑) | 0.54px | 大写区块标签 |
+| Mono Small | figmaMono | 12px (0.75rem) | 400 | 1.00 (紧凑) | 0.6px | 大写微型标签 |
+
+### 原则
+- **可变字体的精确度**：figmaSans 使用的字重是大多数系统从未触及的——320、330、340、450、480、540。这通过微妙的重量差异而非剧烈的跳跃来创建层级。330 和 340 之间的差异几乎难以察觉，但在结构上却具有重要意义。
+- **以细体为基调**：大多数正文使用 320–340（比典型的 400 “常规”更轻），营造出一种空灵、轻盈的阅读体验，与设计工具的美学相匹配。
+- **全面启用字距调整**：每个文本元素都启用 OpenType `"kern"` 特性——字距调整不是可选的，而是结构性的。
+- **默认负字间距**：即使是正文也使用 -0.1px 到 -0.26px 的字间距，从而创建全面紧凑的文本。Display 文本进一步压缩至 -0.96px 和 -1.72px。
+- **用于结构的等宽字体**：figmaMono 以大写形式和正字间距（0.54px–0.6px）创建技术路标标签。
+
+## 4. 组件样式
+
+### 按钮
+
+**黑色实心（药丸形）**
+- 背景：纯黑色 (`#000000`)
+- 文本：纯白色 (`#ffffff`)
+- 圆角：用于图标按钮的圆形 (50%)
+- 焦点：dashed 2px 轮廓
+- 最高强调级别
+
+**白色药丸形**
+- 背景：纯白色 (`#ffffff`)
+- 文本：纯黑色 (`#000000`)
+- 内边距：8px 18px 10px（垂直不对称）
+- 圆角：药丸形 (50px)
+- 焦点：dashed 2px 轮廓
+- 深色/彩色表面上的标准 CTA
+
+**深色玻璃**
+- 背景：`rgba(0, 0, 0, 0.08)`（微妙的深色叠加）
+- 文本：纯黑色
+- 圆角：圆形 (50%)
+- 焦点：dashed 2px 轮廓
+- 浅色表面上的次要操作
+
+**浅色玻璃**
+- 背景：`rgba(255, 255, 255, 0.16)`（磨砂玻璃）
+- 文本：纯白色
+- 圆角：圆形 (50%)
+- 焦点：dashed 2px 轮廓
+- 深色/彩色表面上的次要操作
+
+### 卡片与容器
+- 背景：纯白色
+- 边框：无或最小化
+- 圆角：6px（小型容器），8px（图像、卡片、对话框）
+- 阴影：从微弱到中等的高程效果
+- 以产品截图作为卡片内容
+
+### 导航
+- 白色背景上的整洁水平导航
+- Logo：黑色的 Figma 文字商标
+- 产品标签：药丸形 (50px) 标签导航
+- 链接：黑色文本，1px 下划线装饰
+- CTA：黑色药丸形按钮
+- Hover：通过 CSS 变量改变文本颜色
+
+### 独特组件
+
+**产品标签栏**
+- 水平药丸形标签（50px 圆角）
+- 每个标签代表一个 Figma 产品区（Design、Dev Mode、Prototyping 等）
+- 激活的标签会被高亮显示
+
+**Hero 渐变区**
+- 全宽充满活力的多色渐变背景
+- 白色文本叠加层，带有 86px 的 display 标题
+- 渐变中浮动的产品截图
+
+**虚线焦点指示器**
+- 所有交互元素在获取焦点时均使用 `dashed 2px` 轮廓
+- 引用 Figma 编辑器中的选择手柄
+- 连接网站与产品的元设计选择
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 比例：1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
+
+### 网格与容器
+- 最大容器宽度：最高至 1920px
+- Hero：带有居中内容的全宽渐变
+- 产品区：交替式展示
+- Footer：深色全宽区域
+- 响应式范围自 559px 至 1920px
+
+### 留白哲学
+- **画廊般的节奏**：慷慨的间距让每个产品区像独立展品一样拥有呼吸空间。
+- **色彩区域作为视觉呼吸**：渐变 hero 和产品展示在单色界面区域之间提供了色彩上的缓解。
+
+### 圆角比例
+- 最小 (2px)：小型链接元素
+- 微弱 (6px)：小型容器、分割线
+- 舒适 (8px)：卡片、图像、对话框
+- 药丸形 (50px)：标签按钮、CTA
+- 圆形 (50%)：图标按钮、圆形元素
+
+## 6. 深度与高程
+
+| 级别 | 处理方式 | 用途 |
+| ------- | ----------- | ----- |
+| Flat (Level 0) | 无阴影 | 页面背景、大多数文本 |
+| Surface (Level 1) | 渐变/深色区上的白色卡片 | 卡片、产品展示 |
+| Elevated (Level 2) | 微弱的阴影 | 浮动卡片、Hover 状态 |
+
+**阴影哲学**：Figma 极少使用阴影。主要的深度机制是**背景对比**（彩色/深色区域上的白色内容）以及产品截图本身固有的立体感。
+
+## 7. 宜与忌
+
+### 宜
+- 使用带有精确可变字重（320–540）的 figmaSans——精细的字重控制就是设计本身
+- 保持界面严格的黑白限制——颜色仅来源于产品内容
+- 对所有交互元素使用药丸形 (50px) 和圆形 (50%) 几何结构
+- 应用 dashed 2px 焦点轮廓——标志性的无障碍模式
+- 在所有文本上启用 `"kern"` 特性
+- 对标签使用大写、正字间距的 figmaMono
+- 全面应用负字间距（-0.1px 至 -1.72px）
+
+### 忌
+- 不要添加界面颜色——单色调色板是绝对的
+- 不要使用标准字体重量（400、500、600、700）——使用可变字体的独特停驻点（320、330、340、450、480、540）
+- 不要在按钮上使用直角——仅使用药丸形和圆形几何结构
+- 不要使用实线焦点轮廓——虚线是其标志
+- 不要将正文字重增加到 450 以上——轻量级美学是核心
+- 不要在正文文本上使用正字间距——它始终应该是负的
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 关键变化 |
+| ------ | ------- | ------------- |
+| Small Mobile | <560px | 紧凑布局，堆叠排列 |
+| Tablet | 560–768px | 微调 |
+| Small Desktop | 768–960px | 双列布局 |
+| Desktop | 960–1280px | 标准布局 |
+| Large Desktop | 1280–1440px | 扩展布局 |
+| Ultra-wide | 1440–1920px | 最大宽度 |
+
+### 折叠策略
+- Hero 文本：86px → 64px → 48px
+- 产品标签：在移动端水平滚动
+- 功能区域：堆叠为单列
+- Footer：多列 → 堆叠排列
+
+## 9. Agent 提示指南
+
+### 快速颜色参考
+- 一切元素："Pure Black (#000000)" 和 "Pure White (#ffffff)"
+- Glass Dark："rgba(0, 0, 0, 0.08)"
+- Glass Light："rgba(255, 255, 255, 0.16)"
+
+### 示例 Component Prompts
+- "Create a hero on a vibrant multi-color gradient (green, yellow, purple, pink). Headline at 86px figmaSans weight 400, line-height 1.0, letter-spacing -1.72px. White text. White pill CTA button (50px radius, 8px 18px padding)."
+- "Design a product tab bar with pill-shaped buttons (50px radius). Active: Black bg, white text. Inactive: transparent, black text. figmaSans at 20px weight 480."
+- "Build a section label: figmaMono 18px, uppercase, letter-spacing 0.54px, black text. Kern enabled."
+- "Create body text at 20px figmaSans weight 330, line-height 1.40, letter-spacing -0.14px. Pure Black on white."
+
+### 迭代指南
+1. 精确使用可变字体字重停驻点：320、330、340、450、480、540、700
+2. 界面始终是黑+白——永远不要在结构中添加颜色
+3. 使用虚线焦点轮廓，而非实线
+4. 正文的字间距始终为负，mono 标签的字间距始终为正
+5. 按钮/标签使用药丸形 (50px)，图标按钮使用圆形 (50%)

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

@@ -0,0 +1,259 @@
+# Design System: Framer
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原始网站使用专有字体。对于自包含的 HTML 输出，请使用以下 CDN 替代字体：
+> - **Primary:** `Inter` | **Mono:** `Azeret Mono`
+> - **Font stack (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **Mono stack (CSS):** `font-family: 'Azeret 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=Azeret+Mono:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，并通过 `generative-widgets` skill（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Framer 的网站是一个充满电影感、极度聚焦工具的深色画布，散发着由一群崇尚匠心的设计师打造的设计工具所特有的自信。整个体验沉浸在纯黑色中——不是温暖的炭黑或舒适的深灰，而是绝对的虚无（`#000000`），让每个元素、每张截图、每一次排版的修饰都仿佛漂浮在深邃的太空中。这个网站将其产品 UI 本身视为主视觉艺术，将全保真的截图和交互式演示直接嵌入到叙事流中。
+
+排版是其标志性手法：GT Walsheim 采用极具视觉冲击力的紧凑字间距（在 110px 的展示文本上甚至达到了 -5.5px），创造出一种充满压缩感、动感、甚至带有蓄势待发感觉的标题——就像文字处于高压之下，随时可能膨胀。正文过渡到 Inter 非常无缝，大量使用 OpenType 特性（`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`），即使是小号文本也带有精致的定制感。Framer Blue (`#0099ff`) 的使用克制但果断——作为链接颜色、边框装饰和微妙的 ring shadow（环形阴影）——在没有温度的纯黑背景上营造出一种冰冷、充满科技感的视觉主线。
+
+整体效果就像是一个专为网页设计师打造的夜店：暗黑、精准、充满诱惑，并且毫无保留地以产品为绝对核心。每一个部分的存在都是为了展示工具能做什么，而网站本身即是其概念的最好证明。
+
+**核心特征：**
+- 纯黑（`#000000`）虚无画布——绝对的暗黑，不带有暖色或灰色调
+- GT Walsheim 展示字体，采用极端的负字间距（110px 时为 -5.5px）
+- Framer Blue (`#0099ff`) 作为唯一的强调色——冰冷、带电感、精准
+- 胶囊状按钮（40px–100px 圆角）——交互元素不使用锐利的直角
+- 产品截图作为主视觉——工具本身就是营销
+- 在深色表面上使用 `rgba(255, 255, 255, 0.1)` 打造磨砂玻璃质感的按钮变体
+- Inter 字体全面启用丰富的 OpenType 特性，实现精致的微排版
+
+## 2. 调色板与角色
+
+### Primary
+- **Pure Black** (`#000000`)：主要背景，定义 Framer 暗黑优先特性的虚无画布
+- **Pure White** (`#ffffff`)：深色表面上的主要文本颜色，强调色背景上的按钮文本
+- **Framer Blue** (`#0099ff`)：主要强调色——链接、边框、ring shadow（环形阴影）、交互高亮
+
+### Secondary & Accent
+- **Muted Silver** (`#a6a6a6`)：次要文本、柔和的标签、深色表面上变暗的描述
+- **Near Black** (`#090909`)：抬升的深色表面，用于产生微妙深度分隔的 shadow ring（环形阴影）颜色
+
+### Surface & Background
+- **Void Black** (`#000000`)：页面背景，主画布
+- **Frosted White** (`rgba(255, 255, 255, 0.1)`)：半透明按钮背景，暗色上的玻璃质感表面
+- **Subtle White** (`rgba(255, 255, 255, 0.5)`)：稍微不透明些的磨砂元素，用于 hover（悬停）状态
+
+### Neutrals & Text
+- **Pure White** (`#ffffff`)：标题文本，高强调度的正文文本
+- **Muted Silver** (`#a6a6a6`)：正文文本、描述、次要信息
+- **Ghost White** (`rgba(255, 255, 255, 0.6)`)：三级文本，深色表面上的占位符
+
+### Semantic & Accent
+- **Framer Blue** (`#0099ff`)：链接、交互边框、focus rings（聚焦环）
+- **Blue Glow** (`rgba(0, 153, 255, 0.15)`)：focus ring（聚焦环）阴影，交互元素周围微弱的蓝色光晕
+- **Default Link Blue** (`#0000ee`)：标准浏览器链接颜色（极少在内容区域使用）
+
+### Gradient System
+- 没有明显的渐变使用——Framer 依赖于纯粹的平面黑色表面，偶尔使用带蓝色调的光晕来增加深度
+- 在产品截图后方使用极低不透明度的 Framer Blue 打造微妙的径向光晕效果
+
+## 3. 排版规则
+
+### Font Family
+- **Display**: `GT Walsheim Framer Medium` / `GT Walsheim Medium` —— 定制几何无衬线字体，字重 500。Fallbacks: `GT Walsheim Framer Medium Placeholder`, system sans-serif
+- **Body/UI**: `Inter Variable` / `Inter` —— 带有丰富 OpenType 特性的可变无衬线字体。Fallbacks: `Inter Placeholder`, `-apple-system`, `system-ui`
+- **Accent**: `Mona Sans` —— GitHub 的开源字体，用于特定元素的超细字重（100）
+- **Monospace**: `Azeret Mono` —— 用于代码和技术标签的配套等宽字体
+- **Rounded**: `Open Runde` —— 用于微型标签的偏小圆润配套字体
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+| ------ | ------ | ------ | -------- | ------------- | ---------------- | ------- |
+| Display Hero | GT Walsheim Framer Medium | 110px | 500 | 0.85 | -5.5px | Extreme negative tracking, compressed impact |
+| Section Display | GT Walsheim Medium | 85px | 500 | 0.95 | -4.25px | OpenType: ss02, tnum |
+| Section Heading | GT Walsheim Medium | 62px | 500 | 1.00 | -3.1px | OpenType: ss02 |
+| Feature Heading | GT Walsheim Medium | 32px | 500 | 1.13 | -1px | Tightest of the smaller headings |
+| Accent Display | Mona Sans | 61.5px | 100 | 1.00 | -3.1px | Ultra-light weight, ethereal |
+| Card Title | Inter Variable | 24px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |
+| Feature Title | Inter | 22px | 700 | 1.20 | -0.8px | OpenType: cv05 |
+| Sub-heading | Inter | 20px | 600 | 1.20 | -0.8px | OpenType: cv01, cv09 |
+| Body Large | Inter Variable | 18px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |
+| Body | Inter Variable | 15px | 400 | 1.30 | -0.01px | OpenType: cv11 |
+| Nav/UI | Inter Variable | 15px | 400 | 1.00 | -0.15px | OpenType: cv06, cv11, dlig, ss03 |
+| Body Readable | Inter Framer Regular | 14px | 400 | 1.60 | normal | Long-form body text |
+| Caption | Inter Variable | 14px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |
+| Label | Inter | 13px | 500 | 1.60 | normal | OpenType: cv06, cv11, ss03 |
+| Small Caption | Inter Variable | 12px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |
+| Micro Code | Azeret Mono | 10.4px | 400 | 1.60 | normal | OpenType: cv06, cv11, ss03 |
+| Badge | Open Runde | 9px | 600 | 1.11 | normal | OpenType: cv01, cv09 |
+| Micro Uppercase | Inter Variable | 7px | 400 | 1.00 | 0.21px | uppercase transform |
+
+### Principles
+- **压缩感即个性**：GT Walsheim 极端的负字间距（110px 时为 -5.5px）是其标志性的排版手势——标题让人感觉充满弹性、紧迫，几乎到了令人屏息的程度
+- **OpenType 极致主义**：Inter 同时启用了 6 项以上的 OpenType 特性（`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`），即使在正文字号下也能创造出微妙的定制感
+- **展示字体克制的字重**：所有 GT Walsheim 的使用字重均为 500（medium）——绝对不用 bold，也不用 regular。这创造了一种自信但不具攻击性的展示基调
+- **超紧凑的行高**：展示文本的行高为 0.85，意味着字母在垂直方向上几乎重叠——这种有意的紧凑度能在保持正常视距阅读时给予视觉回报
+
+## 4. 组件样式
+
+### Buttons
+- **Frosted Pill**: `rgba(255, 255, 255, 0.1)` 背景，黑色文本（`#000000`），胶囊状（40px 圆角）。这种具有玻璃效果的按钮存在于深色表面上——半透明、带有环境融合感、微妙
+- **Solid White Pill**: `rgb(255, 255, 255)` 背景，黑色文本（`#000000`），完全的胶囊状（100px 圆角），内边距 `10px 15px`。主要的 CTA 按钮——在暗色背景上显得干净、高对比度且不容错过
+- **Ghost**: 无可见背景，白色文本，仅依赖文本样式。Hover（悬停）时显示微弱的磨砂背景
+- **Transition**: 基于缩放的动画（缩放因子为 0.85 的 matrix transform），透明度过渡用于显现效果
+
+### Cards & Containers
+- **Dark Surface Card**: 黑色或极深黑色（`#090909`）背景，`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px` 蓝色 ring shadow（环形阴影）边框，圆角（10px–15px 圆角）
+- **Elevated Card**: 多层阴影——`rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px`（微妙的顶部高光）+ `rgba(0, 0, 0, 0.25) 0px 10px 30px`（深沉的环境阴影）
+- **Product Screenshots**: 全宽或在深色容器内带有内边距，8px–12px border-radius 用于软件 UI 预览
+- **Hover**: 微微增强 Framer Blue ring shadow（环形阴影）的光晕，或磨砂表面的亮度发生变化
+
+### Inputs & Forms
+- 营销网站上的表单存在感极低
+- 输入框遵循暗色主题：深色背景、微弱的边框、白色文本
+- Focus state（聚焦态）：Framer Blue (`#0099ff`) ring border（环形边框），`1px solid #0099ff`
+- 占位符文本使用 `rgba(255, 255, 255, 0.4)`
+
+### Navigation
+- **Dark floating nav bar**: 带有磨砂玻璃效果的黑色背景，白色文本链接
+- **Nav links**: Inter，15px，weight 400，白色文本，带有微妙的 hover（悬停）透明度变化
+- **CTA button**: 胶囊状，白色或磨砂质感，位于导航栏的最右侧
+- **Mobile**: 折叠为汉堡菜单，保持暗色主题
+- **Sticky behavior**: 滚动时导航栏固定在顶部
+
+### Image Treatment
+- **Product screenshots as hero art**: 全宽嵌入的 UI 截图，带圆角（8px–12px）
+- **Dark-on-dark composition**: 截图放置在黑色背景上，带有微妙的阴影以产生深度分隔
+- **16:9 and custom aspect ratios**: 产品演示填满其容器
+- **No decorative imagery**: 所有图像都是功能性的——展示工具、输出结果或工作流程
+
+### Trust & Social Proof
+- 客户 Logo 和推荐语在深色表面上以柔和的灰色显示
+- 极少的装饰——产品截图本身就是信任信号
+
+## 5. 布局原则
+
+### Spacing System
+- **Base unit**: 8px
+- **Scale**: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 20px, 30px, 35px
+- **Section padding**: 较大的垂直间距（各部分之间 80px–120px）
+- **Card padding**: 内部边距 15px–30px
+- **Component gaps**: 相关元素之间 8px–20px
+
+### Grid & Container
+- **Max width**: 容器最大宽度约 1200px，居中
+- **Column patterns**: 全宽 hero（主视觉）区，双栏特性区，单栏产品展示区
+- **Asymmetric layouts**: 特性区通常将文本（40%）与截图（60%）并排搭配
+
+### Whitespace Philosophy
+- **Breathe through darkness**: 各部分之间拥有宽裕的垂直间距——黑色背景意味着留白呈现为虚无，在内容块之间制造出戏剧性的停顿
+- **Dense within, spacious between**: 单个组件排版紧凑（紧凑的行高、压缩的文本），但漂浮在周围宽裕的空间中
+- **Product-first density**: 截图区域允许高密度和信息丰富度，与稀疏的营销文本形成对比
+
+### Border Radius Scale
+- **1px**: 微型元素，近乎方正的精准边缘
+- **5px–7px**: 小型 UI 元素，图像缩略图——经过微妙的柔化处理
+- **8px**: 标准组件圆角——代码块、按钮、交互元素
+- **10px–12px**: 卡片、产品截图——圆润度适中
+- **15px–20px**: 大型容器，功能卡片——大圆角
+- **30px–40px**: 导航胶囊、分页——明显的圆角
+- **100px**: 完整的胶囊状——主要 CTA、标签元素
+
+## 6. 深度与层级
+
+| Level | Treatment | Use |
+| ------- | ----------- | ----- |
+| Level 0 (Flat) | 无阴影，纯黑色表面 | 页面背景，空白区域 |
+| Level 1 (Ring) | `rgba(0, 153, 255, 0.15) 0px 0px 0px 1px` | 卡片边框，交互元素轮廓——Framer Blue 辉光环 |
+| Level 2 (Contained) | `rgb(9, 9, 9) 0px 0px 0px 2px` | 近黑色的环，用于在深色表面上实现微妙的包裹感 |
+| Level 3 (Floating) | `rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px` | 抬升的卡片，浮动元素——微弱的白色顶部高光 + 深沉的环境阴影 |
+
+### Shadow Philosophy
+Framer 的层级系统与传统亮色主题设计相反。Framer 没有在亮色背景上使用更暗的阴影，而是使用：
+- **Blue-tinted ring shadows**（带蓝色调的环形阴影）以极低的不透明度（0.15）提供边界感——这是一种标志性的做法，巧妙地为所有带边框的元素打上品牌烙印
+- 抬升元素顶部边缘的 **White edge highlights**（白色边缘高光）（0.5px）——模拟光线照射在顶部的效果
+- 用于真正浮动元素的 **Deep ambient shadows**（深沉的环境阴影）——大扩散范围（30px）的 `rgba(0, 0, 0, 0.25)`
+
+### Decorative Depth
+- **Blue glow auras**：关键交互区域后方微弱的 Framer Blue (`#0099ff`) 径向渐变
+- **No background blur/glassmorphism**：尽管有磨砂按钮效果，但没有使用厚重的玻璃模糊——半透明感是通过简单的 rgba 透明度实现的
+
+## 7. 宜与忌
+
+### 宜
+- 使用纯黑（`#000000`）作为主要背景——不要用深灰，也不要炭黑
+- 在 GT Walsheim 展示文本上应用极端的负字间距（-3px 到 -5.5px）
+- 保持所有按钮为胶囊状（40px+ 圆角）——绝对不要使用直角或微圆角按钮
+- 仅将 Framer Blue (`#0099ff`) 用于交互强调——链接、边框、focus state（聚焦态）
+- 在深色背景上使用 `rgba(255, 255, 255, 0.1)` 打造磨砂玻璃表面
+- 始终保持 GT Walsheim 字重为 500——medium 字重就是这个品牌的象征
+- 在 Inter 文本上大量使用 OpenType 特性（cv01, cv05, cv09, cv11, ss03, ss07）
+- 让产品截图成为视觉核心——工具本身就是最好的营销
+- 应用蓝色 ring shadow（环形阴影）（`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px`）作为卡片的边界
+
+### 忌
+- 使用温暖的深色背景（不要用 `#1a1a1a`、`#2d2d2d` 或偏棕色的黑色）
+- 对 GT Walsheim 展示文本应用 bold（700+）字重——只能使用 medium 500
+- 引入除 Framer Blue 之外的任何强调色——这是一个单强调色系统
+- 在非交互元素上使用大圆角（卡片使用 10px–15px，只有按钮才能使用 40px+）
+- 添加装饰性图像、插图或图标——产品本身就是插图
+- 在标题上使用正字间距——一切都需要被压缩，使用负字间距
+- 创建厚重的投影（drop shadows）——深度是通过微妙的环形阴影和极简的环境阴影传达的
+- 在内容部分后方放置浅色/白色背景——虚无（纯黑背景）是神圣不可侵犯的
+- 使用衬线体或展示字重的字体——该系统仅使用几何无衬线字体
+
+## 8. 响应式行为
+
+### Breakpoints
+| Name | Width | Key Changes |
+| ------ | ------- | ------------- |
+| Mobile | <809px | 单栏，堆叠的特性区，缩小的 hero 文本（62px→40px），汉堡导航 |
+| Tablet | 809px–1199px | 开始出现双栏特性，部分可见的导航链接，截图按比例缩小 |
+| Desktop | >1199px | 完整布局，展开包含所有链接 + CTA 的导航，110px 展示文本主视觉，并排展示的特性区 |
+
+### Touch Targets
+- Pill buttons: 最小 40px 高度，带有 10px 垂直内边距——超过 44px 的 WCAG 最低标准
+- Nav links: 15px 文本，带有宽裕的内边距以确保触摸可访问性
+- Mobile CTA buttons: 移动端全宽胶囊按钮，方便拇指触达
+
+### Collapsing Strategy
+- **Navigation**: 完整的水平导航 → 移动端断点处的汉堡菜单
+- **Hero text**: 110px 展示文本 → 85px → 62px → ~40px 跨断点变化，并按比例保持极端的负字间距
+- **Feature sections**: 并排展示（文本 + 截图）→ 移动端垂直堆叠
+- **Product screenshots**: 在容器内响应式缩放，保持宽高比
+- **Section spacing**: 按比例缩小——桌面端 120px → 移动端 60px
+
+### Image Behavior
+- 产品截图具有响应性，在其容器边界内缩放
+- 没有 art direction（视觉方向）变化——跨断点保持相同的裁剪
+- 深色背景确保截图在任何尺寸下都能保持视觉冲击力
+- 当用户滚动进入视图时，截图进行懒加载
+
+## 9. Agent 提示指南
+
+### Quick Color Reference
+- Primary Background: Void Black (`#000000`)
+- Primary Text: Pure White (`#ffffff`)
+- Accent/CTA: Framer Blue (`#009ff`)
+- Secondary Text: Muted Silver (`#a6a6a6`)
+- Frosted Surface: Translucent White (`rgba(255, 255, 255, 0.1)`)
+- Elevation Ring: Blue Glow (`rgba(0, 153, 255, 0.15)`)
+
+### 示例 Component Prompts
+- "Create a hero section on pure black background with 110px GT Walsheim heading in white, letter-spacing -5.5px, line-height 0.85, and a pill-shaped white CTA button (100px radius) with black text"
+- "Design a feature card on black background with a 1px Framer Blue ring shadow border (rgba(0,153,255,0.15)), 12px border-radius, white heading in Inter at 22px weight 700, and muted silver (a6a6a6) body text"
+- "Build a navigation bar with black background, white Inter text links at 15px, and a frosted pill button (rgba(255,255,255,0.1) background, 40px radius) as the CTA"
+- "Create a product showcase section with a full-width screenshot embedded on black, 10px border-radius, subtle multi-layer shadow (white 0.5px top highlight + rgba(0,0,0,0.25) 30px ambient)"
+- "Design a pricing card using pure black surface, Framer Blue (#0099ff) accent for the selected plan border, white text hierarchy (24px Inter bold heading, 14px regular body), and a solid white pill CTA button"
+
+### Iteration Guide
+当使用该设计系统完善已生成的屏幕时：
+1. 每次只关注一个组件——暗色画布让每个元素都显得尤为珍贵
+2. 务必检查 GT Walsheim 标题的 letter-spacing（字间距）——极端的负字间距是不可商量的
+3. 检查 Framer Blue 是否仅出现在交互元素上——绝对不能作为非链接元素的装饰性背景或文本颜色
+4. 确保所有按钮都是胶囊状——任何直角都会瞬间破坏 Framer 的美学
+5. 通过检查磨砂玻璃表面是否正好是 `rgba(255, 255, 255, 0.1)` 来进行测试——太不透明看起来像 bug，太透明则会消失于背景之中