Sử dụng Artifacts trong Claude

Cách dùng Artifacts trong Claude để tạo code và tài liệu tương tác. Hướng dẫn kích hoạt cửa sổ riêng, chỉnh sửa trực tiếp và tối ưu workflow sáng tạo.

Định nghĩa

Artifacts là tính năng độc quyền của Claude hiển thị nội dung phức tạp — như code, tài liệu dài, hoặc hình ảnh SVG — trong một cửa sổ riêng biệt bên phải giao diện chat. Thay vì nhét mọi thứ vào dòng chat, Artifacts tạo không gian làm việc tương tác nơi bạn có thể xem trước, chỉnh sửa và sao chép nội dung mà không làm rối lịch sử cuộc trò chuyện.

Giải thích chi tiết

Khi nào Claude tạo Artifacts

Claude tự động kích hoạt Artifacts khi phát hiện nội dung phù hợp, nhưng bạn cũng có thể yêu cầu trực tiếp. Các trường hợp phổ biến:

Code block dài: Python, JavaScript, HTML, React components vượt quá vài dòng
Tài liệu có cấu trúc: Bài viết Markdown, bản phân tích SWOT, kế hoạch dự án
Nội dung trực quan: SVG, biểu đồ Mermaid, file HTML có thể preview
Tài liệu cần lặp lại: Email template, prompt template, cấu trúc dữ liệu JSON

Khi kích hoạt, nội dung sẽ xuất hiện ở panel bên phải, còn conversation tiếp tục bên trái.

Cách tương tác với Artifacts

Artifacts không chỉ để xem — nó là môi trường làm việc thực sự:

Chỉnh sửa trực tiếp: Click vào nội dung trong Artifacts, sửa lỗi hoặc điều chỉnh, sau đó yêu cầu Claude "dựa trên bản sửa này, hãy..."
Preview động: Với HTML/React, Claude chạy preview ngay trong cửa sổ; với SVG, bạn xem hình ảnh render thực tế
Lịch sử phiên bản: Mỗi lần Claude cập nhật Artifacts, bạn có thể xem lại các phiên bản trước bằng cách click vào nút lịch sử ở góc trên
Xuất nhanh: Nút Copy hoặc Download ở góc phải trên cho phép lấy nội dung sạch sẽ không kèm giải thích

Prompt để tối ưu Artifacts

Để buộc Claude dùng Artifacts thay vì trả lời thường, thêm vào prompt:

Hãy trình bày kết quả trong một Artifact để tôi dễ chỉnh sửa và sao chép.

Hoặc với code:

Tạo một React component hiển thị bảng dữ liệu, đặt trong Artifacts để tôi có thể xem preview và sửa trực tiếp.

Ví dụ thực tế

Tạo dashboard HTML đơn giản

Bạn cần một trang dashboard để theo dõi thói quen hàng ngày. Thay vì nhận đoạn code chìm trong chat, bạn prompt:

Tạo một file HTML đơn giản có 3 checkbox cho: Tập thể dục, Đọc sách, Uống đủ nước. 
Giao diện đẹp dùng Tailwind CSS. Đặt trong Artifacts để tôi xem trước.

Claude sẽ tạo Artifacts chứa code HTML và preview trực tiếp. Bạn thấy checkbox lệch? Click vào code sửa lại class, rồi bảo Claude: "Đã sửa padding, hãy cập nhật và thêm hiệu ứng hover."

Viết bài blog kỹ thuật dài

Khi viết bài hướng dẫn dài 2000 từ về "Cách tối ưu Prompt cho Claude", bạn yêu cầu:

Viết bài hướng dẫn đầy đủ với tiêu đề, các mục H2, bullet points. 
Đặt toàn bộ trong Artifacts để tôi chỉnh sửa cấu trúc trước khi xuất ra Markdown.

Bạn sẽ nhận được tài liệu có định dạng rõ ràng trong panel phải. Có thể click vào sửa tiêu đề, thêm mục, rồi yêu cầu Claude mở rộng phần vừa thêm — tất cả giữ nguyên conversation gốc ở bên trái.

Prototype component React

Ví dụ bạn là product manager muốn test ý tưởng form đăng ký:

Tạo component React có 2 input: Email và Mật khẩu, nút Submit. 
Validation cơ bản. Dùng Artifacts để tôi xem giao diện ngay.

Claude render preview thực tế. Bạn thấy input quá rộng? Chỉ cần sửa width trong code panel, Claude nhận ra thay đổi và hỏi bạn muốn cập nhật toàn bộ component không.

Ứng dụng

Lập trình viên và Kỹ sư phần mềm

Artifacts biến Claude thành IDE mini cho prototyping. Bạn viết script Python xử lý CSV, thấy lỗi logic? Sửa trực tiếp trong Artifacts rồi yêu cầu Claude giải thích tại sao lỗi — conversation không bị cắt ngang bởi block code dài. Đặc biệt hữu ích khi so sánh hai phiên bản code nhờ tính năng lịch sử phiên bản.

Content Creator và Marketing

Viết newsletter, kịch bản video, hoặc brief sáng tạo trong Artifacts cho phép bạn tập trung vào cấu trúc. Bạn có thể kéo thả sắp xếp lại heading, thêm ghi chú trực tiếp vào văn bản, rồi xuất Markdown sạch để đăng lên blog. Không còn tình trạng phải lọc qua đống emoji và giải thích của AI để lấy nội dung thuần túy.

Designer và Product Manager

Tạo wireframe bằng SVG, mockup HTML tĩnh, hoặc flowchart Mermaid trong Artifacts giúp visualize ý tưởng ngay lập tức. Bạn có thể chỉnh màu sắc, layout trực tiếp trong code SVG, xem kết quả render real-time, rồi gửi link hoặc ảnh chụp màn hình cho team.

So sánh

Tính năng	Artifacts (Claude)	Chat thường (Claude/ChatGPT)	Canvas (ChatGPT)
Không gian hiển thị	Panel bên phải tách biệt	Inline trong chat	Bảng riêng có thể mở rộng
Chỉnh sửa trực tiếp	Có, sửa code/text rồi yêu cầu cập nhật	Không, chỉ copy ra ngoài	Có, giống Google Docs
Preview động	HTML/React chạy được ngay	Không	Python có thể chạy (Code Interpreter)
Lịch sử phiên bản	Có, xem từng bản cập nhật	Không	Có
Tích hợp dự án	Liên kết với Claude Projects	Không có context dài	Tách biệt

Kết luận: Artifacts phù hợp khi bạn cần không gian làm việc tương tác song song với conversation — đặc biệt là code và tài liệu có cấu trúc. Nếu chỉ cần trả lời nhanh, chat thường đủ dùng; nếu cần soạn thảo văn bản dạng word processor, Canvas của ChatGPT linh hoạt hơn nhưng Artifacts của Claude lại vượt trội về preview kỹ thuật và tích hợp code.