Vibe Coding tạo website chùa online bằng AI: hướng dẫn có prompt

Một website có mái chùa, hồ sen và tiếng chuông là bài thực hành dễ hình dung khi bắt đầu xây sản phẩm bằng AI. Bạn mô tả trải nghiệm mong muốn, để công cụ tạo mã, mở kết quả và sửa từng lỗi nhìn thấy. Phần cần học không dừng ở việc viết một câu lệnh thật dài: bạn phải biết sản phẩm đã làm được gì, chưa làm được gì và có thể đưa lên Internet theo cách nào.

Onter đã xây demo Hiên an nhiên để minh họa quy trình đó. Đây là website tĩnh có chuyển sáng/tối, chuông chủ động bật/tắt, bộ đếm nghỉ một phút và prompt có thể sao chép. Nó không có phòng nhiều người, đăng nhập, chat, upload hay thanh toán. Không gian được vẽ riêng bằng SVG, không lấy tài nguyên của Sansa và không đại diện cho một nghi lễ tôn giáo thực tế.

Ngày 07/11/2026, địa chỉ Chùa Online chính mở trải nghiệm 2D nhẹ; bản 3D dùng thử của Onter có sân chùa, chính điện và vườn thiền. Hai liên kết phục vụ hai phiên bản khác nhau. Bản 3D chưa thay thế website chính tại thời điểm kiểm tra. Cả hai đều là không gian mô phỏng, không đại diện cho một ngôi chùa thật.

Bản 3D dùng thử: đọc hướng dẫn WASD, joystick và tương tác trước khi đi

Thực hành khám phá bản 3D trước khi viết prompt

Mở bản trải nghiệm 3D rồi chọn Bước vào chùa. Đọc hướng dẫn ngắn và chọn Đã hiểu. Trên máy tính, dùng WASD để di chuyển, kéo chuột để nhìn; trên điện thoại dùng joystick và vuốt. Nhân vật hướng dẫn trong sân là một thành phần của cảnh, không phải người dùng trực tuyến khác.

Mở Bản đồ không gian, chọn Chính điện và đợi dẫn đường đi theo lối. Khi tới gần chuông, nút Gõ chuông xuất hiện; có thể chạm nút hoặc nhấn E. Nếu muốn nghe tiếng ngân, chủ động bật âm thanh. Gõ chuông khi đang tắt tiếng chỉ tạo phản hồi hình ảnh và thông báo, không có nghĩa loa đã phát âm.

Từ bản đồ, chọn Một nén hương ảo để tới điểm tương tác riêng. Tới gần rồi chọn thắp hương; đây là hiệu ứng trong trình duyệt, không gửi lời cầu nguyện hay thông tin cá nhân tới cơ sở tôn giáo. Dẫn đường có thể dừng bằng nút Dừng hoặc bằng cách tự di chuyển.

Chọn Vườn thiền, tới gần hồ sen rồi mở Ngồi thiền. Hộp chọn có chuông nhẹ, tiếng suối, gió và chim, nhạc không lời hoặc im lặng; thời lượng 1, 3, 5 phút hoặc không hẹn giờ. Âm thanh vẫn do bạn bật. Chọn Bắt đầu tĩnh tâm, và kết thúc sớm khi muốn. Không xem timer hoặc nhạc là phương pháp điều trị.

Trong Cài đặt, điều chỉnh âm lượng, nhạc thiền nền, sáng/tối và chất lượng Low/Medium/High. Thiết bị yếu nên thử Low trước. Tùy chọn tự ẩn HUD giúp bớt lớp điều khiển che cảnh. Khi kiểm một thay đổi, thử lại đường đi, nút tương tác và cách đóng hộp thoại, thay vì chỉ nhìn ảnh mở đầu.

Prompt mở rộng từ bản nhẹ lên không gian 3D

Sau khi bản HTML/CSS/JavaScript nhẹ đã chạy đúng, lưu một mốc Git rồi yêu cầu nâng cấp riêng. Đừng thay đồng thời kiến trúc, nội dung và cơ chế âm thanh mà không có điểm kiểm lại.

Giữ bản nhẹ làm phương án dự phòng. Dùng Three.js phiên bản cố định để dựng
một sân chùa nguyên bản, chính điện và vườn hồ sen có lối đi liên tục.
Thêm WASD, kéo nhìn, joystick mobile và tương tác theo khoảng cách.
Có nhân vật hướng dẫn nhẹ; bản đồ dẫn đường theo lối, có thể dừng.
Chuông, hương ảo và ngồi thiền có phản hồi rõ; nhạc chỉ phát sau lựa chọn.
Thiền chọn 1/3/5 phút hoặc không hẹn giờ, có im lặng và kết thúc sớm.
Giữ UI tiếng Việt, SVG icon thống nhất, font có dấu đầy đủ, safe area.
Không chat, tải file, tài khoản, thanh toán hay giả số người đang online.
Ghi nguồn và giấy phép từng model/texture; giới hạn kích thước tài nguyên.
Kiểm WebGL không hỗ trợ, 390/768/1440px, bộ nhớ sau nhiều lượt tương tác.
Báo phần đã kiểm thật và phần còn thiếu; không tự tuyên bố chịu tải lớn.

Đây là prompt tái tạo phạm vi, không phải cam kết một lần chạy sẽ cho cùng cảnh. Three.js, chất liệu, mô hình, âm thanh và HUD cần được kiểm riêng. Khi dùng tài nguyên ngoài, giữ hồ sơ giấy phép theo đúng tài nguyên; việc có thể tải file không tự cấp quyền thương mại.

Xác định phiên bản đầu tiên có thể kiểm thử

Chốt một luồng nhỏ: mở trang, chủ động bật tiếng, gõ chuông, đổi sáng/tối và dừng nghỉ bất cứ lúc nào. Ghi kết quả mong muốn cho từng nút. Bắt đầu bằng bản nhẹ giúp hiểu mã trước khi thêm điều hướng 3D; phòng chung, upload và thanh toán là phạm vi riêng, không cần để chứng minh giao diện hoạt động.

Chọn cấu trúc công nghệ vừa đủ

Bản 2D dùng HTML, CSS, JavaScript và cảnh SVG nguyên bản; bản 3D dùng Three.js phiên bản cố định. Lưu nguồn trong Git, giữ đường dẫn rõ và phương án quay lại mốc đã chạy. Tạo các file index.html, style.css, app.js, temple.svg, lotus.svg cho bước đầu. Khi cần dữ liệu dùng chung hoặc tài khoản, thiết kế thêm máy chủ và phân quyền thay vì giả lập bằng giao diện.

Chuông lớn trong chính điện 3D và nút Gõ chuông của Onter

Bản 3D dùng thử: tới gần chuông để nút tương tác xuất hiện

Prompt tiếng Việt cho lần dựng đầu

Bạn có thể sao chép prompt sau, thay tên và phong cách bằng ý tưởng của mình:

Tạo website tĩnh “Hiên an nhiên” bằng HTML, CSS và JavaScript thuần.
Vẽ khung cảnh chùa Việt nguyên bản bằng SVG, không sao chép Sansa.
Giao diện responsive từ 390px, phông hệ thống, màu xanh trầm và nền giấy.
Thêm chuyển ban mai/chiều tối, chuông Web Audio chỉ phát sau thao tác
người dùng, nút tắt mọi âm đang phát và bộ đếm nghỉ 60 giây có thể dừng.
Tôn trọng prefers-reduced-motion; dùng button thật và tên dễ hiểu.
Không thêm tài khoản, chat, upload, thanh toán hoặc API AI ở trình duyệt.
Ghi rõ đây là minh họa công nghệ, không phải nghi lễ thực tế.
Tách index.html, style.css, app.js và SVG; không dùng thư viện ngoài.
Trình bày cách chạy local, các giới hạn và các bước kiểm thử trước deploy.

Prompt mô tả cả điều cần có và điều cần tránh. Không có câu lệnh nào bảo đảm một lần sinh mã sẽ chạy đúng. Sau khi nhận file, mở bản local rồi chọn từng nút để kiểm chứng. Đọc danh sách dependency, các địa chỉ mạng và nơi dữ liệu được lưu trước khi đưa dự án lên hosting.

Sửa theo một lỗi cụ thể mỗi lần

Khi thấy lỗi, nêu thiết bị, thứ tự thao tác, kết quả thực tế và mong muốn. Ví dụ: “Ở 390px, sau khi mở cài đặt, nút đóng bị che; tìm nguyên nhân và sửa trong phạm vi hộp thoại, giữ các chức năng khác”. Đọc diff, chạy lại luồng liên quan rồi lưu mốc. Không nhận một lần sửa quá rộng mà bạn không thể kiểm chứng.

Tạo hình ảnh và âm thanh có quyền sử dụng rõ ràng

Khung cảnh của demo được vẽ riêng bằng SVG: mái chùa, cây, lối đá và hồ sen là các hình vector. Nó phù hợp với bố cục nhẹ và có thể đổi sắc bằng CSS. Bạn có thể vẽ bằng công cụ đồ họa hoặc dùng tài nguyên có giấy phép phù hợp; luôn giữ nguồn, điều kiện sử dụng và thông tin tác giả khi cần.

Không tải nguyên hình, mô hình hoặc âm thanh từ một website nổi tiếng rồi mặc định được dùng lại. Một ảnh tìm thấy qua Google không đồng nghĩa với ảnh miễn phí thương mại. Nếu dùng ảnh AI, vẫn cần xem xét quyền sử dụng của công cụ và kiểm tra chi tiết hình trước khi đưa vào sản phẩm.

Bản V2 dùng Lora cho tiêu đề và Be Vietnam Pro cho nội dung, tự lưu các font có giấy phép trên subdomain. Tiếng chuông trong demo là âm tổng hợp bằng Web Audio, không phải bản ghi tại một ngôi chùa. Theo hướng dẫn autoplay của MDN, trình duyệt có thể chặn âm thanh chưa có tương tác người dùng. Vì vậy, hãy mặc định tắt, cho người dùng tự chọn bật và cung cấp đường thoát rõ ràng.

Kiểm thử trước khi đưa lên Internet

Ở giao diện điện thoại, kiểm thanh điều hướng, chiều dài tiêu đề, vùng bấm và toàn bộ phần cuối trang. Một ảnh chụp hero đẹp chưa cho biết footer có tràn hay hộp thoại có bị cắt. Chụp cả trang tại 390px và 1440px, mở từng ảnh để đọc, đồng thời kiểm ảnh đã tải đầy đủ.

Với tương tác, hãy thử chuông khi đang tắt tiếng, bật rồi gõ, gõ liên tục, tắt khi còn tiếng và chuyển sang tab khác. Với timer, kiểm bắt đầu, dừng, khởi động lại và hoàn thành đủ 60 giây. Đừng dùng việc đổi nhãn nút làm bằng chứng duy nhất cho âm thanh: kiểm trạng thái AudioContext và nguồn âm, hoặc nghe bằng thiết bị thực tế.

Về bảo mật, demo không cần endpoint nhận dữ liệu. Kiểm POST và PUT bị từ chối, đường dẫn .env, .git và PHP không được phục vụ, HTTPS đúng hostname và không tải tài nguyên qua HTTP. Các header như CSP giảm những đường thực thi ngoài dự kiến, nhưng không thay việc đọc mã và kiểm thử chức năng.

Hộp chọn âm thanh và thời gian ngồi thiền bên hồ sen 3D

Bản 3D dùng thử: tự chọn âm thanh, thời lượng hoặc im lặng

Triển khai subdomain với HTTPS và rollback riêng

Kiểm DNS, virtual host, cổng, chứng chỉ và tài nguyên trước khi triển khai. Dùng cấu hình riêng, kiểm cú pháp và hash trước/sau; rollback chỉ tác động phần thay đổi còn khớp hash. Không chép đè cấu hình các website khác. Với CDN hoặc static hosting, xác minh custom domain và HTTPS trước khi đổi DNS; giữ địa chỉ cũ tới khi đường mới được kiểm từ bên ngoài.

Hiểu đúng kết quả đo tốc độ và lượng truy cập

Các số đo tốc độ của một phiên kiểm thử bản 2D không đại diện cho cảnh 3D hoặc thiết bị của mọi người. Khi đo, ghi rõ phiên bản, trình duyệt, thiết bị, mạng và trạng thái cache; kiểm tra tải tài nguyên và độ mượt tương tác riêng.

Không chạy stress test trên VPS dùng chung khi tài nguyên đang thiếu. Muốn đánh giá tải lớn, cần môi trường và giới hạn được thống nhất, đo CPU, RAM, độ trễ, lỗi và ảnh hưởng tới các dịch vụ liên quan. Kiến trúc tĩnh giảm phần xử lý máy chủ, nhưng đường truyền, TLS và tài nguyên dùng chung vẫn có giới hạn.

Bản V2 của demo cho phép index,follow, có canonical tự tham chiếu và sitemap cho trang chủ. Subdomain phục vụ người muốn trải nghiệm; bài hướng dẫn chuyên sâu thuộc Onter.vn và không được chép sang demo. Cho phép index và gửi yêu cầu không bảo đảm Google đã lập chỉ mục. Ngày 07/11/2026, Search Console xác nhận trang chủ demo đã được lập chỉ mục; điều đó không xác nhận trạng thái của các URL bài hướng dẫn khác. Tài liệu Google về noindex giải thích vì sao chặn crawl có thể khiến bot không đọc được noindex.

Ứng dụng quy trình vào website kinh doanh

Giữ cách chốt phạm vi và kiểm từng luồng khi chuyển sang website doanh nghiệp. Form, tài khoản, đơn hàng và thanh toán cần máy chủ, bảo mật và vận hành riêng. Xem dịch vụ website Onter hoặc giải pháp AI nếu cần xác định trách nhiệm triển khai.

Câu hỏi thường gặp

Không biết lập trình có bắt đầu được không?

Bạn có thể bắt đầu bằng demo tĩnh nhỏ và nhờ AI giải thích từng file. Tuy nhiên, bạn vẫn phải biết chạy bản thử, mô tả lỗi và nhận ra khi sản phẩm cần chuyên gia hỗ trợ. Không nên đưa dữ liệu thật vào một hệ thống chỉ mới nhìn có vẻ hoạt động.

Có cần dùng 3D để tạo chùa online không?

Không. SVG, ảnh có bản quyền phù hợp hoặc CSS có thể đủ cho một trải nghiệm nhẹ. 3D phù hợp khi điều hướng không gian là mục tiêu cốt lõi, đổi lại cần quản lý tài nguyên, tương thích thiết bị và kiểm thử nhiều hơn.

Có thể thêm người chơi trực tuyến ngay sau demo không?

Đó là một phạm vi mới. Bạn cần thiết kế phòng, đồng bộ trạng thái, xử lý mất kết nối, giới hạn kết nối và vận hành. Không thể suy ra năng lực nhiều người từ một trang chỉ chạy tương tác cục bộ.

Có thể sao chép prompt rồi xuất bản ngay không?

Hãy dựng bản local, kiểm thử và xem lại nguồn trước. Prompt chỉ là điểm khởi đầu; bằng chứng chạy thực tế, quyền tài nguyên, HTTPS và rollback mới là phần quyết định khả năng đưa sản phẩm lên mạng.

Hồ sen và nút Ngồi thiền trong vườn 3D của Onter

Bản 3D dùng thử: khu vườn hồ sen có điểm ngồi thiền