Tạo prompt: Kỹ năng Vibe Coding cốt lõi

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

Bài tập thực hành

1. 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)

2. 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ệ)

3. Xây dựng phiên bản đầu tiên với một yêu cầu

4. 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

5. 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