a27e3b8e43
Optimized the root .gitignore to exclude virtual environments, node modules, and temp folders to ensure clean and lightweight version tracking. Co-authored-by: Cursor <cursoragent@cursor.com>
150 lines
3.8 KiB
Markdown
150 lines
3.8 KiB
Markdown
# 截图资产提取流程
|
||
|
||
目标：基于截图进行视觉分析，产出设计主题、设计规范文档与数据模型等资产。只描述“做什么”（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-guide.md`）
|
||
- `DESIGN.md`（基于多页面截图总结设计规范）
|
||
- `index.tsx`（主题演示页）
|
||
|
||
### 6) 提取数据模型（可选）
|
||
|
||
截图包含列表/表格/表单时识别数据结构并生成数据库文件。
|
||
|
||
**输出位置**：`src/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.md
|
||
- 数据模型：src/database/（如有）
|
||
```
|