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)

Bộ công cụ tạo artifact claude.ai phức tạp bằng React, Tailwind CSS, shadcn/ui rồi đóng gói thành một file HTML duy nhất.

Lập trìnhTrung cấp★ 1,471⑂ 264Điểm AI 8/10Cập nhật lần cuối: 14 thg 7, 2026

Làm được gì

  • Khởi tạo dự án React 18 + TypeScript + Vite + Tailwind 3.4.1 + shadcn/ui (hơn 40 component cài sẵn) chỉ bằng scripts/init-artifact.sh.
  • Đóng gói toàn bộ JS, CSS, asset vào một file bundle.html tự chứa nhờ Parcel + html-inline qua scripts/bundle-artifact.sh.
  • Tự cấu hình path alias (@/), dependency Radix UI và tương thích Node 18+.
  • Có quy tắc thiết kế tránh kiểu "AI slop": hạn chế layout căn giữa quá nhiều, gradient tím, bo góc đồng loạt và font Inter.
  • Khuyến nghị chỉ kiểm thử bằng Playwright/Puppeteer khi cần, để không làm chậm việc hiển thị kết quả.

Phù hợp với ai

  • Người cần artifact nhiều component, có state management hoặc routing (không phải file JSX đơn giản).
  • Lập trình viên frontend, product designer muốn demo prototype chạy được ngay trong hội thoại Claude.
  • Người thường xuyên dựng dashboard, mini-app mẫu để trình bày cho khách hàng.

Ví dụ sử dụng

  1. "Tạo dashboard doanh thu có tab, biểu đồ và dialog" → khởi tạo dự án, dùng component shadcn, đóng gói ra HTML duy nhất.
  2. "Tôi cần prototype luồng onboarding nhiều bước có điều hướng" → dựng nhiều màn hình rồi chia sẻ bundle.html.
  3. "Artifact cũ trông rất 'AI', hãy làm lại cho tinh tế" → chỉnh layout, typography, màu theo hướng dẫn thiết kế của skill.

· · · 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/Prat011/awesome-llm-skills/HEAD/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 từ repo GitHub Prat011/awesome-llm-skills vào ~/.claude/skills/prat011-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/Prat011/awesome-llm-skills.git && mkdir -p ~/.claude/skills && cp -r awesome-llm-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.
  2. Tải repo: git clone https://github.com/Prat011/awesome-llm-skills.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy nguyên thư mục skill (kèm folder scripts): cp -r awesome-llm-skills/artifacts-builder ~/.claude/skills/
  5. Cấp quyền chạy cho script: chmod +x ~/.claude/skills/artifacts-builder/scripts/*.sh
  6. Kiểm tra Node.js 18+ và npm: node -v
  7. Khởi động lại Claude Code và yêu cầu ví dụ: "Hãy tạo artifact bằng React và shadcn/ui".
Xem mã nguồn trên GitHub ↗