Maqueta de interfaz de usuario para herramienta de comparación JSON en modo oscuro
Genera una maqueta de interfaz de usuario de escritorio en modo oscuro pulida para una herramienta de comparación de código y API JSON.
Instrucción
Objetivo: Crear una maqueta de interfaz de usuario 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 al estilo macOS flotando sobre un fondo degradado azul oscuro. Utilice 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 de editor de código verticales. 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 de colores. 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: Muestre 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, incluya 1 campo de búsqueda con el texto de marcador de posición “Search diffs…” y una sugerencia de teclado. Debajo, muestre exactamente 8 elementos de lista de diferencias 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, incluya exactamente 1 botón azul prominente “+ New Diff” y 1 icono de engranaje pequeño.
Barra de herramientas superior: A la izquierda, muestre el título “API Response — Checkout v2” con un pequeño icono de lápiz de edición. Centre un control segmentado con exactamente 2 pestañas: “Editors” seleccionado en azul y “Diff” inactivo. A la derecha, incluya 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: Utilice 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 parte izquierda del código, lo que implica 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: Muestre JSON para una respuesta de pago de pedido. Utilice 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 de origen 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 de destino central debe mostrar marcadores de diferencia en un margen izquierdo y resaltados de fila de colores: filas rojas eliminadas, filas verdes añadidas, filas amarillas cambiadas. 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. Muestre 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 cromo de navegador fuera de la ventana de la aplicación. Mantenga 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
02
Estilos
Más funciones de prompts
Biblioteca de IA
Búsqueda de prompts con IA
Deja que la IA busque entre decenas de miles de prompts. Filtra por modelo, rango de fechas y palabras clave, y ordena por interacción: visualizaciones, guardados, compartidos 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.