Artifacts Nâng Cao: Dựng Dashboard, Mini App Trong Claude

Mình từng nghĩ Artifacts chỉ để xem trước một đoạn code cho gọn. Tới lúc thử yêu cầu dựng hẳn một dashboard theo dõi chi tiêu cá nhân, gõ mô tả xong Claude ra một công cụ chạy được thật ngay trong khung chat, mới thấy Artifacts mạnh hơn nhiều so với tưởng tượng ban đầu.

Artifacts là gì

Là khung xem trước tương tác được, hiển thị song song với cuộc trò chuyện, cho phép Claude dựng ra kết quả chạy được thật, như trang web, biểu đồ, form nhập liệu, mini game, thay vì chỉ trả về đoạn code tĩnh để bạn tự copy đi chạy nơi khác.

📌 Chưa chắc nên chọn gì? Đọc trước Học AI: Dùng Claude, ChatGPT, Gemini Đúng Việc — hướng dẫn tổng hợp của Kudomax về học ai.

Artifacts thường tự xuất hiện khi kết quả là một khối nội dung hoàn chỉnh như trang web hay đoạn code dài, nhưng bạn cũng có thể yêu cầu thẳng: "dựng thành một artifact chạy được". Bản dựng nằm ở khung riêng cạnh cuộc trò chuyện, bấm vào là dùng thử ngay, và mỗi lần bạn góp ý thì Claude cập nhật phiên bản mới ngay trong khung đó.

Những gì dựng được tốt

• Dashboard trực quan hoá dữ liệu: dán số liệu thô vào, mô tả loại biểu đồ muốn xem, Claude dựng giao diện hiển thị ngay.
• Form và công cụ tính toán nhỏ: máy tính chi phí, form khảo sát nội bộ, công cụ chuyển đổi đơn vị theo nhu cầu riêng.
• Bản nháp giao diện: dựng nhanh một layout để hình dung trước khi giao cho lập trình viên làm bản chính thức.
• Trò chơi hoặc công cụ tương tác đơn giản: không thay được sản phẩm phức tạp, nhưng đủ cho việc demo ý tưởng hay giải trí nhẹ.

Các bước dựng dashboard từ số liệu thật

Lấy ví dụ dashboard chi tiêu cá nhân mình nhắc ở đầu bài, các bước như sau:

• Chuẩn bị dữ liệu dạng bảng: xuất file từ app ngân hàng hoặc gom về ba cột đơn giản gồm ngày, nhóm chi, số tiền. Dữ liệu càng có cấu trúc, kết quả càng chuẩn.
• Dán dữ liệu vào chat kèm mô tả rõ bạn muốn nhìn thấy gì, xem prompt mẫu ngay bên dưới.
• Xem bản đầu tiên rồi góp ý từng phần một: đổi loại biểu đồ, thêm bộ lọc, sửa màu. Mỗi lần một yêu cầu nhỏ.
• Ưng rồi thì publish thành đường dẫn chia sẻ, mở được trên điện thoại hoặc gửi cho người khác dùng thử.

Prompt mẫu, bạn sửa lại theo dữ liệu của mình:

Đây là chi tiêu 3 tháng của mình, mỗi dòng gồm: ngày, nhóm chi, số tiền.
Dựng dashboard có: tổng chi theo tháng (biểu đồ cột), tỷ trọng theo nhóm
(biểu đồ tròn), bảng 10 khoản chi lớn nhất. Thêm bộ lọc theo tháng.
Nhãn và số liệu hiển thị bằng tiếng Việt.

Mẹo để ra kết quả tốt hơn

• Mô tả kết quả muốn thấy, đừng mô tả cách code: "biểu đồ cột theo tháng, cột cao nhất đổi màu" cho kết quả tốt hơn "dùng thư viện X để vẽ chart".
• Đưa dữ liệu thật thay vì để Claude tự chế dữ liệu mẫu, vì bố cục hợp lý hay không phụ thuộc vào hình dạng dữ liệu thật của bạn.
• Nói rõ ngôn ngữ hiển thị: không dặn thì nhãn biểu đồ hay rơi về tiếng Anh.
• Yêu cầu giao diện xem tốt trên điện thoại ngay từ đầu nếu bạn chủ yếu mở bằng điện thoại, sửa sau mất công hơn.
• Sửa từng phần thay vì bảo "làm lại toàn bộ cho đẹp hơn", vì làm lại từ đầu dễ mất luôn những phần bạn đã ưng.

Giới hạn cần biết

Artifacts hợp cho công cụ dùng cá nhân hoặc demo nhanh, không phải nền tảng để xây sản phẩm sản xuất có nhiều người dùng thật cùng lúc. Việc cần lưu dữ liệu lâu dài, xử lý lượng truy cập lớn, hay tích hợp hệ thống thanh toán vẫn cần một đội ngũ phát triển làm bài bản, không nên dừng lại ở bản Artifacts.

Về kỹ thuật, artifact chạy trong môi trường bị giới hạn của trình duyệt: không tự do gọi API bên ngoài, và dữ liệu nhập vào thường lưu ngay trên máy người đang mở chứ không có database dùng chung theo mặc định. Nghĩa là dashboard bạn gửi cho bạn bè, mỗi người nhập số liệu sẽ thấy số liệu của riêng họ, không gộp chung về một chỗ.

Lỗi hay gặp

• Dán vài chục nghìn dòng dữ liệu thô: vượt sức chứa ngữ cảnh, vừa chậm vừa dễ lỗi. Gộp trước theo tháng hoặc theo nhóm rồi hãy dán.
• Yêu cầu kiểu "làm một dashboard đẹp": mô tả mơ hồ cho ra kết quả chung chung. Liệt kê đúng những con số bạn muốn nhìn thấy mỗi sáng.
• Không kiểm tra lại số: biểu đồ dựng nhanh có thể cộng nhóm sai hoặc bỏ sót dòng lỗi định dạng. Đối chiếu vài con số với file gốc trước khi tin.
• Kỳ vọng nhiều người cùng nhập liệu về một chỗ: đó là bài toán của ứng dụng có backend, vượt khỏi phạm vi một artifact thông thường.

Khi nào ở lại Artifacts, khi nào chuyển Claude Code

Ranh giới nằm ở số người dùng và nhu cầu lưu dữ liệu. Chốt nhanh:

• Ở lại Artifacts nếu: công cụ cho một người hoặc nhóm nhỏ xem, dữ liệu vừa phải, không cần đăng nhập hay thanh toán, cần ra kết quả trong một buổi.
• Chuyển Claude Code nếu: nhiều người dùng thật cùng lúc, cần database lưu lâu dài, cần tên miền riêng và theo dõi vận hành, hoặc cần nối với các hệ thống khác.

Nếu ý tưởng trong Artifacts đã chứng minh được giá trị và cần phát triển thành ứng dụng thật, đây là lúc chuyển sang Claude Code. Bài chọn đúng công cụ trong bộ tứ Claude giúp bạn định vị chặng chuyển này cho đúng lúc.

Còn nếu team bạn dựng đi dựng lại cùng một kiểu báo cáo, đưa hướng dẫn định dạng và dữ liệu nền vào một Project chung theo cách trong bài Claude Projects: gom tri thức dùng chung cho cả team, để artifact lần sau dựng ra giống chuẩn lần trước.

Bước tiếp theo

Xuất file chi tiêu hoặc số liệu bán hàng tháng trước của chính bạn, dùng prompt mẫu ở trên và dành mười lăm phút dựng bản dashboard đầu tiên. Đừng khởi động bằng dự án hoành tráng cho công ty: công cụ nhỏ phục vụ đúng một thói quen mỗi sáng mới là thứ khiến bạn thật sự hiểu Artifacts làm được gì và dừng ở đâu.