Hướng dẫn tạo website 3D animation với Claude Code và deploy lên WordPress
Có một loại website mà chắc các bạn từng gặp: cuộn chuột tới đâu thì hình ảnh biến đổi tới đó, các khối 3D chuyển động mượt mà, nhìn vào là biết ngay đây không phải một trang web bình thường. Loại website này ở nước ngoài thường được các studio báo giá từ vài nghìn tới hàng chục nghìn đô, thời gian chờ tính bằng tháng.
Trong bài viết này, mình chia sẻ lại toàn bộ quy trình vibe coding với Claude Code để tạo ra một website 3D animation hoàn chỉnh, sau đó đóng gói thành WordPress theme và deploy lên hosting thật. Đây là nội dung mình đã quay thành video hướng dẫn, và bài viết này là bản ghi lại có hệ thống để các bạn tiện tra cứu khi làm theo.
Điều quan trọng cần nói trước: các bạn không cần biết lập trình để làm được. Nhưng các bạn cần biết cách mô tả yêu cầu cho rõ ràng. Đây là hai chuyện khác nhau, và mình sẽ giải thích kỹ ở phần cuối.
Vì sao website 3D animation lại đắt đến vậy
Trước khi bắt tay vào làm, mình nghĩ các bạn nên hiểu vì sao loại website này lại có mức giá cao như vậy. Hiểu được cấu trúc chi phí thì các bạn mới biết AI đang thay thế phần nào và phần nào vẫn cần con người.
Một website chuyển động 3D thông thường cần ít nhất ba vai trò:
- Designer: dựng bố cục, chọn màu, quyết định nhịp điệu thị giác của trang
- Developer front end: hiện thực hoá thiết kế thành code chạy được trên trình duyệt
- Chuyên viên đồ hoạ 3D: dựng và tối ưu các mô hình, xử lý chuyển động
Ba vai trò này đồng nghĩa với ba mức lương, cộng thêm thời gian phối hợp giữa các bên. Đó là lý do chi phí đội lên nhanh, và cũng là lý do các doanh nghiệp vừa và nhỏ tại Việt Nam thường bỏ qua loại website này dù biết nó tạo ấn tượng tốt.
Với Claude Code, phần lớn khối lượng công việc kỹ thuật ở trên có thể được xử lý bởi AI. Việc còn lại của các bạn là định hướng và kiểm soát chất lượng đầu ra.
Phần 1: Xây website 3D animation với Claude Code
Bước 1: Nghiên cứu cách làm trước khi gõ prompt đầu tiên
Đây là bước mà theo quan sát của mình, phần lớn mọi người bỏ qua, và cũng chính là nguyên nhân khiến kết quả AI trả về không như mong đợi.
Trước khi mở Claude Code, mình dành thời gian tìm hiểu các website tham chiếu mà mình muốn hướng tới, ghi lại cụ thể từng hiệu ứng: cuộn xuống thì phần nào xuất hiện trước, khối 3D xoay theo hướng nào, tốc độ chuyển động ra sao, phần nào cần đứng yên để mắt người xem có chỗ nghỉ.
Nghe có vẻ mất công, nhưng đây là khoản đầu tư đáng giá nhất trong toàn bộ dự án. Khi mình đưa cho Claude Code một yêu cầu mơ hồ kiểu “làm cho đẹp và hiện đại”, kết quả trả về rất tệ. Khi mình mô tả cụ thể từng chuyển động và thứ tự xuất hiện, chất lượng tăng lên thấy rõ ngay từ lần chạy đầu tiên.
Bước 2: Dựng phần 3D animation
Phần 3D là thứ tạo nên khác biệt của website này so với một landing page thông thường. Ở bước này các bạn cần xác định rõ vai trò của yếu tố 3D trong trang: nó là điểm nhấn ở khu vực đầu trang, hay là yếu tố xuyên suốt toàn bộ trải nghiệm cuộn trang.
Lời khuyên của mình là bắt đầu với một điểm nhấn duy nhất. Website càng nhiều chuyển động thì càng nặng, tải càng chậm, và nếu khách hàng của các bạn truy cập từ điện thoại với đường truyền yếu thì hiệu ứng đẹp tới đâu cũng không có ý nghĩa gì. Một chuyển động được làm tốt có giá trị hơn năm chuyển động làm qua loa.
Bước 3: Vibe coding với Claude Code
Đây là phần chiếm nhiều thời gian nhất và cũng là phần thú vị nhất. Vibe coding hiểu đơn giản là các bạn mô tả điều mình muốn bằng ngôn ngữ tự nhiên, Claude Code sẽ viết code, sau đó các bạn xem kết quả và yêu cầu chỉnh sửa tiếp cho tới khi ưng ý.
Một số nguyên tắc mình rút ra được sau quá trình làm thực tế:
- Làm từng phần một, đừng yêu cầu tất cả cùng lúc. Xong khu vực đầu trang rồi mới sang khu vực tiếp theo. Nếu yêu cầu cả trang trong một prompt, khi có lỗi các bạn sẽ không biết lỗi nằm ở đâu.
- Kiểm tra kết quả sau mỗi lần thay đổi. Đừng chạy năm yêu cầu liên tiếp rồi mới mở trình duyệt xem.
- Mô tả bằng ngôn ngữ của người dùng, không cần dùng thuật ngữ kỹ thuật. Nói “khi cuộn xuống thì khối này từ từ hiện ra từ bên trái” hiệu quả hơn là cố gắng gọi tên một kỹ thuật mà các bạn không chắc.
- Khi kết quả sai, hãy mô tả cái sai thay vì lặp lại cái đúng. Nói rõ “chuyển động này đang quá nhanh và giật” sẽ tốt hơn là nói lại “mình muốn nó mượt”.
Bước 4: Kiểm tra kết quả
Trước khi chuyển sang giai đoạn đưa lên WordPress, các bạn cần kiểm tra kỹ ba thứ: website hiển thị đúng trên màn hình điện thoại, tốc độ tải trang chấp nhận được, và các chuyển động không gây khó chịu khi xem lâu.
Riêng phần hiển thị trên điện thoại, mình khuyên các bạn không nên bỏ qua dù video này hướng tới người làm việc trên máy tính. Phần lớn khách hàng tại Việt Nam truy cập website từ điện thoại, và một trang 3D đẹp trên desktop nhưng vỡ bố cục trên mobile thì gây hại nhiều hơn là có lợi.
Phần 2: Đóng gói và deploy lên WordPress
Đến đây các bạn đã có một website chạy được, nhưng nó vẫn chỉ là các file nằm trên máy tính của mình. Một website chạy trên máy các bạn thì không tạo ra khách hàng nào cả.
Đây chính là khoảng cách giữa “làm được cho vui” và “dùng được thật trong kinh doanh”. Và cũng là chỗ rất nhiều bạn mắc kẹt.
Vì sao lại chọn WordPress
Các bạn hoàn toàn có thể đưa website tĩnh lên một dịch vụ hosting đơn giản và nó sẽ chạy. Nhưng mình chọn WordPress vì một lý do rất thực tế cho doanh nghiệp: sau này khi muốn sửa nội dung, thay ảnh, thêm bài viết, các bạn hoặc nhân viên của các bạn làm được ngay trong giao diện quản trị mà không cần đụng vào code, không cần gọi cho ai cả.
Nói cách khác, WordPress giúp các bạn tự chủ về mặt vận hành lâu dài. Đây là tiêu chí mình luôn đặt lên hàng đầu khi tư vấn giải pháp cho doanh nghiệp: một hệ thống đẹp nhưng chỉ một người sửa được là một rủi ro, không phải một tài sản.
Bước 1: Build WordPress theme với Claude Code
Bước này là chuyển website tĩnh mà các bạn vừa làm thành một WordPress theme hoàn chỉnh. Về bản chất, đây là việc sắp xếp lại code theo đúng cấu trúc mà WordPress quy định, để hệ thống hiểu được đâu là phần đầu trang, đâu là phần nội dung, đâu là phần chân trang.
Điểm hay là các bạn không cần thuộc lòng cấu trúc đó. Claude Code biết rõ một WordPress theme cần những file nào và vai trò của từng file. Việc của các bạn là yêu cầu rõ ràng rằng mình muốn chuyển toàn bộ website hiện tại thành theme, giữ nguyên giao diện và các hiệu ứng chuyển động, đồng thời tách phần nội dung ra để có thể chỉnh sửa từ trang quản trị sau này.
Một lưu ý quan trọng: hãy nói rõ những phần nội dung nào các bạn muốn sửa được từ WordPress Admin. Ví dụ tiêu đề chính, đoạn giới thiệu, thông tin liên hệ, danh sách dịch vụ. Nếu không nói rõ, mọi thứ sẽ bị viết cứng trong code và các bạn lại quay về đúng vấn đề ban đầu là phải sửa code mỗi khi đổi một dòng chữ.
Bước 2: Upload media lên WordPress hosting
Website 3D animation thường đi kèm nhiều tài nguyên nặng: hình ảnh chất lượng cao, mô hình 3D, đôi khi cả video nền. Đây là phần dễ gây lỗi nhất khi deploy, và cũng là phần ảnh hưởng trực tiếp tới tốc độ tải trang.
Một vài điều các bạn cần chú ý ở bước này:
- Nén hình ảnh trước khi upload. Một tấm ảnh vài MB không cần thiết trên web, và nó làm chậm trang đáng kể.
- Kiểm tra giới hạn dung lượng upload của hosting. Nhiều gói hosting giới hạn kích thước file tối đa, nếu file 3D vượt quá thì cần chỉnh cấu hình hoặc upload theo cách khác.
- Giữ đúng cấu trúc thư mục. Nếu đường dẫn tới tài nguyên bị sai sau khi upload, website sẽ hiển thị thiếu ảnh hoặc mất hiệu ứng dù code hoàn toàn đúng.
Bước 3: Import và cấu hình theme trong WordPress Admin
Bước cuối cùng là đưa theme vừa build vào WordPress và cấu hình để website chạy đúng như bản gốc. Sau khi kích hoạt theme, các bạn cần kiểm tra lại menu điều hướng, trang chủ đã được gán đúng chưa, các khu vực nội dung có hiển thị đầy đủ không.
Thực tế khi làm, hiếm khi mọi thứ chạy đúng ngay lần đầu. Thường sẽ có vài chi tiết lệch so với bản gốc: một hiệu ứng không chạy, một khoảng cách bị sai, một hình ảnh không hiện. Đây là chuyện bình thường. Các bạn quay lại Claude Code, mô tả chính xác hiện tượng đang gặp, và xử lý từng lỗi một.
Trong video mình giữ nguyên cả những đoạn gặp lỗi và cách xử lý, không cắt bỏ cho đẹp, vì mình nghĩ đó mới là thứ có ích khi các bạn tự làm.
Bài học lớn nhất mình rút ra
Điều thú vị nhất mình nhận ra sau toàn bộ dự án này không phải là AI giỏi tới đâu. Mà là phần khó nhất hoá ra không nằm ở kỹ thuật.
Nó nằm ở chỗ các bạn có mô tả được rõ ràng thứ mình muốn hay không.
Điều này đúng với mọi dự án tự động hoá mà mình từng triển khai cho doanh nghiệp. Công nghệ hiếm khi là nút thắt. Nút thắt là người ta chưa nói rõ được mình thực sự cần gì. Một quy trình mơ hồ khi đưa vào tự động hoá sẽ cho ra một hệ thống mơ hồ, chỉ khác là giờ nó chạy nhanh hơn.
Vì thế nếu các bạn đang định dùng AI cho công việc, mình nghĩ kỹ năng đáng đầu tư nhất lúc này không phải là học thêm một công cụ mới. Mà là tập diễn đạt vấn đề của mình cho đủ rõ ràng. Công cụ thì tháng nào cũng có cái mới, còn kỹ năng đó thì dùng được với bất kỳ công cụ nào.
Các bạn có thể áp dụng vào đâu
Cách làm trong bài viết này không chỉ dùng cho một website 3D. Các bạn hoàn toàn có thể áp dụng đúng quy trình đó cho:
- Landing page cho từng chiến dịch marketing, tự dựng và tự sửa trong ngày thay vì chờ đơn vị bên ngoài
- Website giới thiệu doanh nghiệp, chủ động cập nhật dịch vụ và thông tin liên hệ
- Portfolio cá nhân cho người làm nghề tự do và content creator
- Trang bán hàng đơn giản gắn với các kênh sẵn có của doanh nghiệp
Giá trị thật không nằm ở chỗ website đẹp hay không. Nó nằm ở chỗ các bạn giành lại được quyền chủ động về hình ảnh thương hiệu của mình, không phải chờ đợi và trả chi phí mỗi lần muốn đổi một dòng chữ.
Xem video hướng dẫn đầy đủ
Toàn bộ quá trình mình đã quay lại chi tiết, có timestamp từng bước để các bạn tiện theo dõi và làm theo.
Đây là một phần trong series Vibe Coding theo yêu cầu, nơi mình chọn các bài toán thực tế từ bình luận của người xem để làm hướng dẫn. Nếu các bạn đang cần một ứng dụng hoặc website phục vụ công việc và kinh doanh của mình, hãy để lại bình luận, nếu bài toán đó giúp ích được cho nhiều người thì mình sẽ làm hướng dẫn trong những video tiếp theo.
Mình là Trần Hoàng Tùng, hơn 15 năm làm phần mềm và quản lý dự án, hiện tập trung vào AI Automation cho doanh nghiệp vừa và nhỏ tại Việt Nam. Nếu doanh nghiệp của các bạn đang có quy trình thủ công lặp đi lặp lại và muốn tìm hiểu xem có thể tự động hoá được tới đâu, các bạn có thể liên hệ với mình để trao đổi cụ thể.