Komplexe Websites mit Vibe Coding erstellt: Vier Landing Pages, zwei Wege zu 'teuren' Effekten und ein 3D-Logo aus Sprites

Der Autor, Zhemal Khamidun, CPO von AlpinaGPT und Head of AI bei Alpina Digital, beschreibt, wie er mit Vibe Coding komplexe Landing Pages erstellt, bei denen KI-Agenten den Code unter seiner Anleitung schreiben. Er stellt vier Landing Pages vor: die School of Techpred, die Konferenz 'Tochka Sborki', den Kurs 'AI Product Management' (aimipt.ru) und eine persönliche. Diese teilen sich in zwei technische Wege: Die Konferenzseite verwendet handgeschriebenes Vanilla-WebGL ohne externe Bibliotheken, während die anderen eine wiederverwendbare Three.js-Engine nutzen. Die Toolchain umfasst ein Designsystem in DESIGN.md, Mockups, die in Claude Design erstellt wurden, und Übergabebündel, die als Referenz dienen, nicht als Produktionscode. Außerdem hat er eine Top-WebGL-Seite (dala.craftedbygc.com) seziert, indem er ihr Bündel heruntergeladen, den minifizierten JavaScript-Code verschönert und 27 Shader extrahiert hat, wobei er GPGPU mit Ping-Pong-FBO, InstancedMesh und Post-Processing-Effekten kennenlernte. Er betont, dass das direkte Klonen solcher Seiten aufgrund von Branding und lizenzierten Assets nicht praktikabel ist, aber das Extrahieren von Rezepten für Effekte wie Partikel-Morphing wertvoll ist. Der Artikel behandelt auch die 'Tochka Sborki'-Landingpage, die vollständig in Vanilla-WebGL und CSS erstellt wurde, mit einem Wassersurface-Shader, der sechs summierte Sinuswellen verwendet, sowie Details zu Dateigrößen und Zeilenzahlen.