菜单
Figma Dev Mode MCP 도구를 활용한 디자인-코드 변환 지원. 디자인 요소 추출, 코드 생성, 스크린샷 캡처, 메타데이터 분석 시 사용. Figma 링크나 디자인 작업 요청 시 자동 활성화.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | converting-figma-designs |
| description | Figma Dev Mode MCP 도구를 활용한 디자인-코드 변환 지원. 디자인 요소 추출, 코드 생성, 스크린샷 캡처, 메타데이터 분석 시 사용. Figma 링크나 디자인 작업 요청 시 자동 활성화. |
Figma Dev Mode MCP 서버 도구를 활용하여 디자인에서 코드로의 변환을 지원합니다.
이 플러그인은 .mcp.json 파일을 통해 Figma Dev Mode MCP 서버를 자동으로 설정합니다.
플러그인 설치 시 다음 MCP 서버가 활성화됩니다:
http://127.0.0.1:3845/mcp용도: 디자인 요소의 전체 컨텍스트 정보 조회 및 코드 생성
가장 먼저 사용해야 하는 도구입니다. 선택된 Figma 요소의 구조, 스타일, 레이아웃 정보를 종합적으로 파악하고 React + Tailwind CSS 코드를 생성합니다.
지원 파일: Figma Design, Figma Make
사용 시점:
용도: Figma 요소의 메타데이터 조회
요소의 ID, 이름, 타입, 위치, 크기 등 기본 정보를 Sparse XML 형식으로 가져옵니다.
지원 파일: Figma Design
사용 시점:
용도: 디자인 화면 스크린샷 캡처
현재 Figma 화면 또는 선택된 영역의 스크린샷을 캡처합니다.
지원 파일: Figma Design, FigJam
사용 시점:
용도: 디자인 시스템 변수 및 스타일 정의 조회
색상, 간격, 타이포그래피 등의 디자인 토큰을 가져옵니다.
지원 파일: Figma Design
사용 시점:
용도: Figma 노드와 코드 컴포넌트 매핑 조회
Figma 디자인 요소가 어떤 코드 컴포넌트에 연결되어 있는지 확인합니다.
지원 파일: Figma Design
사용 시점:
용도: Figma 노드와 코드 컴포넌트 매핑 설정
Figma 디자인 요소와 실제 코드 컴포넌트를 연결합니다.
지원 파일: Figma Design
사용 시점:
용도: 디자인 시스템 규칙 파일 생성
에이전트 가이드를 위한 규칙 파일을 생성합니다.
사용 시점:
용도: FigJam 다이어그램 메타데이터 조회
FigJam 다이어그램을 XML 형식의 메타데이터로 변환합니다.
지원 파일: FigJam
사용 시점:
1. get_design_context 호출
→ 전체 구조, 스타일 파악 + 코드 생성
2. 필요시 get_metadata 호출
→ 특정 요소 상세 정보 확인
3. 생성된 코드를 프로젝트 컨벤션에 맞게 수정
1. get_variable_defs 호출
→ 디자인 토큰/변수 확인
2. get_design_context 호출
→ 컨텍스트 파악 + 코드 생성
3. 토큰을 적용하여 코드 최적화
1. get_code_connect_map 호출
→ 기존 컴포넌트 매핑 확인
2. 매핑된 컴포넌트가 있으면 재사용
→ 없으면 get_design_context로 새로 생성
1. get_screenshot 호출
→ 화면 캡처
2. get_design_context 호출
→ 컴포넌트 정보 수집
3. 문서 작성
1. get_screenshot 호출
→ 원본 디자인 캡처
2. get_design_context 호출
→ 코드 생성 및 구현
3. 구현 결과와 스크린샷 비교 검증
이 스킬은 다음과 같은 상황에서 자동 활성화됩니다:
get_design_context로 컨텍스트 파악 및 코드 생성get_variable_defs로 디자인 토큰 활용get_screenshot으로 레이아웃 정확도 검증Guide for creating Claude Code plugins with commands, agents, skills, hooks, and MCP servers. Use when the user wants to create a new plugin, add plugin components (commands, agents, hooks), set up a plugin marketplace, or needs help with plugin.json configuration.
Feature-Sliced Design(FSD) 아키텍처를 적용한 프론트엔드 프로젝트 개발 지원. FSD 레이어, 슬라이스, 세그먼트 구조 설계, 의존성 규칙 적용, 마이그레이션 시 사용.
React Flow 라이브러리를 사용한 노드 기반 UI 개발 지원. 노드/엣지 생성, 커스터마이징, 레이아웃, 상호작용 구현 시 사용. 항상 최신 문서를 WebFetch로 참조하여 정확한 정보 제공.
Searches and recommends Claude Code skills and plugins from local database and SkillsMP API. Activates when user asks to find skills, search plugins, get recommendations for PDF/Git/code-review/frontend tools, or requests feature-based tool discovery.