Files

王冕 a27e3b8e43 feat: sync full workspace including web modules, docs, and configurations to Gitea

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>

2026-06-09 18:12:25 +08:00

3.8 KiB

Raw Permalink Blame History

截图资产提取流程

目标：基于截图进行视觉分析，产出设计主题、设计规范文档与数据模型等资产。只描述“做什么”（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）

文件格式：

{
  "tableName": "表名（中文）",
  "records": [
    { "id": 1, "字段1": "值1", "字段2": "值2" }
  ]
}

关键原则：

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

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

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

用户交互指南

初始对话

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

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

需求确认

✓ 已分析截图。

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

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

进度通知

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

完成总结

✅ 已完成！

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

3.8 KiB Raw Permalink Blame History Unescape Escape