Bí quyết #1: Prompt chi tiết = Kết quả đẹp

Đây là sự thật quan trọng nhất trong khoá học: prompt càng chi tiết, trang web càng đẹp.

Hãy so sánh:

Prompt kém:

Tạo cho tôi trang web tiệm nail

→ Kết quả: trang web generic, nhàm chán, giống template cũ.

Prompt tốt: Mô tả rõ phong cách, màu sắc cụ thể, font chữ, layout, hiệu ứng — như thể bạn đang brief cho một designer chuyên nghiệp.

Prompt mẫu — Tạo landing page đẹp

Đây là prompt đã được tối ưu để tạo ra trang web thực sự đẹp. Bạn có thể copy y nguyên, hoặc thay thông tin tiệm nail bằng doanh nghiệp của bạn:

Tạo cho tôi một landing page bằng HTML, CSS và JavaScript trong 1 file duy nhất.

## Thông tin doanh nghiệp
- Tên: Tiệm Nail Hoa Hồng
- Loại hình: tiệm nail và spa cao cấp
- Địa chỉ: 123 Nguyễn Huệ, Quận 1, TP.HCM
- Số điện thoại: 0901 234 567
- Slogan: "Nơi bàn tay được chăm sóc như nghệ thuật"

## Các section cần có (theo thứ tự)
1. **Navigation**: Logo text bên trái, menu bên phải (Dịch vụ, Bảng giá, Đánh giá, Liên hệ), nút CTA "Đặt lịch ngay". Menu sticky khi scroll, có backdrop blur.
2. **Hero section**: Full-width, chiều cao 100vh. Background gradient từ #fdf2f8 sang #fce7f3. Tiêu đề lớn, slogan, 2 nút CTA (Đặt lịch / Xem dịch vụ). Thêm badge "⭐ 4.9/5 — 500+ đánh giá".
3. **Dịch vụ**: Grid 3 cột, 6 dịch vụ. Mỗi card có icon emoji lớn, tên dịch vụ, mô tả 1-2 câu, giá "từ XXXk". Các dịch vụ: Sơn gel, Nail art, Spa tay, Spa chân, Nối mi, Chăm sóc da tay. Card có hover effect nâng lên + shadow.
4. **Bảng giá**: 3 gói (Basic 199k, Premium 349k — highlight "Phổ biến nhất", VIP 599k). Mỗi gói: tên, giá lớn, danh sách tính năng có checkmark ✓, nút "Đặt lịch". Gói Premium có viền gradient hồng-tím, scale lớn hơn.
5. **Đánh giá khách hàng**: 3 testimonials dạng card. Mỗi card: ảnh avatar tròn (dùng placeholder), tên, nội dung đánh giá, 5 sao vàng. Background nhẹ khác biệt.
6. **Gallery**: Grid ảnh 2x3 (dùng placeholder gradient pastel thay ảnh thật). Hover effect zoom nhẹ.
7. **Liên hệ**: 2 cột — bên trái: form (Họ tên, SĐT, Chọn dịch vụ dropdown, Ghi chú), bên phải: thông tin liên hệ + giờ mở cửa + Google Maps placeholder.
8. **Footer**: Logo, link nhanh, thông tin liên hệ, social icons, copyright.

## Yêu cầu thiết kế
- **Color palette**: Primary #ec4899 (hồng), Secondary #8b5cf6 (tím), Accent #f59e0b (vàng), Dark #1f2937, Light #fdf2f8
- **Font**: Google Fonts — "Playfair Display" cho heading, "Inter" cho body text
- **Spacing**: Generous whitespace, mỗi section padding 80px-100px trên dưới
- **Border radius**: 16px cho card, 12px cho button, 50% cho avatar
- **Shadow**: Subtle box-shadow cho card (0 4px 20px rgba(0,0,0,0.08))
- **Responsive**: Mobile-first, breakpoint 768px. Menu → hamburger trên mobile.
- **Animation**: Fade-in + slide-up khi scroll (dùng IntersectionObserver). Staggered delay cho grid items. Smooth scroll cho anchor links.
- **Micro-interactions**: Button hover scale(1.02) + đổi shadow. Card hover translateY(-4px). Link hover đổi màu mượt.
- **Gradient**: Sử dụng gradient nhẹ cho background sections xen kẽ (trắng / hồng nhạt).
- Tất cả trong 1 file HTML duy nhất. Code sạch, có comment.

Tại sao prompt này tạo ra kết quả đẹp?

Hãy phân tích những điểm khiến prompt này hiệu quả:

1. Color palette cụ thể

Thay vì nói “màu hồng”, ta cho mã màu chính xác (#ec4899). AI sẽ dùng đúng màu này thay vì đoán.

2. Font pairing

Playfair Display + Inter là combo kinh điển: heading sang trọng + body dễ đọc. Một số combo khác bạn có thể dùng:

Heading	Body	Phong cách
Playfair Display	Inter	Sang trọng, editorial
Montserrat	Open Sans	Hiện đại, clean
Cormorant Garamond	Lato	Thanh lịch, spa
Poppins	Nunito	Trẻ trung, friendly

3. Spacing rõ ràng

“Padding 80-100px” tạo ra whitespace — khoảng trắng giữa các phần. Đây là bí quyết #1 của thiết kế đẹp: nhiều khoảng trắng = sang trọng.

4. Micro-interactions

Hover effect (nâng lên, đổi shadow) khiến trang web sống động và chuyên nghiệp. Không có animation thì trang web sẽ trông “chết”.

5. Section structure rõ ràng

Mô tả chi tiết từng section giúp AI hiểu layout chính xác thay vì tự sáng tạo (có thể không đẹp).

Gửi prompt và chờ kết quả

1. Copy prompt ở trên
2. Paste vào ChatGPT và bấm Enter
3. Đợi ChatGPT viết xong (thường 30 giây - 2 phút)

ChatGPT sẽ trả lời một khối code HTML dài. Đây chính là toàn bộ trang web của bạn!

Hiểu kết quả (không cần hiểu code)

ChatGPT trả về code bắt đầu bằng <!DOCTYPE html> và kết thúc bằng </html>. Bạn không cần hiểu — chỉ cần biết cấu trúc cơ bản:

<!DOCTYPE html>
<html lang="vi">
<head>
    <!-- Phần "đầu": font, màu sắc, layout -->
    <style> /* CSS — thiết kế */ </style>
</head>
<body>
    <!-- Phần "thân": nội dung trang web -->
    <script> /* JavaScript — hiệu ứng */ </script>
</body>
</html>

Lưu ý: Nếu ChatGPT dừng giữa chừng (code bị cắt), gõ tiếp tục hoặc continue để nó viết tiếp. Nếu vẫn bị cắt, gõ: Hãy viết lại toàn bộ code hoàn chỉnh trong 1 khối duy nhất, không giải thích, chỉ code.

Prompt cho các loại doanh nghiệp khác

Bạn có thể thay đổi phần “Thông tin doanh nghiệp” và “Các section” cho phù hợp. Dưới đây là gợi ý:

Quán cafe

- Color palette: #8B6914 (nâu cafe), #F5E6D3 (be kem), #2D1810 (nâu đậm)
- Font: "Cormorant Garamond" heading, "Lato" body
- Sections: Hero với ảnh cafe, Menu đồ uống (grid), Không gian quán (gallery), Đặt bàn

Studio ảnh / Portfolio

- Color palette: #111111 (đen), #ffffff (trắng), #e5e5e5 (xám nhạt)
- Font: "Montserrat" heading, "Inter" body
- Sections: Hero full-screen, Portfolio grid masonry, Dịch vụ, Bảng giá, Contact
- Phong cách: tối giản, nhiều whitespace, typography lớn

Tiệm tóc / Barber

- Color palette: #1a1a2e (xanh navy đậm), #d4a574 (vàng gold), #f5f0eb (be nhạt)
- Font: "Bebas Neue" heading, "Poppins" body
- Sections: Hero mạnh mẽ, Dịch vụ cắt tóc, Đội ngũ thợ, Đặt lịch, Đánh giá

Trong bài tiếp theo, chúng ta sẽ lấy code này và xem thử trên trình duyệt — bạn sẽ thấy trang web thật sự hiện ra!