Cách tạo website bằng AI với Antigravity

Nếu bạn đang vận hành một cửa hàng nhỏ, muốn có một trang web giới thiệu để gửi cho khách hàng nhưng chưa từng thiết kế web hay biết lập trình, đây sẽ là giải pháp dành cho bạn. Bài viết này sẽ hướng dẫn cách sử dụng tiếng Việt để yêu cầu Antigravity tự động tạo trang web trực tiếp trên máy tính, sau đó đưa lên nền tảng Cloudflare Pages để công khai cho người dùng, cũng như cách cập nhật lại bảng giá khi cần. Có một chỗ bạn nên biết trước: hạn mức AI của gói miễn phí có thể hết ngay giữa lúc bạn đang sửa dở.

1. Kết quả thực tế của website hoàn chỉnh

Dưới đây là giao diện thành phẩm được đưa lên mạng trong demo thực tế của bài viết. Website sử dụng "Xưởng Nến Mộc" làm cửa hàng mẫu (toàn bộ tên thương hiệu, danh mục sản phẩm, bảng giá và thông tin liên hệ đều là dữ liệu giả định). Bố cục trang bao gồm 4 loại nến kèm giá bán, địa chỉ, giờ mở cửa và hai nút chức năng giúp khách hàng gọi điện hoặc nhắn tin Fanpage nhanh chóng.

Khác biệt của Antigravity so với các công cụ khác là không hỗ trợ lưu trữ (host) trang web hộ bạn. Hệ thống chỉ khởi tạo 3 file mã nguồn nằm trong một thư mục cục bộ trên máy tính cá nhân. Để khách hàng có thể truy cập, bạn bắt buộc phải tải thư mục này lên một dịch vụ lưu trữ web. Bài viết sử dụng Cloudflare Pages, giúp trang web có một đường dẫn chính thức dạng tên-dự-án.pages.dev.

Đổi lại bạn toàn quyền sở hữu và quản lý tập tin nguồn trên máy. Khi muốn điều chỉnh giá bán, bạn chỉ cần nhờ Antigravity sửa file trên máy tính, sau đó tải lại thư mục lên đúng dự án cũ trên Cloudflare. Lưu ý rằng nếu bạn chỉ sửa file ở máy cá nhân mà chưa tải lên máy chủ, khách hàng khi truy cập vào đường dẫn cũ vẫn sẽ thấy nội dung chưa cập nhật.

Trang web demo sẽ dừng lại ở mức độ giới thiệu sản phẩm và cung cấp kênh liên hệ. Các tính năng thương mại điện tử chuyên sâu như giỏ hàng, thanh toán trực tuyến hay quản lý tồn kho đều không tích hợp. Khi hoạt động kinh doanh mở rộng và cần các phân hệ này, bạn bắt buộc phải nhờ lập trình viên chuyên nghiệp thiết lập và kiểm thử độ an toàn.

2. Những điều cần chuẩn bị trước khi thực hành

Antigravity là một phần mềm do Google phát triển, tương thích với các hệ điều hành Windows, macOS và Linux. Bạn cần tải ứng dụng về máy và đăng nhập bằng tài khoản Google. Ngoài ra, bạn cần chuẩn bị một tài khoản Cloudflare (để xuất bản trang) và một trình duyệt web.

Trước khi khởi động Antigravity, hãy soạn sẵn ra file ghi chú các dữ liệu cần thiết: tên cửa hàng, đoạn giới thiệu ngắn, danh sách sản phẩm kèm giá, giờ mở cửa, địa chỉ, số điện thoại và liên kết Fanpage. Việc đối chiếu lại thông tin sau khi AI khởi tạo là bước bắt buộc.

Về ngân sách, nếu bạn sử dụng tên miền mặc định do Cloudflare cấp, các khoản phí thực tế được thống kê như sau:

Bạn dùng gói nào	Tiền AI mỗi tháng	Tiền giữ trang trên Cloudflare Pages	Tên miền riêng	Tổng mỗi tháng
Antigravity gói Individual, còn trong hạn mức	0 đồng	0 đồng với trang tĩnh như bài này	Không mua	0 đồng
Antigravity qua gói Google AI Pro	489.000 đồng	0 đồng với trang tĩnh như bài này	Không mua	489.000 đồng

Trang tĩnh (Static Site) là dạng trang web vận hành hoàn toàn dựa trên các tập tin cố định bao gồm văn bản, cấu trúc trình bày và các nút chức năng. Trang web trong bài viết thuộc dạng này nên hạ tầng Cloudflare Pages hoàn toàn không thu phí.

Về hạn mức tài nguyên AI: Tài khoản Individual miễn phí tính hạn mức theo tuần và có thể chạm ngưỡng giới hạn bất ngờ ngay trong quá trình thực hành. Trong demo của bài viết, hệ thống đã báo chạm trần hạn mức 2 lần (lần thứ hai đã chặn thao tác thay đổi giá). Do đó, bạn không nên kỳ vọng sẽ hoàn thành trọn vẹn việc khởi tạo và tinh chỉnh chỉ trong một buổi làm việc.

Về bảo mật dữ liệu: Theo điều khoản dịch vụ của Antigravity, Google có thể sử dụng dữ liệu tương tác để đánh giá và cải thiện các mô hình của họ. Tuy nhiên, bạn có thể chủ động điều chỉnh tùy chọn này trong phần cài đặt tài khoản. Để bảo vệ quyền riêng tư, bài viết khuyến nghị bạn nên sử dụng dữ liệu giả định và tuyệt đối không nhập thông tin cá nhân thật của khách hàng vào hệ thống.

3. Cách mô tả cửa hàng cho AI dựng trang

Bước 1. Gửi mô tả trang cho Antigravity.

Bạn gõ yêu cầu bằng tiếng Việt vào khung chat của Antigravity rồi gửi. Nói rõ trang này làm cho cửa hàng nào, bán gì, giá bao nhiêu và khách liên hệ bằng cách nào. Gõ hết thành một đoạn rồi gửi một lần, không cần chia nhỏ ra hỏi từng câu.

Đoạn mô tả dùng chung cho cả series là đoạn này, bạn thay thông tin cửa hàng mình vào:

Mình có một cửa hàng nến thơm nhỏ tên là Xưởng Nến Mộc, bạn làm giúp mình một trang web giới thiệu cửa hàng nhé. Cửa hàng mình làm nến sáp đậu nành thủ công ở Đà Lạt, mùi hương lấy từ cỏ cây quanh vùng, mỗi mẻ chỉ làm 30 cây. Trang cần có 4 sản phẩm kèm giá: Nến Thông Đà Lạt 185.000đ, Nến Sả Chanh 165.000đ, Nến Cà Phê Sữa 195.000đ, Nến Hoa Hồng Cổ 210.000đ. Giờ mở cửa 9h đến 18h, thứ Hai đến Chủ nhật. Địa chỉ 42 Trần Hưng Đạo, Phường 10, Đà Lạt. Số điện thoại 0900 000 000, Facebook fb.com/xuongnenmoc. Mình muốn trang trông ấm áp, mộc mạc, có nút gọi điện và nút nhắn Facebook, xem trên điện thoại cũng đẹp.

Bước 2. Đọc kế hoạch rồi bấm Proceed.

Antigravity không bắt tay vào làm ngay. Nó liệt kê ra kế hoạch định làm rồi dừng lại chờ bạn đồng ý, nên màn hình đứng im ở đó là bình thường chứ không phải máy đang treo. Bạn đọc lướt kế hoạch xem có đúng ý không rồi bấm nút Proceed. Ở demo này, từ lúc bấm Proceed tới lúc file đầu tiên xuất hiện trên máy mất khoảng một phút rưỡi.

Bước 3. Tìm thư mục Antigravity vừa tạo.

Antigravity tạo một thư mục tên xuong-nen-moc nằm trong đường dẫn .gemini/antigravity/scratch/ trên máy. Bên trong có đúng ba file: index.html, styles.css và app.js. Ba file này hợp lại thành trang web, nên bạn giữ nguyên cả thư mục, đừng tách lẻ ra.

Trên máy Mac bạn mở thư mục bằng Finder, trên máy Windows thì mở bằng File Explorer. Bạn không cần đọc hiểu chữ bên trong các file mà chỉ nên quan tâm đến kết quả sau khi mở.

4. Kiểm tra và sửa nội dung do AI viết

Trang hiện ra đủ các phần không có nghĩa là nội dung bên trong đã đúng. Bạn mở từng phần ra đọc và so với bản ghi chú đã soạn, đừng chỉ nhìn xem giao diện có bắt mắt hay không.

Bước 1. Nói rõ thư mục cần sửa và nội dung cần thay thế.

Bạn ghi rõ đường dẫn thư mục dự án rồi nói từng chỗ muốn sửa, và nói luôn là chỉ sửa file trên máy chứ chưa đưa lên mạng. Nói rõ như vậy thì lát nữa bạn mới đối chiếu được nó làm đúng chưa.

Bước 2. Nếu hết hạn mức thì đổi model rồi nhắc lại.

Giữa lúc đang sửa, Antigravity dừng lại và báo Model quota reached, tức mô hình AI đã hết hạn mức, kèm một dòng cho biết hạn mức sẽ được cấp lại vào ngày xx/yy. Lúc này file trên máy vẫn giữ nguyên nội dung cũ, chưa sửa gì.

Bạn bấm nút Select another model, tức chọn mô hình khác, rồi chọn một mô hình còn lượt dùng. Ở lần chạy này mình đổi sang Claude Sonnet 4.6 (Thinking) và làm tiếp được mà không phải nâng gói hay trả thêm gì cả. Đổi xong, bạn nhắc lại yêu cầu bằng một câu ngắn:

Tiếp tục sửa các file của dự án Xưởng Nến Mộc theo đúng yêu cầu ở trên. Model trước đã hết hạn mức trước khi sửa. Chỉ sửa nội dung cần thiết, không triển khai.

Bước 3. Đọc lại trang sau khi AI báo xong.

Antigravity báo 3 files changed, tức đã sửa ba file, kèm nút Review để xem lại. Mình đối chiếu thì tên nến, mức giá, số điện thoại, đường dẫn Facebook, địa chỉ và giờ mở cửa đều đúng.

Nhưng trang vẫn còn sót ba câu nhắc khách nhắn qua Zalo, nằm ở phần giới thiệu bộ sưu tập, phần cam kết và phần hướng dẫn đặt hàng, trong khi đề bài chỉ có Facebook. Mình phải yêu cầu sửa thêm một lần nữa.

Bạn cũng nên để ý các câu cam kết về giao hàng, thanh toán khi nhận hàng và mô tả sản phẩm. Những câu đó do AI tự viết theo mẫu chứ không phải thông tin thật của cửa hàng bạn, nếu thấy không đúng thì bảo nó bỏ đi.

5. Xuất bản website lên Cloudflare Pages

Bạn sẽ cần tải cả thư mục này lên Cloudflare Pages, thực tế thao tác trên màn hình có nhiều bước hơn so với tài liệu chính thức của hãng, mình đã ghi lại đúng thứ tự trải nghiệm thực tế:

Bước 1. Vào mục tạo ứng dụng.

Trong bảng điều khiển Cloudflare, bạn bấm Compute ở menu bên trái rồi chọn Workers & Pages.

Sau đó bạn bấm nút Create application, tức tạo ứng dụng mới.

Bước 2. Chuyển sang Pages.

Màn hình hiện ra tên Create an app, và yêu cầu chọn kết nối với GitHub hoặc GitLab, bạn sẽ không chọn các option đó. Bạn tìm dòng chữ nhỏ Need to use the legacy Pages workflow? Continue to Pages rồi bấm vào Continue to Pages.

Màn hình tiếp theo có hai thẻ, mỗi thẻ đều có một nút Get started giống hệt nhau. Bạn bấm đúng nút nằm trong thẻ Drag and drop your files, tức thẻ kéo thả file.

Bước 3. Đặt tên dự án.

Ở màn hình Direct Upload, bạn nhập tên vào ô Project name rồi bấm Create project.

Cloudflare báo địa chỉ trang sẽ là tên-dự-án.pages.dev và mở ra một khung lớn để nhận file.

Bước 4. Chọn cả thư mục.

Khung nhận file ghi Drag in or click to upload a file or folder., tức kéo vào hoặc bấm để tải lên một file hay một thư mục. Bạn bấm vào chữ folder để mở hộp chọn thư mục, rồi tìm đúng thư mục xuong-nen-moc có đủ ba file và bấm Upload.

Chrome hỏi lại Upload 3 files to this site?, tức có tải ba file lên trang này không. Bạn kiểm lại đúng tên thư mục rồi bấm Upload thêm lần nữa.

Bước 5. Deploy.

Khi màn hình báo 3/3 files uploaded, tức đã nhận đủ ba file, bạn bấm nút Deploy site.

Ở bước này, chưa tới nửa phút sau khi bấm là màn hình báo thành công và hiện ra địa chỉ trang web của bạn.

Bước 6. Kiểm tra thực tế trên thiết bị.

Bạn mở địa chỉ vừa nhận bằng một cửa sổ ẩn danh để xem đúng những gì người khác thấy. Ở bước này nếu trang mở ra bình thường, không cần đăng nhập Cloudflare là bạn đã thành công.

Nhấp thử nút gọi điện và nhắn tin. (Nếu đường dẫn hay số điện thoại là dữ liệu giả định, trình duyệt chỉ kích hoạt lệnh mở ứng dụng hoặc báo trang không tồn tại trên Facebook. Với trang thật, bạn cần kiểm tra trực tiếp trên điện thoại cá nhân).

Thu hẹp chiều rộng trình duyệt về khoảng 430px để kiểm tra khả năng co dãn (responsive). Đảm bảo văn bản dồn thành 1 cột và hai nút liên hệ được ghim cố định ở cạnh dưới màn hình.

6. Các lỗi hay gặp và cách xử lý

• Hết hạn mức AI giữa chừng: Nhấp vào Select another model để chuyển sang AI khác. Nếu sử dụng tài khoản Google AI Pro (trả phí), hiện tượng nghẽn hạn mức này gần như không xảy ra.
• Màn hình đứng yên ở bước Kế hoạch: Đây không phải lỗi treo máy; Antigravity đang chờ bạn kiểm tra và nhấp nút Proceed để bắt đầu tạo tập tin.
• Văn bản mẫu cũ vẫn tồn tại: AI chỉ thay đổi cấu trúc nút bấm mà quên xóa văn bản trong các đoạn văn dài. Bạn cần khoanh vùng chính xác câu văn sai và yêu cầu AI xóa bỏ trực tiếp.
• Không tìm thấy luồng tải thư mục trên Cloudflare: Tránh nhấp vào các ô liên kết GitHub/GitLab lớn. Hãy tìm đúng dòng chữ nhỏ Continue to Pages, sau đó chọn nút Get started trong phần Drag and drop your files.
• Lỗi 404 khi truy cập: Xảy ra khi bạn chỉ tải lên lẻ tẻ từng tập tin (như file index.html). Giải pháp khắc phục triệt để là luôn tải lên nguyên vẹn thư mục chứa đầy đủ 3 tập tin mã nguồn.

7. Cập nhật giá bằng cách tải lại thư mục

Khi cửa hàng điều chỉnh giá bán (ví dụ: tăng giá Nến Thông Đà Lạt từ 185.000đ lên 195.000đ), bạn thực hiện theo quy trình sau:

Bước 1. Nhờ Antigravity sửa đúng sản phẩm.

Bạn gõ rõ tên món, giá cũ, giá mới, và nhắc giữ nguyên ba sản phẩm còn lại. Đợi Antigravity báo sửa xong trên máy rồi mới tải thư mục lên Cloudflare.

Bước 2. Tải bản cập nhật lên Cloudflare.

Trong dự án Cloudflare đã tạo, bạn bấm Create deployment, tức tạo lần đăng mới. Ở mục Select your deployment environment, tức chọn nơi đăng, bạn chọn Production.

Chọn Production hay Preview cho ra hai kết quả hoàn toàn khác nhau. Chọn Production thì nội dung mới ghi đè lên chính địa chỉ khách đang xem. Chọn Preview thì Cloudflare tạo một địa chỉ riêng theo tên bạn đặt, còn địa chỉ chính vẫn giữ nội dung cũ. Mình đã thử nhánh Preview và địa chỉ chính vẫn hiện giá cũ y nguyên. Nên nếu bạn lỡ chọn Preview rồi báo khách là đã đổi giá, khách mở địa chỉ cũ vẫn sẽ thấy giá cũ.

Bạn tải lại cả thư mục ba file, đợi màn hình báo nhận đủ, rồi bấm Save and deploy.

Bước 3. Kiểm tra chính địa chỉ đã gửi cho khách.

Bạn mở lại đúng địa chỉ đó bằng cửa sổ ẩn danh và tải lại trang. Khoảng nửa phút sau khi bấm Save and deploy thì giá mới 195.000đ mới hiện ra. Vừa bấm xong mà mở lên vẫn thấy giá cũ là chuyện bình thường, bạn đợi một lát rồi tải lại, đừng bấm đăng thêm lần nữa.

Bước 4. Đưa về giá cũ khi cần.

Bạn nhờ Antigravity sửa giá về 185.000đ, giữ nguyên các sản phẩm khác, rồi tải cả thư mục lên Production và bấm Save and deploy như lần trước. Lần này chỉ vài giây là địa chỉ cũ đã hiện lại giá 185.000đ. Cách làm ở đây là sửa nội dung rồi đăng đè lại, chứ không phải bấm nút khôi phục phiên bản của Cloudflare.

Việc ghi đè phiên bản mới không xóa bỏ hoàn toàn phiên bản cũ khỏi internet. Khách hàng nếu có liên kết của lần đăng trước (dạng mã-lần-đăng.tên-dự-án.pages.dev) vẫn có thể xem được thông tin cũ. Do đó, nếu có thông tin nhạy cảm cần loại bỏ hoàn toàn, việc đè bản mới là chưa đủ.

Bước 5. Gỡ hẳn website khi không muốn công khai nữa.

Trong trường hợp ngừng kinh doanh và muốn xóa trang web hoàn toàn: Truy cập dự án trên Cloudflare -> chọn Settings -> General -> kéo xuống cuối trang nhấp Delete. Hệ thống sẽ yêu cầu bạn nhập lại chính xác tên dự án để xác nhận xóa vĩnh viễn. Thao tác này sẽ gỡ trang web khỏi máy chủ internet nhưng không làm mất thư mục mã nguồn đang lưu trên máy tính cá nhân của bạn

Xoá xong, bạn mở lại địa chỉ cũ trong cửa sổ ẩn danh để chắc chắn trang đã tắt. Trang có thể vẫn còn hiện ở lần tải lại đầu tiên, khoảng hơn hai mươi giây sau mới báo lỗi Error 1016 / Origin DNS error và không còn mở được nữa. Thư mục website trên máy bạn vẫn còn nguyên, xoá dự án trên Cloudflare không làm mất file trên máy cá nhân.

Nguồn tham khảo

• Google — Các gói Antigravity và hạn mức.
• Google One — Giá gói Google AI Pro cho người dùng ở Việt Nam.
• Google — Điều khoản Antigravity và cách sử dụng dữ liệu tương tác.
• Cloudflare — Đưa website lên Pages bằng cách kéo thả.
• Cloudflare — Chi phí phục vụ file website trên Pages.