npm - @baimingtao/lbs-agent - Versions diffs - 1.0.0 - Mend

@baimingtao/lbs-agent 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1114) hide show

package/extensions/skills/builtin/creative/popular-web-designs/SKILL.md ADDED Viewed

@@ -0,0 +1,202 @@
+---
+name: popular-web-designs
+description: 54 个真实设计系统（Stripe、Linear、Vercel）的 HTML/CSS 实现。
+version: 1.0.0
+author: Hermes Agent + Teknium (设计系统源自 VoltAgent/awesome-design-md)
+license: MIT
+tags: [design, css, html, ui, web-development, design-systems, templates]
+platforms: [linux, macos, windows]
+triggers:
+  - build a page that looks like
+  - make it look like stripe
+  - design like linear
+  - vercel style
+  - create a UI
+  - web design
+  - landing page
+  - dashboard design
+  - website styled like
+---
+# 流行网页设计
+54 个真实世界的设计系统，可在生成 HTML/CSS 时直接使用。每个模板都捕捉了某个网站完整的视觉语言：调色板、排版层级、组件样式、间距系统、阴影、响应式行为，以及带有精确 CSS 值的实用 agent prompt。
+## 相关设计技能
+- **`claude-design`** — 用于设计*过程与品味*（明确需求、生成变体、验证本地 HTML 产出、避免 AI 味浓郁的劣质设计）。当用户希望获得风格参考自知名品牌的精心设计的页面时，可将此技能与该技能搭配使用：`claude-design` 驱动工作流程，而该技能提供视觉词汇。
+- **`design-md`** — 当交付物是正式的 DESIGN.md design token 规范文件，而非渲染后的产物时使用。
+## 如何使用
+1. 从下方的目录中挑选一个设计
+2. 加载它：`skill_view(name="popular-web-designs", file_path="templates/<site>.md")`
+3. 在生成 HTML 时使用对应的 design token 和组件规范
+4. 配合 `generative-widgets` 技能，通过 cloudflared tunnel 提供服务
+每个模板的顶部都包含一个 **Hermes Implementation Notes** 模块，其中有：
+- CDN 字体替代方案和 Google Fonts `<link>` 标签（可直接粘贴使用）
+- 用于 primary 和 monospace 的 CSS font-family stacks
+- 提醒使用 `write_file` 创建 HTML，并使用 `browser_vision` 进行验证
+## HTML 生成模式
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Page Title</title>
+  <!-- Paste the Google Fonts <link> from the template's Hermes notes -->
+  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
+  <style>
+    /* Apply the template's color palette as CSS custom properties */
+    :root {
+      --color-bg: #ffffff;
+      --color-text: #171717;
+      --color-accent: #533afd;
+      /* ... more from template Section 2 */
+    }
+    /* Apply typography from template Section 3 */
+    body {
+      font-family: 'Inter', system-ui, sans-serif;
+      color: var(--color-text);
+      background: var(--color-bg);
+    }
+    /* Apply component styles from template Section 4 */
+    /* Apply layout from template Section 5 */
+    /* Apply shadows from template Section 6 */
+  </style>
+</head>
+<body>
+  <!-- Build using component specs from the template -->
+</body>
+</html>
+```
+使用 `write_file` 写入文件，通过 `generative-widgets` 工作流（cloudflared tunnel）提供服务，并使用 `browser_vision` 验证结果，以确保视觉准确性。
+## 字体替换参考
+大多数网站使用无法通过 CDN 获取的专有字体。每个模板都映射了一个能保留设计特征的 Google Fonts 替代字体。常见映射：
+| 专有字体 | CDN 替代字体 | 特征 |
+| --- | --- | --- |
+| Geist / Geist Sans | Geist（在 Google Fonts 上） | 几何风格，紧凑的字间距 |
+| Geist Mono | Geist Mono（在 Google Fonts 上） | 干净的等宽字体，连字 |
+| sohne-var (Stripe) | Source Sans 3 | 轻量级的优雅 |
+| Berkeley Mono | JetBrains Mono | 技术感的等宽字体 |
+| Airbnb Cereal VF | DM Sans | 圆润、友好的几何风格 |
+| Circular (Spotify) | DM Sans | 几何风格，具有亲和力 |
+| figtreeSans | Inter | 干净的人文主义风格 |
+| Pin Sans (Pinterest) | DM Sans | 友好、圆润 |
+| NVIDIA-EMEA | Inter（或 Arial 系统字体） | 工业风，干净 |
+| CoinbaseDisplay/Sans | DM Sans | 几何风格，值得信赖 |
+| UberMove | DM Sans | 粗体，紧凑 |
+| HashiCorp Sans | Inter | 企业级，中性 |
+| waldenburgNormal (Sanity) | Space Grotesk | 几何风格，略微紧凑 |
+| IBM Plex Sans/Mono | IBM Plex Sans/Mono | 在 Google Fonts 上可用 |
+| Rubik (Sentry) | Rubik | 在 Google Fonts 上可用 |
+当模板的 CDN 字体与原字体匹配时（Inter、IBM Plex、Rubik、Geist），不会发生替换损失。当使用替代字体时（用 DM Sans 替代 Circular，用 Source Sans 3 替代 sohne-var），请严格遵循模板的 weight、size 和 letter-spacing 值——它们比特定的字体外观承载了更多的视觉特征。
+## 设计目录
+### AI 与机器学习
+| 模板 | 站点 | 风格 |
+| --- | --- | --- |
+| `claude.md` | Anthropic Claude | 温暖的陶土色强调，干净的编辑布局 |
+| `cohere.md` | Cohere | 鲜艳的渐变色，数据密集的仪表板美学 |
+| `elevenlabs.md` | ElevenLabs | 深色电影感 UI，音频波形美学 |
+| `minimax.md` | Minimax | 大胆的深色界面，带有霓虹色强调 |
+| `mistral.ai.md` | Mistral AI | 法式极简主义，紫色调 |
+| `ollama.md` | Ollama | 终端优先，单色简约 |
+| `opencode.ai.md` | OpenCode AI | 以开发者为中心的深色主题，全等宽字体 |
+| `replicate.md` | Replicate | 干净的白色画布，代码优先 |
+| `runwayml.md` | RunwayML | 电影级深色 UI，富媒体布局 |
+| `together.ai.md` | Together AI | 技术感，蓝图风格设计 |
+| `voltagent.md` | VoltAgent | 极致黑色画布，翠绿色强调，原生终端风格 |
+| `x.ai.md` | xAI | 鲜明的单色，未来主义极简风格，全等宽字体 |
+### 开发者工具与平台
+| 模板 | 站点 | 风格 |
+| --- | --- | --- |
+| `cursor.md` | Cursor | 时尚的深色界面，渐变强调 |
+| `expo.md` | Expo | 深色主题，紧凑的字间距，以代码为中心 |
+| `linear.app.md` | Linear | 超极简暗色模式，精准，紫色强调 |
+| `lovable.md` | Lovable | 俏皮的渐变色，友好的开发者美学 |
+| `mintlify.md` | Mintlify | 干净的绿色强调，为阅读优化 |
+| `posthog.md` | PostHog | 俏皮的品牌形象，对开发者友好的深色 UI |
+| `raycast.md` | Raycast | 时尚的深色外观，充满活力的渐变强调 |
+| `resend.md` | Resend | 极简的深色主题，等宽字体强调 |
+| `sentry.md` | Sentry | 深色仪表板，数据密集，粉紫色强调 |
+| `supabase.md` | Supabase | 深翠绿主题，代码优先的开发者工具 |
+| `superhuman.md` | Superhuman | 高级深色 UI，键盘优先，紫色光晕 |
+| `vercel.md` | Vercel | 黑白精准，Geist 字体系统 |
+| `warp.md` | Warp | 深色类 IDE 界面，基于区块的命令 UI |
+| `zapier.md` | Zapier | 温暖的橙色，友好的插画驱动 |
+### 基础设施与云服务
+| 模板 | 站点 | 风格 |
+| --- | --- | --- |
+| `clickhouse.md` | ClickHouse | 黄色强调，技术文档风格 |
+| `composio.md` | Composio | 现代深色主题，搭配彩色的集成图标 |
+| `hashicorp.md` | HashiCorp | 企业级干净风格，黑白配色 |
+| `mongodb.md` | MongoDB | 绿叶品牌标识，侧重开发者文档 |
+| `sanity.md` | Sanity | 红色强调，内容优先的编辑布局 |
+| `stripe.md` | Stripe | 标志性的紫色渐变，weight-300 优雅风格 |
+### 设计与生产力
+| 模板 | 站点 | 风格 |
+| --- | --- | --- |
+| `airtable.md` | Airtable | 色彩丰富、友好、结构化的数据美学 |
+| `cal.md` | Cal.com | 干净的中性 UI，面向开发者的简约风格 |
+| `clay.md` | Clay | 有机形状，柔和渐变，艺术指导布局 |
+| `figma.md` | Figma | 充满活力的多彩风格，俏皮又不失专业 |
+| `framer.md` | Framer | 大胆的黑蓝配色，动效优先，设计导向 |
+| `intercom.md` | Intercom | 友好的蓝色调色板，对话式 UI 模式 |
+| `miro.md` | Miro | 明亮的黄色强调，无限画布美学 |
+| `notion.md` | Notion | 温暖的极简主义，衬线标题，柔和的表面 |
+| `pinterest.md` | Pinterest | 红色强调，瀑布流网格，图片优先布局 |
+| `webflow.md` | Webflow | 蓝色强调，精致的营销网站美学 |
+### 金融科技与加密货币
+| 模板 | 站点 | 风格 |
+| --- | --- | --- |
+| `coinbase.md` | Coinbase | 干净的蓝色标识，注重信任，机构感 |
+| `kraken.md` | Kraken | 紫色强调的深色 UI，数据密集的仪表板 |
+| `revolut.md` | Revolut | 时尚的深色界面，渐变卡片，金融科技精准度 |
+| `wise.md` | Wise | 明亮的绿色强调，友好且清晰 |
+### 企业与消费级
+| 模板 | 站点 | 风格 |
+| --- | --- | --- |
+| `airbnb.md` | Airbnb | 温暖的珊瑚色强调，摄影驱动，圆润的 UI |
+| `apple.md` | Apple | 高级留白，SF Pro，电影级图像 |
+| `bmw.md` | BMW | 高级深色表面，精准的工程美学 |
+| `ibm.md` | IBM | Carbon 设计系统，结构化的蓝色调色板 |
+| `nvidia.md` | NVIDIA | 绿黑能量感，技术力量美学 |
+| `spacex.md` | SpaceX | 鲜明的黑白，全出血图像，未来主义 |
+| `spotify.md` | Spotify | 深色背景上的鲜艳绿色，粗体排版，专辑封面驱动 |
+| `uber.md` | Uber | 大胆的黑白，紧凑排版，都市能量 |
+## 挑选设计
+根据内容匹配设计：
+- **开发者工具 / 仪表板：** Linear, Vercel, Supabase, Raycast, Sentry
+- **文档 / 内容站点：** Mintlify, Notion, Sanity, MongoDB
+- **营销 / 落地页：** Stripe, Framer, Apple, SpaceX
+- **深色模式 UI：** Linear, Cursor, ElevenLabs, Warp, Superhuman
+- **明亮 / 干净的 UI：** Vercel, Stripe, Notion, Cal.com, Replicate
+- **俏皮 / 友好：** PostHog, Figma, Lovable, Zapier, Miro
+- **高级 / 奢华：** Apple, BMW, Stripe, Superhuman, Revolut
+- **数据密集 / 仪表板：** Sentry, Kraken, Cohere, ClickHouse
+- **等宽字体 / 终端美学：** Ollama, OpenCode, x.ai, VoltAgent

package/extensions/skills/builtin/creative/popular-web-designs/templates/airbnb.md ADDED Viewed

@@ -0,0 +1,259 @@
+# 设计系统：Airbnb
+> **Hermes Agent — 实现说明**
+>
+> 原始站点使用专有字体。对于独立的 HTML 输出，请使用以下 CDN 替代字体：
+> - **主要字体：** `DM Sans` | **等宽字体：** `system monospace stack`
+> - **字体堆栈：** `font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **等宽字体堆栈：** `font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，并通过 `generative-widgets` 技能（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+## 1. 视觉主题与氛围
+Airbnb 的网站是一个充满温度、以摄影为主导的市场，感觉就像在翻阅一本旅游杂志，每一页都在邀请你预订。设计建立在纯白（`#ffffff`）的基础之上，标志性的 Rausch Red（`#ff385c`）——以 Airbnb 的第一个街道地址命名——作为唯一的品牌强调色。最终呈现出一个干净、透气的画布，其中房源照片、类别图标和红色的 CTA 按钮是仅有的色彩来源。
+排版使用了 Airbnb Cereal VF —— 一种定制的可变字体，给人温暖且平易近人的感觉，其圆润的端点呼应了品牌“家在四方”的理念。该字体的字重范围较窄：500（medium）用于大多数 UI，600（semibold）用于强调，700（bold）用于主标题。标题上微小的负字间距（-0.18px 到 -0.44px）营造出一种舒适、亲密的阅读体验，而不是科技公司那种紧凑的效率感。
+Airbnb 的独特之处在于其基于调色板的 token 系统（`--palette-*`）和多层次的阴影处理方法。主要的卡片阴影使用了三层堆叠（`rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`），创造出一种微妙、温暖的悬浮感。结合大尺寸的 border-radius（8px–32px）、圆形导航控件（50%）以及带有水平滚动功能的类别胶囊条，该界面给人一种触手可及且极具吸引力的感觉——它是为浏览而设计的，而不是为了下达指令。
+**核心特征：**
+- 纯白画布，以 Rausch Red（`#ff385c`）作为单一的品牌强调色
+- Airbnb Cereal VF —— 具有圆润端点的定制可变字体
+- 基于调色板的 token 系统（`--palette-*`），用于系统化的颜色管理
+- 三层卡片阴影：边框环 + 柔和模糊 + 更强的模糊
+- 宽大的 border-radius：8px 按钮，14px 徽章，20px 卡片，32px 大型元素
+- 圆形导航控件（50% 圆角）
+- 图片优先的房源卡片 —— 图像是核心内容
+- 接近黑色的文本（`#222222`）—— 温暖，不冷硬
+- Luxe Purple（`#460479`）和 Plus Magenta（`#92174d`）用于高级别层级
+## 2. 调色板与角色
+### 主品牌色
+- **Rausch Red** (`#ff385c`)：`--palette-bg-primary-core`，主要的 CTA、品牌强调色、激活状态
+- **Deep Rausch** (`#e00b41`)：`--palette-bg-tertiary-core`，品牌红色的按下/变体
+- **Error Red** (`#c13515`)：`--palette-text-primary-error`，浅色背景上的错误文本
+- **Error Dark** (`#b32505`)：`--palette-text-secondary-error-hover`，错误悬停状态
+### 高级别层级
+- **Luxe Purple** (`#460479`)：`--palette-bg-primary-luxe`，Airbnb Luxe 级别的品牌色
+- **Plus Magenta** (`#92174d`)：`--palette-bg-primary-plus`，Airbnb Plus 级别的品牌色
+### 文本色阶
+- **Near Black** (`#222222`)：`--palette-text-primary`，主要文本 —— 温暖，不冷硬
+- **Focused Gray** (`#3f3f3f`)：`--palette-text-focused`，聚焦状态的文本
+- **Secondary Gray** (`#6a6a6a`)：次要文本，描述说明
+- **Disabled** (`rgba(0,0,0,0.24)`)：`--palette-text-material-disabled`，禁用状态
+- **Link Disabled** (`#929292`)：`--palette-text-link-disabled`，禁用的链接
+### 交互色
+- **Legal Blue** (`#428bff`)：`--palette-text-legal`，法律声明链接，信息提示
+- **Border Gray** (`#c1c1c1`)：卡片和分割线的边框颜色
+- **Light Surface** (`#f2f2f2`)：圆形导航按钮，次要表面
+### 表面与阴影
+- **Pure White** (`#ffffff`)：页面背景，卡片表面
+- **Card Shadow** (`rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`)：三层温暖悬浮感
+- **Hover Shadow** (`rgba(0,0,0,0.08) 0px 4px 12px`)：按钮悬停时的抬升效果
+## 3. 排版规则
+### 字体族
+- **主要字体**：`Airbnb Cereal VF`，回退字体：`Circular, -apple-system, system-ui, Roboto, Helvetica Neue`
+- **OpenType 特性**：在特定的说明文字元素上使用 `"salt"`（样式替代）
+### 层级结构
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+| ------ | ------ | ------ | -------- | ------------- | ---------------- | ------- |
+| 章节标题 | Airbnb Cereal VF | 28px (1.75rem) | 700 | 1.43 | normal | 主标题 |
+| 卡片标题 | Airbnb Cereal VF | 22px (1.38rem) | 600 | 1.18 (tight) | -0.44px | 分类/卡片标题 |
+| 卡片标题 (中等) | Airbnb Cereal VF | 22px (1.38rem) | 500 | 1.18 (tight) | -0.44px | 较轻的变体 |
+| 副标题 | Airbnb Cereal VF | 21px (1.31rem) | 700 | 1.43 | normal | 粗体副标题 |
+| 特性标题 | Airbnb Cereal VF | 20px (1.25rem) | 600 | 1.20 (tight) | -0.18px | 功能标题 |
+| UI 中等 | Airbnb Cereal VF | 16px (1.00rem) | 500 | 1.25 (tight) | normal | 导航，强调文本 |
+| UI 半粗体 | Airbnb Cereal VF | 16px (1.00rem) | 600 | 1.25 (tight) | normal | 强烈强调 |
+| 按钮 | Airbnb Cereal VF | 16px (1.00rem) | 500 | 1.25 (tight) | normal | 按钮标签 |
+| 正文 / 链接 | Airbnb Cereal VF | 14px (0.88rem) | 400 | 1.43 | normal | 标准正文 |
+| 正文 (中等) | Airbnb Cereal VF | 14px (0.88rem) | 500 | 1.29 (tight) | normal | 中等正文 |
+| Caption Salt | Airbnb Cereal VF | 14px (0.88rem) | 600 | 1.43 | normal | `"salt"` 特性 |
+| 小号文本 | Airbnb Cereal VF | 13px (0.81rem) | 400 | 1.23 (tight) | normal | 描述说明 |
+| 标签 | Airbnb Cereal VF | 12px (0.75rem) | 400–700 | 1.33 | normal | 标签，价格 |
+| 徽章 | Airbnb Cereal VF | 11px (0.69rem) | 600 | 1.18 (tight) | normal | `"salt"` 特性 |
+| 微型大写 | Airbnb Cereal VF | 8px (0.50rem) | 700 | 1.25 (tight) | 0.32px | `text-transform: uppercase` |
+### 原则
+- **温暖的字重范围**：500–700 占主导地位。标题不使用 300 或 400 字重 —— Airbnb 的字体总是至少为中等字重，营造出温暖、自信的声音。
+- **标题的负字间距**：展示性标题使用 -0.18px 到 -0.44px 的字间距，创造出亲密、舒适的标题，而不是冷硬、紧凑的标题。
+- **"salt" OpenType 特性**：特定 UI 元素（徽章、说明文字）上的样式替代创造了微妙的字形变化，增加了视觉趣味。
+- **可变字体精度**：Cereal VF 支持连续的字重插值，尽管设计系统仅在 500、600 和 700 处使用了离散的截点。
+## 4. 组件样式
+### 按钮
+**深色主按钮**
+- 背景：`#222222`（接近黑色，非纯黑）
+- 文本：`#ffffff`
+- 内边距：0px 24px
+- 圆角：8px
+- 悬停：通过 `var(--accent-bg-error)` 过渡到错误/品牌强调色
+- 聚焦：`0 0 0 2px var(--palette-grey1000)` 环 + scale(0.92)
+**圆形导航**
+- 背景：`#f2f2f2`
+- 文本：`#222222`
+- 圆角：50%（圆形）
+- 悬停：阴影 `rgba(0,0,0,0.08) 0px 4px 12px` + translateX(50%)
+- 激活：4px 白色边框环 + 聚焦阴影
+- 聚焦：scale(0.92) 缩小动画
+### 卡片与容器
+- 背景：`#ffffff`
+- 圆角：14px（徽章），20px（卡片/按钮），32px（大型）
+- 阴影：`rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px`（三层）
+- 房源卡片：顶部为全宽照片，下方为详细信息
+- 轮播控件：圆形 50% 按钮
+### 输入框
+- 搜索：`#222222` 文本
+- 聚焦：`var(--palette-bg-primary-error)` 背景色调 + `0 0 0 2px` 环
+- 圆角：取决于上下文（搜索栏使用药丸状圆角）
+### 导航
+- 白色吸顶页眉，搜索栏居中
+- Airbnb Logo（Rausch Red）左对齐
+- 分类筛选胶囊：搜索下方的水平滚动条
+- 用于轮播导航的圆形导航控件
+- “Become a Host”文本链接，头像/菜单右对齐
+### 图片处理
+- 房源照片以充足的高度填满卡片顶部
+- 带圆点指示器的图片轮播
+- 图片上的爱心/心愿单图标覆盖层
+- 包含的图片使用 8px–14px 圆角
+## 5. 布局原则
+### 间距系统
+- 基础单位：8px
+- 比例：2px, 3px, 4px, 6px, 8px, 10px, 11px, 12px, 15px, 16px, 22px, 24px, 32px
+### 网格与容器
+- 居中搜索的全宽页眉
+- 分类胶囊栏：可水平滚动的行
+- 房源网格：响应式多列（桌面端 3–5 列）
+- 带有链接列的全宽页脚
+### 留白哲学
+- **旅游杂志般的间距**：各部分之间宽裕的垂直内边距营造了一种悠闲的浏览节奏 —— 你应该慢慢滚动，就像在翻阅杂志一样。
+- **照片密度**：房源卡片排列得相对紧凑，但每张图片都足够大，让人感觉身临其境。
+- **搜索栏的显著性**：搜索栏在页眉中获得了最大的垂直空间 —— 找到你的目的地是首要操作。
+### 圆角比例
+- 微妙 (4px)：小链接
+- 标准 (8px)：按钮，标签页，搜索元素
+- 徽章 (14px)：状态徽章，标签
+- 卡片 (20px)：特性卡片，大按钮
+- 大型 (32px)：大型容器，核心元素
+- 圆形 (50%)：导航控件，头像，图标
+## 6. 深度与悬浮
+| 级别 | 处理方式 | 用途 |
+| ------- | ----------- | ----- |
+| 扁平 (Level 0) | 无阴影 | 页面背景，文本块 |
+| 卡片 (Level 1) | `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px` | 房源卡片，搜索栏 |
+| 悬停 (Level 2) | `rgba(0,0,0,0.08) 0px 4px 12px` | 按钮悬停，交互抬升 |
+| 激活聚焦 (Level 3) | `rgb(255,255,255) 0px 0px 0px 4px` + 聚焦环 | 激活/聚焦元素 |
+**阴影哲学**：Airbnb 的三层阴影系统创造了温暖、自然的悬浮感。第 1 层（不透明度 0.02，`0px 0px 0px 1px`）是极其微妙的边框。第 2 层（不透明度 0.04，`0px 2px 6px`）提供柔和的环境阴影。第 3 层（不透明度 0.1，`0px 4px 8px`）增加了主要的抬升感。这种渐进式的方法创造出的阴影感觉就像是自然光，而不是 CSS 特效。
+## 7. 宜与忌
+### 宜
+- 文本使用 `#222222`（温暖的接近黑色）—— 绝不使用纯黑 `#000000`
+- 仅将 Rausch Red (`#ff385c`) 用于主要的 CTA 和品牌高光时刻 —— 它是唯一的强调色
+- 使用 500–700 字重的 Airbnb Cereal VF —— 这种温暖的字重范围是刻意为之的
+- 为所有抬升的表面应用三层卡片阴影
+- 使用宽大的 border-radius：8px 用于按钮，20px 用于卡片，50% 用于控件
+- 以摄影作为主要的视觉内容 —— 房源是图片优先的
+- 在标题上应用负字间距（-0.18px 到 -0.44px）以增加亲密感
+- 为轮播/导航控件使用圆形 (50%) 按钮
+### 忌
+- 不要使用纯黑 (`#000000`) 作为文本颜色 —— 始终使用 `#222222`（温暖）
+- 不要将 Rausch Red 应用于背景或大面积表面 —— 它仅作为强调色
+- 标题不要使用细字重 (300, 400) —— 最低为 500
+- 不要使用厚重的阴影（作为主要图层时大于 0.1 不透明度）—— 保持温暖和渐进感
+- 卡片不要使用尖锐的直角 (0–4px) —— 宽大的圆角 (20px+) 是核心
+- 不要在 Rausch/Luxe/Plus 系统之外引入额外的品牌颜色
+- 不要覆盖调色板 token 系统 —— 一致地使用 `--palette-*` 变量
+## 8. 响应式行为
+### 断点
+| 名称 | 宽度 | 关键变化 |
+| ------ | ------- | ------------- |
+| 移动端 (极小) | <375px | 单列，紧凑型搜索 |
+| 移动端 | 375–550px | 标准移动端房源网格 |
+| 平板 (小) | 550–744px | 2 列房源 |
+| 平板 | 744–950px | 搜索栏扩展 |
+| 桌面 (小) | 950–1128px | 3 列房源 |
+| 桌面 | 1128–1440px | 4 列网格，完整页眉 |
+| 大桌面 | 1440–1920px | 5 列网格 |
+| 超宽屏 | >1920px | 最大网格宽度 |
+*注：Airbnb 检测到了 61 个断点 —— 这是观察到的最精细的响应式系统之一，反映了他们对每一种可能的屏幕尺寸布局的执着。*
+### 触摸目标
+- 圆形导航按钮：充足的 50% 圆角尺寸
+- 房源卡片：在移动端提供整卡点击区域
+- 搜索栏：尺寸突出，适合拇指交互
+- 分类胶囊：带有充足内边距的水平滚动
+### 折叠策略
+- 房源网格：5 → 4 → 3 → 2 → 1 列
+- 搜索：展开栏 → 紧凑栏 → 覆盖层
+- 分类胶囊：在所有尺寸下均水平滚动
+- 导航：完整页眉 → 移动端极简版
+- 地图：侧边栏 → 覆盖层/开关
+### 图片行为
+- 房源照片：移动端支持滑动的轮播
+- 保持纵横比的响应式图片缩放
+- 心形覆盖层在不同尺寸下保持一致的定位
+- 照片质量根据视口进行调整
+## 9. Agent 提示指南
+### 快速颜色参考
+- 背景：纯白 (`#ffffff`)
+- 文本：接近黑色 (`#222222`)
+- 品牌强调：Rausch Red (`#ff385c`)
+- 次要文本：`#6a6a6a`
+- 禁用：`rgba(0,0,0,0.24)`
+- 卡片边框：`rgba(0,0,0,0.02) 0px 0px 0px 1px`
+- 卡片阴影：完整的三层堆叠
+- 按钮表面：`#f2f2f2`
+### 示例 Component Prompts
+- "创建一个房源卡片：白色背景，20px 圆角。三层阴影：rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px。上方为照片区域（16:10 比例），下方为详细信息：16px Airbnb Cereal VF 字重 600 标题，14px 字重 400 描述颜色为 #6a6a6a。"
+- "设计搜索栏：白色背景，完整的卡片阴影，容器圆角 32px。搜索文本为 14px Cereal VF 字重 400。红色搜索按钮（#ff385c，50% 圆角，白色图标）。"
+- "构建分类胶囊栏：可水平滚动的行。每个胶囊：14px Cereal VF 字重 600，#222222 文本，激活时带有底部边框。圆形上一页/下一页箭头（#f2f2f2 背景，50% 圆角）。"
+- "创建一个 CTA 按钮：#222222 背景，白色文本，8px 圆角，16px Cereal VF 字重 500，0px 24px 内边距。悬停：品牌红色强调。"
+- "设计一个爱心/心愿单按钮：透明背景，50% 圆角，带有深色阴影轮廓的白色心形图标。"
+### 迭代指南
+1. 从白色开始 —— 摄影提供了所有的色彩
+2. Rausch Red (#ff385c) 是唯一的强调色 —— 谨慎地仅用于 CTA
+3. 文本使用接近黑色 (#222222) —— 温暖感很重要
+4. 三层阴影创造了自然、温暖的抬升感 —— 始终使用所有三层
+5. 宽大的圆角：8px 按钮，20px 卡片，50% 控件
+6. Cereal VF 字重为 500–700 —— 任何标题都不使用细字重
+7. 摄影是核心 —— 每个房源卡片都是图片优先的

package/extensions/skills/builtin/creative/popular-web-designs/templates/airtable.md ADDED Viewed

@@ -0,0 +1,102 @@
+# 设计系统：Airtable
+> **Hermes Agent — 实现说明**
+>
+> 原始站点使用专有字体。对于自包含的 HTML 输出，请使用这些 CDN 替代字体：
+> - **Primary:** `Inter` | **Mono:** `system monospace stack`
+> - **Font stack (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **Mono stack (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. 视觉主题与氛围
+Airtable 网站是一个简洁、企业友好的平台，通过白色画布、深海军蓝文本 (`#181d26`) 以及 Airtable 蓝 (`#1b61c9`) 作为主要交互色，传达出“精致的简约”的设计理念。Haas 字体家族（display + text 变体）打造了一套具备瑞士风格精准度的排版系统，全文采用正字间距。
+**关键特征：**
+- 白色画布搭配深海军蓝文本 (`#181d26`)
+- Airtable 蓝 (`#1b61c9`) 作为主要 CTA 和链接颜色
+- Haas + Haas Groot Disp 双字体系统
+- 正文采用正字间距 (0.08px–0.28px)
+- 按钮圆角为 12px，卡片圆角为 16px–32px
+- 多层带蓝色调的阴影：`rgba(45,127,249,0.28) 0px 1px 3px`
+- 语义化 theme tokens：`--theme_*` CSS 变量命名
+## 2. 调色板与角色
+### Primary
+- **深海军蓝** (`#181d26`)：主要文本
+- **Airtable 蓝** (`#1b61c9`)：CTA 按钮、链接
+- **白色** (`#ffffff`)：主要背景面
+- **聚光灯白** (`rgba(249,252,255,0.97)`)：`--theme_button-text-spotlight`
+### 语义化
+- **成功绿** (`#006400`)：`--theme_success-text`
+- **弱化文本** (`rgba(4,14,32,0.69)`)：`--theme_text-weak`
+- **次要激活态** (`rgba(7,12,20,0.82)`)：`--theme_button-text-secondary-active`
+### 中性色
+- **深灰色** (`#333333`)：次要文本
+- **中蓝色** (`#254fad`)：链接/强调蓝色变体
+- **边框色** (`#e0e2e6`)：卡片边框
+- **浅色背景** (`#f8fafc`)：细微表面
+### 阴影
+- **带蓝色调** (`rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset`)
+- **柔和阴影** (`rgba(15,48,106,0.05) 0px 0px 20px`)
+## 3. 排版规则
+### 字体家族
+- **Primary**: `Haas`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto`
+- **Display**: `Haas Groot Disp`, fallback: `Haas`
+### 层级结构
+| 角色 | 字体 | 字号 | 字重 | 行高 | 字间距 |
+| ------ | ------ | ------ | -------- | ------------- | ---------------- |
+| Display Hero | Haas | 48px | 400 | 1.15 | normal |
+| Display Bold | Haas Groot Disp | 48px | 900 | 1.50 | normal |
+| Section Heading | Haas | 40px | 400 | 1.25 | normal |
+| Sub-heading | Haas | 32px | 400–500 | 1.15–1.25 | normal |
+| Card Title | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
+| Feature | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
+| Body | Haas | 18px | 400 | 1.35 | 0.18px |
+| Body Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
+| Button | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
+| Caption | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
+## 4. 组件样式
+### 按钮
+- **主蓝色**: `#1b61c9`，白色文本，16px 24px padding，12px 圆角
+- **白色**: 白色背景，`#181d26` 文本，12px 圆角，1px 白色边框
+- **Cookie 同意提示**: `#1b61c9` 背景，2px 圆角（无圆角）
+### 卡片: `1px solid #e0e2e6`，16px–24px 圆角
+### 输入框: 标准 Haas 样式
+## 5. 布局
+- 间距: 1–48px（8px 为基础）
+- 圆角: 2px（小），12px（按钮），16px（卡片），24px（区块），32px（大），50%（圆形）
+## 6. 深度
+- 带蓝色调的多层阴影系统
+- 柔和环境光: `rgba(15,48,106,0.05) 0px 0px 20px`
+## 7. 宜与忌
+### 宜：在 CTA 中使用 Airtable 蓝，为 Haas 使用正字间距，按钮使用 12px 圆角
+### 忌：省略正字间距，使用过重的阴影
+## 8. 响应式行为
+断点: 425–1664px（23 个断点）
+## 9. Agent 提示词指南
+- 文本: 深海军蓝 (`#181d26`)
+- CTA: Airtable 蓝 (`#1b61c9`)
+- 背景: 白色 (`#ffffff`)
+- 边框: `#e0e2e6`