Mô tả giao diện để AI làm đúng ý

Vấn đề thật

Bạn bảo AI “làm đẹp lên”. Nó trả về nền gradient tím xanh, thẻ bo tròn có bóng mờ, chữ Inter, hiệu ứng trượt khắp nơi. Trông “xịn”, nhưng giống hệt hàng nghìn trang khác do AI làm, và chẳng nói gì về sản phẩm của bạn.

AI không có gu riêng. Nó trả về mức trung bình khi bạn không nói rõ. Bài này dạy bạn nói rõ.

Năm thứ cần mô tả

1. Cảm giác (3–5 từ cụ thể)

Mơ hồ	Cụ thể
Đẹp, hiện đại	Mộc, ấm, tin cậy, nhiều ảnh thật
Chuyên nghiệp	Gọn, nghiêm túc, chữ lớn, ít màu
Trẻ trung	Bụi, đậm, tương phản mạnh, viền dày

2. Màu

Tối đa: một màu nền, một màu chữ, một màu nhấn, một màu viền, một màu báo lỗi. Ghi mã màu nếu có thương hiệu. Nói rõ màu nhấn dùng ở đâu (“chỉ cho nút chính và chữ cần chú ý”).

3. Chữ

• Font phải hỗ trợ đủ dấu tiếng Việt. Nhiều font đẹp trên Google Fonts bị lỗi dấu (ơ, ư, ỹ hiển thị lệch). Ví dụ font thiết kế riêng cho tiếng Việt: Be Vietnam Pro.
• Cỡ chữ thân bài từ 16px trở lên.
• Tối đa 2 font: một cho tiêu đề, một cho nội dung (thêm font monospace nếu có code).

4. Bố cục

Mô tả theo thứ tự người dùng cuộn, như bạn kể lại trang cho ai đó:

Trên điện thoại, từ trên xuống:
1. Thanh trên cùng: logo trái, nút menu phải.
2. Ảnh lớn món bán chạy, dưới ảnh là tên quán và một câu giới thiệu.
3. Nút "Đặt bàn" to, rộng gần hết màn hình.
4. Menu: 3 nhóm, mỗi món 1 dòng: tên trái, giá phải.
5. Địa chỉ + giờ mở cửa + nút chỉ đường.
Trên máy tính: menu chia 3 cột theo nhóm.

5. Trạng thái

AI hay chỉ làm trạng thái “mọi thứ ổn”. Hỏi thêm:

• Đang tải thì hiện gì?
• Không có dữ liệu (rỗng) thì hiện gì?
• Lỗi thì báo thế nào, người dùng làm gì tiếp?
• Nút bị vô hiệu thì trông thế nào?

Design token: sửa một chỗ, đổi cả trang

Design token là các biến đặt tên cho màu, chữ, khoảng cách. Thay vì AI rải mã màu #3b82f6 khắp 20 file, mọi chỗ dùng var(--mau-nhan).

:root {
  --nen: #fbf7ef;
  --chu: #2b2118;
  --mau-nhan: #4f6b3a;
  --vien: #d9cfbf;
  --loi: #b42318;
  --font-chu: 'Be Vietnam Pro', system-ui, sans-serif;
  --khoang-cach: 16px;
}

Thêm vào mọi yêu cầu giao diện: “Chỉ dùng biến trong :root. Không thêm màu mới.” Đây là cách đơn giản nhất để giao diện không trôi dần sau 10 lần sửa.

Thoát khỏi “giao diện AI”

Dấu hiệu giao diện mặc định của AI và cách tránh:

Dấu hiệu	Thay bằng
Gradient tím xanh	Nền một màu, chọn theo thương hiệu
Mọi thẻ bo tròn lớn, bóng mờ	Chọn một kiểu: bo nhẹ, hoặc viền đậm, nhất quán
Emoji làm biểu tượng đầu mục	Không biểu tượng, hoặc bộ icon thống nhất
Ảnh minh họa chung chung	Ảnh thật sản phẩm của bạn
Mọi thứ căn giữa	Căn trái cho nội dung đọc
Số liệu ấn tượng tự bịa (“10.000+ khách”)	Bỏ, cho tới khi có số thật

Cách giao việc giao diện theo bước

1. Định hướng trước, dựng sau. Dùng prompt Mô tả giao diện cho AI trong thư viện: AI đưa 2 phương án, bạn chọn.
2. Dựng một trang mẫu với đủ thành phần: tiêu đề các cấp, đoạn văn, nút, thẻ, bảng, form. Duyệt trang mẫu trước khi làm các trang thật.
3. Áp cho từng trang theo lát cắt.
4. Kiểm bằng checklist Nghiệm thu giao diện.

Gửi ảnh chụp để sửa giao diện

Nhiều công cụ AI nhận ảnh. Một ảnh chụp kèm khoanh vùng hiệu quả hơn ba đoạn mô tả:

[Đính kèm ảnh chụp màn hình điện thoại]
Vùng khoanh đỏ: nút "Đặt bàn" bị đẩy xuống dưới menu, phải cuộn mới thấy.
Mong đợi: nút nằm ngay dưới câu giới thiệu, thấy được mà không cần cuộn trên màn hình 375x812.
Chỉ sửa thứ tự và CSS của khối đầu trang.

Lỗi hay gặp

• Sửa giao diện bằng cảm tính từng chút. “Đậm hơn chút”, “to hơn chút” lặp 20 lần. Hãy nói con số: “chữ tiêu đề 32px, đậm 800”.
• Chỉ xem trên máy tính. Mở chế độ điện thoại (F12, biểu tượng điện thoại) sau mỗi lát cắt.
• Để AI chọn font tự do. Kiểm tra dấu tiếng Việt: gõ thử “Ỹ ỹ Ữ ữ Ở ở Ặ ặ”.

Việc làm ngay

1. Viết 3–5 từ cảm giác cho sản phẩm của bạn và 1–2 trang tham khảo kèm lý do.
2. Chạy prompt Mô tả giao diện cho AI, chọn một phương án.
3. Lưu bảng token vào brief mục 6 và vào file CSS của dự án.

Tóm tắt

• AI trả về mức trung bình khi bạn mô tả mơ hồ.
• Mô tả 5 thứ: cảm giác, màu, chữ, bố cục theo thứ tự cuộn, trạng thái.
• Dùng design token, cấm AI thêm màu mới.
• Kiểm trên điện thoại, bằng bàn phím, và ở trạng thái rỗng, lỗi.