दस्तावेज़3D वेबसाइट बिल्डरबिल्डर अवलोकन

बिल्डर अवलोकन

3D वेबसाइट बिल्डर पाइपलाइन कैसे काम करती है — प्रॉम्प्ट से प्रकाशित साइट तक।

बिल्डर क्या बनाता है

3D बिल्डर में प्रत्येक जनरेशन एक प्रॉम्प्ट से पांच डिलिवरेबल्स उत्पन्न करती है:

1.AI हीरो इमेज — एक सिनेमैटिक, उच्च-रिज़ॉल्यूशन स्थिर छवि जिसका उपयोग साइट के विज़ुअल फाउंडेशन के रूप में किया जाता है
2.मोशन वीडियो — एक वीओ 3.1 वीडियो क्लिप जो बैकग्राउंड एनिमेशन को परिभाषित करती है
3.स्क्रॉल फ्रेम्स — स्क्रॉल-सिंक्ड प्लेबैक के लिए वीडियो से निकाले गए ~200 WebP फ्रेम्स
4.वेबसाइट HTML — सेक्शन, नेविगेशन, फुटर, स्क्रॉल इंजन और SEO मेटा के साथ पूर्ण रिस्पॉन्सिव साइट
5.लाइव यूआरएल*.draftly.space पर आपके सबडोमेन पर सेकंडों में प्रकाशित

ये सभी पांच एक ही वर्कफ़्लो में बनाए जाते हैं। आपको मैन्युअल रूप से कुछ भी संयोजित करने की आवश्यकता नहीं है।

5-चरण जनरेशन पाइपलाइन

ड्राफ्टली एक विशाल AI कॉल के बजाय एक खंडित पाइपलाइन का उपयोग करता है। यह गुणवत्ता और पूर्णता की गारंटी देता है:

चरण 0 — योजना (~5 सेकंड) AI आपके प्रॉम्प्ट को पढ़ता है और एक साइट ब्लूप्रिंट आउटपुट करता है: ब्रांड नाम, टैगलाइन, हीरो हेडलाइन, हीरो CTA, रंग मूड, फ़ॉन्ट मूड, 3–7 अनुभाग, और 3–5 विशिष्ट विभेदक (आपके व्यवसाय के बारे में अद्वितीय तथ्य, सामान्य कॉपी नहीं)।

चरण 1 — शेल (~20 सेकंड) नेविगेशन बार, हीरो सेक्शन, CSS वैरिएबल, स्क्रॉल फ़्रेम इंजन, और अनुभागों और फ़ुटर के लिए प्लेसहोल्डर एंकर जेनरेट करता है।

चरण 2 — अनुभाग (समानांतर, ~30 सेकंड) प्रत्येक अनुभाग (विशेषताएं, मूल्य निर्धारण, प्रशंसापत्र, आदि) एक अलग समानांतर AI कॉल में जेनरेट होता है। 6-अनुभाग वाली साइट में 3-अनुभाग वाली साइट जितना ही समय लगता है।

चरण 3 — फ़ुटर (~10 सेकंड) फ़ुटर को अलग से जेनरेट करता है ताकि वह हमेशा मौजूद रहे। फ़ुटर कभी भी अनुभाग बजट का हिस्सा नहीं होता है और इसे कभी भी छोटा नहीं किया जा सकता है।

चरण 4 — असेंबल (~5 सेकंड) सभी टुकड़ों को एक साथ जोड़ा जाता है। SEO मेटा टैग, ओपन ग्राफ़ टैग, JSON-LD संरचित डेटा, H1 गारंटी, और कैनोनिकल URL इंजेक्ट किए जाते हैं।

बिल्डर इंटरफ़ेस

बायां पैनल — चैट और नियंत्रण - नीचे चैट इनपुट: अपनी साइट का वर्णन करें या संपादन का अनुरोध करें - ऊपर सिस्टम लॉग: समय और स्थिति के साथ प्रत्येक जनरेशन चरण - एक्शन बटन: पूर्णस्क्रीन पूर्वावलोकन, टेक्स्ट संपादित करें, रंग बदलें, लाइव प्रकाशित करें - टैब बार: लॉग, इमेज, वीडियो, फ़्रेम, कोड, इतिहास, बिज़नेस OS

दायां पैनल — लाइव पूर्वावलोकन - आपकी जेनरेट की गई साइट एक iframe में स्क्रॉल एनीमेशन सक्रिय होने के साथ प्रस्तुत की गई - इनलाइन संपादित करने के लिए किसी भी टेक्स्ट पर क्लिक करें (मुफ़्त, शून्य क्रेडिट) - टूलबार: पहलू अनुपात टॉगल (16:9 / 9:16), देखें / संपादित करें / संपादन मोड, पूर्णस्क्रीन, पुनः जेनरेट करें

हेडर बार - प्रोजेक्ट का नाम — नाम बदलने के लिए क्लिक करें - सेव स्थिति पिल — वास्तविक समय में सहेजा गया / सहेजा जा रहा है... / काम कर रहा है... दिखाता है - क्रेडिट ट्रैकर — इस बिलिंग चक्र के लिए शेष क्रेडिट

ऑटो-सेव और रिकवरी

ड्राफ्टली आपके प्रोजेक्ट को दो परतों में लगातार ऑटो-सेव करता है:

स्थानीय (तत्काल) — परिवर्तन हर 250ms पर आपके ब्राउज़र के स्थानीय स्टोरेज में सहेजे जाते हैं
क्लाउड (Firestore) — हर 20–60 सेकंड में सर्वर से सिंक किया जाता है

हेडर में सेव स्थिति संकेतक: - सहेजा गया — सभी परिवर्तन क्लाउड से सिंक किए गए - सहेजा जा रहा है... — क्लाउड सिंक प्रगति पर है - काम कर रहा है... — जनरेशन प्रगति पर है

यदि आप जनरेशन के बीच में टैब बंद कर देते हैं, तो प्रोजेक्ट को फिर से खोलने पर ऑटो-रिज्यूम बैनर दिखाई देता है — जनरेशन वहीं से शुरू करने के लिए उस पर क्लिक करें जहां से छोड़ा गया था। आपका काम कभी नहीं खोता।

बिल्डर टैब की व्याख्या

लॉग — लाइव जनरेशन फ़ीड। प्रत्येक पाइपलाइन चरण, समय और चेतावनियों को देखें जैसे वे होते हैं।

इमेज — आपकी हीरो स्टिल। कच्ची इमेज डाउनलोड करें या एक नई इमेज जनरेशन ट्रिगर करें।

वीडियो — मोशन वीडियो। MP4 डाउनलोड करें या विभिन्न गुणवत्ता सेटिंग्स के साथ पुनः जेनरेट करें।

फ़्रेम — वीडियो से निकाले गए ~200 स्क्रॉल फ़्रेम। ये लंबन स्क्रॉल प्रभाव को शक्ति प्रदान करते हैं।

कोड — आपकी जेनरेट की गई साइट का कच्चा HTML। इसे कॉपी करें, ZIP के रूप में डाउनलोड करें, या GitHub पर पुश करें।

इतिहास — संस्करण चेकपॉइंट। प्रत्येक पुनः जनरेशन या प्रमुख संपादन एक पुनर्स्थापना बिंदु बनाता है। किसी भी संस्करण पर वापस जाने के लिए क्लिक करें — मुफ़्त, कोई क्रेडिट नहीं।

बिज़नेस OS — आपके ब्रांड के लिए AI बिज़नेस इंटेलिजेंस डैशबोर्ड (प्रो+)। इसमें सामग्री सुझाव, एनालिटिक्स संदर्भ और बहुत कुछ शामिल है।

एक नए टैब में लाइव पूर्वावलोकन

स्टूडियो हेडर में पूर्वावलोकन पर या पूर्वावलोकन टूलबार में नया टैब पर क्लिक करके अपनी प्रकाशित-गुणवत्ता वाली साइट को एक अलग ब्राउज़र टैब में खोलें — बिल्डर क्रोम के बिना — जबकि आप स्टूडियो में संपादन जारी रखते हैं।

AI HTML साइटें आपके स्क्रॉल फ़्रेम और वीडियो के साथ एक इन-मेमोरी पूर्वावलोकन URL से लोड होती हैं।

प्रीसेट प्रोजेक्ट /presets/live/[projectId] खोलते हैं जिसमें आपके फ़्रेम ओपनर से पोस्टमैसेज किए जाते हैं।

यदि पॉपअप ब्लॉक है, तो draftly.space के लिए पॉप-अप की अनुमति दें और पुनः प्रयास करें। ऑटोसेव मूल टैब में जारी रहता है।

जनरेशन प्रगति और समय अनुमान

हीरो इमेज, वीडियो, फ़्रेम एक्सट्रैक्शन और वेबसाइट UI जनरेशन के दौरान, पूर्वावलोकन एक प्रगति कार्ड दिखाता है जिसमें:

वर्तमान चरण (जैसे "सामग्री और अनुभाग लिख रहा है...")
सेकंड या मिनटों में अनुमानित शेष समय
चरण के समय (या एक्सट्रैक्शन के दौरान फ़्रेम गणना) से जुड़ा एक प्रगति बार

विशिष्ट कुल: हीरो ~2–3 मिनट, वीडियो ~3–4 मिनट, फ़्रेम ~1–2 मिनट, वेबसाइट UI ~2–3 मिनट।

यदि कोई कार्य अनुमान से अधिक हो जाता है, तो कार्ड "सामान्य से अधिक समय लग रहा है" दिखाता है — API कॉल तब तक जारी रहता है जब तक वह पूरा नहीं हो जाता। जल्दी रोकने के लिए जनरेशन रद्द करें का उपयोग करें।

बिल्डर चैट — संपादन बनाम सहायता

स्टूडियो चैट आपकी वेबसाइट और ड्राफ्टली बिल्डर तक सीमित है — सामान्य AI चैट नहीं।

साइट संपादन (प्रत्यक्ष कमांड): "हीरो हेडलाइन को ... में बदलें", "FAQ अनुभाग जोड़ें", "गोल्ड एक्सेंट के साथ गहरा थीम"।

कैसे करें प्रश्न के तत्काल उत्तर मिलते हैं: "मैं कैसे प्रकाशित करूं?", "स्क्रॉल मोड कैसे काम करता है?", "मेरी साइट 4 वीडियो के साथ धीमी क्यों है?"

विषय से हटकर संदेश (मौसम, होमवर्क, असंबंधित कोडिंग) को गाइड और डॉक्यूमेंटेशन के लिंक के साथ रीडायरेक्ट किया जाता है।

पूर्ण वॉकथ्रू के लिए गाइड (हेडर) खोलें या प्रश्न प्रारूप का उपयोग करके चैट में पूछें।

मोशन कम करें (पहुंच-योग्यता)

स्टूडियो UI एनिमेशन को कम करने के लिए पूर्वावलोकन टूलबार में मोशन कम करें पर क्लिक करें। वही प्राथमिकता सेटिंग्स → दिखावट → एनिमेशन कम करें में संग्रहीत है।

जेनरेट की गई साइटों में prefers-reduced-motion CSS फ़ॉलबैक शामिल होते हैं ताकि OS पहुंच-योग्यता सेटिंग्स वाले विज़िटर मोशन-हैवी प्रभावों के बजाय स्थिर खुलासे देख सकें।