# 截图资产提取流程

目标：基于截图进行视觉分析，产出设计主题、设计规范文档与数据模型等资产。只描述“做什么”（WHAT），不描述“如何实现”（HOW）。

## 工作流程

### 1) 视觉能力检测

模型不支持视觉时，用户提供截图后立即告知并停止

### 2) 接收截图

- 支持拖拽/粘贴/路径提供的截图
- 优先收集 3-5 个核心页面（首页/登录/主要功能页）以便识别统一视觉语言
- 临时保存到 `temp/screenshots/` 并验证文件格式和大小

### 3) 本地图片读取能力验证

- 尝试读取已提供的本地截图文件
- **如果无法直接读取本地图片**（工具不支持或返回错误），必须：
  - 立即停止流程
  - 告知用户："无法读取本地图片，请将 `[图片绝对路径]` 复制到对话框后提交"
  - 等待用户提交图片后再继续
- 禁止假设或猜测图片内容
- 禁止通过 Base64 编码读取图片内容
### 4) 视觉分析（截图为最高优先级）

**文本内容**
- 识别可见文本
- 判断文本层级（标题、正文、辅助文本）
- 理解文本语义与上下文

**布局结构**
- 整体布局方式（栅格、弹性布局）
- 区域划分与层级关系
- 组件排列与对齐方式

**组件识别**
- 识别 UI 组件类型（按钮、输入框、卡片、导航等）
- 组件状态（默认、悬停、禁用等）
- 交互元素与功能

**设计细节**
- 字体样式与大小
- 间距和留白
- 圆角和边框
- 阴影和层次
- 颜色使用与主题
- 设计语言总结（品牌气质、视觉关键词、形状语言、排版节奏、组件风格）

### 5) 提取设计主题

基于视觉分析提取设计系统：

**颜色系统**
- 主色/辅助色/中性色
- 生成色阶（50-900）
- 语义化颜色（成功/警告/错误）

**排版系统**
- 字体家族和权重
- 字号层级
- 行高和字间距

**间距系统**
- 常用间距值
- 间距规范

**其他 Token**
- 圆角规范
- 阴影层级
- 边框样式

**输出位置**：`src/themes/<theme-key>/`
**必需文件**：
- `globals.css` 或 `designToken.json`（`designToken.json` 必须包含 `name` 字段，二选一，遵循 `theme-generation-guide.md`）
- `DESIGN-SPEC.md`（基于多页面截图总结设计规范）
- `index.tsx`（主题演示页）

### 6) 提取数据模型（可选）

截图包含列表/表格/表单时识别数据结构并生成数据库文件。

**输出位置**：`assets/database/`
**文件命名**：英文文件名（如 `users.json`、`products.json`）

**文件格式**：
```json
{
  "tableName": "表名（中文）",
  "records": [
    { "id": 1, "字段1": "值1", "字段2": "值2" }
  ]
}
```

**关键原则**：
- 文件名使用英文；`tableName` 使用中文。
- 字段名优先中文。
- 从截图提取真实数据，不足时生成合理模拟数据。
- 每个表生成 10-30 条记录。

## 默认方案（用户未明确需求时）

- 提取设计主题并生成设计规范文档
- 识别数据模型（如有）

## 用户交互指南

### 初始对话

```
您好！我可以帮您基于截图提取资产（设计主题 / 设计规范文档 / 数据模型）。

请提供截图，我将通过视觉分析提取资产。
```

### 需求确认

```
✓ 已分析截图。

默认方案：
- 提取设计主题并生成设计规范文档
- 识别数据模型（如有）

回复"接受"按默认方案执行，或告诉我您的具体需求。
```

### 进度通知

```
正在分析截图...
✓ 已识别文本和布局结构
✓ 已分析组件类型和设计细节
✓ 已提取设计主题
⏳ 正在生成数据模型...
```

### 完成总结

```
✅ 已完成！

生成的资产：
- 设计主题：src/themes/<theme-key>/
- 设计规范文档：src/themes/<theme-key>/DESIGN-SPEC.md
- 数据模型：assets/database/（如有）
```