Claude Skill MartKhám phá skillSkill 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 kèm dashboard.

Thiết kế · UITrung cấp★ 78,314⑂ 6,578Điểm AI 7/10Cập nhật lần cuối: 30 thg 7, 2026

Công cụ này làm gì

  • Nhận URL hoặc file key của Figma và gọi Figma REST API (api.figma.com) để lấy toàn bộ cấu trúc file.
  • Trích xuất các node: page, screen (frame), component, component set, instance và design token, rồi nối chúng bằng các quan hệ (edge).
  • Chia node thành các batch ~15 phần tử, chạy tối đa 5 batch song song với subagent design-analyzer để diễn giải ý nghĩa, sau đó hợp nhất thành knowledge-graph.json với kind:"design" và meta.json.
  • Tự động mở dashboard tương tác bằng skill /understand-dashboard.
  • Nếu phiên bản file Figma không đổi, skill báo UP_TO_DATE và bỏ qua; muốn dựng lại hãy đặt UNDERSTAND_FIGMA_FORCE=1.

Phù hợp với ai

  • Người phụ trách design system muốn nhìn tổng quan cấu trúc file Figma lớn và mức độ tái sử dụng component.
  • Lập trình viên front-end cần tài liệu hoá hệ thống màn hình/component trước khi chuyển design thành code.
  • PM hoặc designer mới nhận bàn giao một file thiết kế lạ và cần hiểu nhanh.

Ví dụ sử dụng

  1. /understand-figma https://www.figma.com/file/abc123/Design-System — quét cả file để xem quan hệ giữa component set và các instance.
  2. /understand-figma abc123 --language vi — sinh phần diễn giải bằng tiếng Việt để chia sẻ nội bộ.
  3. Trước khi dọn dẹp design token, dùng đồ thị để liệt kê những màn hình đang tham chiếu một token màu/typography cụ thể nhằm đánh giá phạm vi ảnh hưởng.

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

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. Cài Node.js phiên bản 22 trở lên và pnpm 10 trở lên (kiểm tra bằng node -v, pnpm -v).
  2. Clone repo: git clone https://github.com/Egonex-AI/Understand-Anything.git
  3. Vào thư mục plugin, cài dependency và build core: cd Understand-Anything/understand-anything-plugin && pnpm install && pnpm --filter @understand-anything/core build
  4. Copy skill vào thư mục skill của Claude Code: mkdir -p ~/.claude/skills && cp -r skills/understand-figma ~/.claude/skills/ (nên copy thêm skill understand-dashboard để mở dashboard).
  5. Tạo personal access token tại figma.com/settings rồi export: export FIGMA_TOKEN=<token_của_bạn>
  6. Mở Claude Code trong thư mục dự án và gõ /understand-figma <URL file Figma>.
  7. Kết quả nằm ở .ua/knowledge-graph.json và dashboard sẽ tự động khởi chạy.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT