# Image Analyzer

> 分析参考图像，提取关键视觉元素、颜色、布局、风格等信息，生成详细的视觉描述和代码实现建议。使用场景：用户发送参考图时，分析图片内容并生成实现代码。

- Skill: `davidme6-self-learning-skill/image-analyzer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add davidme6-self-learning-skill/image-analyzer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/davidme6-self-learning-skill/image-analyzer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: davidme6 (https://skillmd.com/u/davidme6-self-learning-skill)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/davidme6-self-learning-skill/image-analyzer

---


# Image Analyzer Skill

## 功能

分析参考图像，提取：
1. **视觉元素**：家具、物品、人物等
2. **颜色方案**：主色调、辅助色、强调色
3. **布局结构**：位置、大小、比例
4. **风格特征**：卡通、写实、简约等
5. **代码实现**：生成对应的 Canvas 绘制代码

## 工作流程

1. 接收用户发送的参考图
2. 分析图片内容
3. 提取关键信息
4. 生成实现代码
5. 输出详细报告

## 输出格式

```markdown
## 图片分析

### 场景类型
卧室/厨房/客厅/浴室

### 家具清单
1. 衣柜 - 位置/颜色/大小
2. 床 - 位置/颜色/大小
3. 书柜 - 位置/颜色/大小
...

### 颜色方案
- 墙壁：#FFF8DC（米黄色）
- 地板：#DEB887（浅木色）
- 衣柜：#8B4513（棕色）
...

### 布局比例
- 衣柜：左侧 28% 宽度
- 窗户：中间 30% 宽度
- 书柜：右侧 28% 宽度
...

### 实现代码
[生成 Canvas 绘制代码]
```

## 使用示例

**用户发送参考图**

**分析输出：**
```
## 图片分析结果

### 场景：卧室

### 家具识别
1. 左侧衣柜（棕色双门）
2. 中间窗户（蓝色玻璃）
3. 窗户下床（蓝色床单）
4. 右侧书柜（彩色格子）

### 颜色提取
- 墙壁：#FFF8DC
- 地板：#DEB887
- 衣柜：#8B4513
...

### 代码实现
[生成完整的 scene.js 代码]
```