Nếu bạn không code, prompt đầu tiên quyết định 60% chất lượng Artifact. Không phải vì có câu thần chú đặc biệt, mà vì Claude cần hiểu business flow trước khi dựng giao diện.

Sai lầm phổ biến là nói bằng ngôn ngữ framework:

Build a React dashboard with modern UI.

Bạn không cần nói vậy. Bạn cần nói: ai dùng dashboard, họ đang cố làm việc gì, họ nhập gì, họ cần thấy gì, khi thiếu dữ liệu thì màn hình ra sao, khi input sai thì app xử lý thế nào.

Nói cách khác: prompt đầu tiên nên là app brief, không phải lệnh gọi code.

App brief cần có gì

Một app brief tốt cho Claude Artifacts có 7 phần:

  1. User type: ai dùng app.
  2. Business goal: app giúp họ hoàn thành việc gì.
  3. Inputs: người dùng nhập hoặc chọn thông tin nào.
  4. Outputs: app trả về gì, hiển thị gì.
  5. States: loading, empty, error, success, invalid input.
  6. Constraints: không làm gì, không đổi gì, không giả định gì.
  7. Review mode: Claude phải restate behavior trước khi build.

Với non-tech user, phần “states” là thứ hay bị quên nhất. Một app demo nhìn đẹp với data mẫu chưa đủ. Bạn phải hỏi:

  • Nếu chưa có item nào thì hiện gì?
  • Nếu nhập thiếu số điện thoại thì sao?
  • Nếu số tiền âm thì có chặn không?
  • Nếu danh sách quá dài thì có filter không?
  • Mobile có dùng được không?

Những câu này không cần kiến thức lập trình. Chỉ cần bạn đóng vai người dùng thật.

Template dùng lại

Bạn có thể copy template này vào Claude:

Tôi muốn tạo một Claude Artifact dạng app demo.

User type:
- [Ai sẽ dùng app này? Vai trò của họ là gì?]

Business goal:
- [App giúp họ hoàn thành việc gì?]

Core flow:
1. [Bước 1 người dùng làm]
2. [Bước 2 người dùng làm]
3. [Kết quả họ cần thấy]

Inputs:
- [Field 1]
- [Field 2]
- [Dropdown hoặc lựa chọn]

Outputs:
- [Bảng, summary, checklist, báo giá, dashboard, file nháp]

States required:
- Empty state khi chưa có dữ liệu.
- Validation state khi nhập sai.
- Success state sau khi hoàn thành.
- Mobile layout dễ dùng.

Sample data:
- Dùng sample data thực tế nhưng ghi rõ đây là dữ liệu mẫu.
- Không bịa dữ liệu khách hàng thật.

Constraints:
- Đây chỉ là prototype trong Claude Artifacts.
- Không cần backend thật.
- Không cần login.
- Không dùng dữ liệu nhạy cảm.
- Không đổi scope nếu tôi chưa yêu cầu.

Before building:
- Hãy restate lại app behavior bằng bullet ngắn.
- Hỏi tối đa 5 câu nếu có điểm chưa rõ.
- Sau khi tôi xác nhận, mới build artifact.

Điểm quan trọng nằm ở dòng “Before building”. Đừng để Claude build ngay nếu brief còn mơ hồ. Bắt Claude nói lại app sẽ làm gì giúp bạn phát hiện hiểu sai sớm hơn.

Ví dụ 1: booking tracker

Prompt kém:

Create a booking management app.

Prompt tốt hơn:

Tôi muốn tạo một Claude Artifact dạng app demo cho nhân viên tư vấn tour.

User type:
- Nhân viên sales tour dùng mỗi ngày.

Business goal:
- Theo dõi booking đang tư vấn và biết khách nào cần follow-up hôm nay.

Core flow:
1. Nhập thông tin khách.
2. Chọn tour khách quan tâm.
3. Chọn trạng thái: mới, đang tư vấn, chờ cọc, đã cọc, hủy.
4. Nhập ngày cần gọi lại.
5. Xem danh sách khách cần follow-up.

Inputs:
- Tên khách.
- Số điện thoại.
- Tour quan tâm.
- Trạng thái.
- Ngày follow-up.
- Ghi chú ngắn.

Outputs:
- Bảng booking.
- Bộ lọc theo trạng thái.
- Danh sách "cần gọi hôm nay".
- Summary số booking theo trạng thái.

States required:
- Empty state khi chưa có booking.
- Báo lỗi nếu thiếu tên hoặc số điện thoại.
- Báo lỗi nếu ngày follow-up nằm trong quá khứ.
- Mobile layout phải dùng được bằng một tay.

Sample data:
- Dùng 5 booking mẫu, ghi rõ là sample data.

Constraints:
- Chỉ prototype, chưa cần database thật.
- Không cần login.
- Không cần payment.

Before building:
- Restate lại behavior trước, rồi hỏi nếu thiếu thông tin.

Đây không phải prompt dài cho vui. Nó giúp Claude không tự biến booking tracker thành hệ thống ERP du lịch.

Ví dụ 2: invoice helper

Tôi muốn tạo một Claude Artifact dạng invoice helper cho freelancer.

User type:
- Freelancer không rành kế toán, cần tạo nháp invoice nhanh.

Business goal:
- Nhập line items và xem tổng tiền trước khi gửi cho khách.

Inputs:
- Tên khách.
- Mô tả dịch vụ.
- Số lượng.
- Đơn giá.
- Thuế phần trăm, mặc định 0.
- Ghi chú thanh toán.

Outputs:
- Invoice preview rõ ràng.
- Tổng trước thuế.
- Thuế.
- Tổng cuối.
- Warning nếu thiếu tên khách hoặc line item.

Constraints:
- Đây là demo, không tạo hóa đơn pháp lý.
- Không lưu thông tin khách thật.
- Sample data phải đánh dấu là sample.
- Không cần export PDF trong version đầu.

Before building:
- Tóm tắt lại business flow bằng tiếng Việt đơn giản.

Ở đây constraint “không tạo hóa đơn pháp lý” rất quan trọng. Artifact có thể giúp bạn nháp, nhưng không thay kế toán, luật thuế, phần mềm hóa đơn điện tử.

Ví dụ 3: staff checklist

Tạo Claude Artifact cho checklist mở cửa quán cà phê.

User type:
- Nhân viên ca sáng.

Business goal:
- Đi từng bước để chuẩn bị mở cửa, không bỏ sót việc quan trọng.

Inputs:
- Tên nhân viên.
- Ngày làm việc.
- Tick từng hạng mục.
- Ghi chú nếu có sự cố.

Outputs:
- Checklist theo nhóm: vệ sinh, máy móc, nguyên liệu, quầy thu ngân.
- Progress bar.
- Summary cuối ca: việc đã xong, việc còn thiếu, ghi chú sự cố.

States:
- Empty note được chấp nhận.
- Không cho bấm "Hoàn tất" nếu còn item bắt buộc chưa tick.
- Mobile-first vì nhân viên dùng điện thoại.

Constraints:
- Không cần account.
- Không lưu dữ liệu thật.
- Không thêm tính năng quản lý ca nếu chưa hỏi.

Before building:
- Restate flow và các item checklist dự kiến.

Prompt này dạy Claude điều quan trọng nhất: app này phục vụ người đứng ở quầy, dùng điện thoại, cần nhanh, không cần dashboard màu mè.

Follow-up không làm rewrite cả app

Sau khi có artifact, đừng prompt kiểu:

Make it better.

Dùng follow-up hẹp:

Giữ toàn bộ logic hiện tại.
Chỉ sửa phần mobile layout:
- Form input xếp một cột.
- Nút submit luôn nằm dưới form.
- Bảng chuyển thành card list trên màn hình nhỏ.
- Không đổi màu, không đổi field, không đổi sample data.

Hoặc:

Không rewrite toàn bộ artifact.
Chỉ thêm validation:
- Số điện thoại bắt buộc có ít nhất 8 ký tự.
- Nếu thiếu số điện thoại, hiện lỗi dưới field.
- Không dùng alert.

Câu “không rewrite toàn bộ artifact” không đảm bảo tuyệt đối, nhưng giúp kéo Claude về scope. Sau mỗi vòng sửa, bạn cần kiểm lại chức năng cũ. Nếu sửa mobile làm hỏng desktop, đó vẫn là bug.

Sample data phải ghi rõ là sample

Vibe coding rất dễ tự lừa mình ở data. Một bảng có 12 khách hàng mẫu nhìn giống app thật. Nhưng nó chưa chứng minh gì về data thật, quyền truy cập, duplicate, import, export, hay bảo mật.

Trong prompt, luôn ghi:

Dùng realistic sample data, nhưng label rõ "Dữ liệu mẫu".
Không dùng tên khách hàng thật, số điện thoại thật, email thật.

Nếu bạn cần demo cho team, càng phải rõ. Người xem không nên nhầm dữ liệu mẫu với báo cáo thật.

Chốt lại

Prompt tốt cho Claude Artifacts không cần technical. Nó cần business flow rõ. Bạn nói người dùng là ai, họ làm gì, nhập gì, nhận gì, app cần xử lý trạng thái nào, và giới hạn nào không được vượt. Claude có thể viết code, nhưng bạn phải giữ product judgment.

Tham khảo