डार्क JSON डिफ टूल UI मॉकअप

JSON API डिफ और कोड तुलना टूल के लिए एक बेहतरीन डार्क-मोड डेस्कटॉप UI मॉकअप तैयार करता है।

प्रॉम्प्ट
लक्ष्य: Tilted Diffs नामक JSON डिफ टूल के लिए एक डार्क-मोड डेस्कटॉप ऐप UI मॉकअप बनाएं, जिसमें API Response — Checkout v2 शीर्षक वाली API रिस्पॉन्स तुलना दिखाई गई हो। कैनवास: 16:10 वाइडस्क्रीन डेस्कटॉप स्क्रीनशॉट, लगभग 1152×768, जिसमें गहरे नीले रंग के ग्रेडिएंट बैकग्राउंड पर macOS-शैली की ऐप विंडो तैर रही हो। सूक्ष्म छाया, गोल कोने, पतले बॉर्डर और एक पॉलिश किए गए डेवलपर-टूल सौंदर्य का उपयोग करें। लेआउट: ऐप में 4 मुख्य क्षेत्र हैं: 1 बायां साइडबार, 1 शीर्ष टूलबार जो एडिटर क्षेत्र में फैला है, 3 वर्टिकल कोड एडिटर पेन। पहला एडिटर पेन सिलेक्टेड है और उसे एक चमकीले नीले फोकस ग्लो के साथ आउटलाइन किया गया है। बीच वाला पेन रंगीन इनलाइन डिफ हाइलाइट्स दिखाता है। सबसे दाहिना पेन संकरा और आंशिक रूप से दिखाई दे रहा है, जैसे कि कोई अतिरिक्त फ़ाइल टैब या तीसरा तुलना कॉलम हो। बायां साइडबार: ऊपर बाईं ओर macOS ट्रैफिक-लाइट बटन दिखाएं: 3 गोले, लाल, पीला, हरा। ऐप नाम के नीचे, “Search diffs…” प्लेसहोल्डर टेक्स्ट और एक कीबोर्ड संकेत के साथ 1 सर्च फ़ील्ड शामिल करें। इसके नीचे छोटे डॉक्यूमेंट आइकन और टाइमस्टैम्प के साथ ठीक 8 सेव किए गए डिफ लिस्ट आइटम दिखाएं: 1) “API Response — Checkout v2” जिसके साथ “Today, 10:24 AM” हो, जिसे सिलेक्टेड आइटम के रूप में नीले रंग में हाइलाइट किया गया हो; 2) “User Profile — Public API” जिसके साथ “Yesterday, 4:18 PM” हो; 3) “Orders Endpoint — v1 vs v2” जिसके साथ “May 20, 2025, 9:14 AM” हो; 4) “Product Catalog — EU Region” जिसके साथ “May 19, 2025, 2:47 PM” हो; 5) “Auth Response — SSO” जिसके साथ “May 18, 2025, 11:03 AM” हो; 6) “Billing Summary — Q2” जिसके साथ “May 17, 2025, 3:22 PM” हो; 7) “Webhook Payload — Stripe” जिसके साथ “May 16, 2025, 10:11 AM” हो; 8) “Search Results — Relevance” जिसके साथ “May 15, 2025, 5:35 PM” हो। नीचे की ओर ठीक 1 प्रमुख नीला “+ New Diff” बटन और 1 छोटा गियर आइकन शामिल करें। शीर्ष टूलबार: बाईं ओर, एक छोटे एडिट पेंसिल आइकन के साथ “API Response — Checkout v2” शीर्षक प्रदर्शित करें। केंद्र में ठीक 2 टैब वाला एक सेगमेंटेड कंट्रोल रखें: “Editors” जिसे नीले रंग में सिलेक्ट किया गया हो और “Diff” जो इनएक्टिव हो। दाईं ओर ठीक 4 कॉम्पैक्ट शॉर्टकट कंट्रोल शामिल करें जिन्हें “⌘T add column”, “⌘D toggle diff”, “⌘← / ⌘→ move focus” लेबल किया गया हो और समूहों के बीच एक छोटा स्पेसिंग गैप हो। एडिटर पेन: मोनोस्पेस कोड फ़ॉन्ट, लाइन नंबर, JSON सिंटैक्स हाइलाइटिंग, गहरे नीले रंग के पैनल और पतले गोल बॉर्डर का उपयोग करें। बाएं पेन का हेडर “source.json” है जिसमें एक डॉक्यूमेंट आइकन और तीन-डॉट मेनू है। बीच वाले पेन का हेडर “target.json” है जिसमें एक डॉक्यूमेंट आइकन और तीन-डॉट मेनू है। संकरे दाएं पेन का हेडर “more.json” है और इसमें कोड का केवल बायां हिस्सा दिखना चाहिए, जो ओवरफ़्लो का संकेत दे। प्रत्येक पूर्ण एडिटर पेन में नीचे एक स्टेटस बार है जिसमें “Ln 1, Col 1”, “Spaces: 2”, “UTF-8”, “LF”, और “JSON” लिखा है। कोड कंटेंट: ऑर्डर चेकआउट रिस्पॉन्स के लिए JSON दिखाएं। requestId “req_8f3a9b42”, orderId “ord_123456”, करेंसी USD, वायरलेस हेडफ़ोन और ट्रैवल केस के लिए आइटम, और शिपिंग जानकारी का उपयोग करें। बाएं सोर्स वर्ज़न में टाइमस्टैम्प “2025-05-21T10:24:31Z”, वर्ज़न “v1”, स्टेटस “pending”, totalAmount 129.99, वायरलेस हेडफ़ोन unitPrice 99.99 जिसके साथ डिस्काउंट null हो, ट्रैवल केस की मात्रा 1, unitPrice 30.00, डिस्काउंट null, शिपिंग विधि “standard”, estimatedDays 5, और पता “123 Market St” शामिल होना चाहिए। बीच वाले टारगेट वर्ज़न में बाएं गटर में डिफ मार्कर और रंगीन रो हाइलाइट्स दिखने चाहिए: लाल रंग में हटाई गई पंक्तियाँ, हरे रंग में जोड़ी गई पंक्तियाँ, पीले रंग में बदली गई पंक्तियाँ। इसमें टाइमस्टैम्प “2025-05-20T15:11:09Z” से बदलकर “2025-05-21T10:24:31Z” होना चाहिए, वर्ज़न v2 में बदल गया हो, स्टेटस pending से confirmed में बदल गया हो, totalAmount 139.99 में बदल गया हो, वायरलेस हेडफ़ोन unitPrice 109.99 में बदल गया हो और डिस्काउंट 10.00 के रूप में जोड़ा गया हो, ट्रैवल केस की मात्रा 2 में बदल गई हो, और शिपिंग विधि estimatedDays 2 के साथ express में बदल गई हो। प्रत्येक पूर्ण एडिटर में लगभग 32 क्रमांकित लाइनें दिखाएं। विजुअल स्टाइल: प्रीमियम SaaS डेवलपर टूल इंटरफ़ेस, स्पष्ट वेक्टर-जैसा रेंडरिंग, डार्क थीम, कोबाल्ट-ब्लू एक्सेंट कलर, म्यूट ग्रे टेक्स्ट, यथार्थवादी लेकिन साफ UI स्क्रीनशॉट, कोई लोग नहीं, कोई वॉटरमार्क नहीं, ऐप विंडो के बाहर कोई ब्राउज़र क्रोम नहीं। सभी टेक्स्ट को स्पष्ट रखें और ग्रिड के अनुसार अलाइन करें।

इस प्रॉम्प्ट का उपयोग कैसे करें

  1. 1

    ऊपर दिया पूरा प्रॉम्प्ट कॉपी करें।

  2. 2

    GPT Image 2 को सपोर्ट करने वाला कोई प्लैटफ़ॉर्म खोलें, जैसे YouMind, और प्रॉम्प्ट पेस्ट करें।

  3. 3

    अपने आइडिया के हिसाब से विषय, स्टाइल या डिटेल बदलें, फिर जेनरेट करें।

यह YouMind की प्रॉम्प्ट लाइब्रेरी का एक मुफ़्त AI प्रॉम्प्ट है। हज़ारों और इमेज प्रॉम्प्ट देखें, सभी कॉपी और बदलाव के लिए मुफ़्त।

और इमेज प्रॉम्प्ट देखें

और prompt features

AI लाइब्रेरी

AI से प्रॉम्प्ट खोजें

AI से हज़ारों प्रॉम्प्ट में खोज कराएँ। मॉडल, समय अवधि और कीवर्ड्स से फ़िल्टर करें और व्यू, बुकमार्क, रिपोस्ट जैसी एंगेजमेंट पर सॉर्ट करें।

विज़न टूल्स

इमेज से प्रॉम्प्ट

किसी भी फ़ोटो को विस्तृत AI इमेज प्रॉम्प्ट में बदलें। मुफ़्त Image to Prompt कन्वर्टर कंपोज़िशन, स्टाइल और लाइटिंग का विश्लेषण करता है, ताकि आप सेकंडों में वही लुक दोबारा बना सकें।

Creators के लिए बना। हमेशा मुफ़्त।

YouMind दुनिया भर के creators द्वारा भरोसा किया जाने वाला AI creative copilot है। हर prompt आपको बेहतर और तेज़ बनाने में मदद के लिए चुना गया है।

और prompts देखें