Maquette d'interface pour outil de diff JSON en mode sombre
Génère une maquette d'interface de bureau élégante en mode sombre pour un outil de comparaison de code et d'API JSON.
Consigne
Objectif : Créer une maquette d'interface d'application de bureau en mode sombre pour un outil de diff JSON nommé Tilted Diffs, affichant une comparaison de réponse API intitulée API Response — Checkout v2.
Zone de travail : Capture d'écran de bureau panoramique 16:10, environ 1152×768, avec une fenêtre d'application de style macOS flottant sur un fond dégradé bleu foncé. Utilisez des ombres subtiles, des coins arrondis, des bordures fines et une esthétique d'outil de développement soignée.
Disposition : L'application comporte 4 zones principales : 1 barre latérale gauche, 1 barre d'outils supérieure couvrant la zone d'édition, 3 volets d'éditeur de code verticaux. Le premier volet d'éditeur est sélectionné et souligné par une lueur de focus bleu vif. Le volet central affiche des surbrillances de diff en ligne colorées. Le volet le plus à droite est étroit et partiellement visible, comme un onglet de fichier supplémentaire ou une troisième colonne de comparaison.
Barre latérale gauche : Affichez les boutons de contrôle macOS en haut à gauche : 3 cercles, rouge, jaune, vert. Sous le nom de l'application, incluez 1 champ de recherche avec le texte indicatif « Rechercher des diffs… » et un raccourci clavier. En dessous, affichez exactement 8 éléments de liste de diffs enregistrés avec de petites icônes de document et des horodatages : 1) « API Response — Checkout v2 » avec « Aujourd'hui, 10:24 », mis en surbrillance en bleu comme élément sélectionné ; 2) « User Profile — Public API » avec « Hier, 16:18 » ; 3) « Orders Endpoint — v1 vs v2 » avec « 20 mai 2025, 09:14 » ; 4) « Product Catalog — EU Region » avec « 19 mai 2025, 14:47 » ; 5) « Auth Response — SSO » avec « 18 mai 2025, 11:03 » ; 6) « Billing Summary — Q2 » avec « 17 mai 2025, 15:22 » ; 7) « Webhook Payload — Stripe » avec « 16 mai 2025, 10:11 » ; 8) « Search Results — Relevance » avec « 15 mai 2025, 17:35 ». En bas, incluez exactement 1 bouton bleu proéminent « + Nouveau diff » et 1 petite icône d'engrenage.
Barre d'outils supérieure : À gauche, affichez le titre « API Response — Checkout v2 » avec une minuscule icône de crayon pour l'édition. Centrez un contrôle segmenté avec exactement 2 onglets : « Éditeurs » sélectionné en bleu et « Diff » inactif. À droite, incluez exactement 4 contrôles de raccourcis compacts étiquetés « ⌘T ajouter colonne », « ⌘D basculer diff », « ⌘← / ⌘→ déplacer focus » et un petit espacement entre les groupes.
Volets d'éditeur : Utilisez une police de code à chasse fixe, des numéros de ligne, une coloration syntaxique JSON, des panneaux bleu marine foncé et des bordures arrondies fines. L'en-tête du volet gauche est « source.json » avec une icône de document et un menu à trois points. L'en-tête du volet central est « target.json » avec une icône de document et un menu à trois points. L'en-tête du volet étroit de droite est « more.json » et ne doit montrer que la partie gauche du code, suggérant un dépassement. Chaque volet d'éditeur complet possède une barre d'état inférieure avec « Ln 1, Col 1 », « Espaces : 2 », « UTF-8 », « LF » et « JSON ».
Contenu du code : Affichez le JSON pour une réponse de commande. Utilisez requestId « req_8f3a9b42 », orderId « ord_123456 », devise USD, articles pour Wireless Headphones et Travel Case, et les informations d'expédition. La version source de gauche doit inclure l'horodatage « 2025-05-21T10:24:31Z », version « v1 », statut « pending », totalAmount 129.99, Wireless Headphones unitPrice 99.99 avec discount null, Travel Case quantité 1, unitPrice 30.00, discount null, méthode d'expédition « standard », estimatedDays 5, et adresse « 123 Market St ». La version cible centrale doit montrer des marqueurs de diff dans une gouttière à gauche et des surbrillances de lignes colorées : lignes supprimées en rouge, lignes ajoutées en vert, lignes modifiées en jaune. Elle doit inclure l'horodatage modifié de « 2025-05-20T15:11:09Z » à « 2025-05-21T10:24:31Z », version modifiée en v2, statut modifié de pending à confirmed, totalAmount modifié à 139.99, Wireless Headphones unitPrice modifié à 109.99 et discount ajouté à 10.00, Travel Case quantité modifiée à 2, et méthode d'expédition modifiée en express avec estimatedDays 2. Affichez environ 32 lignes numérotées dans chaque éditeur complet.
Style visuel : Interface d'outil de développement SaaS haut de gamme, rendu net type vectoriel, thème sombre, couleur d'accent bleu cobalt, texte gris atténué, capture d'écran d'interface utilisateur réaliste mais propre, pas de personnes, pas de filigrane, pas de chrome de navigateur en dehors de la fenêtre de l'application. Gardez tout le texte lisible et aligné sur une grille.
Comment utiliser ce prompt
- 1
Copiez le prompt complet ci-dessus.
- 2
Ouvrez une plateforme compatible avec GPT Image 2, comme YouMind, et collez le prompt.
- 3
Modifiez le sujet, le style ou les détails selon votre idée, puis générez.
Voici un prompt IA gratuit de la bibliothèque de prompts de YouMind. Découvrez des milliers d'autres prompts images, tous libres de copie et d'adaptation.
Découvrir plus de prompts imagesPlus de GPT Image 2
Affiche de voyage minimaliste sur le thème de la ville
@Taaruk
Fond d'écran de lecteur de musique anime menthe
@あまり🖋️AI &フリー素材配布
Affiche de montre connectée en édition limitée Cyberpunk
@あまり🖋️AI &フリー素材配布
Collage de portraits minimaliste à cinq cadres
@Cherry 2.O
Illustration de mode avec accessoires
@Zephyra Leigh
Portrait de mode inspiré par l'esthétique de Threads
@Aijaz
Toutes les catégories Images
01
Cas d’utilisation
02
Styles
Plus de fonctions de prompts
Bibliothèque IA
Recherche de prompts par IA
Laissez l'IA chercher parmi des dizaines de milliers de prompts. Filtrez par modèle, plage de dates et mots-clés, puis triez par engagement : vues, favoris, partages et plus.
Outils visuels
Image vers prompt
Transformez toute photo en prompt d'image IA détaillé. Le convertisseur image vers prompt gratuit analyse la composition, le style et la lumière pour recréer n'importe quel rendu en quelques secondes.
Autres fonctions de prompts
Conçu pour les créateurs. Gratuit pour toujours.
YouMind est le copilote créatif IA adopté par des créateurs du monde entier. Chaque prompt est sélectionné pour vous aider à créer mieux, plus vite.