Khách của một tiệm nail thường đi qua cùng một hành trình: thấy mẫu móng đẹp trên Facebook hoặc TikTok, nhắn tin hỏi giá, hỏi giờ trống, rồi chờ chủ tiệm trả lời. Nếu chủ tiệm bận làm cho khách khác, tin nhắn bị trôi và khách đi tiệm khác.
Trong series này, chúng ta sẽ xây dựng một website cho tiệm nail mà khách có thể tự xem dịch vụ, chọn thợ, chọn giờ còn trống và đặt lịch ngay, còn chủ tiệm quản lý toàn bộ lịch hẹn ở trang admin. Thay vì tự viết HTML, CSS, JavaScript từ đầu, chúng ta sẽ để AI làm việc trên một website mẫu và kết nối với EzyPlatform.
Phần 1. Chuẩn bị môi trường Vibe Coding
Bạn cần chuẩn bị:
- Một công cụ AI lập trình: Claude Code (dùng tài khoản Claude) hoặc Codex (dùng tài khoản ChatGPT).
- Visual Studio Code.
- EzyArticle Extension cài trong VS Code.
- Trợ lý AI chạy được ngay bên trong VS Code.
Phần 2. Kết nối VS Code với EzyPlatform
Trong thư mục dự án, tạo file environment.json và điền:
- Địa chỉ trang quản trị EzyPlatform của bạn.
admin_access_tokenlấy từ trang quản trị.
Lưu ý bảo mật: admin_access_token có quyền quản trị website. Không đưa token này lên GitHub, không gửi cho người khác và không dán vào nội dung trang web. Nên thêm environment.json vào file .gitignore.
Phần 3. Để AI đề xuất và tạo website mẫu
Thay vì đi tìm mẫu có sẵn, chúng ta để AI đề xuất bố cục và tự dựng website mẫu cho tiệm. Cách này giúp mẫu sát với nhu cầu đặt lịch ngay từ đầu, không phải gỡ bớt những phần thừa của mẫu người khác.
Bước 1: Mô tả nhu cầu và yêu cầu AI đề xuất phương án
Tạo một thư mục trống cho dự án (ví dụ may-nail) và mở bằng VS Code. Đừng yêu cầu AI viết code ngay, hãy để AI đề xuất trước:
Prompt mẫu
"Tôi muốn làm website cho tiệm nail Nuny Nail, có chức năng cho khách đặt lịch.
Khách chủ yếu vào bằng điện thoại từ Facebook, Zalo, TikTok.
Website cần: trang chủ, dịch vụ & bảng giá, album mẫu móng, blog, liên hệ, trang đặt lịch.
CHƯA viết code. Hãy đề xuất cho tôi 3 phương án giao diện khác nhau, mỗi phương án gồm:
(1) Phong cách tổng thể (ví dụ: tối giản sang trọng, dễ thương pastel, hiện đại trẻ trung).
(2) Gợi ý màu chủ đạo, font chữ.
(3) Bố cục trang chủ từ trên xuống dưới.
(4) Vị trí nút "Đặt lịch ngay" và cách khách đi từ trang chủ tới trang đặt lịch.
(5) Ưu điểm, nhược điểm của phương án."
Bước 2: Chọn phương án và chốt cấu trúc
Chọn phương án phù hợp nhất với tiệm (có thể kết hợp các ý từ nhiều phương án), rồi yêu cầu AI chốt cấu trúc dự án, vẫn chưa viết code:
Prompt mẫu
"Tôi chọn phương án 2, nhưng dùng bố cục trang chủ của phương án 1.
Hãy đề xuất cấu trúc dự án, CHƯA viết code:
• Danh sách trang và đường dẫn (ví dụ /dich-vu, /dat-lich).
• Header, footer và các thành phần dùng lại ở nhiều trang.
• Cách tổ chức file HTML, CSS, JavaScript.
• Những phần nội dung nào nên quản lý trong EzyPlatform thay vì viết cứng trong code (dịch vụ, bảng giá, album, bài blog)."
Đọc kỹ đề xuất. Nếu thiếu trang hoặc sai đường dẫn, sửa ngay ở bước này, vì các bài sau sẽ xây tiếp trên cấu trúc này.
Bước 3: Yêu cầu AI tạo website mẫu
Khi đã đồng ý với cấu trúc, cho AI tạo bộ khung giao diện với nội dung tạm:
Prompt mẫu
"Hãy tạo website mẫu theo phương án và cấu trúc đã chốt:
• Dùng nội dung và ảnh tạm, tôi sẽ cung cấp thông tin thật ở bước sau.
• Ưu tiên hiển thị trên điện thoại, nút "Đặt lịch ngay" cố định ở cuối màn hình khi xem bằng điện thoại.
• Trang /dat-lich tạm hiển thị "Đang xây dựng".
• Không đưa admin_access_token hay thông tin bí mật vào code giao diện.
• Sau khi xong, liệt kê các file đã tạo và dừng lại để tôi xem trước."
Mở website trên trình duyệt hoặc thử ở chế độ điện thoại. Lúc này chỉ cần kiểm tra bố cục và luồng đi tới trang đặt lịch, chưa cần chỉnh chi tiết màu sắc hay nội dung.
Bước 4: Cung cấp thông tin tiệm nail
Trước khi cho AI chỉnh sửa, chuẩn bị đầy đủ thông tin của tiệm. Đây cũng là dữ liệu mà hệ thống đặt lịch ở các bài sau sẽ dùng.
Thông tin chung
| Hạng mục | Nội dung cần chuẩn bị |
|---|---|
| Liên hệ | Tên tiệm, địa chỉ, số điện thoại, Zalo, Facebook, link Google Maps. |
| Giờ mở cửa | Giờ mở cửa từng ngày trong tuần. |
| Phong cách mong muốn | Màu chủ đạo, logo, font chữ (sẽ làm kỹ ở bài Brand Identity). |
Dịch vụ
Cần cả giá và thời gian làm để tính giờ trống.
| Dịch vụ | Giá | Thời gian |
|---|---|---|
| Sơn gel tay | 150.000đ | 45 phút |
| Đắp bột | 350.000đ | 90 phút |
| Nối móng úp | 250.000đ | 60 phút |
| Vẽ móng nghệ thuật (10 ngón) | từ 100.000đ | 30 phút |
| Chăm sóc da tay | 120.000đ | 30 phút |
Thợ
| Tên | Ảnh | Dịch vụ làm được | Ngày nghỉ cố định trong tuần |
|---|---|---|---|
Sau đó đưa thông tin cho AI và yêu cầu chỉnh giao diện:
Prompt mẫu
Đây là thông tin tiệm nail của tôi: [dán thông tin chung, bảng dịch vụ, danh sách thợ].
Hãy thay nội dung tạm trong website mẫu bằng thông tin thật của tiệm NuNy Nail:
• Trang chủ: giới thiệu tiệm, dịch vụ nổi bật, ưu đãi, đánh giá khách, nút "Đặt lịch ngay".
• Trang dịch vụ & bảng giá: hiển thị giá và thời gian làm của từng dịch vụ.
• Trang album mẫu móng (tạm dùng ảnh mẫu, tôi sẽ thay sau).
• Trang liên hệ: địa chỉ, giờ mở cửa, bản đồ, Zalo.
• Thêm nút "Đặt lịch ngay" cố định ở cuối màn hình trên điện thoại, tạm dẫn tới trang /dat-lich.
Yêu cầu:
• Giữ nguyên cấu trúc, header, footer và CSS đã tạo, không viết lại từ đầu.
• Chưa làm chức năng đặt lịch, chỉ tạo trang /dat-lich với nội dung "Đang xây dựng".
• Không đưa admin_access_token hay thông tin bí mật vào code giao diện.
• Sau khi xong, liệt kê các file đã thay đổi và dừng lại để tôi xem trước.
Mở website trên trình duyệt, thử cả chế độ điện thoại. Nếu cần chỉnh, nói cụ thể với AI từng chỗ, ví dụ: "phần bảng giá chữ quá nhỏ trên điện thoại, tăng cỡ chữ và tách mỗi dịch vụ thành một thẻ".
Kết luận
Sau bài này, bạn đã có bộ khung website cho tiệm Nuny Nail, sẵn sàng để gắn chức năng đặt lịch. Cụ thể, chúng ta đã:
- Chuẩn bị môi trường Vibe Coding gồm VS Code, EzyArticle Extension và một trợ lý AI lập trình (Claude Code hoặc Codex).
- Kết nối VS Code với trang quản trị EzyPlatform qua file environment.json và giữ admin_access_token ngoài mã nguồn.
- Để AI đề xuất 3 phương án giao diện, chọn phương án phù hợp rồi chốt danh sách trang, đường dẫn và cách tổ chức file trước khi viết code.
- Cho AI dựng website mẫu ưu tiên điện thoại, với nút "Đặt lịch ngay" luôn hiện ở cuối màn hình.
- Chuẩn bị thông tin tiệm, bảng dịch vụ kèm giá và thời gian làm, danh sách thợ, rồi thay nội dung tạm bằng thông tin thật.
Kết quả là một website giới thiệu Nuny Nail với đủ trang chủ, dịch vụ và bảng giá, album mẫu móng, liên hệ, cùng trang /dat-lich đang chờ xây dựng. Bảng dịch vụ và danh sách thợ vừa chuẩn bị cũng chính là dữ liệu mà hệ thống đặt lịch ở các bài sau sẽ dùng để tính giờ trống. Tuy vậy, website lúc này vẫn mang màu sắc và phong cách do AI tự chọn.
Ở bài tiếp theo, chúng ta sẽ cùng AI xây dựng Brand Identity cho Mây Nail: màu sắc, font chữ, logo và phong cách hình ảnh, để website trông thật sự là của tiệm chứ không còn là một mẫu chung.