Nếu bạn không code, Claude Artifacts là nơi an toàn nhất để bắt đầu vibe coding. Không cần mở terminal. Không cần hiểu React. Không cần tạo repo. Bạn mô tả một công cụ nhỏ, Claude dựng ra một phiên bản có thể nhìn, bấm, thử, sửa ngay trong khung chat.

Điểm quan trọng là phải gọi đúng tên việc đang làm: đây là prototype. Nó giúp bạn kiểm tra ý tưởng, workflow, màn hình, input, output, trạng thái lỗi. Nó chưa tự động trở thành sản phẩm production có auth, database, backup, permission, monitoring và người chịu trách nhiệm vận hành.

Với non-tech user, giá trị lớn nhất của Artifacts không phải là “AI viết code thay tôi”. Giá trị thật là: bạn nhìn thấy ý tưởng của mình chạy được trong một buổi, rồi dùng nó để nói chuyện rõ hơn với khách hàng, team, dev hoặc agent coding ở bước sau.

Artifacts là gì theo cách dễ hiểu

Artifact là một mảnh nội dung lớn, tự đứng được, hiện ở một cửa sổ riêng bên cạnh chat. Nó có thể là tài liệu, diagram, website một trang, dashboard mock, tool tính toán, form intake, checklist tương tác hoặc một mini app.

Trong vibe coding, bạn có thể coi Artifact là cái bàn thử nghiệm. Bạn mô tả vấn đề kinh doanh bằng ngôn ngữ bình thường. Claude biến mô tả đó thành thứ có thể dùng thử. Sau đó bạn phản hồi theo hành vi nhìn thấy:

  • Nút này chưa rõ.
  • Form này thiếu trường số điện thoại.
  • Mobile bị dài quá.
  • Khi chưa có dữ liệu thì nên hiện empty state.
  • Nếu nhập sai email thì phải báo lỗi trước khi submit.

Bạn không cần nói “dùng framework gì”. Bạn cũng không cần tranh luận state management. Ở tầng này, bạn cần kiểm tra app có làm đúng việc cần làm hay không.

Bắt đầu từ vấn đề, không bắt đầu từ code

Prompt yếu nhất là kiểu:

Build me a CRM app.

Nghe có vẻ rõ, nhưng thật ra quá rộng. CRM của sales bất động sản khác CRM của phòng khám, khác CRM cho lớp học, khác CRM cho freelance designer. Claude sẽ phải tự đoán.

Prompt tốt hơn:

Tôi cần một tool demo cho nhân viên tư vấn khóa học.

Mục tiêu:
- Nhập thông tin học viên tiềm năng.
- Chọn khóa học phù hợp.
- Ghi trạng thái follow-up.
- Xem danh sách người cần gọi lại hôm nay.

Đây chỉ là prototype trong Claude Artifacts, dùng sample data rõ ràng, chưa cần backend thật.
Hãy hỏi lại các điểm chưa rõ trước khi build.

Cách viết này kéo Claude về bài toán thật. Bạn nói ai dùng, dùng để làm gì, input nào cần có, output nào cần nhìn thấy. Code chỉ là phương tiện.

Những app đầu tiên nên nhỏ và rõ

Đừng bắt đầu bằng “làm giúp tôi một SaaS đầy đủ”. Hãy bắt đầu bằng tool nhỏ có thể test bằng mắt trong 15 phút.

Một vài kiểu hợp với Claude Artifacts:

  • Calculator: tính giá tour, phí dịch vụ, commission, chi phí nhập hàng.
  • Checklist: onboarding nhân viên, kiểm tra hồ sơ, chuẩn bị sự kiện.
  • Dashboard mock: KPI tuần, pipeline khách hàng, tình trạng đơn hàng.
  • Intake form: form nhận yêu cầu thiết kế, booking, tư vấn, bảo hành.
  • Learning game: flashcard, quiz, trò luyện từ vựng.
  • Quote generator: tạo báo giá sơ bộ từ vài lựa chọn.

Điểm chung: input rõ, output rõ, ít phụ thuộc hệ thống ngoài. Nếu app cần login, database thật, thanh toán, phân quyền, gửi email hàng loạt, bạn vẫn có thể mock workflow để hiểu màn hình, nhưng đừng gọi đó là sản phẩm đã ship.

Sửa bằng hành vi nhìn thấy

Non-tech user hay mắc lỗi là phản hồi quá chung:

Làm đẹp hơn.

Claude có thể sửa màu, font, spacing, layout theo một hướng bạn không muốn. Phản hồi tốt hơn là nói hành vi cụ thể:

Giữ layout hiện tại.
Chỉ sửa phần form:
- Đưa trường ngày hẹn lên ngay dưới tên khách.
- Thêm validation: ngày hẹn không được nằm trong quá khứ.
- Khi submit thành công, hiện summary bên phải thay vì alert.
- Không đổi bảng danh sách bên dưới.

Bạn đang làm product review, không phải học code. Nhìn artifact, dùng thử flow chính, chụp lỗi bằng chữ thật rõ. Mỗi vòng chỉ nên sửa một nhóm vấn đề. Nếu bạn gom 20 yêu cầu trong một prompt, khả năng Claude sửa lan sang chỗ khác tăng lên.

Khi Artifact báo lỗi

Claude Artifacts có thể lỗi. Nút không chạy, màn hình trắng, component crash, preview không hiện đúng. Khi thấy thông báo lỗi, đừng tự đoán.

Nếu giao diện có nút “Try fixing with Claude”, dùng nó. Nút này giúp đưa chi tiết lỗi về lại Claude để Claude có cơ hội sửa đúng chỗ. Nhưng đừng xem đây là phép màu. Sau khi Claude sửa, bạn vẫn phải test lại flow từ đầu:

  • Mở lại app.
  • Nhập dữ liệu mẫu.
  • Bấm các nút chính.
  • Thử empty state.
  • Thử input sai.
  • Thử mobile nếu app dành cho điện thoại.

Một lỗi được sửa không có nghĩa toàn bộ app ổn. Vibe coding có kiểm soát nghĩa là bạn luôn kiểm bằng hành vi thật, không tin câu “I fixed it” nếu chưa dùng thử.

Share và download không phải deploy production

Artifacts có thể được chia sẻ hoặc download tùy loại nội dung và plan hiện tại của Claude. Product behavior có thể thay đổi theo thời gian, nên khi viết tài liệu nội bộ cho team, hãy ghi rõ bạn test trên ngày nào và plan nào.

Điểm cần nhớ: chia sẻ một Artifact không giống deploy một sản phẩm.

Một app production cần nhiều thứ Artifacts không tự giải quyết thay bạn:

  • Ai được truy cập?
  • Data lưu ở đâu?
  • Có backup không?
  • User khác có thấy data của nhau không?
  • Có log lỗi không?
  • Có ai chịu trách nhiệm sửa khi hỏng không?
  • Có quy trình rollback không?

Artifacts rất tốt để chứng minh workflow. Ví dụ: “nhân viên tư vấn cần thấy danh sách follow-up theo ngày, có màu cảnh báo cho lead quá hạn, và có form cập nhật trạng thái”. Khi dev nhìn vào prototype đó, họ hiểu requirement nhanh hơn nhiều so với đọc một đoạn mô tả mơ hồ.

Một workflow một buổi

Nếu chỉ có nửa ngày, làm như sau:

  1. Viết problem trong 10 phút: ai dùng, việc chính, input, output, giới hạn.
  2. Nhờ Claude hỏi lại trước khi build.
  3. Chốt phạm vi version đầu: một flow chính, sample data, không backend.
  4. Build Artifact.
  5. Dùng thử như người dùng thật.
  6. Sửa tối đa 3 vòng, mỗi vòng một nhóm lỗi.
  7. Chụp screenshot hoặc ghi lại điều còn sai.
  8. Tạo handoff note cho dev hoặc agent tiếp theo.

Handoff note nên ngắn:

Prototype goal:
- Tool giúp nhân viên tư vấn theo dõi khách cần gọi lại.

Works:
- Form nhập lead.
- Danh sách follow-up.
- Filter theo trạng thái.

Still missing:
- Data thật từ CRM.
- Auth và phân quyền.
- Export CSV.

Do not assume:
- Sample data trong Artifact là data thật.
- UI hiện tại đã đạt production quality.

Chốt lại

Claude Artifacts là bề mặt tốt nhất để non-tech user bắt đầu vibe coding vì rủi ro thấp, feedback nhanh, không đòi hỏi repo thật. Dùng nó để làm rõ workflow, test màn hình, chuẩn bị handoff. Đừng dùng nó để tự thuyết phục rằng sản phẩm đã sẵn sàng production.

Tham khảo