技能介绍

问题与目标

前端重构常卡在截图到代码之间：图片里能看到布局、控件和状态，但缺少可直接交给模型的工程描述。Screenshot Reverse Engineer 的目标是把 UI 截图转成两类可用产物：面向 AI 编码的工程开发提示词，以及面向产品、设计与工程协作的页面功能设计文档。它强调只基于截图可见证据和用户补充说明，不虚构隐藏业务逻辑、视觉元素或模块。

工作方式与边界

技能会先做整体判断，识别终端类型、页面类型、业务域和视觉风格，再按截图状态分类：默认、详情、表单、弹窗、加载、空态、错误、选中或多状态。随后拆解视觉系统、功能模块、元素交互和布局架构，尽量输出颜色、字体、圆角、阴影、间距等可量化参数，并用标签区分置信度：【确定】、【估算】、【推测】、【待补充】、【不适用】。默认技术栈偏 React + TypeScript + Tailwind CSS，管理端可推断为 Ant Design 风格，但会标记为推测。

适合单页、多状态或局部截图的重构分析；不适合要求生成完整后端接口、真实业务数据或未在图中出现的流程。多张截图会先分别分析，再合并共享视觉规则；mock data 必须明确标注，避免被当成真实业务数据。