Dark JSON Diff Tool UI Mockup

Ziel: Entwicklung eines Prototyps der Benutzeroberfläche einer Desktop-Anwendung im Dunkelmodus für ein JSON-Diff-Tool namens {argument name="app name" default="Tilted Diffs"}, das API-Antwortvergleiche mit dem Titel {argument name="diff title" default="API Response — Checkout v2"} präsentiert. Canvas: Screenshot eines 16:10-Breitbild-Desktops (ca. 1152 × 768 Pixel) mit einem macOS-ähnlichen Anwendungsfenster auf dunkelblauem Farbverlaufshintergrund. Dezente Schatten, abgerundete Ecken, schmale Rahmen und eine ansprechende Ästhetik im Stil von Entwicklertools sollen verwendet werden. Layout: Die Anwendung besteht aus vier Hauptbereichen: einer linken Seitenleiste, einer oberen Symbolleiste, die sich über den gesamten Editorbereich erstreckt, und drei vertikalen Code-Editor-Panels. Das erste Editor-Panel ist mit einem hellblauen Fokusring markiert. Das mittlere Panel zeigt farbige Inline-Diff-Hervorhebungen. Das rechte Panel ist schmaler und teilweise sichtbar und ähnelt einem zusätzlichen Dateireiter oder einer dritten Vergleichsspalte. Linke Seitenleiste: In der oberen linken Ecke befindet sich eine macOS-Ampelschaltfläche mit drei Kreisen in Rot, Gelb und Grün. Unter dem App-Namen befindet sich ein Suchfeld mit dem Platzhaltertext „Änderungen suchen…“ und Tastaturvorschlägen. Darunter sind acht gespeicherte Änderungslisteneinträge aufgeführt, jeweils mit einem kleinen Dokumentsymbol und einem Zeitstempel: 1) „API-Antwort – Checkout v2“, zeigt „Heute, 10:24 Uhr“ an, blau hervorgehoben als ausgewählter Eintrag; 2) „Benutzerprofil – Öffentliche API“, zeigt „Gestern, 16:18 Uhr“ an; 3) „Bestell-Endpunkt – v1 vs. v2“, zeigt „20. Mai 2025, 9:14 Uhr“ an; 4) „Produktkatalog – EU-Region“, zeigt „19. Mai 2025, 14:47 Uhr“ an; 5) „Authentifizierungsantwort – SSO“, zeigt „18. Mai 2025, 11:03 Uhr“ an; 6) „Abrechnungsübersicht – 2. Quartal“, zeigt „17. Mai 2025, 15:22 Uhr“ an. 7) „Webhook Payload – Stripe“ mit dem Datum „16. Mai 2025, 10:11 Uhr“; 8) Die Meldung „Suchergebnisse – Relevanz“ zeigt „15. Mai 2025, 17:35 Uhr“ an. Unten befindet sich eine auffällige blaue Schaltfläche „+ Neuer Diff“ und ein kleines Zahnradsymbol. Die obere Symbolleiste zeigt links „API-Antwort – Checkout v2“ mit einem kleinen Stiftsymbol für Bearbeitungen. Ein segmentiertes Steuerelement in der Mitte enthält zwei Beschriftungen: „Editoren“ (blau ausgewählt) und „Diff“ (nicht ausgewählt). Rechts befinden sich vier kompakte Tastenkombinationen mit den Bezeichnungen „⌘T Spalte hinzufügen“, „⌘D Diff umschalten“ und „⌘← / ⌘→ Fokus verschieben“, die eng beieinander liegen. Das Editorfeld verwendet eine nichtproportionale Schriftart, Zeilennummern, JSON-Syntaxhervorhebung, ein dunkelblaues Bedienfeld und schmale, abgerundete Ränder. Das linke Bedienfeld trägt den Titel „source.json“ und ist mit einem Dokumentsymbol und einem Drei-Punkte-Menü versehen. Das mittlere Bedienfeld heißt „target.json“ und ist ebenfalls mit einem Dokumentsymbol und einem Drei-Punkte-Menü ausgestattet. Das schmale rechte Bedienfeld trägt den Titel „more.json“ und zeigt nur die linke Seite des Codes an, was auf einen Überlauf hindeutet. Jedes vollständige Editor-Bedienfeld verfügt über eine Statusleiste am unteren Rand, die „Ln 1, Col 1“, „Spaces: 2“, „UTF-8“, „LF“ und „JSON“ anzeigt. Der Codeinhalt zeigt die JSON-Antwort auf die Bestellabwicklung. Er verwendet die Anfrage-ID „req_8f3a9b42“, die Bestell-ID „ord_123456“, die Währung USD sowie Produkt- und Versandinformationen für die kabellosen Kopfhörer und die Reisetasche. Die Quellversion links sollte den Zeitstempel „2025-05-21T10:24:31Z“, die Version „v1“, den Status „ausstehend“, den Gesamtbetrag 129,99, den Einzelpreis der kabellosen Kopfhörer 99,99 (Rabatt nicht vorhanden), die Anzahl der Reisetaschen 1, den Einzelpreis 30,00 (Rabatt nicht vorhanden), die Versandart „Standard“, die geschätzte Lieferzeit 5 Tage und die Adresse „123 Market St“ enthalten. Die Zwischenversion sollte links eine Differenzmarkierung aufweisen und farbig hervorgehoben sein: rot für gelöschte, grün für hinzugefügte und gelb für geänderte Zeilen. Die Änderungen sollten beispielsweise Folgendes umfassen: Zeitstempel von „2025-05-20T15:11:09Z“ auf „2025-05-21T10:24:31Z“ geändert, Version auf v2 geändert, Status von „Ausstehend“ auf „Bestätigt“ geändert, Gesamtbetrag auf 139,99 geändert, Preis pro kabellosem Ohrhörer auf 109,99 (mit 10,00 Rabatt) geändert, Anzahl der Reisetaschen auf 2 geändert, Versandart auf Expressversand geändert und geschätzte Lieferzeit auf 2 Tage geändert. Jeder vollständige Editor sollte ca. 32 Zeilen nummerierten Codes enthalten. Visueller Stil: Benutzeroberfläche eines modernen SaaS-Entwicklertools, gestochen scharfe Vektorgrafik, dunkles Design, kobaltblaue Akzentfarbe, hellgrauer Text, realistische und dennoch übersichtliche UI-Screenshots, keine menschlichen Figuren, keine Wasserzeichen und keine Browserrahmen außerhalb des Anwendungsfensters. Der gesamte Text sollte klar und am Raster ausgerichtet sein.