Thiết kế giao diện cùng Claude: từ mô tả đến prototype

Brief 4 yếu tố

Thiếu yếu tố nào, Claude tự đoán yếu tố đó — và mỗi lần đoán là một lần rủi ro lệch ý bạn.

• Ai dùng: "app đặt lịch cho phòng khám nha khoa, bệnh nhân 30-60 tuổi"
• Việc chính: "đặt lịch trong dưới 3 bước, xem lại lịch đã đặt"
• Hướng thị giác: "sạch, nhiều khoảng trắng, xanh dương dịu, chữ to dễ đọc"
• Màn hình cụ thể: "trang chọn dịch vụ → chọn giờ → xác nhận"

Prompt mẫu cho màn hình đầu tiên

Tạo prototype web cho phòng khám nha khoa Smile.
Người dùng: bệnh nhân 30-60 tuổi, không rành công nghệ.
Luồng: chọn dịch vụ → chọn bác sĩ & giờ trống → xác nhận.
Phong cách: sạch, ấm, xanh dương dịu, chữ tối thiểu 16px,
nút to dễ bấm. Tiếng Việt toàn bộ.
Làm luồng chính hoạt động được để tôi bấm thử.

Chỉnh sửa: nói vào đúng vùng

Sai lầm phổ biến nhất khi iterate: mô tả lại cả trang. Hãy chỉ đích danh vùng cần đổi và giữ phần còn lại — "đổi phần chọn giờ thành lưới các khung giờ, giữ nguyên mọi thứ khác".

Gom nhiều nhận xét vào MỘT lần gửi thay vì gửi lắt nhắt từng câu: một vòng sửa với 5 ghi chú rõ ràng vừa nhanh vừa giữ mạch thiết kế nhất quán hơn 5 vòng sửa một ghi chú.

Ba tầng chỉnh, ba mức chi phí

Giữ bản cũ khi thử hướng mới là kỷ luật quan trọng nhất: so sánh hai bản cạnh nhau luôn ra quyết định tốt hơn "sửa đè rồi tiếc".

• Chỉnh chữ và màu trực tiếp: đổi nhãn nút, sửa tiêu đề — không cần mô tả dài
• Chỉnh cục bộ: chỉ vào một khối, mô tả trạng thái muốn có
• Đổi hướng: "phiên bản mới theo hướng tối giản đen trắng" — tạo bản MỚI để so sánh, đừng phá bản đang tốt

Từ prototype đến sản phẩm

Prototype đạt rồi, bạn có ba đường ra: chia sẻ link cho team góp ý; xuất thành file để chạy độc lập; hoặc bàn giao cho developer — kèm chính đoạn hội thoại thiết kế làm tài liệu ngữ cảnh. Với đội có Claude Code, developer nhận prototype và dựng bản thật ngay trong codebase.

Với designer chuyên nghiệp: đây không phải công cụ thay Figma — nó thay các vòng "vẽ để thăm dò". Thăm dò bằng prototype thật, rồi mới đầu tư pixel vào hướng đã được xác nhận.