Landing page giới thiệu dịch vụ

Ví dụ trong dự án là giả định. “Mộc Lâm” là một xưởng mộc tưởng tượng để minh họa. Thay bằng dịch vụ của bạn: tiệm bánh, gia sư, sửa điều hòa, studio ảnh, xưởng cơ khí… Cấu trúc giống nhau.

Bạn sẽ có gì khi xong

Một trang web chạy trên điện thoại và máy tính, có tên miền miễn phí của dịch vụ deploy (hoặc tên miền riêng nếu bạn mua).
Bộ file BRIEF.md, NOTES.md, README.md và lịch sử Git sạch.
Một quy trình bạn lặp lại được cho dự án tiếp theo.

Cần biết trước: bài 1, 3, 4. Nên đọc bài 7, 8, 9 trong lúc làm. Công cụ: một chatbot hoặc agent bất kỳ, trình duyệt, Git (khuyên dùng).

Phạm vi

Có	Không có
Một trang dài, 6 khối	Giỏ hàng, thanh toán
Lưới 9 ảnh mẫu đã làm	Đăng nhập, tài khoản
Bảng giá tham khảo	Form lưu dữ liệu khách
Nút nhắn Zalo có nội dung soạn sẵn	Blog, đa ngôn ngữ
SEO cơ bản, ảnh chia sẻ	Trang quản trị

Luồng người dùng

Khách thấy link (Zalo/Facebook) → Mở trên điện thoại
→ Đọc tiêu đề: hiểu xưởng làm gì trong 5 giây
→ Lướt ảnh mẫu → Xem khoảng giá
→ Bấm "Nhắn Zalo báo giá" → Zalo mở sẵn tin nhắn

Mọi quyết định thiết kế phục vụ luồng này. Thứ gì không giúp khách đi tới nút Zalo là thứ có thể bỏ.

Bố cục 6 khối

Đầu trang: tên, một câu giá trị, nút Zalo, một ảnh sản phẩm đẹp nhất.
Mẫu đã làm: lưới 9 ảnh, mỗi ảnh có tên, loại gỗ, kích thước.
Bảng giá tham khảo: 4 loại sản phẩm, khoảng giá, dòng lưu ý.
Quy trình 4 bước: Nhắn yêu cầu → Khảo sát, báo giá → Làm, cập nhật ảnh → Giao, lắp đặt.
Hỏi đáp: 4–6 câu khách hay hỏi.
Liên hệ: nút Zalo lần nữa, địa chỉ xưởng, giờ làm việc.

Chặng 1: Brief

Dùng prompt Phỏng vấn để viết Project Brief trong thư viện. Ví dụ brief hoàn chỉnh của Mộc Lâm có trong bài Từ ý tưởng đến Project Brief. Lưu thành BRIEF.md.

Kiểm: brief có mục KHÔNG làm; có ít nhất 5 tiêu chí nghiệm thu kiểm được.

Chặng 2: Chuẩn bị nội dung thật

Đây là chặng hay bị bỏ qua nhất, và là lý do nhiều landing page trông giả. AI không biết sự thật về dịch vụ của bạn.

Chuẩn bị trong thư mục noi-dung/:

9 ảnh sản phẩm thật, đặt tên không dấu: ban-an-oc-cho.jpg.
File noi-dung.md:

## Đầu trang
Tên: Mộc Lâm
Một câu: Đồ gỗ đặt riêng theo kích thước nhà bạn, làm tại xưởng ở Hà Nội.
Số Zalo: [SỐ THẬT]

## Mẫu
1. Bàn ăn 6 ghế | gỗ óc chó | 180x90 cm | ban-an-oc-cho.jpg
2. ...

## Giá tham khảo
Bàn ăn: từ [GIÁ] đến [GIÁ] VNĐ
...

## Hỏi đáp
H: Bao lâu thì xong? Đ: [câu trả lời thật]
...

Ảnh nặng làm trang chậm. Nhờ AI hướng dẫn nén ảnh, hoặc dùng công cụ nén ảnh trực tuyến, mục tiêu dưới 300KB mỗi ảnh, cạnh dài khoảng 1600px.

Kiểm: không còn ô [GIÁ], [SỐ THẬT] chưa điền trước khi phát hành.

Chặng 3: Giao diện

Dùng prompt Mô tả giao diện cho AI. Chọn một phương án, ghi vào brief mục 6.

Kiểm: có bảng biến CSS (màu, font, khoảng cách); font hiển thị đúng dấu tiếng Việt.

Chặng 4: Dựng trang theo lát cắt

Dùng prompt Chia dự án thành lát cắt, rồi Giao việc 5 phần cho từng lát. Kế hoạch gợi ý:

Lát	Nội dung	Kiểm bằng cách
1	Khung trang, biến CSS, header, footer	Mở được, không lỗi Console
2	Khối đầu trang + nút Zalo	Bấm nút trên điện thoại, Zalo mở đúng số
3	Lưới ảnh mẫu	1 cột trên điện thoại, 3 cột trên máy tính; ảnh không méo
4	Bảng giá	Không cuộn ngang ở 375px
5	Quy trình + hỏi đáp	Hỏi đáp mở/đóng được bằng chuột và bàn phím
6	Liên hệ + SEO + ảnh chia sẻ + favicon	Dán link vào Zalo thấy tiêu đề và ảnh

Sau mỗi lát chạy đúng: git add . và git commit -m "Lat N: ...".

Nút Zalo có nội dung soạn sẵn

Liên kết dạng https://zalo.me/[SỐ ĐIỆN THOẠI] mở trang chat Zalo với số đó. Bụi Code chưa tìm thấy tài liệu chính thức nào của Zalo về việc điền sẵn nội dung tin nhắn qua liên kết (tại ngày 16/10/2026). Cách làm chắc chắn chạy: đặt ngay cạnh nút một đoạn gợi ý để khách bấm sao chép:

Chào Mộc Lâm, tôi cần báo giá: [loại sản phẩm], kích thước khoảng [...], ở [quận/huyện].

Đây là ví dụ điển hình về việc phải kiểm thử thật: AI có thể khẳng định một tham số liên kết “điền sẵn tin nhắn” tồn tại. Bấm thử trên điện thoại trước khi tin.

Chặng 5: Kiểm thử

Test case

#	Bước	Mong đợi
T1	Mở trang trên điện thoại	Thấy tên, câu giá trị và nút Zalo mà không cần cuộn
T2	Bấm nút Zalo (đầu trang)	Mở Zalo, đúng số
T3	Bấm “Sao chép tin nhắn mẫu”	Có thông báo đã chép; dán ra đúng nội dung
T4	Cuộn tới bảng giá ở 375px	Không cuộn ngang toàn trang
T5	Dùng Tab từ đầu tới cuối trang	Đi qua mọi nút, thấy rõ viền focus
T6	Mở hỏi đáp bằng Enter	Câu trả lời hiện ra
T7	Dán link vào Zalo/Facebook	Đúng tiêu đề, mô tả, ảnh
T8	Mở F12, tab Console	Không lỗi đỏ
T9	Xem nguồn trang, tìm “key”, “token”	Không có bí mật
T10	Tìm chữ “[GIÁ]”, “Lorem”	Không còn

Sau đó dùng prompt Review độc lập trước phát hành với mức phát hành C (công khai), và Checklist nghiệm thu giao diện.

Chặng 6: Deploy

Theo bài Đưa website lên mạng an toàn:

Bản thử nhanh: kéo thả thư mục để có link gửi bạn bè góp ý.
Bản chính: đẩy lên GitHub, kết nối Cloudflare Pages, Vercel hoặc Netlify.
Đi hết Checklist trước khi deploy.
Viết README.md bằng prompt Viết README.

Rủi ro và cách xử lý

Rủi ro	Cách xử lý
AI bịa giá, số năm kinh nghiệm, lời khen	Ràng buộc “để [CẦN ĐIỀN], không bịa” trong mọi yêu cầu; kiểm T10
Ảnh nặng, trang chậm trên 4G	Nén ảnh dưới 300KB; dùng `loading="lazy"` cho ảnh dưới màn hình đầu
Sửa lát sau làm hỏng lát trước	Commit sau mỗi lát; chạy lại T1–T8 sau mỗi lần sửa
Giao diện “giống mọi website AI”	Dùng ảnh thật, mô tả phong cách cụ thể, bỏ hiệu ứng mặc định

Bộ hồ sơ 4 file (làm một lần, dùng mọi dự án)

Dự án chuyên nghiệp không chỉ có code. Bốn file dưới đây là “hồ sơ” của dự án — tạo chúng trong lúc làm, không phải sau khi xong.

1. BRIEF.md — đã có ở Chặng 1

Một trang: làm gì, cho ai, phạm vi có/không có. Viết trước khi code.

2. ACCEPTANCE.md — tiêu chí nghiệm thu

Copy bảng test case ở Chặng 5 vào file này, thêm 2 cột:

# Nghiệm thu — Landing page [tên dịch vụ]

| # | Kiểm gì | Đạt khi nào | Kết quả | Ngày |
|---|---------|-------------|---------|------|
| T1 | Mở trên điện thoại | Thấy tên + nút Zalo không cần cuộn | ☐ | |
| T2 | Bấm nút Zalo | Mở đúng số Zalo | ☐ | |
| ... | ... | ... | ... | |

Nghiệm thu đạt khi TẤT CẢ các dòng đều tick. Một dòng chưa đạt = chưa xong.

3. BUG_LOG.md — nhật ký lỗi

Mỗi lỗi gặp trong lúc làm, ghi 3 dòng (xem bài 3 thất bại kinh điển):

# Nhật ký lỗi

## [ngày] — [tên lỗi ngắn]
- Hiện tượng: ...
- Nguyên nhân: ...
- Cách thoát: ...

4. TEST_PLAN.md — kế hoạch kiểm thử

Trước Chặng 5, viết file này: kiểm những gì, trên thiết bị nào, theo thứ tự nào. Dùng prompt Kịch bản kiểm thử thủ công để tạo nội dung, lưu kết quả vào đây.

Mở rộng sau khi xong (không làm trong dự án này)

Nhúng Google Form để nhận yêu cầu báo giá có cấu trúc (lưu ý chính sách riêng tư).
Thêm trang chi tiết cho từng mẫu.
Gắn analytics không cookie để biết khách bấm nút Zalo bao nhiêu lần.