Buổi 03 — Thực hành: Dựng Khối Giao Diện Bằng Lời
Kết thúc buổi: bạn dựng được vài khối giao diện cơ bản (thẻ sản phẩm, hàng danh mục) và thành thạo kỹ thuật iterate.
Lab 3.1 — Dựng một “thẻ sản phẩm” rau củ
Bắt đầu nhỏ với một thẻ sản phẩm duy nhất:
Xem kết quả trên máy.
Lab 3.2 — Luyện iterate trên thẻ sản phẩm
Chỉnh thẻ vừa làm bằng công thức “Giữ nguyên… chỉ đổi…”. Thử tối thiểu 4 lần:
Cảm nhận sự khác biệt: mỗi lần chỉ đổi một thứ nhỏ, thẻ mỗi lúc một đẹp hơn mà không mất công làm lại. Đây chính là nhịp làm việc của Vibe Coder.
Lab 3.3 — Dựng một “hàng danh mục” cuộn ngang
Thử một khối phức tạp hơn:
Kiểm thử: vuốt ngang xem có cuộn mượt không.
Lab 3.4 — Thử mô tả từ ảnh tham khảo
Lấy 1 trong 3 ảnh tham khảo (bài tập buổi 1). Đính kèm cho AI và yêu cầu:
So sánh: kết quả có giống ảnh không? Nếu lệch, dùng iterate để kéo về gần ảnh.
Lab 3.5 — Luyện xử lý 3 trạng thái
Yêu cầu AI cho bạn thấy 3 trạng thái của một danh sách:
Checklist hoàn thành
Bạn giờ đã có “tay nghề” mô tả giao diện. Buổi sau sẽ ghép các khối này thành một trang chủ hoàn chỉnh!