Applications 🇷🇺 05.08.2026 05:02

Sites complexes construits avec le vibe coding : quatre pages d’atterrissage, deux chemins vers des effets « coûteux », et un logo 3D à partir de sprites

AnthropicAnthropic
Un développeur front-end raconte la création de quatre pages d’atterrissage à l’aide du vibe coding, où des agents d’intelligence artificielle écrivent le code. Il oppose deux approches techniques : des effets WebGL écrits à la main par rapport à un moteur Three.js réutilisable. L’article détaille sa chaîne d’outils, des systèmes de conception dans DESIGN.md aux maquettes Claude Design et aux bundles de transfert, et partage les leçons tirées de la dissection d’un site de référence WebGL de premier ordre.
L'auteur, Zhemal Khamidun, CPO d'AlpinaGPT et responsable de l'IA chez Alpina Digital, décrit la création de landing pages complexes avec le « vibe coding », où des agents IA écrivent le code sous sa direction. Il présente quatre landing pages : l'école Techpred, la conférence « Tochka Sborki », le cours « AI Product Management » (aimipt.ru) et une page personnelle. Celles-ci se répartissent en deux approches techniques : le site de la conférence utilise du WebGL vanilla écrit à la main, sans bibliothèque externe, tandis que les autres utilisent un moteur Three.js réutilisable. La chaîne d'outils comprend un système de design dans DESIGN.md, des maquettes créées dans Claude Design, et des bundles de remise utilisés comme références, et non comme code de production. Il a également disséqué un site WebGL de premier plan (dala.craftedbygc.com) en téléchargeant son bundle, en beautifiant le JS minifié et en extrayant 27 shaders, apprenant ainsi les techniques de GPGPU avec FBO en ping-pong, l'InstancedMesh et les effets de post-traitement. Il souligne que cloner directement de tels sites n'est pas viable en raison de l'image de marque et des actifs sous licence, mais qu'extraire des recettes pour des effets comme le morphing de particules est précieux. L'article couvre également la landing page « Tochka Sborki », construite entièrement en WebGL vanilla et en CSS, avec un shader de surface d'eau utilisant six ondes sinusoïdales additionnées, et donne des détails sur les tailles de fichiers et le nombre de lignes.
Source: Habr — хаб ИИ — original
Nos articles précédents sur ce sujet ↓
Infos fraîches