# UI Screenshot to Structured JSON Turn a screenshot into an editable visual layout tree, component inventory and coding handoff. > Canonical page: https://elysiatools.com/en/tools/ui-screenshot-to-structured-json - **Category:** AI Tools - **Keywords:** UI Screenshot to Structured JSON, JSON, UI ## Overview Upload a static screenshot and consent to third-party AI processing. Uses only deepseek/deepseek-v4.1-flash-1017 via OpenRouter, with no model substitution or automatic retry. Quick mode uses one request; precise mode adds at most two crop reviews. Crops are mapped back to original coordinates; invalid patches are discarded and marked partial. Inspect component overlays, correct text, type, parents and boxes, and attach change requests. JSON and Markdown downloads include local corrections, usage and review status, not the image itself. Visual structure and styles are approximations, not original DOM/CSS; hidden behavior is unknown. Model confidence is not measured accuracy. Masking replaces pixels before upload. Offline demo is synthetic and makes no AI calls. Provider retention policies apply; no guarantee of zero retention. Limits: 10 MB, 16 MP, 8192 px/side, 240 nodes. Some small or clipped elements can be missed; verify before coding. The official DeepSeek provider is pinned. Precise mode can align text boxes using existing local Tesseract English OCR, only for nearby high-confidence exact text matches. Ambiguous or unmatched boxes remain estimates; missing OCR does not block analysis. No extra AI call or model download. ## Inputs - **Screenshot** (file) - **Analysis mode** (select) - **I agree to send the masked screenshot and context to the AI provider.** (checkbox) - **Context (optional, 2000 characters)** (textarea) - **Description language** (select) ## When to use - Auditing legacy application interfaces or static prototypes without access to original design tokens or source code. - Extracting component hierarchies, bounding boxes, and visible copy to draft developer handoff documentation. - Cataloging visual UI elements and layouts into structured JSON trees for frontend refactoring or design system inventories. ## How it works - Upload a PNG, JPG, or WebP screenshot up to 10 MB and confirm third-party AI processing consent. - Select Quick mode for a rapid single-pass inspection, Precise mode for supplementary regional crop reviews, or offline demo mode. - Optionally supply up to 2000 characters of contextual interface descriptions to guide visual parsing. - Inspect interactive overlays, edit detected text labels, element types, or bounding boxes, and export the structured JSON or Markdown file. ## Use cases - Converting legacy software screenshots into clean layout trees for modern frontend component scaffolding. - Extracting on-screen copy and navigation hierarchies from design mockups into reviewable JSON structures. - Documenting UI component boundaries and parent-child container relationships for developer specifications. ## Frequently asked questions ### What AI model runs the screenshot visual analysis? Analysis is executed exclusively by deepseek/deepseek-v4.1-flash-1017 via OpenRouter without model fallback or automatic retries. ### What are the image dimension and node limits? Uploads support images up to 10 MB, 16 MP, and 8192 px per side, generating a maximum layout tree of 240 nodes. ### How does Precise mode differ from Quick mode? Precise mode adds up to two focused crop evaluations and applies local Tesseract English OCR alignment to verify text bounds. ### Are exported styles and DOM trees identical to the original code? No, styles and bounding boxes are visual approximations inferred from screenshot pixels, not production CSS or DOM nodes. ### Does the offline demo upload my data or invoke AI endpoints? No, the offline demo renders synthetic mock data locally without issuing network requests or processing real images. ## Related tools - [Receipt & Invoice OCR Recognition](https://elysiatools.com/en/tools/ai-image-to-receipt-json): Extract key information from receipt/invoice images and convert to custom JSON format using AI vision models - [AI ID Card OCR Recognition](https://elysiatools.com/en/tools/ai-ocr-id-card-to-json): Extract key information from ID card images and convert to JSON format using AI vision models for free - [Data URI Generator](https://elysiatools.com/en/tools/data-uri-generator): Convert files into Data URIs (Base64 or percent-encoded) for inlining images, fonts, and assets directly into HTML, CSS, or Markdown - [Image Particle Music Visualizer](https://elysiatools.com/en/tools/image-particle-music-visualizer): Turn a picture into an audio-reactive point cloud. Preview locally, then export a 30 fps MP4 with music, a PNG poster and settings JSON. - [Image Palette to Design Tokens](https://elysiatools.com/en/tools/image-to-design-tokens): Extract a dominant color palette from an image (k-means clustering), then export it as CSS variables, SCSS variables, a Tailwind config, or JSON design tokens — with named colors and an auto-generated shade scale for each - [PDF Invoice Generator](https://elysiatools.com/en/tools/pdf-invoice-generator): Generate a branded invoice PDF from structured line items - [AI Image to Markdown](https://elysiatools.com/en/tools/ai-image-to-markdown): Extract text from images and convert to markdown format using AI vision models - [AI LLM Photo Retouch](https://elysiatools.com/en/tools/ai-image-style-sharp-optimizer): Use a vision LLM to recognize the image and automatically retouch it ## Samples - [Web Image Processing Python Samples](https://elysiatools.com/en/samples/web-image-processing-python): Web Python image processing examples using PIL/Pillow including reading, saving, resizing, and format conversion - [Android Image Processing Java Samples](https://elysiatools.com/en/samples/android-image-processing-java): Android Java image processing examples including reading/saving images, scaling, and format conversion - [Android Image Processing Kotlin Samples](https://elysiatools.com/en/samples/android-image-processing-kotlin): Android Kotlin image processing examples including reading/saving images, scaling, and format conversion - [Web Image Processing Rust Samples](https://elysiatools.com/en/samples/web-image-processing-rust): Web Rust image processing examples including image read/save, scaling, and format conversion ## Related content - [UI Screenshot Structure Review and Development Handoff](https://elysiatools.com/en/hubs/ui-screenshot-structure-review-and-development-handoff): Turn one authorized UI screenshot into a manually reviewed component tree, validated JSON and development notes, with source coordinates, uncertainty and revision evidence preserved.