Prompt Engineering Cho Vibe Coding: Tối Ưu Context Token Với AI Dev Tools 2026
6 tháng trước · 9 phút đọc
Vibe coding không phải "cầu may" - nếu bạn biết dùng đúng
Mình nhớ lần đầu thử v0 của Vercel. Gõ vào: "tạo dashboard analytics cho e-commerce". Kết quả? Một đống component không liên kết, thiếu responsive, state management lung tung. Deploy lên thì UI trông như 2015.
Vấn đề không phải ở tool. Vấn đề là mình đang "vibe" mà không có structure.
Vibe coding là xu hướng 2025-2026 nơi developer mô tả ý tưởng bằng ngôn ngữ tự nhiên, để AI tạo code qua nhiều vòng lặp hội thoại. Nghe đơn giản. Nhưng chênh lệch giữa người dùng vibe coding hiệu quả và người "prompt rồi pray" nằm hoàn toàn ở prompt engineering - cụ thể là cách bạn quản lý context.
Bài này mình sẽ đi thẳng vào workflow thực chiến: từ system prompt đến context window management, áp dụng cho v0, Lovable và các AI coding agent phổ biến.
Vibe coding hiệu quả cần structure, không chỉ cần creativity
Context engineering: lý do 90% vibe coding thất bại
AI coding agent không thiếu khả năng. Nó thiếu context.
Hãy nghĩ thế này: bạn thuê một senior dev mới vào. Dev đó giỏi. Nhưng ngày đầu bạn chỉ nói "làm cái dashboard đẹp đẹp" và bỏ đi. Kết quả sẽ là... một dashboard nào đó. Đúng yêu cầu? Khó nói.
AI coding agent cũng vậy. Context window - tổng lượng token mà model có thể "nhớ" trong một session - quyết định AI hiểu được bao nhiêu về project của bạn. 100K tokens Cursor AI (localaimaster.com) của các mô hình AI coding phổ biến hiện tại, nhưng dùng sai thì context lớn cũng vô nghĩa.
Token budget cạn kiệt = AI bắt đầu "quên" kiến trúc project của bạn
Có 3 lỗi context phổ biến nhất:
Lỗi 1 - Front-load quá nhiều thứ vô nghĩa: Paste toàn bộ codebase vào context mà không filter. AI mất tập trung vào boilerplate.
Lỗi 2 - Thiếu architectural grounding: Không nói rõ stack, pattern, constraints từ đầu. AI sẽ assume - và assume sai.
Lỗi 3 - Không dùng system prompt: Mỗi lần chat là một session mới, AI không biết "luật" của project bạn.
Giải pháp cho cả 3 lỗi trên là một context engineering workflow có cấu trúc - mình sẽ đi qua từng bước.
Workflow 4 bước: từ vibe đến production-ready code
Mình dùng workflow này cho mọi project AI-assisted, từ landing page đến SaaS MVP. Nó không phải magic - nhưng nó giảm đáng kể số lần AI tạo ra code mình phải throw away.
Bước 1: Define stack bằng system prompt
Trước khi gõ bất kỳ feature request nào, hãy tạo một system prompt định nghĩa "luật" của project:
Bạn là senior React developer. Project dùng:
- Next.js 15 App Router (KHÔNG dùng Pages Router)
- Tailwind CSS v4 (KHÔNG dùng inline style)
- TypeScript strict mode
- Component phải modular, mỗi file < 200 dòng
- Tên biến tiếng Anh, comment tiếng Việt khi cần giải thích logic
- KHÔNG tự thêm dependencies nếu chưa được hỏi
Với v0 (Vercel), bạn paste system prompt này vào phần đầu của mỗi conversation mới. Với Lovable, nó có tính năng "project rules" riêng.
Bước 2: Architecture prompt - cái mà hầu hết dev bỏ qua
Trước khi build feature, prompt AI để nó outline kiến trúc trước:
Mình cần build trang dashboard với:
- Sidebar navigation (collapsible)
- Main content area với 3 widget: revenue chart, orders table, user stats
- Dark mode toggle
Đừng viết code ngay. Hãy liệt kê:
1. Component tree
2. State sẽ sống ở đâu
3. Data flow
4. Những dependency cần thiết
Bước này tốn thêm 1-2 phút nhưng giảm 60-70% số lần phải refactor.
Outline kiến trúc trước khi code = ít vòng lặp refactor hơn
Bước 3: Generate và iterate theo chunk
Không prompt toàn bộ app một lần. Chia thành chunk nhỏ theo component:
Bây giờ build Sidebar component trước.
Yêu cầu:
- Dùng shadcn/ui Sheet cho mobile
- Desktop: fixed left, width 240px
- Active state với Tailwind
- Props: isOpen, onToggle, navItems[]
Sau khi nhận code, review và approve trước khi chuyển sang component tiếp theo. Đừng để AI build 10 components cùng lúc - bạn sẽ không kiểm soát được.
Bước 4: Verify với checklist
Trước khi merge code AI tạo ra:
- [ ] Chạy TypeScript check (
tsc --noEmit) - [ ] Test responsive trên 3 breakpoint
- [ ] Kiểm tra accessibility cơ bản (contrast, alt text)
- [ ] Review dependency mới có được thêm không
Bước này không skip được. Vibe coding không có nghĩa là blind trust.
Dùng v0 và Lovable đúng cách: tips thực chiến
Hai tool này có cách tối ưu context khác nhau. Dùng nhầm cách là lãng phí token và thời gian.
v0 (Vercel)
v0 được train nhiều trên React + Tailwind + shadcn/ui - đây là điểm mạnh cần khai thác. Mấy tips mình tích lũy sau nhiều lần dùng:
Nói rõ design system ngay từ đầu. v0 sẽ tự chọn component nếu bạn không chỉ định. Thay vì "tạo button", hãy dùng: "Tạo button dùng shadcn/ui Button variant='outline', size='sm', có icon Lucide ArrowRight bên phải". Kết quả khác nhau hoàn toàn.
Dùng tính năng fork conversation. Khi AI đi sai hướng, đừng cố "sửa" trong cùng thread - context đã bị contaminated. Fork ra một conversation mới với context sạch.
Paste screenshot thay vì mô tả. v0 có vision capability. Upload mockup Figma hoặc screenshot UI tham khảo, rồi chỉ cần nói "implement UI này dùng Tailwind". Nhanh gấp 3 lần so với mô tả bằng chữ.
Lovable
Lovable mạnh ở full-stack generation với Supabase integration. Cách dùng hiệu quả:
Dùng tính năng "Project Knowledge" để lưu system prompt một lần, apply cho mọi conversation. Đây là tương đương với .cursorrules file trong Cursor.
Prompt theo user story, không theo technical spec. Lovable xử lý tốt hơn khi bạn nói: "Người dùng đăng nhập bằng email, thấy dashboard, click vào order thì xem chi tiết" thay vì "tạo auth flow với JWT, protected routes..."
v0 mạnh về UI components, Lovable mạnh về full-stack flow
Nếu bạn đang học React từ đầu và muốn biết nền tảng trước khi dùng các tool này, khóa Xây Dựng Website với ReactJS của F8 là điểm xuất phát tốt - AI tool sẽ output code React, bạn cần hiểu để review được.
Hybrid approach: vibe coding + TDD để không "prompt rồi pray"
Phê bình lớn nhất với vibe coding - và mình đồng ý một phần - là nó dễ tạo ra code hoạt động nhưng không maintainable. Code pass visual test nhưng edge case thì vỡ.
Giải pháp là kết hợp với Test Driven Development (TDD) - cách các team engineering ở các công ty lớn đang dùng AI agent.
Workflow hybrid trông như thế này:
// Prompt bước 1: viết test trước
"Viết test cho function calculateDiscount:
- Input: price (number), userTier ('basic'|'pro'|'enterprise')
- Output: discounted price
- Edge cases: price âm, price = 0, userTier không hợp lệ
Dùng Vitest."
// Prompt bước 2: implement để pass test
"Bây giờ viết function calculateDiscount
để pass tất cả test trên.
Không thay đổi test file."
Bằng cách để AI viết test trước, bạn buộc nó phải suy nghĩ về edge cases - thứ vibe coding thường bỏ qua. Và khi code được generate, bạn có ground truth để verify.
AI viết test trước = bạn có contract rõ ràng để verify output
Cách tiếp cận này, theo kinh nghiệm của mình và cộng đồng dev dùng AI agent, có thể đẩy intent accuracy lên trên 80% so với thuần vibe coding không có verification. Điều này align với những gì community AI-assisted engineering đang quan sát.
Một điểm thực tế: không phải project nào cũng cần TDD đầy đủ. Landing page, prototype nhanh - vibe thuần là đủ. Nhưng nếu bạn build SaaS, feature production - hybrid approach là bắt buộc.
Template system prompt thực chiến để dùng ngay
Mình để đây một số system prompt template đã test qua nhiều project. Copy, điều chỉnh theo stack của bạn.
Template cho Next.js App Router project
Bạn là senior Next.js developer với 5 năm kinh nghiệm.
STACK BẮT BUỘC:
- Next.js 15 với App Router
- TypeScript strict (noImplicitAny: true)
- Tailwind CSS v4
- shadcn/ui cho UI components
- Zustand cho global state
QUY TẮC CODE:
- Mỗi component file tối đa 150 dòng
- Tách logic ra custom hooks nếu > 30 dòng
- Luôn handle loading + error state
- Mobile-first responsive
- KHÔNG dùng 'any' type
- KHÔNG tạo file mới nếu chưa được yêu cầu
KHI KHÔNG CHẮC: Hỏi thay vì tự assume.
Template cho Lovable full-stack
Project: [Tên app]
Mô tả: [1-2 câu về app làm gì]
STACK:
- Frontend: React + Tailwind
- Backend: Supabase (auth + database + storage)
- Deploy: Lovable built-in
NGƯỜI DÙNG:
[Mô tả persona người dùng chính]
CHỨC NĂNG ƯU TIÊN:
1. [Feature 1 - quan trọng nhất]
2. [Feature 2]
3. [Feature 3]
RANG BUỘC:
- [Constraint kỹ thuật]
- [Constraint business]
Template có cấu trúc giúp AI không phải đoán - output nhất quán hơn
Tải template đầy đủ (bao gồm checklist verify và prompt chain) tại đây: Tải bộ System Prompt Templates
Takeaways:
- System prompt là foundation, không phải optional
- Context engineering = quyết định AI nhớ cái gì, quên cái gì
- Chunk prompt theo component, không phải theo app
- Hybrid TDD + vibe = reliable hơn thuần vibe
Bước tiếp theo: chọn 1 project nhỏ, áp dụng workflow 4 bước, so sánh với cách cũ của bạn. Kết quả sẽ tự nói lên tất cả. Drop comment nếu bạn có template nào hay - mình sẽ update vào bài.