Maqueta de interfaz de usuario de herramienta de diferenciación JSON oscura

Objetivo: Crear un prototipo de interfaz de usuario de aplicación de escritorio en modo oscuro para una herramienta de comparación de JSON llamada {argument name="app name" default="Tilted Diffs"}, que muestra comparaciones de respuestas de API tituladas {argument name="diff title" default="API Response — Checkout v2"}. Lienzo: Captura de pantalla de escritorio panorámica 16:10, aproximadamente 1152×768, con una ventana de aplicación estilo macOS flotando sobre un fondo degradado azul oscuro. Utilizar sombras sutiles, esquinas redondeadas, bordes delgados y una estética refinada de herramienta de desarrollo. Diseño: La aplicación consta de cuatro áreas principales: una barra lateral izquierda, una barra de herramientas superior que abarca el área del editor y tres paneles verticales del editor de código. El primer panel del editor está seleccionado con un halo de enfoque azul brillante. El panel central muestra resaltados de diferencias en línea de color. El panel más a la derecha es más estrecho y parcialmente visible, asemejándose a una pestaña de archivo adicional o una tercera columna de comparación. Barra lateral izquierda: La esquina superior izquierda muestra un botón de semáforo de macOS: tres círculos, rojo, amarillo y verde respectivamente. Debajo del nombre de la aplicación hay un cuadro de búsqueda con el texto de marcador de posición "Buscar diffs…" y sugerencias de teclado. A continuación se muestran ocho elementos de la lista de diff guardados, cada uno con un pequeño icono de documento y una marca de tiempo: 1) "API Response — Checkout v2", que muestra "Hoy, 10:24 AM", resaltado en azul como el elemento seleccionado; 2) "User Profile — Public API", que muestra "Ayer, 4:18 PM"; 3) "Orders Endpoint — v1 vs v2", que muestra "20 de mayo de 2025, 9:14 AM"; 4) "Product Catalog — EU Region", que muestra "19 de mayo de 2025, 2:47 PM"; 5) "Auth Response — SSO", que muestra "18 de mayo de 2025, 11:03 AM"; 6) "Billing Summary — Q2", que muestra "17 de mayo de 2025, 3:22 PM"; 7) “Webhook Payload — Stripe”, mostrando “16 de mayo de 2025, 10:11 AM”; 8) El mensaje “Resultados de búsqueda — Relevancia” muestra “15 de mayo de 2025, 5:35 PM”. En la parte inferior se muestra un botón azul prominente “+ New Diff” y un pequeño icono de engranaje. La barra de herramientas superior muestra “API Response — Checkout v2” a la izquierda, acompañado de un pequeño icono de lápiz de edición. Un control segmentado en el medio contiene dos etiquetas: “Editores” (seleccionado en azul) y “Diff” (no seleccionado). El lado derecho contiene cuatro atajos de teclado compactos etiquetados como “⌘T agregar columna”, “⌘D alternar diff” y “⌘← / ⌘→ mover foco”, con un pequeño espacio entre grupos. El panel del editor utiliza una fuente de código monoespaciada, números de línea, resaltado de sintaxis JSON, un panel azul marino oscuro y bordes redondeados delgados. El panel izquierdo se titula "source.json" con un icono de documento y un menú de tres puntos. El panel central se titula "target.json" con un icono de documento y un menú de tres puntos. El panel derecho estrecho se titula "more.json" y solo muestra el lado izquierdo del código, lo que implica desbordamiento. Cada panel de editor completo tiene una barra de estado en la parte inferior que muestra "Ln 1, Col 1", "Espacios: 2", "UTF-8", "LF" y "JSON". El contenido del código muestra la respuesta JSON al proceso de pago del pedido. Utiliza requestId "req_8f3a9b42", orderId "ord_123456", moneda USD e información de producto y envío para los auriculares inalámbricos y la bolsa de viaje. La versión de origen de la izquierda debe incluir la marca de tiempo "2025-05-21T10:24:31Z", la versión "v1", el estado "pendiente", el importe total 129,99, el precio unitario de los auriculares inalámbricos 99,99 (sin descuento), la cantidad de la bolsa de viaje 1, el precio unitario 30,00 (sin descuento), el método de envío "estándar", los días estimados 5 y la dirección "123 Market St". La versión intermedia de destino debe mostrar un marcador de diferencia en el margen izquierdo y estar resaltada con líneas de colores: rojo para las líneas eliminadas, verde para las líneas añadidas y amarillo para las líneas modificadas. Debe incluir cambios como: marca de tiempo cambiada de "2025-05-20T15:11:09Z" a "2025-05-21T10:24:31Z", versión cambiada a v2, estado cambiado de pendiente a confirmado, importe total cambiado a 139,99, precio de la unidad de auriculares inalámbricos cambiado a 109,99 con un descuento de 10,00, cantidad de estuches de viaje cambiada a 2, método de entrega cambiado a exprés y días estimados cambiados a 2. Aproximadamente 32 líneas de código numerado deben mostrarse en cada editor completo. Estilo visual: Interfaz de herramienta avanzada para desarrolladores SaaS, renderizado nítido a nivel vectorial, tema oscuro, color de acento azul cobalto, texto gris suave, capturas de pantalla de la interfaz de usuario realistas pero limpias, sin figuras humanas, sin marcas de agua y sin bordes del navegador fuera de la ventana de la aplicación. Mantenga todo el texto claro y alineado a la cuadrícula.