Bài 2 — Dựng trang web đầu tiên bằng lời nói, và file CLAUDE.md “bộ não dự án”

Học xong bài này, anh chị tự dựng được một trang web hoàn chỉnh bằng Claude Code mà không viết một dòng code, hiểu file CLAUDE.md là gì và vì sao nó quyết định máy làm giỏi hay làm dở, và nắm ba cách ra đề thiết kế mà dân làm nghề đang dùng. Đây là bài “làm thật” đầu tiên, anh chị nên vừa đọc vừa mở máy làm theo.

Chọn chỗ làm việc: Antigravity, người anh em của VS Code

Bài 1 tụi em đã cài Claude Code trong terminal và trong VS Code. Còn một lựa chọn nữa đáng biết: Antigravity (tải tại antigravity.google, chọn đúng bản hệ điều hành của máy). Nó do Google làm, xây trên nền VS Code nên bố cục giống hệt: cột trái là cây thư mục, giữa là chỗ sửa file, phải là khung chat với AI. Khác biệt: giao diện đời mới hơn và thiên hẳn về AI.

Một lưu ý nhỏ khi dùng Claude Code trong Antigravity: vì đây là sản phẩm của Google nên khung chat mặc định là Gemini của họ. Muốn dùng Claude Code, anh chị cài tiện ích Claude Code (như đã làm với VS Code ở bài 1), rồi bấm vào biểu tượng Claude để mở khung chat Claude Code thay cho khung mặc định. Dùng IDE nào không quan trọng bằng việc anh chị dùng thạo; trong khoá này tụi em thao tác chính trên terminal, chỗ nào cần nhìn file trực quan thì mở IDE.

CLAUDE.md: lời dặn được nhét vào đầu MỌI cuộc trò chuyện

Trước khi xây gì, phải hiểu khái niệm quan trọng bậc nhất của cả khoá: file CLAUDE.md đặt trong thư mục dự án.

Cơ chế của nó đơn giản mà lợi hại: mỗi lần anh chị mở một phiên Claude Code trong thư mục đó, nội dung file này được tự động nhét vào đầu cuộc trò chuyện, trước cả câu đầu tiên anh chị gõ. Nghĩa là máy luôn “đọc lời dặn” trước khi nghe anh chị nói. Anh chị không phải lặp lại quy tắc, khẩu vị, bối cảnh dự án ở từng câu lệnh nữa.

Vì sao chuyện đó quan trọng tới vậy? Hãy hình dung một con tàu rời cảng ở châu Mỹ để sang châu Phi, chạy cả chục nghìn cây số. Nếu lúc rời cảng mà lệch hướng chỉ vài độ, tới nơi nó cách đích cả nghìn cây số. AI cũng vậy: sai lệch nhỏ ở điểm xuất phát sẽ phình to qua từng bước làm việc. CLAUDE.md chính là cú chỉnh hướng lúc rời cảng: nó thu hẹp vùng “máy có thể hiểu sai” ngay từ đầu, để dù máy có lệch chút đỉnh thì kết quả vẫn sát ý mình.

Trong CLAUDE.md nên ghi gì? Ngắn gọn thôi: dự án này là gì, làm cho ai, quy tắc bắt buộc (ví dụ “web tiếng Việt, font đủ dấu, tông màu thương hiệu là gì”), và cách anh chị muốn máy làm việc. Ở MONA, mọi dự án đều có file kiểu này, và tụi em coi nó như bản mô tả công việc phát cho nhân viên mới: viết càng rõ, nhân viên càng ít hỏi ngược.

Ba cách ra đề thiết kế web đang thịnh hành

Claude Code giờ thiết kế web đẹp tới mức phần lớn các mẫu trên những trang trưng bày thiết kế xịn đều dựng lại được trong chừng mười phút. Vấn đề không còn là “máy có làm đẹp nổi không”, mà là anh chị ra đề kiểu gì. Có ba cách phổ biến:

Cách 1: đưa mẫu + cho máy tự soi gương (mạnh nhất). Anh chị đưa ảnh chụp một trang web mình thích làm mẫu, rồi cho máy quyền tự chụp lại thành phẩm của nó để so với mẫu. Vòng lặp diễn ra tự động: bản đầu giống mẫu cỡ 80%, máy chụp, so, liệt kê chỗ lệch, sửa lên 90%, rồi 95%, rồi sát nút. Anh chị không sao chép nội dung người ta, chỉ mượn cái khung thẩm mỹ: cỡ chữ, màu, kiểu nút bấm. Nội dung thay bằng chuyện làm ăn của mình.

Mẹo chụp nguyên trang dài: mở trang mẫu trong Chrome, bấm chuột phải chọn Inspect, rồi mở thanh lệnh (Command + Shift + P trên Mac, Ctrl + Shift + P trên Windows), gõ “screenshot” và chọn capture full size screenshot. Trình duyệt tự cuộn và chụp trọn trang từ đầu tới chân. Ảnh ra thường nặng, anh chị nén xuống dưới cỡ 4-5 MB (công cụ nén ảnh online nào cũng được) rồi mới đưa cho máy, đỡ tốn token.

Cách 2: xả một tràng bằng giọng nói. Người gõ phím được 50-70 từ mỗi phút, còn nói thì tới 200 từ. Dùng công cụ chuyển giọng nói thành chữ, anh chị tả một mạch mọi thứ mình muốn có trên trang: bán gì, khách là ai, cần mấy khối nội dung, thích tông gì. Cách này không ra ngay bản đẹp vì thiếu mẫu thẩm mỹ, nhưng đi vài vòng qua lại là tới, và nhanh hơn hẳn ngồi soạn văn bản mô tả.

Cách 3: lắp linh kiện có sẵn. Có những kho “linh kiện giao diện” (kiểu 21st.dev) nơi designer chia sẻ từng khối: nút bấm, khung đăng nhập, nền chuyển động. Mỗi khối có nút sao chép câu lệnh; anh chị dán vào Claude Code và nói “lắp cái này lên đầu trang”. Hợp khi anh chị muốn nhặt vài chi tiết đắt. Còn kinh nghiệm thật của người đi trước (và của tụi em): cách 1 vẫn là đường ngắn nhất cho người mới.

Bắt tay dựng: đề bài mẫu

Quy trình gọn cho lần đầu của anh chị:

1. Tạo một thư mục mới cho dự án, mở terminal tại đó, gõ claude.
2. Bỏ vào thư mục một file CLAUDE.md dặn khẩu vị thiết kế (hoặc nhờ chính Claude Code viết giúp bản đầu: “viết cho tao file CLAUDE.md cho dự án web giới thiệu công ty, chuẩn thiết kế hiện đại, tiếng Việt”).
3. Đưa ảnh mẫu đã nén + vài dòng mô tả chuyện làm ăn của anh chị, ví dụ: “Dựng trang giới thiệu cho xưởng nội thất 12 năm tuổi ở Bình Dương, khách chính là chủ căn hộ chung cư, cần khối bảng giá và nút gọi 0909 000 000. Thẩm mỹ bám theo ảnh mẫu.”
4. Enter, ngồi nhìn nó tự lên kế hoạch, tự viết, tự chụp màn hình so mẫu, tự sửa.

Trong lúc máy chạy, anh chị sẽ thấy nó hiện danh sách việc tự đặt ra rồi tick dần từng dòng. Muốn xen vào giữa chừng thì bấm dừng, dặn thêm, rồi cho chạy tiếp. Đó là nhịp làm việc bình thường với agent: mình là người ra đề và duyệt, máy là người chạy việc.

Xây xong rồi, ai xem được? Chuyện build và deploy

Thứ anh chị vừa dựng đang nằm trong máy của anh chị, người ngoài chưa xem được. Muốn cả thế giới truy cập, phải đưa nó lên mạng (dân trong nghề gọi là deploy), qua các dịch vụ như Netlify, Vercel. Chuyện này có bài riêng ở cuối khoá; giờ anh chị chỉ cần phân biệt hai khái niệm: dựng là làm ra sản phẩm trên máy mình, triển khai là đưa nó lên internet cho người khác dùng. Còn khi nào trang web đó là bộ mặt kinh doanh lâu dài, cần chuẩn chỉnh từ bảo mật tới tốc độ tải, thì đó là lúc nói chuyện với người làm chuyên (chuyện này tụi em đã phân tích kỹ trong bài agentic vibe coding cho doanh nghiệp trên mona.media).

Tự tay làm trước khi qua bài 3

1. Chọn một trang web anh chị thấy đẹp, chụp nguyên trang bằng mẹo Inspect ở trên, nén ảnh.
2. Tạo thư mục dự án + CLAUDE.md (nhờ Claude Code viết bản đầu rồi tự sửa lại theo ý).
3. Ra đề dựng trang giới thiệu cho chính công việc của anh chị theo cách 1.
4. Để ý cách máy tự chụp, tự so, tự sửa. Đếm xem nó lặp mấy vòng.

Bài 3 nói về thứ tách người dùng AI giỏi khỏi người dùng AI xoàng, và cũng là thói quen sống còn khi cho máy làm việc thật: kiểm chứng. Vì sao “nhìn có vẻ xong” chưa phải là xong, và làm sao bắt máy tự chứng minh nó làm đúng.