バイブコーディングで作る複雑なサイト：ランディングページ4件、"高級感"を出す2つのアプローチ、スプライトから作る3Dロゴ

著者のジェマル・ハミドゥン氏（AlpinaGPTのCPO兼Alpina DigitalのAI部門責任者）は、バイブコーディング（vibe coding）を用いて複雑なランディングページを構築する方法について説明しています。これは、AIエージェントが彼の指示のもとでコードを書くという手法です。彼は、School of Techpred、『トーチカ・スボルキ』（Tochka Sborki）カンファレンス、『AIプロダクトマネジメント』コース（aimipt.ru）、そして個人用のものという4つのランディングページを紹介しています。これらは2つの技術的なアプローチに分かれます。カンファレンスサイトは外部ライブラリを使わず、手書きのバニラWebGLを使用していますが、他のサイトは再利用可能なThree.jsエンジンを使用しています。ツールチェーンには、DESIGN.mdのデザインシステム、Claude Designで作成されたモックアップ、そして参照用であって本番コードではないハンドオフバンドルが含まれています。彼はまた、トップクラスのWebGLサイト（dala.craftedbygc.com）を、そのバンドルをダウンロードし、圧縮されたJavaScriptを整形し、27個のシェーダーを抽出することで解析し、ピンポンFBOを用いたGPGPU、インスタンス化メッシュ（InstancedMesh）、ポストプロセッシングエフェクトについて学びました。彼は、このようなサイトを直接クローンすることは、ブランディングやライセンスされたアセットのため現実的ではないが、パーティクルモーフィングのようなエフェクトのレシピを抽出することは価値があると強調しています。また、この記事では、6つの正弦波を合成した水面シェーダーを備えた、バニラWebGLとCSSで完全に構築された『トーチカ・スボルキ』のランディングページについても取り上げ、ファイルサイズと行数について詳細に説明しています。