​
Giới thiệu

Khi viết prompt cho Claude Code, bạn sẽ gặp một số từ kỹ thuật. Bài viết này giải thích chúng bằng ngôn ngữ đơn giản, không cần biết lập trình.

​
1. HTML - Cấu Trúc Trang Web

HTML là gì? HTML là “bộ xương” của trang web. Nó định nghĩa cấu trúc, bố cục, những gì xuất hiện trên trang. Ví dụ: 
Tiêu đề chính
  ↓ (HTML nói rằng đây là tiêu đề chính)

Đoạn văn bản
  ↓ (HTML nói rằng đây là đoạn văn)

Nút "Đăng Ký"
  ↓ (HTML nói rằng đây là nút, khi click sẽ làm gì)
Các thành phần HTML phổ biến:
  • header = Phần đầu trang (logo, menu)
  • nav = Thanh điều hướng (menu links)
  • section = Khu vực (ví dụ: Hero section, Features section)
  • button = Nút bấm
  • footer = Phần chân trang (liên hệ, links)
  • div = Hộp chứa (dùng để nhóm các phần tử)
Khi viết prompt, bạn sẽ nói:
  • “Tạo một HTML file với header, hero section, footer”
  • “Thêm buttons và links”
  • Bạn KHÔNG cần viết code HTML, chỉ cần nói Claude Code cần gì!
Để biết chi tiết các thành phần HTML, hãy prompt hỏi Claude Code về chúng. Ví dụ:

Liệt kê các thẻ HTML phổ biến

​
2. CSS - Trang Trí & Bố Cục

CSS là gì? CSS là “quần áo và makeup” của trang web. Nó quyết định:
  • Màu sắc
  • Kích thước chữ
  • Khoảng cách giữa các thành phần
  • Hình dạng, góc cạnh
  • Bố cục (2 cột hay 1 cột)
Ví dụ: 
HTML: "Đây là tiêu đề"
  ↓ (HTML tạo cấu trúc)

CSS: "Tiêu đề này nên:
      - Màu trắng
      - Kích thước lớn (48px)
      - Dùng font Poppins
      - Đặt ở giữa"
Các thuật ngữ CSS bạn sẽ gặp: Màu sắc:
  • Hex color: #090A14 (mã màu dạng số)
    • #090A14 = Đen sâu
    • #DF6B33 = Cam
    • #FFFFFF = Trắng
    • Khi viết prompt: “Nền #090A14, text #FFFFFF”
Kích thước:
  • 16px = Kích thước chữ bình thường (px = pixel)
  • 48px = Kích thước chữ lớn (tiêu đề)
  • 24px = Kích thước icon
  • Khi viết prompt: “Font 16px cho chữ thường, 48px cho tiêu đề”
Khoảng cách:
  • padding = Khoảng cách bên trong (từ cạnh đến nội dung)
  • gap = Khoảng cách giữa các items
  • Khi viết prompt: “Padding 24px, gap 16px”
Bố cục:
  • flexbox = Sắp xếp linh hoạt (items theo hàng hoặc cột)
  • grid = Sắp xếp dạng lưới (rows và columns)
  • Khi viết prompt: “Desktop 2 cột, mobile 1 cột”
Border & Rounded:
  • border = Đường viền xung quanh
  • rounded = Góc cạnh bo tròn
  • Khi viết prompt: “Thêm border xám, góc bo tròn”
Để biết chi tiết các thuộc tính CSS, hãy prompt hỏi Claude Code về chúng. Ví dụ:

Liệt kê các thuộc tính CSS phổ biến

​
3. Icons - Biểu Tượng Nhỏ

Icons là gì? Icons là những hình biểu tượng nhỏ giúp khách truy cập nhanh chóng nhận ra chức năng. Icon ví dụ:
  • ⚡ = Speed / Tốc độ
  • ⚙️ = Settings / Cài đặt
  • 👥 = Users / Người dùng
  • ⭐ = Star / Đánh giá
  • ✓ = Check / Hoàn thành
  • 🔧 = Tools / Công cụ
  • 📱 = Mobile / Di động
Lucide Icons - Khuyến nghị sử dụng: Lucide Icons là bộ icon SVG miễn phí, modern, dễ dùng. Claude Code lấy từ CDN (không cần cài thêm). Khi viết prompt: 
"Thêm icons:
- Hero: star icons (4 cái)
- Features: zap, settings, users icons
- Dùng Lucide Icons từ CDN
- Icon size: 24px, màu #DF6B33"
Icon sizes:
  • 24px = Nhỏ (buttons, text inline)
  • 36px = Vừa (cards, list items)
  • 48px = Lớn (hero, section headers)
Thư viện icons khác (nếu muốn thay thế Lucide):
Thư việnĐặc điểmPhù hợp với
Lucide IconsHiện đại, đơn giản, 1000+ iconsLanding page, ứng dụng web
Tabler IconsHiện đại, đơn giản, 1000+ iconsUI hiện đại, app web
Hero IconsHiện đại, đơn giản, 1000+ iconsLanding page, ứng dụng web
Font AwesomePhổ biến, 7000+ iconsBất kỳ project nào
Feather IconsNhỏ gọn, tối giảnDesign hiện đại, minimal
Material IconsChuyên nghiệp, 5000+ iconsỨng dụng Google-style
Bootstrap IconsĐơn giản, 2000+ iconsBootstrap projects
IoniconsMobile-friendly, 1000+ iconsỨng dụng di động
Cách nói với Claude Code: 
"Dùng Lucide Icons" (khuyến nghị)
hoặc
"Dùng Font Awesome icons"
hoặc
"Dùng Feather Icons"
Claude Code sẽ tự động lấy từ CDN - bạn KHÔNG cần biết chi tiết! 🎯

​
4. Font - Chữ Viết

Font là gì? Font là kiểu chữ. Mỗi font có cảm giác khác nhau. Ví dụ fonts:
  • Poppins = Chữ hiện đại, tròn, dễ đọc
    • Thường dùng cho tiêu đề (bold, lớn)
  • Inter = Chữ sạch, rõ ràng, chuyên nghiệp
    • Thường dùng cho body text (thường, vừa)
Font weight (độ đậm):
  • 400 = Regular (bình thường, dễ đọc)
  • 500 = Medium (đậm một chút)
  • 600 = Semi-bold (đậm)
  • 700 = Bold (đậm)
  • 800 = Extra-bold (rất đậm, cho tiêu đề)
Khi viết prompt:
  • “Poppins 700 bold cho tiêu đề”
  • “Inter 400 regular cho body text”
  • “Font 48px cho heading, 16px cho paragraph”
Google Fonts: Google cung cấp font miễn phí qua CDN (bạn không cần download).

​
5. Animation - Chuyển Động

Animation là gì? Animation là những chuyển động nhỏ trên trang, tạo cảm giác sống động và chuyên nghiệp. Animate.style là gì? Animate.style là thư viện chứa hàng chục hiệu ứng animation sẵn. Claude Code sẽ sử dụng thư viện này để bạn không cần code.
https://animate.style
Bạn chỉ cần nói: “Thêm animate.style” hoặc chỉ định hiệu ứng cụ thể. Danh sách hiệu ứng phổ biến để dùng trong prompt: Entrance Animations (Xuất hiện):
  • fadeIn - Xuất hiện từ từ (mờ → sáng)
  • slideInUp - Trượt lên từ dưới
  • slideInDown - Trượt xuống từ trên
  • slideInLeft - Trượt vào từ trái
  • slideInRight - Trượt vào từ phải
  • zoomIn - Phóng to từ từ
  • bounceIn - Nhảy vào
Emphasis Animations (Nhấn mạnh):
  • pulse - Nhăn nhó (chậm, lặp lại)
  • bounce - Nhảy (lặp lại)
  • swing - Đung đưa
  • wobble - Lắc lư
  • heartBeat - Đập tim (lặp lại)
  • flip - Lật
  • shake - Rung
Exit Animations (Biến mất):
  • fadeOut - Mờ dần (sáng → mờ)
  • slideOutUp - Trượt lên khỏi màn hình
  • slideOutDown - Trượt xuống khỏi màn hình
  • zoomOut - Thu nhỏ dần
Hover Effects (Khi di chuột):
  • pulse - Button nhăn nhó
  • bounce - Button nhảy
  • swing - Button đung đưa
  • grow - Button phóng to
  • glow - Button tỏa sáng
Khi viết prompt: 
"Thêm animations:
- Hero section: fadeInUp (xuất hiện từ dưới)
- Cards: fadeInUp with delay (lần lượt xuất hiện)
- Buttons hover: pulse (nhấn mạnh)
- CTA section: slideInUp (trượt lên)

Dùng Animate.css library"
Ví dụ cụ thể: 
❌ Prompt tồi: "Thêm animation"
✅ Prompt tốt: "Thêm fadeIn animation cho tiêu đề,
               slideInUp animation cho cards khi scroll,
               pulse animation khi hover buttons"
Lưu ý:
  • Chọn 2-3 animation cho trang (quá nhiều sẽ loạn)
  • Phổ biến nhất: fadeIn, slideInUp, zoomIn cho Entrance
  • pulse, bounce cho Hover Effects
  • Đơn giản & thanh lịch > Phức tạp & rối rắm

​
6. Responsive Design - Hiển Thị Trên Mọi Kích Thước

Responsive là gì? Responsive nghĩa là trang web hiển thị đẹp trên mọi kích thước màn hình. Bạn không muốn khách truy cập trên di động phải cuộn ngang hay bị chữ chật, phải không? Các loại thiết bị bạn cần lo:
  1. Desktop (Máy tính để bàn)
    • Màn hình rộng (1024px trở lên)
    • Có thể hiển thị 2-3 cột
    • Ví dụ: Tiêu đề | Tính năng 1 | Tính năng 2 | Tính năng 3
  2. Tablet (Máy tính bảng)
    • Màn hình vừa phải (768px)
    • Có thể hiển thị 1-2 cột
    • Ví dụ: Tiêu đề + Tính năng 1 | Tính năng 2 + Tính năng 3
  3. Mobile (Điện thoại)
    • Màn hình hẹp (640px trở xuống)
    • Chỉ 1 cột từ trên xuống dưới
    • Ví dụ: 
      Tiêu đề
Tính năng 1
Tính năng 2
Tính năng 3
Ví dụ cụ thể: 
Hero Section - Hiển thị khác nhau tùy thiết bị:

Desktop: 2 cột ngang (text ở trái, image ở phải)
  ┌─────────────────────────────┐
  │ Tiêu đề        │  Hình ảnh   │
  │ Mô tả          │             │
  │ 2 buttons      │             │
  └─────────────────────────────┘

Mobile: 1 cột dọc (text rồi image)
  ┌──────────────────┐
  │ Tiêu đề          │
  │ Mô tả            │
  │ 2 buttons        │
  │ Hình ảnh         │
  └──────────────────┘
Khi viết prompt cho Claude Code, bạn chỉ cần nói đơn giản:
  • “Desktop: hiển thị 2 cột (text + image), mobile: 1 cột”
  • “Trên desktop chữ to, trên di động chữ nhỏ hơn”
  • “Trên di động padding (khoảng cách) nhỏ hơn để phù hợp với màn hình hẹp”
  • “Nút buttons: desktop cạnh nhau, mobile xếp dọc”
Lưu ý quan trọng:
  • ✅ Luôn nói cho Claude Code biết cần responsive
  • ✅ Mô tả cách hiển thị trên desktop vs mobile
  • ✅ Nếu quên, Claude Code sẽ hỏi lại hoặc trang sẽ không đẹp trên di động
  • ❌ Không cần nói chi tiết công nghệ, chỉ cần nói “responsive”
Thú vị là: Hầu hết người xem landing page của bạn dùng điện thoại, không phải máy tính. Vì vậy responsive rất quan trọng!

​
7. Color - Chọn Màu Sắc

Bộ màu (Color Palette) là gì? Là bộ màu được chọn sẵn để website nhất quán. Cần 4 loại:
LoạiDùng choVí dụ
Primary (màu chính)Buttons, highlights#DF6B33 (cam)
Secondary (màu phụ)Cards, nền phụ#111827 (xám đen)
Background (nền)Nền trang chính#090A14 (đen) hoặc #FFFFFF (trắng)
Text (chữ)Chữ chính + phụ#F3F4F6 (trắng nhạt), #9CA3AF (xám)

​
Contrast (độ tương phản) - Quy tắc quan trọng

  • Chữ sáng trên nền tối = Dễ đọc ✅
  • Chữ tối trên nền sáng = Dễ đọc ✅
  • Chữ xám trên nền xám = Khó đọc ❌
Chọn màu dễ dàng với Coolors.co:
  1. Vào coolors.co → Click “Generate” để tạo bộ màu ngẫu nhiên
  2. Thích màu nào thì giữ, không thích thì tạo lại
  3. Copy mã màu (hex code) vào prompt
Khi viết prompt: 
"Color palette:
- Nền: #090A14 (đen)
- Primary: #DF6B33 (cam) - cho buttons
- Text chính: #F3F4F6 (trắng nhạt)
- Text phụ: #9CA3AF (xám)"
Hoặc dùng tên màu đơn giản: "Nền đen, nút màu cam, chữ trắng" - Claude Code sẽ chọn mã phù hợp.

​
📋 Tóm Tắt - Từ Khóa Chính

Từ KhóaÝ NghĩaVí Dụ Trong Prompt
HTMLCấu trúc trang”Header, sections, footer”
CSSTrang trí, bố cục”Màu sắc, kích thước, khoảng cách”
IconsBiểu tượng nhỏ”Lucide Icons, 24px, màu cam”
FontKiểu chữ”Poppins 700 cho tiêu đề”
AnimationChuyển động, hiệu ứng”fadeInUp cho cards, pulse khi hover”
Animate.cssThư viện hiệu ứng”slideInUp, zoomIn, fadeIn”
ResponsiveHiển thị đẹp mọi kích thước”Desktop 2 cột, mobile 1 cột”
ColorBộ màu nhất quán”Nền đen, nút cam, chữ trắng”
ContrastĐộ tương phản (dễ đọc)“Chữ sáng trên nền tối”
HEX ColorMã màu”#DF6B33 (cam)“
CoolorsTool chọn màu”coolors.co”
PaddingKhoảng cách bên trong”Padding 24px trong cards”
BorderĐường viền”Border xám, góc bo tròn”

​
💡 Ví Dụ Prompt Hoàn Chỉnh

Prompt mẫu hoàn chỉnh: 
Tạo landing page hoàn chỉnh

HTML:
- Header với logo + nav
- Hero section với headline, subheadline, 2 buttons
- Features section với 3 cards
- Footer

Styling (dùng Tailwind CSS):
- Nền: bg-[#090A14]
- Buttons (primary): bg-[#DF6B33]
- Text chính: text-[#F3F4F6]
- Text phụ: text-[#9CA3AF]
- Font: Poppins 700 cho tiêu đề, Inter 400 cho body

Icons:
- Dùng Lucide Icons
- Size: 24px (nhỏ), 36px (vừa)
- Màu: #DF6B33 (cam)

Animation (dùng Animate.css):
- Hero: fadeInUp (xuất hiện từ dưới)
- Cards: slideInUp (lần lượt trượt lên)
- Buttons hover: pulse (nhấn mạnh)

Responsive:
- Desktop: hiển thị 2-3 cột
- Mobile: hiển thị 1 cột dọc
- Chữ to trên desktop, nhỏ trên mobile
- Padding lớn trên desktop, nhỏ trên mobile

Layout:
- Padding 24px, khoảng cách 16px giữa items
- Góc bo tròn, đường viền nhẹ
Kết quả: Claude Code sẽ hiểu rõ và tạo ra landing page đúng ý bạn!

​
❓ FAQ

Có cần nhớ hết các khái niệm này không?
Không! Chỉ cần hiểu ý nghĩa cơ bản. Khi cần, quay lại đọc phần liên quan. Animation nào phổ biến nhất?
fadeIn, slideInUp (xuất hiện) và pulse, bounce (hover). Chỉ cần 2-3 loại cho cả trang. Quá nhiều animation có sao không?
Có! Trang sẽ loạn. Giữ đơn giản: 2-3 animation thôi. Chọn màu như thế nào?
Dùng coolors.co → click Generate → thích thì giữ → copy mã màu vào prompt. Hex color là gì? Phải nhớ không?
Hex color là mã màu (#DF6B33). Không cần nhớ! Dùng Coolors.co để copy. Màu nào là tốt nhất?
Tuỳ brand. Luôn nhớ: chữ sáng trên nền tối (hoặc ngược lại) = dễ đọc. Font phải là Poppins + Inter không?
Không! Chỉ là lựa chọn phổ biến. Dùng font nào bạn thích. Dark hay Light theme?
Dark = hiện đại, bảo vệ mắt. Light = sạch sẽ, chuyên nghiệp. Tuỳ brand. Responsive có bắt buộc không?
Có! Hơn 50% người xem dùng điện thoại. Luôn nói “responsive” trong prompt. Icon lấy từ đâu?
Từ thư viện có sẵn (Lucide Icons). Bạn không cần vẽ, chỉ cần nói tên icon.
Bây giờ bạn đã sẵn sàng viết prompt chuyên nghiệp! 🚀