Giáo trình tự học miễn phí · Dịch vụ hỗ trợ theo nhu cầu.

Bài 0335phút ước tínhCơ bản đến Nâng cao

3. Cơ Chế Claude Artifacts & Không Gian Làm Việc Nhóm Cowork: Thiết Kế Giao Diện & Prototype 10 Phút

Làm chủ tính năng Claude Artifacts để tự động kết xuất mã HTML/Tailwind, ứng dụng React tương tác và sơ đồ Mermaid có thể nhúng trực tiếp.

🎨 3 Ứng Dụng Hàng Đầu Của Claude Artifacts Cho Doanh Nghiệp

Interactive Executive Dashboard: Tạo giao diện báo cáo KPI động bằng React/Tailwind có nút lọc dữ liệu.
Sơ Đồ Quy Trình Vận Hành (Mermaid Diagrams): Vẽ sơ đồ luồng dữ liệu kiến trúc trực quan.
Single-File Web Tools: Tạo các công cụ nội bộ (Tính lãi suất, Bóc tách hóa đơn, Tạo báo giá) chỉ trong 1 file HTML duy nhất.

 example.py
<!-- PROMPT MẪU TẠO ARTIFACT DASHBOARD ĐIỀU HÀNH BẰNG TIẾNG VIỆT -->
Hãy tạo cho tôi một React Component Dashboard Quản trị Doanh nghiệp chuẩn Tailwind CSS trong 1 Artifact:
- Có 4 thẻ KPI: Doanh thu tháng (2.4 tỷ, +18%), Số đơn hàng (1,240), Khách hàng mới (320), Tỷ lệ chuyển đổi (3.8%).
- Có bảng theo dõi 5 hợp đồng lớn nhất tháng kèm trạng thái: Đã ký, Chờ duyệt, Đang thực hiện.
- Có nút chuyển đổi bộ lọc Ngày / Tuần / Tháng mượt mà.

Thực hành

Thực hành và tự đánh giá

Sử dụng Claude để tạo một Artifact chứa form khảo sát ý kiến khách hàng bằng HTML/JS có khả năng kiểm tra tính hợp lệ của số điện thoại và email.

Tiến độ tự học lưu trên trình duyệt này. Chỉ đánh dấu khi đã kiểm tra sản phẩm thực hành.