Zero-Gravity Coding: Quy Trình Từ Ý Tưởng Đến Production Trong 2 Giờ

Bạn có bao giờ ngồi trước màn hình lúc 8 giờ sáng với một ý tưởng sản phẩm, và đến 10 giờ sáng đã có một trang web hoàn chỉnh đang chạy live trên internet không?

Nghe có vẻ viễn tưởng. Nhưng đó là quy trình tôi đang làm hàng ngày tại TVT Agency — và tôi gọi nó là Zero-Gravity Coding.

"Zero-Gravity" không phải vì bạn bay lên vũ trụ. Mà vì khi bạn làm chủ quy trình này, cảm giác ma sát (Friction) trong quá trình xây dựng sản phẩm gần như biến mất. Bạn không bị kéo xuống bởi syntax errors, không phải mất giờ đọc documentation, không cần chờ AI generate từng tính năng một. Tất cả trở nên nhẹ nhàng, liên tục và tốc độ như lướt qua không gian.

Bài viết này sẽ mổ xẻ chi tiết quy trình 2 giờ đó — từng bước, từng công cụ, từng quyết định.

1. Tư duy nền tảng: AI là đội ngũ, bạn là Founder

Sai lầm lớn nhất của người mới học Vibe Coding là họ dùng AI như một công cụ gõ code tự động. Họ nghĩ: "Tôi sẽ để AI viết code thay tôi, nhanh hơn."

Tư duy đó đúng nhưng chưa đủ. Nó chỉ giúp bạn nhanh hơn 2-3 lần, không phải 10 lần.

Tư duy Zero-Gravity khác hơn: Bạn là Founder của một startup micro, và AI là toàn bộ đội ngũ của bạn — từ Designer, Frontend Dev, Backend Dev, đến QA và DevOps.

Khi bạn nghĩ như Founder, bạn sẽ:

• Phân công rõ ràng: Bài toán nào AI làm tốt? Bài toán nào cần tư duy con người?
• Đặt mục tiêu sản phẩm trước kỹ thuật: Tính năng này phục vụ ai? Giải quyết vấn đề gì?
• Review output như CEO: Không phải gõ từng dòng, mà đọc nhanh, phê duyệt và định hướng tiếp

Khi đó, 2 giờ không còn là thời gian để "code nhanh" — mà là thời gian để ra quyết định sản phẩm và điều phối AI.

2. Bộ công cụ Zero-Gravity Stack

Sau nhiều tháng thử nghiệm, đây là bộ công cụ tôi dùng hiện tại:

Tầng AI (AI Layer)

• Claude 3.5 Sonnet (via API hoặc claude.ai Pro): Kiến trúc, system design, code phức tạp
• Cursor IDE: Môi trường code, agentic mode, inline edit
• Gemini Flash: Generate ảnh, tóm tắt nhanh, tasks lặp đi lặp lại

Tầng Nền tảng (Platform Layer)

• Next.js 16 (App Router): Framework web — cấu trúc rõ ràng, AI hiểu rất tốt
• Tailwind CSS v4: Styling — AI gen code Tailwind siêu nhanh, ít lỗi
• Vercel: Deploy — từ commit đến live URL chỉ 90 giây

Tầng Kiểm soát (Control Layer)

• CLAUDE.md / AGENTS.md: Rule files — nhét context, quy tắc team vào System Prompt
• Git: Version control — checkpoint sau mỗi tính năng
• .env.local: Biến môi trường — cách ly secrets khỏi code

Bộ stack này không phải ngẫu nhiên. Từng lựa chọn đều được tối ưu để AI có thể làm việc với friction thấp nhất.

3. Quy trình 5 giai đoạn trong 2 giờ

Giai đoạn 1 — Bản đồ sản phẩm (0:00 - 0:15)

Đừng mở IDE ngay. Mở một file văn bản và viết:

Sản phẩm: [Tên]
Mục tiêu chính: [1 câu duy nhất]
Người dùng: [Ai sẽ dùng?]
Tính năng cốt lõi: [Tối đa 3 features]
Không làm: [Những gì sẽ KHÔNG có trong phiên bản 1]

15 phút này là đầu tư quan trọng nhất trong 2 giờ. Nó ngăn bạn bị "scope creep" — hiện tượng cứ thêm tính năng mãi mà không ship.

Giai đoạn 2 — Khởi tạo & Kiến trúc (0:15 - 0:30)

Mở Cursor, tạo project mới. Prompt đầu tiên là quan trọng nhất — nó thiết lập toàn bộ kiến trúc:

Tôi cần xây dựng [tên app]. 

Tech stack: Next.js 16 App Router, TypeScript strict, Tailwind CSS v4.

Cấu trúc thư mục mong muốn:
- src/app/ (routing)
- src/components/ (UI components)
- src/lib/ (utilities, data access)

Tính năng cốt lõi:
1. [Feature 1]
2. [Feature 2]
3. [Feature 3]

Hãy:
1. Tạo cấu trúc thư mục đầy đủ
2. Setup globals.css với design system (dark mode, color palette: #7b61ff, #ff375f, #34d399)
3. Tạo layout.tsx root với font Inter
4. Tạo trang chủ (page.tsx) với skeleton placeholder

Không tạo mock data phức tạp — giữ đơn giản, có thể mở rộng.

Giai đoạn 3 — Build tính năng core (0:30 - 1:15)

45 phút để build 3 tính năng cốt lõi. Mỗi tính năng = 1 session AI riêng biệt.

Quy tắc vàng: Một prompt = Một tính năng hoàn chỉnh. Đừng cố làm mọi thứ trong một lần.

Sau mỗi tính năng:

• Chạy npm run dev để kiểm tra trực quan
• Commit code: git add . && git commit -m "feat: [tên tính năng]"
• Reset context nếu AI bắt đầu "ngáo"

Giai đoạn 4 — Polish & SEO (1:15 - 1:45)

30 phút này quyết định sản phẩm trông có "premium" không:

• Responsive: Prompt AI kiểm tra và fix mobile layout
• Animation: Thêm transition, hover effect với Tailwind
• SEO: generateMetadata() cho mỗi page, Open Graph tags
• Performance: Kiểm tra Lighthouse score nhanh

Giai đoạn 5 — Deploy & Review (1:45 - 2:00)

15 phút cuối:

git push origin main
# Vercel tự động deploy

# Verify live URL
open https://your-app.vercel.app

Kiểm tra nhanh 5 điểm:

• [ ] Trang load được trên mobile
• [ ] Form/CTA hoạt động
• [ ] Không có console error
• [ ] URL đẹp, không có 404
• [ ] Title/Description đúng khi share lên mạng xã hội

4. Case Study: Tôi đã làm toilatung.com như thế nào

toilatung.com — platform content và blog mà bạn đang đọc hiện giờ — được xây dựng theo đúng quy trình Zero-Gravity.

Ngày 1 (2 giờ):

• Setup Next.js 16, design system, routing
• Blog engine với MDX files
• Layout + Header + Footer

Ngày 2 (3 giờ):

• Blog listing page
• Blog detail page với MDX rendering
• SEO metadata system

Ngày 3 (2 giờ):

• Course landing pages
• Lead capture form
• Deploy lên Vercel

Tổng cộng: 7 giờ coding để có một platform với blog system, course pages, SEO hoàn chỉnh.

Nếu thuê Dev truyền thống: ít nhất 2-3 tuần và 20-30 triệu đồng.

5. Những cạm bẫy cần tránh

Cạm bẫy 1: Perfectionism trap

Bạn muốn animation mượt hơn, UI đẹp hơn, responsive hoàn hảo hơn. Và bạn không ship.

Giải pháp: Đặt timer 2 giờ thật sự. Khi timer kêu, deploy — dù chưa hoàn hảo.

Cạm bẫy 2: Feature creep trong khi build

AI generate xong tính năng A, bạn nghĩ "tiện đây thêm luôn B". Rồi C. Rồi D.

Giải pháp: Danh sách "Không làm" ở Giai đoạn 1 phải nghiêm túc. Những ý tưởng mới ghi vào backlog.

Cạm bẫy 3: Không review code AI

AI viết code nhanh, nhưng đôi khi sinh ra những bug tinh vi — deprecated API, security hole, logic sai.

Giải pháp: Đọc lướt mỗi file AI tạo. Không cần hiểu 100%, nhưng phải nhận ra được "file này đang làm gì".

Cạm bẫy 4: Sụp đổ context

Sau 30-40 tin nhắn, AI bắt đầu quên context và sinh code xung đột.

Giải pháp: Commit và reset context sau mỗi feature hoàn thành. Bắt đầu session mới với file CLAUDE.md được pin vào đầu.

6. Câu hỏi thường gặp

Q: Tôi không biết code, có làm được không?

A: Hoàn toàn có thể — nhưng cần học tối thiểu về cấu trúc web (HTML/CSS), hiểu Frontend vs Backend là gì, và biết đọc error message. Không cần viết code, nhưng phải "đọc hiểu" code.

Q: 2 giờ có thực tế không? Hay chỉ là marketing?

A: 2 giờ cho MVP đơn giản (landing page, blog, tool nhỏ) — hoàn toàn thực tế. Với app phức tạp hơn (authentication, database, payment), cần nhiều ngày hơn nhưng mỗi ngày vẫn nhanh gấp 5-10 lần so với traditional coding.

Q: Dùng Cursor hay VS Code?

A: Cursor nếu bạn làm solo và muốn tốc độ tối đa. VS Code + GitHub Copilot nếu bạn làm trong team có CI/CD nghiêm ngặt. Tôi dùng Cursor cho mọi dự án cá nhân.

7. Kết luận

Zero-Gravity Coding không phải ma thuật. Nó là kết quả của việc nghĩ đúng về vai trò của mình trong kỷ nguyên AI.

Bạn không phải là người gõ code. Bạn là người ra quyết định sản phẩm, người điều phối AI, người đánh giá output và người chịu trách nhiệm về kết quả cuối.

Khi bạn nhìn nhận mình như vậy, 2 giờ không còn là "code nhanh" — mà là 2 giờ của một Founder đang ship sản phẩm.

Nếu bạn muốn học quy trình này một cách hệ thống — từ cách viết prompt đúng, cách debug với AI, đến cách deploy và maintain — khóa học Claude Code Mastery Pro chính là nơi tôi chia sẻ toàn bộ framework thực chiến tôi đang dùng hàng ngày.

Ship fast. Think clear. Build differently.