Hướng dẫn toàn diện về Vibe coding: Cách tạo phần mềm sẵn sàng đưa vào vận hành với AI Agent

Bức tranh phát triển phần mềm đang trải qua một sự thay đổi lớn về phương thức tiếp cận. Trong vài năm qua, ngành công nghệ đã chuyển từ việc viết mã thủ công sang tận dụng các công cụ tự động hoàn thành mã cơ bản. Ngày nay, ngành công nghệ chính thức bước vào kỷ nguyên vibe coding.

Khi thuật ngữ này lần đầu tiên được sử dụng để mô tả một cách thức phát triển phần mềm mới, nó đã phản ánh một thực tế quan trọng: bạn có thể đảm nhận vai trò của kiến trúc sư phần mềm, quản lý sản phẩm và người phụ trách đảm bảo chất lượng ở cấp độ tổng thể, trong khi các AI Agent tự động đảm nhận phần lớn công việc viết, gỡ lỗi và tái cấu trúc mã.

Tuy nhiên, phương pháp này có một điểm đáng lưu ý. Quá nhiều doanh nhân, quản lý sản phẩm và lập trình viên tiếp cận vibe coding với tư duy chưa phù hợp. Họ đưa một prompt mơ hồ duy nhất cho mô hình AI, nhận lại một đoạn mã đầy lỗi và thiếu nhất quán, rồi kết luận rằng AI không thể xây dựng các ứng dụng phức tạp.

Phát triển phần mềm theo cách này thường dẫn đến những trở ngại lớn, bắt đầu từ việc sao chép và dán một cách máy móc các đoạn mã từ những chatbot độc lập.

Để tránh những vấn đề này, các đội ngũ kỹ thuật thành công sử dụng một quy trình có cấu trúc — một dây chuyền chặt chẽ được thiết kế để đưa một ý tưởng ban đầu đi xuyên suốt đến một máy chủ đang vận hành mà không mất quyền kiểm soát đối với mã nguồn.

Đây là hướng dẫn từng bước toàn diện để làm chủ vibe coding. Cho dù sử dụng các công cụ như Claude Code hay tận dụng tối đa hiệu quả làm việc trong một không gian làm việc doanh nghiệp hợp nhất, quy trình này giúp đưa một dự án từ một tệp văn bản trống thành một ứng dụng sẵn sàng vận hành thực tế và đã được kiểm thử kỹ lưỡng.

Thiết lập: Mô hình AI và môi trường làm việc

Lựa chọn đúng công cụ ngay từ đầu có thể giúp tiết kiệm hàng giờ xử lý những vấn đề không đáng có.

1. Mô hình: Claude (gói đăng ký Premium)

Claude hiện được xem là một trong những lựa chọn hàng đầu cho vibe coding — có thể ví như một chiếc "Bugatti" trong lĩnh vực này. Mặc dù gói Premium là một khoản đầu tư, nó có thể giúp tiết kiệm đáng kể thời gian và công sức tư duy ngay từ đầu.

Claude mang lại kết quả tốt ngay từ đầu, nhờ đó bạn không phải liên tục lo lắng về số lượng token. Khi một AI Agent xử lý một nhiệm vụ trong nửa ngày, điều cuối cùng bạn muốn là agent hết giới hạn ngay giữa một giai đoạn.

Thay thế: Codex là một lựa chọn thay thế đáng tin cậy và cũng mang lại kết quả tốt. Tuy nhiên, Claude thường xử lý các nhiệm vụ kiến trúc phức tạp, nhiều lớp một cách mạch lạc hơn. Các mô hình khác có thể đảm nhận từng tác vụ riêng lẻ, nhưng vẫn có những hạn chế khi sử dụng cho toàn bộ quy trình từ đầu đến cuối.

2. Môi trường: VS Code + Claude Plugin

Mặc dù sử dụng Claude Code độc lập hoặc giao diện dòng lệnh (CLI) hoàn toàn có thể đáp ứng nhu cầu, VS Code được khuyến nghị cho những người muốn theo dõi trực quan cấu trúc tệp của dự án.

Ngược lại, Claude Code bản gốc cung cấp khả năng tự động hóa tích hợp sâu hơn.

Mẹo: Hãy thử cả hai và sử dụng công cụ phù hợp nhất với quy trình làm việc của bạn. Trong phần còn lại của hướng dẫn này, "Claude Code" đề cập đến quy trình sử dụng công cụ, bất kể bạn sử dụng giao diện nào.

Giai đoạn 1: Ý tưởng (Tư duy như một quản lý sản phẩm, không phải lập trình viên)

Sai lầm lớn nhất là lập tức mở một công cụ và nhập: "Hãy tạo cho tôi một ứng dụng thực hiện X." Cách làm này gần như luôn dẫn đến một "con quái vật Frankenstein" với những đoạn mã bị lỗi và thiếu liên kết.

• Động não chiến lược: Mở một cửa sổ trò chuyện thông thường trong ChatGPT hoặc Claude (không phải môi trường lập trình, mà chỉ là cửa sổ trò chuyện để tư duy).

• Thử thách ý tưởng: Phát triển ý tưởng và yêu cầu AI chủ động phản biện, tìm ra những điểm yếu và xác định các vấn đề tiềm ẩn. Ở giai đoạn này, hoàn toàn bỏ qua phần triển khai kỹ thuật (ngôn ngữ lập trình, cơ sở dữ liệu, kiến trúc).

• Sử dụng các từ khóa kích hoạt prompt: Sử dụng những từ mô tả như "ultimate", "elegant" hoặc "unobvious". Điều này giúp định hướng mô hình nâng cao chất lượng đầu ra và suy nghĩ sâu hơn về các trường hợp đặc biệt, thay vì chỉ tạo ra một mẫu chung chung.

• Tài liệu hóa: Khi ý tưởng đã được hoàn thiện, yêu cầu AI tổng hợp mọi thứ thành một tệp Markdown (.md) toàn diện. Đây sẽ trở thành tài liệu nền tảng của dự án.

Giai đoạn 2: Mở khóa "siêu năng lực"

Trước khi bắt đầu triển khai, có một công cụ mạnh mẽ có thể thay đổi cách Claude tương tác với mã: một skill chuyên biệt có tên là Superpowers.

[Ý tưởng ban đầu] ➔ [Bật Superpowers Skill] ➔ [Triển khai có kỷ luật và cân nhắc kỹ lưỡng]

Công cụ này làm gì: Nó thay đổi căn bản cách AI tiếp cận công việc bằng cách buộc AI phải lập kế hoạch, thiết kế chiến lược kiểm thử và động não trước khi viết một dòng mã đầu tiên. Công cụ này đưa tính kỷ luật chặt chẽ vào quy trình của agent.

Điểm cần lưu ý: Nó làm chậm quy trình đáng kể — đôi khi lên tới 10 lần. Một nhiệm vụ mà agent có thể xử lý vội vàng trong một giờ có thể mất nửa ngày khi sử dụng Superpowers. Tuy nhiên, kết quả là mã sạch hơn rất nhiều và được xây dựng kỹ lưỡng hơn.

Việc cần làm: Cài đặt skill từ repository của nó trước khi bắt đầu.

Khởi tạo Claude Code

Khi đã có tài liệu ý tưởng và bật Superpowers, hãy chuyển sang Claude Code:

• Đưa tệp concept .md vào dự án.

• Yêu cầu Claude nghiên cứu kỹ tài liệu và đặt câu hỏi về bất kỳ điểm nào chưa rõ.

• Cập nhật tài liệu dựa trên các câu trả lời.

Cách này giúp loại bỏ sớm các giả định sai và hiện tượng AI tạo ra thông tin không chính xác.

Giai đoạn 3: Đặc tả kỹ thuật và "Deep Research"

Bây giờ hãy chuyển sang phần kỹ thuật. Yêu cầu Claude Code (đã bật Superpowers) thiết kế kiến trúc kỹ thuật tối ưu và lưu thành một tệp đặc tả .md mới, trong đó mô tả chi tiết ngôn ngữ lập trình, cấu trúc dữ liệu và công nghệ sử dụng.

Mẹo Deep Research

Để tránh gặp bế tắc giữa quá trình phát triển, hãy sử dụng quy trình sau:

[Claude Code] ➔ Tạo 10 câu hỏi nghiên cứu ➔ [AI có khả năng truy cập web (chế độ Deep Research)] ➔ [Tải kết quả dưới dạng MD] ➔ [Đưa trở lại Claude Code]

Cách này đảm bảo agent có các giải pháp thực tế, cập nhật và tài liệu về thư viện cần thiết trước khi bắt đầu viết mã cho cơ sở hạ tầng.

Giai đoạn 4: Thiết kế UI/UX trước

Không nên để phần giao diện đến cuối cùng. Thiết kế frontend từ sớm giúp bạn có một sản phẩm cụ thể để kiểm thử và tương tác.

• Bước 1: Yêu cầu Claude Code viết một bản mô tả UI/UX chi tiết dựa trên tài liệu đặc tả. Hãy tự mình xem xét và điều chỉnh bản mô tả này — trực giác của con người vẫn đóng vai trò quan trọng trong thiết kế tốt.

• Bước 2: Dán bản mô tả vào giao diện web Claude Design và xây dựng một nguyên mẫu hoàn chỉnh. Tiếp tục hoàn thiện cho đến khi đáp ứng 100% yêu cầu.

• Bước 3: Trong cùng cuộc trò chuyện đó, yêu cầu tạo một design system và thư viện component toàn diện. Lưu lại phiên trò chuyện này; bạn sẽ quay lại đó bất cứ khi nào cần thiết kế các thành phần UI mới.

• Bước 4: Tải các tài nguyên của nguyên mẫu xuống, đưa chúng vào thư mục dự án và yêu cầu Claude Code phân tích toàn bộ. Sau đó, yêu cầu Claude ghi lại cấu trúc bố cục trong một tệp .md khác.

Giai đoạn 5: Kế hoạch tổng thể của dự án

Ở thời điểm này, AI đã có ý tưởng, đặc tả kỹ thuật, kết quả nghiên cứu chuyên sâu và cấu trúc thiết kế. Đã đến lúc lập bản đồ cho quá trình triển khai.

Yêu cầu Claude Code tạo một kế hoạch dự án hoàn chỉnh theo từng giai đoạn trong một tệp .md tổng thể. Tài liệu này sẽ đóng vai trò là nguồn thông tin chuẩn duy nhất của dự án.

Các nguyên tắc cốt lõi khi lập kế hoạch

• Hoãn triển khai: Đưa các bước triển khai xuống cuối cùng của kế hoạch. Luôn xây dựng và kiểm thử hoàn toàn trên máy tính cục bộ hoặc máy chủ tại nhà trước.

• Tự động hóa Git: Superpowers tự động xử lý việc quản lý phiên bản bằng Git, giúp dễ dàng quay lại khi có lỗi. Chỉ kết nối GitHub nếu làm việc cùng một đội ngũ.

• Thiết lập hạ tầng AI: Nếu ứng dụng phụ thuộc vào LLM, hãy cấu hình hạ tầng này từ sớm. Hướng dẫn này sử dụng các mô hình chạy trên máy chủ cục bộ hoặc API của nền tảng Bitrix24 Vibe Code (với OpenRouter làm phương án dự phòng khi cần).

• Sắp xếp lại các giai đoạn theo cách thủ công: Luôn thực hiện hai điều chỉnh thủ công đối với kế hoạch do AI đề xuất:

  • Đưa việc xây dựng UI lên các giai đoạn đầu tiên để có thể phát hiện lỗi bằng mắt.

  • Thiết lập cơ chế ghi log thật chi tiết ngay từ ngày đầu tiên để đơn giản hóa việc gỡ lỗi về sau.

Giai đoạn 6: Triển khai các giai đoạn phát triển

Giai đoạn này chiếm 95% tổng thời gian của dự án. Các agent thường có thể tự động chạy trong nền hàng giờ, trong khi bạn chỉ cần giám sát, kiểm tra các mốc tiến độ và hỗ trợ xử lý khi chúng gặp trở ngại.

Danh sách kiểm tra chất lượng

• Tối đa hóa độ bao phủ kiểm thử: Sử dụng các trình duyệt không giao diện (headless browser) như Playwright. Điều này giúp Claude có "mắt" để kiểm tra trực quan xem giao diện có hoạt động hay không, thay vì chỉ kiểm tra log backend.

• Kiểm tra trực quan thủ công: Kiểm thử tự động rất hữu ích, nhưng việc tự mình nhấp qua ứng dụng có thể phát hiện những vấn đề về trải nghiệm người dùng mà phần mềm không thể nhận ra.

• Kiểm tra nội dung giao diện: Đây là một vấn đề thường gặp trong vibe coding. Nội dung văn bản do AI tạo cho giao diện đôi khi có thể hoàn toàn vô nghĩa. Hãy tự mình kiểm tra và viết lại nội dung giao diện.

Mẹo chuyên nghiệp: Sau mỗi vài giai đoạn, hãy mở một cuộc trò chuyện hoàn toàn mới với một agent mới, cung cấp cho agent mã nguồn của dự án và yêu cầu kiểm tra kiến trúc bằng góc nhìn khách quan. Cách này giúp phát hiện các lỗ hổng tiềm ẩn hoặc những phần triển khai cẩu thả.

Giai đoạn 7: Bảo mật và triển khai

Bước 1: Quét lỗ hổng bảo mật

Thực hiện kiểm tra bảo mật như một bước riêng biệt. Sử dụng các script bảo mật chuyên dụng của GitHub và các prompt Claude được thiết kế cho mục đích này để quét mã nguồn, tìm các lỗ hổng liên quan đến injection và rò rỉ dữ liệu trước khi đưa ứng dụng lên máy chủ vận hành.

Bước 2: Chiến lược triển khai

Tùy thuộc vào loại dự án, hãy lựa chọn một trong ba phương án:

• Máy chủ tại nhà: dành cho các công cụ riêng tư hoặc tự động hóa nội bộ.

• Bitrix24 Vibe Code (Black Hole Server): dành cho các ứng dụng an toàn cần tích hợp với hệ sinh thái.

• VPS tiêu chuẩn: dành cho các ứng dụng công khai cần tên miền riêng.

Claude đặc biệt hiệu quả trong việc xử lý các vấn đề về hạ tầng — thiết lập môi trường máy chủ, cấu hình tường lửa cơ bản và quản lý các script triển khai.

Bước 3: Kiểm tra bảo mật trên môi trường vận hành

Sau khi ứng dụng được đưa vào vận hành, hãy thực hiện lại các kiểm tra bảo mật trực tiếp trên môi trường production để tính đến những cấu hình riêng của máy chủ.

Nếu ứng dụng xử lý đầu vào từ LLM, hãy chủ động kiểm thử hệ thống đang vận hành trước các cuộc tấn công prompt injection.

Giai đoạn 8: Sau khi ra mắt và bảo trì

Sau khi ứng dụng được đưa vào vận hành, hãy đưa log từ môi trường production trở lại Claude để thực hiện smoke test và khắc phục những lỗi nhỏ phát sinh sau khi ra mắt.

Nguyên tắc vàng khi cập nhật tính năng

Khi thêm tính năng mới hoặc sửa lỗi về sau, tuyệt đối không cố gắng tái cấu trúc toàn bộ dự án cùng một lúc. Những thay đổi quy mô lớn có thể khiến các mô hình AI phá vỡ logic đang hoạt động.

Hãy giữ các cập nhật ở mức cực kỳ riêng biệt và theo mô-đun. Giới hạn phạm vi mã xuống một hàm hoặc một tệp duy nhất và yêu cầu Claude chỉ chỉnh sửa phần cụ thể đó.

Chạy kiểm thử sau mỗi thay đổi.

Chuyển dự án giữa các mô hình AI

Nếu cần chuyển dự án từ Claude sang Codex hoặc một công cụ phát triển khác, việc duy trì tài liệu có hệ thống sẽ phát huy hiệu quả.

Vì thư mục dự án chứa đầy đủ các tệp .md được tạo trong quá trình phát triển (Concept, Specs, Research, Plans), bạn chỉ cần cung cấp chúng cho mô hình AI mới. Mô hình có thể nhanh chóng hiểu toàn bộ bối cảnh, kiến trúc và logic của mã nguồn.

Kết luận: Sức mạnh của Markdown (.md)

Điểm xuyên suốt quan trọng nhất của toàn bộ quy trình này là việc sử dụng nhất quán các tệp Markdown được lưu trực tiếp trong thư mục dự án, bao gồm Concept, Specification, Research và Master Plan.

Cách tiếp cận này mang lại ba lợi ích thiết thực:

• Khả năng ghi nhớ của con người: Bất kỳ ai cũng có thể nhanh chóng mở lại một tài liệu và hiểu tại sao một quyết định cụ thể được đưa ra.

• Khôi phục ngữ cảnh: Các AI Agent có thể đọc lại các tệp bất cứ lúc nào để khôi phục chính xác ngữ cảnh mà không lãng phí giới hạn token.

• Tính linh hoạt khi chuyển đổi dự án: Thư viện MD đóng vai trò như bộ nhớ độc lập của dự án, giúp dễ dàng chuyển mã nguồn sang bất kỳ mô hình AI hoặc giao diện trò chuyện nào khác.

Nếu chỉ có một thói quen cần áp dụng từ toàn bộ quy trình này, thì đó là: hãy ghi lại mọi thứ trong Markdown.