Elysia Tools
导航
AI Tools
· 最后更新：2026-11-01
把截图转为可校对的视觉布局树、组件文案清单和编程交接资料。
详情
上传静态截图并明确同意第三方 AI 处理。仅通过 OpenRouter 使用 deepseek/deepseek-v4.1-flash-1017，不替换模型、不自动重试。快速模式单次请求；精细模式最多增加两次局部裁剪复核。坐标映射回原图，非法补丁会丢弃并标记部分完成。可联动选择组件、校对文案、类型、父节点和边界框，添加修改意图。JSON 与 Markdown 包含本地校对、用量和复核状态，不嵌入截图。布局与样式是视觉近似，不是真实 DOM/CSS；隐藏行为未知。模型置信度不等于准确率。遮盖在上传前实际替换像素。离线示例是合成数据，不调用 AI。适用服务商数据留存政策，不承诺零留存。上限：10 MB、1600 万像素、单边 8192 px、240 节点。小字与裁切组件可能遗漏，编程前请核对。
固定使用 DeepSeek 官方服务商。精细模式复用已有本地 Tesseract 英文 OCR，仅对近邻、高置信且文字精确匹配的文本框校正坐标；歧义及未匹配框保留估计值。OCR 不可用不阻断解析，不增加 AI 调用、不下载模型。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
工具使用指南
界面截图转结构 JSON 是一款将静态 UI 界面截图转换为层次化布局树与组件规格清单的实用工具。工具支持快速单轮解析与精细局部复核，可提取界面中的容器、文本、按钮等节点边界框与父子从属关系，生成包含可视化校对信息的结构化 JSON 数据，辅助前端代码交接与界面复原。
背景
工程师拿到一张 SaaS 平台管理后台的静态截图，准备将其复原为 React 组件骨架。
问题
需要厘清页面中导航栏、指标卡片与数据图表区域的嵌套层级和文案内容。
如何使用
上传管理后台截图，勾选授权协议，选择“快速 · 单轮解析”模式，设置描述语言为“中文”，并在补充说明中指定“重点提取侧边栏与数据卡片”。
mode: "quick", language: "zh", consent: true, context: "重点提取侧边栏与数据卡片"结果
成功获得包含各模块边界框、父子节点关联和文本属性的完整 JSON 树，直接用于定义组件结构。
背景
设计师需要为外包开发团队提供一套海外版移动应用登录界面的精确尺寸与文本交接规范。
问题
移动端表单文本框与提示文案较密，常规识别容易产生边界漂移或文字对齐误差。
如何使用
上传移动端截图，勾选授权协议，解析模式切换为“精细 · 局部复核”，语言设置为“English”。
mode: "precise", language: "en", consent: true结果
借助局部裁剪与本地 OCR 矫正，高精度锁定了输入框及按钮的英文字符边界框，导出了可供校对的结构化数据。
不等同。导出的结构树和样式属性属于视觉近似推断，不代表底层实际的 DOM 结构、CSS 规则或交互逻辑。
快速模式仅发起单次请求；精细模式会额外增加最多两次局部裁剪复核，并复用本地 Tesseract OCR 对齐英文字符边界框。
支持 PNG、JPG、JPEG、WebP 格式，文件大小不超过 10 MB，分辨率上限 1600 万像素，单边不超过 8192 px，单次最多提取 240 个节点。
在界面上进行遮盖操作会在上传前直接替换对应像素；未遮盖的内容在勾选授权后会发送至指定的 DeepSeek 服务商进行解析。
不会。离线示例采用预先生成的合成数据，在本地直接加载四个可校对组件，不向 AI 服务商发起任何网络调用。