# 界面截图转结构 JSON 把截图转为可校对的视觉布局树、组件文案清单和编程交接资料。 > 标准页面: https://elysiatools.com/zh/tools/ui-screenshot-to-structured-json - **分类:** AI Tools - **关键词:** 界面截图转结构 JSON, JSON, UI ## 概述 上传静态截图并明确同意第三方 AI 处理。仅通过 OpenRouter 使用 deepseek/deepseek-v4.1-flash-1017，不替换模型、不自动重试。快速模式单次请求；精细模式最多增加两次局部裁剪复核。坐标映射回原图，非法补丁会丢弃并标记部分完成。可联动选择组件、校对文案、类型、父节点和边界框，添加修改意图。JSON 与 Markdown 包含本地校对、用量和复核状态，不嵌入截图。布局与样式是视觉近似，不是真实 DOM/CSS；隐藏行为未知。模型置信度不等于准确率。遮盖在上传前实际替换像素。离线示例是合成数据，不调用 AI。适用服务商数据留存政策，不承诺零留存。上限：10 MB、1600 万像素、单边 8192 px、240 节点。小字与裁切组件可能遗漏，编程前请核对。 固定使用 DeepSeek 官方服务商。精细模式复用已有本地 Tesseract 英文 OCR，仅对近邻、高置信且文字精确匹配的文本框校正坐标；歧义及未匹配框保留估计值。OCR 不可用不阻断解析，不增加 AI 调用、不下载模型。 ## 输入项 - **界面截图** (file) - **解析模式** (select) - **我同意将遮盖后的截图及补充说明发送给 AI 服务商。** (checkbox) - **补充说明（可选，2000 字）** (textarea) - **描述语言** (select) ## 适用场景 - 需要将设计稿截图或竞品界面快速拆解为可编辑的组件结构树与文本清单时。 - 前端开发对接原型图，需要参考界面的大致排版层级、坐标边界与容器嵌套关系时。 - 进行无源码遗留系统的 UI 逆向梳理，需导出标准化组件规格与文案交接文档时。 ## 工作原理 - 上传 PNG、JPG 或 WebP 静态截图，可在上传前涂抹遮盖敏感像素，并确认勾选第三方 AI 授权协议。 - 根据需求选择快速模式或精细复核模式，并指定组件描述语言及可选的业务补充说明。 - 服务端通过视觉模型解析节点类型、文本与层级，精细模式下结合本地 Tesseract OCR 匹配校准英文文本边界框。 - 在线联动核对边界框、组件类型及父节点，一键导出包含置信度与审查状态的结构化 JSON 数据。 ## 使用案例 - 产品界面与竞品解构：快速提取竞品截图中的导航栏、列表项、操作按钮及文案，形成结构化文档。 - 原型转代码辅助：根据导出的组件边界框与父子嵌套层级，快速初始化前端页面的组件骨架。 - 遗留界面资产整理：针对缺失原始工程的旧系统截屏，自动化提取文字内容与布局框架以供重构。 ## 常见问题 ### 解析生成的 JSON 是否等同于真实的网页 DOM 树或 CSS？ 不等同。导出的结构树和样式属性属于视觉近似推断，不代表底层实际的 DOM 结构、CSS 规则或交互逻辑。 ### 快速模式与精细模式的核心区别是什么？ 快速模式仅发起单次请求；精细模式会额外增加最多两次局部裁剪复核，并复用本地 Tesseract OCR 对齐英文字符边界框。 ### 上传的截图在格式与尺寸上有什么硬性限制？ 支持 PNG、JPG、JPEG、WebP 格式，文件大小不超过 10 MB，分辨率上限 1600 万像素，单边不超过 8192 px，单次最多提取 240 个节点。 ### 界面中的隐私数据会被发送给 AI 服务商吗？ 在界面上进行遮盖操作会在上传前直接替换对应像素；未遮盖的内容在勾选授权后会发送至指定的 DeepSeek 服务商进行解析。 ### “体验离线示例”是否会消耗网络流量或 AI 额度？ 不会。离线示例采用预先生成的合成数据，在本地直接加载四个可校对组件，不向 AI 服务商发起任何网络调用。 ## 相关工具 - [发票小票OCR识别](https://elysiatools.com/zh/tools/ai-image-to-receipt-json): 使用AI视觉模型从发票/小票图片中提取关键信息并转换为自定义JSON格式 - [AI身份证OCR识别](https://elysiatools.com/zh/tools/ai-ocr-id-card-to-json): 使用AI视觉模型从身份证图片中提取关键信息并转换为JSON格式 - [Data URI 生成器](https://elysiatools.com/zh/tools/data-uri-generator): 将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源 - [图片粒子音画生成器](https://elysiatools.com/zh/tools/image-particle-music-visualizer): 将图片采样成随音乐变化的粒子点云。本地预览后，导出含音乐的 30 fps MP4、PNG 封面与 JSON 参数。 - [图片调色板转设计令牌](https://elysiatools.com/zh/tools/image-to-design-tokens): 从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶 - [PDF发票生成器](https://elysiatools.com/zh/tools/pdf-invoice-generator): 使用结构化明细生成带品牌的发票PDF - [AI图片转Markdown](https://elysiatools.com/zh/tools/ai-image-to-markdown): 使用AI视觉模型从图片中提取文本并转换为Markdown格式 - [AI大模型P图](https://elysiatools.com/zh/tools/ai-image-style-sharp-optimizer): 使用视觉大模型来识别图片，并且自动P图 ## 示例 - [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换 - [Android Java 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-java): Android Java 图像处理示例，包括图像读取保存、缩放和格式转换 - [Android Kotlin 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-kotlin): Android Kotlin 图像处理示例，包括图像读取保存、缩放和格式转换 - [Web Rust 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-rust): Web Rust 图像处理示例，包括图像读取保存、缩放和格式转换 ## 相关内容 - [界面截图结构化、人工校对与开发交付](https://elysiatools.com/zh/hubs/ui-screenshot-structure-review-and-development-handoff): 把一张获授权的界面截图整理为经人工校对的组件树、结构 JSON 与开发说明，记录坐标来源、识别遗漏和修改依据，不把视觉推断当成原始代码。