Same.new logo
AI कोड जनरेटर

Same.new

लाइव साइट के UI को तेज़ी से एडिटेबल React में क्लोन करें, बशर्ते आप सरल लेआउट का उपयोग करें

हमारा रिपोर्ट कार्ड

फुल टियर लिस्ट →
C

यह सिर्फ एक काम करता है - URL से किसी साइट के UI को एडिटेबल React में क्लोन करना - और इसे अच्छे से करता है। ऐप बिल्डर के रूप में यह C टियर है, क्योंकि यह वास्तव में ऐप बिल्डर नहीं है।

विजुअल UI क्लोनिंग फ्रंटएंड स्कैफोल्डिंग डिज़ाइन रेफरेंस बिल्ड्स

Same.new क्या है?

Same.new एक वेब टूल है जो किसी मौजूदा साइट की विजुअल लेयर को कोड में कॉपी करने के काम आता है। आप एक पब्लिक URL पेस्ट करते हैं, यह पेज का विश्लेषण करता है, और एक संपादन योग्य React फ्रंटएंड जेनरेट करता है जिसमें Tailwind स्टाइलिंग होती है, जो मूल लेआउट, रंगों, टाइपोग्राफी और स्पेसिंग से मेल खाने की कोशिश करती है।

Same.new homepage Same.new होमपेज स्नैपशॉट

इसका मूल विचार यह है कि फ्रंट-एंड लेआउट का पुनर्निर्माण स्वचालित होना चाहिए, न कि स्क्रीनशॉट या याददाश्त के आधार पर हाथों से बनाया जाना चाहिए। यह इसलिए महत्वपूर्ण है क्योंकि Same.new एक पूर्ण ऐप बिल्डर बनने की कोशिश नहीं कर रहा है: इसकी उपयोगिता इसके तेज़ फर्स्ट ड्राफ्ट में है, जबकि असली चुनौती यह है कि बैकएंड लॉजिक, स्थिरता और दीर्घकालिक विकास के लिए आपको अभी भी एक अलग वर्कफ़्लो की आवश्यकता होगी।

आप Same.new के साथ क्या बना सकते हैं?

ईमानदारी से कहें तो यह उन स्टेटिक या अधिकतर स्टेटिक फ्रंटएंड्स के लिए सबसे उपयुक्त है जहाँ ऐप लॉजिक की तुलना में विजुअल स्ट्रक्चर अधिक मायने रखता है।

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

ये इसलिए काम करते हैं क्योंकि Same.new विज़िबल पेज स्ट्रक्चर को पढ़ने और उसे उपयोगी React और Tailwind स्कैफोल्डिंग में बदलने में सबसे सक्षम है। यदि आपका लक्ष्य प्रेरणा से संपादन योग्य UI तक तेज़ी से पहुँचना है, तो यह बहुत सारे दोहराव वाले सेटअप काम को कम कर सकता है।

इसकी सीमा वहाँ शुरू होती है जहाँ टिकाऊ ऐप लॉजिक की आवश्यकता होती है। यह प्रोडक्शन ऑथ फ्लो, डेटाबेस-आधारित उत्पादों, जटिल स्टेटफुल इंटरैक्शन, या बड़े कोडबेस जिन्हें आप कई AI संपादन के माध्यम से विकसित करने की योजना बना रहे हैं, के लिए सही जगह नहीं है। इसका उपयोग पहले विजुअल पास के लिए करें, फिर प्रोजेक्ट को एक अधिक स्थिर डेवलपमेंट एनवायरमेंट में ले जाएँ।

उपयोगकर्ता क्या कह रहे हैं

कम्युनिटी की राय एक जैसी है: लोग शुरुआती विजुअल क्लोनिंग की गति को पसंद करते हैं, लेकिन लंबे संपादन चक्रों (edit cycles) के लिए इस पर पूरी तरह भरोसा नहीं करते।

  • यह साफ-सुथरे पब्लिक URLs से स्टाइलिंग, स्पेसिंग और पेज स्ट्रक्चर को आश्चर्यजनक रूप से अच्छी तरह से कैप्चर कर सकता है
  • जेनरेट किया गया पहला React और Tailwind आउटपुट अक्सर एक स्टार्टर स्कैफोल्ड के रूप में उपयोगी लगता है
  • टेक्स्ट, रंगों या सेक्शन बदलने के लिए सरल प्रॉम्प्ट संपादन तेज़ और सुविधाजनक हो सकते हैं
  • कोड को लोकल वर्कफ़्लो में एक्सपोर्ट करना इसके उपयोग का सबसे सुरक्षित तरीका माना जाता है

शिकायतें तब शुरू होती हैं जब उपयोगकर्ता उत्पाद के भीतर बार-बार बदलाव (iterate) करते हैं। सबसे गंभीर अनुभव विनाशकारी रीराइट्स के बारे में हैं, जिसमें रिपोर्ट है कि साधारण लेआउट बदलावों ने 1,500 या उससे अधिक लाइनों के काम कर रहे कोड को मिटा दिया। उपयोगकर्ताओं ने Same.dev से Same.new ट्रांज़िशन को लेकर भी निराशा जताई है, यह कहते हुए कि बदलाव के दौरान कुछ पेड वर्कस्पेस या एक्सेस पाथ अविश्वसनीय हो गए। प्राइसिंग को लेकर भी निराशा देखी गई है, मुख्य रूप से इसलिए क्योंकि जब बड़े जनरेशन विफल हो जाते हैं या कई बार प्रयास करना पड़ता है, तो टोकन की खपत बहुत अधिक महसूस होती है।

यह प्लेटफॉर्म विफलता - जहाँ एक साधारण सेक्शन रीऑर्डरिंग ने 1500+ लाइनों के काम कर रहे कोड को नष्ट कर दिया - पूरी तरह से अस्वीकार्य है…

हमारा विश्लेषण: प्रशंसा और शिकायतें एक-दूसरे की पूरक हैं। Same.new एक तेज़ विजुअल इंपोर्टर के रूप में सबसे अच्छा है, न कि उस जगह के रूप में जिस पर आप कई राउंड के AI संपादन के दौरान बढ़ते उत्पाद को सुरक्षित रखने के लिए भरोसा कर सकें।

वास्तव में इसकी लागत क्या है

प्लानकीमतआपको क्या मिलता हैकिसके लिए सर्वश्रेष्ठ है
Free$0सीमित टोकन और URL-आधारित विजुअल क्लोनिंगआउटपुट क्वालिटी की टेस्टिंग के लिए
Pro$10/mo2 मिलियन टोकन, और अतिरिक्त टोकन $10 प्रति 2 मिलियन परनियमित क्लोनिंग और UI इटरेशन के लिए

व्यवहार में, महत्वपूर्ण बात केवल कीमत नहीं है, बल्कि टोकन का उपयोग कैसे होता है, यह है। जब आप बड़े सेक्शन को फिर से जेनरेट करते हैं, विफल संपादन को दोबारा प्रयास करते हैं, या असिस्टेंट को जटिल कंपोनेंट्स को फिर से लिखने के लिए प्रॉम्प्ट करते रहते हैं, तो लागत तेज़ी से बढ़ सकती है। इस कारण Same.new त्वरित क्लोन के लिए सस्ता लगता है लेकिन लंबे सत्रों के लिए बहुत कम अनुमानित (unpredictable) हो जाता है।

यदि आप इसका उपयोग करते हैं, तो लंबे इन-ऐप डेवलपमेंट चक्रों के बजाय एक्सपोर्ट-हैवी वर्कफ़्लो के लिए बजट बनाएं। जो उपयोगकर्ता सबसे खुश दिखते हैं, वे पेड प्लान को एक मज़बूत फर्स्ट ड्राफ्ट प्राप्त करने के तरीके के रूप में देखते हैं, और फिर बार-बार संपादन टोकन खर्च करने से पहले लोकल डेवलपमेंट की ओर बढ़ जाते हैं।

  1. जैसे ही शुरुआती क्लोन पर्याप्त अच्छा हो जाए, उसे एक्सपोर्ट करें।
  2. बड़े लेआउट पर बार-बार पूरे सेक्शन को रीराइट करने से बचें।
  3. मुख्य वर्शन पर और अधिक टोकन खर्च करने से पहले डुप्लीकेट पर जोखिम भरे बदलावों का परीक्षण करें।

Same.new के सामान्य विकल्प क्या हैं?

सबसे अच्छा विकल्प इस बात पर निर्भर करता है कि आप विजुअल क्लोनिंग, पूर्ण ऐप लॉजिक या एक सुरक्षित कोडिंग वर्कफ़्लो में से किसे अधिक महत्व देते हैं।

यदि आप चाहते हैं…इसे देखेंक्यों
ऑथ और डेटा के साथ एक नो-कोड बिजनेस ऐपSoftrस्ट्रक्चर्ड डेटा और परमिशन्स के साथ वास्तविक इंटरनल टूल्स और पोर्टल्स के लिए बेहतर
आधुनिक फ्रंटएंड के लिए बेहतर AI-जेनरेटेड UI कोडv0कंपोनेंट जनरेशन और इटरेटिव फ्रंट-एंड काम के लिए अधिक स्थापित
ब्राउज़र-आधारित पूर्ण बिल्ड-एंड-शिप लूपBoltस्टेटिक UI लेयर से आगे निर्माण करने के लिए अधिक उपयुक्त
वास्तविक कोडबेस में सीधे AI की मददCursorएक नाजुक होस्टेड क्लोन वर्कस्पेस के बजाय लोकल डेवलपमेंट के अंदर एजेंट-स्टाइल एडिटिंग देता है

Same.new के विकल्पों का मूल्यांकन करते समय, आपका चुनाव इस बात पर निर्भर करता है कि आपको प्रोडक्शन-ग्रेड कोड के कितने करीब पहुँचने की आवश्यकता है। यदि आप बिना कोई कोड लिखे एक कार्यात्मक बिजनेस एप्लीकेशन या इंटरनल पोर्टल बनाना चाहते हैं, तो Softr एक बहुत अधिक स्थिर रास्ता है। यह आउट-ऑफ-द-बॉक्स इन-बिल्ट ऑथेंटिकेशन, यूजर परमिशन्स और स्ट्रक्चर्ड डेटा कनेक्शन प्रदान करता है, जबकि Same.new मुख्य रूप से एक विजुअल सरफेस जेनरेट करने पर केंद्रित है। जो लोग हाई-फिडेलिटी फ्रंटएंड कंपोनेंट्स और इटरेटिव डिज़ाइन कंट्रोल चाहते हैं, उनके लिए v0 एक अत्यधिक स्थापित विकल्प है जो क्लीन, मॉडर्न UI कोड बनाने में उत्कृष्ट है। यदि आपका लक्ष्य स्टेटिक इंटरफेस से आगे बढ़कर एक पूर्ण ब्राउज़र-आधारित बिल्ड-एंड-शिप साइकिल है, तो Bolt आपके ब्राउज़र से ही फुल-स्टैक एप्लीकेशन लॉजिक चलाने के लिए एक अधिक व्यापक वातावरण प्रदान करता है।

वे डेवलपर्स जो अपने मौजूदा डेवलपमेंट एनवायरमेंट्स में काम करना पसंद करते हैं, उन्हें Cursor एक कहीं अधिक बेहतर विकल्प लगेगा। एक नाजुक वेब वर्कस्पेस से जूझने के बजाय, Cursor सीधे आपके लोकल कोडबेस में एजेंट-स्टाइल AI यूटिलिटीज को एम्बेड करता है। यह आपको अपनी फाइलों और वर्जन हिस्ट्री पर पूर्ण नियंत्रण रखते हुए AI सहायता के साथ कोड को एडिट, रिफैक्टर और शिप करने की अनुमति देता है। सही टूल का चयन अंततः इस बात पर निर्भर करता है कि आपको एक त्वरित विजुअल मॉकअप चाहिए या वास्तविक सॉफ्टवेयर विकसित करने के लिए एक विश्वसनीय वातावरण।

अपने डेवलपमेंट की ज़रूरतों को ध्यान से तौलें ताकि आप उस प्लेटफॉर्म को चुन सकें जो आपके वर्कफ़्लो के लिए सबसे उपयुक्त हो।

Same.new किसके लिए है (और किसके लिए नहीं)

Same.new उन बिल्डर्स के लिए एक सीमित लेकिन वास्तविक सिफारिश है जो किसी लाइव साइट की विजुअल संरचना को लेना चाहते हैं, उसे तेज़ी से React में बदलना चाहते हैं, और फिर कहीं और काम जारी रखना चाहते हैं। यदि आप हमारी best-vibe-coding-tools-for-websites रैंकिंग में विकल्पों की तुलना कर रहे हैं, तो यह एक पूर्ण प्रोडक्ट स्टैक के बजाय फ्रंट-एंड प्रेरणा, स्कैफोल्डिंग और रेफरेंस-आधारित UI ड्राफ्ट के लिए एक विशेषज्ञ टूल के रूप में फिट बैठता है।

इसे छोड़ दें यदि आपको स्थिर लॉन्ग-सेशन एडिटिंग, बैकएंड लॉजिक, या वास्तविक बिजनेस ऐप चलाने की जगह चाहिए। यदि आपके प्रोजेक्ट को यूजर्स, परमिशन्स और स्ट्रक्चर्ड डेटा की आवश्यकता है, तो Softr अधिक सुरक्षित विकल्प है। सही पाठक को यहाँ से Same.new को एक विजुअल शॉर्टकट के रूप में देखना चाहिए, न कि एक पूर्ण बिल्ड होम के रूप में।

स्कोरकार्ड

संक्षिप्त विवरण

क्या बेहतरीन है

  • यह एक पब्लिक URL से लेआउट, टाइपोग्राफी, रंग और स्टाइलिंग खींचता है, जिससे कोड में रेफरेंस डिज़ाइन को फिर से बनाना तेज़ हो जाता है।
  • यह एडिटेबल React और Tailwind कोड आउटपुट करता है, ताकि डेवलपर्स पहले ड्राफ्ट को तेज़ी से सामान्य लोकल वर्कफ़्लो में ले जा सकें।
  • प्रॉम्प्ट-आधारित एडिटिंग उपयोगकर्ताओं को हर कंपोनेंट को शुरू से मैन्युअल रूप से फिर से लिखे बिना सेक्शन, स्पेसिंग और रंगों को बदलने की सुविधा देती है।
  • फोर्किंग और डुप्लीकेशन एक ही क्लोन किए गए स्टार्टिंग पॉइंट से वैकल्पिक विजुअल दिशाओं का परीक्षण करना आसान बनाते हैं।

कहाँ कमी है

  • उपयोगकर्ताओं ने विनाशकारी संपादन की रिपोर्ट की है जहाँ छोटे प्रॉम्प्ट बदलावों ने पहले से काम कर रहे कोड की 1,500 से अधिक लाइनों को मिटा दिया।
  • यह जटिल नेस्टेड लेआउट और इंटरैक्टिव स्टेट्स के साथ संघर्ष करता है, जिससे अक्सर एक मानव डेवलपर के लिए काफी सफाई का काम बच जाता है।
  • Same.dev से Same.new पर जाने से कथित तौर पर सक्रिय प्रोजेक्ट्स में बाधा आई और अस्थायी रूप से अकाउंट या प्रोजेक्ट एक्सेस प्रभावित हुआ।
  • टोकन उपयोग का अनुमान लगाना कठिन हो सकता है, खासकर जब बड़े कंपोनेंट्स को फिर से जनरेट किया जा रहा हो या विफल संपादन को कई बार फिर से प्रयास किया जा रहा हो।

लागत का विवरण

प्राइसिंग प्लान

हमारे द्वारा ट्रैक किए गए सार्वजनिक प्राइसिंग डेटा से सूचीबद्ध। क्रेडिट राशि, सीमाएं और शामिल उपयोग तब दिखाए जाते हैं जब वे प्लान विवरण का हिस्सा होते हैं।

Free

$0
  • बेसिक UI टेस्टिंग के लिए सीमित टोकन
  • लाइव वेबसाइट URLs से लेआउट और स्टाइल क्लोन करें
  • भुगतान करने से पहले क्रॉल क्वालिटी का मूल्यांकन करने के लिए अच्छा है
सबसे ज्यादा चुने गए

Pro

$10/mo
  • इसमें जनरेशन उपयोग के लिए 2 मिलियन टोकन शामिल हैं
  • अतिरिक्त टोकन की लागत प्रति अतिरिक्त 2 मिलियन $10 है
  • बार-बार क्लोनिंग और संवादात्मक एडिटिंग (conversational editing) के लिए बनाया गया

अक्सर पूछे जाने वाले प्रश्न

क्या आप Same.new के साथ एक वास्तविक ऐप बना सकते हैं?

आप एक ऐप का फ्रंट-एंड शेल बना सकते हैं, लेकिन Same.new मुख्य रूप से विजुअल क्लोनिंग और UI स्कैफोल्डिंग के लिए है। यह एक पूर्ण प्रोडक्शन एप्लीकेशन के लिए आवश्यक बैकएंड, ऑथ (auth), या डेटा लेयर प्रदान नहीं करता है।

Same.new किसी वेबसाइट को क्लोन कैसे करता है?

आप एक पब्लिक लाइव URL पेस्ट करते हैं, और Same.new पेज की दृश्य संरचना (structure) और स्टाइलिंग का विश्लेषण करता है। फिर यह संपादन योग्य React और Tailwind कोड जेनरेट करता है जो उस डिज़ाइन से मेल खाने का प्रयास करता है।

क्या Same.new का उपयोग करना निःशुल्क है?

हाँ। Same.new में सीमित टेस्टिंग के लिए $0 का एक फ्री प्लान है, और एक प्रो प्लान है जिसकी कीमत $10 प्रति माह है जिसमें 2 मिलियन टोकन शामिल हैं। अतिरिक्त टोकन की कीमत $10 प्रति 2 मिलियन है।

Same.new की सबसे बड़ी कमी क्या है?

मुख्य जोखिम बार-बार संपादन (iterative edits) के दौरान अस्थिरता है। कम्युनिटी रिपोर्ट्स के अनुसार, प्रॉम्प्ट में छोटे बदलावों से काम कर रहे कोड के बड़े हिस्से टूट सकते हैं या डिलीट हो सकते हैं, यही कारण है कि कई उपयोगकर्ता जल्दी एक्सपोर्ट कर लेते हैं और स्थानीय स्तर (locally) पर काम जारी रखते हैं।