클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
 
← 목록으로

understand-figma — Figma 디자인 지식 그래프 생성기

Figma 파일을 REST API로 분석해 페이지·화면·컴포넌트·디자인 토큰을 인터랙티브 디자인 지식 그래프로 만들어 줍니다.

디자인·UI고급★ 83,748⑂ 7,058AI 점수 8/10마지막 업데이트: 2026. 9. 12.

무엇을 해주나

  • Figma 파일 URL 또는 파일 키를 받아 Figma REST API로 문서 구조를 가져옵니다.
  • 페이지, 스크린, 컴포넌트, 컴포넌트 세트, 인스턴스, 디자인 토큰을 노드로 추출해 scan-manifest.json을 만듭니다.
  • design-analyzer 서브에이전트가 약 15개 단위 배치로 노드를 해석하고(최대 5개 병렬), 결과를 병합해 knowledge-graph.json + meta.json을 생성합니다.
  • 마지막으로 kind:"design" 대시보드를 자동 실행해 그래프를 시각적으로 탐색하게 합니다.
  • 토큰은 환경변수에서만 읽고 X-Figma-Token 헤더로만 전송하며 그래프·로그에 기록하지 않습니다.

이런 분께 추천

  • 디자인 시스템을 정리하거나 컴포넌트 사용 현황을 감사해야 하는 디자이너·디자인 엔지니어
  • Figma 산출물을 코드로 옮기기 전 구조를 파악해야 하는 프론트엔드 개발자
  • 대규모 Figma 파일의 화면 흐름과 토큰 일관성을 문서화하려는 팀

활용 예시

  1. /understand-figma https://www.figma.com/file/abcd1234/Design-System — 전체 파일을 스캔해 컴포넌트 계층 그래프를 생성.
  2. /understand-figma abcd1234 --language ko — 분석 결과 설명을 한국어로 출력.
  3. 이미 분석한 파일이 변경되지 않았다면 UP_TO_DATE를 알려주고 중단하며, UNDERSTAND_FIGMA_FORCE=1로 강제 재빌드.

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/Egonex-AI/Understand-Anything/HEAD/understand-anything-plugin/skills/understand-figma/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 Egonex-AI/Understand-Anything 의 understand-anything-plugin/skills/understand-figma 폴더를 내 ~/.claude/skills/understand-figma/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

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/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. Node 22 이상과 pnpm 10 이상이 설치되어 있는지 확인합니다 (node -v, pnpm -v).
  2. 저장소를 클론합니다: git clone https://github.com/Egonex-AI/Understand-Anything.git
  3. 플러그인 루트에서 의존성 설치 및 코어 빌드: cd Understand-Anything/understand-anything-plugin && pnpm install && pnpm --filter @understand-anything/core build
  4. 스킬을 Claude에 등록합니다: mkdir -p ~/.claude/skills && cp -r skills/understand-figma ~/.claude/skills/ (동봉된 agents/design-analyzer.md도 함께 필요하므로 플러그인 전체를 유지하는 편이 안전합니다).
  5. https://www.figma.com/settings 에서 개인 액세스 토큰을 발급해 export FIGMA_TOKEN=<토큰> 으로 설정합니다.
  6. 분석할 프로젝트 폴더로 이동한 뒤 Claude Code에서 /understand-figma <Figma URL> 을 실행합니다.
  7. 완료되면 .ua/knowledge-graph.json 이 생성되고 대시보드가 자동으로 열립니다.
GitHub에서 원본 보기 ↗라이선스: MIT