Vibe Code
Giáo trình/Phần 1 — Trang web đầu tiên

Nghệ thuật ra đề cho Claude

Công thức 5 phần, 7 câu thần chú, cách chữa khi nó đi sai hướng, và lý do "prompt dài" thường tệ hơn "prompt rõ".

Cấp 118 phút đọc

Đây là bài có tỉ lệ công sức bỏ ra / kết quả thu về cao nhất giáo trình. Cùng một mô hình AI, hai người ra đề khác nhau cho ra chất lượng lệch nhau vài lần. Không phải vì ai biết "câu lệnh bí mật" — mà vì một người nói rõ mình muốn gì, người kia thì không.

Công thức 5 phần

Mọi đề tốt đều có 5 phần này, theo đúng thứ tự:

(1) VIỆC      — làm gì, trên file nào
(2) RÀNG BUỘC — không được làm gì, phải giữ gì
(3) TIÊU CHÍ  — thế nào là xong, đo được
(4) BỐI CẢNH  — ai dùng, dùng ở đâu, trên máy gì
(5) ĐỊNH DẠNG — trả về cái gì, dài bao nhiêu

Ví dụ đủ 5 phần, dùng được ngay:

(1) Trong file index.html, thêm bộ lọc theo tháng cho bảng đơn hàng.

(2) Không thêm thư viện ngoài. Không đổi cấu trúc HTML đang có.
    Giữ nguyên hành vi hiện tại: mặc định hiện TẤT CẢ, không lọc.

(3) Xong khi: chọn một tháng thì bảng chỉ còn đơn trong tháng đó;
    chọn lại "Tất cả" thì về như cũ; số dòng hiện ra khớp với số
    ghi ở dòng tổng.

(4) Người dùng là nhân viên bán hàng, dùng trên điện thoại Android
    cũ, mạng 4G yếu.

(5) Trả về đúng các đoạn cần sửa kèm vị trí, không viết lại cả file.
    Giải thích tối đa 3 dòng.

So với câu "thêm bộ lọc tháng cho tôi", đề trên dài gấp 10 và tiết kiệm cho bạn 4 lượt sửa qua sửa lại.

Phần (2) là phần đáng tiền nhấtchuyên gia insight & case thực tế

Khi kèm người mới, tôi thấy ai cũng viết được (1). Rất ít người viết (2). Và gần như toàn bộ sự cố "AI làm vỡ app của tôi" đều nằm ở chỗ thiếu (2).

Lý do sâu xa: AI được huấn luyện để giúp đỡ, nên nó có xu hướng làm thêm. Bạn nhờ thêm bộ lọc, nó tiện tay "cải thiện" luôn bảng, đổi màu nút, gộp hai hàm. Mỗi cái một chút, ba tuần sau app của bạn là một mớ phong cách. Phần (2) là cái phanh.

Câu (2) tôi dùng nhiều nhất, viết thành phản xạ: "Giữ nguyên mọi hành vi hiện tại; chỉ thêm, không sửa cái đang chạy."

Bảy câu thần chú

Ngắn, dán vào cuối đề, hiệu quả ngay:

1. "Chỉ sửa phần cần sửa, không viết lại cả file." Chống mất công sức đã làm. Dùng trong 100% đề sửa file có sẵn.

2. "Trước khi sửa, nói cho tôi biết bạn định sửa ở đâu và vì sao, rồi chờ tôi đồng ý." Dùng khi việc rủi ro: đụng cơ sở dữ liệu, đụng đăng nhập, đụng thanh toán. Bạn đọc kế hoạch 5 dòng, phát hiện nó hiểu sai trước khi nó phá.

3. "Nếu có chỗ nào trong yêu cầu của tôi còn chưa rõ, hỏi lại trước khi làm. Đừng tự đoán." Câu này đổi hẳn hành vi. Không có nó, AI sẽ chọn một cách hiểu rồi lao đi.

4. "Dùng đúng màu, cỡ chữ, cách đặt tên đang có trong file. Không thêm phong cách mới." Giữ giao diện và mã nhất quán. Quan trọng từ file thứ hai trở đi.

5. "Liệt kê những gì có thể hỏng vì thay đổi này." Dùng sau khi nó làm xong, trước khi bạn deploy. Nó thường tự chỉ ra 1–2 chỗ bạn chưa nghĩ tới, và đó là danh sách test của bạn.

6. "Đừng khen, đừng mở đầu bằng lời tóm lại. Vào thẳng việc." Tiết kiệm thời gian đọc. Nghe nhỏ, nhưng nhân với 50 lượt mỗi ngày thì không nhỏ.

7. "Việc này tôi làm được bằng cách đơn giản hơn không?" Câu hỏi hay nhất của cả giáo trình. Rất nhiều lần câu trả lời là "có" — và bạn vừa tránh được 200 dòng mã phải nuôi suốt đời.

Ba kiểu đề sai, kèm cách chữa

Sai 1 — Đề to quá

"Làm cho tôi app quản lý kho."

Nó sẽ làm, ra một đống chạy được 60%, và bạn không biết 40% hỏng nằm ở đâu. Chữa: chia theo màn hình, mỗi lượt một màn hình; trong mỗi màn hình, mỗi lượt một việc.

Bước 1: chỉ màn hình danh sách hàng, dữ liệu mẫu gán cứng trong file.
        Chưa cần thêm/sửa/xóa, chưa cần đăng nhập.

Sai 2 — Đề toàn tính từ

"Làm giao diện đẹp, hiện đại, chuyên nghiệp."

"Đẹp" với mỗi mô hình là một kiểu — thường là gradient tím và bóng đổ. Chữa: đổi tính từ thành số và cấm.

Nền trắng #ffffff, chữ #16161a, một màu nhấn duy nhất #1f5f4b.
Không gradient, không bóng đổ, không bo góc quá 12px.
Tiêu đề 28px, chữ thường 16px, giãn dòng 1.65.
Khoảng cách giữa các mục 32px.

Sai 3 — Đề không nói ai dùng

"Thêm trang báo cáo."

Báo cáo cho giám đốc (xem trên máy tính, cần biểu đồ) và báo cáo cho nhân viên bán hàng (xem trên điện thoại ngoài đường, cần con số to) là hai sản phẩm khác nhau hoàn toàn. Chữa: luôn có một câu "người dùng là ai, dùng ở đâu".

Tôi từng nghĩ prompt càng dài càng tốtngười dùng bình thường góp ý

Tôi viết đề 1.500 chữ, gồm cả lịch sử công ty. Kết quả tệ hơn đề 150 chữ. Người dạy tôi giải thích bằng ví dụ dễ hiểu: như thuê thợ xây. Bạn nói "xây cho tôi cái bếp 3x4m, bồn rửa sát cửa sổ, ổ cắm bên phải bếp từ, ngân sách 40 triệu" — thợ làm đúng. Bạn kể 20 phút về gia đình mình rồi nói "xây cái bếp đẹp đẹp" — thợ làm theo ý thợ.

Rõ ≠ dài. Cái cần dài là ràng buộc, không phải tâm sự.

Khi nó đi sai hướng: dừng, đừng chữa

Phản xạ của người mới là gõ tiếp "không, ý tôi là...". Làm vậy 3 lượt là cuộc hội thoại thành một đống mâu thuẫn, và AI bắt đầu nhớ lẫn giữa yêu cầu cũ và mới.

Cách đúng:

  1. Bấm Esc để cắt nó ngay giữa lúc đang làm, không chờ hết.
  2. Nếu file đã bị sửa sai: lùi lại (git checkout -- . nếu đã có Git, hoặc Ctrl+Z trong VS Code).
  3. /clear để xóa ngữ cảnh.
  4. Viết lại đề từ đầu, lần này thêm đúng cái ràng buộc vừa thiếu.

Mỗi lần dừng–viết lại, bạn rẻ hơn 3 lượt chữa vá. Và lần sau bạn viết đề tốt hơn thật.

Đưa ngữ cảnh đúng cách, không dán cả filechuyên gia thực thi

Claude Code tự đọc được file — bạn chỉ cần trỏ đường, đừng dán nội dung.

Đọc src/app.js và content/bang-gia.json rồi trả lời: giá đang lấy từ đâu?

Trỏ đúng 2 file liên quan tốt hơn là mở cả project, vì ngữ cảnh càng gọn thì nó càng ít lạc.

Dùng dấu @ để chỉ file: @src/app.js. Và dùng ! để chạy lệnh ngay trong phiên: !wrangler --version.

Mẫu đề cho ba việc hay làm

Sửa lỗi:

Lỗi: bấm nút Lưu thì không có gì xảy ra, console báo
"Cannot read properties of null (reading 'value')".

Trước khi sửa: nói nguyên nhân gốc trong 2 dòng.
Rồi sửa ở chỗ nhỏ nhất có thể. Đừng tái cấu trúc.
Sau khi sửa: nói tôi cần bấm thử những gì để biết đã hết lỗi.

Thêm tính năng:

Thêm [tính năng] vào [file].
Giữ nguyên mọi hành vi hiện tại — mặc định phải giống như bây giờ.
Dùng đúng cách đặt tên và màu đang có.
Chỉ sửa phần cần sửa.
Xong rồi liệt kê những gì có thể hỏng vì thay đổi này.

Hiểu mã lạ:

Đọc [file] và giải thích cho người không chuyên:
dữ liệu vào từ đâu, biến đổi ở đâu, ra đâu.
Tối đa 10 dòng. Dùng tên biến thật trong file.
Chỉ đọc, không sửa gì.

Ba mẫu này cùng với mẫu ở Prompt mẫu phủ khoảng 80% việc hằng ngày.

Chốt review bài nàychuyên gia review
  • Đủ: công thức, thần chú, ba kiểu sai kèm cách chữa, quy trình khi sai hướng, 3 mẫu.
  • Thiếu có chủ ý: không dạy "prompt engineering" kiểu thuật ngữ (chain-of-thought, few-shot). Với việc dựng web, 5 phần + 7 câu trên ăn hết phần lợi.
  • Rủi ro: các câu thần chú giúp nhiều nhưng không thay được việc bạn tự đọc kết quả. Đề hay mấy mà không kiểm thì vẫn ra app sai lặng lẽ.
Bài tập chốt

Lấy đúng đề bạn đã dùng ở bài trước, viết lại cho đủ 5 phần. Chạy lại trên một thư mục mới. So hai kết quả: đếm số lượt bạn phải sửa lại ở mỗi bên. Con số đó là lý do học bài này.