Sitios complejos construidos con vibe coding: cuatro páginas de aterrizaje, dos caminos hacia efectos 'caros' y un logo 3D a partir de sprites
Anthropic
Un desarrollador frontend relata cómo construyó cuatro páginas de aterrizaje usando vibe coding, donde los agentes de IA escriben el código. Contrasta dos enfoques técnicos: efectos WebGL escritos a mano frente a un motor Three.js reutilizable. El artículo detalla su cadena de herramientas, desde los sistemas de diseño en DESIGN.md hasta los mockups de Claude Design y los paquetes de entrega, y comparte lecciones aprendidas al diseccionar un sitio de referencia WebGL de primer nivel.
El autor, Zhemal Khamidun, CPO de AlpinaGPT y jefe de IA en Alpina Digital, describe la creación de páginas de aterrizaje complejas mediante «vibe coding», donde los agentes de IA escriben el código bajo su dirección. Presenta cuatro páginas de aterrizaje: la Escuela de Techpred, la conferencia «Tochka Sborki», el curso «Gestión de Productos de IA» (aimipt.ru) y una personal. Estas se dividen en dos rutas técnicas: el sitio de la conferencia utiliza WebGL vanilla escrito a mano, sin bibliotecas externas, mientras que los demás usan un motor Three.js reutilizable. La cadena de herramientas incluye un sistema de diseño en DESIGN.md, maquetas creadas en Claude Design y paquetes de transferencia que se usan como referencia, no como código de producción. También analizó un sitio WebGL de primer nivel (dala.craftedbygc.com) descargando su paquete, embelleciendo el JavaScript minificado y extrayendo 27 shaders, aprendiendo sobre GPGPU con FBO ping-pong, InstancedMesh y efectos de postprocesamiento. Destaca que clonar dichos sitios directamente no es viable debido a la marca y los activos con licencia, pero extraer recetas para efectos como la transformación de partículas es valioso. El artículo también cubre la página de aterrizaje «Tochka Sborki», construida enteramente en WebGL vanilla y CSS, con un shader de superficie de agua que suma seis ondas sinusoidales, e incluye detalles sobre tamaños de archivo y recuentos de líneas.
Fuente: Habr — хаб ИИ —
original
