स्क्रीनशॉट से कोड (Screenshot to Code)

ब्राउज़र में दिख रहे किसी पेज का स्क्रीनशॉट लें और IMG2HTML उसे दोबारा बनाने वाला HTML और Tailwind CSS लिख देता है: नेविगेशन, हेडिंग, बटन, लिस्ट और कोड ब्लॉक, असली और एडिट होने लायक markup के रूप में। नीचे upload-post.com के होम पेज पर एक असली रन है, आउटपुट ठीक वैसा ही जैसा लौटा।

स्क्रीनशॉट कन्वर्ट करें Chrome से कैप्चर करें

लाइव लैंडिंग पेज का स्क्रीनशॉट

Upload-Post होम पेज का स्क्रीनशॉट: ड्रॉपडाउन वाला नेविगेशन, "Social Media API, One Call, Every Platform" हेडलाइन, सोशल नेटवर्क आइकन की पंक्तियां, curl कमांड वाली टर्मिनल विंडो और "Create your free account" बटन
इनपुट: upload-post.com का ब्राउज़र स्क्रीनशॉट (PNG, 1280 x 800)
ब्राउज़र में रेंडर किया गया जनरेट HTML: वही नेविगेशन, दो रंगों वाली हेडलाइन, सोशल आइकन, curl कमांड वाला टर्मिनल, फ़ीचर लिस्ट, call to action बटन और इंटीग्रेशन चिप्स
आउटपुट: जनरेट किया गया HTML, Chrome में 1280px चौड़ाई पर रेंडर किया गया, बिना एडिट किए। Tailwind CSS के साथ HTML की 463 लाइनें, 27 सेकंड में मिलीं।

क्या सही बना

  • नेविगेशन, ड्रॉपडाउन के तीरों, dark mode बटन, भाषा चुनने वाले मेन्यू और "Try for free" बटन के साथ।
  • दो रंगों वाली हेडलाइन, हरा काउंटर बैज, छोटे आइकन वाली फ़ीचर लिस्ट और "Create your free account" बटन।
  • curl कमांड की सभी आठ लाइनों वाली टर्मिनल विंडो, एडिट होने लायक असली टेक्स्ट के रूप में, इमेज के रूप में नहीं।
  • TikTok, Instagram, LinkedIn, YouTube, Facebook, Pinterest, Reddit, Discord, Telegram, Slack, Mastodon, WordPress, DEV और Google के लिए Font Awesome के पहचाने जाने लायक ब्रैंड आइकन।

हाथ से क्या ठीक करना होगा

  • जो ब्रैंड Font Awesome 5 में नहीं हैं, उनके लिए मिलते-जुलते आइकन लगाए गए: X पर पुरानी Twitter चिड़िया, Threads पर @ का निशान और Bluesky पर बादल दिखता है। ऑफ़िशियल SVG लगा दें।
  • यूज़र अवतार और झंडा placehold.co प्लेसहोल्डर (U1, U2, U3) बन गए।
  • आइकन दो की जगह तीन पंक्तियों में आते हैं और hero ओरिजिनल से थोड़ा नीचे है, इसलिए spacing एक बार ठीक करनी होगी।
upload-post-screenshot.html (body की शुरुआती लाइनें)
 <body class="text-slate-900">
  <!-- Navigation -->
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex items-center justify-between">
   <div class="flex items-center gap-2">
    <div class="bg-indigo-600 p-1.5 rounded-lg">
     <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      </path>
     </svg>
    </div>
    <span class="text-xl font-extrabold tracking-tight">
     Upload-Post
    </span>
   </div>
   <div class="hidden md:flex items-center space-x-8 text-sm font-medium text-slate-600">
    <a class="hover:text-indigo-600" href="#">
     Add to your SaaS
    </a>
    <div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
     Platforms
     <i class="fas fa-chevron-down text-[10px]">
     </i>
    </div>
    <div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
     Integrations
     <i class="fas fa-chevron-down text-[10px]">
पूरा जनरेट किया गया पेज खोलें (463 लाइनें)

ऐसा स्क्रीनशॉट लेना जो अच्छी तरह कन्वर्ट हो

मॉडल इमेज की हर चीज़ दोबारा बनाता है, इसलिए कैप्चर जितना साफ़ होगा, बाद में उतना कम हटाना पड़ेगा। ऊपर का Upload-Post स्क्रीनशॉट cookie बैनर बंद करने के बाद 1280 x 800 पर लिया गया था। बैनर खुला होता तो वह भी दोबारा बन जाता।

  • Chrome या Edge: DevTools खोलें (F12), Ctrl+Shift+P (Mac पर Cmd+Shift+P) दबाएं और दिख रहे हिस्से के लिए Capture screenshot चलाएं, या Elements पैनल में एक सेक्शन चुनकर Capture node screenshot। न ब्राउज़र बार, न scaling।
  • macOS: Cmd+Shift+4 दबाकर मनचाहे हिस्से पर ड्रैग करें, या एक विंडो कैप्चर करने के लिए Space दबाएं।
  • Windows: Win+Shift+S से snipping बार खुलता है। कैप्चर clipboard में जाता है और notification से सेव किया जा सकता है।

ब्राउज़र को 100% zoom और सामान्य डेस्कटॉप चौड़ाई (1280 से 1440 पिक्सल) पर रखें। पहले cookie बैनर, chat bubbles और popups बंद करें। पेज लंबा है तो hero, feature grid और footer को अलग-अलग इमेज में कैप्चर करें।

स्क्रीनशॉट से काम करते पेज तक

  1. स्क्रीनशॉट अपलोड करें। इस उदाहरण में कन्वर्ज़न को 27 सेकंड लगे।
  2. प्रीव्यू को ओरिजिनल से मिलाएं। इस रन में लेआउट, टेक्स्ट और curl कमांड सही थे, जबकि X, Threads और Bluesky के आइकन बदलने पड़े।
  3. एडिटर से सीधे शब्दों में सुधार मांगें, या कोड एडिट करें। फिर placeholders (यहां अवतार और झंडा) को अपनी फ़ाइलों से बदलें।
  4. Tailwind HTML के रूप में export करें, या पेज किसी ऐप में जा रहा है तो React या Vue पर स्विच करें।

ऐप और डिज़ाइन के स्क्रीनशॉट

स्क्रीनशॉट का किसी वेबसाइट से होना ज़रूरी नहीं। डेस्कटॉप ऐप, admin panel और ईमेल टेम्पलेट की स्क्रीन भी इसी तरह कन्वर्ट होती हैं। मोबाइल स्क्रीन और मॉकअप के लिए इमेज से कोड देखें, और डिज़ाइन टूल से export किए गए फ़्रेम के लिए Figma से HTML। चारों असली उदाहरण एक साथ इमेज से HTML कन्वर्टर पेज पर हैं।

अगर आपके पास किसी पेज का HTML पहले से है और आप बस उसे देखना चाहते हैं, तो मुफ़्त HTML व्यूअर उसे फ़ोन, टैबलेट और डेस्कटॉप चौड़ाई पर रेंडर करता है।

Screenshot to code से जुड़े सवाल

स्क्रीनशॉट किस कोड में बदलता है?

एक HTML फ़ाइल में, जिसमें Tailwind CSS utility classes, Font Awesome आइकन और इमेज वाले font से मिलता-जुलता Google Font होता है (इस साइट के चारों उदाहरणों में Inter आया)। एडिटर से इसे inline CSS, React, Vue या Angular में बदल सकते हैं।

क्या यह पेज की इमेज और behaviour भी कॉपी करता है?

नहीं। फ़ोटो, अवतार और लोगो विवरण वाले placeholders बन जाते हैं, और मेन्यू, ड्रॉपडाउन और टैब static markup के रूप में दोबारा बनते हैं। चारों उदाहरणों के आउटपुट में Tailwind CDN script के अलावा कोई JavaScript नहीं था।

क्या full-page स्क्रीनशॉट लेना चाहिए?

लंबे पेज को एक या दो स्क्रीन वाले हिस्सों में बांटें और एक-एक करके कन्वर्ट करें। इस साइट का हर उदाहरण एक स्क्रीन का कैप्चर है, और छोटे हिस्सों को ओरिजिनल से मिलाना भी जल्दी होता है।

क्या इस तरह किसी भी वेबसाइट को कन्वर्ट कर सकते हैं?

इसे उन्हीं पेज और डिज़ाइन पर इस्तेमाल करें जो आपके हैं या जिन्हें दोबारा बनाने की आपके पास अनुमति है। नतीजा स्क्रीनशॉट में दिख रही चीज़ का rebuild है, ओरिजिनल साइट का source code नहीं।