Làm landing page Mộc Studio với Claude Code 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

Claude Code trong tab Code của ứng dụng Claude desktop, môi trường Local trên Windows. 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í

Theo tài liệu desktop ngày 25/10/2026, Claude Code cần gói Pro, Max, Team hoặc Enterprise. Kiểm tra quyền truy cập và hạn mức của chính tài khoản; bài này không yêu cầu đăng ký mới, nạp tiền hoặc khóa API.

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ị Claude Code

Mở hướng dẫn desktop chính thức, tải bản Windows phù hợp rồi cài và đăng nhập. Chọn tab Code; chọn môi trường Local và mở thư mục bài tập ở bước 2. Chọn model tài khoản của bạn có quyền dùng. Chọn chế độ Manual để xem và duyệt từng thay đổi. Bản desktop tích hợp Claude Code; nhánh bài này không yêu cầu cài CLI hoặc Node.js.

Ứ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-claude -ErrorAction Stop
Set-Location -LiteralPath .\moc-studio-claude
Get-Location
}

Đạt khi: đường dẫn kết thúc bằng moc-studio-claude. 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 Claude Code, 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-claude 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.

Trong tab Code, đọc phương án rồi mới gửi câu đồng ý. Khi Claude đề xuất thay đổi trong Manual, mở phần diff: các dòng thêm/xóa cho biết điều gì sẽ thay đổi. Duyệt đúng hai file của trang mẫu. Nếu ứng dụng hiện tên nút khác, đối chiếu tài liệu desktop; đừng chuyển sang chế độ tự chấp nhận chỉ để làm nhanh. 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

• Không thấy Code hoặc bị yêu cầu nâng cấp: kiểm tra đăng nhập, phiên bản ứng dụng và quyền gói; tài khoản chat dùng được chưa chứng minh Code dùng được. Dừng trước yêu cầu mua gói nếu chưa muốn chi tiền.
• Agent thấy đường dẫn Linux: kiểm tra lại bộ chọn môi trường. Bài này dùng Local Windows; hướng dẫn WSL là nhánh khác.
• Đề xuất chưa được áp dụng: xem diff và duyệt thay đổi phù hợp trong Manual, rồi kiểm tra file thật. Tin nhắn chứa đoạn mã chưa đồng nghĩa file đã được lưu.
• 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 Claude Code ngày 25/10/2026. Có thể học tiếp tại Claude Academy — Claude Code. Chọn tài liệu đúng giao diện desktop hoặc terminal bạn đang dùng.

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 Claude Code đổ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. 40 kiểm tra sau sửa, 15 kiểm tra khôi phục và 40 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.