---
title: "网站风格灵感收集工作流"
type: 知识点
status: 活跃
updated: 2026-06-16
---

# 网站风格灵感收集工作流

## 解决什么问题

拿到新项目后，不知道怎么找风格参考，漫无目的地刷灵感网站，越刷越迷茫。

核心原则：**先定义再搜索，带着问题找答案，而不是先刷再想。**

## 完整流程

### 第一步：写约束卡片（5 分钟，最关键）

在打开任何灵感网站之前，先回答这 6 个问题。写下来，不要只在脑子里想：

```
项目约束卡片
──────────────
1. 行业/品类：这个网站属于什么领域？（SaaS / 电商 / 作品集 / 博客 / 后台管理 / 落地页）
2. 目标用户：谁在用？年龄、职业、使用场景
3. 情绪关键词：3 个词形容你想要的氛围（如：专业冷静 / 活泼年轻 / 高端克制）
4. 必须有的元素：哪些功能模块不能少？（导航形式 / 表格 / 卡片流 / 视频 hero）
5. 明确不要的：哪些风格绝对不要？（如：不要渐变 / 不要圆角 / 不要暗色）
6. 参考对象：有没有你已知觉得"方向对"的 1-2 个网站？哪怕只是某个局部
```

这一步的本质是：**把模糊的"好看"翻译成可搜索的条件**。

### 第二步：定向搜索（按品类去对应站点）

不要在所有网站之间乱逛，不同需求去不同的地方：

| 你要找什么 | 去哪里 | 怎么用 |
|---|---|---|
| 整体网站风格参考 | [Awwwards](https://www.awwwards.com) | 按品类筛选（Sites > Categories），看获奖站 |
| 按行业找真实产品 | [Mobbin](https://mobbin.com) | 按行业/功能筛选，看真实 App 和 Web |
| UI 组件/局部设计 | [Dribbble](https://dribbble.com) | 搜具体关键词如 "dashboard dark" "pricing page" |
| 简洁克制的设计 | [SiteInspire](https://www.siteinspire.com) | 按风格/类型/行业筛选 |
| 落地页参考 | [Landingfolio](https://www.landingfolio.com) | 专门收集 Landing Page |
| SaaS/产品站 | [SaaSlandingpage](https://saaslandingpage.com) | 只看 SaaS 类 |
| 暗色系设计 | [Dark.design](https://dark.design) | 专门收集暗色主题 |
| 动效参考 | [UI Movement](https://uimovement.com) | 只看交互动效 |
| 后台/Dashboard | [Dashboard UI](https://dashboardui.com) | 专门收集后台界面 |
| 极简/编辑风格 | [Minimal Gallery](https://minimal.gallery) | 极简风格网站 |

**搜索技巧**：
- 用英文关键词搜索，效果远好于中文
- 搜具体场景，不要搜"好看的网站"，要搜 "saas pricing page dark" 或 "portfolio minimal grid"
- 每个站点限定浏览 15 分钟，设个闹钟

### 第三步：快速采集（每个参考站 3 分钟）

找到觉得方向对的网站后，不要深究，先快速采集。每个网站只记录：

```
参考站采集卡
──────────────
URL：
截图：（全屏截图保存）
一句话风格：如 "暗色+毛玻璃+大留白"
打动你的点：1-3 个具体元素（如 "导航的毛玻璃效果" "卡片的悬浮阴影" "标题的字号对比"）
不适用的点：1-2 个（如 "动效太多" "配色太冷"）
```

**目标：收集 5-8 个参考站就够了，不要超过 10 个。** 多了反而决策瘫痪。

### 第四步：提取设计 Token（让 AI 帮你做）

把采集的截图和 URL 交给 AI，让它帮你提取结构化的设计参数：

**方式一：给 URL，让 AI 分析**
```
请分析这个网站的设计风格，提取以下信息：
1. 设计风格分类（极简 / 毛玻璃 / 新粗野 / 编辑风格 / 企业风 等）
2. 配色方案：主色、强调色、背景色、文字色（给出 hex）
3. 字体：推测字体名和字号层级
4. 布局：栅格方式、留白密度、内容区宽度
5. 组件风格：圆角大小、阴影类型、按钮形态
6. 特殊效果：毛玻璃 / 渐变 / 动效 等
```

**方式二：给截图，让 AI 分析**
```
[附上截图]
请从这张网站截图中提取设计 token：
颜色（hex）、字体层级、间距节奏、圆角、阴影、整体气质
```

**方式三：安装 aesthetic skill 后，用它的 Capture & Analyze 工作流自动完成**

### 第五步：收敛成 DESIGN.md

把多个参考站的提取结果合并，收敛成一份你项目的 DESIGN.md：

1. 从 5-8 个参考中，选出最接近你项目方向的 **2-3 个主参考**
2. 从其他参考中，挑出 **个别亮点元素**（如某个按钮样式、某个动效）
3. 合并成一份 DESIGN.md，重点写：
   - 视觉气质（来自哪个主参考）
   - 配色体系（合并调整后的 hex 值）
   - 字体层级
   - 组件规范
   - **Do / Don't**（最关键，防止 AI 漂移）

4. 用 [DESIGN.md设计规格书](DESIGN.md设计规格书.md) 中的模板验证完整性

## 常见陷阱

| 陷阱 | 解法 |
|---|---|
| 刷了 2 小时还没开始 | 第一步的约束卡片就是刹车，写完再搜 |
| 收集了 30 个参考，选不出来 | 强制只留 5-8 个，多删少补 |
| 只看整体，忽略局部 | 每个参考站至少找 1 个具体打动你的元素 |
| AI 提取的颜色和实际不一致 | 让 AI 同时看截图 + URL，交叉验证 |
| DESIGN.md 写完就忘 | 每次开发前先读一遍，让 AI 对照检查 |

## 推荐工具组合

| 阶段 | 工具 |
|---|---|
| 约束定义 | 自己写，5 分钟 |
| 定向搜索 | 上表中的分类灵感站 |
| 截图采集 | 浏览器全屏截图 |
| 风格提取 | AI 分析（给 URL 或截图） / aesthetic skill / visual-style skill |
| 文档输出 | DESIGN.md 模板 |

## 自动化方式：web-inspiration-hunter skill

以上是手动流程。如果你希望**直接给客户需求，AI 自动搜索并生成可视化画廊**，可以使用 `web-inspiration-hunter` skill。

### 使用方式

直接告诉 AI 你的客户需求，例如：

> "客户做有机食品电商，目标用户是注重健康的都市人群，风格要自然清新温暖"

AI 会自动：
1. 根据需求构建搜索策略
2. 搜索 8-12 个参考网站
3. 生成一个暗色系 HTML 画廊页面，包含每个网站的截图、风格标签、简介
4. 支持风格筛选和"选为参考"交互
5. 你反馈后，AI 基于选择继续收拢方向，生成下一轮画廊

### 多轮迭代示例

| 轮次 | 你说的话 | AI 做什么 |
|---|---|---|
| 1 | "有机食品电商，自然清新" | 搜索 8-12 个食品/自然风格网站，生成画廊 |
| 2 | "Daily Harvest 和 Sakara 方向对，但不要太高端" | 以这两个为锚点，搜索更亲民的同风格网站 |
| 3 | "差不多了，帮我出 DESIGN.md" | 从选中参考提取 token，生成 DESIGN.md |

### 演示产出

示例画廊文件：`output/inspiration-round1-有机食品电商.html`

## 一句话总结

**灵感收集不是"逛"，是"搜"：先写约束 → 按品类去对应站点 → 快速采集 5-8 个 → AI 提取 token → 收敛成 DESIGN.md。**

更懒的方式：直接告诉 AI 需求，用 `web-inspiration-hunter` skill 自动搜索+生成画廊，多轮迭代收拢方向。