Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Artifacts Builder (Trình tạo Artifact)

Skill giúp dựng artifact claude.ai phức tạp bằng React, Tailwind, shadcn/ui rồi gộp tất cả vào một file HTML duy nhất.

Thiết kế · UITrung cấp★ 1,980⑂ 630Điểm AI 8/10Cập nhật lần cuối: 26 thg 7, 2026

Skill này làm gì

  • Chạy scripts/init-artifact.sh để tạo project React 18 + TypeScript + Vite, có sẵn Tailwind CSS 3.4.1, hơn 40 component shadcn/ui, các thư viện Radix UI và alias đường dẫn @/.
  • Sau khi bạn viết code, scripts/bundle-artifact.sh dùng Parcel + html-inline để nhúng toàn bộ JS, CSS, asset vào một file bundle.html tự chứa.
  • File HTML này có thể chia sẻ trực tiếp trong hội thoại Claude dưới dạng artifact.
  • Có hướng dẫn thiết kế: tránh kiểu "AI slop" như lạm dụng canh giữa, gradient tím, bo góc đều nhau và font Inter.
  • Việc kiểm thử bằng Playwright/Puppeteer là tùy chọn, chỉ làm sau khi trình bày artifact để giảm độ trễ.

Phù hợp với ai

  • Người cần artifact nhiều component, có state management hoặc routing
  • Lập trình viên frontend, designer muốn xuất dashboard/demo tương tác thành một file duy nhất
  • Không phù hợp cho artifact HTML/JSX đơn giản một file — sẽ là dùng dao mổ bò

Ví dụ sử dụng

  1. "Tạo dashboard doanh thu với bảng và biểu đồ shadcn/ui" → khởi tạo project → viết component → chia sẻ bundle.html
  2. "Làm công cụ khảo sát nhiều bước với tab, xuất thành một file HTML" → app có routing/state được gộp thành một file
  3. "Gộp project React hiện có thành artifact HTML chia sẻ được" → chỉ chạy script bundle để tạo HTML inline

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/composio-community/awesome-claude-plugins/HEAD/artifacts-builder/skills/artifacts-builder/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục artifacts-builder/skills/artifacts-builder từ repo GitHub composio-community/awesome-claude-plugins vào ~/.claude/skills/artifacts-builder/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/composio-community/awesome-claude-plugins.git && mkdir -p ~/.claude/skills && cp -r awesome-claude-plugins/artifacts-builder/skills/artifacts-builder ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Mở terminal và kiểm tra Node.js phiên bản 18 trở lên bằng node -v.
  2. Clone repo: git clone https://github.com/composio-community/awesome-claude-plugins.git
  3. Tạo thư mục skills: mkdir -p ~/.claude/skills
  4. Sao chép skill: cp -r awesome-claude-plugins/artifacts-builder/skills/artifacts-builder ~/.claude/skills/
  5. Cấp quyền chạy script: chmod +x ~/.claude/skills/artifacts-builder/scripts/*.sh
  6. Khởi động lại Claude Code và yêu cầu ví dụ: "dùng artifacts-builder tạo dashboard cho tôi".
  7. Lần đầu chạy có thể mất vài phút để cài các package npm.
Xem mã nguồn trên GitHub ↗