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

  • Dựng được thẻ sản phẩm và chỉnh nó qua ít nhất 4 vòng iterate
  • Dựng được hàng danh mục cuộn ngang
  • Thử dựng giao diện từ một ảnh tham khảo
  • Nhìn thấy được 3 trạng thái của một danh sách
  • Đã lưu mốc Git “Xong luyện tập giao diện cơ bản”
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!