description: 分析网站以获取设计灵感，提取颜色、字体、布局和模式。当您有特定URL用于设计项目时使用。 allowed-tools:
- mcp__claude-in-chrome__tabs_context_mcp
- mcp__claude-in-chrome__tabs_create_mcp
- mcp__claude-in-chrome__navigate
- mcp__claude-in-chrome__computer
- mcp__claude-in-chrome__read_page
- mcp__claude-in-chrome__get_page_text
灵感分析器
分析网站以提取设计灵感，包括颜色、字体、布局和UI模式。
目的
当用户提供灵感URL时，此技能：
- 使用浏览器工具访问每个网站
- 截取屏幕截图进行视觉分析
- 提取特定设计元素
- 创建结构化灵感报告
- 识别可复制的模式
工作流程
步骤1：获取浏览器上下文
// 获取或创建浏览器标签
tabs_context_mcp({ createIfEmpty: true })
tabs_create_mcp()
步骤2：导航到URL
navigate({ url: "https://example.com", tabId: tabId })
步骤3：捕获屏幕截图
截取多个屏幕截图以捕获完整体验：
- 英雄/首屏区域：初始视口
- 滚动部分：滚动并捕获
- 交互状态：悬停在导航、按钮上
- 移动端视图：调整到移动端宽度
// 全页屏幕截图
computer({ action: "screenshot", tabId: tabId })
// 滚动并捕获更多
computer({ action: "scroll", scroll_direction: "down", tabId: tabId })
computer({ action: "screenshot", tabId: tabId })
// 移动端视图
resize_window({ width: 375, height: 812, tabId: tabId })
computer({ action: "screenshot", tabId: tabId })
步骤4：分析元素
从屏幕截图和页面内容中提取：
颜色
- 主颜色：主要品牌颜色
- 辅助颜色：支持调色板
- 背景颜色：页面和部分背景
- 文本颜色：标题和正文文本
- 强调颜色：CTA、链接、高亮
注意可见的十六进制代码。
字体
- 标题字体：如果可识别名称，或描述样式
- 正文字体：名称或描述
- 字体粗细：轻、常规、粗体的使用
- 大小比例：元素的相对大小
- 行高：紧密或宽松
- 字母间距：跟踪模式
布局
- 网格系统：列结构
- 空白区域：间距哲学
- 部分结构：全宽、包含、交替
- 导航样式：固定、隐藏、侧边栏
- 页脚结构：简约或全面
UI模式
- 按钮：形状、大小、状态
- 卡片：边框、阴影、角落
- 图标：样式（轮廓、填充、自定义）
- 图像：处理方式、宽高比
- 动画：观察到的运动模式
步骤5：生成报告
创建结构化分析：
## 网站分析：[URL]
### 屏幕截图
[描述关键屏幕截图]
### 颜色调色板
| 角色 | 十六进制 | 用途 |
|------|-----|-------|
| 主颜色 | #xxx | [使用位置] |
| 辅助颜色 | #xxx | [使用位置] |
| 背景 | #xxx | [使用位置] |
| 文本 | #xxx | [使用位置] |
| 强调 | #xxx | [使用位置] |
### 字体
- **标题**：[字体名称/描述] - [粗细]
- **正文**：[字体名称/描述] - [粗细]
- **比例**：[大小关系]
- **行高**：[观察结果]
### 布局模式
- 网格：[描述]
- 间距：[描述]
- 部分：[描述]
### UI元素
- **按钮**：[描述]
- **卡片**：[描述]
- **导航**：[描述]
- **页脚**：[描述]
### 关键要点
1. [使此设计独特之处]
2. [值得复制的模式]
3. [要使用的具体技术]
### 避免事项
- [此网站中过度使用的任何模式]
- [无法很好转化的元素]
多个网站
当分析多个URL时：
- 分别分析每个网站
- 创建单独报告
- 总结共同主题
- 记录对比方法
- 推荐要组合的元素
后备模式
如果浏览器工具不可用：
- 告知用户实时分析需要浏览器访问
- 请用户：
- 分享网站屏幕截图
- 描述他们喜欢每个网站的哪些方面
- 粘贴任何可见的颜色代码
- 如果可见，记录字体名称
- 使用提供的信息进行分析
最佳实践
准确提取颜色
- 在页面检查中查找颜色变量
- 检查按钮以获取主要品牌颜色
- 注意不同部分的背景颜色
- 捕获悬停状态以获取强调颜色
字体识别
- 在源代码中查找Google字体链接
- 检查计算样式中的字体族
- 注意h1、h2、正文之间的相对大小
- 观察标题与正文的跟踪
布局分析
- 调整视口大小以查看响应行为
- 记录布局变化的断点
- 计数网格布局中的列数
- 视觉测量间距一致性
输出
分析应提供：
- 可操作的颜色调色板（十六进制代码）
- 字体推荐
- 可复制的布局模式
- UI组件灵感
- 清晰的moodboard方向
有关详细提取方法，请参阅references/extraction-techniques.md。