Mockup de interfaz de herramienta de comparación JSON en modo oscuro
Genera un mockup de interfaz de escritorio pulido en modo oscuro para una herramienta de comparación de API JSON y comparación de código.
Instrucción
Objetivo: Crear un mockup de interfaz de aplicación de escritorio en modo oscuro para una herramienta de comparación JSON llamada Tilted Diffs, que muestre una comparación de respuesta de API titulada 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. Utiliza sombras sutiles, esquinas redondeadas, bordes delgados y una estética pulida de herramienta para desarrolladores.
Diseño: La aplicación tiene 4 regiones principales: 1 barra lateral izquierda, 1 barra de herramientas superior que abarca el área del editor, 3 paneles verticales de editor de código. El primer panel del editor está seleccionado y delineado con un brillo de enfoque azul brillante. El panel central muestra resaltados de diferencias en línea a color. El panel más a la derecha es estrecho y parcialmente visible, como una pestaña de archivo adicional o una tercera columna de comparación.
Barra lateral izquierda: Muestra los botones de semáforo de macOS en la parte superior izquierda: 3 círculos, rojo, amarillo, verde. Debajo del nombre de la aplicación, incluye 1 campo de búsqueda con el texto de marcador de posición “Search diffs…” y una sugerencia de teclado. Debajo, muestra exactamente 8 elementos de lista de comparaciones guardadas con pequeños iconos de documento y marcas de tiempo: 1) “API Response — Checkout v2” con “Today, 10:24 AM”, resaltado en azul como el elemento seleccionado; 2) “User Profile — Public API” con “Yesterday, 4:18 PM”; 3) “Orders Endpoint — v1 vs v2” con “May 20, 2025, 9:14 AM”; 4) “Product Catalog — EU Region” con “May 19, 2025, 2:47 PM”; 5) “Auth Response — SSO” con “May 18, 2025, 11:03 AM”; 6) “Billing Summary — Q2” con “May 17, 2025, 3:22 PM”; 7) “Webhook Payload — Stripe” con “May 16, 2025, 10:11 AM”; 8) “Search Results — Relevance” con “May 15, 2025, 5:35 PM”. En la parte inferior, incluye exactamente 1 botón azul prominente “+ New Diff” y 1 icono de engranaje pequeño.
Barra de herramientas superior: A la izquierda, muestra el título “API Response — Checkout v2” con un pequeño icono de lápiz de edición. Centra un control segmentado con exactamente 2 pestañas: “Editors” seleccionado en azul y “Diff” inactivo. A la derecha, incluye exactamente 4 controles de acceso directo compactos etiquetados como “⌘T add column”, “⌘D toggle diff”, “⌘← / ⌘→ move focus” y un pequeño espacio entre grupos.
Paneles del editor: Utiliza una fuente de código monoespaciada, números de línea, resaltado de sintaxis JSON, paneles azul marino oscuro y bordes redondeados delgados. El encabezado del panel izquierdo es “source.json” con un icono de documento y un menú de tres puntos. El encabezado del panel central es “target.json” con un icono de documento y un menú de tres puntos. El encabezado del panel derecho estrecho es “more.json” y debe mostrar solo la porción izquierda del código, implicando desbordamiento. Cada panel de editor completo tiene una barra de estado inferior con “Ln 1, Col 1”, “Spaces: 2”, “UTF-8”, “LF” y “JSON”.
Contenido del código: Muestra JSON para una respuesta de pago de pedido. Usa requestId “req_8f3a9b42”, orderId “ord_123456”, moneda USD, artículos para Wireless Headphones y Travel Case, e información de envío. La versión fuente de la izquierda debe incluir la marca de tiempo “2025-05-21T10:24:31Z”, versión “v1”, estado “pending”, totalAmount 129.99, Wireless Headphones unitPrice 99.99 con discount null, Travel Case quantity 1, unitPrice 30.00, discount null, método de envío “standard”, estimatedDays 5 y dirección “123 Market St”. La versión objetivo central debe mostrar marcadores de diferencia en un margen izquierdo y resaltados de fila a color: filas eliminadas en rojo, filas añadidas en verde, filas cambiadas en amarillo. Debe incluir la marca de tiempo cambiada de “2025-05-20T15:11:09Z” a “2025-05-21T10:24:31Z”, versión cambiada a v2, estado cambiado de pending a confirmed, totalAmount cambiado a 139.99, Wireless Headphones unitPrice cambiado a 109.99 y discount añadido como 10.00, Travel Case quantity cambiado a 2, y método de envío cambiado a express con estimatedDays 2. Muestra aproximadamente 32 líneas numeradas en cada editor completo.
Estilo visual: Interfaz de herramienta para desarrolladores SaaS premium, renderizado nítido tipo vectorial, tema oscuro, color de acento azul cobalto, texto gris apagado, captura de pantalla de interfaz de usuario realista pero limpia, sin personas, sin marcas de agua, sin elementos de navegador fuera de la ventana de la aplicación. Mantén todo el texto legible y alineado a una cuadrícula.
Cómo usar este prompt
- 1
Copia el prompt completo de arriba.
- 2
Abre una plataforma compatible con GPT Image 2, como YouMind, y pega el prompt.
- 3
Cambia el tema, el estilo o los detalles según tu idea y luego genera.
Este es un prompt de IA gratuito de la biblioteca de prompts de YouMind. Explora miles de prompts de imagen más, todos gratis para copiar y adaptar.
Explorar más prompts de imagenMás de GPT Image 2
Póster de viaje minimalista de ciudad
@Taaruk
Fondo de pantalla de reproductor de música anime color menta
@あまり🖋️AI &フリー素材配布
Póster de Smartwatch Edición Limitada Cyberpunk
@あまり🖋️AI &フリー素材配布
Collage de retratos minimalista de cinco marcos
@Cherry 2.O
Ilustración de moda con accesorios
@Zephyra Leigh
Retrato de moda inspirado en la estética de Threads
@Aijaz
Todas las categorías de Imagen
01
Casos de uso
Más funciones de prompts
Biblioteca de IA
Búsqueda de prompts con IA
Que la IA busque entre decenas de miles de prompts. Filtrá por modelo, rango de fechas y palabras clave, y ordená por interacción: vistas, guardados, reposts y más.
Herramientas de visión
Imagen a prompt
Convierte cualquier foto en un prompt de imagen IA detallado. El conversor gratuito de imagen a prompt analiza composición, estilo e iluminación para recrear cualquier estética en segundos.
Otras funciones de prompts
Por modelo
Herramientas IA
Creado para creadores. Gratis para siempre.
YouMind es el copiloto creativo con IA en el que confían creadores de todo el mundo. Cada prompt está curado para ayudarte a crear mejor y más rápido.