1. 피그마 MCP Design to HTML 가이드

1.1. 피그마 MCP 주요 명령어 정리

MCP 환경에서 디자인 데이터를 분석하고 추출할 때 사용하는 핵심 명령어이다.

명령어 (Command)	기능 설명	활용 사례
get_file	피그마 파일의 전체 구조(JSON) 호출	전체 레이아웃 및 노드 ID 파악
get_file_nodes	특정 노드(프레임, 컴포넌트) 상세 정보 추출	특정 요소의 CSS 속성 분석 및 코드화
get_image	노드를 이미지(PNG, SVG 등)로 렌더링	아이콘, 로고 등 그래픽 자산 추출
get_file_styles	문서 내 정의된 스타일(색상, 텍스트) 조회	CSS 공통 변수(Design Tokens) 생성
get_file_components	사용된 컴포넌트 라이브러리 목록 확인	공통 UI 컴포넌트 구조 파악
get_comments	디자인 파일의 주석을 확인하여 수정 사항 및 협업 히스토리를 파악한다.

---

1.2. 단계별 생성 프롬프트

1.2.1. STEP 1: 디자인 분석 (Analysis)

Figma MCP를 통해 [피그마 파일 URL]의 [특정 프레임 이름] 디자인을 분석해라. 해당 디자인의 레이아웃 구조, 사용된 색상(Hex code), 폰트 크기 및 간격 정보를 추출한다.

1.2.2. STEP 2: 코드 구현 (HTML/CSS)

추출된 데이터를 바탕으로 HTML/CSS 코드를 작성해라. 다음 지시 사항을 준수한다:

• HTML: 시맨틱 태그를 사용한다.
• CSS: Flexbox를 사용하여 레이아웃을 구현하고 디자인 토큰을 변수로 정의한다.
• 반응형: 모바일 우선(Mobile-first) 방식으로 작성한다.”

1.2.3. STEP 3: 최적화 및 리팩토링 (Refactoring)

“초보자가 이해하기 쉽게 코드를 최적화해라. CSS 클래스 명은 BEM 방법론을 적용하고, 주요 섹션마다 설명 주석을 추가한다. 외부 라이브러리 없이 순수 CSS로 구현한다.”

---

2.1. 피그마 MCP 주요 명령어 및 프롬프트 정리

MCP 환경에서 디자인 데이터를 분석하고 코드로 변환할 때 사용하는 핵심 명령어이다.

명령어 분류	프롬프트 예시 (/)	주요 목적
디자인 분석	/figma get-file [URL]	피그마 파일의 전체 구조 및 메타데이터 호출
요소 추출	/figma get-nodes [ID]	특정 프레임, 버튼, 아이콘 등 개별 요소 정보 추출
스타일 확인	/figma get-styles	디자인에 정의된 색상, 타이포그래피, 효과 정보 확인
이미지 변환	/figma get-image [ID]	특정 노드를 PNG/SVG 등 이미지 파일로 변환
코드 생성	/generate HTML/CSS from [ID]	선택한 노드를 시맨틱 HTML과 CSS로 즉시 변환
반응형 변환	/convert to responsive	정적 디자인을 미디어 쿼리가 포함된 유동 레이아웃으로 변경