Vibe coding với Claude: Claude chat, Claude Code và xây app từ Claude

Vibe coding với Claude có ba cách. Claude chat xây các app nhỏ một trang ngay trong cuộc trò chuyện. Claude Code là agent sửa một dự án thật trên máy bạn hoặc trên đám mây, dành cho người quen với codebase. Và Claude cộng với một trình tạo app qua MCP cho bạn xây, xem trước và xuất bản một app full-stack có cơ sở dữ liệu mà không rời cuộc trò chuyện Claude. Cách nào hợp tùy vào thứ bạn đang xây và bạn muốn tự lo bao nhiêu phần thiết lập.

Hướng dẫn này bàn cả ba, kèm prompt và giới hạn của từng cách. Về ý tưởng đằng sau tất cả, xem vibe coding là gì.

Cách 1: Claude chat cho công cụ nhỏ

Trong app Claude thông thường, bạn có thể yêu cầu một thứ tương tác và Claude viết nó thành code chạy ngay bên cạnh cuộc trò chuyện: một máy tính, bài ôn flashcard, trò chơi nhỏ, biểu đồ từ dữ liệu bạn dán vào. Bạn đổi nó bằng cách trả lời.

Một prompt hay ở đây là prompt tự đầy đủ:

Hãy làm một công cụ tương tác nơi tôi dán danh sách các khoản chi (mỗi dòng một khoản, "số tiền, danh mục") và nó hiển thị biểu đồ tròn theo danh mục cùng tổng. Kèm một danh sách mẫu để nó chạy được ngay.

Rất hợp với: công cụ nhanh một trang bạn tự dùng hoặc chia sẻ qua liên kết, và học tập, vì bạn có thể nhờ Claude giải thích từng phần.

Điểm dừng: những thứ này chạy bên trong môi trường của Claude. Không có cơ sở dữ liệu bền vững của riêng bạn, không tài khoản người dùng, không tên miền riêng, và không nơi nào để chạy server. Khi ý tưởng vượt quá một trang, bạn cần một trong hai cách tiếp theo.

Cách 2: Claude Code cho codebase thật

Claude Code là coding agent của Anthropic. Nó chạy trong terminal của bạn, trong các trình soạn thảo như VS Code và JetBrains, trong app desktop và trên web. Bạn giao việc bằng ngôn ngữ thường ngày, và nó đọc dự án, sửa tệp, chạy lệnh và kiểm thử, rồi cho bạn thấy điều gì đã đổi. Tại thời điểm viết bài, nó có trong các gói trả phí của Claude và dùng được qua API; hãy xem trang của Anthropic để biết các gói hiện tại.

Một buổi vibe coding điển hình trông như thế này:

Thêm trang /bookings liệt kê các lịch đặt của người dùng hiện tại, mới nhất trước, với nút hủy bị vô hiệu hóa khi còn dưới hai giờ trước buổi học. Dùng helper xác thực có sẵn. Chạy kiểm thử khi xong.

Rất hợp với: lập trình viên và nhà sáng lập kỹ thuật đã có dự án, muốn kiểm soát hoàn toàn stack và sẵn sàng tự chạy, triển khai. Nó mạnh ở các thay đổi nhiều tệp và việc tuân theo quy ước sẵn có trong codebase.

Chỗ tốn công hơn: bạn cần môi trường phát triển, và Claude Code không lưu trữ gì cả. Cơ sở dữ liệu, secret, triển khai và tên miền bạn phải tự sắp xếp. Để so sánh với các công cụ cho lập trình viên khác, xem Cursor vs Windsurf vs Claude Code.

Thói quen hiệu quả với Claude Code

• Yêu cầu kế hoạch trước các thay đổi lớn. "Phác thảo các bước và các tệp bạn sẽ chạm vào, rồi chờ."
• Giữ một tệp ghi chú dự án. Claude Code đọc một tệp bộ nhớ dự án (CLAUDE.md) cho các quy ước, nên bạn không phải lặp lại.
• Xem lại diff. Ngay cả khi vibe coding, hãy lướt qua những gì đổi ở các vùng nhạy cảm: xác thực, thanh toán, mọi thứ có dữ liệu người dùng.
• Commit thường xuyên. Những commit nhỏ giúp dễ hoàn tác một bước tệ.

Cách 3: Xây và xuất bản từ Claude bằng Mythex

Nếu bạn thích làm việc trong Claude nhưng muốn có một app thật ở cuối — cơ sở dữ liệu, đăng nhập, lưu trữ tệp, một URL công khai — bạn có thể kết nối Claude với một trình tạo app AI qua MCP, giao thức cho phép Claude dùng các công cụ đặt ở nơi khác. (MCP là gì giải thích bằng lời đơn giản.)

Mythex chạy một máy chủ MCP. Khi đã kết nối, Claude có thể tạo dự án Mythex, viết code trong sandbox đám mây riêng tư, khởi động bản xem trước trực tiếp, gắn cơ sở dữ liệu và lưu trữ tệp, và xuất bản app. Mỗi kết quả đều kèm một liên kết để xem dự án trực tiếp trong Mythex.

Cách kết nối

1. Trong Mythex, mở Cài đặt tài khoản và sao chép URL MCP: https://mcp.mythex.ai/mcp.
2. Trong Claude, vào Settings → Connectors → Add custom connector, dán URL và bấm Connect.
3. Một trang Mythex mở ra. Đăng nhập nếu cần và chọn Cho phép truy cập. Không có khóa API nào để sao chép.
4. Quay lại Claude và yêu cầu điều bạn muốn.

Ai cũng kết nối được ở mọi gói; các công cụ sandbox cần Mythex Pro ($25 mỗi tháng). Việc dùng Claude vẫn nằm trong gói Claude của bạn, còn thời gian sandbox, bản xem trước và hosting tính từ credit Mythex của bạn. Hướng dẫn đầy đủ nằm ở xây app Mythex từ Claude, Cursor hoặc Codex.

Một prompt đầu tiên để thử

Dùng Mythex, hãy tạo một dự án mới: một CRM đơn giản cho studio thiết kế nhỏ của tôi. Các liên hệ với tên, công ty, email, số điện thoại, giai đoạn (tiềm năng, đang hoạt động, đã qua) và ghi chú. Một chế độ xem dạng bảng theo giai đoạn nơi tôi kéo thả liên hệ giữa các cột, và một ô tìm kiếm. Thêm cơ sở dữ liệu để dữ liệu được lưu, và đăng nhập để chỉ mình tôi xem được. Khởi động bản xem trước và gửi tôi liên kết khi nó chạy.

Sau đó lặp lại trong cùng cuộc trò chuyện, mỗi lần một thay đổi:

Trong dự án Mythex, hãy thêm ngày "theo dõi tiếp theo" cho các liên hệ và một danh sách ở màn hình chính các lần theo dõi đến hạn trong tuần này. Kiểm tra trong bản xem trước.

Xuất bản CRM và cho tôi URL trực tiếp.

Rất hợp với: những người nghĩ tốt nhất trong Claude và muốn kết quả được lưu trữ, có cơ sở dữ liệu, mà không phải thiết lập server. Bạn cũng có thể chuyển qua lại: bắt đầu trong Claude và tiếp tục trong khung chat Mythex, hoặc ngược lại, vì đó là cùng một dự án.

Bạn nên dùng cách nào?

Mẹo viết prompt càng quan trọng với Claude

Claude làm theo chỉ dẫn chi tiết rất sát, và điều đó có hai mặt.

• Nói rõ điều không được đổi. "Giữ bố cục và màu sắc; chỉ đổi phần kiểm tra biểu mẫu."
• Đưa ra định nghĩa của "xong". "Xong nghĩa là một liên hệ mới lưu được, hiện trên bảng và còn nguyên sau khi tải lại."
• Nhờ nó tự kiểm tra việc của mình. Trong Claude Code đó là chạy kiểm thử; với Mythex đó là kiểm tra bản xem trước trực tiếp hoặc chạy một bài kiểm thử trình duyệt.
• Yêu cầu giải thích bằng lời đơn giản khi bạn không hiểu một thay đổi. Đó là cách nhanh nhất để biết app của bạn đang làm gì.

Bảng prompt vibe coding của chúng tôi có 30 prompt dùng được ở cả ba cách thiết lập.

Lưu ý an toàn cho cả ba

• Đừng dán khóa API hay mật khẩu thật vào cuộc trò chuyện Claude. Với Mythex, secret được đặt trong phần cài đặt secrets của dự án, và Claude thấy tên của chúng nhưng không thấy giá trị.
• Kiểm tra ai thấy được gì trước khi xuất bản. "Một người dùng đã đăng nhập có mở được bản ghi của người dùng khác không?" là câu hỏi đầu tiên cần đặt.
• Xem lại code nhạy cảm. Claude là một lập trình viên giỏi, nhưng vibe coding nghĩa là bạn không đọc từng dòng, nên hãy chọn những dòng quan trọng. Xem vibe coding có an toàn không?.

Nếu bạn cũng dùng ChatGPT, hướng dẫn đồng hành bàn về vibe coding với ChatGPT và Codex. Và nếu muốn bỏ qua hoàn toàn khâu thiết lập, hãy mở trình tạo app AI và mô tả app của bạn ở đó.

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