Chuẩn bị & viết prompt

​

Giới thiệu

• 💬 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 ý

• 🎨 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ả!

​

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

• 🗣️ 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!

​

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

​

Ví dụ 1: Hero Section

"Làm cái landing page đẹp"

• 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

"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"

• 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

"Làm màu sắc xinh"

• “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 ý

"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"

• 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

"Làm responsive"

• 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)

"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"

• 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

"Thêm cards"

• Bao nhiêu cards? 3? 5? 10?
• Card chứa cái gì? Text? Icon? Image?
• Claude Code có thể hiểu khác

"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"

• 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:

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ể]

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: