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

Trích xuất Design System

Trích xuất màu, font, khoảng cách từ một website công khai và tạo file design token khởi đầu cho dự án.

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

Làm được gì

  • Mở website công khai bằng Playwright (Chromium) và thu thập style thực tế đã render.
  • Tóm tắt màu chính/phụ/nhấn, font phát hiện được, thang spacing, radius, shadow.
  • Sinh file token khởi đầu: design-system/tokens.json và design-system/tokens.css.
  • Hỗ trợ chế độ --extract-only (chỉ trích xuất) và init (chỉ tạo lại token từ dữ liệu đã có).
  • Có quy tắc an toàn: không ghi đè style/config hiện có mà không xin phép.

Phù hợp với ai

  • Lập trình viên frontend cần bản nháp design token cho dự án mới.
  • Designer muốn quy đổi cảm giác màu/typography của site tham khảo thành số liệu.
  • Nhóm đang khảo sát bước đầu cho việc chuyển đổi design system.

Ví dụ sử dụng

  1. "Trích xuất design token của https://example.com và tạo luôn tokens.css" → chạy đầy đủ và sinh file.
  2. "Chỉ cần xem bảng màu, đừng tạo file" → dùng --extract-only, chỉ có normalized.json.
  3. "Dùng normalized.json hôm qua, tạo lại file token thôi" → chạy extract-design-system init.

· · · 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/arvindrk/extract-design-system/HEAD/skills/extract-design-system/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/extract-design-system từ repo GitHub arvindrk/extract-design-system vào ~/.claude/skills/extract-design-system/ 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/arvindrk/extract-design-system.git && mkdir -p ~/.claude/skills && cp -r extract-design-system/skills/extract-design-system ~/.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/arvindrk/extract-design-system.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Sao chép skill: cp -r extract-design-system/skills/extract-design-system ~/.claude/skills/
  5. Kiểm tra Node.js đã có (node -v); nếu chưa, hãy cài đặt.
  6. Cài trình duyệt cho Playwright: npx playwright install chromium
  7. Khởi động lại Claude Code và yêu cầu ví dụ: "trích xuất design token của trang này".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT