​
Giới thiệu

Bài hướng dẫn này được thiết kế cho người không biết code. Bạn sẽ học cách:
  • 💬 Viết prompt hiệu quả - Yêu cầu Claude Code làm gì cách nào để nó hiểu đúng
  • 🎯 Tương tác từng bước - Không cần code tất cả 1 lần, có thể sửa từng phần
  • 🧪 Kiểm tra & feedback - Biết được kết quả đúng hay sai
  • 🔄 Lặp lại để hoàn thiện - Từng bước điều chỉnh cho đến khi ưng ý
Mục tiêu cuối cùng: Tạo landing page giới thiệu khóa học Claude Code với:
  • 🎨 Giao diện đẹp (nền đen, màu cam #DF6B33)
  • 📱 Responsive (nhìn đẹp trên desktop & mobile)
  • ✨ Chuyên nghiệp (có animation, màu sắc hợp lý)

​
🚀 Bước 1: Chuẩn Bị

​
Bạn cần gì?

  1. Claude Code (đã cài sẵn nếu dùng VS Code)
  2. Một folder mới để chứa project
    • Tạo thư mục mới: claude-code-landing
    • Mở thư mục này trong VS Code
  3. Trình duyệt web để xem kết quả

​
Không cần gì cả!

❌ Không cần biết JavaScript, CSS, HTML
❌ Không cần cài NodeJS, npm
❌ Không cần chạy terminal commands Claude Code sẽ viết tất cả code cho bạn! 🤖

​
💬 Bước 2: Viết Prompt Hiệu Quả - Khái Niệm

Prompt là yêu cầu mà bạn gửi cho Claude Code. Cách viết prompt đúng quyết định Claude Code có hiểu được ý của bạn hay không. Tương tự như:
  • 🗣️ Bạn nói với thợ xây: “Làm cái nhà đẹp” → Thợ không biết muốn gì
  • 📋 Bạn nói với thợ xây: “Xây ngôi nhà 2 tầng, 4 phòng, mái ngói đỏ, màu trắng” → Rõ ràng!
Prompt tốt = Yêu cầu cụ thể, chi tiết, rõ ràng

​
Ví Dụ Chi Tiết - Tốt vs Tồi:

​
Ví dụ 1: Hero Section

❌ Prompt Tồi: 
"Làm cái landing page đẹp"
⚠️ Vấn đề:
  • Claude Code không biết gì cả: cần bao nhiêu section? Màu gì? Layout sao?
  • Có thể Claude Code tạo cái hoàn toàn khác ý của bạn
✅ Prompt Tốt: 
"Tạo 1 file HTML có hero section gồm:
- Tiêu đề lớn: 'Làm chủ Claude Code' (Poppins, 48px, bold)
- Mô tả dưới tiêu đề (16px, regular)
- 2 buttons: 'Đăng Ký Khóa Học' (cam #DF6B33) + 'Xem Demo' (xám)
- 3 stats ngang hàng: số lượng, rating, percentage
- Responsive: Desktop 2 cột (text + image), Mobile 1 cột"
✅ Tại sao tốt:
  • Cụ thể từng phần (tiêu đề, button, stats)
  • Cho biết màu, kích thước, font (Claude Code không phải đoán)
  • Cho biết layout desktop vs mobile (responsive)
  • Claude Code hiểu rõ = tạo đúng ý bạn

​
Ví dụ 2: Màu sắc

❌ Prompt Tồi: 
"Làm màu sắc xinh"
⚠️ Vấn đề:
  • “Xinh” là chủ quan - màu gì là xinh? Xanh? Hồng? Vàng?
  • Claude Code tạo ra có thể hoàn toàn khác ý
✅ Prompt Tốt: 
"Sử dụng Tailwind CSS để tạo dark theme với:
- Nền chính: #090A14 (màu đen sâu)
- Màu chính (CTA buttons): #DF6B33 (cam)
- Màu phụ (cards): #111827 (xám đen)
- Text: #F3F4F6 (trắng nhạt)
- Tất cả phần tử dùng đúng màu này"
✅ Tại sao tốt:
  • Cụ thể từng màu (hex code #090A14, không phải “đen”)
  • Cho biết dùng ở đâu (button dùng cam, card dùng xám)
  • Theo dark theme (nhất quán)
  • Claude Code không thể hiểu sai

​
Ví dụ 3: Responsive Design

❌ Prompt Tồi: 
"Làm responsive"
⚠️ Vấn đề:
  • Responsive như thế nào? 2 cột? 1 cột? Cỡ nào thay đổi?
  • Claude Code có thể làm 3 cột ở mobile (vẫn là responsive, nhưng không phải ý bạn)
✅ Prompt Tốt: 
"Responsive design:
- Desktop (md+): 2 cột (text 60%, image 40%)
- Tablet (sm): 1 cột, text vừa phải
- Mobile: 1 cột, font 14-16px (không quá to)
- Dùng Tailwind: grid-cols-1 sm:grid-cols-2 lg:grid-cols-2"
✅ Tại sao tốt:
  • Cụ thể layout: desktop 2 cột, mobile 1 cột
  • Cho biết kích thước font (14-16px)
  • Cho biết dùng Tailwind prefixes (sm:, md:, lg:)
  • Claude Code hiểu rõ = layout đúng ý

​
Ví dụ 4: Features/Cards

❌ Prompt Tồi: 
"Thêm cards"
⚠️ Vấn đề:
  • Bao nhiêu cards? 3? 5? 10?
  • Card chứa cái gì? Text? Icon? Image?
  • Claude Code có thể hiểu khác
✅ Prompt Tốt: 
"Thêm 3 feature cards dưới hero section:
- Mỗi card có: Icon (36px, #DF6B33) + Title (20px, bold) + Description (14px)
- Card 1: Icon ⚡ + 'Tiết Kiệm Thời Gian' + 'Giảm 70% thời gian viết code'
- Card 2: Icon ⚙️ + 'Kỹ Năng Chuyên Nghiệp' + 'Học từ dự án thực tế'
- Card 3: Icon 🤝 + 'Hỗ Trợ 24/7' + 'Cộng đồng sẵn sàng'
- Layout: 3 cột desktop, 1 cột mobile
- Card nền #111827, border #1F2937"
✅ Tại sao tốt:
  • Cụ thể số lượng (3 cards)
  • Cụ thể từng card (icon, title, description)
  • Cho biết kích thước từng phần
  • Cho biết layout responsive
  • Claude Code tạo đúng theo ý

​
Công Thức Viết Prompt Tốt:

CÁCH LÀM: 
Yêu cầu:
1️⃣ CÁI GÌ: Tạo/Thêm/Sửa [component/section cụ thể]
   ↓
2️⃣ CHI TIẾT: Gồm những gì? Bao nhiêu?
   - Item 1: [mô tả rõ]
   - Item 2: [mô tả rõ]
   ↓
3️⃣ STYLING: Màu? Kích thước? Font?
   - Nền: [màu cụ thể]
   - Text: [kích thước cụ thể]
   - Icons: [kích thước + màu]
   ↓
4️⃣ RESPONSIVE: Desktop? Mobile?
   - Desktop: [layout cụ thể]
   - Mobile: [layout cụ thể]
VÍ DỤ HOÀN CHỈNH: 
Tạo Problem Statement Section

Chi tiết:
- Tiêu đề: "Bạn đang gặp những vấn đề nào?"
- 4 pain points (bullet + icon):
  * Viết code mất quá nhiều thời gian
  * Khó ghi nhớ syntax và APIs
  * Sợ làm hỏng code khi refactoring
  * Muốn tự động hóa các tác vụ lặp

Styling:
- Tiêu đề: Poppins, 36px, bold, #F3F4F6
- Mỗi pain point: Icon (36px, #DF6B33) + Text (16px, gray)
- Item spacing: 24px gap

Responsive:
- Desktop: 2x2 grid (2 cột, 2 hàng)
- Mobile: 1 cột

​
🎯 Tóm Tắt - Làm Prompt Tốt:

✅ LÀM❌ KHÔNG LÀM
”Tạo 3 cards với icon, title, description""Thêm cards"
"Nền #090A14, text #F3F4F6""Màu đẹp"
"Desktop 2 cột, Mobile 1 cột""Responsive"
"Poppins 48px bold cho heading""Font to đậm"
"Button nền #DF6B33, text trắng, hover tối hơn""Button xinh"
"Spacing: padding 24px, gap 16px""Spacing vừa phải”