@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,272 @@
+# 设计系统：Cal.com
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原网站使用专有字体。对于自包含的 HTML 输出，请使用这些 CDN 替代字体：
+> - **主要字体：** `Inter` | **等宽字体：** `Roboto Mono`
+> - **字体堆栈 (CSS)：** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **等宽字体堆栈 (CSS)：** `font-family: 'Roboto 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=Roboto+Mono:wght@400;500;700&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` skill（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Cal.com 的网站是单色极简主义的典范 —— 一个灰度的世界，其大胆之感并非来自色彩，而是源于白纸上黑色文字的绝对自信。受 Uber 极简美学风格的启发，其调色板刻意去除了色相：接近纯黑的标题 (`#242424`)、中灰色的辅助文本 (`#898989`) 以及纯白色的表面。色彩被视为一种异物 —— 当它出现时（罕见的蓝色链接、绿色的信任徽章），感觉就像是黑白照片中受控的点缀。
+
+Cal Sans 是该品牌由 Mark Davis 设计的定制几何展示字体，也是视觉的核心。大字号下，字母间的间距被刻意压缩得极其紧密，营造出密集且具有建筑感的标题，仿佛雕刻在页面上一般。在 64px 和 48px 的尺寸下，Cal Sans 标题采用 600 的字重和 1.10 的紧凑行高 —— 自信、凝练且极具辨识度。对于正文文本，系统切换为 Inter，提供“坚如磐石”的可读性，与 Cal Sans 的展示个性相得益彰。这种字体搭配创造了明确的分工：Cal Sans 负责“发声”，Inter 负责“解释”。
+
+对于一个极简网站来说，其 elevation system（投影层级系统）显得尤为精细 —— 11 种阴影定义通过结合环形边框 (`0px 0px 0px 1px`)、柔和的漫反射阴影和内嵌高光，创造出细腻的深度层次。这种以阴影优先（而非边框优先）的深度处理方式，赋予了表面一种微妙的三维立体感，显得现代且精致。该项目基于 Framer 构建，border-radius（圆角）比例从 2px 到 9999px（胶囊状），在几何精度与柔和圆润的交互元素之间取得了平衡。
+
+**关键特征：**
+- 纯灰度品牌调色板 —— 没有品牌色，通过单色展现大胆
+- Cal Sans 定制几何展示字体，默认字间距极其紧凑
+- 多层阴影系统（11 种定义），结合环形边框 + 漫反射阴影 + 内嵌高光
+- Cal Sans 用于标题，Inter 用于正文 —— 清晰的排版划分
+- 从 2px 到 9999px（胶囊状）的宽广 border-radius 比例 —— 多样的圆角处理
+- 白色画布搭配接近纯黑 (#242424) 的文字 —— 最大对比度，零装饰
+- 以产品截图作为主要视觉内容 —— 日程安排 UI 自身就是最好的推销
+- 基于 Framer 平台构建
+
+## 2. 调色板与角色
+
+### Primary（主色）
+- **Charcoal** (`#242424`)：主要标题和按钮文本 —— Cal.com 标志性的接近纯黑色，比纯黑更温暖
+- **Midnight** (`#111111`)：最深的文本/遮罩层颜色 —— 以 50% 的不透明度用于细微遮罩
+- **White** (`#ffffff`)：主要背景和表面 —— 主导画布
+
+### Secondary & Accent（辅色与点缀色）
+- **Link Blue** (`#0099ff`)：带下划线装饰的文本内链接 —— 系统中唯一的蓝色，严格保留给超链接使用
+- **Focus Ring** (`#3b82f6`，50% 不透明度)：键盘焦点指示器 —— 仅供无障碍使用，在正常交互中不可见
+- **默认 Link** (`#0000ee`)：某些元素的浏览器默认链接颜色 —— 未作修改，体现开放性
+
+### Surface & Background（表面与背景）
+- **Pure White** (`#ffffff`)：主要页面背景和卡片表面
+- **Light Gray** (约 `#f5f5f5`)：细微的区块区分 —— 几乎不可见的色调
+- **Mid Gray** (`#898989`)：辅助文本、描述和柔和的标签
+
+### Neutrals & Text（中性色与文本）
+- **Charcoal** (`#242424`)：标题、按钮、主要 UI 文本
+- **Midnight** (`#111111`)：用于高对比度链接和导航文本的深黑色
+- **Mid Gray** (`#898989`)：描述、次要标签、柔和的内容
+- **Pure Black** (`#000000`)：特定的链接文本元素
+- **Border Gray** (约 `rgba(34, 42, 53, 0.08–0.10)`)：使用环形阴影代替 CSS 边框的阴影式边框
+
+### Semantic & Accent（语义与点缀）
+- Cal.com 的品牌元素刻意保持无彩色 —— “用灰度品牌来强调大胆与专业”
+- 产品 UI 截图展示了色彩（日程安排界面中的蓝色、绿色），但营销网站本身保持单色
+- 这种理念与 Uber 的方法如出一辙：让内容承载色彩，而框架保持中性
+
+### Gradient System（渐变系统）
+- 营销网站上没有渐变 —— 设计完全是扁平化和单色的
+- 深度完全通过阴影实现，而非色彩过渡
+
+## 3. 排版规则
+
+### Font Family（字体族）
+- **Display**：`Cal Sans` —— 由 Mark Davis 设计的定制几何无衬线字体。开源，可在 Google Fonts 和 GitHub 上获取。专为大型标题设计的极其紧凑的默认字间距。有 6 种字符变体
+- **Body**：`Inter` —— “坚如磐石”的标准正文字体。备选字体：`Inter Placeholder`
+- **UI Light**：`Cal Sans UI Variable Light` —— 字重为 300 的细体变体，字间距为 -0.2px，用于更柔和的 UI 文本
+- **UI Medium**：`Cal Sans UI Medium` —— 字重为 500 的中等粗细变体，用于强调说明
+- **Mono**：`Roboto Mono` —— 用于代码块和技术内容
+- **Tertiary**：`Matter Regular` / `Matter SemiBold` / `Matter Medium` —— 用于特定场景的附加正文字体
+
+### Hierarchy（层级）
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Cal Sans | 64px | 600 | 1.10 | 0px | 最大视觉冲击，紧凑的默认间距 |
+| Section Heading | Cal Sans | 48px | 600 | 1.10 | 0px | 大区块标题 |
+| Feature Heading | Cal Sans | 24px | 600 | 1.30 | 0px | 特性区块标题 |
+| Sub-heading | Cal Sans | 20px | 600 | 1.20 | +0.2px | 正字间距以提升小字号的易读性 |
+| Sub-heading Alt | Cal Sans | 20px | 600 | 1.50 | 0px | 宽松行高变体 |
+| Card Title | Cal Sans | 16px | 600 | 1.10 | 0px | Cal Sans 的最小应用尺寸 |
+| Caption Label | Cal Sans | 12px | 600 | 1.50 | 0px | Cal Sans 中的小标签 |
+| Body Light | Cal Sans UI Light | 18px | 300 | 1.30 | -0.2px | 细体正文引言文本 |
+| Body Light Standard | Cal Sans UI Light | 16px | 300 | 1.50 | -0.2px | 细体正文文本 |
+| Caption Light | Cal Sans UI Light | 14px | 300 | 1.40–1.50 | -0.2 to -0.28px | 细体说明和描述 |
+| UI Label | Inter | 16px | 600 | 1.00 | 0px | UI 按钮和导航标签 |
+| Caption Inter | Inter | 14px | 500 | 1.14 | 0px | UI 小字文本 |
+| Micro | Inter | 12px | 500 | 1.00 | 0px | 最小的 Inter 文本 |
+| Code | Roboto Mono | 14px | 600 | 1.00 | 0px | 代码片段、技术文本 |
+| Body Matter | Matter Regular | 14px | 400 | 1.14 | 0px | 备用正文文本（产品 UI） |
+
+### Principles（原则）
+- **大号用 Cal Sans，小号用 Inter**：Cal Sans 专用于标题和展示 —— 绝不用于正文文本。系统严格执行这种分工
+- **默认紧凑，小号加宽**：Cal Sans 字母在大尺寸下“被刻意安排得极其紧密”。在 20px 及以下时，必须应用正字间距 (+0.2px) 以防止拥挤
+- **字重 300 的正文变体**：字重为 300 的 Cal Sans UI Variable Light 创造出优雅、轻快的正文文本，与紧凑的 600 字重标题形成对比
+- **字重 600 占主导**：几乎所有 Cal Sans 的应用都使用 600（半粗体）字重 —— 该字体正是为在此字重下展现最佳效果而设计的
+- **细体文本的负字间距**：Cal Sans UI Light 使用 -0.2px 到 -0.28px 的字间距，微妙地收紧了原本就已紧凑的字形
+
+## 4. 组件样式
+
+### Buttons（按钮）
+- **Dark Primary**：`#242424`（或 `#1e1f23`）背景，白色文本，6–8px 圆角。Hover 状态：不透明度降至 0.7。标志性的 CTA —— 在白色背景上达到极暗效果
+- **White/Ghost**：白色背景配带阴影环的边框，深色文本。使用多层阴影系统实现微妙的 elevation（高度抬升）
+- **Pill**：9999px 圆角，用于圆润的胶囊形操作和徽章
+- **Compact**：4px 内边距，小号文本 —— 产品 UI 内的实用操作
+- **Inset highlight**：某些按钮具有 `rgba(255, 255, 255, 0.15) 0px 2px 0px inset` —— 一种微妙的顶部内高光，营造出 3D 按压效果
+
+### Cards & Containers（卡片与容器）
+- **Shadow Card**：白色背景，多层阴影 —— `rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.08) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px`。环形阴影 (0px 0px 0px 1px) 充当阴影边框
+- **Product UI Cards**：在带有阴影 elevation 的卡片容器中展示日程安排界面的截图
+- **Radius**：标准卡片为 8px，较大的容器为 12px，显眼的区块为 16px
+- **Hover**：可能是微妙的阴影加深或缩放变换
+
+### Inputs & Forms（输入框与表单）
+- **Select dropdown**：白色背景，`#000000` 文本，1px 实线 `rgb(118, 118, 118)` 边框
+- **Focus**：使用 Framer 的焦点轮廓系统 (`--framer-focus-outline`)
+- **Text input**：8px 圆角，标准边框处理
+- **Minimal form presence**：营销网站优先考虑 CTA 按钮，而非复杂的表单
+
+### Navigation（导航）
+- **Top nav**：白色/透明背景，近黑色的 Cal Sans 链接
+- **Nav text**：`#111111` (Midnight) 用于主要链接，`#000000` 用于强调
+- **CTA button**：导航栏中的 Dark Primary —— 高对比度的行为呼吁
+- **Mobile**：折叠为汉堡菜单并提供简化的导航
+- **Sticky**：滚动时固定
+
+### Image Treatment（图像处理）
+- **Product screenshots**：大尺寸日程安排 UI 截图 —— 产品本身就是主要的视觉元素
+- **Trust logos**：横向信任栏中的灰度公司 Logo
+- **Aspect ratios**：产品 UI 截图采用宽横向比例
+- **No decorative imagery**：没有插图、照片或抽象图形 —— 纯粹的产品 + 排版
+
+## 5. 布局原则
+
+### Spacing System（间距系统）
+- **Base unit**：8px
+- **Scale**：1px, 2px, 3px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 28px, 80px, 96px
+- **Section padding**：主要区块之间的垂直内边距为 80px–96px（宽松）
+- **Card padding**：内部 12px–24px
+- **Component gaps**：相关元素之间 4px–8px
+- **Notable jump**：从 28px 到 80px —— 刻意的留白，以强调区块级别的间距层级
+
+### Grid & Container（网格与容器）
+- **Max width**：约 1200px 内容容器，居中
+- **Column patterns**：全宽 Hero 区，居中文本块，2-3 列特性网格
+- **特性 showcase**：产品截图两侧配有描述文本
+- **Breakpoints**：98px, 640px, 768px, 810px, 1024px, 1199px —— 由 Framer 生成
+
+### Whitespace Philosophy（留白理念）
+- **Lavish section spacing**：区块间距 80px–96px 营造出透气、高端的感觉
+- **Product-first content**：截图主导视觉空间 —— 极少的周边装饰
+- **Centered headlines**：Cal Sans 标题居中，上下方留有充足的边距
+
+### Border Radius Scale（圆角比例）
+- **2px**：内联元素的微妙圆角
+- **4px**：小型 UI 组件
+- **6px–7px**：按钮、小卡片、图片
+- **8px**：标准交互元素 —— 按钮、输入框、图片
+- **12px**：中等容器 —— 链接、较大的卡片、图片
+- **16px**：大型区块容器
+- **29px**：特殊的圆角元素
+- **100px**：大圆角 —— 在小元素上几乎呈圆形
+- **1000px**：极大的圆角
+- **9999px**：完整的胶囊形状 —— 徽章、链接
+
+## 6. 深度与阴影
+
+| 级别 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Level 0 (Flat) | 无阴影 | 页面画布、基础文本容器 |
+| Level 1 (Inset) | `rgba(0,0,0,0.16) 0px 1px 1.9px 0px inset` | 按下/凹陷的元素、输入框凹槽 |
+| Level 2 (Ring + Soft) | `rgba(19,19,22,0.7) 0px 1px 5px -4px, rgba(34,42,53,0.08) 0px 0px 0px 1px, rgba(34,42,53,0.05) 0px 4px 8px` | 卡片、容器 —— 承担主要工作的阴影 |
+| Level 3 (Ring + Soft Alt) | `rgba(36,36,36,0.7) 0px 1px 5px -4px, rgba(36,36,36,0.05) 0px 4px 8px` | 没有环形边框的备用卡片 elevation |
+| Level 4 (Inset Highlight) | `rgba(255,255,255,0.15) 0px 2px 0px inset` 或 `rgb(255,255,255) 0px 2px 0px inset` | 按钮内部高光 —— 3D 按压效果 |
+| Level 5 (Soft Only) | `rgba(34,42,53,0.05) 0px 4px 8px` | 微妙的环境阴影 |
+
+### Shadow Philosophy（阴影理念）
+Cal.com 的阴影系统是设计中最复杂的元素 —— 使用多层合成技术定义了 11 种阴影：
+- **Ring borders**：`0px 0px 0px 1px` 阴影作为边框，完全避免使用 CSS `border`。这创建了极细的轮廓限制，而不会影响布局
+- **Diffused soft shadows**：5% 不透明度的 `0px 4px 8px` 增添了柔和的环境深度
+- **Sharp contact shadows**：70% 不透明度的 `0px 1px 5px -4px` 创建了紧凑的底部边缘阴影，使元素具有扎根感
+- **Inset highlights**：按钮顶部的白色内阴影创造了微妙的 3D 斜角效果
+- 阴影以逗号分隔的堆栈形式组合 —— 每个表面都有 2-3 个协同工作的分层阴影定义
+
+### Decorative Depth（装饰性深度）
+- 没有渐变或发光效果
+- 所有深度感都来自复杂的阴影合成系统
+- 整体效果微妙而精准 —— 表面感觉就像放置在桌面上的实体卡片
+
+## 7. 宜与忌
+
+### 宜
+- 专将 Cal Sans 用于标题 (24px+)，绝不用于正文 —— 它是一款默认间距紧凑的展示字体
+- 当 Cal Sans 小于 24px 时应用正字间距 (+0.2px) —— 没有它，字体在小尺寸下会显得拥挤
+- 保持灰度调色板 —— 大胆源自对比，而非色彩
+- 使用多层阴影系统提升卡片高度 —— 环形阴影 + 漫反射阴影 + 接触阴影
+- 保持背景纯白 —— 单色哲学需要干净的画布
+- 所有正文文本使用字重为 300–600 的 Inter —— 它是 Cal Sans 展示个性的可靠搭档
+- 让产品截图成为视觉内容 —— 没有插图，没有装饰性图形
+- 应用宽裕的区块间距 (80px–96px) —— 呼吸空间对于高端感至关重要
+
+### 忌
+- 将 Cal Sans 用于正文或小于 16px 的文本 —— 它不是为长时间阅读设计的
+- 添加品牌颜色 —— Cal.com 刻意保持灰度，颜色仅保留给链接和 UI 状态使用
+- 当阴影可以达到相同的边界效果时却使用 CSS 边框 —— 环形阴影技术是该系统的方法
+- 在小尺寸下对 Cal Sans 应用负字间距 —— 它在 24px 以下需要正间距 (+0.2px)
+- 创建沉重、黑暗的阴影 —— Cal.com 的阴影是微妙的（5% 不透明度漫反射）且带有锐利的接触边缘
+- 使用插图、抽象图形或装饰元素 —— 视觉语言仅限于排版 + 产品 UI
+- 混合 Cal Sans 的字重 —— 该字体专为 600 字重设计，其他字重会破坏预期的字符形态
+- 将区块间距缩小到 48px 以下 —— 宽裕的留白是高端单色美学的核心
+
+## 8. 响应式行为
+
+### Breakpoints（断点）
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Mobile | <640px | 单列，Hero 文本约 36px，堆叠的特性，汉堡菜单 |
+| Tablet Small | 640px–768px | 部分元素开始出现 2 列布局 |
+| Tablet | 768px–810px | 布局调整，网格更饱满 |
+| Tablet Large | 810px–1024px | 多列特性网格 |
+| Desktop | 1024px–1199px | 完整布局，展开的导航 |
+| Large Desktop | >1199px | 最大宽度容器，内容居中 |
+
+### Touch Targets（触摸目标）
+- Buttons：8px 圆角，带有舒适的填充 (10px+ 垂直)
+- Nav links：深色文本，间距充足
+- Mobile CTAs：全宽深色按钮，方便拇指触控
+- Pill badges：9999px 圆角创建了巨大、易于点击的目标
+
+### Collapsing Strategy（折叠策略）
+- **Navigation**：完整的横向导航 → 移动端汉堡菜单
+- **Hero**：64px Cal Sans 展示 → 移动端约 36px
+- **特性 grids**：多列 → 2 列 → 单个堆叠列
+- **Product screenshots**：在容器内缩放，保持纵横比
+- **Section spacing**：在移动端从 80px–96px 缩减至约 48px
+
+### Image Behavior（图像行为）
+- 产品截图响应式缩放
+- 信任 Logo 在移动端重排为多行网格
+- 没有艺术指导上的改变 —— 所有尺寸下的构图相同
+- 图像使用 7px–12px 的 border-radius 以保持一致的圆角
+
+## 9. Agent 提示词指南
+
+### Quick Color Reference（颜色快速参考）
+- Primary Text: Charcoal (`#242424`)
+- Deep Text: Midnight (`#111111`)
+- Secondary Text: Mid Gray (`#898989`)
+- Background: Pure White (`#ffffff`)
+- Link: Link Blue (`#0099ff`)
+- CTA Button: Charcoal (`#242424`) 背景，白色文本
+- Shadow Border: `rgba(34, 42, 53, 0.08)` 环形
+
+### 示例 Component Prompts
+- “创建一个带有白色背景的 Hero 区，64px Cal Sans 标题，字重 600，行高 1.10，#242424 文本，居中布局，带有一个深色 CTA 按钮 (#242424，8px 圆角，白色文本)”
+- “设计一个带有白色背景的日程安排卡片，具有多层阴影 (0px 1px 5px -4px rgba(19,19,22,0.7), 0px 0px 0px 1px rgba(34,42,53,0.08), 0px 4px 8px rgba(34,42,53,0.05))，12px 圆角”
+- “构建一个带有白色背景的导航栏，14px 字重 500 的 Inter 链接，颜色为 #111111，一个深色 CTA 按钮 (#242424)，以及粘性定位”
+- “创建一个信任栏，包含灰度公司 Logo，水平居中，Logo 间距 16px，背景为白色”
+- “设计一个特性区块，包含 48px Cal Sans 标题 (字重 600, #242424)，16px Inter 正文文本 (字重 300, #898989, 行高 1.50)，以及一个带有 12px 圆角和卡片阴影的产品截图”
+
+### Iteration Guide（迭代指南）
+完善使用此设计系统生成的现有屏幕时：
+1. 验证标题使用的是字重 600 的 Cal Sans，正文使用的是 Inter —— 绝不要混淆它们
+2. 检查调色板是否为纯灰度 —— 如果看到品牌颜色，请移除
+3. 确保卡片高度使用的是多层阴影堆栈，而不是 CSS 边框
+4. 确认区块间距是否宽裕 (80px+) —— 如果区块感觉拥挤，请增加空间
+5. 整体基调应感觉像是一个干净、专业的日程安排工具 —— 带有单色的自信，没有任何装饰性元素

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

@@ -0,0 +1,325 @@
+# 设计系统：Claude (Anthropic)
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原网站使用专有字体。对于独立的 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&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` skill (cloudflared tunnel) 提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Claude 的界面就像是一个被重新构想为产品页面的文学沙龙——温暖、从容、散发着低调的知性气息。整个体验建立在羊皮纸色调的画布（`#f5f4ed`）之上，刻意唤起高品质纸张的质感，而非数字屏幕的感觉。当大多数 AI 产品页面倾向于冷酷的未来主义美学时，Claude 的设计却散发着人性的温暖，仿佛 AI 本身就拥有出色的室内设计品味。
+
+其标志性举措是定制的 Anthropic Serif 字体——一种比例宽宏的中等粗细 serif 字体，让每个标题都拥有如同书名般的庄重感。结合红棕色（`#c96442`）、黑色和柔和绿色，且带有有机感、手绘风格的插画，这种视觉语言传达出“深思熟虑的伙伴”而非“强大的工具”。Serif 标题在紧凑但舒适的行高（1.10–1.30）下呼吸，创造出一种更像是在阅读散文而非浏览产品页面的节奏。
+
+让 Claude 的设计真正与众不同的是其温暖的中性色调。每一种灰色都带有黄棕色的底色（`#5e5d59`、`#87867f`、`#4d4c48`）——完全没有冷色调的蓝灰色。边框是奶油色调的（`#f0eee6`、`#e8e6dc`），阴影使用温暖的透明黑色，即使是最暗的表面（`#141413`、`#30302e`）也带有一丝几乎无法察觉的橄榄色温暖感。这种色彩的一致性创造了一个让人感觉温馨且值得信赖的空间。
+
+**核心特征：**
+- 温暖的羊皮纸画布（`#f5f4ed`）唤起对优质纸张的联想，而非屏幕
+- 定制的 Anthropic 字体家族：Serif 用于标题，Sans 用于 UI，Mono 用于代码
+- 红棕色品牌强调色（`#c96442`）——温暖、质朴，刻意去科技化
+- 纯暖色调中性色——每种灰色都带有黄棕色底色
+- 有机、杂志编辑风格的插画取代了典型的科技图标
+- 基于光环的阴影系统（`0px 0px 0px 1px`），在没有可见边框的情况下创造出类似边框的深度
+- 杂志般的节奏感，拥有宽敞的区块间距和由 Serif 驱动的层级结构
+
+## 2. 调色板与角色
+
+### Primary
+- **Anthropic Near Black** (`#141413`)：主要文本颜色和深色主题表面——不是纯黑色，而是一种温暖、几乎带有橄榄色调的暗色，对眼睛更温和。是所有主要科技品牌中最温暖的“黑色”。
+- **Terracotta Brand** (`#c96442`)：核心品牌色——一种烧焦的橙棕色，用于主要 CTA 按钮、品牌展示时刻和标志性强调色。刻意保持泥土气息和去科技化。
+- **Coral Accent** (`#d97757`)：品牌色的较浅、较暖变体，用于文本强调、深色表面上的链接和次要重点。
+
+### Secondary & Accent
+- **Error Crimson** (`#b53333`)：一种深沉温暖的红色，用于错误状态——严重但不会引起恐慌。
+- **Focus Blue** (`#3898ec`)：用于输入框聚焦环的标准蓝色——整个系统中唯一的冷色调，纯粹用于无障碍设计。
+
+### Surface & Background
+- **Parchment** (`#f5f4ed`)：主要页面背景——一种带有黄绿色调的温暖奶油色，感觉就像陈年纸张。整个设计的情感基础。
+- **Ivory** (`#faf9f5`)：最亮的表面——用于 Parchment 背景上的卡片和凸起容器。几乎无法区分，但创造了微妙的层次感。
+- **Pure White** (`#ffffff`)：专用于特定的按钮表面和最大对比度元素。
+- **Warm Sand** (`#e8e6dc`)：按钮背景和突出的交互表面——一种明显温暖的浅灰色。
+- **Dark Surface** (`#30302e`)：深色主题容器、导航边框和凸起的深色元素——温暖的炭灰色。
+- **Deep Dark** (`#141413`)：深色主题页面背景和主要深色表面。
+
+### Neutrals & Text
+- **Charcoal Warm** (`#4d4c48`)：浅色温暖表面上的按钮文本——首选的深色背景浅色文字。
+- **Olive Gray** (`#5e5d59`)：次要正文文本——一种明显温暖的中暗灰色。
+- **Stone Gray** (`#87867f`)：三级文本、脚注和弱化的元数据。
+- **Dark Warm** (`#3d3d3a`)：深色文本链接和强调的次要文本。
+- **Warm Silver** (`#b0aea5`)：深色表面上的文本——一种温暖、带有羊皮纸色调的浅灰色。
+
+### Semantic & Accent
+- **Border Cream** (`#f0eee6`)：标准浅色主题边框——几乎不可见的温暖奶油色，创造了尽可能温和的视觉包裹感。
+- **Border Warm** (`#e8e6dc`)：突出的边框、区块分割线和浅色表面上的强调视觉包裹感。
+- **Border Dark** (`#30302e`)：深色表面上的标准边框——保持温暖的色调。
+- **Ring Warm** (`#d1cfc5`)：用于按钮 hover/focus 状态的光环阴影颜色。
+- **Ring Subtle** (`#dedc01`)：用于较浅交互表面的次要光环变体。
+- **Ring Deep** (`#c2c0b6`)：用于 active/pressed 状态的深层光环。
+
+### Gradient System
+- Claude 的设计在传统意义上是**无渐变**的。深度和视觉丰富感来自于温暖表面色调、有机插画以及明暗区块交替之间的相互作用。当视线穿过奶油色 → 沙色 → 石头色 → 炭灰色 → 黑色的区块时，这种温暖的调色板本身就会产生一种“渐变”效果。
+
+## 3. 排版规则
+
+### Font Family
+- **Headline**: `Anthropic Serif`，回退字体：`Georgia`
+- **Body / UI**: `Anthropic Sans`，回退字体：`Arial`
+- **Code**: `Anthropic Mono`，回退字体：`Arial`
+
+*注意：这些是定制字体。对于外部实现，Georgia 可作为 serif 替代字体，system-ui/Inter 可作为 sans 替代字体。*
+
+### Hierarchy
+
+| 角色 | 字体 | 大小 | 粗细 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | Anthropic Serif | 64px (4rem) | 500 | 1.10 (紧凑) | normal | 最大视觉冲击，书名般的存在感 |
+| Section Heading | Anthropic Serif | 52px (3.25rem) | 500 | 1.20 (紧凑) | normal | 功能区块锚点 |
+| Sub-heading Large | Anthropic Serif | 36–36.8px (~2.3rem) | 500 | 1.30 | normal | 次要区块标记 |
+| Sub-heading | Anthropic Serif | 32px (2rem) | 500 | 1.10 (紧凑) | normal | 卡片标题、功能名称 |
+| Sub-heading Small | Anthropic Serif | 25–25.6px (~1.6rem) | 500 | 1.20 | normal | 较小的区块标题 |
+| Feature Title | Anthropic Serif | 20.8px (1.3rem) | 500 | 1.20 | normal | 小功能标题 |
+| Body Serif | Anthropic Serif | 17px (1.06rem) | 400 | 1.60 (宽松) | normal | Serif 正文文本（社论段落） |
+| Body Large | Anthropic Sans | 20px (1.25rem) | 400 | 1.60 (宽松) | normal | 介绍段落 |
+| Body / Nav | Anthropic Sans | 17px (1.06rem) | 400–500 | 1.00–1.60 | normal | 导航链接、UI 文本 |
+| Body Standard | Anthropic Sans | 16px (1rem) | 400–500 | 1.25–1.60 | normal | 标准正文、按钮文本 |
+| Body Small | Anthropic Sans | 15px (0.94rem) | 400–500 | 1.00–1.60 | normal | 紧凑正文文本 |
+| Caption | Anthropic Sans | 14px (0.88rem) | 400 | 1.43 | normal | 元数据、描述 |
+| Label | Anthropic Sans | 12px (0.75rem) | 400–500 | 1.25–1.60 | 0.12px | 徽章、小标签 |
+| Overline | Anthropic Sans | 10px (0.63rem) | 400 | 1.60 | 0.5px | 大写 Overline 标签 |
+| Micro | Anthropic Sans | 9.6px (0.6rem) | 400 | 1.60 | 0.096px | 最小文本 |
+| Code | Anthropic Mono | 15px (0.94rem) | 400 | 1.60 | -0.32px | 行内代码、终端 |
+
+### Principles
+- **Serif 代表权威，sans 代表实用**：Anthropic Serif 以中等粗细（500）承载所有标题内容，赋予每个标题如出版物般的庄重感。Anthropic Sans 则以低调高效的方式处理所有功能性 UI 文本——按钮、标签、导航。
+- **Serif 使用单一字重**：所有 Anthropic Serif 标题都使用 500 字重——不要加粗，不要变细。这在所有标题大小中创造了一致的“声音”，仿佛每一个标题都出自同一位作者之手。
+- **宽松的正文行高**：大多数正文文本使用 1.60 的行高——比典型的科技网站（1.4–1.5）要宽裕得多。这创造了一种更接近书籍而非仪表盘的阅读体验。
+- **紧凑但不压抑的标题**：标题行高为 1.10–1.30，虽然紧凑但绝不让人感到幽闭恐惧。Serif 字母形态需要 sans-serif 字体所不需要的呼吸空间。
+- **标签上的微小字间距**：微小的 sans 文本（12px 及以下）使用精心设计的字间距（0.12px–0.5px），以在极小尺寸下保持可读性。
+
+## 4. 组件样式
+
+### 按钮
+
+**Warm Sand (Secondary)**
+- 背景：Warm Sand (`#e8e6dc`)
+- 文本：Charcoal Warm (`#4d4c48`)
+- 内边距：0px 12px 0px 8px（非对称——图标优先布局）
+- 圆角：舒适圆角 (8px)
+- 阴影：基于光环 (`#e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px`)
+- 主力按钮——温暖、低调、具有明显的交互感
+
+**White Surface**
+- 背景：Pure White (`#ffffff`)
+- 文本：Anthropic Near Black (`#141413`)
+- 内边距：8px 16px 8px 12px
+- 圆角：大圆角 (12px)
+- Hover：转变为次要背景色
+- 用于浅色表面的干净、凸起按钮
+
+**Dark Charcoal**
+- 背景：Dark Surface (`#30302e`)
+- 文本：Ivory (`#faf9f5`)
+- 内边距：0px 12px 0px 8px
+- 圆角：舒适圆角 (8px)
+- 阴影：基于光环 (`#30302e 0px 0px 0px 0px, ring 0px 0px 0px 1px`)
+- 用于浅底深色强调的反转变体
+
+**Brand Terracotta**
+- 背景：Terracotta Brand (`#c96442`)
+- 文本：Ivory (`#faf9f5`)
+- 圆角：8–12px
+- 阴影：基于光环 (`#c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px`)
+- 主要 CTA——唯一带有色彩倾向的按钮
+
+**Dark Primary**
+- 背景：Anthropic Near Black (`#141413`)
+- 文本：Warm Silver (`#b0aea5`)
+- 内边距：9.6px 16.8px
+- 圆角：大圆角 (12px)
+- 边框：细实线 Dark Surface (`1px solid #30302e`)
+- 用于深色主题表面
+
+### 卡片与容器
+- 背景：浅色表面使用 Ivory (`#faf9f5`) 或 Pure White (`#ffffff`)；深色表面使用 Dark Surface (`#30302e`)
+- 边框：浅色使用细实线 Border Cream (`1px solid #f0eee6`)；深色使用 `1px solid #30302e`
+- 圆角：标准卡片使用舒适圆角 (8px)；精选内容使用大圆角 (16px)；Hero 容器和嵌入式媒体使用超大圆角 (32px)
+- 阴影：用于凸起内容的极轻柔阴影 (`rgba(0,0,0,0.05) 0px 4px 24px`)
+- 光环阴影：用于交互式卡片状态的 `0px 0px 0px 1px` 图案
+- 区块边框：用于列表项分隔符的 `1px 0px 0px` (仅有上边框)
+
+### 输入框与表单
+- 文本：Anthropic Near Black (`#141413`)
+- 内边距：1.6px 12px（非常紧凑的垂直内边距）
+- 边框：标准暖色调边框
+- 聚焦：带有 Focus Blue (`#3898ec`) 边框色的光环——唯一的冷色调瞬间
+- 圆角：大圆角 (12px)
+
+### 导航
+- 带有温暖背景的吸顶导航
+- Logo：采用 Anthropic Near Black 的 Claude 字标
+- 链接：混合使用 Near Black (`#141413`)、Olive Gray (`#5e5d59`) 和 Dark Warm (`#3d3d3a`)
+- 导航边框：`1px solid #30302e` (深色) 或 `1px solid #f0eee6` (浅色)
+- CTA：Terracotta Brand 按钮或 White Surface 按钮
+- Hover：文本转变为前景主色，无额外装饰
+
+### 图片处理
+- 展示 Claude 聊天界面的产品截图
+- 媒体采用大圆角 (16–32px)
+- 带有圆角的嵌入式视频播放器
+- 深色 UI 截图与温暖明亮的画布形成对比
+- 用于概念区域的有机、手绘风格插画
+
+### 独特组件
+
+**模型对比卡片**
+- Opus 4.5、Sonnet 4.5、Haiku 4.5 以简洁的卡片网格呈现
+- 每个模型对应一张带有边框的卡片，包含名称、描述和能力徽章
+- 使用 Border Warm (`#e8e6dc`) 在项目间进行分隔
+
+**Organic Illustrations**
+- 红棕色、黑色和柔和绿色的手绘风格矢量插画
+- 抽象、概念化，而非字面上的产品图表
+- 主要的视觉个性——没有其他 AI 公司使用这种风格
+
+**深/浅区块交替**
+- 页面在 Parchment 浅色和 Near Black 深色区块之间交替
+- 创造出如同书本章节般的阅读节奏
+- 每个区块都感觉像是一个独立的环境
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 比例：3px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 30px
+- 按钮内边距：非对称 (`0px 12px 0px 8px`) 或均衡 (`8px 16px`)
+- 卡片内部内边距：大约 24–32px
+- 区块垂直间距：宽裕（估计在主要区块间为 80–120px）
+
+### 网格与容器
+- 最大容器宽度：约 1200px，居中
+- Hero：居中，采用杂志编辑布局
+- 特性区块：单列或 2–3 列卡片网格
+- 模型对比：整洁的 3 列网格
+- 全宽深色区块打破容器限制以形成视觉强调
+
+### 留白理念
+- **杂志般的节奏**：每个区块都像杂志跨页一样呼吸——宽裕的上下边距创造了自然的阅读停顿。
+- **由 Serif 驱动的韵律**：Serif 标题建立了一种文学的节奏，这比 sans-serif 设计需要更多的留白。
+- **内容孤岛方法**：区块在明暗环境之间交替，为每条信息创造了独立的“房间”。
+
+### 圆角比例
+- 锐角 (4px)：极简的行内元素
+- 微圆角 (6–7.5px)：小按钮、次要交互元素
+- 舒适圆角 (8–8.5px)：标准按钮、卡片、容器
+- 大圆角 (12px)：主要按钮、输入框、导航元素
+- 特大圆角 (16px)：精选容器、视频播放器、标签列表
+- 超大圆角 (24px)：标签类元素、高亮容器
+- 极致圆角 (32px)：Hero 容器、嵌入式媒体、大卡片
+
+## 6. 深度与层级
+
+| 级别 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影，无边框 | Parchment 背景、行内文本 |
+| Contained (Level 1) | `1px solid #f0eee6` (浅色) 或 `1px solid #30302e` (深色) | 标准卡片、区块 |
+| Ring (Level 2) | 使用暖灰色的 `0px 0px 0px 1px` 光环阴影 | 交互式卡片、按钮、hover 状态 |
+| Whisper (Level 3) | `rgba(0,0,0,0.05) 0px 4px 24px` | 凸起的功能卡片、产品截图 |
+| Inset (Level 4) | 15% 不透明度的 `inset 0px 0px 0px 1px` | Active/pressed 按钮状态 |
+
+**阴影理念**：Claude 通过**暖色调光环阴影**而非传统的投射阴影来传达深度。标志性的 `0px 0px 0px 1px` 图案创造了一种类似边框的光晕，比实际的边框更柔和——这是一个假装成边框的阴影，或者在技术上属于阴影的边框。当确实出现投射阴影时，它们也极其轻柔（0.05 不透明度，24px 模糊）——几乎不可见的微抬效果，暗示着漂浮而非投射。
+
+### 装饰性深度
+- **明暗交替**：最引人注目的深度效果来自于 Parchment (`#f5f4ed`) 和 Near Black (`#141413`) 区块之间的交替——整个区块通过改变环境光的亮度来切换视觉层级。
+- **温暖的光环光晕**：按钮和卡片交互使用与温暖调色板相匹配的光环阴影——绝不使用冷色调或普通的灰色。
+
+## 7. 宜与忌
+
+### 宜
+- 使用 Parchment (`#f5f4ed`) 作为主要的浅色背景——温暖的奶油色调正是 Claude 的个性所在
+- 所有标题使用字重为 500 的 Anthropic Serif——这种单一字重的一致性是刻意为之
+- 仅将 Terracotta Brand (`#c96442`) 用于主要 CTA 和最高级别的品牌时刻
+- 保持所有中性色为暖色调——每种灰色都应带有黄棕色底色
+- 使用光环阴影 (`0px 0px 0px 1px`) 来表示交互元素的状态，而不是使用投射阴影
+- 保持杂志风格的 serif/sans 层级——serif 用于内容标题，sans 用于 UI
+- 使用宽裕的正文行高 (1.60) 以获得文学般的阅读体验
+- 在明暗区块之间交替，以创造如书本章节般的页面节奏
+- 采用大圆角 (12–32px) 以营造柔和、平易近人的感觉
+
+### 忌
+- 不要在任何地方使用冷色调的蓝灰色——调色板完全是暖色调的
+- 不要在 Anthropic Serif 上使用加粗 (700+) 字重——500 字重是 serif 的上限
+- 不要引入饱和度高于 Terracotta 的颜色——调色板刻意保持了柔和
+- 不要在按钮或卡片上使用锐角 (< 6px 半径)——柔和感是其核心标识
+- 不要应用厚重的投射阴影——深度来自于光环阴影和背景色的转换
+- 不要使用纯白 (`#ffffff`) 作为页面背景——Parchment (`#f5f4ed`) 或 Ivory (`#faf9f5`) 始终更温暖
+- 不要使用几何/科技风格的插画——Claude 的插画是有机且带有手绘感的
+- 不要将正文行高降低至 1.40 以下——宽裕的间距支撑着杂志般的个性
+- 不要对非代码内容使用 monospace 字体——Anthropic Mono 严格仅用于代码
+- 不要在标题中混入 sans-serif——serif/sans 的区分正是其排版标识
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Small Mobile | <479px | 最简布局，所有元素垂直堆叠，紧凑排版 |
+| Mobile | 479–640px | 单列，汉堡菜单，缩小的标题尺寸 |
+| Large Mobile | 640–767px | 略宽的内容区域 |
+| Tablet | 768–991px | 开始出现 2 列网格，精简的导航 |
+| Desktop | 992px+ | 完整的多列布局，展开的导航，最大的 Hero 排版 (64px) |
+
+### 触控目标
+- 按钮使用宽裕的内边距（垂直方向至少 8–16px）
+- 导航链接间距适中，方便大拇指导航
+- 卡片表面作为大型触控目标
+- 建议的最小尺寸：44x44px
+
+### 折叠策略
+- **导航**：完整的水平导航在移动端折叠为汉堡菜单
+- **特性区块**：多列 → 堆叠的单列
+- **Hero 文本**：64px → 36px → ~25px 的渐进缩放
+- **模型卡片**：3 列 → 垂直堆叠
+- **区块内边距**：按比例缩小，但保持杂志般的节奏感
+- **插画**：等比例缩放，保持长宽比
+
+### 图片行为
+- 产品截图在圆角容器内等比例缩放
+- 插画在所有尺寸下保持高质量
+- 视频嵌入保持 16:9 的长宽比并带有圆角
+- 断点之间不改变艺术指导
+
+## 9. Agent 提示词指南
+
+### 快速颜色参考
+- 品牌 CTA："Terracotta Brand (#c96442)"
+- 页面背景："Parchment (#f5f4ed)"
+- 卡片表面："Ivory (#faf9f5)"
+- 主要文本："Anthropic Near Black (#141413)"
+- 次要文本："Olive Gray (#5e5d59)"
+- 第三级文本："Stone Gray (#87867f)"
+- 边框 (浅色)："Border Cream (#f0eee6)"
+- 深色表面："Dark Surface (#30302e)"
+
+### 示例组件提示词
+- "在 Parchment (#f5f4ed) 上创建一个 Hero 区块，标题使用 64px 的 Anthropic Serif，字重 500，行高 1.10。文本使用 Anthropic Near Black (#141413)。添加一个使用 Olive Gray (#5e5d59)、20px Anthropic Sans、行高 1.60 的副标题。放置一个带有 Ivory 文本、12px 圆角的 Terracotta Brand (#c96442) CTA 按钮。"
+- "在 Ivory (#faf9f5) 上设计一张功能卡片，带有 1px solid Border Cream (#f0eee6) 边框和舒适的圆角 (8px)。标题使用 25px、字重 500 的 Anthropic Serif，描述使用 Olive Gray (#5e5d59)、16px Anthropic Sans。添加轻柔阴影 (rgba(0,0,0,0.05) 0px 4px 24px)。"
+- "在 Anthropic Near Black (#141413) 上构建深色区块，带有 Ivory (#faf9f5) 的标题文本，使用 52px、字重 500 的 Anthropic Serif。正文文本使用 Warm Silver (#b0aea5)。边框使用 Dark Surface (#30302e)。"
+- "创建一个 Warm Sand (#e8e6dc) 背景、Charcoal Warm (#4d4c48) 文本的按钮，圆角 8px，带有光环阴影 (0px 0px 0px 1px #d1cfc5)。内边距：0px 12px 0px 8px。"
+- "设计一个带有三张 Ivory 表面卡片的模型对比网格。每张卡片都有一个 Border Warm (#e8e6dc) 顶部边框，模型名称使用 25px 的 Anthropic Serif，描述使用 15px 的 Olive Gray、Anthropic Sans。"
+
+### 迭代指南
+1. 每次专注于一个组件
+2. 引用特定的颜色名称——使用 "Olive Gray (#5e5d59)" 而不是 "让它变灰"
+3. 始终指定暖色调变体——不要使用冷色调灰色
+4. 明确描述 serif 与 sans 的用法——"标题使用 Anthropic Serif，标签使用 Anthropic Sans"
+5. 对于阴影，使用 "ring shadow (0px 0px 0px 1px)" 或 "whisper shadow"——绝不要使用笼统的 "drop shadow"
+6. 指定温暖的背景——"在 Parchment (#f5f4ed) 上" 或 "在 Near Black (#141413) 上"
+7. 保持插画的有机感和概念性——描述为 "手绘风格"