​
Mục tiêu

Trong bài này, bạn sẽ dùng prompt để yêu cầu Claude Code tạo một landing page hoàn chỉnh trong file index.html. Bài viết dành cho người không biết code. Bạn chỉ cần biết mở VS Code, tạo file, copy prompt, xem kết quả và mô tả lại điều muốn chỉnh. Kết quả cuối bài:
  • Có một file index.html chạy được trên trình duyệt.
  • Landing page có đủ các phần quan trọng như hero, nội dung khóa học, FAQ và form đăng ký.
  • Bạn biết cách yêu cầu Claude Code chỉnh giao diện bằng prompt ngắn, rõ ý.

​
Bước 1: Hiểu cấu trúc landing page

Theo bài “Tổng quan”, landing page hoàn chỉnh gồm 10 phần:
  1. Hero section - phần chào mừng đầu tiên.
  2. Problem statement - vấn đề người học đang gặp.
  3. Solution section - giới thiệu khóa học như một giải pháp.
  4. Benefits section - lợi ích cụ thể người học nhận được.
  5. Course content - chương trình học.
  6. Social proof - số liệu, nhận xét hoặc sản phẩm mẫu để tạo niềm tin.
  7. Pricing - bảng giá, nếu cần.
  8. CTA sections - các nút kêu gọi hành động.
  9. FAQ - câu hỏi thường gặp.
  10. Footer - phần chân trang.
Bạn không cần tự viết 10 phần này bằng tay. Nhiệm vụ của bạn là mô tả rõ yêu cầu để Claude Code tạo bản đầu tiên, sau đó kiểm tra và yêu cầu chỉnh tiếp.

​
Bước 2: Tạo file HTML đầu tiên

1
Tạo file index.html trong thư mục dự án.
2
Mở Claude Code trong VS Code.
3
Dán toàn bộ prompt bên dưới vào Claude Code.
4
Nhấn Enter và chờ Claude Code tạo nội dung cho index.html.

​
Prompt mẫu

Tạo file `index.html` cho landing page khóa học "Claude Code - Xây dựng ứng dụng hoàn chỉnh"

## Tech Stack
- HTML5 semantic
- Tailwind CSS (CDN: https://cdn.tailwindcss.com)
- Google Fonts (Plus Jakarta Sans + Inter)
- Lucide Icons (CDN: https://unpkg.com/lucide@latest)
- Vanilla JavaScript (không dùng framework)

## Design System

**Colors:**
- Background chính: `#090A14`
- Background phụ (cards): `#13141F`
- Border: `#1F2030`
- Primary/CTA: `#DF6B33`
- Primary hover: `#C55A28`
- Text chính: `#FFFFFF`
- Text phụ: `#A0A0B0`
- Accent gradient: linear-gradient từ `#DF6B33` → `#F4A261`

**Typography:**
- Heading: Plus Jakarta Sans (weight 700-800)
- Body: Inter (weight 400-500)
- H1: 48px desktop / 32px mobile
- H2: 36px desktop / 24px mobile
- Body: 16px / line-height 1.6

**Spacing:**
- Section padding: 80px desktop / 48px mobile
- Container max-width: 1200px

## Meta Tags (đặt trong `<head>`)

```html
<title>Claude Code - Khóa học xây dựng ứng dụng hoàn chỉnh | Softech Aptech Đà Nẵng</title>
<meta name="description" content="Khóa học 8 buổi (16 tiết) thực chiến với Claude Code. Học cách xây dựng ứng dụng từ Firebase Backend đến Frontend, deploy lên Vercel. Khai giảng tháng 6/2026.">
<meta property="og:title" content="Claude Code - Xây dựng ứng dụng với AI">
<meta property="og:description" content="16 tiết thực chiến, deploy sản phẩm thực tế. Học phí ưu đãi 3.500.000đ (giảm 30%).">
<meta property="og:type" content="website">
<meta name="theme-color" content="#090A14">
```

## Responsive Breakpoints
- Mobile: < 768px (1 cột, padding 16px)
- Tablet: 768-1024px (2 cột)
- Desktop: > 1024px (full layout)

---

## Cấu Trúc 10 Sections

### 1. NAVIGATION (sticky top)
- Logo "Claude Code" — text cam `#DF6B33`, font-weight 800
- Menu links (desktop): Khóa học | Lộ trình | Học viên | FAQ
- Nút CTA "Đăng Ký Ngay" — nền cam, hover tối hơn + scale 95%
- Mobile: hamburger menu (toggle bằng JS)
- Background: `rgba(9, 10, 20, 0.9)` + backdrop-blur

### 2. HERO SECTION
**Layout:** 2 cột desktop (60% text / 40% visual), 1 cột mobile

**Left column:**
- Badge nhỏ phía trên: "🔥 Khai giảng tháng 6/2026"
- H1: "Xây dựng ứng dụng với **Claude Code**" 
  - Phần "Claude Code" có gradient text từ `#DF6B33` → `#F4A261`
- Subtitle: "Khóa học 8 buổi (16 tiết) trang bị kỹ năng thực chiến — từ cài đặt đến triển khai sản phẩm hoàn chỉnh lên Vercel"
- 2 buttons:
  - Primary: "Đăng Ký Khóa Học" (nền cam, icon arrow-right)
  - Secondary: "Xem Demo" (border xám, icon play-circle)
- Price tag: ~~5.000.000đ~~ **3.500.000đ** (badge "Giảm 30%")

**Right column (visual placeholder):**
- Div với gradient background + Lucide icon `terminal` ở giữa (size 120px, màu cam)
- Border radius 16px, shadow glow cam nhẹ

**Stats bar (full-width dưới):**
- 3 items chia đều: "16 tiết học" | "8 buổi thực chiến" | "Deploy thực tế"
- Mỗi item: số to (Plus Jakarta Sans 32px cam) + label nhỏ phía dưới

### 3. PROBLEM STATEMENT
- H2: "Bạn đang gặp những vấn đề nào?"
- Grid 2x2 (desktop) / 1 cột (mobile)
- 4 pain points cards (icon Lucide + title + description ngắn):
  - 🕐 `clock` — "Viết code mất quá nhiều thời gian"
  - 🧠 `brain` — "Khó ghi nhớ syntax và APIs phức tạp"
  - ⚠️ `alert-triangle` — "Sợ làm hỏng code khi refactoring"
  - 🤖 `bot` — "Muốn tự động hóa nhưng không biết bắt đầu từ đâu"
- Card style: nền `#13141F`, border `#1F2030`, hover → border cam

### 4. SOLUTION SECTION
- H2: "Giải Pháp Toàn Diện Cho Bạn"
- Subtitle: "Khóa học 8 buổi tập trung thực chiến, học cách sử dụng Claude Code để xây dựng ứng dụng hoàn chỉnh từ Firebase Backend đến Frontend, deploy lên Vercel"
- Grid 5 features (desktop: 3 cột hàng đầu, 2 cột hàng sau căn giữa):
  - `target` — "Hướng dẫn từng bước chi tiết (8 buổi thực chiến)"
  - `wrench` — "16 tiết học thực hành với bài tập thực tế"
  - `lightbulb` — "Học từ dự án thực tế (ProjectOS)"
  - `video` — "Video ghi lại toàn bộ buổi học"
  - `users` — "Cộng đồng học viên & Group Zalo hỗ trợ sau khóa"

### 5. TARGET AUDIENCE
- H2: "Khóa Học Dành Cho Ai?"
- Grid 2x2 (desktop) / 1 cột (mobile)
- 4 audience cards (mỗi card có icon + title + description):
  - `graduation-cap` — "Sinh viên năm 3-4 & mới ra trường" — "Lương khởi điểm 10-15 triệu/tháng"
  - `briefcase` — "Người đi làm muốn nâng cấp" — "Fresher, IT Support, Tester"
  - `palette` — "Non-tech muốn tự xây sản phẩm" — "PM, Designer, Entrepreneur"
  - `code-2` — "Developer muốn làm AI-native" — "Đã có nền tảng, muốn bứt phá"

### 6. COURSE CONTENT (Timeline)
- H2: "Chương Trình 8 Buổi"
- Subtitle: "16 tiết học thực chiến, hoàn thành project có thể deploy ngay"
- **Format:** Timeline dọc với số buổi bên trái (vòng tròn cam có số), nội dung bên phải
- 8 sessions:
  1. **Buổi 1** (0,5 tiết): Làm quen Claude Code — Cài đặt, cấu hình & luồng làm việc cơ bản
  2. **Buổi 2** (0,5 tiết): Prompt Engineering thực chiến
  3. **Buổi 3** (4 tiết): Thiết kế kiến trúc ứng dụng cùng AI
  4. **Buổi 4** (4 tiết): Xây dựng Backend với Firebase
  5. **Buổi 5** (4 tiết): Xây dựng Frontend — UI, kết nối Firebase, xử lý nghiệp vụ
  6. **Buổi 6** (1 tiết): Debug & Refactor cùng AI
  7. **Buổi 7** (1 tiết): Tích hợp tính năng nâng cao
  8. **Buổi 8** (1 tiết): Deploy & Hoàn thiện sản phẩm trên Vercel
- Mỗi session có badge thời lượng (tiết) màu cam

### 7. SOCIAL PROOF
- H2: "Sản Phẩm Học Viên"
- Highlight card lớn ở giữa:
  - Project name: **"ProjectOS — Enterprise Project Management"**
  - Demo link: `project-management.vercel.app` (icon external-link)
  - Mô tả ngắn: "Hệ thống quản lý dự án doanh nghiệp, xây dựng hoàn toàn với Claude Code trong 8 buổi học"
  - Tech stack badges: Firebase | Next.js | Vercel | Tailwind
- Quote block (italic, font lớn):
  > "Lập trình viên tương lai không phải người viết code nhanh nhất. Họ là người biết hướng dẫn AI tốt nhất."
- 2 stats nổi bật:
  - "100%" — Học viên hoàn thành project
  - "8 buổi" — Từ zero đến deploy production

### 8. CTA SECTION
- Background: gradient nhẹ từ `#090A14` → `#13141F`
- H2: "Sẵn Sàng Bắt Đầu Chưa?"
- Subtitle: "Để lại thông tin, đội ngũ tư vấn sẽ liên hệ trong 24h"
- Form đăng ký (centered, max-width 500px):
  - Input "Họ và tên" (required)
  - Input email (required, validate format)
  - Input số điện thoại (optional)
  - Button "Đăng Ký Ngay" (full-width, nền cam)
- Divider "hoặc"
- Button "Liên Hệ Hỗ Trợ" (outline, icon phone)
- Hotline display lớn: **📞 0236.3.779.779**
- Form validation bằng JS: hiển thị error message dưới input nếu sai

### 9. FAQ SECTION (Accordion)
- H2: "Câu Hỏi Thường Gặp"
- Dùng `<details>` + `<summary>` thuần HTML (tự có toggle, không cần JS)
- Style: nền `#13141F`, padding 24px, border-radius 12px
- Icon chevron-down xoay 180° khi mở (CSS transition)

**6 Q&A đầy đủ:**

1. **Q: Tôi là người mới bắt đầu, có học được không?**
   A: Hoàn toàn được! Khóa học được thiết kế từ cơ bản đến nâng cao. Buổi 1-2 sẽ trang bị nền tảng về Claude Code và Prompt Engineering. Bạn chỉ cần biết sử dụng máy tính cơ bản là có thể theo học.

2. **Q: Khóa này dành cho những ai?**
   A: Khóa học phù hợp với sinh viên IT năm 3-4, người mới ra trường, Fresher/Tester muốn nâng cấp, PM/Designer/Entrepreneur muốn tự xây sản phẩm, và Developer đã có nền tảng muốn làm AI-native.

3. **Q: Tôi mất bao lâu để hoàn thành?**
   A: Khóa học kéo dài 4 tuần với 8 buổi (16 tiết). Mỗi tuần học 2 buổi, mỗi buổi 2 tiết. Sau khóa học, bạn sẽ có 1 sản phẩm hoàn chỉnh deploy lên Vercel.

4. **Q: Có hỗ trợ sau khi mua không?**
   A: Có! Bạn được tham gia Group Zalo riêng để được hỗ trợ trực tiếp từ giảng viên trong vòng 3 tháng sau khóa học. Ngoài ra, được truy cập video bài giảng vĩnh viễn.

5. **Q: Nếu tôi không hài lòng thì sao?**
   A: Softech Aptech cam kết hoàn 100% học phí nếu bạn không hài lòng sau buổi học đầu tiên. Sau buổi 1, nếu cảm thấy không phù hợp, chỉ cần báo trong vòng 24h.

6. **Q: Tôi có truy cập vĩnh viễn không?**
   A: Có. Video ghi lại toàn bộ 8 buổi học sẽ được upload lên hệ thống và bạn có quyền truy cập vĩnh viễn. Tài liệu, source code, và slide đều có thể tải về.

### 10. FOOTER
- Background: `#050610` (tối hơn body)
- Grid 4 cột (desktop) / 1 cột (mobile):
  
  **Cột 1: Brand**
  - Logo "Claude Code"
  - Description ngắn: "Khóa học AI-native development tại Softech Aptech Đà Nẵng"
  
  **Cột 2: Liên hệ**
  - 📍 24 Lê Thánh Tôn, Đà Nẵng
  - 📞 0236.3.779.779
  - ✉️ info@softech.vn
  
  **Cột 3: Theo dõi**
  - Icon links (Lucide): facebook, message-circle (Zalo), linkedin, youtube
  
  **Cột 4: Newsletter**
  - Title: "Nhận tips Claude Code miễn phí"
  - Input email + button "Đăng ký" (inline)
  
- Divider line
- Copyright: "© 2026 Softech Aptech Đà Nẵng. All rights reserved."

---

## JavaScript Requirements

```javascript
// 1. Mobile menu toggle
// 2. Smooth scroll cho anchor links (CSS scroll-behavior: smooth)
// 3. Form validation (email regex, required fields)
// 4. Form submit → hiển thị success message (alert hoặc toast)
// 5. Stats counter animation khi scroll vào view (IntersectionObserver)
// 6. Lucide icons init: lucide.createIcons()
// 7. Navbar background đậm hơn khi scroll > 50px
```

## Images and Assets

- Get image from Unsplash site or use placeholder (https://via.placeholder.com) based on industry keywords (e.g., "spa", "restaurant", "technology", "education").

## Animations & Effects

- **Buttons:** hover → background tối hơn 10% + scale(0.98) khi active
- **Cards:** hover → border chuyển sang `#DF6B33` + translateY(-4px), transition 300ms
- **Gradient text:** `background: linear-gradient(...); -webkit-background-clip: text;`
- **Scroll reveal:** sections fade-in + slide-up khi vào viewport (IntersectionObserver)
- **Accordion FAQ:** chevron xoay 180°, content slide với max-height transition
- **Smooth scroll:** `html { scroll-behavior: smooth; }`
- **Glow effect** cho Hero visual: `box-shadow: 0 0 80px rgba(223, 107, 51, 0.3);`

## Output Requirements

- File duy nhất: `index.html`
- Toàn bộ CSS inline trong `<style>` hoặc qua Tailwind classes
- JavaScript inline trong `<script>` ở cuối `<body>`
- Tất cả assets qua CDN (fonts, icons, Tailwind)
- Mở trực tiếp trên trình duyệt, không cần build/server
- Hoạt động offline sau lần load đầu (cache CDN)
- Lighthouse score mục tiêu: Performance > 90, Accessibility > 95
- Semantic HTML: dùng `<header>`, `<nav>`, `<main>`, `<section>`, `<footer>`
- Alt text cho mọi visual element
- ARIA labels cho buttons và form inputs

​
Bước 3: Tinh chỉnh kết quả đầu tiên

Sau khi Claude Code tạo xong landing page, hãy mở trang để xem kết quả. Bạn không cần hiểu code ngay. Hãy nhìn trang như một người dùng:
  • Bố cục có rõ ràng không?
  • Chữ có dễ đọc không?
  • Nút đăng ký có nổi bật không?
  • Trang có hiển thị tốt trên điện thoại không?
  • Có phần nào sai nội dung hoặc thiếu nội dung không?
Nếu chưa ổn, hãy yêu cầu Claude Code chỉnh tiếp.

​
Những điều có thể yêu cầu chỉnh

Về giao diện:
  • Chỉnh nền tối, nút cam và màu chữ.
  • Chỉnh font chữ, cỡ chữ và độ đậm của tiêu đề.
  • Thêm icon cho từng phần.
  • Sắp xếp lại bố cục trên desktop và điện thoại.
Về tương tác:
  • Thêm hiệu ứng khi di chuột.
  • Thêm hiệu ứng xuất hiện khi cuộn trang.
  • Làm thao tác cuộn mượt hơn.
Về cảm nhận:
  • Làm trang nhìn chuyên nghiệp hơn.
  • Tối ưu trải nghiệm trên điện thoại.
  • Tăng khoảng cách giữa các phần để dễ đọc.

​
Prompt mẫu

Tinh chỉnh landing page để trông chuyên nghiệp hơn

Yêu cầu:
1. Thêm font Inter (hoặc font tương tự hỗ trợ Unicode Tiếng Việt) cho tiêu đề (lớn, đậm), font Inter cho chữ thường
2. Thêm icon từ Lucide Icons cho từng section (zap, settings, users, star, v.v.)
3. Bố cục trang: 2 cột trên desktop, 1 cột trên di động
4. Thêm hiệu ứng:
   - Nút thay đổi màu khi di chuột
   - Thẻ sáng lên khi di chuột
   - Text xuất hiện từ từ khi cuộn xuống
5. Tối ưu hóa cho mọi kích thước màn hình
6. Thêm khoảng cách, padding, để trang không bị chật
Sau khi Claude Code chỉnh xong, hãy kiểm tra:
  • Trang trông đẹp chưa?
  • Hiệu ứng hoạt động chưa?
  • Hiển thị đúng trên di động không?
  • Chữ dễ đọc không?

​
Bước 4: Kiểm tra kết quả

​
Cách preview trong VS Code

1
Nhấn chuột phải vào file index.html.
2
Chọn Open with Live Server.
3
Trình duyệt sẽ mở trang preview.
4
Thu nhỏ trình duyệt hoặc dùng chế độ mobile để kiểm tra giao diện trên màn hình nhỏ.

​
Checklist kiểm tra

Giao diện:
  • Nền tối có đúng màu #090A14 không?
  • Màu cam #DF6B33 có dùng cho nút chính không?
  • Chữ có dễ đọc không?
  • Nút đăng ký có rõ ràng không?
  • Các card có khoảng cách dễ nhìn không?
Responsive:
  • Desktop hiển thị đúng bố cục nhiều cột.
  • Tablet không bị vỡ layout.
  • Mobile hiển thị một cột và không bị tràn chữ.
Tương tác:
  • Nút có hiệu ứng khi di chuột không?
  • Menu mobile có mở và đóng được không?
  • FAQ có mở và đóng được không?

​
Bước 5: Sửa lỗi và điều chỉnh

Khi thấy lỗi, đừng chỉ nói “sửa lại cho đẹp”. Hãy mô tả phần nào đang sai và bạn muốn nó đúng như thế nào. Lỗi: Icons không hiển thị 
Prompt: Kiểm tra Lucide Icons có load đúng không?
Thêm <script src="https://unpkg.com/lucide@latest"></script>
vào <head> và gọi lucide.createIcons() ở cuối <body>
Lỗi: Màu không đúng 
Prompt: Sửa màu nền thành #090A14,
màu primary thành #DF6B33.
Kiểm tra tất cả buttons, backgrounds, text colors đều dùng màu đúng.
Lỗi: Responsive không đúng 
Prompt: Sửa responsive:
- Desktop (md+): 2 cột
- Tablet (sm): 1.5 cột
- Mobile: 1 cột

Dùng grid-cols-1 md:grid-cols-2 lg:grid-cols-3

​
Bước 6: Tối ưu từng section

​
Khi muốn tối ưu một section cụ thể

Khi trang đã có bố cục tổng thể, hãy chỉnh từng section. Cách này dễ kiểm tra hơn so với yêu cầu Claude Code sửa toàn bộ trang cùng lúc.

​
Ví dụ prompt cho từng section

Prompt sửa Hero Section: 
Sửa Hero Section trong index.html

Hiện tại: [Mô tả vấn đề - ví dụ: "Gradient text không rõ", "Button không responsive"]

Mục tiêu:
- Tiêu đề có gradient (từ #DF6B33 → orange-400)
- Subheadline rõ ràng, dễ đọc
- 2 buttons nổi bật (primary cam + secondary xám)
- 3 stats: Bold, tách rõ
- Responsive: 2 cột desktop, 1 cột mobile

Keep: Màu, layout cũ, chỉ tối ưu styling
Prompt sửa Problem Statement Section: 
Sửa Problem Statement Section

Chi tiết:
- Tiêu đề: "Bạn đang gặp những vấn đề nào?"
- 4 pain points + icons (⏱️ ⚠️ 😰 🔄)
- Mỗi pain point: Icon (36x36px) + title + description
- Layout: 2x2 grid (desktop), 1 cột (mobile)
- Hover effect: background sáng hơn

Style:
- Card nền #111827, border #1F2937
- Icon color #DF6B33
- Text: gray-50 (title), gray-400 (desc)
Prompt sửa Benefits Section: 
Sửa Benefits Section

Yêu cầu:
- 3 benefit cards ngang hàng (desktop), dọc (mobile)
- Mỗi card: Icon (48px) + Title + Description
- Hover: Border sáng lên #DF6B33
- Icon color gradient (#DF6B33 → orange)

Tối ưu:
- Typography: Title text-xl, description text-sm
- Spacing: Padding 24px, gap 16px
- Icons: Bold, distinctive
Prompt sửa Pricing Section (nếu thêm): 
Thêm Pricing Section sau Course Content

Chi tiết:
- Tiêu đề: "Chọn Gói Phù Hợp"
- 3 pricing cards ngang hàng:
  * Học Phí Gốc: 2.400.000 VNĐ (giá tham chiếu, gạch ngang)
  * Học Phí Trọn Gói: 1.800.000 VNĐ - Nổi bật hơn
  * Nộp Trước 30/04/2026: 1.600.000 VNĐ (ưu đãi giảm giá)
- Mỗi card: Price + Features list + "Đăng Ký Ngay" button
- Badge "Ưu Đãi" trên card giảm giá

Giá trị so sánh:
- "Tiết kiệm hơn so với 2 tháng học lập trình truyền thống"
- "Tài khoản Claude Code Pro được cấp sẵn trong khóa học"

Bảo đảm: "30 ngày hoàn tiền 100% nếu không hài lòng"

Style:
- Học Phí Gốc: nền #111827, text gray-400, gạch ngang
- Học Phí Trọn Gói: nền #DF6B33 với text đen, scale lớn hơn
- Ưu đãi: nền #111827, border #DF6B33
- Responsive: 3 cột desktop → 1 cột mobile

​
Bước 7: Cách viết prompt dễ hiểu

​
Nên làm

  1. Cụ thể màu sắc
    • Tốt: “Nền #090A14, text #F3F4F6”
    • Chưa rõ: “Nền tối, text sáng”
  2. Mô tả layout rõ ràng
    • Tốt: “2 cột desktop (60% text, 40% image), 1 cột mobile”
    • Chưa rõ: “2 cột”
  3. Ví dụ cụ thể
    • Tốt: “Buttons như trên website Next.js, nhưng dùng dark theme”
    • Chưa rõ: “Buttons xinh”
  4. Yêu cầu responsive từ đầu
    • Tốt: “Desktop 3 cột, mobile 1 cột, dùng Tailwind grid”
    • Chưa rõ: chỉ nói “làm đẹp” và quên phần responsive
  5. Kiểm tra từng phần
    • Tốt: “Kiểm tra hero section responsive trên mobile”
    • Chưa rõ: “Sửa responsive”

​
Không nên làm

  1. Prompt quá ngắn
    • Chưa rõ: “Tạo landing page”
    • Tốt: “Tạo landing page với hero, features, testimonials, footer. Nền #090A14, màu chính #DF6B33”
  2. Không chỉ rõ yêu cầu
    • Chưa rõ: “Làm nó đẹp”
    • Tốt: “Màu text gray-50, font Plus Jakarta Sans bold ở tiêu đề”
  3. Quên context
    • Chưa rõ: lần 1 “tạo HTML”, lần 2 “thêm CSS” nhưng không nhắc lại yêu cầu ban đầu
    • Tốt: “Tạo HTML + CSS + toàn bộ styling trong một lần”
  4. Yêu cầu mơ hồ
    • Chưa rõ: “Thêm animation”
    • Tốt: “Thêm fade-in animation cho cards khi scroll đến. Duration 600ms”

​
Bước 8: Quy trình hoàn chỉnh

Bạn có thể làm theo quy trình sau: 
1. Mở VS Code
2. Tạo folder "claude-code-landing"
3. Mở Claude Code
4. Prompt 1: Tạo index.html cơ bản
5. Preview: Mở Live Server và kiểm tra layout
6. Prompt 2: Chỉnh màu sắc, font chữ và spacing
7. Preview: Kiểm tra màu và responsive
8. Prompt 3: Chỉnh từng section còn chưa ổn
9. Preview: Kiểm tra toàn bộ trang
10. Deploy lên hosting khi hoàn thiện

​
Bước 9: Mẹo viết prompt

Khi muốn landing page giống website nào: 
Tạo Hero Section tương tự như landing page của [Tên công ty/sản phẩm]:
[Link website]

Giữ nguyên style của chúng ta (nền #090A14, màu #DF6B33)
nhưng copy layout & cấu trúc từ link trên.

​
Mẹo 2: Phản hồi nhanh

Không cần prompt dài, chỉ cần: 
Feedback: Sửa [CHỈ RÕ PHẦN]
- [Thay đổi 1]
- [Thay đổi 2]
Keep mọi thứ khác giống như cũ.

​
Mẹo 3: Yêu cầu code dễ đọc

Tạo [COMPONENT]
Requirements:
- Clean code, dễ đọc
- Có comment giải thích phần phức tạp
- Theo standard naming (camelCase)

​
Mẹo 4: Tái sử dụng phần đã tạo

Tạo component button tái sử dụng:
<div class="btn-primary">...</div>

Sau này chỉ cần dùng lại thay vì viết lại.

​
Bước 10: Tự kiểm tra

Trước khi xem kết quả, tự hỏi:

​
Chức năng

  • Tất cả nút bấm click được không?
  • Link hoạt động không?
  • Responsive hoạt động không?
  • Icon hiển thị đúng không?

​
Thiết kế

  • Màu sắc đúng không?
  • Font chữ hợp lý không?
  • Khoảng cách đều không?
  • Căn lề đúng không?

​
Trải nghiệm

  • Chữ có dễ đọc không?
  • Nút bấm có rõ ràng không?
  • Loading nhanh không?
  • Giao diện mobile có ổn không?

​
Mã nguồn

  • Claude Code có sắp xếp file dễ đọc không?
  • Có comment ở những phần phức tạp không?
  • Các phần như button, card, section có style nhất quán không?

​
Bước 11: Deploy tùy chọn

Khi landing page hoàn thiện, bạn muốn live trên internet: 
Prompt:
Hướng dẫn mình cách deploy landing page này lên:
- GitHub Pages
- Vercel (Bài sau)
- Netlify (Tham khảo thêm)


Giải thích từng bước, không cần code, chỉ cần hướng dẫn click buttons.
Claude Code sẽ hướng dẫn bạn deploy mà không cần dùng terminal!

​
FAQ

​
Về cách viết prompt

Q: Claude Code viết code sai phải làm gì?
A: Feedback rõ ràng. “Sửa [CÁI NÀO]. Hiện tại nó [SAI THẾ NÀO]. Nó nên [ĐÚNG THẾ NÀO]” Q: Mất bao lâu để tạo landing page hoàn thiện?
A: 30-60 phút nếu biết cách viết prompt. Không phải 1 prompt xong tất cả! Q: Có thể request Claude Code viết 1 trang phức tạp không?
A: Có, nhưng chia nhỏ thành prompt nhỏ. Dễ check & sửa từng phần. Q: Cần biết HTML/CSS/JS không?
A: KHÔNG! Claude Code viết cho bạn. Chỉ cần viết prompt rõ ràng. Q: Có thể dùng lại components không?
A: Có! Copy code của 1 component, dùng lại. Claude Code sẽ adapt theo context.

​
Về 10 phần của landing page

Q: Mình phải viết 10 cái prompt khác nhau hay 1 prompt lớn?
A: Recommend 1 prompt lớn (Bước 3) cho tất cả 10 sections. Sau đó dùng prompts nhỏ để tối ưu từng section. Q: Nếu muốn bỏ đi section nào (ví dụ: Pricing)?
A: Bỏ nó khỏi prompt. Ví dụ: “Không cần Pricing section, chỉ cần 9 sections còn lại” Q: Problem Statement section có bắt buộc không?
A: Không bắt buộc, nhưng rất hiệu quả vì nó tạo đồng cảm. Recommend giữ lại. Q: Features Section vs Benefits Section có gì khác?
A: Features = “Cái gì bạn được” (40 giờ video). Benefits = “Nó giúp bạn như thế nào” (Tiết kiệm 200 giờ). Cả hai nên có. Q: FAQ section có phải là accordion không?
A: Không bắt buộc. Có thể là Q&A đơn giản. Nhưng accordion trông chuyên nghiệp hơn. Q: Social Proof section nên có bao nhiêu testimonials?
A: 2-3 là đủ. Quá nhiều (5+) sẽ làm trang dài.

​
Về styling và responsive

Q: Làm sao tô màu #DF6B33 cho buttons mà Tailwind không có màu này?
A: Dùng bg-[#DF6B33] hoặc text-[#DF6B33]. Tailwind hỗ trợ arbitrary colors. Q: Mobile view bị xấu, làm sao?
A: Dùng Tailwind prefixes: sm:, md:, lg:. Ví dụ: grid-cols-1 md:grid-cols-3 Q: Hover effects có cần thiết không?
A: Nên có! Hover tạo interactivity. Ví dụ: hover:bg-primary-600, hover:border-primary-500

​
Về deploy

Q: Tạo xong landing page, làm sao để live trên internet?
A: Dùng Vercel, Netlify, hoặc GitHub Pages. Chỉ cần push code lên GitHub, link repo, xong. Q: Có cần database không?
A: Không. Landing page static (chỉ HTML + CSS + JS) không cần database. Q: Làm sao để nhận email khi khách click “Liên Hệ”?
A: Thêm form service (Formspree, EmailJS). Sẽ hướng dẫn ở bài deploy.

​
Kết luận

Với Claude Code, bạn không cần là lập trình viên để tạo bản landing page đầu tiên. Chìa khóa là viết prompt rõ ràng, kiểm tra kết quả, rồi phản hồi từng phần.

​
Sử dụng template

  1. Tạo file index.html.
  2. Copy prompt ở bước 2 và dán vào Claude Code.
  3. Nhấn Enter và chờ Claude Code tạo HTML.
  4. Mở bằng Live Server để preview.
  5. Kiểm tra từng section theo checklist.
  6. Dùng prompt nhỏ để tối ưu từng section.
  7. Deploy khi hoàn thiện.