Vibe Coding / Chương 01

Chương 01: Cách Mạng Vibe Coding

1. Vibe Coding Là Gì?

Trước đây muốn tạo phần mềm thì bạn phải tự viết code hàng ngàn dòng lệnh bằng ngôn ngữ máy tính. Quá trình này mất rất nhiều năm học và quy tắc 10.000 giờ đi kèm.

Quy tắc này được tác giả Malcolm Gladwell phổ biến trong cuốn sách "Những kẻ xuất chúng (Outliers)". Nội dung cốt lõi của nó là: Để đạt đến trình độ chuyên gia xuất chúng (Mastery) trong bất kỳ lĩnh vực nào – kể cả lập trình – bạn cần khoảng 10.000 giờ luyện tập rèn luyện.

Tuy nhiên bây giờ AI có thể viết code thay bạn. Bạn chỉ cần mô tả "tôi muốn app làm gì" bằng ngôn ngữ tự nhiên sinh hoạt hằng ngày – hay còn gọi là freestyle coding – thì AI sẽ viết toàn bộ code.

Elon Musk: "Lập trình sẽ sớm biến mất"
"Elon Musk tin rằng với tốc độ phát triển của AI (đặc biệt là các mô hình như Claude Opus), việc con người ngồi gõ từng dòng code sẽ trở nên lỗi thời."

2. Prompt Quyết Định Mọi Thứ

Chất lượng sản phẩm phụ thuộc hoàn toàn vào cách bạn mô tả yêu cầu.

Làm việc với AI cũng giống như làm việc với một đội ngũ cực giỏi nhưng lại chưa hiểu hết ý mình. Bạn càng mô tả chi tiết – AI càng làm chuẩn. Ngược lại nếu mình nói không thể hiện được bối cảnh thì AI sẽ tự 'sáng tạo' theo ý nó và kết quả có khi lại làm khó cho cả hai – vì vậy hãy thể hiện chi tiết rõ ràng càng tốt.

3. Công Nghệ Sẽ Dùng (Quan Trọng)

Để thực hiện Vibe Coding chuyên nghiệp, chúng ta sẽ sử dụng những "đồ chơi" tốt nhất. Chúng ta chọn những công nghệ có hệ sinh thái phong phú nhất để AI có thể phát huy được tối đa trí tuệ của nó.

• Go (Golang) — Ngôn ngữ xử lý chính (backend). Go có một đặc điểm quan trọng cho Vibe Coding: nếu AI viết code sai, Go báo lỗi ngay lập tức trước khi app chạy. Bạn copy lỗi đó gửi lại cho AI, nó tự sửa.
• Wails — Công cụ đóng gói. Biến code thành 1 file .exe chạy được trên Windows (hoặc .app trên macOS).
• React + TypeScript — Công nghệ xây giao diện (frontend). React cực kỳ phổ biến, AI viết giao diện rất nhanh và chuẩn.
• Tailwind CSS — Công cụ tạo kiểu giao diện. AI dùng Tailwind rất hiệu quả.
• Claude Opus 4.6 — AI model mạnh nhất của Anthropic, dùng qua Cursor IDE.

4. Quy Trình Làm Việc

Cách làm việc trong Vibe Coding gồm 4 bước lặp lại:

1. Tư duy (Think): Xác định rõ bạn muốn tính năng gì. Dữ liệu đầu vào là gì? Kết quả mong đợi là gì?
2. Viết prompt (Prompt): Mô tả yêu cầu bằng ngôn ngữ tự nhiên, rõ ràng.
3. Kiểm tra (Verify): Luôn kiểm tra kết quả AI trả về.
4. Tinh chỉnh (Refine): Nếu có lỗi, copy thông báo lỗi gửi lại cho AI và yêu cầu sửa.

Bốn bước này lặp đi lặp lại cho đến khi app hoàn thiện. Mỗi vòng lặp, app tốt hơn một chút.

5. Dự Án Xuyên Suốt: Veo3 Manager Video

Toàn bộ 10 chương xây dựng một dự án duy nhất từ đầu đến cuối: Veo3 Manager.

Veo3 Manager là gì?

Veo3 là công cụ tạo video bằng AI của Google. Bạn viết một đoạn mô tả (ví dụ: "Cảnh hoàng hôn trên biển, sóng vỗ nhẹ"), Veo3 tạo ra video MP4 hoàn chỉnh có cả hình ảnh và âm thanh.

Veo3 Manager là ứng dụng desktop mà bạn sẽ xây trong khóa học. App này:

• Tạo video bằng AI: Bạn nhập mô tả, app tương tác với Google Flow để tạo video.
• Quản lý thư viện video: Xem danh sách, lọc theo trạng thái, tìm kiếm.
• Đăng ký / Đăng nhập: Mỗi người dùng có tài khoản riêng, chỉ thấy video của mình.
• Lưu dữ liệu: Thông tin video lưu bằng file JSON trên máy.
• Đóng gói: Cuối khóa, bạn build app thành file .exe để chia sẻ.

Vibe Coding / Chương 02

Chương 02: Giới Thiệu Môi Trường

AI có thể tự viết code, nhưng nó không thể tự cài phần mềm vào máy tính của bạn. Để chạy được ứng dụng do AI tạo ra, máy tính của bạn cần được cài đặt sẵn một số phần mềm hỗ trợ.

1. Môi Trường Phát Triển Là Gì?

Môi trường phát triển đơn giản là các phần mềm bạn cài vào máy tính của mình. Chúng có nhiệm vụ giúp máy tính hiểu và chạy được những đoạn code mà AI viết ra.

2. Các Công Cụ Cần Thiết (Tech Stack)

Chúng ta sẽ sử dụng 5 công cụ sau. Dưới đây là giải thích trực diện, thực tế về công dụng của chúng:

2.1. Go (Golang) — Xử lý chức năng

• Công dụng: Xử lý các hoạt động bên dưới của ứng dụng như tính toán, đọc và lưu file vào ổ cứng.
• Vì sao phù hợp với Vibe Coding? Nếu AI viết code bị lỗi, công cụ Go sẽ hiển thị thông báo lỗi cực kỳ rõ ràng. Bạn chỉ cần copy đúng thông báo đó, dán lại cho AI đọc, AI sẽ tự hiểu và sửa lại cho đúng.

2.2. Node.js & npm — Hỗ trợ tải phần code có sẵn

• Node.js: Là phần mềm nền tảng giúp máy tính của bạn chạy được các công cụ tạo giao diện.
• npm: Là một kho lưu trữ mã nguồn đi kèm sẵn trong Node.js. Nó chứa hàng triệu đoạn code đã được người khác viết sẵn.

2.3. React & TypeScript — Xây dựng giao diện

• React: Tạo ra giao diện người dùng, bao gồm màn hình, nút bấm, ô nhập chữ.
• TypeScript: Đặt ra các quy tắc nghiêm ngặt cho code (ví dụ: quy định "ô này chỉ được nhập số, không được nhập chữ"). Việc này ép AI phải cẩn thận hơn và giúp ứng dụng của bạn ít bị lỗi vặt.

2.4. Tailwind CSS — Định dạng thiết kế

• Công dụng: Dùng để chỉnh sửa kích thước, thay đổi màu sắc và sắp xếp vị trí.
• Vì sao phù hợp với Vibe Coding? Ngôn ngữ của Tailwind rất trực quan. Bạn chỉ cần ra lệnh: "Làm nút này màu đỏ, chữ màu trắng, nằm ở giữa", AI sẽ chuyển câu nói đó thành code chính xác ngay lập tức.

2.5. Wails — Đóng gói ứng dụng

• Công dụng: Ghép phần giao diện (React) và phần xử lý chức năng (Go) lại với nhau thành một phần mềm hoàn chỉnh.
• Kết quả cuối cùng: Wails sẽ xuất ra cho bạn 1 file .exe duy nhất.

3. Mẹo Phân Loại Lỗi Để Nhờ AI Sửa Đúng Chỗ

Khi bạn dùng ứng dụng, có 2 phần đang hoạt động cùng lúc:

• Phần Giao diện (Bên ngoài): Là những gì bạn nhìn thấy (nút bấm, hình ảnh, màu sắc, chữ viết).
• Phần Chức năng (Bên trong): Là quá trình máy tính thực hiện yêu cầu của bạn (lưu file, tính toán dữ liệu).

4. Công Cụ Duy Nhất Bạn Cần Dùng Hàng Ngày

4.1. Cursor (Phần mềm để ra lệnh cho AI)

• Thực tế nó là gì? Đây là phần mềm làm việc chính của bạn. Nó giống như một trình soạn thảo văn bản thông thường, nhưng có tích hợp sẵn AI.
• Cách dùng: Bạn sẽ gọi một cửa sổ lệnh. Thay vì phải đi tìm chỗ để sửa code, bạn chỉ việc gõ yêu cầu bằng tiếng Việt (Ví dụ: "Tạo cho tôi màn hình đăng nhập"). AI sẽ tự động quét ứng dụng, tìm đúng chỗ cần thêm, và tự viết code chèn vào.

Vibe Coding / Chương 03

Chương 03: Cài Đặt Môi Trường

Chào mừng bạn đến với bước thực hành đầu tiên. Trong tư duy Vibe Coding, việc cài đặt môi trường không phải là gõ từng dòng lệnh npm install hay go get một cách thủ công. Bạn sẽ dùng Prompt để AI hướng dẫn và thực hiện các bước cài đặt.

1. Công Cụ Chính

Bạn cần 2 công cụ chính để ra lệnh cho AI. Trong khóa học này, chúng ta dùng Cursor IDE và Claude Code.

1.1 Cài đặt Cursor IDE

• Tải tại: https://www.cursor.com/
• Cài đặt và đăng nhập (Google/GitHub).
• Lưu ý: Nếu nó hỏi import setting từ VS Code, chọn YES để giữ lại giao diện và cài đặt quen thuộc.

1.2 Cài đặt Claude Code Extension

• Mở Cursor, vào tab Extensions.
• Tìm "Claude Code" (hoặc Anthropic) → Chọn Install.
• Đăng nhập tài khoản Claude (nếu được hỏi).

1.3 Cài đặt Git (Windows + macOS)

• Windows: https://git-scm.com/install/windows
• macOS: https://git-scm.com/install/mac

Nếu gõ git --version mà báo không tìm thấy lệnh, hãy đóng toàn bộ Terminal rồi mở lại.

2. Mega Prompt: Cài Đặt Toàn Bộ Môi Trường

Thay vì mở Terminal và gõ lệnh thủ công, chúng ta sẽ dùng Claude Code Chat để ra lệnh cho AI thực hiện. Mở Claude Code Chat, copy toàn bộ prompt và nhấn Enter.

Tôi muốn thiết lập toàn bộ môi trường phát triển cho dự án Veo3 Manager
sử dụng Go, Wails, React, TypeScript và Tailwind CSS.
Hãy thực hiện tuần tự các bước sau:

1. KIỂM TRA HỆ THỐNG
   - Kiểm tra OS hiện tại (Windows/Mac/Linux, version, architecture).
   - Kiểm tra Go đã cài chưa (cần >= 1.21). Nếu chưa → hướng dẫn cài.
   - Kiểm tra Node.js đã cài chưa (cần >= 18 LTS). Nếu chưa → hướng dẫn cài.
   - Kiểm tra Wails CLI đã cài chưa (cần v2). Nếu chưa → cài bằng go install.
   - Nếu gặp lỗi PATH hoặc biến môi trường → hướng dẫn sửa cụ thể cho OS của tôi.

2. KHỞI TẠO DỰ ÁN
   - Tạo dự án Wails mới tên `veo3-manager`, dùng React + TypeScript.
   - Xóa các file mẫu mặc định (logo xoay, ví dụ đếm số).
   - Tạo file `.cursorrules` mô tả tech stack và quy ước coding.
   - Tạo file `CLAUDE.md` tóm tắt thông tin dự án.

3. CÀI ĐẶT FRONTEND
   - Cài Tailwind CSS và tạo file cấu hình.
   - Cài các thư viện hỗ trợ cần thiết (quản lý state, thông báo, xử lý ngày tháng).

4. KHỞI CHẠY & XÁC NHẬN
   - Chạy ứng dụng ở chế độ phát triển (`wails dev`).
   - Giải thích cho tôi màn hình console đang hiện gì.

Hãy báo cáo tiến độ từng bước.
Nếu gặp lỗi ở bước nào, dừng lại và đề xuất cách sửa cụ thể cho OS của tôi.

Phân tích Mega Prompt:

• Bước 1: AI tự phát hiện OS và kiểm tra từng công cụ.
• Bước 2: AI khởi tạo dự án và tạo file cấu hình.
• Bước 3: Cài thư viện giao diện. AI tự chọn phiên bản phù hợp.
• Bước 4: Chạy thử để xác nhận mọi thứ hoạt động.

3. Nâng Cấp Claude Code với Slash Commands (ClaudeSuperKit)

ClaudeSuperKit là một bộ các Slash Commands (lệnh tắt) đặc biệt mà bạn cài đặt thêm cho Claude Code trong Cursor IDE. Để cài đặt, bạn copy thư mục .claude vào thư mục gốc của dự án.

4. Nghiệm Thu (Kiểm Tra)

Trong Vibe Coding, nguyên tắc vàng là: "Trust, but Verify" (Tin tưởng, nhưng phải kiểm tra). Dán prompt này vào Claude Code Chat để AI rà soát lại lần cuối.

Vibe Coding / Chương 04

Chương 04: Chọn Model AI

1. Tại sao chọn Claude Opus 4.6 Thinking?

Khi lập trình, chúng ta cần AI có khả năng suy luận logic thay vì chỉ tạo mã nguồn nhanh.

• Điểm mạnh: Claude Opus 4.6 Thinking tự động lên kế hoạch, phân tích từng bước và kiểm tra lỗi trước khi xuất mã nguồn. Rất phù hợp với các dự án phức tạp.
• Lưu ý: Toàn bộ khóa học được thiết kế tối ưu cho model này. Sử dụng model khác có thể phát sinh lỗi.

Cấu hình bắt buộc: Gói Claude Pro trên giao diện Web

• Không dùng API: Lập trình Vibe Coding tạo ra lượng mã nguồn lớn. Dùng API tính phí theo token sẽ rất tốn kém và dễ chạm giới hạn (rate limit).
• Dùng giao diện Web (claude.ai): Phí cố định hàng tháng. Hỗ trợ tính năng Artifacts (khung bên phải) để xem trước giao diện và mã nguồn ngay lập tức.

2. Ba quy tắc giao tiếp với AI

2.1. Tránh lãng phí Token

AI phân tích dựa trên lượng từ (Token). Câu lệnh quá dài làm AI mất tập trung.

• Sai: "Chào Claude, bạn có thể giúp mình viết một đoạn code để in ra dòng chữ này được không..."
• Đúng: "Viết hàm main in 'Hello World' bằng Go."

2.2. Tránh tràn bộ nhớ ngữ cảnh (Context Window)

Đoạn chat quá dài khiến AI quên các yêu cầu ban đầu.

Giải pháp: Luôn mở Chat mới (New Chat) khi bắt đầu làm một tính năng mới. Nếu tiếp tục ở chat cũ, hãy tóm tắt lại bối cảnh.

2.3. Ngăn chặn thông tin sai lệch (Hallucination)

AI có thể tự tạo ra hàm hoặc thư viện không tồn tại.

Giải pháp: Yêu cầu AI tự kiểm chứng. Thêm câu lệnh: "Chỉ sử dụng thư viện chuẩn của Go. Nếu dùng thư viện ngoài, phải cung cấp tài liệu chính thức."

3. Ba kỹ thuật Prompting hiệu quả

• Chỉ định vai trò (Role-playing): "Hãy đóng vai Senior Go Developer...". Kỹ thuật này giúp AI thiết lập tư duy viết mã nguồn chuẩn kiến trúc.
• Suy luận từng bước (Chain of Thought): "Hãy phân tích vấn đề → Đề xuất giải pháp → Viết mã nguồn." Ngăn AI viết mã sai logic từ đầu.
• Cung cấp ví dụ (Few-Shot): Cung cấp sẵn một mẫu Input và Output. Đây là cách nhanh nhất để AI hiểu định dạng dữ liệu mong muốn.

Vibe Coding / Chương 05

Chương 05: Nghệ Thuật Viết Prompt

Bản chất: Giao tiếp với AI là ra lệnh, không phải xin xỏ. Đầu vào chuẩn = Code chất lượng.

1. Nguyên Tắc Cốt Lõi (4 Chữ Vàng)

• Cụ thể (Specific): Luôn định nghĩa rõ [Đầu vào] → [Logic Xử lý] → [Đầu ra].
• Ngữ cảnh (Context): Khai báo rõ Stack công nghệ đang dùng (VD: Go, Wails v2, React, TS).
• Chia nhỏ (Break Down): 1 Prompt = 1 Logic/Component duy nhất. Tuyệt đối không dùng "Mega Prompt" để tránh AI ảo giác.
• Ràng buộc (Constraints): Ép khuôn đầu ra (VD: "Chỉ trả về code, không yapping", "Bắt buộc dùng Context xử lý timeout").

2. Các Mẫu Prompt Tinh Hoa

• Kế hoạch trước, Code sau: "Liệt kê các bước thực hiện hệ thống X. Chưa cần code vội, cho tôi lộ trình."
• Học theo mẫu (Few-Shot): "Viết hàm xử lý theo đúng style của đoạn code mẫu sau: [Mẫu]."
• Phản biện & Tối ưu: "Đóng vai Senior Dev, tìm điểm yếu/lỗ hổng bảo mật trong đoạn code này và tối ưu lại."
• Test-Driven (TDD): "Viết Unit Test cho hàm kiểm tra dữ liệu trước, sau đó mới viết logic để pass test."
• Tự động hóa: "Từ cục JSON này, tạo các định nghĩa type TypeScript tương ứng."

3. Quy Trình Vibe Coding Chuẩn (Chain of Thought)

Không bắt AI làm toàn bộ dự án bằng 1 prompt. Hãy mớm việc theo luồng:

1. Cấu trúc dữ liệu (Concept/JSON)
2. Backend (Go Structs & DB)
3. Kết nối (Wails API)
4. Frontend (React UI)

4. "Vũ khí bí mật": /brainstorm

Khi bí ý tưởng kiến trúc hoặc không biết bắt đầu từ đâu:

• Dùng lệnh /brainstorm [Thiết kế tính năng X].
• Claude sẽ đóng vai cố vấn, hỏi ngược lại bạn để làm rõ yêu cầu, sau đó đưa ra 2-3 phương án kèm ưu/nhược điểm thay vì cắm đầu viết code sai hướng.

Vibe Coding / Chương 06

Chương 06: Xây App Desktop Đầu Tiên

1. Chuẩn bị: Chốt bối cảnh & Google Flow

AI có khả năng viết code rất nhanh nhưng không thể tự hiểu ngữ cảnh dự án của bạn. Nếu thiếu thông tin đầu vào, AI sẽ tạo ra mã nguồn sai lệch.

Google Flow là gì?

Google Flow là AI creative studio của Google, sử dụng model Veo 3 để tạo video chất lượng cao từ prompt văn bản, trả về video MP4 có âm thanh.

• Text-to-Video: Nhập prompt → Nhận video.
• Tỷ lệ khung hình: Ngang (16:9) hoặc Dọc (9:16).
• Độ phân giải: 720p, 1080p, hoặc 4K.
• Thời lượng: 4, 6, hoặc 8 giây mỗi video.
• Âm thanh tự động: Veo3 tạo đối thoại, hiệu ứng âm thanh, và âm thanh nền.

Tạo Tài Khoản Google Flow

1. Truy cập https://labs.google/fx/tools/flow.
2. Đăng nhập bằng tài khoản Google.
3. Bắt đầu sử dụng với 100 credits miễn phí + 50 credits/ngày, hoặc đăng ký gói Google AI Pro ($19.99/tháng) để có 1,000 credits/tháng.

CDP Browser Automation là gì?

CDP (Chrome DevTools Protocol) cho phép app điều khiển trình duyệt Chrome/Chromium theo chương trình. Thay vì gọi API trực tiếp, app sẽ mở trình duyệt, tự động thao tác trên giao diện Google Flow như người dùng thật.

• Không cần API key: Dùng trực tiếp tài khoản Google Flow đã đăng nhập.
• Bypass giới hạn API: Tận dụng đầy đủ tính năng giao diện web.
• Tự động hóa hoàn toàn: Nhập prompt, chọn cài đặt, chờ video, tải về — tất cả tự động.

Luồng Hoạt Động CDP Automation

1. Khởi chạy trình duyệt: App mở Chrome với cờ --remote-debugging-port=9222 và kết nối qua CDP.
2. Điều hướng: Truy cập Google Flow, kiểm tra đã đăng nhập.
3. Nhập prompt & cài đặt: Dùng CDP để tự động nhập prompt vào textarea.
4. Bấm tạo video: Click nút tạo video.
5. Chờ & theo dõi: Polling kiểm tra DOM để biết video đã tạo xong chưa.
6. Tải video: Khi xong, CDP tự động tải MP4 về local và lưu metadata JSON.

2. /plan:hard: Lập Kế Hoạch Dự Án

Trước khi viết bất kỳ dòng code nào, dùng /plan:hard để Claude phân tích yêu cầu và tạo bản kế hoạch triển khai chi tiết. /plan:hard sử dụng nhiều subagent: researcher đọc tài liệu, planner thiết kế kiến trúc.

Sau khi /plan:hard chạy xong, Claude tạo thư mục plans/ chứa bản kế hoạch. Đọc kỹ kế hoạch, kiểm tra:

• Đúng tech stack (Wails, không Electron).
• Đúng lưu trữ (JSON, không database).
• Đúng automation (CDP Browser, không gọi API trực tiếp).
• Không có login/authentication/bcrypt.

3. /cook: Giao Diện Hoàn Chỉnh

Dữ liệu và CDP automation đã xong. Bây giờ xây giao diện: bố cục chính, trang tạo video, thư viện video, và trang cài đặt. App không có login — mở lên là vào thẳng giao diện chính.

Form "Tạo Video Mới" là trang chính của app: ô prompt lớn là input quan trọng nhất. Khu vực trạng thái CDP hiển thị realtime từng bước automation ("Đang mở trình duyệt", "Đang nhập prompt", "Đang chờ video", "Hoàn thành") để người dùng theo dõi tiến trình.

4. /fix:hard: Xử Lý Lỗi Phát Sinh

Sau các vòng /cook, app đã có đầy đủ tính năng. Nhưng gần như chắc chắn sẽ có lỗi. /fix:hard phân tích nguyên nhân gốc của lỗi trước khi sửa, dùng nhiều subagent để kiểm tra code từ nhiều góc độ.

Lỗi thường gặp sau khi xây Veo3 Manager

Workflow của /fix:hard

1. Phân tích lỗi: Đọc error message, xác định phạm vi ảnh hưởng.
2. Debugger subagent: Kiểm tra code liên quan, tìm dòng gây lỗi.
3. Researcher subagent: Tìm giải pháp từ documentation.
4. Sửa lỗi: Áp dụng bản sửa.
5. Chạy test: Kiểm tra bản sửa hoạt động đúng.
6. Review code: Đảm bảo bản sửa không gây lỗi mới.

5. Nghiệm Thu & Kiểm Tra

1. File JSON: Chạy app, kiểm tra file dữ liệu JSON có được tạo ra không.
2. CDP Browser Automation: Mở trang Cài đặt → Bấm "Kiểm tra kết nối" → Chrome phải mở lên và kết nối CDP thành công.
3. Luồng tạo video: Nhập prompt → Bấm "Tạo Video" → Theo dõi trạng thái CDP → Thẻ video mới xuất hiện trong thư viện với trạng thái "Hoàn thành".
4. Selector Config: Kiểm tra file selector config JSON tồn tại và có thể chỉnh sửa được.
5. Thư viện Video: Filter và search hoạt động đúng. Xóa video có xác nhận, xóa cả file MP4 và metadata.

Vibe Coding / Chương 07

Chương 07: Cách Xử Lý Lỗi (Reverse Debugging)

Trong Vibe Coding, khi code báo lỗi, bạn không cần tự mình tìm cách sửa. Việc của bạn chỉ là cung cấp đủ thông tin để AI tự tìm và sửa lỗi cho bạn.

1. Cách báo lỗi cho AI chuẩn nhất

Lỗi phổ biến nhất là chỉ copy mỗi dòng báo đỏ cuối cùng cho AI. Thay vào đó, hãy làm theo công thức này:

• Copy toàn bộ lỗi: Copy tất cả các dòng thông báo lỗi trong Terminal/Console từ lúc bạn chạy lệnh.
• Copy code: Copy đoạn code bạn đang làm việc.
• Viết Prompt: "Tôi gặp lỗi này, đây là toàn bộ thông báo lỗi: [Dán lỗi]. Đây là code hiện tại: [Dán code]. Hãy tìm nguyên nhân và đưa ra code đã sửa."

2. Xử lý 3 trường hợp lỗi thường gặp

• Trường hợp 1 — App báo lỗi đỏ / bị sập: Dùng cách cơ bản ở trên. Copy toàn bộ thông báo lỗi và bảo AI sửa.
• Trường hợp 2 — Code chạy được nhưng kết quả sai: Vì không có thông báo lỗi để copy, bạn phải giải thích rõ ràng. Prompt: "Đầu vào của tôi là X. Kết quả tôi muốn là Y. Nhưng hiện tại nó đang ra Z. Hãy kiểm tra đoạn code sau và sửa lại cho đúng."
• Trường hợp 3 — AI viết ra code không tồn tại: Trình biên dịch báo lỗi không tìm thấy hàm. Hãy nói thẳng với AI: "Hàm này không tồn tại, hãy viết lại bằng một cách khác."

3. Dùng lệnh /fix:hard cho lỗi phức tạp

Khi bạn đã thử copy lỗi cho AI vài lần nhưng vẫn chưa sửa được, hãy gõ lệnh:

/fix:hard [Mô tả chi tiết tình trạng lỗi đang gặp phải]

Khi dùng lệnh này, Claude sẽ tự động làm hết mọi việc: tự điều tra nguyên nhân, tự viết code sửa và tự chạy kiểm tra cho đến khi nào hết lỗi thì thôi.

4. Thoát khỏi tình trạng "sửa mãi không xong"

Đôi khi bạn gặp tình trạng: dán lỗi cho AI → AI đưa code mới → bạn chạy lại báo lỗi mới → AI lại đưa code khác... lặp đi lặp lại không hồi kết.

Đừng tiếp tục dán lỗi nữa, AI đang bị rối thông tin. Hãy làm ngay 3 bước sau:

1. Khôi phục lại code: Xóa phần code bị lỗi, dùng lệnh git checkout . để quay về phiên bản code sạch gần nhất.
2. Mở Chat mới: Bắt đầu một luồng chat mới hoàn toàn.
3. Đổi cách làm: Viết prompt: "Tôi đang muốn làm tính năng X, nhưng cách cũ dùng thư viện A bị lỗi liên tục. Hãy hướng dẫn tôi làm tính năng này bằng một cách hoàn toàn khác."

Vibe Coding / Chương 08

Chương 08: Refactor và Tối Ưu

1. Tại Sao Phải Refactor

Code được AI tạo ra thường ưu tiên tính năng hoạt động. Điều này dẫn đến các vấn đề như file quá dài, logic bị lặp lại (code duplication), hay một hàm đảm nhận quá nhiều trách nhiệm. Code như vậy dù chạy được nhưng khó đọc, khó bảo trì và hay phát sinh lỗi khi bạn muốn thêm tính năng mới.

Refactor là quá trình thay đổi cấu trúc bên trong (internal structure) của code mà KHÔNG làm thay đổi hành vi bên ngoài. Mục đích là làm cho code rõ ràng hơn, thuận tiện sửa đổi hơn và mở rộng được.

Bạn nên refactor khi:

• Một file code vượt quá 200 dòng, gây khó khăn khi đọc và tìm kiếm.
• Có nhiều đoạn code lặp đi lặp lại, cho thấy logic chưa được tái sử dụng.
• Cảm thấy lo ngại mỗi khi thêm một tính năng mới vì sợ phá vỡ các tính năng hiện có.

2. Mega Prompt: Refactor & Tối Ưu Toàn Diện

Thay vì chạy từng prompt riêng lẻ cho mỗi kỹ thuật refactor, bạn copy toàn bộ mega prompt vào Cửa sổ lệnh và để AI thực hiện tuần tự.

Phân tích Mega Prompt:

• Bước 1-5: 5 kỹ thuật refactor cơ bản: tách file, làm phẳng if-else, trích xuất hàm, đặt tên rõ ràng, loại bỏ code chết.
• Bước 6: Tối ưu hiệu năng cho cả frontend (React) và backend (Go). AI sẽ tự tìm các điểm nghẽn cụ thể trong dự án.
• Bước 7: Code review tổng thể. AI đánh giá toàn diện và chấm điểm.

Vibe Coding / Chương 09

Chương 09: UI UX Polish

Trong Vibe Coding, bạn không ngồi chỉnh từng pixel padding. Bạn chỉ đạo AI thực thi các quy chuẩn thẩm mỹ. UI/UX Polish là bước phân biệt giữa một bài tập và một sản phẩm thương mại.

1. /cook: UI/UX Polish Toàn Diện

Dùng /cook để Claude tự phân tích giao diện hiện tại, lập kế hoạch nâng cấp, và triển khai từng bước. Prompt mô tả kết quả mong muốn — Claude sẽ tự chọn cách triển khai phù hợp nhất.

Tại sao dùng /cook?

/cook xử lý toàn bộ quy trình tự động: phân tích giao diện hiện tại → lập kế hoạch → triển khai → kiểm tra. Prompt mô tả kết quả mong muốn (bộ màu semantic, dark mode, toast...) mà KHÔNG chỉ định con số cụ thể. Claude sẽ tự chọn giá trị phù hợp với thiết kế tổng thể.

Phân tích prompt

• Bước 1 — Design System: Nền tảng cho toàn bộ giao diện. Khi setup tốt ở đây, AI sẽ tự động code đẹp ở các bước sau.
• Bước 2 — Dark Mode: Tiêu chuẩn bắt buộc cho app hiện đại. Dùng CSS Variables từ bước 1 để chuyển đổi mượt mà.
• Bước 3 — Toast thay thế alert(): Người dùng luôn nhận được phản hồi khi thao tác.
• Bước 4 — Skeleton Loading thay thế spinner xoay: Tạo cảm giác app nhanh hơn.
• Bước 5 — Micro-interactions: Phản hồi nhỏ khi hover, click, focus giúp app có cảm giác chuyên nghiệp.
• Bước 6 — Layout chuẩn cho Desktop: Sidebar cố định, content co giãn, không bị vỡ khi resize.
• Bước 7 — Accessibility: App dùng được bằng bàn phím, đảm bảo mọi người đều truy cập được.

Vibe Coding / Chương 10

Chương 10: Đóng Gói và Phát Hành

1. /cook: Build & Đóng Gói Đa Nền Tảng

Wails hỗ trợ build cho Windows, macOS, và Linux từ cùng một source code. Bạn dùng /cook để Claude thực hiện toàn bộ quy trình: từ icon đến bộ cài đặt cho từng nền tảng.

/cook: Copy vào Claude Code

/cook Chuẩn bị dự án Veo3 Manager (Wails, backend Go + frontend React)
để build và đóng gói thành sản phẩm hoàn chỉnh chạy trên nhiều
hệ điều hành. Đọc kỹ đặc tả và triển khai tuần tự.

=== BƯỚC 1: ICON & METADATA ===
- Hướng dẫn tôi tạo icon ứng dụng bằng AI hình ảnh
  (phong cách phẳng, hiện đại, biểu tượng video/play).
- Đặt icon vào đúng vị trí để Wails tự động nhúng
  khi build cho cả Windows, macOS, và Linux.
- Cập nhật thông tin tên ứng dụng, mô tả, tác giả,
  và bản quyền trong cấu hình dự án Wails.

=== BƯỚC 2: BUILD PRODUCTION: WINDOWS ===
- Xóa cache cũ trước khi build.
- Loại bỏ thông tin debug để giảm dung lượng file.
- Nén file thực thi bằng UPX (nếu đã cài) để giảm kích thước thêm.
- Build ra file .exe cho Windows.
- Giải thích ngắn gọn tác dụng của từng tham số trong lệnh build.

=== BƯỚC 3: BUILD PRODUCTION: MACOS ===
- Build ra file .app cho macOS (dùng cờ platform phù hợp).
- Hỗ trợ cả máy Mac chip Intel và Mac chip Apple Silicon nếu có thể.
- Giải thích giới hạn khi cross-compile cho macOS
  (cần máy macOS thật nếu build trên Windows/Linux).

=== BƯỚC 4: BUILD PRODUCTION: LINUX ===
- Build ra binary cho Linux.
- Giải thích cách đóng gói cho Linux
  (AppImage hoặc file binary đơn giản).

=== BƯỚC 5: TẠO BỘ CÀI ĐẶT (INSTALLER) ===
- Windows: Hướng dẫn cài NSIS, cấu hình Wails để tạo file Setup.exe.
- macOS: Tạo file .dmg nếu build trên máy Mac.
- Tạo script hoặc Makefile để build tất cả nền tảng bằng 1 lệnh.

Hãy báo cáo tiến độ từng bước.
Nếu cần cài thêm công cụ (UPX, NSIS), hướng dẫn cụ thể.
Nếu có giới hạn cross-compile, nói rõ cách giải quyết.

Phân tích prompt

• Bước 1: Icon & Metadata — app chuyên nghiệp cần icon đẹp, không dùng icon mặc định.
• Bước 2-4: Build production cho từng nền tảng — loại bỏ debug symbols, nén binary, đặt tên phù hợp.
• Bước 5: Installer — đóng gói thành file Setup.exe (Windows) hoặc .dmg (macOS) chuyên nghiệp.

2. Quản Lý Phiên Bản (SemVer)

Mỗi lần bạn cập nhật app (sửa lỗi, thêm tính năng), cần tăng số phiên bản để phân biệt các bản build.

SemVer là gì? Cấu trúc: MAJOR.MINOR.PATCH (Ví dụ: 1.2.4)

• MAJOR: Thay đổi lớn, không tương thích bản cũ.
• MINOR: Thêm tính năng, vẫn tương thích bản cũ.
• PATCH: Sửa lỗi nhỏ.

Prompt: Script quản lý phiên bản

Tạo script quản lý phiên bản cho dự án Veo3 Manager (Wails).
Yêu cầu:
- Hỗ trợ chạy trên Windows (PowerShell hoặc batch).
- Nhận 1 tham số: major, minor, hoặc patch.
- Đọc phiên bản hiện tại từ cấu hình dự án (wails.json).
- Tăng đúng quy tắc SemVer (ví dụ: patch thì 1.0.0 → 1.0.1).
- Cập nhật phiên bản đồng bộ ở cả backend và frontend.
- In ra phiên bản mới sau khi cập nhật.

3. Viết Release Note Bằng AI

Mỗi phiên bản cần ghi chú thay đổi để bạn (và người dùng) biết bản này có gì mới. Dù không đăng lên GitHub, Release Note vẫn hữu ích để theo dõi lịch sử phát triển.

Prompt: Release Note

Dưới đây là danh sách những thay đổi trong phiên bản mới:
[Liệt kê các thay đổi hoặc paste danh sách commit]

Hãy viết một Release Note ngắn gọn.
Chia làm 3 phần:
🚀 Tính năng mới (viết cho người dùng hiểu).
🐛 Sửa lỗi (viết ngắn gọn).
🔧 Kỹ thuật (để cuối).

Bỏ qua các thay đổi vặt vãnh (typo, format).