Mục tiêu

Biết cách mô tả giao diện (UI) cho AI hiểu chính xác bạn muốn layout, màu sắc, và phong cách gì — không cần biết design.

Sau bài này, bạn sẽ:

• ✅ Nắm được từ vựng UI cơ bản để giao tiếp với AI
• ✅ Biết cách mô tả layout (bố cục) cho AI hiểu đúng
• ✅ Sử dụng được v0.dev để tạo component giao diện đẹp

Nội dung chính

3.1 — Từ vựng UI cơ bản: Nói đúng để AI hiểu đúng

Bạn không cần thành designer, nhưng cần biết một số “từ khoá” để AI hiểu chính xác:

Từ bạn muốn nói	Từ khoá cho AI hiểu	Giải thích nhanh
Thanh trên cùng	Navbar / Header	Thanh điều hướng cố định trên đầu trang
Thanh dưới cùng	Footer	Phần cuối trang (liên hệ, bản quyền)
Thẻ sản phẩm	Card	Khung chứa hình + text, thường bo tròn góc
Bố cục chia cột	Grid / Flexbox	Sắp xếp nội dung thành hàng/cột
Hiệu ứng khi di chuột	Hover effect	Đổi màu/phóng to khi rê chuột vào
Hiển thị tốt trên mọi thiết bị	Responsive	Tự điều chỉnh theo kích thước màn hình
Nền chuyển màu	Gradient	Chuyển từ màu này sang màu kia
Bóng đổ	Shadow / Box-shadow	Hiệu ứng nổi, tạo chiều sâu
Bo tròn góc	Border-radius	Không vuông vức, mềm mại hơn

Bảng từ vựng bổ sung — Hay dùng khi mô tả giao diện:

Từ khoá	Ý nghĩa	Ví dụ dùng trong prompt
CTA (Call-to-Action)	Nút kêu gọi hành động	”Nút CTA ‘Đăng ký ngay’ màu cam, nổi bật”
Hero section	Phần banner lớn đầu trang	”Hero section nền ảnh mờ, tiêu đề lớn ở giữa”
Modal / Popup	Cửa sổ bật lên	”Khi bấm ‘Thêm’, hiện modal nhập thông tin”
Sidebar	Thanh bên trái/phải	”Sidebar bên trái chứa menu điều hướng”
Badge	Nhãn nhỏ đính kèm	”Badge đỏ hiển thị số thông báo”
Tooltip	Chú thích khi di chuột	”Hover vào icon thì hiện tooltip giải thích”
Breadcrumb	Đường dẫn điều hướng	”Breadcrumb: Trang chủ > Menu > Trà sữa”
Skeleton	Hiệu ứng loading	”Khi đang tải, hiện skeleton placeholder”

Mẹo: Bạn không cần nhớ hết bảng này. Hãy bookmark lại và tra cứu khi cần. Chỉ cần dùng vài lần là bạn sẽ nhớ tự nhiên.

3.2 — Kỹ thuật “Vẽ bằng lời”: Mô tả layout

Cách mô tả layout cho AI:

LAYOUT MÔ TẢ:

┌──────────────────────────────────────┐
│  NAVBAR: Logo bên trái, Menu bên phải │
├──────────────────────────────────────┤
│                                      │
│  HERO SECTION:                       │
│  Tiêu đề lớn ở giữa                 │
│  Mô tả ngắn bên dưới               │
│  Nút CTA (Call-to-Action)           │
│                                      │
├──────────────────────────────────────┤
│                                      │
│  GRID 3 CỘT:                        │
│  ┌────────┐ ┌────────┐ ┌────────┐  │
│  │ Card 1 │ │ Card 2 │ │ Card 3 │  │
│  └────────┘ └────────┘ └────────┘  │
│                                      │
├──────────────────────────────────────┤
│  FOOTER: Bản quyền, Link mạng xã hội│
└──────────────────────────────────────┘

Prompt mẫu sử dụng layout — Landing page tiệm bánh:

Tạo landing page cho tiệm bánh "Bánh Ngọt Sài Gòn".

LAYOUT CHI TIẾT:

1. NAVBAR (cố định trên đầu):
   - Logo: text "Bánh Ngọt Sài Gòn" + icon 🧁 bên trái
   - Menu bên phải: "Trang chủ", "Menu", "Về chúng tôi", "Liên hệ"
   - Nền trắng, shadow nhẹ phía dưới
   - Khi scroll xuống, navbar vẫn cố định trên cùng (sticky)

2. HERO SECTION:
   - Ảnh nền bánh mờ (blur), độ tối 40%
   - Tiêu đề "Ngọt ngào mỗi ngày" — font lớn, chữ trắng, căn giữa
   - Mô tả phụ: "Bánh tươi mỗi sáng, giao tận nơi từ 7h"
   - Nút CTA "Xem Menu" màu hồng pastel (#F9A8D4), chữ trắng, bo tròn
   - Chiều cao hero: 80% màn hình

3. PHẦN SẢN PHẨM NỔI BẬT:
   - Tiêu đề "Món bán chạy" căn giữa
   - Grid 3 cột (mobile: 1 cột), mỗi cột là 1 Card gồm:
     + Ảnh placeholder vuông trên cùng
     + Tên bánh (ví dụ: "Bánh Croissant", "Red Velvet", "Tiramisu")
     + Giá tiền (ví dụ: 45.000đ)
     + Nút "Đặt ngay" nhỏ
   - Card bo tròn, shadow nhẹ, hover phóng to 1.05x

4. FOOTER:
   - Nền hồng nhạt
   - 3 cột: Địa chỉ + SĐT | Giờ mở cửa | Icon Facebook, Instagram, TikTok
   - Copyright ở dưới cùng

PHONG CÁCH TỔNG THỂ:
- Bảng màu: pastel hồng (#F9A8D4) và kem (#FFFBF0)
- Font: Nunito (tròn mềm mại)
- Bo tròn tất cả các góc (border-radius: 12px)
- Shadow nhẹ trên mỗi card
- Responsive: mobile-first

Prompt nâng cao — Thêm animation:

Thêm hiệu ứng cho landing page tiệm bánh:

- Các card sản phẩm fade-in từ dưới lên khi scroll đến
- Nút CTA có hiệu ứng pulse nhẹ (phóng to thu nhỏ liên tục) để thu hút chú ý
- Navbar đổi nền từ trong suốt → trắng khi scroll xuống 100px
- Smooth scroll khi bấm các link menu

Mẹo: Khi mô tả layout, luôn đi từ trên xuống dưới (Navbar → Hero → Nội dung → Footer). AI xử lý tốt nhất khi thông tin có cấu trúc rõ ràng theo thứ tự.

3.3 — Công cụ bổ trợ: v0.dev

v0.dev (của Vercel) chuyên tạo component giao diện bằng văn bản. Nếu bạn chỉ cần 1 phần giao diện (ví dụ: 1 navbar đẹp, 1 form đăng nhập, 1 bảng giá), v0.dev rất phù hợp.

Khi nào dùng Bolt.new vs v0.dev?

	Bolt.new	v0.dev
Tạo cả app hoàn chỉnh	✅	❌
Tạo 1 component riêng lẻ	Được nhưng dư thừa	✅ Chuyên môn
Chạy thử trực tiếp	✅	Cần copy code ra ngoài
Dành cho ai	Người muốn ra app nhanh	Người muốn từng mảnh ghép đẹp

Mẹo: Một chiến thuật hay là dùng v0.dev để tạo 1 component mẫu (ví dụ: card sản phẩm), sau đó mô tả lại style đó cho Bolt.new khi tạo app hoàn chỉnh. Kiểu như “lấy mẫu rồi đặt hàng số lượng lớn”.

Lỗi thường gặp

Vấn đề: Giao diện bị lệch — các card không thẳng hàng, text bị tràn ra ngoài. → Thêm dòng: “Đảm bảo tất cả card có cùng chiều cao. Sử dụng CSS Grid với gap 16px. Text quá dài thì cắt bớt (truncate) với dấu ’…’.”

Vấn đề: Trên điện thoại giao diện bị vỡ, chữ quá nhỏ hoặc nút bị chồng lên nhau. → Luôn thêm dòng cuối prompt: “Responsive mobile-first. Trên mobile: grid chuyển sang 1 cột, font size tối thiểu 16px, nút bấm chiều rộng 100%.”

Vấn đề: Màu sắc không đúng — nói hồng pastel nhưng AI cho ra hồng đậm. → Đừng mô tả màu bằng từ ngữ chung. Hãy cho mã màu cụ thể. Ví dụ: thay vì “hồng pastel” → nói “#F9A8D4” hoặc “#FFC0CB”. Bạn có thể tra mã màu tại htmlcolorcodes.com.

Vấn đề: AI tạo layout nhưng không có nội dung mẫu — chỉ hiện “Lorem ipsum”. → Hãy cho AI nội dung cụ thể ngay trong prompt. Ví dụ: thay vì “3 card sản phẩm” → nói rõ tên từng sản phẩm, giá, mô tả.

Vấn đề: Ảnh không hiển thị (icon trống hoặc hình vỡ). → Thêm dòng: “Sử dụng placeholder image từ https://placehold.co/ cho tất cả hình ảnh.” hoặc “Thay ảnh bằng icon/emoji tương ứng.”

Bài tập thực hành

Nhiệm vụ: Dùng v0.dev tạo 1 component Card sản phẩm đẹp. Sau đó dùng Bolt.new tạo 1 trang có grid 6 Card sản phẩm dùng phong cách bạn vừa thiết kế.

Bước 1 — Tạo component trên v0.dev (⏱️ 5 phút):

Prompt gợi ý cho v0.dev:

Tạo 1 product card cho quán cà phê:
- Hình ảnh ly cà phê trên cùng (placeholder image, tỷ lệ 16:9)
- Tên sản phẩm: "Cà Phê Sữa Đá" — font đậm, cỡ 18px
- Mô tả ngắn: "Đậm đà, thơm béo, đá xay mịn" — màu xám nhạt
- Giá: 35.000đ — màu nâu đậm (#6B4423), font đậm
- Nút "Thêm vào giỏ" màu nâu (#8B6914), chữ trắng, bo tròn
- Card bo tròn 12px, shadow nhẹ, hover phóng to 1.03x + shadow đậm hơn
- Chiều rộng card: 280px

Bước 2 — Tạo trang hoàn chỉnh trên Bolt.new (⏱️ 10 phút): Mô tả lại style từ v0.dev + yêu cầu trang có grid 6 card, navbar, footer

Bước 3 — Kiểm tra responsive (⏱️ 5 phút): Bấm F12 trên trình duyệt → chọn icon điện thoại để xem mobile

Tiêu chí thành công:

• ✅ Card trên v0.dev đẹp, đúng phong cách mô tả
• ✅ Trang trên Bolt.new có đủ 6 card, navbar, footer
• ✅ Trang responsive — hiển thị tốt trên mobile (1 cột) và desktop (3 cột)

Gợi ý nếu bị stuck:

• Nếu card không đều nhau: thêm “Tất cả card cùng chiều cao, hình ảnh cùng tỷ lệ”
• Nếu mobile bị vỡ: thêm “Mobile: grid 1 cột, padding 16px 2 bên”

Thời gian: 20 phút Deliverable: Screenshot component + screenshot trang grid hoàn chỉnh

Tổng kết bài 3

Bạn đã học được	Chi tiết
Từ vựng UI	Navbar, Card, Grid, Responsive, Hover, Shadow…
Kỹ thuật mô tả layout	Vẽ bằng lời theo cấu trúc từ trên xuống
v0.dev	Công cụ tạo component giao diện riêng lẻ