Complexe sites gebouwd met vibe coding: vier landingspagina's, twee wegen naar 'dure' effecten en een 3D-logo van sprites
Anthropic
Een frontendontwikkelaar vertelt over het bouwen van vier landingspagina's met vibe coding, waarbij AI-agenten de code schrijven. Hij vergelijkt twee technische benaderingen: handgeschreven WebGL-effecten versus een herbruikbare Three.js-engine. Het artikel beschrijft zijn toolchain, van designsystemen in DESIGN.md tot Claude Design-mockups en handoff-bundels, en deelt lessen uit het ontleden van een toonaangevende WebGL-referentiesite.
De auteur, Zhemal Khamidun, CPO van AlpinaGPT en Head of AI bij Alpina Digital, beschrijft hoe hij complexe landingspagina's bouwt met vibe coding, waarbij AI-agenten de code schrijven onder zijn regie. Hij toont vier landingspagina's: de School of Techpred, de conferentie 'Tochka Sborki', de cursus 'AI Product Management' (aimipt.ru) en een persoonlijke. Deze vallen uiteen in twee technische benaderingen: de conferentiesite gebruikt handgeschreven vanilla WebGL zonder externe bibliotheken, terwijl de andere een herbruikbare Three.js-engine gebruiken. De toolchain omvat een designsysteem in DESIGN.md, mockups gemaakt in Claude Design, en overdrachtsbundels die als referentie dienen, niet als productiecode. Hij ontleedde ook een top-WebGL-site (dala.craftedbygc.com) door de bundel te downloaden, de geminificeerde JavaScript te beautifyen en 27 shaders te extraheren, waarbij hij leerde over GPGPU met ping-pong FBO, InstancedMesh en post-processing-effecten. Hij benadrukt dat het direct klonen van dergelijke sites niet haalbaar is vanwege branding en gelicentieerde assets, maar dat het extraheren van recepten voor effecten zoals partikelmorfose waardevol is. Het artikel behandelt ook de landingspagina 'Tochka Sborki', die volledig is gebouwd in vanilla WebGL en CSS, met een watersurface-shader bestaande uit zes gesommeerde sinusgolven, en details over bestandsgroottes en regelaantallen.
Bron: Habr — хаб ИИ —
origineel
