अनुप्रयोग 🇷🇺 05.08.2026 05:02

वाइब कोडिंग से बने जटिल साइट्स: चार लैंडिंग पेज, 'महंगे' इफेक्ट्स के दो रास्ते, और स्प्राइट्स से 3D लोगो

AnthropicAnthropic
एक फ्रंटएंड डेवलपर ने वाइब कोडिंग का उपयोग करके चार लैंडिंग पेज बनाने का अनुभव साझा किया है, जिसमें AI एजेंट कोड लिखते हैं। उन्होंने दो तकनीकी दृष्टिकोणों की तुलना की है: हाथ से लिखे गए WebGL इफेक्ट्स बनाम पुन: प्रयोज्य Three.js इंजन। लेख में डिज़ाइन.md में डिज़ाइन सिस्टम से लेकर क्लॉड डिज़ाइन मॉकअप और हैंडऑफ़ बंडल तक की टूलचेन का विवरण है, और एक शीर्ष-स्तरीय WebGL संदर्भ साइट का विश्लेषण करने से मिले सबक भी शामिल हैं।
लेखक, अल्पिनाGPT के CPO और अल्पिना डिजिटल में AI प्रमुख, ज़ेमल ख़ामिदुन, बताते हैं कि कैसे उन्होंने वाइब कोडिंग की मदद से जटिल लैंडिंग पेज बनाए, जहां AI एजेंट उनके निर्देशन में कोड लिखते हैं। वे चार लैंडिंग पेज दिखाते हैं: स्कूल ऑफ टेकप्रेड, 'टोचका स्बोर्की' सम्मेलन, 'एआई प्रोडक्ट मैनेजमेंट' कोर्स (aimipt.ru), और एक व्यक्तिगत पेज। ये दो तकनीकी रास्तों में बंटते हैं: सम्मेलन साइट बिना किसी बाहरी लाइब्रेरी के हाथ से लिखे वेनिला WebGL का उपयोग करती है, जबकि अन्य एक पुन: प्रयोज्य (reusable) Three.js इंजन का उपयोग करते हैं। टूलचेन में DESIGN.md में एक डिज़ाइन सिस्टम, क्लॉड डिज़ाइन में बनाए गए मॉकअप, और हैंडऑफ बंडल शामिल हैं जिन्हें संदर्भ के रूप में उपयोग किया जाता है, प्रोडक्शन कोड के रूप में नहीं। उन्होंने शीर्ष WebGL साइट (dala.craftedbygc.com) को बंडल डाउनलोड करके, minified JS को सुंदर बनाकर, और 27 शेडर निकालकर, पिंग-पोंग FBO के साथ GPGPU, InstancedMesh, और पोस्ट-प्रोसेसिंग प्रभावों के बारे में सीखा। वे इस बात पर जोर देते हैं कि ऐसी साइटों को सीधे क्लोन करना ब्रांडिंग और लाइसेंस प्राप्त संपत्तियों के कारण संभव नहीं है, लेकिन कण मॉर्फिंग जैसे प्रभावों के लिए रेसिपी निकालना मूल्यवान है। लेख में 'टोचका स्बोर्की' लैंडिंग पेज भी शामिल है जो पूरी तरह से वेनिला WebGL और CSS में बनाया गया है, जिसमें छह साइन तरंगों के योग के साथ एक वॉटर सरफेस शेडर है, और फ़ाइल आकार और लाइन गणना के विवरण भी दिए गए हैं।
स्रोत: Habr — хаб ИИ — मूल
इस विषय पर हमारी पिछली पोस्ट ↓
ताज़ा समाचार