---
name: "web-inspiration-hunter"
description: "Search and generate visual gallery of reference websites based on client requirements. Invoke when user needs website style inspiration, wants to find reference sites, or says '找灵感' '找参考网站' 'inspiration'."
---
# Web Inspiration Hunter
根据客户需求，自动搜索参考网站并生成可视化画廊页面，支持多轮迭代收拢风格方向。
## 触发条件
- 用户说"找灵感"、"找参考网站"、"找风格"、"inspiration"
- 用户给出客户/项目需求，需要找网站风格参考
- 用户想看同类网站的截图和简介
## 完整工作流
### 第一步：收集需求
如果用户没有给出完整信息，主动询问以下关键项（不要一次问完，挑最关键的先问）：
1. **行业/品类**：SaaS / 电商 / 作品集 / 博客 / 后台管理 / 落地页 / 其他
2. **情绪关键词**：2-3 个词形容想要的氛围（如：专业冷静 / 活泼年轻 / 高端克制 / 自然清新）
3. **明确不要的**：哪些风格绝对不要
4. **参考对象**：有没有已知觉得方向对的网站（可选）
如果用户已经给了足够信息，直接进入第二步。
### 第二步：构建搜索策略
根据需求，从以下搜索维度组合关键词：
**维度 1：行业 + 风格**
- 英文搜索效果远好于中文
- 示例：`organic food ecommerce website design` / `saas dashboard dark mode` / `portfolio minimal grid`
**维度 2：按灵感站点搜索**
- `site:awwwards.com [关键词]`
- `site:mobbin.com [关键词]`
- `best [行业] website design 2025 2026`
- `[行业] website inspiration`
**维度 3：具体设计风格**
- `glassmorphism website` / `neobrutalism website` / `minimalist website` / `dark mode website`
执行 3-5 次搜索，覆盖不同维度，目标是找到 15-20 个候选网站。
### 第三步：筛选与采集
从搜索结果中筛选出 **8-12 个** 最相关的网站，标准：
- 与客户行业/需求匹配
- 风格方向与情绪关键词一致
- 网站可访问（排除 404 或需登录的）
- 多样性：不要全是同一种风格，保留 2-3 个"意外但可能有趣"的
对每个网站，使用 WebFetch 或 defuddle skill 获取简介信息。
### 第四步：生成画廊 HTML
将筛选结果生成为一个本地 HTML 文件，使用以下模板结构：
```html
网站灵感画廊 - [项目名]
```
**截图方案**：使用 `https://image.thum.io/get/width/600/crop/400/[URL]` 生成网站缩略图，无需 API key。
**每个网站卡片包含**：
- 缩略图截图
- 网站名称
- URL（可点击）
- 一句话风格标签（如"暗色+毛玻璃+大留白"）
- 简短描述（2-3 句，说明这个网站为什么被选中，哪个元素值得参考）
- 风格分类标签（可点击筛选）
**页面顶部**：显示当前搜索的需求摘要，方便回顾。
**页面底部**：提供"下一轮搜索"的提示，引导用户反馈。
HTML 文件保存到项目目录或用户指定位置。
### 第五步：多轮迭代
用户看完画廊后，通常会给出反馈，常见模式：
| 用户反馈 | 行动 |
|---|---|
| "偏了，要更简洁的" | 调整情绪关键词，重新搜索，偏向极简方向 |
| "这个方向对了，但颜色太冷" | 保留风格方向，搜索同风格但暖色系的变体 |
| "第3个和第7个不错" | 以这两个为锚点，搜索类似风格的更多网站 |
| "有没有更现代感的" | 加入 "modern" "contemporary" 等关键词重新搜索 |
| "差不多了，帮我出 DESIGN.md" | 转入 DESIGN.md 生成流程 |
每轮迭代都重新生成画廊 HTML，文件名加轮次后缀（如 `inspiration-round2.html`），方便对比。
### 第六步：收敛输出
当用户确认方向后，从最终画廊中提取设计 token，输出：
1. **DESIGN.md 初稿**：基于选中的参考站，按 [DESIGN.md设计规格书](../../wiki/知识点/DESIGN.md设计规格书.md) 模板生成
2. **visual-style.md**（可选）：如果安装了 visual-style skill，同步生成
## 搜索关键词速查表
| 行业 | 搜索关键词 |
|---|---|
| SaaS/产品 | `saas landing page`, `product website`, `startup website` |
| 电商 | `ecommerce website design`, `shop website`, `online store design` |
| 作品集 | `portfolio website`, `creative portfolio`, `designer portfolio` |
| 博客/内容 | `blog design`, `editorial website`, `magazine website` |
| 后台管理 | `dashboard design`, `admin panel`, `management system UI` |
| 落地页 | `landing page design`, `hero section`, `conversion page` |
| 餐饮/食品 | `restaurant website`, `food website design`, `organic food website` |
| 教育 | `education website`, `online course platform`, `edtech design` |
| 金融 | `fintech website`, `banking app design`, `finance dashboard` |
| 医疗 | `healthcare website`, `medical website design`, `wellness website` |
## 风格关键词速查表
| 风格 | 英文搜索词 |
|---|---|
| 极简 | `minimal`, `minimalist`, `clean` |
| 暗色 | `dark mode`, `dark theme`, `dark UI` |
| 毛玻璃 | `glassmorphism`, `glass effect`, `frosted glass` |
| 新粗野 | `neobrutalism`, `brutalist` |
| 编辑/杂志 | `editorial`, `magazine layout`, `typography-focused` |
| 企业/专业 | `corporate`, `professional`, `enterprise` |
| 活泼/年轻 | `playful`, `vibrant`, `colorful`, `fun` |
| 高端/奢侈 | `luxury`, `premium`, `high-end` |
| 自然/有机 | `organic`, `natural`, `earthy` |
| 科技/未来 | `futuristic`, `tech`, `cyberpunk` |
## HTML 画廊模板
生成画廊时使用以下完整模板，确保视觉效果专业：
```html
网站灵感画廊 - {PROJECT_NAME}
{STYLE_SUMMARY}
{DESCRIPTION}
{TAG1}
{TAG2}
```
## 注意事项
- 截图服务 `image.thum.io` 免费但可能有延迟，如果加载慢可以刷新
- 搜索时优先用英文关键词，效果远好于中文
- 每轮搜索控制在 8-12 个结果，太多反而选择困难
- 如果用户给了参考网站 URL，优先分析该网站，再找同类
- 画廊 HTML 文件默认保存到用户当前项目目录