---
name: markup-figma
description: |
  Figma URL 또는 Figma MCP로 추출한 디자인 데이터를 받아
  Nuxt SFC + Tailwind CSS 마크업으로 자동 변환합니다.

  다음 상황에서 반드시 사용하세요:
  - "이 Figma 마크업해줘", "Figma 디자인 컴포넌트로 만들어줘"
  - Figma URL 또는 링크를 받고 HTML/Vue 구현을 요청받았을 때
  - 피그마 시안 기반 반응형 마크업이 필요할 때
---

# Figma → 마크업 변환 (markup-figma)

Figma 디자인 데이터 → Nuxt SFC + Tailwind 마크업 자동 변환.

## 언제 사용하는가

- 디자이너로부터 Figma URL을 받아 퍼블리싱을 시작할 때
- Figma MCP가 Claude Code에 연결되어 있을 때
- Figma 없이 스크린샷/Export 이미지로 구현할 때

## 입력

- Figma 프레임 URL 또는 노드 ID
- (선택) 브레이크포인트 요건, 이미지 에셋 CDN 경로

---

## 작업 순서

### Phase 1: Figma 데이터 추출

#### Figma MCP 사용 가능 시
```
Figma URL → MCP로 레이어 트리, 스타일, 치수 자동 추출
```

추출 항목:
- 컬러 HEX값 (RGBA → HEX 변환)
- 폰트: 패밀리, 사이즈(px), weight, 줄간격
- 레이아웃: width/height, padding, gap
- 컴포넌트 이름 → Vue 컴포넌트 이름 매핑 (`PascalCase`)
- 이미지 에셋 URL

#### MCP 없이 진행 시
사용자에게 아래 정보를 요청한다:
- 섹션별 스크린샷 (모바일 / 데스크톱 분리)
- 컬러 HEX, 폰트 스펙, 여백(px)
- CTA 링크 및 버튼 텍스트

### Phase 2: Tailwind 매핑

| Figma 값 | Tailwind 클래스 예시 |
|---|---|
| `width: 320px` | `w-80` 또는 `w-[320px]` |
| `padding: 16px 24px` | `py-4 px-6` |
| `gap: 12px` | `gap-3` |
| `font-size: 14px` | `text-sm` |
| `border-radius: 8px` | `rounded-lg` |
| `color: #1A1A1A` | `text-[#1A1A1A]` 또는 디자인 토큰 |

- Tailwind 디자인 토큰(`tailwind.config.ts`)이 있으면 임의값 대신 토큰 사용
- 임의값(`w-[123px]`)은 디자인 시스템에 없는 값에만 사용

### Phase 3: 컴포넌트 구조 결정

Figma 컴포넌트 → Vue 파일 매핑:
- Figma 상위 프레임 → 페이지 레이아웃 (`pages/` 또는 `layouts/`)
- Figma Instance → `components/` 파일
- 반복 컴포넌트 → Props로 추상화

### Phase 4: SFC 코드 생성

`markup-base` Phase 3~5 동일 적용 (클래스 순서, ARIA, SFC 구조).

반응형 처리:
- Figma Mobile 프레임 → base 클래스
- Figma Desktop 프레임 → `lg:` 접두사

### Phase 5: 검수 체크리스트

- [ ] 폰트 스펙 일치 여부 (px → rem 변환 확인)
- [ ] 이미지 `alt` 텍스트 작성 여부
- [ ] 인터랙션 요소 ARIA 속성 확인
- [ ] Tailwind 클래스 7단계 순서 준수

---

## 출력 형식

```
## Figma 마크업: <프레임명>

### 추출된 디자인 정보
- 컬러: [HEX 목록]
- 폰트: [패밀리 / 사이즈 목록]
- 브레이크포인트: [mobile / desktop 치수]

### 코드
\`\`\`vue
...
\`\`\`

### 미확인 항목
- [ ] [에셋 URL, 링크 등 확정 필요 항목]
```