Mục tiêu

Biết cách yêu cầu AI thêm chức năng (feature) vào app đang có, sử dụng kỹ thuật “bẻ nhỏ” yêu cầu để AI không bị rối.

Sau bài này, bạn sẽ:

• ✅ Áp dụng quy tắc “Một lần một việc” khi thêm tính năng
• ✅ Biết cách bẻ nhỏ yêu cầu lớn thành các bước nhỏ cho AI
• ✅ Giữ được “trí nhớ” AI khi chat dài — tránh bị mất tính năng cũ

Nội dung chính

4.1 — Quy tắc vàng: Một lần một việc

Đây là sai lầm phổ biến nhất:

❌ SAI: "Thêm cho tôi đăng nhập, giỏ hàng, thanh toán, chat hỗ trợ,
         thông báo đẩy, bản đồ, và dark mode."

✅ ĐÚNG: "Thêm chức năng đăng nhập bằng email và mật khẩu.
          Gồm 2 trang: trang Đăng nhập và trang Đăng ký.
          Sau khi đăng nhập thành công, chuyển về trang chủ."

Ẩn dụ “Xếp gạch”: Xây nhà không ai đổ hết gạch lên cùng lúc rồi bảo thợ xây. Bạn xây từng bức tường, xong bức này mới sang bức kia. Vibe Coding cũng vậy — mỗi prompt chỉ nên yêu cầu 1-2 tính năng.

Mẹo: Trước khi gõ prompt thêm tính năng, hãy tự hỏi: “Nếu AI làm sai tính năng này, tôi có dễ phát hiện không?” Nếu prompt có quá nhiều thứ, bạn sẽ không biết cái nào sai. Một lần một việc = dễ kiểm tra.

4.2 — Bẻ nhỏ tính năng: Ví dụ thực tế

Mục tiêu: Thêm chức năng quản lý danh sách liên hệ vào app.

Bẻ nhỏ thành 4 bước với prompt đầy đủ:

Bước 1 — Tạo form nhập liệu:

Thêm form nhập liên hệ mới vào trang chính.

Form gồm 3 trường:
- Họ tên (text input, bắt buộc)
- Số điện thoại (text input, bắt buộc, chỉ nhận số)
- Email (email input, không bắt buộc)

Có nút "Lưu liên hệ" màu xanh dương.
Khi bấm Lưu:
- Kiểm tra Họ tên và SĐT không được để trống
- Nếu trống thì hiện thông báo đỏ "Vui lòng nhập đầy đủ"
- Nếu đủ thì hiện thông tin bên dưới form dạng card

Giao diện form: nền trắng, bo tròn, shadow nhẹ, padding 20px.

→ Kiểm tra: Form hoạt động đúng? Hiện thông tin khi bấm Lưu?

Bước 2 — Hiển thị danh sách:

Hiển thị tất cả liên hệ đã lưu dạng bảng (table) bên dưới form.

Mỗi hàng gồm: Họ tên | SĐT | Email | nút Xóa (icon 🗑️)
Khi bấm Xóa: hiện popup xác nhận "Bạn có chắc muốn xóa?" → OK thì xóa
Bảng có header cố định, zebra striping (hàng chẵn/lẻ xen kẽ màu)
Nếu chưa có liên hệ nào: hiện text "Chưa có liên hệ nào. Hãy thêm liên hệ đầu tiên!"

→ Kiểm tra: Danh sách hiện đúng? Nút Xóa hoạt động?

Bước 3 — Thêm tìm kiếm:

Thêm chức năng tìm kiếm: một ô input phía trên bảng,
khi gõ tên thì lọc danh sách real-time.

Chi tiết:
- Placeholder: "🔍 Tìm kiếm theo tên..."
- Lọc ngay khi gõ (không cần bấm nút)
- Không phân biệt hoa/thường
- Nếu không tìm thấy: hiện "Không có kết quả phù hợp"

→ Kiểm tra: Gõ tên có lọc đúng không? Xóa ô tìm kiếm có hiện lại tất cả không?

Bước 4 — Thêm chức năng sửa:

Thêm chức năng sửa liên hệ:

- Mỗi hàng trong bảng thêm nút "Sửa" (icon ✏️) bên cạnh nút Xóa
- Khi bấm Sửa: thông tin liên hệ điền ngược vào form phía trên
- Nút "Lưu liên hệ" đổi thành "Cập nhật" (màu cam)
- Khi bấm Cập nhật: lưu thay đổi, nút đổi lại thành "Lưu liên hệ"
- Thêm nút "Hủy" bên cạnh nút Cập nhật để hủy việc sửa

→ Kiểm tra: Sửa xong có cập nhật đúng trong bảng không? Nút Hủy có hoạt động?

Sau mỗi bước, kiểm tra app chạy đúng chưa rồi mới tiếp bước sau.

4.3 — Kỹ thuật giữ “Trí nhớ” cho AI

Trong Bolt.new và Lovable, AI nhớ toàn bộ cuộc hội thoại. Nhưng nếu hội thoại quá dài, AI bắt đầu “quên”. Mẹo:

Mẹo “Tóm tắt lại”: Khi chat đã dài hơn 15-20 tin nhắn, hãy gửi 1 prompt tổng hợp:

Tóm tắt lại app hiện tại của tôi:
- App quản lý liên hệ
- Có form nhập: Tên, SĐT, Email
- Có bảng hiển thị danh sách
- Có tìm kiếm real-time
- Có chức năng sửa và xóa

Bây giờ, thêm cho tôi: chức năng xuất danh sách ra file Excel.

Mẹo: Nếu bạn thấy tính năng cũ bị mất sau khi thêm tính năng mới, đó là dấu hiệu AI đã “quên”. Hãy dùng ngay kỹ thuật tóm tắt lại ở trên, liệt kê tất cả tính năng hiện có + tính năng bị mất, yêu cầu AI khôi phục.

Lỗi thường gặp

Vấn đề: Tính năng mới phá tính năng cũ — thêm tìm kiếm xong thì nút Xóa không hoạt động nữa. → Sau mỗi bước thêm tính năng, kiểm tra lại TẤT CẢ tính năng cũ (không chỉ tính năng mới). Nếu bị hỏng, gửi prompt: “Tính năng Xóa liên hệ bị hỏng sau khi thêm tìm kiếm. Hãy sửa lại nút Xóa nhưng giữ nguyên chức năng tìm kiếm.”

Vấn đề: AI thêm tính năng nhưng giao diện bị xấu đi — mất padding, font thay đổi. → Thêm dòng cuối mỗi prompt thêm tính năng: “Giữ nguyên toàn bộ giao diện hiện tại. Chỉ thêm phần mới, không thay đổi style các phần đã có.”

Vấn đề: Yêu cầu lưu dữ liệu nhưng khi tải lại trang thì mất hết. → Thêm prompt: “Lưu tất cả dữ liệu vào localStorage của trình duyệt. Khi tải lại trang, dữ liệu phải còn nguyên.” (localStorage = bộ nhớ trình duyệt, không cần server)

Vấn đề: Chat quá dài, AI bắt đầu tạo ra code lỗi liên tục. → Mở conversation mới, tóm tắt lại toàn bộ app (liệt kê tất cả tính năng), paste lại và tiếp tục từ đó.

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

Nhiệm vụ: Chọn app đã tạo ở các bài trước, thêm 3 tính năng mới bằng kỹ thuật “bẻ nhỏ”. Mỗi tính năng = 1 prompt riêng.

Gợi ý tính năng (chọn 3):

• Dark mode — chế độ tối, có nút toggle sáng/tối (⏱️ ~5 phút)
• Lưu dữ liệu vào localStorage — dữ liệu không mất khi tải lại trang (⏱️ ~3 phút)
• Hiệu ứng animation — khi thêm/xóa item có hiệu ứng fade hoặc slide (⏱️ ~3 phút)
• Xuất dữ liệu — nút tải xuống danh sách dạng file .txt hoặc .csv (⏱️ ~5 phút)
• Bộ đếm thống kê — hiện tổng số item, số item hôm nay (⏱️ ~3 phút)

Tiêu chí thành công:

• ✅ Mỗi tính năng hoạt động đúng sau khi thêm
• ✅ Tính năng cũ vẫn hoạt động sau khi thêm tính năng mới
• ✅ Bạn kiểm tra sau mỗi bước trước khi tiếp tục

Gợi ý nếu bị stuck:

• Nếu tính năng cũ bị hỏng: dùng prompt tóm tắt lại + yêu cầu khôi phục
• Nếu AI không hiểu: thử mô tả lại bằng cách khác, cụ thể hơn

Thời gian: 20 phút Deliverable: App có 3 tính năng mới, kèm screenshot mỗi bước

Tổng kết bài 4