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

Trình tạo Web Artifact

Chính thức

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

Lập trìnhTrung cấp★ 167,132⑂ 19,920Điểm AI 8/10Cập nhật lần cuối: 7 thg 8, 2026

Skill này làm gì

  • Dùng scripts/init-artifact.sh để tạo ngay project React 18 + TypeScript + Vite + Tailwind 3.4.1 với hơn 40 component shadcn/ui đã cài sẵn.
  • Tự cấu hình path alias (@/), các dependency Radix UI và Parcel (.parcelrc) để bundle.
  • scripts/bundle-artifact.sh inline toàn bộ JS, CSS, asset thành bundle.html tự chứa, chia sẻ trực tiếp trong hội thoại như một artifact.
  • Nhắc tránh phong cách "AI slop": lạm dụng layout căn giữa, gradient tím, bo góc đồng loạt, font Inter.
  • Bước kiểm thử bằng Playwright/Puppeteer là tùy chọn, chỉ làm khi cần.

Phù hợp với ai

  • Người cần artifact claude.ai phức tạp có state management, routing, nhiều component.
  • Dev frontend/designer muốn prototype UI nhanh trên nền shadcn/ui.
  • Nếu chỉ cần một file HTML/JSX đơn giản thì skill này là quá mức.

Ví dụ sử dụng

  1. "Tạo artifact bảng Kanban" → khởi tạo project, dựng cột kéo-thả bằng Card của shadcn rồi bundle ra HTML.
  2. "Làm dashboard có tab, biểu đồ và filter" → app nhiều màn hình với routing và state, xuất ra bundle.html.
  3. "Làm form khảo sát nhiều bước" → dùng Form/Dialog của shadcn, đóng gói thành artifact gửi người dùng.

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