Tin Tức AI
Prompt Engineering cho Designer: Viết prompt chuẩn

Prompt Engineering cho Designer: Viết prompt chuẩn

30/04/2026 5 phút đọc

Prompt Engineering là gì và tại sao designer cần biết?

Prompt Engineering là kỹ năng viết chỉ dẫn (prompt) sao cho AI hiểu chính xác điều bạn muốn và tạo output chất lượng cao. Với designer dùng Vibe Coding, đây là kỹ năng quan trọng nhất.

Sự khác biệt giữa prompt tốt và prompt tệ:

Cấu trúc prompt hiệu quả cho designer

Framework LCTS

Mọi prompt tốt đều có 4 phần:

L — Layout: Cấu trúc trang (sections, grid, spacing)
C — Color & Typography: Bảng màu, font, kích thước
T — Tone: Phong cách thiết kế (minimal, bold, playful)
S — Specifics: Chi tiết cụ thể (icon, animation, responsive)

Ví dụ áp dụng Framework LCTS

[Layout]
Landing page với 6 sections theo thứ tự:
1. Hero full-width: tiêu đề lớn bên trái, mockup sản phẩm bên phải
2. Logo bar: 6 logo khách hàng dạng grayscale
3. Features: grid 3 cột với icon + title + description
4. Testimonials: carousel 3 reviews với avatar
5. Pricing: 3 cards ngang hàng, card giữa highlighted
6. CTA final: tiêu đề + button + email input

[Color & Typography]
- Background: #0a0a0a (near black)
- Accent: #FF4500 (orange)
- Text: #ffffff primary, rgba(255,255,255,0.6) secondary
- Font: Inter hoặc sans-serif tương tự
- Heading: 800 weight, body: 400

[Tone]
Modern, premium SaaS. Clean lines, generous whitespace.
Subtle glass-morphism effects on cards.

[Specifics]
- Hero button có glow shadow orange
- Features icon dùng Lucide React
- Pricing card giữa có badge "Phổ biến nhất"
- Responsive: 3 cột → 1 cột trên mobile
- Smooth scroll giữa sections

7 mẹo viết prompt cho v0 và Lovable

1. Luôn chỉ định design tokens

Đừng nói "màu tối" — hãy nói background: #0a0a0a. Đừng nói "chữ to" — hãy nói font-size: clamp(2rem, 5vw, 3.5rem).

2. Mô tả layout bằng grid system

AI hiểu tốt nhất khi bạn dùng ngôn ngữ grid:

3. Reference design cụ thể

Thay vì mô tả trừu tượng, reference phong cách cụ thể:

4. Chỉ định responsive behavior

Luôn nêu rõ cách layout thay đổi:

Desktop: grid 4 cột
Tablet (< 768px): grid 2 cột
Mobile (< 480px): stack 1 cột

5. Dùng component names chuẩn

AI hiểu tốt hơn khi bạn dùng tên component phổ biến:

6. Mô tả micro-interactions

- Button hover: scale 1.02, shadow tăng
- Card hover: border glow subtle
- Section entry: fade up animation
- Number counters: animate khi scroll vào viewport

7. Nêu rõ "đừng làm" (negative prompt)

Không dùng: gradient rainbow, bóng đổ nặng, border radius quá tròn.
Không có: popup, auto-play video, parallax phức tạp.

Ví dụ prompt thực tế theo từng loại page

Landing page khóa học online

Tạo landing page cho khóa học "AI Marketing Mastery".
Dark theme (#080808 bg), accent orange (#FF4500).
Font: Barlow hoặc Inter, weight 400-900.

Sections:
1. Hero: tiêu đề "Thành thạo AI Marketing trong 30 ngày"
   Subtitle mô tả giá trị. CTA "Đăng ký ngay →" (orange bg, white text).
2. Instructor: avatar tròn + bio ngắn + stats (500+ học viên, 4.9/5 rating)
3. Curriculum: accordion 8 modules, mỗi module có icon + title + duration
4. Pricing: 2 plans (Basic 499K, Premium 999K), Premium highlighted
5. Testimonials: grid 2x3, mỗi cell có quote + avatar + name + role
6. FAQ: 6 câu hỏi, accordion style
7. CTA final: "Bắt đầu hành trình AI" + email input + submit button

Portfolio cá nhân

Portfolio cho UI/UX designer. Minimal, elegant.
Light theme (#fafafa bg), accent teal (#0d9488).
Font: Outfit, weight 300-700.

Sections:
1. Hero: "Xin chào, tôi là [Tên]" + tagline + scroll indicator
2. About: ảnh + bio 3 dòng + tech stack badges
3. Projects: grid 2 cột, mỗi project là card với thumbnail + title + tags
4. Services: 3 cards ngang (UI Design / UX Research / Prototyping)
5. Contact: form đơn giản (name, email, message) + social links

Tối ưu prompt với 5PhutAI

Viết prompt từ đầu mỗi lần rất mất thời gian. 5PhutAI cung cấp hơn 100 prompt template đã được tối ưu, bao gồm:

Mỗi template đã áp dụng framework LCTS và các best practice ở trên — bạn chỉ cần thay nội dung và brand colors.

Workflow thực chiến

  1. Chọn template từ 5PhutAI
  2. Customize brand colors, content, layout preferences
  3. Paste vào v0 hoặc Lovable
  4. Iterate 1-2 lần (thường là đủ với prompt tốt)
  5. Deploy lên Vercel/Netlify

Xem thêm: Vibe Coding 2025: Build landing page trong 30 phút để áp dụng ngay.

Kết luận

Prompt Engineering cho designer không khó — chỉ cần có cấu trúc. Áp dụng framework LCTS, tuân thủ 7 mẹo ở trên, và dùng prompt template từ 5PhutAI làm foundation.

Đăng ký miễn phí để truy cập toàn bộ thư viện prompt template. Bắt đầu ship landing page chuyên nghiệp ngay hôm nay.

Muốn nhận thêm prompt AI thực chiến hàng tuần?

Đăng ký miễn phí →
Đã copy prompt!