# 创意参考图片数据库 · 技术方案

## 架构

```
批量爬取 → AI 打标签 → 入库 → 检索（基于卖点创意标签匹配）
```

## 一、数据源（按优先级）

| 来源 | 内容类型 | 数量级 | 爬取难度 |
|------|---------|--------|---------|
| Behance | 设计项目封面+内页 | 10万+ | ⭐⭐ 公开页面 |
| Dribbble | UI/视觉设计 | 5万+ | ⭐⭐⭐ 需登录 |
| Awwwards | 获奖网站截图 | 1万+ | ⭐⭐ 公开页面 |
| Pinterest | 混合视觉素材 | 无限 | ⭐⭐⭐⭐ 反爬强 |
| Unsplash/Pexels | 高质量免费图片 | 10万+ | ⭐ 有 API |
| 竞品官网截图 | Apple/Samsung/OnePlus PDP | 500+ | ⭐ 直接截 |
| Mobbin | 移动端 UI 截图 | 2万+ | ⭐⭐ |
| Lottiefiles | 动效预览 | 5000+ | ⭐ 有 API |

### 首期重点：Behance + Unsplash + 竞品截图
- Behance：设计创意方向参考（主力）
- Unsplash：元素/场景/情绪图（登机牌、星空、咖啡等）
- 竞品截图：行业标杆对标

## 二、爬取策略

### Behance 爬取
```
搜索词矩阵 = 创意概念库关键词 × 调性关键词
```

已有 creative_concepts.json 里 150+ 搜索词，每个词搜 5 页 = 60 个结果
150 × 60 = ~9000 张图（去重后约 5000-6000）

脚本逻辑：
1. 遍历 creative_concepts.json 中所有 search_keys
2. 每个关键词搜索 Behance，提取封面图 + 项目链接 + 标题
3. 下载缩略图到本地（808px 尺寸）
4. 记录元数据：source, url, title, search_query, raw_tags
5. 限速：每次请求间隔 2 秒，避免被封

### Unsplash 爬取
利用官方 API（免费 50 req/hour）
搜索词：creative_concepts.json 中的 elements 字段
如"机票"→ "boarding pass", "passport stamp", "airline ticket"

### 竞品截图
用 Playwright 自动截取：
- apple.com/iphone-17-pro 逐屏截图
- samsung.com/galaxy-s26-ultra 逐屏截图
- oneplus.com 逐屏截图
每个页面截 10-15 屏，标注所属模块（hero/camera/battery/design...）

## 三、AI 打标签

### 多维度标签体系

```json
{
  "id": "img_00001",
  "source": "behance",
  "url": "https://...",
  "thumbnail": "local/00001.jpg",
  
  "tags": {
    // 维度1：产品卖点类别
    "category": ["影像", "设计"],
    
    // 维度2：创意元素
    "elements": ["胶片", "相框", "暗房", "红色灯光"],
    
    // 维度3：视觉风格
    "visual_style": ["暗色系", "高对比", "复古", "电影感"],
    
    // 维度4：调性
    "tone": ["旗舰", "克制", "高级"],
    
    // 维度5：构图/排版
    "layout": ["居中对称", "留白", "全出血", "网格"],
    
    // 维度6：色彩
    "color_mood": ["暖色", "单色", "高饱和"],
    
    // 维度7：动效类型（如果是动效参考）
    "motion": ["渐显", "视差滚动", "粒子"],
    
    // 维度8：适用PDP模块
    "pdp_module": ["hero", "camera", "specs"],
    
    // 维度9：AI 生成的描述
    "ai_description": "暗色背景下的35mm胶片条排列，红色暗房灯光营造电影氛围，适合影像类产品的样张展示模块"
  },
  
  "embedding": [0.123, 0.456, ...],  // 图像 embedding 向量，用于语义搜索
  "quality_score": 8.5  // AI 打分：构图、美感、参考价值
}
```

### 打标签流程

```
图片 → 多模态模型（GPT-4V / Gemini Vision / Claude Vision）
       │
       ├─ 提取视觉元素（物体、场景、材质）
       ├─ 判断视觉风格（暗色/明亮、复古/现代...）
       ├─ 判断适用调性（旗舰/潮流/科技/自然）
       ├─ 判断适用 PDP 模块（hero/camera/battery...）
       ├─ 生成文字描述
       └─ 打质量分（1-10）
       
       同时：
       图片 → CLIP 模型 → 生成 embedding 向量（用于语义搜索）
```

### Prompt 模板（打标签用）

```
分析这张设计作品图片，输出 JSON：
{
  "elements": ["图中的核心视觉元素，如：胶片、星空、刀锋、水滴"],
  "visual_style": ["视觉风格，如：暗色系、极简、复古、赛博朋克"],
  "tone": ["适合的产品调性，从以下选择：旗舰克制/潮流活泼/科技未来/自然温暖"],
  "color_mood": ["色彩情绪，如：冷色、暖色、单色、高饱和、低饱和"],
  "layout": ["构图方式，如：居中、对称、网格、满版、留白"],
  "pdp_module": ["适合手机产品页的哪个模块：hero/camera/battery/design/display/chipset/os/specs"],
  "description": "一句话描述这张图的创意价值和如何应用到手机产品页",
  "quality_score": 8
}
```

## 四、检索逻辑

### 基于标签的精确匹配 + 语义搜索混合

```
用户选择创意方向"登机牌 × 手机"
    ↓
1. 标签匹配：elements 包含 ["机票","登机牌","护照"] 的图片
    ↓
2. 调性过滤：tone 匹配用户选的调性（如"旗舰"）
    ↓
3. 语义补充：用 "boarding pass premium design" 的 CLIP embedding 
   做向量近似搜索，补充标签未覆盖的结果
    ↓
4. 质量排序：按 quality_score 降序
    ↓
5. 返回 TOP 12
```

### 搜索优先级
1. 完全匹配（elements + tone 都命中）→ 最前
2. 元素匹配（elements 命中，tone 不完全匹配）→ 次之
3. 语义相似（embedding 距离近）→ 补充
4. 质量兜底（quality_score > 7 的随机优质图）→ 保底

## 五、数据库选型

| 方案 | 适合阶段 | 技术栈 |
|------|---------|--------|
| JSON 文件 | MVP（<5000张） | 纯 JS，无依赖 |
| SQLite + JSON | 中期（5000-5万） | better-sqlite3 |
| PostgreSQL + pgvector | 生产级（5万+） | pg + 向量搜索 |

### MVP 方案：JSON + 内存索引
```
db/
├── images.json          # 所有图片元数据
├── index/
│   ├── by_element.json  # 按元素倒排索引
│   ├── by_tone.json     # 按调性倒排索引
│   └── by_module.json   # 按PDP模块倒排索引
└── thumbnails/          # 本地缩略图（或 CDN URL）
```

## 六、实施计划

### Phase 1：MVP（1-2周）
- [ ] 爬取 Behance 5000 张（基于现有 150+ 关键词）
- [ ] 用 GPT-4V / Claude Vision 批量打标签
- [ ] 构建 JSON 数据库 + 倒排索引
- [ ] Moodboard 工具接入数据库检索（替代实时 Behance 搜索）

### Phase 2：扩展（2-4周）
- [ ] 增加 Unsplash + 竞品截图
- [ ] 增加 CLIP embedding 语义搜索
- [ ] 标签管理后台（增删改标签、人工校正）
- [ ] 图片质量人工复审

### Phase 3：产品化（1-2月）
- [ ] 迁移到 PostgreSQL + pgvector
- [ ] 增加用户收藏/标记功能
- [ ] 自动增量爬取（每周更新）
- [ ] 团队协作（共享 moodboard）