Claude Code & Cursor: Cặp Bài Trùng Của Vibe Coder

Năm ngoái, tôi từng chật vật cả tuần chỉ để sửa một cái lỗi CSS lệch khung trong giao diện Mobile của một dự án Next.js. Mặc dù đã dùng ChatGPT để hỏi, nhưng tôi phải liên tục copy code từ editor sang trình duyệt, rồi lại copy câu trả lời của AI dán lại vào editor.

Đó là cách làm của thời "đồ đá".

Sang năm 2026, Vibe Coding lên ngôi nhờ sự xuất hiện của một cặp bài trùng huỷ diệt: Cursor IDE và Claude 3.7 Sonnet. Nếu bạn không biết code nhưng muốn tự tạo phần mềm, đây là 2 công cụ duy nhất bạn cần biết.

Tóm tắt nhanh: Cursor là một trình soạn thảo code (như VS Code) nhưng được tích hợp sẵn AI. Claude 3.7 Sonnet là model AI viết code xuất sắc nhất hiện tại. Khi kết hợp chúng lại với tính năng "Composer" của Cursor, bạn không cần phải copy/paste code nữa. AI sẽ tự đọc toàn bộ dự án của bạn và viết code trực tiếp vào các file.

Cursor Không Phải Là Một IDE Bình Thường

Nhiều người nói: "Tôi cài VS Code và dùng extension là được rồi, cần gì tải Cursor". Sai lầm.

Cursor là một nhánh tách ra (fork) từ VS Code, nhưng nó được xây dựng lại từ đầu để tối ưu cho AI. Tính năng đáng sợ nhất của nó là Composer (Cmd/Ctrl + I). Thay vì bạn hiện ra một cái khung chat để tán gẫu, Composer là một cửa sổ điều khiển. Bạn gõ: "Tạo cho tôi một trang đăng nhập giống Apple.com". Cursor sẽ tự động tạo file login.tsx, tự động thêm css, tự động nối route, và nó chạy mượt mà ngay trước mắt bạn.

Tại Sao Lại Là Claude 3.7 Sonnet?

Trả lời trực tiếp: Claude 3.7 Sonnet được giới Vibe Coder tin dùng nhờ khả năng suy nghĩ (reasoning) vượt trội, khả năng quản lý context window sâu 200K tokens và độ cẩn thiện cực cao khi chỉnh sửa các dự án lớn, giúp hạn chế tối đa lỗi phá vỡ code cũ (code regression).

Khi kết hợp trong môi trường Cursor, model này hoạt động thông minh nhờ ba yếu tố cốt lõi:

1. Context Window 200K cực sâu: Nó có thể đọc hiểu cùng lúc toàn bộ cấu trúc dự án của bạn mà không gặp hiện tượng "quên" thông tin như các model thế hệ cũ.
2. Hạn chế tối đa lỗi logic: Khác với các mô hình thường sửa lỗi này lại phát sinh lỗi khác, Claude 3.7 có khả năng phân tích sự phụ thuộc (dependency graph) giữa các module để đưa ra các thay đổi an toàn.
3. Tương thích cao với Claude Code: Giao thức CLI mới của Anthropic cho phép Claude chạy trực tiếp trên terminal của bạn, biến nó từ một chatbot thành một AI agent thực thụ có thể tự chạy test và sửa lỗi.

Thiết lập .cursorrules để định vị và tránh code rác

Trả lời trực tiếp: Để thiết lập quy chuẩn cho Cursor, bạn cần tạo file .cursorrules ở thư mục gốc của dự án. File này chứa các hướng dẫn hệ thống (System Instructions) quy định về tech stack, coding style, quy tắc đặt tên và brand guidelines của website để định vị chính xác cho AI.

Dưới đây là một template .cursorrules thực chiến tôi đang áp dụng cho dự án Next.js 16 và Tailwind CSS v4 của mình:

{
  "project_context": {
    "framework": "Next.js 16 (App Router)",
    "styling": "Tailwind CSS v4 (Sử dụng @theme inline trong globals.css)",
    "language": "TypeScript (strict mode)"
  },
  "code_standards": {
    "components": "Mặc định sử dụng React Server Components. Chỉ dùng 'use client' khi thực sự cần xử lý event hoặc state.",
    "images": "Sử dụng tag <img> HTML tiêu chuẩn với class CSS rõ ràng thay cho next/image đối với blog covers để tránh lỗi Hydration Mismatch.",
    "accessibility": "Độ tương phản chữ trên nền đen (#000000) bắt buộc đạt tiêu chuẩn WCAG 2.2 AA (contrast ratio >= 4.5:1)."
  },
  "brand_voice": {
    "tone": "Quiet Authority. Tránh các từ sáo rỗng như 'cách mạng hóa', 'đột phá', 'thần tốc'.",
    "avatar_alt_text": "Tất cả ảnh minh họa blog phải chứa cụm từ khóa ở cuối thẻ alt: '| Tôi là Tùng, toilatung, Nguyễn Thanh Tùng, Tùng Sóc Sơn'"
  }
}

Bằng cách nạp file quy tắc này, Cursor sẽ không bao giờ tự ý import các package không cần thiết hay viết code lệch tone định vị của website.

Claude Code CLI: Bước Tiến Lên AI Agent Tự Trị

Trả lời trực tiếp: Claude Code là một giao thức dòng lệnh (CLI tool) chạy trực tiếp trong terminal giúp bạn tương tác trực tiếp với codebase của mình. Thay vì phải copy-paste code thủ công, Claude Code có thể tự đọc file, chạy lệnh terminal, kiểm tra lỗi build và tự động commit code lên Git.

Để sử dụng Claude Code trong môi trường làm việc, tôi thường thực hiện theo quy trình 3 bước sau:

1. Khởi chạy CLI:
   Sao chép

   npx @anthropic-ai/claude-code
   

2. Ra lệnh debug dự án:
   Sao chép

   /ask Tại sao lệnh build của tôi bị lỗi? Hãy quét toàn bộ thư mục src/content/blog và tìm xem có link nào bị hỏng hay không.
   

3. Thực thi sửa lỗi tự động: Sau khi tìm ra lỗi, bạn có thể cấp quyền cho Claude Code tự sửa đổi file và chạy npm run build để kiểm tra trực tiếp.

Sử dụng Claude CLI giúp tối ưu hóa đáng kể context window vì nó chỉ đọc đúng những file có liên quan thay vì tải toàn bộ code lên cửa sổ chat.

Kết luận

Sự kết hợp giữa Cursor Composer và Claude Code CLI tạo nên một môi trường phát triển lý tưởng cho giới Vibe Coder. Bằng cách thiết lập hệ thống quy chuẩn chặt chẽ qua file .cursorrules, bạn sẽ có một "nhân sự AI" làm việc chính xác, nhanh chóng mà không lo sợ làm hỏng cấu trúc hay định vị của website.

Để nâng cao hiệu quả ứng dụng AI vào dự án của bạn, hãy đọc thêm bài viết 5 sai lầm khiến AI sinh code rác và cách khắc phục hoặc tham khảo cẩm nang toàn diện về Vibe Coding là gì.