इमेज से कोड (Image to Code)

IMG2HTML को किसी इंटरफ़ेस की इमेज दें (ऐप स्क्रीन, मॉकअप, कहीं देखा हुआ कोई component) और वह उसका कोड लिख देता है: पहले Tailwind CSS वाला HTML, फिर component चाहिए तो एडिटर से React, Vue या Angular।

इस पेज का उदाहरण एक मोबाइल habit tracker स्क्रीन है। यह ऐप UI का आम नतीजा दिखाता है: ढांचा और states सही हैं, और सुधार छोटे और साफ़ हैं।

इमेज को कोड में बदलें उदाहरण देखें

मॉकअप

390 पिक्सल चौड़ाई पर रेंडर किया गया जनरेट HTML: अभिवादन, progress ring, टिक और बिना टिक वाले बॉक्स के साथ habit पंक्तियां और नीचे फ़िक्स्ड tab bar — जनरेट किया गया पेज

मोबाइल ऐप का मॉकअप

इनपुट: मोबाइल ऐप स्क्रीन का मॉकअप (PNG, 864 x 1536)

क्या सही बना

teal accent रंग में नाम के साथ अभिवादन, तारीख और गोल कोनों वाला summary कार्ड।
SVG में बना progress ring, 5 में से 3 के हिसाब से भरा हुआ, और बगल में "Keep going!" मैसेज।
सही टिक और बिना टिक वाली स्थिति के साथ पांच habit पंक्तियां, और Font Awesome आइकन वाला नीचे का tab bar, जिसमें active टैब के नीचे लाइन है।

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

हर आदत के emoji आइकन placehold.co इमेज के रूप में लिखे गए, emoji को उनका टेक्स्ट बनाकर, इसलिए वे खाली चौकोर बॉक्स दिखते हैं। emoji सीधे इस्तेमाल करें या अपने आइकन लगाएं।
tab bar स्क्रीन के नीचे फ़िक्स्ड है लेकिन लिस्ट में padding नहीं है, इसलिए वह आख़िरी आदत को ढक देता है। लिस्ट में bar की ऊंचाई जितनी bottom padding जोड़ें।

habit-app-mockup.html (body की शुरुआती लाइनें)

 <body class="text-[#0a2533] min-h-screen flex flex-col">
  <div class="max-w-md mx-auto w-full px-6 pt-12 pb-24 flex-grow">
   <!-- Header -->
   <header class="mb-8">
    <h1 class="text-4xl font-bold leading-tight">
     Good morning,
     <br/>
     <span class="text-[#006d6d]">
      Ana
     </span>
    </h1>
    <p class="text-[#708090] mt-2 text-lg">
     Tuesday, 23 September
    </p>
   </header>
   <!-- Progress Card -->
   <div class="bg-[#eef7f6] rounded-3xl p-6 mb-8 flex items-center">
    <div class="relative flex items-center justify-center w-32 h-32 mr-6">
     <svg class="w-full h-full">
      <circle class="text-[#d1e5e3]" cx="64" cy="64" fill="transparent" r="48" stroke="currentColor" stroke-width="10">
      </circle>
      <circle class="text-[#006d6d] progress-ring__circle" cx="64" cy="64" fill="transparent" r="48" stroke="currentColor" stroke-dasharray="301.59" stroke-dashoffset="120.63" stroke-linecap="round" stroke-width="10">
      </circle>
     </svg>
     <div class="absolute inset-0 flex flex-col items-center justify-center text-center">
      <span class="text-3xl font-bold text-[#006d6d]">

पूरा जनरेट किया गया पेज खोलें (191 लाइनें)

जनरेट किया गया कोड समझना

191 लाइनों की फ़ाइल इमेज को ऊपर से नीचे तक फ़ॉलो करती है: अभिवादन वाला header ब्लॉक, progress ring के लिए inline SVG वाला summary कार्ड, हर आदत के लिए एक div और टैब के लिए नीचे फ़िक्स्ड एक nav। रंग इमेज से लिए गए हैं (teal रंग Tailwind arbitrary values के रूप में लगाया गया है), और टिक वाले बॉक्स Font Awesome check वाले स्टाइल किए गए divs हैं, form inputs नहीं। अगर इन्हें toggle करना है, तो इन्हें checkbox या बटन में बदलें और अपने framework में state जोड़ें।

ऐसा कोड पाना जो सीधे ऐप में लग सके

इमेज कन्वर्ट करें और टारगेट डिवाइस की चौड़ाई पर प्रीव्यू रिव्यू करें।
वह ठीक करें जो मॉडल को पता नहीं हो सकता था: आपका आइकन सेट, कौन सा डेटा dynamic होना चाहिए, और फ़िक्स्ड bars के नीचे की spacing (यहां tab bar ने आख़िरी आदत को ढक दिया था)।
एडिटर में आउटपुट को React, Vue या Angular पर स्विच करें। markup एक component बन जाता है जिसे आप छोटे components में बांट सकते हैं, जैसे पांच बार दोहराया गया HabitRow।

Image to code के लिए अच्छे इनपुट

डिज़ाइन टूल से 1x या 2x पर export, जिसमें टेक्स्ट शार्प हो।
हर इमेज में एक स्क्रीन, ताकि हर कन्वर्ज़न से एक पेज या एक component बने।
lorem ipsum की जगह असली टेक्स्ट, क्योंकि टेक्स्ट जैसा है वैसा ही लिखा जाता है और वही आपके पास रहता है।

ब्राउज़र में दिखने वाले वेब पेज के लिए स्क्रीनशॉट से कोड पेज पर डेस्कटॉप उदाहरण है। डिज़ाइन फ़्रेम के लिए Figma से HTML गाइड में export का तरीका है। शुरू करने से पहले मॉकअप से सटीक रंग लेने के लिए मुफ़्त इमेज कलर पिकर इस्तेमाल करें।

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

Image to code किन programming languages को सपोर्ट करता है?

कन्वर्ज़न Tailwind CSS वाला HTML बनाता है। एडिटर से इसे inline CSS वाले HTML, ReactJS, VueJS या AngularJS component में बदल सकते हैं, या किसी और framework का नाम टाइप कर सकते हैं। यह पेज सिर्फ़ डिफ़ॉल्ट Tailwind HTML आउटपुट दिखाता है।

क्या यह मोबाइल ऐप डिज़ाइन के लिए काम करता है?

हां, वेब पेज के रूप में। ऊपर का habit tracker नीचे फ़िक्स्ड tab bar वाले 390 पिक्सल चौड़े पेज में बदला गया। यह वेब ऐप या prototype के लिए अच्छा बेस है। native ऐप के लिए इसे लेआउट और टेक्स्ट के reference की तरह इस्तेमाल करें।

आइकन कैसे संभाले जाते हैं?

आम इंटरफ़ेस आइकन (home, chart, check, user, settings) Font Awesome 5 से मैप किए जाते हैं। Emoji, ब्रैंड के निशान और custom आइकन वहां हमेशा नहीं होते और placeholders या मिलते-जुलते आइकन के रूप में आ सकते हैं, जैसा इस उदाहरण में हुआ।

क्या यह हाथ से बनी या कम क्वालिटी वाली इमेज पढ़ सकता है?

यह वही पढ़ता है जो एक इंसान पढ़ सके। कागज़ के wireframe की साफ़ फ़ोन फ़ोटो चलती है (इमेज से HTML पेज पर इसका उदाहरण है)। धुंधला टेक्स्ट, बहुत छोटे लेबल और भारी JPEG artifacts से शब्द अंदाज़े से आते हैं, इसलिए टेक्स्ट चेक करें।