Vibe Coding Playbook
Hướng dẫn Chuẩn bị & Khởi động Siêu tốc trước buổi học Zoom Live đầu tiên.
TL;DR:
Bản playbook này giúp bạn vượt qua mọi rào cản cài đặt môi trường phát triển (cài VS Code, NodeJS, Claude Code) và làm quen với Director Mindset. Hãy hoàn thành các bước chuẩn bị trong 15 phút để sẵn sàng thực chiến ngay khi lớp học bắt đầu!
Vibe Coding là gì?
Vibe Coding là phương thức phát triển phần mềm hiện đại mà ở đó lập trình viên không trực tiếp viết từng dòng code. Thay vào đó, họ giữ vai trò Đạo diễn (Director), sử dụng ngôn ngữ tự nhiên để điều phối các mô hình AI thông minh (như Claude Code, Cursor) tự động viết, debug, tinh chỉnh và deploy mã nguồn.
Tư duy này giải phóng bạn khỏi cú pháp lập trình phức tạp và cho phép tập trung 100% vào thiết kế hệ thống, logic nghiệp vụ, và trải nghiệm người dùng.
Tư duy "Director Mindset" — Điều phối AI
Sự khác biệt lớn nhất giữa một người dùng thông thường và một Director nằm ở cách nhìn nhận AI:
❌ Dưới góc nhìn USER
- Chỉ hỏi AI những đoạn code vụn vặt rồi copy-paste thủ công.
- Không cung cấp bối cảnh đầy đủ làm AI liên tục sinh ra "code rác".
- Dễ nản lòng và bỏ cuộc khi AI sinh code gặp lỗi mà không biết tự sửa.
✅ Dưới góc nhìn DIRECTOR
- Phân rã bài toán lớn thành các task nhỏ, phân phối cho AI có mục tiêu rõ ràng.
- Thiết lập hồ sơ kỹ thuật cấu hình dự án để định hướng AI code đúng chuẩn.
- Sử dụng quy trình 4 bước có cấu trúc để dẫn dắt AI tự debug và tự kiểm thử.
Quy trình Phản Hồi Lặp (Vòng lặp Vàng):
Thiết lập stack công nghệ & bối cảnh
Ép AI lên kế hoạch giải pháp trước khi code
Tinh chỉnh giao diện, logic dựa trên review
Chạy test, screenshot kiểm chứng code chạy thật
Setup Môi trường Lập trình Tối giản (Zero-to-One Setup)
Lớp học sẽ thực hành trực tiếp trên máy tính của bạn. Hãy hoàn tất việc cài đặt 3 công cụ cơ bản sau đây:
Visual Studio Code (VS Code) — Trình soạn thảo mã nguồn
VS Code là phần mềm soạn thảo phổ biến nhất, cung cấp môi trường làm việc trực quan và tích hợp tốt nhất với các terminal công cụ AI.
Tải VS Code về máyNodeJS (Môi trường chạy lệnh JavaScript)
Cài NodeJS giúp máy tính của bạn có thể hiểu và chạy được lệnh cài đặt các package AI như Claude Code.
Tải NodeJS (chọn phiên bản LTS)Claude Code (Anthropic CLI)
Sau khi cài NodeJS thành công, bạn mở terminal/cmd trên máy tính và chạy dòng lệnh sau để cài đặt Claude Code từ Anthropic:
Lưu ý: Nếu dùng macOS, bạn có thể cần thêm chữ sudo ở đầu dòng lệnh nếu gặp lỗi phân quyền (Permission error).
Mẫu File CLAUDE.md — "Hồ Sơ Kỹ Thuật" Của Dự Án
File CLAUDE.md nằm ở thư mục gốc (root folder) là tấm bản đồ dẫn đường cho Claude. Nó giúp Claude hiểu rõ dự án của bạn đang dùng ngôn ngữ gì, có quy định viết code gì, cách build như thế nào để AI không viết sai cấu trúc hoặc thiết kế giao diện không đúng chuẩn.
Mẹo hay: Trước khi bắt đầu một dự án mới, hãy luôn tạo một file mang tên CLAUDE.md, dán đoạn thông tin mẫu trên vào và cập nhật đúng thông số công nghệ bạn muốn sử dụng.
Claude Code Cheat-Sheet (Bảng Tra Cứu Lệnh Nhanh)
Bảng tra cứu nhanh các lệnh dòng lệnh cốt lõi khi tương tác với Claude Code CLI:
| Lệnh (Command) | Mô tả tác dụng | Cách dùng tối ưu |
|---|---|---|
| /dev | Chế độ lập trình phát triển | Dùng khi bạn muốn Claude tự tạo file, viết logic mới, cài đặt thư viện hoặc sửa đổi nhiều tệp code cùng một lúc. |
| /ask | Chế độ hỏi đáp thông tin | Dùng khi chỉ cần giải thích lỗi, tìm hiểu logic hoạt động của file mà không muốn AI tự động sửa code vào file. |
| /compact | Dọn dẹp Context Window | Nhập lệnh này khi đoạn hội thoại quá dài giúp dọn bớt tin nhắn thừa, tiết kiệm chi phí Token và giúp AI tập trung hơn. |
| /undo | Hoàn tác hành động vừa rồi | Rất hữu ích khi Claude vừa sửa code nhưng phát sinh lỗi, giúp quay lại trạng thái code an toàn trước đó. |
| /exit | Thoát Claude Code | Đóng phiên làm việc dòng lệnh, giải phóng tài nguyên. |
Thử Thách Nhỏ 5 Phút (Pre-Class Kickstart)
Để tự tin hệ thống lập trình AI của bạn đã sẵn sàng trước giờ học Zoom live, hãy thực hiện bài tập thực hành nhỏ dưới đây:
- Tạo một thư mục mới trống trên màn hình Desktop của bạn với tên là:
my-first-vibe-app. - Mở phần mềm VS Code, chọn File ➔ Open Folder và chọn thư mục vừa tạo.
- Nhấn tổ hợp phím
Ctrl + `(hoặcCmd + `trên Mac) để mở cửa sổ Terminal tích hợp của VS Code. - Gõ câu lệnh kích hoạt AI:
clauderồi nhấn Enter. - Khi Claude Code hoạt động, hãy gõ câu lệnh sau:/dev Hãy tạo cho tôi một trang web đếm ngược (Countdown Timer) thiết kế thật đẹp, chủ đề vũ trụ bằng HTML và CSS CDN.
- Đợi Claude tự thiết kế xong dự án, nhập tiếp câu lệnh:
npx serve .để chạy local server. Mở trình duyệt và truy cập link server local để chiêm ngưỡng tác phẩm đầu tiên của bạn!
Sẵn Sàng Cho Buổi Zoom Live!
Mục tiêu chuẩn bị trước khóa học đã hoàn tất. Vui lòng kiểm tra lại các mục trong checklist dưới đây:
Nếu gặp khó khăn trong quá trình cài đặt hoặc cấu hình, hãy liên hệ trực tiếp với team qua Zalo:
Zalo hỗ trợ kỹ thuật: 0972613455