यदि आप टूल्स पर निर्भर रहते हैं, तो आप जल्दी से कुछ "ठीक-ठाक" सा बना सकते हैं। हालांकि, परिणाम अक्सर एक सामान्य लुक वाला होता है जो आपने पहले कहीं देखा होता है। यही "AI लुक" का सार है, और यही वह जगह है जहाँ अब सबसे बड़ा अंतर बनता है।
क्लॉड कोड (makeLP प्रोजेक्ट) पर बनी एक प्रोडक्शन लाइन का उपयोग करके, एक ही फाउंडेशन से तीन अलग-अलग पर्सनालिटी वाली साइटें बनाने के अपने अनुभव के आधार पर, मैं एक रिप्रोड्यूसेबल विधि का संक्षेप में वर्णन करूंगा।
एक फैक्ट्री, कोई वन-टाइम मैजिक ट्रिक नहीं
भले ही आप एक बार कुछ अच्छा बना लें, लेकिन अगर वह रिप्रोड्यूसेबल नहीं है तो वह एक एसेट नहीं बनता। यही कारण है कि हम इसे चार चरणों से गुज़ारते हैं।
प्रोडक्शन → क्वालिटी → वेरिफिकेशन → इंप्रूवमेंट।
चार प्रकार के सपोर्टिंग कॉम्पोनेंट हैं:
・स्किल्स: मेथडोलॉजिकल टेम्पलेट (motion-lp-builder निर्माण के लिए, frontend-design एंटी-AI सिद्धांतों के लिए, bulk-categorize सामूहिक वर्गीकरण के लिए)
・सब-एजेंट: विशेषीकृत भूमिकाएँ (lp-visual-verifier ड्राइंग और आलोचना के लिए, design-reference-analyst रेफरेंस को स्पेक्स में बदलने के लिए, bulk-classifier वर्गीकरण के लिए)
・रेफरेंस लाइब्रेरी: "साइट प्रकार × उद्योग" द्वारा वर्गीकृत 4,074 SANKOU लिस्टिंग की एक शेल्फ
・इवॉल्विंग रूल्स: CLAUDE.md (मानक प्रवाह/अनुशासन) + मेमोरी (आलोचनाओं को स्थायी बनाना)
तैयारी और पूर्वापेक्षाएँ
फाउंडेशन Vite + React + GSAP (ScrollTrigger) + Lenis पर फिक्स है। मुख्य बात स्क्रॉल प्रोग्रेस को सीधे प्रोडक्शन से जोड़ना है। स्क्रॉलिंग की मात्रा एक्सप्रेशन (बैकग्राउंड वीडियो फ्रेम स्क्रबिंग, पिनिंग, पैरालैक्स, एंट्रेंस रिवील) के लिए इनपुट बन जाती है।
एसेट्स दो प्रकार के होते हैं, जिन्हें विषय के आधार पर चुना जाता है:
・AI जनरेशन (Higgsfield): जब रिसॉर्ट जैसी यथार्थवादी इमेजरी की आवश्यकता हो
・कोड ड्राइंग (SVG/Canvas/CSS): यह B2B और टेक के लिए अधिक "सही" लगता है। कोई क्रेडिट आवश्यक नहीं
यदि संदेह हो, तो इस आधार पर निर्णय लें: "क्या यह फोटो होनी चाहिए या डायग्राम?"
STEP 1: प्रोडक्शन
क्रम महत्वपूर्ण है। तुरंत लिखना शुरू न करें; पहले, एक ब्रांड ब्रीफ (आप किससे क्या वादा कर रहे हैं, रंग, टाइपोग्राफी, मूवमेंट तीव्रता) को एक पेज पर ठोस करें। एक ही फाउंडेशन के साथ भी, यह कोड नहीं, बल्कि ब्रीफ है जो आउटपुट को अलग करता है।
यदि आप AI जनरेशन चुनते हैं, तो क्रेडिट अनुशासन का पालन करें:
- बैलेंस जाँचें
- get_cost से प्रारंभिक अनुमान लें
- पहले एक हीरो इमेज बनाएँ
- बाकी को उसी को रेफरेंस के रूप में उपयोग करके बनाएँ ताकि टेक्सचर एक जैसा रहे
- पूरा होने की प्रतीक्षा करें और डाउनलोड करें।
इम्प्लीमेंटेशन के लिए, प्रोडक्शन को सीधे स्क्रॉलिंग (फ्रेम स्क्रब/पिन/पैरालैक्स/रिवील) से जोड़ें। और हमेशा इसे मजबूत बनाएँ: prefers-reduced-motion के साथ स्टैटिक फ़ॉलबैक, npm run dev का काम करना सुनिश्चित करें भले ही एसेट्स गायब हों, और टच और कैनवस के लिए पावर सेविंग पर विचार करें।
STEP 2: क्वालिटी - मास-प्रोड्यूस्ड डिज़ाइन से अलग हटना
"AI लुक" को छह भागों में विघटित करें और समाप्त करें:
- ग्रेडिएंट्स का अत्यधिक उपयोग (विशेषकर टेक्स्ट और पर्पल ग्रेडिएंट) → एक ही रंग + एक एक्सेंट तक सीमित करें
- मानक पार्ट्स को मानक क्रम में रखना → संरचना के लिए एक अनूठी अवधारणा के साथ बनाएँ (जैसे, पूरा पेज एक वर्कफ़्लो कैनवस के रूप में)
- गोल-गोल "फुलाए हुए" नंबर → विशिष्ट रहें (जैसे, पहले/बाद में "600 इनवॉइस/महीना → 0")
- इमोजी आइकन → उनका उपयोग न करें। यदि आवश्यक हो तो SVG बनाएँ
- केवल ब्लॉक के बाएँ किनारे पर कलर बार → उनका उपयोग न करें। सतहों, मार्जिन और टाइपोग्राफी में रंग का उपयोग करें
- सब कुछ सममित, एकसमान, गोलाकार और नरम छाया वाला → असममितता और मार्जिन शक्ति में विविधताएँ लाएँ
सिद्धांत है: कलर स्कीम एक रंग + एक एक्सेंट है, टाइपोग्राफी को एक विशेष टाइपफेस के साथ आगे बढ़ाया जाता है, मार्जिन में ताकत, और मूवमेंट "फोकस" के उद्देश्य से।
STEP 3: वेरिफिकेशन - बिल्ड पास होने का मतलब अच्छा होना नहीं है
भले ही कोड पास हो जाए, पिन, स्क्रब और रिवील वास्तविक स्क्रीन पर टूटे हो सकते हैं। इसलिए, lp-visual-verifier एक dev सर्वर शुरू करता है, puppeteer-core के माध्यम से मौजूदा Chrome/Edge को संचालित करता है, प्रत्येक सेक्शन को रेंडर और कैप्चर करता है, और फिर "आँख से उसकी आलोचना करता है।"
तीन मुख्य बिंदु:
・वेरिफायर कोड को ठीक नहीं करता (कारण को अलग करने के लिए)
・prefers-reduced-motion के साथ कैप्चर करने से पिन किए गए क्षेत्रों और रिवील की प्रतीक्षा कर रहे निचले सेक्शन का स्थिर विज़ुअलाइज़ेशन संभव होता है
・हमेशा मोबाइल चौड़ाई पर भी कैप्चर करें
आलोचना → सुधार का सिर्फ एक दौर गुणवत्ता को काफी बढ़ा देता है। सफल बिल्ड से संतुष्ट न हों।
STEP 4: इंप्रूवमेंट + रेफरेंस लाइब्रेरी
design-reference-analyst रेफरेंस साइट्स को पढ़ता है और उन्हें केवल इंप्रेशन के बजाय "सामान्य पैटर्न" और "सुधार विनिर्देशों (कहाँ और कैसे)" में अनुवादित करता है। sankou-reference लाइब्रेरी में दो अक्षों पर वर्गीकृत 4,074 आइटम हैं, जिससे आप तुरंत "केवल पर्यटन × विशेष LP के उदाहरण" खींच सकते हैं (सामग्री प्रत्येक पंक्ति के नोट्स से स्पष्ट है)।
सामूहिक वर्गीकरण भी स्वयं टेम्पलेटेड है (bulk-categorize: विभाजन → सब-एजेंट समानांतरीकरण → एकत्रीकरण → सुधार)।
नियम जो बढ़ते हैं
यह सबसे बड़ी खोज है। क्लाइंट की आलोचनाओं को एक बार के सुधार के साथ समाप्त न होने दें; उन्हें स्थायी नियमों में बढ़ावा दें।
उदाहरण:
"इमोजी आइकन AI जैसा लगता है" "बाईं ओर कलर बार AI जैसा लगता है" → इन्हें मेमोरी और CLAUDE.md में निषिद्ध नियमों में बदलें → उसके बाद हर साइट में स्वचालित रूप से इनसे बचें।
दूसरे शब्दों में, जितना अधिक आप इसका उपयोग करेंगे, "AI लुक" उतना ही गायब होता जाएगा। स्किल्स और सब-एजेंट होने से क्षैतिज विस्तार भी आसान हो जाता है।
तीन अलग-अलग साइटें बनाना
・AZURE BAY (समर पूल LP / B2C): फ़िरोज़ा + गोल्ड। Higgsfield द्वारा जनरेटेड। स्क्रॉल पर पूल वीडियो का फ्रेम स्क्रबिंग।
・FLOWGEAR (n8n इम्प्लीमेंटेशन सपोर्ट / B2B): एकल कोरल रंग + फ्लैट, कोई इमेज जनरेशन नहीं। पूरा पेज एक n8n वर्कफ़्लो कैनवस है। फुलाए हुए नंबरों के बजाय विशिष्ट पहले/बाद का डेटा।
・STATIK (एक काल्पनिक स्टूडियो के लिए प्रायोगिक लैब): नियर ब्लैक + मोनो + एक एसिड रंग। कैनवस काइनेटिक टेक्स्ट ग्रिड + कस्टम कर्सर। सिर्फ LP से अधिक एक इमर्सिव अनुभव।
समानताएँ हैं: "एक रंग + एक एक्सेंट," "विशिष्टताओं के साथ बोलना," और "एक अवधारणा के माध्यम से सफलता।" विषय के आधार पर साधन चुनना औसत से दूर पहला कदम है।
स्वयं निर्माण करने के लिए न्यूनतम कॉन्फ़िगरेशन
- स्क्रॉल-लिंक्ड फाउंडेशन को टेम्पलेट करें (हर बार शुरू से न लिखें)
- एंटी-मास-प्रोडक्शन सिद्धांतों को एक नियम शीट में रखें (कोई ग्रेडिएंट/इमोजी/लेफ्ट बार...)
- बनाने के बाद हमेशा वास्तविक स्क्रीन कैप्चर करें और देखें
- हर बार आलोचनाओं को नियमों में बढ़ावा दें
सामान्य नुकसान और प्रतिरोधी उपाय: क्रेडिट बर्बादी (हीरो पहले + प्रारंभिक अनुमान), वेरिफिकेशन चूक (वास्तविक स्क्रीन कैप्चर करें), मोशन एक्सेसिबिलिटी (reduced-motion), और मोबाइल ब्रेकेज (हमेशा विभिन्न चौड़ाई पर कैप्चर करें)।
सारांश
AI एक "तेज़ हाथ" है, "आँख" नहीं।
जिस क्षण आप सिस्टम में आँख (वेरिफिकेशन) और नियम (सीखना) को शामिल करते हैं, AI-निर्मित साइटें AI लुक से मुक्त हो जाती हैं।
