使用已有截图,还是重新抓取?
登录或交互状态优先使用获授权的实际截图。公开网址截图只是可选来源,可能与目标状态不同,先检查再作为证据。
Elysia Tools
导航
Workflow Playbook
把一张获授权的界面截图整理为经人工校对的组件树、结构 JSON 与开发说明,记录坐标来源、识别遗漏和修改依据,不把视觉推断当成原始代码。
第一次接触这个流程?按步骤顺序来,从下面第一个工具开始。已经知道自己需要什么?直接跳到对应的步骤——本流程用到的全部工具都在下面的对比表里。
第一个工具: 网站截图器
专题
| 工具 | 用来做什么 | 分类 |
|---|---|---|
| 网站截图器 | 使用无头浏览器生成高质量网站截图,支持自定义选项 | Development |
| 图像元数据提取器 | 从图像中提取全面的元数据,包括EXIF、IPTC、XMP和技术信息 | Media |
| 图片裁剪 | 裁剪图片到指定尺寸或宽高比,支持自定义定位 | Design |
| 界面截图转结构 JSON | 把截图转为可校对的视觉布局树、组件文案清单和编程交接资料。 | AI Tools |
| JSON模式校验器 | 验证JSON数据是否符合JSON Schema结构定义 | Validation |
| JSON 路径提取器 | 使用 JSONPath 或 JMESPath 风格表达式查询 JSON,查看匹配路径,并在原始文档中高亮提取结果 | Data Processing |
专题
| JSON 差异可视化 | 比较两个 JSON 并生成带颜色、路径和统计信息的可视化差异报告 | Development |
| 文件哈希校验器 | 计算文件的MD5/SHA1/SHA256哈希值,并与期望哈希值进行校验 | Utilities |
本流程面向前端开发者与产品设计师,把一个静态界面整理为可讨论、可纠正的组件清单、视觉树和说明,不是克隆应用或恢复源码。先约定截图代表的视口与页面状态、交付用途及审核人,记录日期和来源。截图没有展示的状态不能靠推断补成事实。
登录后或操作后的真实状态,使用获授权的现成截图。网页截图工具只是公开页面的可选来源,不负责复现私人会话;返回图片中的弹窗、加载占位和资源缺失都需要检查。图片元数据可帮助确认技术尺寸和方向,但不证明授权或内容完整。
辅助裁剪、元数据工具也可能在服务器处理文件,因此不能等到 AI 分析时才考虑隐私。先本地去除敏感像素,或在结构工具中使用上传前遮盖;文件名、图片元数据和输入说明也要检查。保留受限原图,只共享批准的分析副本。服务方保留政策仍然适用,勾选同意不等于零留存承诺。
结构工具支持 PNG、JPEG、WebP,限制为 10 MB、16 MP、单边 8192 像素,输出最多 240 个节点。界面太密时可裁剪,但要记录原图尺寸、裁剪偏移和结果尺寸。导出框选相对于实际分析图,不自动等于原始整图坐标、CSS 像素或其他视口;手动回映需要单独核对。裁剪只是取景,不能替代对其他副本的安全脱敏。
快速模式执行一次 AI 请求,精细模式最多增加两次局部复查,无效补丁会被丢弃并标为局部失败,不能保证识别完整。可选本地英文 OCR 只修正附近高置信度且文字完全匹配的框;歧义或未匹配框仍是估计,缺少 OCR 也不阻止分析。离线演示使用合成数据,不能证明你的图片识别效果。
对照实际分析图检查叠加框,优先审阅标签文字、组件类型、包含关系、父级、边界及重复元素。画面上的矩形不能证明它是按钮元素、有点击事件或具备键盘语义。只修正像素能支持的信息,把截断、缺失和含糊区域列为待确认,不编造看不到的内容。模型置信度不是测量得到的准确率。
保留首次 JSON,再在结果中修正文字、类型、父级与框选;期望的改版行为使用独立修改请求。完成本地修正后重新下载 JSON 与 Markdown,它们包含审核状态与用量,但不包含图片本身。分析图片必须另行保存,并检查两种导出属于同一版本。
根据实际导出约定 schema,不假设内部格式永久稳定。用受支持规则检查必需字段、数据类型等,再查询关键组件路径,在全文中确认对应节点。schema 不会自动证明语义身份唯一、跨节点引用正确或父子框合理;需要另查父级引用、异常尺寸及越界。
对比首次导出与校对后的 JSON,说明修改文字、移动位置、更换父级和删除幻觉节点的原因。数组重排或标识符重建可能产生大量路径差异,要结合图中上下文对齐,不能把每个差异都解释成真实界面变化。局部失败与不确定性应保留,不要为了报告好看就改成已通过。
交付批准的分析图、修订 JSON、Markdown、裁剪映射、约定 schema、审核意见与遗留问题,采用对应版本名。再检查包中没有受限原图、秘密或遗漏的个人文字。最后对本地文件计算 SHA-256,用于核对副本一致性,不证明正确性或版权;临时链接不能代替长期交付。
开发者应把推断样式当作建议,实现后另测真实行为、断点、键盘访问与无障碍。本主题到经审核的视觉参考为止。需要计算样式和设计令牌时进入网站样式清单流程,需要比较真实渲染时进入响应式变更流程,需要操作步骤文档时进入截图指南流程,不把这些不同结果混在一次交付中。
工作流指南
使用已有截图或抓取获授权公开页面,检查尺寸与方向,记录视口和状态,并在任何上传前检查隐私。
仅在必要时裁剪已脱敏副本,保留上下文、偏移与尺寸,检查图片及元数据中的泄露风险,明确坐标系。
同意 AI 处理后选择快速或精细模式,逐项检查叠加框,修正文字、类型、父级与位置,分开记录改版要求,再下载修订 JSON 和 Markdown。
用约定 schema 检查最终 JSON,查询代表节点,对比首次导出与修订稿;引用关系、几何合理性及语义需另行人工检查。
收集脱敏分析图、修订导出及决定,列出未解决状态并对最终本地文件计算校验值,要求后续实现另做真实浏览器测试。
登录或交互状态优先使用获授权的实际截图。公开网址截图只是可选来源,可能与目标状态不同,先检查再作为证据。
能看清时保留上下文,裁剪要记录偏移。快速模式一次 AI 请求,精细模式最多增加两次局部复查,都不保证识别全部小元素。
按像素校对文字、类型、父子关系和框选;行为要求与改版建议单独记录,不把推断的 DOM、CSS 或无障碍语义写成恢复事实。