Figma Dev Mode MCP 도구를 활용한 디자인-코드 변환 지원. 디자인 요소 추출, 코드 생성, 스크린샷 캡처, 메타데이터 분석 시 사용. Figma 링크나 디자인 작업 요청 시 자동 활성화.
/plugin marketplace add jeongsk/claude-skills/plugin install figma-helper@jeongsk-claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/mcp-tools.mdreferences/troubleshooting.mdreferences/workflows.mdFigma 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으로 레이아웃 정확도 검증This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.