用Vibe Coding构建复杂网站：四个落地页、两条实现“昂贵”特效的路径，以及一个由精灵图拼出的3D Logo

作者Zhemal Khamidun，AlpinaGPT的首席产品官兼Alpina Digital的人工智能主管，描述了在“氛围编码”（vibe coding）模式下构建复杂着陆页的过程，即人工智能代理在他的指导下编写代码。他展示了四个着陆页：技术预测学院（School of Techpred）、“集合点”会议（'Tochka Sborki'）、“AI产品管理”课程（aimipt.ru）以及一个个人页面。这些页面分为两条技术路径：会议网站使用手写的纯WebGL，不依赖任何外部库；而其他页面则使用可复用的Three.js引擎。工具链包括DESIGN.md中的设计系统、Claude Design中创建的模型，以及作为参考（而非生产代码）的交接包。他还通过下载一个顶级WebGL网站（dala.craftedbygc.com）的代码包、美化压缩的JavaScript、提取27个着色器，剖析了该网站，学习了使用乒乓FBO（帧缓冲对象）的GPGPU（通用GPU计算）、InstancedMesh以及后期处理效果。他强调，直接克隆此类网站是不可行的，因为涉及品牌和授权资产，但提取效果配方（如粒子变形）则很有价值。文章还介绍了完全用纯WebGL和CSS构建的“集合点”着陆页，其水面着色器使用了六个求和的正弦波，并提供了文件大小和行数的详细信息。