Hướng dẫn thực hànhHướng dẫn

Cách dùng Claude AI tạo trang web và biểu đồ qua Artifacts

Hôm nay mình sẽ hướng dẫn anh em cách dùng Claude AI để tạo tài liệu sống, dựng trang web nhỏ và vẽ biểu đồ ngay bên cạnh khung chat mà không cần cài đặt.

Mình đọc tài liệu hướng dẫn của Anthropic rồi gom lại thành các bước. Mình chưa tự chạy thử, nên mọi chỗ trong bài mình đều dựa sát theo tài liệu của hãng để anh em làm theo không bị bỡ ngỡ khi thao tác trên giao diện.

Artifact là sản phẩm Claude làm ra cho anh em (tài liệu, slide, trang web, biểu đồ, app nhỏ) và mở ngay bên cạnh khung chat. Thường thì Claude tự tạo artifact khi nội dung dài khoảng trên 15 dòng và đọc riêng ra vẫn hiểu, không cần xem lại cuộc chat.

Artifact lúc đầu chỉ mình anh em thấy. Muốn gửi người khác thì anh em chỉnh quyền xem trong phần chia sẻ trước.

Bước 1: Kiểm tra tài khoản và cách dùng Claude AI

Trước tiên anh em vào Settings > Capabilities (gói Free, Pro, Max) hoặc Organization settings > Capabilities (gói Team, Enterprise), rồi bật tính năng chạy code trên cloud và tạo file. Thiếu hai mục này thì Artifacts không chạy.

Tạo artifact trong chat có trên Free, Pro, Max, Team và Enterprise. Còn mẫu dựng sẵn (Design, Slides, Docs) đang beta và chỉ có trên gói trả phí. Ở gói Enterprise, các mẫu mặc định tắt cho tới khi owner bật từng mẫu.

Anh em kiểm tra chỗ này trước nhé, thiếu một trong hai mục là Artifacts không chạy.

Bước 2: Chọn mẫu dựng sẵn hoặc yêu cầu tạo mới

Trong chat, anh em có thể gõ yêu cầu tạo mới, hoặc bấm "Output" ở ô nhập tin nhắn rồi chọn mẫu, hoặc vào tab Artifacts ở thanh bên.

Bộ khuôn mẫu giấy hình học xếp ngay ngắn tượng trưng cho các mẫu thiết kế dựng sẵn

Claude Design giúp anh em dựng nhanh bản mẫu trang web, mockup hay trang đích. Claude Slides cho anh em sửa trực tiếp từng slide và xuất ra PowerPoint hoặc PDF. Claude Docs là mẫu tài liệu để anh em viết cùng Claude và cả team theo thời gian thực, hiện đang beta.

Với mẫu Design, anh em kéo thả các phần tử ngay trên canvas, tức vùng làm việc mở cạnh khung chat. Anh em làm nội dung hay thiết kế mà không biết code vẫn có thể nhờ Claude dựng giao diện kiểu này bằng cách nhắn yêu cầu.

Nếu anh em dùng app trên điện thoại thì chỉ xem được kết quả trong tab Artifacts; muốn chọn mẫu, sửa trực tiếp hay đổi quyền chia sẻ thì mở Claude trên web hoặc Claude Desktop.

Bước 3: Chỉnh sửa trực tiếp trên khung artifact

Có hai cách sửa, anh em chọn cách nào quen tay thì dùng. Cách một là nhắn yêu cầu vào khung chat, Claude sẽ sửa artifact cho anh em.

Cách thứ hai là bấm trực tiếp vào khung artifact để gõ chữ, sửa từng slide hoặc kéo thả các thành phần giao diện theo ý anh em.

Với tài liệu dạng Markdown (văn bản có định dạng đơn giản), anh em chỉ cần bôi đen đoạn cần đổi, bấm "Edit with Claude" rồi gõ yêu cầu của anh em. Làm vậy Claude sửa đúng chỗ anh em chọn, khỏi phải tả lại là đoạn nào.

Nếu anh em muốn thử hướng khác, cứ sửa một tin nhắn trước đó, Claude sẽ tạo một nhánh chat riêng có artifact riêng, bản cũ vẫn còn nguyên.

Sau khi xong, anh em bấm "Export": Docs xuất ra Word, PDF, Markdown hoặc Google Docs; Slides ra PowerPoint hoặc PDF; Design ra .zip, PDF, PowerPoint hoặc HTML.

Bước 4: Lưu trữ dữ liệu và kết nối ứng dụng

Nếu anh em dùng gói trả phí thì artifact lưu được dữ liệu giữa các lần mở lại, kiểu như sổ nhật ký hay bảng theo dõi.

Ngăn kéo kim loại nhỏ nhắn trên mặt bàn gỗ tượng trưng cho khu vực lưu trữ dữ liệu

Có hai kiểu lưu. Kiểu cá nhân: mỗi người có dữ liệu riêng, chỉ mình thấy, ví dụ nhật ký. Kiểu chia sẻ: ai dùng cũng thấy cùng một dữ liệu, ví dụ bảng điểm của một trò chơi.

Mỗi artifact có giới hạn lưu trữ 20 MB và chỉ lưu được text, không lưu ảnh hay file.

Artifact còn nối được với Slack, Asana, Google Calendar (gói Pro, Max, Team, Enterprise), ví dụ làm bảng việc đọc lịch của anh em. Mỗi người dùng phải tự kết nối app của mình, kể cả khi dùng artifact người khác chia sẻ.

Lần đầu artifact cần dùng một app, Claude sẽ hiện hộp thoại cho anh em xem nó dùng công cụ nào rồi bấm đồng ý mới chạy. Anh em tắt riêng từng công cụ cũng được, lần sau mở lại artifact nó vẫn nhớ lựa chọn đó.

Bước 5: Tạo ứng dụng nhỏ và dùng artifact trong Claude Code

Anh em có thể nhờ Claude làm một app nhỏ mà người dùng hỏi đáp, tạo nội dung ngay trong đó; app gọi thẳng Claude nên anh em không cần API key hay tự dựng máy chủ.

Ứng dụng chạy trên hạ tầng của Anthropic nên anh em khỏi lo phần máy chủ. Người dùng đăng nhập bằng tài khoản Claude của họ, và mức dùng tính vào giới hạn gói của chính họ, nên anh em không phải trả thêm chi phí.

Nếu anh em dùng Claude Code, nó có thể đăng kết quả của phiên làm việc thành một artifact, tức trang tương tác ở một URL riêng tư. Trang này tự cập nhật khi phiên làm việc tiếp tục.

Muốn thử ngay thì anh em gõ một yêu cầu như: "Tạo dashboard theo dõi tiến độ", "Vẽ biểu đồ từ số liệu", hoặc "Dựng web giới thiệu quán cà phê", rồi xem kết quả mở bên cạnh chat. Chưa ưng thì nhắn Claude sửa tiếp, hoặc bôi đen đoạn cần đổi.

Bước 6: Làm bản riêng từ artifact người khác đã publish

Có một việc khác: muốn làm bản riêng từ artifact kiểu cũ (làm trong chat trước 16/9/2026) mà người khác đã publish, trên gói Free, Pro, Max, anh em mở nó, bấm "Copy", mở chat mới, Paste code vào rồi nói rõ muốn đổi gì. Chỉ làm với người mình tin tưởng.

Với app dùng Claude, người chia sẻ không mất phí, và mức dùng tính vào giới hạn gói của chính họ.

Trước khi gửi link, anh em vào phần chia sẻ chọn rõ ai được mở artifact, vì mặc định artifact chỉ mình anh em thấy.

Lỗi hay gặp khi dùng artifact

Khi artifact gặp lỗi, giao diện có nút "Try fixing with Claude" cạnh thông báo lỗi. Anh em bấm nút đó, chi tiết lỗi sẽ tự nằm sẵn trong một tin nhắn mới, rồi anh em gửi tin đó cho Claude để nó tìm nguyên nhân và đề xuất cách sửa; mình lưu ý là không phải lúc nào cũng sửa được.

Nguồn tham khảo

  1. 9487310-what-are-artifacts-and-how-do-i-use-them · support.claude.com · Tài liệu kỹ thuật · đọc ngày

Bài này thế nào?

Chia sẻ

XFacebook

Ảnh đại diện của chủ trang quanbi.dev

Về mình

Quân Bi · Người viết

Xem thêm →

Bình luận (0)

Chưa có bình luận nào. Bạn mở hàng nhé.

Viết bình luận