核心定位
Screenshot-to-Prompt 是一款面向前端开发者的截图理解 + 工程 prompt 生成工具。用户上传页面截图后，系统自动完成页面结构识别、组件层级分析、文案字段提取、状态交互推断，最终输出一份可直接发送给 coding agent（如 Cursor、GitHub Copilot、Claude Code 等）的实现级 prompt。
核心能力与工作流程
技能采用 8 步流水线：
1. 页面结构识别 —— 解析布局方式、栅格关系、区块嵌套
2. 组件识别 —— 定位 Input、Table、Modal、Tabs 等标准组件及其层级
3. 文案与字段提取 —— 精准抓取可见文本，禁止编造
4. 状态与交互推断 —— 识别 loading、disabled、selected 等状态，允许基础联动推断，禁止扩展复杂业务
5. 多图状态归并 —— 智能合并多张截图的差异态，输出统一状态机
6. 布局与视觉层级 —— 区分固定/滚动/自适应区域，指导响应式实现
7. 可复用区块识别 —— 推荐组件化拆分点（筛选区、列表项、统计卡片等）
8. 实现意图抽取 —— 将截图翻译为“数据查询列表页，顶部筛选区+中部表格+底部分页”等工程语言
三大 UI 策略
- 骨架模式：先搭结构，不追求视觉还原，适合 MVP 快速验证
- 自由发挥 UI：基于截图结构优化视觉，优先复用项目组件库，产出可直接上线的页面
- 设计稿还原：针对 Figma 截图，严格匹配布局、间距、层级，优先接入设计系统
显著优点
- 工程导向：输出物是可直接复制给 coding agent 的 markdown prompt，非空泛描述
- 边界清晰：明确定义“允许推断”与“禁止编造”的边界，有效遏制 AI 幻觉导致的过度实现
- 状态完整：支持多截图状态归并，自动生成完整状态机（default/hover/selected/loading/empty/error）
- 组件化意识：主动推荐可复用区块，引导代码可维护性
局限性与风险
- 依赖截图质量：模糊截图、非标准组件、高度定制化 UI 可能导致识别偏差
- 非代码生成：仅生成 prompt，仍需 coding agent 或人工执行最终代码实现
- 业务逻辑禁区：严禁推断复杂业务规则、接口定义、权限体系，需用户二次补充
- 多图对齐成本：截图拍摄角度、缩放比例不一致时，自动归并可能产生误判
适合人群
- 前端开发者：需要将设计稿/竞品截图快速转化为可执行代码方案
- 全栈工程师：缺乏设计资源时，通过截图+自由发挥 UI 策略快速搭建可用界面
- AI Coding 工作流用户：使用 Cursor、Windsurf、Claude Code 等工具，希望提升 prompt 工程效率
安全等级评估
本技能仅处理用户主动提供的截图，不访问外部系统，无数据外泄风险。但需注意：截图可能包含敏感信息（如内部系统界面、用户数据），建议在上传前进行脱敏处理。