Làm landing page Mộc Studio với Antigravity IDE trên Windows

Bạn sẽ làm một trang giới thiệu cho Mộc Studio, dịch vụ chụp ảnh sản phẩm hư cấu, rồi sửa một tiêu đề và quay lại bản mốc. Đây là bài thực hành đầu tiên: biết giao việc, xem thay đổi và tự kiểm tra kết quả; chưa cần biết viết cả một website.

Xem trang Mộc Studio minh họa (mở tab mới) · Đầu ra mẫu, không bảo đảm mọi lần AI sinh mã giống hệt.

Trước khi bắt đầu

Công cụ và môi trường

Antigravity IDE trên Windows, mở thư mục local và dùng bảng Agent. Các lệnh trong bài dành cho PowerShell native, không dán vào Bash/WSL.

Cần chuẩn bị

Máy Windows được công cụ hỗ trợ, trình duyệt, Internet cho phiên AI và một thư mục mới có quyền ghi. Dùng dữ liệu hư cấu, không mở thư mục website thật.

Tài khoản và chi phí

Kiểm tra điều kiện tài khoản Google, quyền dùng và hạn mức đang hiển thị tại thời điểm đăng nhập. Không mặc định mọi model hoặc lượt dùng đều miễn phí. Nếu tài khoản không được hỗ trợ hoặc hết hạn mức, dừng và đọc thông báo của nhà cung cấp.

Kết quả cần có

index.html và style.css cùng thư mục; trang mở bằng trình duyệt, có liên kết tới vùng liên hệ minh họa. Trang mẫu không cần Node, database hoặc server.

Ngày đối chiếu

25/10/2026. Giao diện/quyền tài khoản có thể thay đổi. Đã kiểm đầu ra và thao tác sửa/khôi phục với chủ hỗ trợ. Cài mới/đăng nhập mới và model/chế độ duyệt chưa được kiểm chứng.

1. Chuẩn bị Antigravity IDE

Mở codelab Antigravity IDE chính thức, theo mục Installation tới trang tải IDE, chọn bản Windows phù hợp rồi cài và đăng nhập Google. Chọn Review-driven development khi thiết lập cách agent làm việc. Mở thư mục bài tập ở bước 2; bảng Agent là nơi nhập yêu cầu. Bài này dùng bản IDE có vùng xem mã; không cần cài CLI hoặc SDK.

Ứng dụng AI cần kết nối dịch vụ và quyền đọc/ghi thư mục được chọn. Chỉ dùng thư mục bài tập; đọc yêu cầu quyền trước khi đồng ý.

Đạt khi: đã vào đúng công cụ, tài khoản có quyền dùng và biết nơi chọn thư mục local. Nếu bị yêu cầu thanh toán chưa rõ, dừng tại đây.

2. Tạo một thư mục bài tập riêng

Trong File Explorer, mở một thư mục trống dành cho việc học. Gõ powershell vào thanh địa chỉ rồi Enter để mở cửa sổ nhận lệnh văn bản. Dán toàn bộ khối sau vào PowerShell, không dán vào ô chat AI. Cặp dấu ngoặc giữ các lệnh trong một khối, dừng khối nếu gặp lỗi:

& {
$ErrorActionPreference = 'Stop'
New-Item -ItemType Directory -Name moc-studio-antigravity -ErrorAction Stop
Set-Location -LiteralPath .\moc-studio-antigravity
Get-Location
}

Đạt khi: đường dẫn kết thúc bằng moc-studio-antigravity. Nếu tên đã tồn tại, lệnh phải dừng; không chọn ghi đè. Dùng thư mục cha trống khác. Trong Antigravity IDE, mở chính thư mục vừa tạo làm nơi làm việc.

3. Giao đề bài và duyệt phương án

Dán nội dung sau vào ô chat của agent, không dán vào PowerShell. “Landing page” là một trang giới thiệu tập trung vào một mục đích; trong bài là xem dịch vụ và tới vùng liên hệ minh họa.

Tôi mới học và đang ở thư mục moc-studio-antigravity trống trên Windows.
Hãy đề xuất ngắn gọn phương án landing page cho dịch vụ chụp ảnh sản phẩm HƯ CẤU Mộc Studio; chờ tôi đồng ý trước khi viết mã.
Mã trang chỉ gồm index.html và style.css, UTF-8, lang=vi, mở trực tiếp bằng trình duyệt.
Có hero, lợi ích, 3 dịch vụ, quy trình 3 bước và vùng liên hệ minh họa.
H1: "Ảnh đẹp để sản phẩm lên tiếng". CTA "Xem cách liên hệ" dẫn tới #lien-he.
Ghi rõ đây là thông tin minh họa, chưa nhận đặt lịch. Không bịa khách hàng, giá, đánh giá hoặc cam kết.
Không JavaScript, form, ảnh/font ngoài, thư viện, API, analytics, package hoặc triển khai.
Chỉ đọc/ghi thư mục bài tập. Không sửa hay xóa checkpoint-v1 nếu có.
Sau khi tôi duyệt, tạo hai file rồi giải thích cách mở và tự kiểm tra. Không nói đã chạy thử nếu chưa chạy.

Đọc implementation plan trong Artifacts: đó là bản phương án trước khi viết mã. Nếu đúng brief, gửi câu đồng ý; nếu có nút Proceed, chỉ chọn khi phương án phù hợp. Xem code diff và walkthrough sau khi agent làm xong. Walkthrough là lời giải thích của agent; bạn vẫn phải mở trang tự kiểm tra. Không tự duyệt mọi lệnh terminal hoặc quyền trình duyệt. Xem thêm tài liệu về cách xem và duyệt thay đổi.

Đạt khi: phương án chỉ có hai file, đủ các phần, không thêm đăng nhập, mua hàng, framework hay dịch vụ ngoài. Nếu đúng, gửi: “Đồng ý, hãy tạo hai file theo phương án vừa duyệt.” Nếu khác, yêu cầu sửa phương án trước.

4. Kiểm tra file thật và mở trang

Sau khi agent hoàn tất, quay lại PowerShell đang ở thư mục bài tập:

Get-Item -LiteralPath .\index.html, .\style.css

Trong File Explorer, nhấp đúp index.html hoặc chọn Open with rồi trình duyệt. Địa chỉ phải bắt đầu bằng file:///. HTML là nội dung/cấu trúc trang; CSS là cách trình bày. Hai file phải cùng thư mục, tên đúng, không thành index.html.txt.

Đạt khi: nhìn thấy tiêu đề “Ảnh đẹp để sản phẩm lên tiếng”, màu và bố cục có hiệu lực, có các phần đã giao. Nếu chỉ thấy mã trong chat, yêu cầu agent lưu file vào đúng thư mục rồi kiểm tra lại.

5. Tự thử liên kết và màn hình nhỏ

Bấm “Xem cách liên hệ”: trình duyệt phải cuộn tới phần liên hệ và URL có #lien-he. Thử các liên kết điều hướng khác. Thu hẹp cửa sổ; nếu biết Developer Tools, đặt chiều rộng 390px rồi 320px. Chữ phải đọc được, không phải kéo ngang. Thử tăng cỡ chữ trên trình duyệt.

Vùng liên hệ phải ghi rõ thông tin minh họa, chưa nhận đặt lịch; không có form gửi dữ liệu. Không coi lời “đã xong” của AI là bằng chứng trang chạy đúng.

Đạt khi: đủ nội dung, CTA tới đúng phần và bố cục vẫn dùng được khi thu hẹp. Nếu lỗi, chụp đúng vùng lỗi và mô tả điều quan sát được, không gửi tài liệu riêng.

6. Giữ bản mốc trước khi sửa

Trong PowerShell ở thư mục bài tập, chạy toàn bộ khối dưới đây. Nếu checkpoint-v1 đã tồn tại, khối phải dừng, không ghi đè mốc cũ. Kiểm tra bản đang giữ trước khi quyết định tên mốc khác.

& {
$ErrorActionPreference = 'Stop'
New-Item -ItemType Directory -Name checkpoint-v1 -ErrorAction Stop
Copy-Item -LiteralPath .\index.html, .\style.css -Destination .\checkpoint-v1\ -ErrorAction Stop
Get-ChildItem -LiteralPath .\checkpoint-v1
}

Đạt khi: checkpoint-v1 chứa cả hai file. Đây là bản mốc cho bài tập trên cùng máy, không thay sao lưu dữ liệu quan trọng. Chưa có bản mốc thì chưa sửa bước tiếp.

7. Yêu cầu một thay đổi nhỏ

Gửi vào chat agent:

Chỉ đổi h1 trong index.html thành "Hình ảnh chỉn chu cho sản phẩm của bạn". Giữ nguyên style.css, các liên kết và checkpoint-v1. Không cài thêm hoặc triển khai. Nêu file đã đổi và cách kiểm tra.

Xem diff trước khi duyệt. Sau đó quay lại trình duyệt, nhấn Ctrl+R. Tiêu đề mới phải xuất hiện; thử lại CTA và chiều rộng nhỏ. Nếu CSS hoặc bản mốc bị sửa, dừng và xem thay đổi ngoài yêu cầu trước khi tiếp tục.

Đạt khi: chỉ tiêu đề đổi, style.css và checkpoint-v1 giữ nguyên. Bạn tự quan sát trên trang, không chỉ đọc báo cáo của agent.

8. Thử quay về bản mốc

Chỉ thực hiện nếu muốn bỏ thay đổi bước 7. Hai lệnh Copy-Item sẽ thay nội dung file hiện tại; nếu cần giữ bản sửa, sao chép nó sang chỗ riêng trước. Chạy trong thư mục bài tập đã kiểm tra, không chạy trong website đang dùng.

& {
$ErrorActionPreference = 'Stop'
Get-Item -LiteralPath .\checkpoint-v1\index.html, .\checkpoint-v1\style.css -ErrorAction Stop | Out-Null
Copy-Item -LiteralPath .\checkpoint-v1\index.html -Destination .\index.html -Force -ErrorAction Stop
Copy-Item -LiteralPath .\checkpoint-v1\style.css -Destination .\style.css -Force -ErrorAction Stop
Get-Item -LiteralPath .\index.html, .\style.css
}

Đạt khi: tải lại trang thấy tiêu đề cũ “Ảnh đẹp để sản phẩm lên tiếng”, CTA và bố cục vẫn đúng. Không cần xóa thư mục hoặc cài lại công cụ.

Khi mắc lỗi

• Mở nhầm sản phẩm: kiểm tra đang ở Antigravity IDE với vùng soạn mã và bảng Agent. Tài liệu của ứng dụng quản lý agent, CLI và IDE có thể có nút khác nhau.
• Đăng nhập hoặc model không dùng được: đọc thông báo quyền tài khoản/hạn mức. Không đổi vùng, tạo tài khoản vòng hoặc bỏ kiểm tra quyền để né lỗi.
• Agent đi thẳng vào viết mã: dừng tác vụ, xem file nào đã đổi và yêu cầu trình bày phương án. Kiểm tra lại review policy trước khi tiếp tục.
• Trang không có CSS: kiểm tra tên file, cùng thư mục và đường dẫn style.css trong HTML; yêu cầu sửa đúng liên kết này.
• CTA không cuộn: kiểm tra href="#lien-he" và vùng có id="lien-he"; không tạo nút trống chỉ để giống hình mẫu.
• Chạy nhầm lệnh: dừng, ghi lại bước, kết quả mong muốn và thông báo thực tế. Không cấp thêm quyền hoặc chạy lệnh xóa để thử may.

Có thể nhờ agent: “Tôi đang ở bước …, mong thấy … nhưng thực tế … . Hãy giải thích nguyên nhân và đề xuất một sửa đổi nhỏ; chờ tôi duyệt.” Bỏ khóa API, mật khẩu, email riêng và đường dẫn nhạy cảm khỏi ảnh/thông báo trước khi chia sẻ.

Checklist tự ghi nhận

Đánh dấu chỉ giúp bạn nhớ tiến độ, không cấp chứng nhận hoàn thành. Nếu muốn thử công cụ khác, dùng thư mục riêng; không cho hai agent sửa cùng một bản.

Nguồn và phạm vi kiểm chứng

Phần thao tác sản phẩm được đối chiếu với tài liệu chính thức của Antigravity IDE ngày 25/10/2026. Có thể đọc tiếp phần Artifacts trong codelab của Google để hiểu cách phản hồi trên phương án và thay đổi.

Bài tập Mộc Studio và checklist do website biên soạn, AI hỗ trợ biên tập. Không coi tài liệu nhà cung cấp là bằng chứng đã cài, đăng nhập hoặc sinh mã bằng tài khoản thật. Đã có lượt thử chức năng ngày 25/10/2026: chủ trực tiếp dùng Antigravity IDE đổi tiêu đề; Codex đối chiếu chỉ đúng chuỗi h1 thay đổi, CSS và bản mốc giữ nguyên, kiểm trang ở 1280/390/320px rồi chạy nguyên khối PowerShell khôi phục. 88 kiểm tra sau sửa, 15 kiểm tra khôi phục và 88 kiểm tra sau khôi phục đạt. Mã đầu ra và bằng chứng được giữ. Đây là thử đầu ra có chủ hỗ trợ; chưa chứng nhận cài mới, đăng nhập mới, model hoặc chế độ duyệt. Khối lệnh/prompt trên WordPress vẫn theo cổng kiểm chứng của website, không mở bằng cách đổi định dạng.

Cùng bộ bài: Mộc Studio với Codex. Bạn chỉ cần chọn một công cụ để làm lượt đầu.

Báo lỗi nội dung này · Không gửi API key, mật khẩu hoặc dữ liệu khách hàng.