मैंने Figma को एक बार भी खोले बिना एक लैंडिंग पेज बनाया। मैंने मुख्य रूप से Claude Design और Claude Code टूल का उपयोग किया। प्रोडक्शन की अवधि एक सप्ताह थी, जिसमें AI के साथ कुल 300 से अधिक बार आदान-प्रदान हुआ।
उन 300 इंटरैक्शन से मैंने यह सीखा कि AI की बदौलत बनाने की प्रक्रिया काफी आसान हो गई है, लेकिन अंतिम गुणवत्ता की ऊपरी सीमा अभी भी मानवीय निर्णय से तय होती है। AI उम्मीदवार प्रस्तुत करने तक का सारा काम करता है। वहाँ से, इसे इच्छित टोन तक ले जाना उस व्यक्ति का काम था जो गुणवत्ता का निर्णय करता है और इसे संशोधन के लिए वापस भेजता है।
मैंने Design Harness के लिए डॉक्यूमेंटेशन साइट बनाई, जो एक ऐसा फ्रेमवर्क है जो डिज़ाइन को चार स्तरों पर संभालता है: बाधाएँ, संदर्भ, सत्यापन और मूल्यांकन। चूंकि यह डिज़ाइन के बारे में एक साइट है, इसलिए मेरा एक उप-विषय यह भी था कि मैं सतही विवरणों और इंटरैक्शन के साथ कितनी दूर तक जा सकता हूँ।
https://x.com/kgsi/status/2072829167285207077
मैं उन चरणों को देखूंगा जो मैंने उठाए और जहाँ मैंने वे 300 इंटरैक्शन खर्च किए, जिसमें वास्तविक स्क्रीन कैप्चर भी शामिल हैं।
मैंने Claude Design और Claude Code का अलग-अलग उपयोग कैसे किया
मैंने इस LP को दो मुख्य टूल के बीच भूमिकाओं को विभाजित करके बनाया। Claude Design एक संवादात्मक डिज़ाइन जनरेशन टूल है जहाँ आप चैट के माध्यम से निर्देश देते हैं और एक लाइव HTML प्रोटोटाइप तुरंत दिखाई देता है। Claude Code एक कोडिंग एजेंट है जो टर्मिनल में चलता है और सीधे कोडबेस को लागू करता है।
कार्यों का विभाजन स्पष्ट था: Claude Design शुरुआती दौर में प्रोटोटाइप को आकार देने में बहुत अच्छा है। इस बार, मैंने डिज़ाइन नीति और वायरफ्रेम को सारांशित करने वाला एक दस्तावेज़ प्रदान किया, कुछ प्रश्नों के उत्तर दिए, और पहला LP आउटपुट हुआ। यह विधि दिशाओं को आज़माने और चीजों को तोड़ने के चरण में प्रभावी है।
दूसरी ओर, इसे प्रोडक्शन गुणवत्ता तक लाने के काम के लिए—जैसे रिस्पॉन्सिव सपोर्ट और एक्सेसिबिलिटी विवरण—आपको Claude Code के साथ इसे परिष्कृत करने की आवश्यकता है।
Design के साथ डिज़ाइन तय करें, और Code के साथ इसे पूरा करें। मैंने इनका इसी क्रम में उपयोग किया।
बनाने से पहले सब कुछ शब्दों में बयां करना
जब तक मैंने यह साइट बनाने का फैसला किया, तब तक दिशा तय हो चुकी थी। मेरे दिमाग में यह था कि "क्लासिक ओवरसीज-स्टाइल टोन में आधुनिक टाइपफेस और इफेक्ट जोड़ने पर क्या होता है।" यह अवधारणा स्वयं Design Harness डॉक्यूमेंटेशन से ली गई है।
ध्यान दें कि चूंकि Claude अपने आप इमेज जनरेट नहीं कर सकता, इसलिए मैंने वह काम ChatGPT Images 2.0 पर छोड़ दिया। मैंने सैंपल साइट इमेज से वैकल्पिक विचार प्राप्त किए, उस साइट के लिए एक मूड बोर्ड बनाया जिसे मैं बनाना चाहता था, और बैकग्राउंड इमेज जनरेट कीं। मैंने 'अच्छी' दिशा को परिभाषित करने के लिए पहले से सब कुछ शब्दों और इमेज में रख दिया। बाद की सभी बातचीत मूल रूप से इसके खिलाफ क्रॉस-चेकिंग थी।
Codex (ChatGPT Image 2.0) के साथ विज़ुअल टोन की खोज, विभिन्न इमेज और मूड बोर्ड के माध्यम से खोज करना।
परिष्कृत करने में सैकड़ों इंटरैक्शन लगते हैं (कम से कम)
तैयारी पूरी होने के बाद, Claude Design के साथ आगे-पीछे का सिलसिला शुरू हुआ। स्क्रीनशॉट को देखते हुए, कुल 200 से अधिक इंटरैक्शन थे (कुल उत्पादन समय के संदर्भ में लगभग एक सप्ताह)। यहाँ सत्रों का विवरण दिया गया है:
- "LP साइट जनरेशन आवश्यकताएँ": लगभग 80 टर्न
- "Design Harness एनिमेशन": लगभग 80 टर्न
- "KV टेक्स्ट बैकग्राउंड डिस्प्ले एनिमेशन": लगभग 50 टर्न
- "Design Harness स्पष्टीकरण में सुधार": लगभग 10 टर्न
शुरुआती लोडिंग एनिमेशन और की विज़ुअल (KV) इफेक्ट्स के लिए विशेष रूप से कई इंटरैक्शन की आवश्यकता थी। इफेक्ट एक बार में नहीं किए गए; मैंने उन्हें बेहतर बनाने के लिए परतों में निर्देश दिए (जैसे, नीचे से आने वाला इफेक्ट, ओवरलैपिंग ब्लर इफेक्ट्स, आदि)।
Claude Design के कैप्चर। चूंकि संदर्भ बढ़ने पर सटीकता कम हो जाती है, इसलिए मैंने प्रत्येक महत्वपूर्ण कार्य के लिए खोज करने के लिए नए सत्र बनाए।
अलग से, मैं Claude Code के साथ रिस्पॉन्सिव सपोर्ट और एक्सेसिबिलिटी को परिष्कृत कर रहा था, इसलिए यह कुल मिलाकर लगभग 300 इंटरैक्शन हो जाता है। अनुभव के आधार पर, मुझे लगता है कि Hero सेक्शन ने सबसे अधिक समय लिया।
Claude Design से Claude Code में जाते समय, मैंने Share फ़ंक्शन का उपयोग किया, लेकिन मैं "Export" के माध्यम से पूरी zip फ़ाइल पास करने की सलाह देता हूँ। जबकि "Send to" आसान है, इसमें इमेज ट्रांसमिशन की सीमाएँ हैं और प्रतिकृति सटीकता उतनी अधिक नहीं है।
संख्याओं को देखकर, यह एक कठिन काम लग सकता है, लेकिन निर्देश देना अपने आप में आसान हो गया है। अब आपको HTML और CSS को पूरी तरह से समझने की आवश्यकता नहीं है। Claude Design में एक एनोटेशन सुविधा है जहाँ आप स्क्रीन पर तत्वों में सीधे टिप्पणियाँ जोड़ सकते हैं। यदि आप उस हिस्से की ओर इशारा करते हैं जिसे आप ठीक करना चाहते हैं, तो लगभग कोई भी विस्तृत निर्देश काम करेगा। इसलिए, मेरे द्वारा दिए गए निर्देश मुख्य रूप से तीन श्रेणियों में आते हैं:
विवरण ठीक करने के लिए एनोटेशन के साथ तत्वों की ओर इशारा करना। KV टेक्स्ट बैकग्राउंड डिस्प्ले की तरह, गति आंदोलनों को शब्दों में व्यक्त करना। टोन को "क्लासिक ओवरसीज स्टाइल" में फिर से संरेखित करना... एकमात्र शेष आवश्यक कौशल गति और टोन को शब्दों में बयां करने की क्षमता है।
आइए आगे-पीछे के उदाहरण के रूप में नेविगेशन को लेते हैं।
शुरू में, यह एक इफेक्ट था जहाँ होवर करने पर एक अंडरलाइन स्लाइड होती थी। इसे समझना मुश्किल था, इसलिए मैंने एक संदर्भ कार्यान्वयन URL प्रदान किया और इसे कैरेक्टर शफलिंग इफेक्ट में बदल दिया। फिर, शफलिंग के दौरान कैरेक्टर की चौड़ाई बदल गई, जिससे मेनू की स्थिति बदल गई। जब मैंने चौड़ाई तय करवाई, तो स्पेसिंग असमान हो गई। इसे "अभी भी समान नहीं है" कहकर वापस भेजने के बाद भी, यह ठीक नहीं हुआ। अंत में, मैंने चौड़ाई को समायोजित करने का प्रयास करना बंद कर दिया और नेविगेशन टाइपफेस को फिक्स्ड-विड्थ मोनोस्पेस में बदलकर इसे हल किया। यदि कैरेक्टर की चौड़ाई स्थिर है, तो शफलिंग करने पर भी कुछ नहीं हिलता। इसमें 5 इंटरैक्शन लगे।
300 इंटरैक्शन ज्यादातर इस चक्र की पुनरावृत्ति थे। दिशा दिखाने के लिए उन साइटों या कार्यान्वयनों के URL प्रदान करना जिनका मैं संदर्भ लेना चाहता था। जो निकला उसके साथ असुविधा को संक्षेप में शब्दों में बयां करना, जैसे "स्पेसिंग अब समान नहीं है," और इसे वापस भेजना। यदि वही सुधार दो बार विफल हुआ, तो मैंने फाइन-ट्यूनिंग बंद कर दी और आधार बदल दिया। अंत में, मैंने कभी कोई लंबा विनिर्देश दस्तावेज़ नहीं लिखा।
वैसे, हालाँकि मैंने इस बार इसका शायद ही उपयोग किया, एनिमेशन वोकैबुलरी और स्किल्स नामक एक दस्तावेज़ है, जिसका उपयोग करने पर निर्देशों को और अधिक कुशल बनाना चाहिए। https://animations.dev/vocabulary
बनाने का कार्य और निर्णय लेने का कार्य
इंटरैक्शन की सामग्री को देखते हुए, यह जो निकला उसकी गुणवत्ता का निर्णय करने और उसे बार-बार वापस भेजने की एक प्रक्रिया थी। बनाने का कार्य अब लगभग पूरी तरह से AI द्वारा संभाला जा सकता है। यदि आप निर्देश देते हैं, तो उम्मीदवार तुरंत सामने आ जाते हैं। लेकिन क्या एनिमेशन का समय सही है? क्या पर्याप्त व्हाइटस्पेस है? क्या अच्छा है और क्या बुरा? AI यह निर्णय नहीं कर सकता। AI को एक ही बार में इच्छित टोन आउटपुट कराना अभी भी असंभव है। यदि आप गुणवत्ता बढ़ाना चाहते हैं, तो आपके पास निर्णय लेने और इसे वापस भेजने के अलावा कोई विकल्प नहीं है।
यही कारण है कि सरल आउटपुट गुणवत्ता के इस स्तर तक नहीं पहुँचते हैं। UC बर्कले स्कूल ऑफ इंफॉर्मेशन के एक अध्ययन ने, जिसमें जनरेटिव AI टूल का उपयोग करने वाले डिज़ाइनरों के 13 सत्रों का अवलोकन किया गया, उस घटना को "कन्वर्जेंस ट्रैप" कहा है जहाँ आउटपुट एक ऐसी शैली की ओर बढ़ता है जो "उच्च गुणवत्ता" फिर भी परिचित दिखती है।
https://x.com/kgsi/status/2074250174986362999
चीजों को वापस भेजने के निर्णय के बिना, आउटपुट एक सामान्य साफ-सफाई में स्थिर हो जाता है जो किसी की नहीं है। अधिकांश 300 इंटरैक्शन का उपयोग इसे वहाँ से इच्छित टोन की ओर वापस खींचने के लिए किया गया था।
उन लोगों का क्या होता है जो निर्णय ले सकते हैं?
एक दृष्टिकोण यह है कि AI अंततः इन सौंदर्य और गुणवत्ता के निर्णयों को पूरी तरह से संभालने में सक्षम होगा। मुझे लगता है कि कुछ क्षेत्रों में ऐसा होगा।
हालाँकि, 300 से अधिक इंटरैक्शन में से प्रत्येक में, मैं वह था जिसने असुविधा को उठाया और इसे वापस भेजा, और उस प्रक्रिया में इसके स्वचालित होने का कोई संकेत नहीं था। बेशक, यह एक LP बनाने से सिर्फ n=1 है। मैं अभी तक नहीं जानता कि क्या अन्य डिज़ाइन कार्यों के लिए भी ऐसा ही कहा जा सकता है।
इस प्रक्रिया को पूरा करने के बाद, मेरी भविष्यवाणी है कि चीजें बनाने वाले लोगों के लिए "सीटें" कम हो जाएंगी। एक LP डिज़ाइन करने में एक सप्ताह लगने वाली नौकरी को AI के साथ आधे दिन के आगे-पीछे वाली नौकरी से बदल दिया जाएगा। उस समय, अपनी सीटों पर बने रहने वाले लोग वे होंगे जिनके पास खड़े उम्मीदवारों के सामने सेकंडों में यह कहने का ज्ञान और निर्णय मानदंड होगा, "सही प्रस्ताव के साथ जाओ, लेकिन मोशन को फिर से करो।" मुझे लगता है कि AI में महारत हासिल करते हुए निर्णय लेने वाले लोगों की मांग वास्तव में बढ़ेगी।
डिज़ाइनरों को अपने हाथों से अपनी आँखों पर ध्यान केंद्रित करना चाहिए। उन 300 इंटरैक्शन में मैंने जो निर्णय लिए, वे अंततः अपने हाथों से चीजें बनाने के मेरे अनुभव पर निर्भर थे। यदि ऐसा है, तो एक ऐसी दुनिया में जहाँ हम चीजें बनाने की संख्या कम हो जाती है, क्या केवल आँखें विकसित करने का कोई तरीका है?
एक साइड नोट के रूप में, क्यूरेशन साइट "Parascope", जहाँ आप "डिज़ाइन" कौशल प्राप्त कर सकते हैं, वर्तमान में सफलतापूर्वक संचालित हो रही है 👉 http://parascope.design/
