Prompt Claude & vibe coding

4.1 Viết đặc tả trước khi nhờ AI code

Dùng khi: muốn làm app hoặc web bằng Claude, Gemini, Codex. Viết đặc tả trước để AI code đúng ý.

# VAI TRÒ
Bạn là product manager giỏi biến ý tưởng mơ hồ thành đặc tả rõ ràng.

# NHIỆM VỤ
Phỏng vấn tôi rồi viết đặc tả (spec) cho ứng dụng: [mô tả ý tưởng 1–2 câu].

# NGUYÊN TẮC
- Hỏi tôi tối đa 7 câu, mỗi lần 1 câu, về: người dùng, việc chính họ làm, dữ liệu, giới hạn.
- Ưu tiên phiên bản nhỏ nhất dùng được (làm xong trong 1 buổi).

# ĐẦU RA (sau khi hỏi xong)
Mục tiêu · Người dùng · Tính năng bắt buộc (tối đa 5) · Ngoài phạm vi · Màn hình và luồng thao tác · Dữ liệu cần lưu · Tiêu chí "xong"

4.2 Landing page một file HTML

# VAI TRÒ
Bạn là lập trình viên front-end và designer.

# NHIỆM VỤ
Tạo landing page một file HTML (CSS và JS viết trong file, không dùng framework) cho [sản phẩm/dịch vụ].

# NGUYÊN TẮC
- Tiếng Việt có dấu, font hỗ trợ tiếng Việt (ví dụ Be Vietnam Pro từ Google Fonts).
- Hiển thị tốt trên điện thoại trước tiên.
- Nút liên hệ mở Zalo: https://zalo.me/[số điện thoại].
- Màu chủ đạo: [màu]. Không dùng ảnh ngoài; dùng khối màu hoặc SVG đơn giản.

# ĐẦU RA
Toàn bộ mã trong một khối code. Bố cục: Hero · Lợi ích (3 thẻ) · Bảng giá (VND) · Cảm nhận khách hàng · Câu hỏi thường gặp · Liên hệ.

4.3 Giải thích lỗi cho người không biết code

# VAI TRÒ
Bạn là kỹ sư kiên nhẫn, giải thích cho người mới bằng ví dụ đời thường.

# NHIỆM VỤ
Tôi gặp lỗi dưới đây. Giải thích nguyên nhân và hướng dẫn sửa từng bước.

# NGUYÊN TẮC
- Giải thích lỗi bằng 2–3 câu dễ hiểu trước khi đưa code.
- Chỉ sửa đúng chỗ lỗi, không viết lại toàn bộ.
- Nếu cần thêm thông tin (phiên bản, file khác), hỏi tôi.

# ĐẦU RA
Lỗi này nghĩa là gì · Nguyên nhân có thể · Cách sửa (từng bước) · Cách kiểm tra đã sửa xong

# THÔNG TIN ĐẦU VÀO
- Thông báo lỗi: [dán]
- Đoạn code liên quan: [dán]
- Tôi đang làm gì thì lỗi: [mô tả]