Dùng Vibe Coding Xây Dựng Các Trang Web Phức Tạp: Bốn Trang Đích, Hai Hướng Đạt Hiệu Ứng 'Đắt Tiền', và Logo 3D Từ Sprite
Anthropic
Một lập trình viên frontend kể lại quá trình xây dựng bốn trang đích bằng vibe coding, nơi các tác nhân AI viết mã. Anh so sánh hai cách tiếp cận kỹ thuật: viết hiệu ứng WebGL thủ công so với việc dùng một công cụ Three.js tái sử dụng được. Bài viết trình bày chi tiết chuỗi công cụ của anh từ hệ thống thiết kế trong tệp DESIGN.md đến bản mô phỏng Claude Design và các gói bàn giao, đồng thời chia sẻ những bài học từ việc phân tích một trang web tham khảo WebGL đẳng cấp.
Tác giả, Zhemal Khamidun, CPO của AlpinaGPT và Giám đốc AI tại Alpina Digital, mô tả việc xây dựng các trang đích phức tạp bằng phương pháp vibe coding, trong đó các tác nhân AI viết mã dưới sự chỉ đạo của ông. Ông giới thiệu bốn trang đích: Trường học Techpred, hội nghị 'Tochka Sborki', khóa học 'Quản lý sản phẩm AI' (aimipt.ru) và một trang cá nhân. Chúng được chia thành hai hướng kỹ thuật: trang hội nghị sử dụng WebGL vanilla viết tay, không dùng thư viện ngoài, trong khi các trang khác sử dụng một engine Three.js tái sử dụng. Chuỗi công cụ bao gồm hệ thống thiết kế trong DESIGN.md, bản phác thảo tạo bằng Claude Design và các gói bàn giao được dùng làm tài liệu tham khảo, không phải mã sản xuất. Ông cũng phân tích một trang WebGL hàng đầu (dala.craftedbygc.com) bằng cách tải xuống gói mã, làm đẹp lại JavaScript đã nén và trích xuất 27 shader, học được về GPGPU với ping-pong FBO, InstancedMesh và các hiệu ứng hậu kỳ. Ông nhấn mạnh rằng việc sao chép trực tiếp các trang như vậy là không khả thi do thương hiệu và nội dung có bản quyền, nhưng việc trích xuất các công thức cho hiệu ứng như biến đổi hạt là có giá trị. Bài viết cũng đề cập đến trang đích 'Tochka Sborki' được xây dựng hoàn toàn bằng WebGL vanilla và CSS, có shader bề mặt nước với sáu sóng sin cộng dồn, cùng chi tiết về kích thước tệp và số dòng mã.
Nguồn: Habr — хаб ИИ —
bản gốc
