Chất lượng của đầu ra vibe coding phụ thuộc trực tiếp vào chất lượng của các prompt bạn đưa ra. Một prompt mơ hồ sẽ tạo ra code mơ hồ. Một prompt chính xác sẽ tạo ra code hoạt động ngay từ lần thử đầu tiên.
Bài học này sẽ dạy bạn các kỹ thuật giúp phân biệt giữa vibe coding gây khó chịu ("nó cứ bị lỗi") và vibe coding hiệu quả ("nó hoạt động trơn tru").
🔄 Tóm tắt nhanh: Trong bài học trước, bạn đã thiết lập công cụ vibe coding và xây dựng một trang portfolio đơn giản. Bây giờ, bạn sẽ học các kỹ thuật tạo prompt giúp mỗi lần xây dựng nhanh chóng và đáng tin cậy hơn.
Vai trò của một prompt hiệu quả
So sánh các prompt sau cho cùng một tính năng:
Mơ hồ (sẽ cần nhiều lần lặp lại):
Thêm xác thực người dùng
Cụ thể (có khả năng hoạt động ngay lần thử đầu tiên):
Thêm xác thực email/mật khẩu bằng Supabase Auth. Tạo trang đăng ký tại /signup với các trường email và mật khẩu. Tạo trang đăng nhập tại /login. Sau khi đăng nhập, chuyển hướng đến /dashboard. Thêm nút đăng xuất vào tiêu đề. Bảo vệ /dashboard để người dùng chưa được xác thực được chuyển hướng đến /login.
Prompt cụ thể bao gồm: Lựa chọn công nghệ, đường dẫn trang, trường biểu mẫu, hành vi sau khi xác thực, các phần tử điều hướng và quy tắc kiểm soát truy cập. AI sẽ xây dựng chính xác những gì bạn đã mô tả.
Danh sách kiểm tra prompt
Đối với mỗi yêu cầu tính năng, hãy bao gồm:
Chức năng (hành vi)
Vị trí đặt (trang, thành phần, phần)
Hình thức (kiểu dáng, bố cục)
Công nghệ cần sử dụng (nếu bạn có ưu tiên)
Các trường hợp ngoại lệ (điều gì xảy ra khi có lỗi)
✅ Kiểm tra nhanh: Bạn muốn có thanh tìm kiếm trên ứng dụng của mình. Prompt của bạn nên bao gồm những chi tiết nào ngoài "thêm thanh tìm kiếm"?
Câu trả lời: Vị trí đặt (tiêu đề? trang riêng?), nội dung tìm kiếm (tên sản phẩm? toàn bộ nội dung?), cách hiển thị kết quả (menu drop-down? trang riêng?), hành vi chống nhiễu (tìm kiếm khi gõ hay khi nhấn Enter?), và trạng thái trống (hiển thị khi không có kết quả phù hợp).
Kỹ thuật 1: Phân lớp ngữ cảnh
Bắt đầu câu hỏi bằng cách cho AI biết về ngữ cảnh dự án của bạn trước khi đưa ra yêu cầu:
📍 Nơi dán: Mở ChatGPT (chat.openai.com), Claude (claude.ai) hoặc Gemini (gemini.google.com) và bắt đầu một cuộc trò chuyện mới.
📋 Cách sao chép prompt này: Nhấp vào bất kỳ đâu bên trong khối màu xám, nhấn Cmd+A rồi Cmd+C (Mac) hoặc Ctrl+A rồi Ctrl+C (Windows). Hoặc sử dụng biểu tượng sao chép xuất hiện.
Dự án của tôi là một ứng dụng quản lý tác vụ được xây dựng bằng Next.js 14, TypeScript,
Tailwind CSS và Supabase. Ứng dụng có một bảng điều khiển tại /dashboard, hiển thị danh sách các nhiệm vụ dưới dạng bảng. Mỗi nhiệm vụ có tiêu đề, trạng thái, mức độ ưu tiên và ngày đến hạn.
Bây giờ: Thêm thanh lọc phía trên bảng nhiệm vụ cho phép người dùng lọc theo trạng thái (tất cả/cần làm/đang thực hiện/đã hoàn thành) và mức độ ưu tiên (tất cả/thấp/trung bình/cao).
Bộ lọc sẽ cập nhật bảng theo thời gian thực mà không cần load lại trang.
✏️ Cách điền thông tin chi tiết của bạn: Thay thế mỗi dấu ngoặc vuông [] và trình giữ chỗ trong ngoặc bằng thông tin cụ thể từ tình huống thực tế của bạn. Thông tin đầu vào mơ hồ sẽ tạo ra kết quả mơ hồ — hãy cụ thể.
👀 Những gì bạn sẽ thấy: Trong vòng vài giây, AI sẽ trả về phản hồi có cấu trúc dựa trên prompt ở trên. Hãy đọc kỹ và coi đó là bản nháp, không phải câu trả lời cuối cùng.
📌 Nên làm gì với kết quả: Lưu phản hồi vào file Notes. Chọn đề xuất có tác động cao nhất và thực hiện nó trong tuần này — đừng cố gắng làm mọi thứ cùng một lúc.
⚠️ Nếu thấy không ổn: Nếu các đề xuất có vẻ chung chung, hãy dán nội dung sau: "Hãy cụ thể hơn với ngữ cảnh thực tế của tôi. Bỏ những lời khuyên chung chung đi." Nếu nó bỏ qua các chi tiết quan trọng bạn đã cung cấp, hãy hỏi: "Bạn đã bỏ sót [X] trong ngữ cảnh của tôi — hãy thực hiện lại với đó là ràng buộc chính."
Đoạn văn về ngữ cảnh giúp ngăn AI đoán được ngăn xếp công nghệ, cấu trúc file hoặc quy ước đặt tên của bạn.
Kỹ thuật 2: Tạo prompt từng bước
Đừng yêu cầu toàn bộ ứng dụng trong một prompt. Xây dựng từng tính năng một:
Bước 1: "Tạo trang đích với phần giới thiệu, lưới tính năng và footer"
→ Kiểm tra, xác minh xem nó có hoạt động không
Bước 2: "Thêm biểu mẫu đăng ký thu thập tên, email và mật khẩu"
→ Kiểm tra, xác minh xem nó có hoạt động không
Bước 3: "Kết nối biểu mẫu đăng ký với Supabase Auth"
→ Kiểm tra, xác minh xem nó có hoạt động không
Bước 4: "Tạo trang tổng quan mà chỉ người dùng đã xác thực mới có thể truy cập"
→ Kiểm tra, xác minh xem nó có hoạt động không
Mỗi bước đều mang lại một kết quả nhanh chóng mà bạn có thể xác minh trước khi chuyển sang bước tiếp theo. Nếu bước 3 gây ra lỗi, bạn sẽ biết chính xác vấn đề nằm ở đâu.
Nguyên tắc: Kiểm tra sau mỗi bước. Đừng gộp 5 tính năng vào một prompt — nếu có lỗi xảy ra, bạn sẽ không biết thay đổi nào gây ra nó.
Kỹ thuật 3: Nghiên cứu - Lập kế hoạch - Thực hiện
Đối với những thay đổi phức tạp đối với code hiện có, hãy sử dụng ba bước riêng biệt:
Bước 1 — Nghiên cứu:
Hãy xem codebase của tôi. Tóm tắt cách hệ thống xác thực hoạt động, các file nào liên quan và luồng dữ liệu người dùng từ khi đăng nhập đến bảng điều khiển.
Bước 2 — Lập kế hoạch:
Tôi muốn thêm quyền truy cập dựa trên vai trò (quản trị viên so với người dùng thông thường). Dựa trên sự hiểu biết của bạn về codebase, hãy tạo một kế hoạch từng bước. Liệt kê các file bạn sẽ sửa đổi và những thay đổi bạn sẽ thực hiện trong mỗi file.
Bước 3 — Thực hiện:
Kế hoạch trông ổn. Thực hiện bước 1 — thêm trường vai trò vào bảng người dùng và cập nhật quy trình đăng ký.
Mẫu ba bước này ngăn AI thực hiện các thay đổi mà nó không hiểu đầy đủ. Bạn xem xét kế hoạch trước khi viết bất kỳ code nào.
✅ Kiểm tra nhanh: Tại sao bạn nên xem xét kế hoạch của AI trước khi cho phép nó thực hiện?
Câu trả lời: Trí tuệ nhân tạo (AI) có thể hiểu sai kiến trúc codebase của bạn hoặc đề xuất những thay đổi làm hỏng các tính năng hiện có. Bằng cách xem xét kế hoạch, bạn sẽ phát hiện ra các vấn đề trước khi viết code — dễ dàng hơn nhiều so với việc gỡ lỗi sau khi triển khai.
Kỹ thuật 4: Thiết lập vai trò
Hãy cho AI biết nó là ai trước khi đưa ra yêu cầu:
Hãy đóng vai trò là một kỹ sư full-stack cấp cao chuyên về Next.js và Supabase. Bạn ưu tiên code sạch, an toàn kiểu dữ liệu và xử lý lỗi.
Thiết lập vai trò tập trung vào đầu ra của AI. Nếu không có nó, bạn sẽ nhận được code chung chung. Với nó, bạn sẽ nhận được code tuân theo các mẫu mà một kỹ sư cấp cao sẽ sử dụng.
Quản lý ngữ cảnh
Cửa sổ ngữ cảnh của AI — thông tin mà nó có thể suy luận cùng một lúc — bị hạn chế. Giữ cho cuộc trò chuyện mạch lạc:
Nên làm:
Bắt đầu cuộc trò chuyện mới cho các tính năng mới
Chỉ bao gồm các file liên quan khi hỏi về code cụ thể
Sử dụng các file quy tắc để duy trì ngữ cảnh dự án
Không nên làm:
Tiếp tục thêm vào một cuộc trò chuyện dài vô thời hạn
Bao gồm toàn bộ codebase khi sửa một chức năng
Bỏ qua khi các phản hồi bắt đầu trở nên kém hiệu quả (làm ô nhiễm ngữ cảnh)
Ô nhiễm ngữ cảnh là sự khó chịu phổ biến nhất trong Vibe coding. AI mắc lỗi ngay từ đầu cuộc trò chuyện, sau đó tham chiếu đến lỗi đó trong mọi phản hồi tiếp theo. Cách khắc phục: Bắt đầu một cuộc trò chuyện mới với ngữ cảnh rõ ràng.
Các mẫu prompt thường gặp
Mẫu
Khi nào nên sử dụng
Ví dụ
Xây dựng từ đầu
Khởi tạo tính năng mới
"Tạo trang cài đặt người dùng với..."
Sửa đổi hiện có
Thay đổi điều gì đó
"Cập nhật thành phần tiêu đề để bao gồm..."
Hãy sửa lỗi này
Gỡ lỗi
"Lỗi này xảy ra khi tôi nhấn nút gửi: [lỗi]. Đoạn code liên quan là: [code]"
Hãy giải thích điều này
Hiểu code lập trình của AI
"Hãy giải thích chức năng này làm gì và tại sao nó lại được cấu trúc như vậy"
Tái cấu trúc
Cải thiện code
"Cải tiến lại thành phần này để sử dụng React Server Components thay vì lấy dữ liệu phía máy khách"
Bài tập thực hành
Chọn một ý tưởng ứng dụng nhỏ (lưu công thức nấu ăn, theo dõi thói quen, quản lý dấu trang)
Viết một yêu cầu chi tiết bằng cách sử dụng danh sách kiểm tra độ cụ thể (cái gì, ở đâu, như thế nào, công nghệ, trường hợp ngoại lệ)
Xây dựng phiên bản đầu tiên với một yêu cầu
Sử dụng phương pháp tạo prompt từng bước để thêm 3 tính năng, mỗi lần một tính năng
Nếu có lỗi xảy ra, hãy bắt đầu một cuộc hội thoại mới thay vì tiếp tục
Những điểm chính cần ghi nhớ
Các yêu cầu cụ thể tạo ra code hoạt động — bao gồm cái gì, ở đâu, như thế nào, công nghệ và những trường hợp ngoại lệ
Phân lớp ngữ cảnh: mô tả dự án của bạn trước khi đưa ra yêu cầu
Tạo prompt từng bước: thêm từng tính năng một, kiểm tra giữa mỗi lần thêm
Nghiên cứu-Lập kế hoạch-Thực hiện: đối với những thay đổi phức tạp, hãy lập kế hoạch trước khi viết code
Bắt đầu các cuộc hội thoại mới khi ngữ cảnh bị suy giảm (ô nhiễm ngữ cảnh)
Thiết lập vai trò tập trung AI vào mức chất lượng bạn muốn
Câu 1:
Bạn đang xây dựng một tính năng phức tạp và đầu ra của AI ngày càng tệ hơn sau mỗi prompt. Điều gì có thể đang xảy ra?
GIẢI THÍCH:
Ô nhiễm ngữ cảnh xảy ra khi một lỗi AI ở đầu cuộc trò chuyện được kết hợp vào 'sự hiểu biết' của nó và ảnh hưởng đến tất cả các phản hồi tiếp theo. Cách khắc phục rất đơn giản: Bắt đầu một cuộc trò chuyện mới cho tính năng này, với ngữ cảnh sạch sẽ. Chỉ bao gồm các file liên quan và mô tả rõ ràng những gì bạn cần.
Câu 2:
Framework Nghiên cứu-Lập kế hoạch-Thực hiện là gì?
GIẢI THÍCH:
Nghiên cứu-Lập kế hoạch-Thực hiện ngăn AI thực hiện các thay đổi mà nó không hiểu. Nghiên cứu: AI khám phá codebase. Lập kế hoạch: Nó đề xuất các thay đổi để bạn xem xét. Thực hiện: Chỉ sau khi bạn phê duyệt kế hoạch, nó mới viết code. Điều này tránh được vấn đề phổ biến là AI làm hỏng mọi thứ bằng cách thực hiện các thay đổi mà không hiểu đầy đủ ngữ cảnh.
Câu 3:
Prompt nào sẽ tạo ra code tốt hơn?
GIẢI THÍCH:
Các prompt cụ thể sẽ tạo ra code cụ thể. Yêu cầu thứ hai cho AI biết chính xác những trường nào cần bao gồm, thư viện nào cần sử dụng, quy tắc xác thực nào cần áp dụng và cách hiển thị lỗi. AI không cần phải đoán — nó sẽ xây dựng chính xác những gì bạn đã mô tả.
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:
AI
Hướng dẫn AI
Claude
ChatGPT
Gemini
Thư viện Prompt
Công nghệ
Học IT
Tiện ích
AI
Copilot
Grok
n8n
Thư viện Prompt
Hướng dẫn AI
Công nghệ
Ứng dụng
Hệ thống
Game - Trò chơi
iPhone
Android
Làng Công nghệ
Học CNTT
Hàm Excel
Học Python
Download
Video
Cuộc sống
Khoa học