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

understand-figma — Trình tạo đồ thị tri thức thiết kế Figma

Phân tích file Figma qua REST API và dựng đồ thị tri thức tương tác về trang, màn hình, component và design token.

Thiết kế · UINâng cao★ 83,748⑂ 7,058Điểm AI 8/10Cập nhật lần cuối: 12 thg 9, 2026

Làm được gì

  • Nhận URL hoặc file key của Figma, gọi Figma REST API để lấy cấu trúc tài liệu.
  • Trích xuất pages, screens, components, component sets, instances và design tokens thành scan-manifest.json.
  • Tác tử design-analyzer xử lý theo lô ~15 node (tối đa 5 lô song song), sau đó hợp nhất thành knowledge-graph.json + meta.json.
  • Tự động mở dashboard dạng kind:"design" để duyệt đồ thị.
  • Token chỉ đọc từ biến môi trường và chỉ gửi qua header X-Figma-Token, không ghi vào log hay file kết quả.

Dành cho ai

  • Designer / design engineer cần kiểm toán design system và mức độ tái sử dụng component.
  • Lập trình viên frontend cần hiểu cấu trúc file Figma trước khi code UI.
  • Nhóm sản phẩm muốn tài liệu hóa luồng màn hình và tính nhất quán của token.

Ví dụ sử dụng

  1. /understand-figma https://www.figma.com/file/abcd1234/Design-System — quét toàn bộ file và dựng đồ thị component.
  2. /understand-figma abcd1234 --language vi — xuất phần diễn giải bằng tiếng Việt.
  3. Nếu file chưa đổi phiên bản, skill báo UP_TO_DATE và dừng; đặt UNDERSTAND_FIGMA_FORCE=1 để build lại từ đầu.

· · · 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/Egonex-AI/Understand-Anything/HEAD/understand-anything-plugin/skills/understand-figma/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 understand-anything-plugin/skills/understand-figma từ repo GitHub Egonex-AI/Understand-Anything vào ~/.claude/skills/understand-figma/ 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/Egonex-AI/Understand-Anything.git && mkdir -p ~/.claude/skills && cp -r Understand-Anything/understand-anything-plugin/skills/understand-figma ~/.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 Node ≥ 22 và pnpm ≥ 10 (node -v, pnpm -v).
  2. Clone repo: git clone https://github.com/Egonex-AI/Understand-Anything.git
  3. Cài phụ thuộc và build core: cd Understand-Anything/understand-anything-plugin && pnpm install && pnpm --filter @understand-anything/core build
  4. Sao chép skill: mkdir -p ~/.claude/skills && cp -r skills/understand-figma ~/.claude/skills/ (nên giữ nguyên toàn bộ plugin vì cần cả agents/design-analyzer.md).
  5. Tạo personal access token tại https://www.figma.com/settings rồi chạy export FIGMA_TOKEN=<token>.
  6. Vào thư mục dự án và gọi /understand-figma <URL Figma> trong Claude Code.
  7. Kết quả nằm ở .ua/knowledge-graph.json và dashboard sẽ tự mở.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT