HTML to React & Figma - वेबसाइट को React कॉम्पोनेंट्स में बदलने वाला Chrome एक्सटेंशन

• वेब पेज के HTML को React कोड या Figma डिज़ाइन में बदलने वाला टूल
  • उपयोगकर्ता मौजूदा डिज़ाइन इम्पोर्ट करके उसे React कोड में बदल सकते हैं, या Figma में एडिट किए जा सकने वाले डिज़ाइन में बदल सकते हैं
  • AI का उपयोग करके मौजूदा डिज़ाइन को कस्टमाइज़ और संशोधित करने की सुविधा देता है
• प्रमुख फीचर्स
  • पसंद आने वाले मौजूदा डिज़ाइन को इम्पोर्ट करके उसे तुरंत ऐसे React कोड में बदला जा सकता है जिसे अपने प्रोजेक्ट में इस्तेमाल किया जा सके
  • मौजूदा डिज़ाइन को इम्पोर्ट करके उस पर एडिट और काम किया जा सकता है, इसलिए शुरू से शुरुआत करने की ज़रूरत नहीं होती
  • AI की मदद से डिज़ाइन को कस्टमाइज़ और संशोधित किया जा सकता है

[charychary]

समीक्षा
पूरी साइट को एक बार में कॉपी करना मुश्किल था.
कॉपी किए जाने वाले कंपोनेंट जितने बड़े होते गए, एरर आने की संभावना उतनी बढ़ती गई, इसलिए header, main, article, side, footer जैसे मुख्य कंपोनेंट्स को अलग-अलग कॉपी करना पड़ा और container layout डेवलपर को खुद बनाना पड़ा.

स्टाइलिंग फीचर
डिफ़ॉल्ट inline तरीके में हर कंपोनेंट के लिए style टैग बनाया जाता था या हर HTML पर style attribute दिया जाता था, लेकिन डेवलपर के नज़रिए से मेंटेनेंस के लिए यह कोड JS से कम अलग और बिखरा हुआ लगा.
Tailwindcss में बदलने वाला फीचर वाकई बहुत अच्छा था.

कंपोनेंट विभाजन फीचर
है तो, लेकिन लगभग नहीं के बराबर समझना चाहिए. इसके अलावा CSS की बेहिसाब मात्रा, और काफी सारे ऐसे कंपोनेंट्स जिन्हें reusable होना चाहिए था, वे भी वैसे ही HTML के रूप में इस्तेमाल हुए.
इसलिए JSX कोड हजारों लाइनों तक निकल आया.

AI अपडेट
AI चैट के जरिए design concept बदला जा सकता था. जितना सोचा था उतना बहुत नया कुछ नहीं निकला, लेकिन लगभग हर 3 बार में 1 बार ताज़ा डिज़ाइन मिला.
लेकिन यह paid है, इसलिए ज़्यादा बार इस्तेमाल नहीं कर पाया.

स्टैटिक फ़ाइल जनरेशन
यह अच्छी बात लगी कि icons को इकट्ठा करने के लिए image sprite तकनीक का इस्तेमाल किया गया, जिसमें SVG या PNG को एक फ़ाइल में समेकित किया जाता है.

निष्कर्ष
मौजूदा generative AI की तरह,
यह ऐसा कोड बनाता है जो "कुल मिलाकर ठीक है, लेकिन details की कमी के कारण डेवलपर को हाथ से सुधारना पड़ता है".
खासकर कंपोनेंट विभाजन फीचर की कमी की वजह से, अभी के लिए यह सिर्फ "layout और static file extractor" जितना ही उपयोगी लगता है.
पहले GPT जैसे AI से business logic नहीं, बल्कि design CSS के layout से जुड़ी समस्याओं को संभालना थोड़ा मुश्किल था, लेकिन यह उस पहलू को कितना बेहतर कर सकता है, इसे थोड़ा और इस्तेमाल करके देखना होगा.

[iolothebard]

HTML को React में convert (?) क्यों करना चाहिए?

[yangeok]

UI आइडिया चुराना..

[bobross0]

कमाल है...

[roxie]

यह बहुत अच्छी तरह काम करता है..

[kws730]

आह, यह तो बहुत बढ़िया है

[GN⁺]

Hacker News राय

• असली प्रोडक्ट बहुत आकर्षक है। सिर्फ बुनियादी टेस्ट से भी पता चलता है कि यह सामान्य LLM मॉडल्स की तुलना में कहीं अधिक परिष्कृत डिज़ाइन बनाता है। मैं इसे इस हफ्ते प्रोटोटाइपिंग के लिए इस्तेमाल करने वाला हूँ

  • जिज्ञासा है कि स्टैंडर्ड LLM से इसमें क्या बदला गया है। कल्पना की जा सकती है कि guardrails सेट किए गए हों, components दिए गए हों, या अच्छे वेबसाइट्स के corpus पर fine-tune किया गया हो

• यह टूल पेज के sections को साफ़ और प्रिंट करने योग्य HTML में पाने का अच्छा तरीका है। उदाहरण के लिए, Claude web UI पूरी chat history प्रिंट नहीं कर पाता और सिर्फ स्क्रीन पर दिखने वाला हिस्सा ही प्रिंट करता है

  • इस टूल का उपयोग करके आप दो chat bubbles के बीच किसी बिंदु को चुनकर पूरी history चुन सकते हैं
  • मैंने भी इसी तरह की functionality वाला एक साधारण Chrome extension बनाया था, लेकिन उसके output की quality कमज़ोर थी

• जिज्ञासा है कि इस तरह के टूल के output पर copyright कैसे लागू होगा। चूंकि सभी websites में license शामिल नहीं होता, इसलिए यह सामान्य LLM से भी अधिक अस्पष्ट हो सकता है

• बहुत उपयोगी browser extension है। मुझे खास तौर पर यह पसंद है कि यह styles को TailwindCSS में बदल सकता है। बहुत चतुर है

• यह टूल सच में शानदार है। मैंने इसे लगभग 10 websites पर आज़माया, और यह लगभग 80% website elements पर अच्छी तरह काम करता है

  • मैंने इसे अपनी site पर भी आज़माया, और यह सबसे महत्वपूर्ण components को पूरी तरह replicate कर पाया
  • कुछ sites selection की अनुमति नहीं देतीं। selection mode चालू करने और element पर mouse ले जाने पर भी कुछ भी select नहीं होता। इससे मैं यह सोचने लगा कि अपनी site को replication से कैसे बचाया जाए
  • शानदार काम। मैं इसे लंबे समय तक इस्तेमाल करूँगा

• बढ़िया टूल है। अफ़सोस है कि आजकल frontend development इतना जटिल हो गया है कि ऐसे टूल की ज़रूरत पड़ती है। पुराने view-source और एकल style.css वाले दिन याद आते हैं

• मैंने Hacker News लोगो का font देखा, और वह अलग है

  • मूल: Verdana, Geneva, sans-serif
  • आपका: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
  • अच्छा है, लेकिन समझ नहीं आता कि ऐसा क्यों हो रहा है

• अच्छा काम। जानना चाहता हूँ कि क्या इसे Firefox के साथ compatible बनाने की कोई योजना है

• सोच रहा हूँ कि क्या यह मेरे Framer page पर भी काम करेगा ताकि मैं उसे self-host कर सकूँ

• वेबसाइट का HTML और CSS हासिल करने का बहुत उपयोगी तरीका है