# UI-Screenshot in strukturiertes JSON Screenshot in bearbeitbaren Layoutbaum, Komponentenliste und Entwicklungsübergabe umwandeln. > Kanonische Seite: https://elysiatools.com/de/tools/ui-screenshot-to-structured-json - **Kategorie:** AI Tools - **Schlagwörter:** UI-Screenshot in strukturiertes JSON, JSON, UI ## Überblick Statischen Screenshot hochladen und externer KI-Verarbeitung zustimmen. Nur deepseek/deepseek-v4.1-flash-1017 über OpenRouter, ohne Modellwechsel oder Wiederholung. Schnell: ein Aufruf; präzise: höchstens zwei zusätzliche Ausschnittprüfungen. Koordinaten werden zurückgerechnet; ungültige Änderungen verworfen und als teilweise markiert. Text, Typen, Eltern, Rahmen und Änderungswünsche bearbeiten. JSON/Markdown enthalten lokale Korrekturen, Nutzung und Status, nicht das Bild. Baum und Stile sind Näherungen, kein Original-DOM/CSS. Konfidenz ist keine Genauigkeit. Masken ersetzen Pixel vor dem Upload. Synthetische Offline-Demo ohne KI. Aufbewahrungsregeln des Anbieters gelten. Grenzen: 10 MB, 16 MP, 8192 px/Seite, 240 Knoten. Kleine und abgeschnittene Details prüfen. Offizieller DeepSeek-Anbieter festgelegt. Präziser Modus kann Textrahmen mit lokalem englischem Tesseract bei nahen, sicheren exakten Texttreffern abgleichen. Mehrdeutige Rahmen bleiben geschätzt; ohne OCR läuft die Analyse weiter. Keine weiteren KI-Aufrufe oder Modelldownloads. ## Eingaben - **Screenshot** (file) - **Analysemodus** (select) - **Ich stimme zu, das maskierte Bild und den Kontext an den KI-Anbieter zu senden.** (checkbox) - **Kontext (optional, 2000 Zeichen)** (textarea) - **Beschreibungssprache** (select) ## Wann verwenden - Wenn Sie bestehende Benutzeroberflächen per Screenshot erfassen und als strukturierte Daten für das Frontend-Scaffolding benötigen. - Wenn Sie sichtbare UI-Elemente, Texte und visuelle Hierarchien schnell als maschinenlesbaren Komponentenbaum dokumentieren wollen. - Wenn Sie Entwürfe oder Mockups für die Entwicklerübergabe analysieren und lokale Korrekturen an Texten und Bounding-Boxes vornehmen möchten. ## Funktionsweise - Laden Sie eine Bilddatei (PNG, JPEG oder WebP, bis 10 MB und 16 MP) hoch und bestätigen Sie die Zustimmung zur externen KI-Verarbeitung. - Wählen Sie den Analysemodus: Schnelldurchlauf (einzelner Aufruf), präziser Modus (mit bis zu zwei Ausschnittprüfungen und OCR-Abgleich) oder die Offline-Demo. - Das Tool verarbeitet das Bild über DeepSeek (via OpenRouter), erfasst bis zu 240 Knoten und liefert das visuelle Layout als strukturiertes JSON zurück. ## Anwendungsfälle - Extrahieren von Navigations- und Dashboard-Komponenten aus Screenshots für Ticket-Spezifikationen. - Erfassen von Bounding-Boxes und Textlabels aus Legacy-Software zur Vorbereitung eines Redesigns. - Strukturierte Voranalyse von UI-Mockups zur Beschleunigung der Entwicklungsübergabe. ## Häufig gestellte Fragen ### Welche Dateiformate und Bildgrößen werden unterstützt? Unterstützt werden PNG, JPG, JPEG und WebP bis maximal 10 MB, 16 Megapixel und 8192 px Seitenlänge. ### Welches KI-Modell führt die Analyse durch? Die Verarbeitung erfolgt ausschließlich über deepseek/deepseek-v4.1-flash-1017 via OpenRouter ohne automatische Modellwechsel. ### Werden Bilddaten im ausgegebenen JSON gespeichert? Nein, das resultierende JSON enthält nur Knoten, Hierarchien, Bounding-Boxes und Metadaten, nicht das Originalbild. ### Was bewirkt der präzise Analysemodus? Er führt bis zu zwei zusätzliche Bereichsprüfungen durch und nutzt lokales englisches Tesseract-OCR, um Textrahmen exakter auszurichten. ### Kann das Werkzeug ohne KI-Aufrufe getestet werden? Ja, der Modus 'Offline-Demo testen' erzeugt synthetische Beispieldaten direkt ohne externen API-Aufruf oder Bild-Upload. ## Ähnliche Tools - [Beleg & Quittung OCR-Erkennung](https://elysiatools.com/de/tools/ai-image-to-receipt-json): Extrahieren Sie wichtige Informationen aus Beleg-/Quittungsbildern und konvertieren Sie sie in ein benutzerdefiniertes JSON-Format mit KI-Visionmodellen - [KI Personalausweis OCR-Erkennung](https://elysiatools.com/de/tools/ai-ocr-id-card-to-json): Extrahieren Sie wichtige Informationen aus Personalausweisbildern und konvertieren Sie sie mit KI-Visionmodellen in das JSON-Format - [Data-URI-Generator](https://elysiatools.com/de/tools/data-uri-generator): Konvertiert Dateien in Data URIs (Base64 oder prozent-kodiert), um Bilder, Schriftarten und Ressourcen direkt in HTML, CSS oder Markdown einzubetten - [Bildpartikel-Musikvisualisierung](https://elysiatools.com/de/tools/image-particle-music-visualizer): Verwandle ein Bild in eine audioreaktive Punktwolke. Lokal ansehen, dann MP4 mit 30 fps, PNG-Titelbild und JSON-Einstellungen exportieren. - [Bild-Palette zu Design-Tokens](https://elysiatools.com/de/tools/image-to-design-tokens): Extrahiert dominante Farben per k-Means und exportiert sie als CSS-/SCSS-Variablen, Tailwind-Config oder JSON-Tokens mit Namen und Farbskala - [PDF-Rechnungsgenerator](https://elysiatools.com/de/tools/pdf-invoice-generator): Erstellt eine gebrandete PDF-Rechnung aus strukturierten Positionen - [KI Bild zu Markdown](https://elysiatools.com/de/tools/ai-image-to-markdown): Text aus Bildern extrahieren und mit KI-Visionmodellen in Markdown-Format umwandeln - [KI Foto-Retusche](https://elysiatools.com/de/tools/ai-image-style-sharp-optimizer): Verwendet ein visuelles KI-Modell, um das Bild zu erkennen und automatisch zu retuschieren ## Beispiele - [Web Python Bildverarbeitung Beispiele](https://elysiatools.com/de/samples/web-image-processing-python): Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung - [Android Java Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/android-image-processing-java): Android Java Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung - [Android Kotlin Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/android-image-processing-kotlin): Android Kotlin Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung - [Web Rust Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/web-image-processing-rust): Web Rust Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung ## Verwandte Inhalte - [UI-Screenshot strukturieren, prüfen und an die Entwicklung übergeben](https://elysiatools.com/de/hubs/ui-screenshot-structure-review-and-development-handoff): Einen freigegebenen UI-Screenshot in einen manuell geprüften Komponentenbaum, validiertes JSON und Entwicklungsnotizen überführen, mit Koordinaten, Unsicherheiten und Änderungsnachweisen.