Mockup UI per strumento di diff JSON in modalità scura
Genera un mockup di interfaccia desktop in modalità scura per uno strumento di confronto codice e diff API JSON.
Istruzione
Obiettivo: Creare un mockup di interfaccia desktop in modalità scura per uno strumento di diff JSON chiamato Tilted Diffs, che mostri un confronto di risposte API intitolato API Response — Checkout v2.
Canvas: Screenshot desktop widescreen 16:10, circa 1152×768, con una finestra dell'app in stile macOS che fluttua su uno sfondo con gradiente blu scuro. Utilizzare ombre sottili, angoli arrotondati, bordi sottili e un'estetica raffinata da strumento per sviluppatori.
Layout: L'app presenta 4 aree principali: 1 barra laterale sinistra, 1 barra degli strumenti superiore che copre l'area dell'editor, 3 riquadri verticali per l'editor di codice. Il primo riquadro dell'editor è selezionato e delineato con un bagliore di messa a fuoco blu brillante. Il riquadro centrale mostra evidenziazioni diff inline colorate. Il riquadro più a destra è stretto e parzialmente visibile, come una scheda file aggiuntiva o una terza colonna di confronto.
Barra laterale sinistra: Mostrare i pulsanti semaforo di macOS in alto a sinistra: 3 cerchi, rosso, giallo, verde. Sotto il nome dell'app, includere 1 campo di ricerca con il testo segnaposto “Search diffs…” e un suggerimento per la tastiera. Sotto, mostrare esattamente 8 elementi dell'elenco dei diff salvati con piccole icone di documenti e timestamp: 1) “API Response — Checkout v2” con “Today, 10:24 AM”, evidenziato in blu come elemento selezionato; 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”. In basso, includere esattamente 1 pulsante blu ben visibile “+ New Diff” e 1 piccola icona a forma di ingranaggio.
Barra degli strumenti superiore: A sinistra, visualizzare il titolo “API Response — Checkout v2” con una minuscola icona a forma di matita per la modifica. Al centro, un controllo segmentato con esattamente 2 schede: “Editors” selezionata in blu e “Diff” inattiva. A destra, includere esattamente 4 controlli di scelta rapida compatti etichettati “⌘T add column”, “⌘D toggle diff”, “⌘← / ⌘→ move focus” e un piccolo spazio tra i gruppi.
Riquadri dell'editor: Utilizzare un font a spaziatura fissa per il codice, numeri di riga, evidenziazione della sintassi JSON, pannelli blu navy scuro e bordi arrotondati sottili. L'intestazione del riquadro sinistro è “source.json” con un'icona di documento e un menu a tre punti. L'intestazione del riquadro centrale è “target.json” con un'icona di documento e un menu a tre punti. L'intestazione del riquadro stretto a destra è “more.json” e dovrebbe mostrare solo la porzione sinistra del codice, suggerendo un overflow. Ogni riquadro dell'editor completo ha una barra di stato inferiore con “Ln 1, Col 1”, “Spaces: 2”, “UTF-8”, “LF” e “JSON”.
Contenuto del codice: Mostrare il JSON per una risposta di checkout dell'ordine. Utilizzare requestId “req_8f3a9b42”, orderId “ord_123456”, valuta USD, articoli per Wireless Headphones e Travel Case, e informazioni di spedizione. La versione sorgente a sinistra dovrebbe includere il timestamp “2025-05-21T10:24:31Z”, versione “v1”, stato “pending”, totalAmount 129.99, Wireless Headphones unitPrice 99.99 con discount null, Travel Case quantity 1, unitPrice 30.00, discount null, metodo di spedizione “standard”, estimatedDays 5 e indirizzo “123 Market St”. La versione target centrale dovrebbe mostrare marcatori di diff in una grondaia sinistra ed evidenziazioni di riga colorate: righe rimosse in rosso, righe aggiunte in verde, righe modificate in giallo. Dovrebbe includere il timestamp modificato da “2025-05-20T15:11:09Z” a “2025-05-21T10:24:31Z”, versione modificata in v2, stato modificato da pending a confirmed, totalAmount modificato a 139.99, Wireless Headphones unitPrice modificato a 109.99 e discount aggiunto come 10.00, Travel Case quantity modificato a 2 e metodo di spedizione modificato in express con estimatedDays 2. Mostrare circa 32 righe numerate in ogni editor completo.
Stile visivo: Interfaccia premium per strumenti SaaS per sviluppatori, rendering nitido simile a un vettore, tema scuro, colore d'accento blu cobalto, testo grigio tenue, screenshot dell'interfaccia utente realistico ma pulito, nessuna persona, nessuna filigrana, nessuna barra del browser al di fuori della finestra dell'app. Mantenere tutto il testo leggibile e allineato a una griglia.
Come usare questo prompt
- 1
Copia il prompt completo qui sopra.
- 2
Apri una piattaforma che supporta GPT Image 2, come YouMind, e incolla il prompt.
- 3
Cambia soggetto, stile o dettagli in base alla tua idea, poi genera.
Questo è un prompt IA gratuito della libreria di prompt di YouMind. Esplora altre migliaia di prompt immagine, tutti liberi da copiare e adattare.
Esplora altri prompt immagineAltro da GPT Image 2
Poster di viaggio minimalista della città
@Taaruk
Sfondo lettore musicale anime color menta
@あまり🖋️AI &フリー素材配布
Poster per Smartwatch in edizione limitata Cyberpunk
@あまり🖋️AI &フリー素材配布
Collage di ritratti minimalista a cinque riquadri
@Cherry 2.O
Illustrazione di moda con accessori
@Zephyra Leigh
Ritratto di moda ispirato a Cinematic Threads
@Aijaz
Tutte le categorie Immagine
01
Casi d’uso
02
Stili
Altre funzioni per prompt
Libreria IA
Ricerca prompt con IA
Lascia che l'IA cerchi tra decine di migliaia di prompt. Filtra per modello, intervallo di date e parole chiave e ordina per interazione: visualizzazioni, preferiti, condivisioni e altro.
Strumenti visivi
Da immagine a prompt
Trasforma qualsiasi foto in un prompt di immagine AI dettagliato. Il convertitore gratuito da immagine a prompt analizza composizione, stile e luce per ricreare ogni look in pochi secondi.
Altre funzioni per prompt
Pensato per i creator. Gratis per sempre.
YouMind è il copilota creativo IA scelto da creator in tutto il mondo. Ogni prompt è curato per aiutarti a creare meglio e più velocemente.