Từ Ý Tưởng Đến Implementation: Tư Duy Kiến Trúc
Nhiều người nghĩ Vibe Coding chỉ là "nói cho AI viết code". Nhưng để build được production-grade software, bạn cần tư duy như một System Architect - người thiết kế toàn bộ blueprint trước khi xây.
Tầm Quan Trọng Của System Thinking
Không có system thinking:
Prompt: "Tạo app todo"
→ AI tạo 1 file với mọi thứ chồng chất
→ Không thể scale, maintain, hay extend
Có system thinking:
Prompt: "Thiết kế cấu trúc cho Todo app với:
- Component architecture (UI layer)
- State management (logic layer)
- API integration (data layer)
- Type definitions (contract layer)"
→ AI tạo codebase có tổ chức rõ ràng
Framework FLOW Cho Logic Description
F - Function (Chức năng): Mô tả WHAT - hệ thống làm gì ở high-level.
"User có thể: đăng nhập, xem danh sách courses,
enroll vào course, track progress"
L - Logic (Luồng xử lý): Mô tả HOW - từng bước xử lý như thế nào.
"Khi user click Enroll:
1. Check authentication status
2. If not logged in → redirect to login
3. If logged in → call API createEnrollment
4. On success → update UI, show confetti
5. On error → show toast message"
O - Objects (Đối tượng): Định nghĩa các entities và relationships.
"Entities:
- User: id, email, name, avatar
- Course: id, title, modules[]
- Enrollment: userId, courseId, progress, createdAt
Relationships:
- User has many Enrollments
- Course has many Modules
- Module has many Lessons"
W - Wireframe (Giao diện): Mô tả layout và UI components cần thiết.
"Trang Course Detail:
- Hero section: thumbnail, title, description
- Sidebar: module list accordion
- Main content: video player, lesson content
- Footer: navigation buttons prev/next"
Practical Application: Mô Tả Cho AI
Khi bạn đã có system design, communicate với AI theo layers:
Layer 1: Architecture Decision
"Sử dụng Next.js 14 App Router với:
- Server Components cho data fetching
- Client Components cho interactivity
- Server Actions cho mutations
Folder structure: feature-based grouping"
Layer 2: Data Flow
"Data flow:
Database (Supabase) → Server Component → Props → Client Component
Mutations: User Action → Server Action → Database → Revalidate"
Layer 3: Component Breakdown
"CourseDetailPage gồm:
- CourseHero (server): fetch course info
- ModuleSidebar (client): accordion, track active
- LessonContent (server): fetch current lesson
- LessonNavigation (client): prev/next handlers"
Pro Tips Cho Complex Features
- Draw before describe: Sketch trên giấy trước khi prompt
- Top-down approach: Architecture → Components → Implementation
- Reference existing patterns: "Giống cách Vercel dashboard làm..."
- State machine thinking: Define all possible states upfront
💡 Key Insight: AI cực kỳ giỏi implementation details. Công việc của bạn là cho nó bản đồ đúng để đi.
Bài Tập
Thiết kế system cho User Profile Page với: avatar upload, edit form, activity history. Viết FLOW description trước khi prompt AI implement.
