सामग्री
डिज़ाइन पुनर्निर्माता — विकासाधीनएक पुनर्निर्मित डिज़ाइन से क्या निकलता हैआप इसे कैसे उपयोग करेंगेप्रेरणा, न कि अनुकरणRekreate इसे क्यों बना रहा हैअक्सर पूछे जाने वाले प्रश्नडिज़ाइनर और फ्रंट-एंड डेवलपर्स हर दिन इंटरफेस को रिवर्स-इंजीनियर करते हैं: स्क्रीनशॉट से स्पेसिंग मापना, टाइप स्केल का अनुमान लगाना, किसी घटक को फिर से बनाना यह देखने के लिए कि यह कैसे व्यवहार करता है। डिज़ाइन को फिर से बनाना इसे एक कदम में बदल देता है — स्क्रीनशॉट या URL डालें और डिज़ाइन टोकन, घटक ब्रेकडाउन और कार्यशील फ्रंट-एंड कोड प्राप्त करें।
यह टूल Rekreate में विकासाधीन है। नीचे यह दिखाया गया है कि यह क्या उत्पन्न करेगा और हमारे मौजूदा टूल्स आपके लिए आज क्या कर सकते हैं।
- इनपुट: स्क्रीनशॉट, Figma फ्रेम या URL। आउटपुट: टोकन, घटक, कोड।
- रंग पैलेट, टाइप स्केल, स्पेसिंग रिदम, रेडियस और शैडोज़ को वेरिएबल्स के रूप में निकाला गया।
- घटक-स्तरीय आउटपुट — एक कार्ड, एक नेव, एक प्राइसिंग टेबल — एक फ्लैट मार्कअप ब्लॉक नहीं।
- विकासाधीन।
/makeमें इमेज टूल्स अभी लाइव हैं।
डिज़ाइन पुनर्निर्माता — विकासाधीन
इसे एक इंटरफेस दें और इसके पीछे का सिस्टम वापस पाएं: एक रंग पैलेट नामित टोकन के साथ, एक टाइप स्केल, स्पेसिंग रिदम, कोने के रेडियस और ऊंचाई, फिर प्रत्येक घटक को HTML और CSS में पुनर्निर्मित करें समझदार क्लास नामों और उत्तरदायी व्यवहार के साथ।
मुद्दा किसी के उत्पाद की नकल करना नहीं है। यह उस सवाल का जवाब देना है जो हर डिज़ाइनर एक स्क्रीनशॉट से पूछता है — यह वास्तव में कैसे बनाया गया है? — सेकंड में, एक दोपहर के बजाय।
यह टूल अभी लाइव नहीं है। एक मुफ्त खाता बनाएं और जैसे ही यह खुलेगा हम आपको ऐप में सूचित करेंगे।
आज आप क्या कर सकते हैं
Rekreate में पहले से क्या काम करता है:
- एक फोटो को फिर से बनाएं — एक दृश्य, मॉकअप या चित्रण को अपनी शैली में पुनर्निर्मित करें।
- एक लोगो को फिर से बनाएं — पारदर्शी पृष्ठभूमि के साथ ब्रांड एसेट्स को साफ करें।
- Ideogram — इंटरफेस-शैली ग्राफिक्स जहां टेक्स्ट पठनीय होना चाहिए।
आज कोड के लिए, एक समर्पित स्क्रीनशॉट-टू-कोड टूल का उपयोग करें; जब पुनर्निर्माता खुलेगा तो यहां वापस आएं।
एक पुनर्निर्मित डिज़ाइन से क्या निकलता है
| लेयर | योजना आउटपुट |
|---|---|
| रंग | CSS वेरिएबल्स के रूप में भूमिकाओं के साथ पैलेट — सतह, इंक, म्यूटेड, एक्सेंट, सेमांटिक — लाइट और डार्क |
| टाइप | फॉन्ट फैमिली, उपयोग में स्केल, वेट्स, लाइन हाइट्स और लेटर-स्पेसिंग |
| स्पेसिंग | मूलभूत रिदम (4/8pt या अन्य) प्लस कंटेनर चौड़ाई और गटर |
| घटक | बटन, कार्ड, नेव, फॉर्म, टेबल — प्रत्येक को अलग-अलग HTML और CSS के रूप में |
| स्टेट्स | जहां अनुमान लगाया जा सकता है वहां होवर, फोकस, डिसेबल्ड और एरर |
| एक्सेसिबिलिटी नोट्स | कॉन्ट्रास्ट वार्निंग्स और गायब फोकस स्टेट्स को फ्लैग किया गया, चुपचाप कॉपी नहीं किया गया |
आप इसे कैसे उपयोग करेंगे
संदर्भ डालें
एक उत्पाद का स्क्रीनशॉट जिसे आप पसंद करते हैं, एक Figma फ्रेम, या एक लाइव URL।
स्कोप चुनें
पूरा स्क्रीन, या एक घटक जिसे आपको समझने की आवश्यकता है — प्राइसिंग कार्ड, साइडबार, खाली स्टेट।
सिस्टम की समीक्षा करें
पहले टोकन: क्या पैलेट सही है, क्या टाइप स्केल मेल खाता है, क्या स्पेसिंग ग्रिड पर है? मॉडल ने जो गलत अनुमान लगाया है उसे ठीक करें।
कोड लें
घटकों को अपने प्रोजेक्ट में कॉपी करें, या उन्हें एक संदर्भ कार्यान्वयन के रूप में रखें जब तक आपकी टीम असली चीज़ का निर्माण करती है।
प्रेरणा, न कि अनुकरण
इंटरफेस पैटर्न साझा शिल्प हैं। किसी के पास एक कार्ड का स्वामित्व नहीं है जिसमें एक शीर्षक, एक बॉडी और एक बटन है; उद्योग ने उन पैटर्नों पर सहमति व्यक्त की क्योंकि वे काम करते हैं।
जो स्वामित्व में है: एक उत्पाद की दृश्य पहचान — इसका लोगो, चित्रण शैली, कस्टम टाइपफेस, इमेजरी और कॉपी — साथ ही कोई भी स्वामित्व कोड। एक पुनर्निर्मित डिज़ाइन को आपको यांत्रिकी सिखाना चाहिए और फिर इसे आपके अपने ब्रांड में तैयार करना चाहिए।
यदि आपकी स्क्रीन एक प्रतिस्पर्धी की स्क्रीन की तरह दिखती है जिसमें एक अलग लोगो है, तो आपने उनकी पहचान की नकल की है, उनकी संरचना से नहीं सीखा है। टोकन को एक प्रारंभिक बिंदु के रूप में उपयोग करें और उन्हें अपने सिस्टम की ओर ले जाएं।
Rekreate इसे क्यों बना रहा है
हमारा पूरा उत्पाद एक विचार है: ऐसी चीज़ से शुरुआत करें जो पहले से काम करती है, फिर इसे अपना बनाएं। यह वायरल वीडियो से शुरू हुआ, विज्ञापनों, तस्वीरों और आवाज़ों में चला गया, और डिज़ाइन इंटरफेस पर लागू वही प्रक्रिया है।
यह /make परिवार को टीमों के लिए पूरा करता है: विज्ञापन को फिर से बनाएं, लैंडिंग पेज को फिर से बनाएं, इसके पीछे के डिज़ाइन सिस्टम को फिर से बनाएं — सब कुछ एक ही जगह पर, उस भाषा में जिसमें आप काम करते हैं।
वेबसाइट पुनर्निर्माता और ऐप पुनर्निर्माता का अनुसरण करें यदि आप पड़ोसी टूल्स चाहते हैं।
अक्सर पूछे जाने वाले प्रश्न
क्या AI स्क्रीनशॉट से UI डिज़ाइन को फिर से बना सकता है?
हाँ — विज़न मॉडल एक छवि से पैलेट, टाइप स्केल और लेआउट निकाल सकते हैं और घटकों को कोड में पुनर्निर्मित कर सकते हैं। Rekreate का डिज़ाइन पुनर्निर्माता विकासाधीन है; आज हमारे लाइव टूल्स इमेज, लोगो और वीडियो को कवर करते हैं।
क्या यह मुझे Figma फाइलें देगा?
योजना आउटपुट डिज़ाइन टोकन और फ्रंट-एंड कोड है। टोकन अधिकांश डिज़ाइन टूल्स में साफ-सुथरे आयात होते हैं, लेकिन टूल का उद्देश्य कार्यशील कोड तक पहुंचना है।
क्या किसी के UI को फिर से बनाना कानूनी है?
लेआउट और इंटरैक्शन पैटर्न ब्रांड एसेट्स की तरह संरक्षित नहीं हैं। उनके लोगो, चित्रण, कस्टम फॉन्ट्स, कॉपी या स्वामित्व कोड का पुन: उपयोग न करें — संरचना लें, अपनी पहचान लाएं।
क्या यह डार्क मोड को संभालता है?
हाँ, यह योजना है: टोकन थीम के प्रति निकाले जाते हैं ताकि पुनर्निर्मित घटक दोनों आधारों पर काम करें न कि एक पर हार्ड-कोडेड।
यह कब लॉन्च होगा?
कोई सार्वजनिक तारीख नहीं। एक मुफ्त खाता बनाएं और नए /make टूल्स ऐप में खुलने पर दिखाई देंगे।
इस बीच मुझे क्या उपयोग करना चाहिए?
Rekreate का इमेज पुनर्निर्माता दृश्य के लिए और लोगो पुनर्निर्माता ब्रांड एसेट्स के लिए, साथ ही मार्कअप के लिए एक समर्पित स्क्रीनशॉट-टू-कोड टूल।
Rekreate के साथ अपना अगला वायरल वीडियो बनाएं
एक सिद्ध शॉर्ट-फॉर्म वीडियो खोजें, इसे अपनी स्क्रिप्ट, अवतार और आवाज़ के साथ पुनः बनाएं, और Seedance, Kling और Veo के साथ एक ही वर्कस्पेस में दृश्य जनरेट करें।
मुफ्त ट्रायल शुरू करें →