Xây trang bằng AI

Trang này để làm gì

Hướng dẫn làm việc với trình dựng trang của Vibe Code Studio — cách mô tả yêu cầu để AI tạo đúng thứ bạn cần, và cách sửa dần cho tới khi hài lòng.

Đường dẫn: mở một Solution → bấm vào tên trang, hoặc Tạo trang mới.

Trước khi vào trình dựng: hai hộp thoại

Luồng tạo một trang đi qua hai bước, và cả hai đều dễ hiểu nhầm:

1. Tạo Solution Điền Tên solution, Mô tả, và chọn Zalo Mini App mà Solution này thuộc về — trường bắt buộc, Solution luôn gắn với một Mini App cụ thể.
2. Tạo trang Điền tên trang và mô tả ngắn. Hộp thoại ghi rõ: "Trang được tạo rỗng. Dùng chat panel để build UI bằng AI."

Mô tả trong hộp thoại không tự sinh ra giao diện

Hộp thoại tạo Solution có dòng gợi ý "Mô tả càng chi tiết, AI càng tạo ra mini app đúng ý bạn", dễ khiến người dùng nghĩ chỉ cần điền mô tả là xong.

Thực tế: mô tả chỉ được lưu lại làm ngữ cảnh. Sau khi tạo, Solution vẫn ở trạng thái 0 Trang, 0 DataHub, 0 Nguồn. Trang cũng vậy — tạo ra là rỗng hoàn toàn.

Giao diện chỉ xuất hiện sau khi bạn gửi tin nhắn đầu tiên trong khung trò chuyện.

Bố cục màn hình dựng

Trình dựng trang. Ảnh chụp thực tế: cây Solution bên trái, khung trò chuyện với AI ở giữa, xem trước điện thoại bên phải.

1. Cây Solution — chuyển nhanh giữa các trang, DataHub và Nguồn dữ liệu mà không rời màn hình.
2. Khung trò chuyện — nơi bạn mô tả yêu cầu. AI trả lời bằng cách sửa trang, không chỉ bằng lời.
3. Ô nhập yêu cầu — gõ điều bạn muốn thay đổi. Bên dưới là tên model đang dùng.
4. Gợi ý nhanh — các yêu cầu hay dùng, bấm là gửi luôn: thêm pull-to-refresh, làm loading skeleton, responsive cho tablet.
5. Khung xem trước — hiển thị dạng điện thoại, có hai chế độ Bản Preview (bản nháp bạn đang sửa) và Đã Publish (bản khách đang dùng).
6. Nút QR — hiện mã QR để mở trang trên điện thoại thật.

Cách mô tả để AI làm đúng

Chất lượng kết quả phụ thuộc gần như hoàn toàn vào cách bạn mô tả. Bốn nguyên tắc sau tạo ra khác biệt lớn nhất:

1. Nói mục đích trước, chi tiết sau Mở đầu bằng "Trang này để khách xem số tem đã tích và đổi quà" rồi mới liệt kê thành phần. AI dựng bố cục hợp lý hơn nhiều khi hiểu trang dùng để làm gì.
2. Nêu tên cột dữ liệu thật Thay vì "hiện số điểm", hãy viết "hiện giá trị cột diem_tich_luy từ bảng khach_hang". Gắn DataHub trước khi mô tả để AI biết có những cột nào.
3. Mỗi lượt yêu cầu một việc Gửi năm thay đổi cùng lúc thì khi kết quả sai bạn không biết phần nào hỏng. Sửa từng việc, xem preview, rồi mới sang việc kế.
4. Mô tả điều bạn thấy sai, không mô tả cách sửa"Nút đổi quà bị khuất khi danh sách dài" hữu ích hơn "đặt position fixed cho nút". AI biết cách sửa; việc của bạn là chỉ ra vấn đề.

Ví dụ một lượt mô tả tốt

Trang này để khách xem số tem đã tích và đổi quà.

Đầu trang hiện tên khách và số tem hiện có, lấy từ bảng the_tich_tem theo zalo_id của người đang mở.

Dưới đó là danh sách quà đổi được, mỗi quà hiện ảnh, tên, số tem cần. Quà nào chưa đủ tem thì làm mờ và không bấm được.

Cuối trang có nút "Lịch sử đổi quà".

So với: "làm trang tích tem có đổi quà" — cùng một ý, nhưng bản trên cho ra kết quả dùng được ngay, bản dưới cần thêm nhiều lượt sửa.

Quy trình dựng một trang

1. Gắn DataHub trước Từ cây Solution, thêm bảng dữ liệu mà trang cần đọc hoặc ghi.
2. Mô tả trang lần đầu, đầy đủ nhất có thể Lượt đầu tiên nên mô tả toàn bộ trang. AI dựng khung tổng thể tốt hơn khi thấy bức tranh đầy đủ, thay vì ghép dần từng mảnh.
3. Xem preview, sửa từng điểm Từ lượt thứ hai trở đi, mỗi lượt chỉ nêu một thay đổi.
4. Mở thử trên điện thoại thật bằng mã QR Preview trên máy tính không phản ánh hết cảm giác thật: cỡ chữ, vùng bấm, độ dài cuộn.
5. Kiểm tra với dữ liệu biên Khách chưa có tem nào, khách có 999 tem, tên khách dài bất thường, danh sách quà trống. Đây là chỗ giao diện hay vỡ.
6. Xuất bản Chuyển sang tab Đã Publish để xác nhận bản khách thấy đúng như mong đợi.

Dùng gợi ý nhanh cho các cải thiện tiêu chuẩn

Ba gợi ý dựng sẵn giải quyết những thứ dễ quên:

• Thêm pull-to-refresh — kéo xuống để tải lại, thói quen của mọi người dùng điện thoại
• Làm loading skeleton — khung xám nhấp nháy trong lúc chờ dữ liệu, thay cho màn hình trắng
• Responsive cho tablet — tránh giao diện kéo giãn xấu trên máy tính bảng

Bấm cả ba sau khi trang đã ổn về nội dung.

Những việc AI làm tốt và chưa tốt

AI làm tốt	Bạn nên tự kiểm
Dựng bố cục, danh sách, thẻ, nút	Logic nghiệp vụ nhiều điều kiện
Gắn dữ liệu từ DataHub vào giao diện	Cách tính toán đặc thù (quy đổi điểm, xếp hạng)
Trạng thái rỗng, trạng thái đang tải	Xử lý khi dữ liệu sai hoặc thiếu
Chỉnh màu, khoảng cách, cỡ chữ	Trải nghiệm tổng thể qua nhiều trang

Luôn tự kiểm phần tính toán

AI dựng giao diện đáng tin, nhưng phần tính toán thì phải tự đối chiếu. Với trang tích điểm hay đổi quà, hãy tính tay một trường hợp rồi so với kết quả trang hiển thị.

Sai sót ở đây không lộ ra ngay như lỗi giao diện — nó âm thầm cộng sai điểm cho khách trong nhiều tuần.

Lỗi thường gặp

Hiện tượng	Nguyên nhân	Cách xử lý
Trang trống trên điện thoại nhưng preview vẫn ổn	Chưa xuất bản, hoặc đang xem tab Bản Preview	Xuất bản rồi kiểm ở tab Đã Publish
Dữ liệu không hiện	Chưa gắn DataHub, hoặc tên cột trong mô tả sai	Đối chiếu tên cột thật trong Data Hub
Mỗi lượt sửa lại hỏng chỗ khác	Yêu cầu quá nhiều thay đổi trong một lượt	Quay lại bản trước, sửa từng việc một
Trang chậm khi danh sách dài	Tải toàn bộ dữ liệu một lần	Yêu cầu AI thêm phân trang hoặc tải dần

Bước tiếp theo

• Vibe Code Studio — Tổng quan
• Data Hub — Tạo bảng
• Nguồn dữ liệu