---
name: pix
description: Figma 디자인을 픽셀 퍼펙트 코드로 변환. Figma URL 하나로 구조 분석 → 에셋 추출 → 코드 생성 → Pixelmatch 자율 수정 루프 실행.
user_invocable: true
argument_description: "Figma 프레임 URL (예: https://www.figma.com/design/KEY/FILE?node-id=X-Y)"
---

# Pix — Figma-to-Code Pixel Perfect Skill

Figma 디자인을 픽셀 퍼펙트하게 코드로 변환한다. 사용자가 Figma URL을 주면 아래 단계를 **자율적으로** 끝까지 실행한다.

---

## 첫 실행 세팅 (사용자가 "세팅해야 할 것들 알려줘"라고 하면 이 섹션을 안내)

이 스킬을 처음 사용할 때 아래 3가지를 세팅해야 한다. Codex가 순서대로 안내한다.

### 1. 스킬 파일 설치
```
이 파일(pix.md)을 아래 경로에 저장:
~/.Codex/skills/pix.md

Codex에서 "/pix [Figma URL]"로 실행 가능.
```

### 2. Figma Personal Access Token
```
Figma API로 디자인 데이터와 이미지를 가져오기 위해 필요.

발급 방법:
  1. Figma 로그인 → Settings (프로필 클릭)
  2. "Personal access tokens" 섹션
  3. "Generate new token" 클릭
  4. 이름 입력 (예: "pix-skill"), Expiration 선택
  5. 토큰 복사 (figd_... 형태)

저장 위치:
  프로젝트 루트에 .figma-token 파일 생성:
  echo "figd_여기에토큰붙여넣기" > .figma-token

  또는 환경변수:
  export FIGMA_TOKEN="figd_여기에토큰붙여넣기"

스킬이 토큰을 읽는 순서:
  1. .figma-token 파일
  2. FIGMA_TOKEN 환경변수
  3. 둘 다 없으면 → 사용자에게 토큰 요청

참고: API는 rate limit이 빡세다 (대형 파일 작업 시 수 분 내 429).
      걸리면 자동으로 Chrome 폴백으로 전환된다. 걱정 안 해도 됨.
```

### 3. Chrome MCP (Codex-in-chrome) — 가장 중요한 폴백
```
⚠️ 이것이 실제로 가장 많이 일하는 도구.
Figma API는 rate limit이 빡세서 대형 작업 시 거의 항상 Chrome 폴백으로 전환된다.
이 확장 프로그램이 없으면 API 막힐 때 작업이 멈춘다.

설치 (3단계):

  ① Chrome 확장 프로그램 설치
     Chrome 웹스토어에서 "Codex" 검색 → Anthropic 공식 확장 설치
     또는: https://chromewebstore.google.com/detail/Codex/fcoeoabgfenejglbffodgkkbkcdhcgfn

  ② Codex에서 연결
     Codex 터미널에서:
       /chrome
     → 연결 상태 확인. 처음이면 Chrome 재시작 필요할 수 있음.

  ③ 매번 자동 연결 (선택)
     /chrome → "Enabled by default" 선택
     이후 Codex --chrome 플래그 없이도 자동 연결.

  ④ Figma 로그인 유지
     Chrome에서 figma.com에 로그인된 상태여야 한다.
     에셋 export, 노드 선택, 스크린샷 캡처 등 모두 로그인 필요.

확인 방법:
  /chrome 실행 → "Browser extension is connected" 메시지 확인

없으면: API 429 시 멈춤. 사용자에게 수동 export 요청해야 함.
있으면: API 429 시 0초 대기. Chrome이 자동으로 Figma UI 조작.
```

### 4. 필수 npm 패키지 (Pixelmatch 비교용)
```
npm install --save-dev playwright pixelmatch pngjs
npx playwright install chromium

이미 설치되어 있으면 스킵.
```

### 세팅 확인 체크리스트
```
Codex가 첫 /pix 실행 시 자동으로 확인:
  ✓ Figma 토큰 존재 여부 (.figma-token 또는 FIGMA_TOKEN)
  ✓ playwright 설치 여부
  ✓ pixelmatch, pngjs 설치 여부
  ✓ Chrome MCP 연결 여부 (선택사항이지만 강력 권장)

하나라도 없으면 → 해당 세팅 안내를 출력하고, 세팅 완료 후 진행.
```

### 지원 스택
```
HTML/CSS 기반 프로젝트면 다 동작한다.
Pixelmatch 비교는 브라우저 렌더링 결과 기준이라 프레임워크 무관.
예시는 Next.js + Tailwind CSS 기반.
```

---

## 절대 규칙

1. **레퍼런스 없이 코드 작성 금지** — Figma 원본 스크린샷/이미지를 디스크에 확보하기 전에는 Phase 3로 넘어가지 않는다.
2. **레퍼런스 없이 "양호" 판정 금지** — 내 스크린샷만 보고 OK 하는 것은 자기 시험지를 자기가 채점하는 것. 반드시 레퍼런스와 비교.
3. **미완성 에셋으로 다음 단계 진행 금지** — "나중에 교체" 방식 절대 불가. 에셋 하나라도 빠지면 멈춘다.
4. **섹션 미완료 시 다음 섹션 진행 금지** — Pixelmatch 98%+ 또는 사용자 육안 승인이 있어야 다음 섹션.

---

## Phase 1: Figma 구조 심층 분석

코드를 한 줄이라도 쓰기 전에, 디자인 데이터를 확보한다.
```
토큰 확보:
  1. .figma-token 파일 읽기 (프로젝트 루트)
  2. FIGMA_TOKEN 환경변수
  3. 둘 다 없으면 → 사용자에게 "Figma Personal Access Token을 입력해주세요" 요청
  → 받은 토큰을 .figma-token에 저장 (다음번 자동 사용)

데이터 확보 우선순위:
  1. 로컬 캐시 확인 — reference/{project}-full.json 존재 시 API 호출 스킵
  2. Figma MCP `get_design_context` — 연결되어 있으면 최우선
  3. REST API — GET /v1/files/{key} (X-FIGMA-TOKEN 헤더)
  4. API 429 → Chrome MCP로 Figma 직접 조작
```
- **MCP 출력은 구조/값 참조용이며, 코드를 그대로 복사하지 않는다.**

### MCP/API에서 참조할 것
- 치수 (width, height), 색상 (#hex), 간격 (gap, padding), 폰트값 (size, weight, lineHeight, letterSpacing)
- `clipsContent` → `overflow-hidden` + 고정 크기 (실험에서 +1.84% 매치율 점프 확인됨)
- `absoluteBoundingBox` → 부모-자식 상대 좌표 **정밀 계산** (추정 금지)
- `fills`의 color + opacity 분리 (예: `fill=#000 opacity=0.1` → `bg-black/10`)
- `effects` → DROP_SHADOW 등
- **COMPONENT_SET variant 구조** → Desktop/Tablet/Mobile 반응형 파악

### MCP에서 무시할 것
- `img` + CSS `inset-%` 배치 패턴 → 브라우저에서 깨짐 (실증: 99.38%인데 아이콘 전멸)
- `data-node-id` 속성
- `font-['Inter:Semi_Bold',sans-serif]` 문법 → `next/font/google`로 대체

### 핵심 원칙
> MCP 코드를 직역하면 Pixelmatch %는 높아도 육안 품질이 떨어진다.
> MCP는 "무엇을 만들지"의 참조이고, "어떻게 만들지"는 직접 판단한다.

---

## Phase 2: 레퍼런스 + 에셋 추출 (코드 생성 전에 반드시 완료)

### 2-1. 레퍼런스 이미지 확보 (필수)
```
레퍼런스 없이 Phase 3 진행 절대 금지.

확보 순서:
1. MCP get_screenshot → 디스크 저장
2. REST API image export (scale=2) → 디스크 저장
3. API 429 → Chrome에서 Figma 파일 열어 캡처
5. 그래도 실패 → 사용자에게 보고 + 대기 또는 스크린샷 제공 요청

레퍼런스 파일: reference/{섹션명}-desktop.png
```

### 2-2. 에셋 추출
이미지, 아이콘, 로고, 장식 벡터는 반드시 실제 에셋으로 추출한다.
- 사진/목업/일러스트: PNG (scale=2), **단일 파일** (레이어 분리 금지)
- 로고/아이콘: SVG 우선, 실패 시 PNG
- **장식 벡터/곡선 등 시각 요소**: 반드시 추출 (CSS 대체 불가한 경우 많음)
- `public/assets/{섹션명}/`에 저장

### 에셋 완전성 체크 (Phase 2 완료 조건)
```
노드 트리의 모든 비-텍스트 시각 노드에 대해:
- VECTOR/GROUP/INSTANCE → 반드시 에셋 다운로드 (곡선, 장식, 아이콘 포함)
- RECTANGLE (단색 fill만 있는 경우) → CSS 대체 가능
- ELLIPSE (단색) → CSS rounded-full 대체 가능
- IMAGE fill → 반드시 PNG 추출

완료 체크리스트를 출력하고 누락 없음을 확인한 후 Phase 3 진행.
"나중에 교체" 방식 절대 금지.
```

### 아이콘/로고 렌더링 규칙 (실증된 패턴)
- **인라인 SVG path** 사용 → 외부 SVG 파일 + CSS inset 위치지정 **절대 금지**
- 소셜 아이콘: `div(rounded-full bg-black/[opacity])` 안에 인라인 `<svg fill="색상">`
- **복합 로고** (다중 벡터 조각): 개별 파트 다운로드 → 단일 SVG로 합성
- 단일 벡터 로고: 에셋 URL에서 직접 다운로드, `<img>`로 사용 가능

### API 호출 최적화 (Rate Limit 최소화)

**원칙: API 호출을 최소화한다. 섹션마다 개별 호출하지 않는다.**

```
── Step 1: 원샷 풀 파일 캐시 (프로젝트 최초 1회) ──
GET /v1/files/{key}  → reference/{project}-full.json 에 저장
  - 전체 노드 트리가 포함됨. 이후 섹션별 구조는 로컬 JSON에서 조회.
  - API 호출 1회로 모든 섹션의 구조 데이터 확보.

── Step 2: 이미지 Fill 일괄 다운로드 (프로젝트 최초 1회, 필수!) ──
GET /v1/files/{key}/images → 파일 내 모든 이미지 fill의 URL을 한 번에 반환
  - 응답: { meta: { images: { "imageRef_hash": "https://s3-alpha-sig..." } } }
  - 전체 이미지를 public/assets/{project}/ 에 일괄 다운로드
  - 파일명: {imageRef_hash}.png
  - 이 endpoint는 /v1/files보다 가볍고 rate limit이 다른 버킷
  - 이 단계를 건너뛰면 → placeholder 지옥 (실증: 30+개 페이지 재작업)
  - 스크립트: node scripts/extract-figma-images.mjs <project>
             node scripts/download-image-fills.mjs <project>

── Step 3: 에셋 배치 Export (1회) ──
전체 노드 트리에서 에셋이 필요한 노드 ID를 모두 수집한 뒤:
GET /v1/images/{key}?ids=A,B,C,D,E&scale=2&format=png
GET /v1/images/{key}?ids=F,G,H&format=svg
  - 여러 노드를 쉼표로 묶어 한 번에 export.
  - SVG/PNG 분리해서 최대 2-3회 호출로 전체 에셋 확보.

── Step 4: 레퍼런스 이미지 (섹션 단위) ──
GET /v1/images/{key}?ids=SECTION_NODE&scale=2&format=png
  - 섹션별 1회. 가능하면 여러 섹션을 배치로 묶는다.
```

### 멀티페이지 프로젝트 사전 준비 (Phase 0)
```
여러 페이지를 빌드하는 프로젝트에서는 Phase 1-2 전에 반드시:

1. 프로젝트 전체 이미지 일괄 다운로드 (위 Step 2)
   → 코드 작성 시작 전에 모든 이미지가 로컬에 존재해야 함
   
2. 이미지 인덱스 생성 (파일명, 크기, 차원)
   → reference/{project}-image-index.json
   → 에이전트가 적절한 이미지를 빠르게 찾기 위한 메타데이터

3. Figma 프레임 ↔ 코드 페이지 매핑 테이블 작성
   → 어떤 Figma 프레임이 어떤 코드 페이지에 대응하는지 명시

이 사전 준비 없이 코드 생성 시작 = placeholder 지옥 확정.
"빌드하면서 에셋 추출"이 아니라 "에셋 완비 후 빌드 시작"이 정답.
```

### Rate Limit 대응 (API + Chrome 폴백)
```
Figma API는 rate limit이 빡세다. 대형 파일 작업 시 수 분 안에 429가 온다.

전략: API 시도 → 429 시 즉시 Chrome 폴백 (대기하지 않음)

1. API 호출 (Personal Access Token, X-FIGMA-TOKEN 헤더)
2. 429 에러 → **즉시 Chrome에서 Figma 직접 조작**
3. Chrome으로 작업 진행하면서, 배경에서 주기적으로(2-3분 간격) API 재시도
4. API 복구 확인 시 → API로 복귀 (배치 호출이 더 효율적이므로)
5. Chrome도 불가 → 사용자에게 보고 + 대기

핵심: rate limit에 걸려도 **절대 멈추지 않는다**.
Chrome 폴백은 "차선책"이 아니라 "즉시 전환 가능한 대안 경로"다.
```

### Chrome 직접 추출 (API 우회 폴백)
```
API rate limit 시 Chrome MCP(Codex-in-chrome)로 Figma UI를 직접 조작한다.
Rate limit과 완전히 무관하게 동작.

방법:
  1. Chrome에서 Figma 파일 URL 열기 (navigate)
  2. 대상 노드 선택 (레이어 패널에서 클릭 또는 캔버스에서 더블클릭)
  3. 우측 Export 패널에서 2x PNG로 Export
  4. 또는 우클릭 → "Copy as SVG" (벡터 아이콘/로고)
  5. 스크린샷 캡처 (레퍼런스 이미지용)
```

### 캐시 규칙
```
- 풀 파일 JSON: reference/{project}-full.json (프로젝트당 1회)
- 에셋: public/assets/{section}/ (1회 다운로드 후 재사용)
- 레퍼런스: reference/{section}-ref.png (1회 다운로드 후 재사용)
- diff 루프에서는 API 호출 0
- 캐시 존재 시 API 호출 스킵 (파일 존재 여부 먼저 확인)
```

### 에이전트 위임 시 필수 규칙
```
에이전트에 빌드/수정 작업을 위임할 때, 아래 정보를 반드시 프롬프트에 포함:

1. 에셋 경로 명시 (가장 중요!):
   - 다운로드된 이미지가 있는 디렉토리: public/assets/{project}/
   - 이미지 인덱스 파일: reference/{project}-image-index.json
   - "알아서 찾아라"가 아니라 구체적 파일 목록/경로를 프롬프트에 포함
   - 에셋이 사전 다운로드되지 않았으면 에이전트 투입 전에 먼저 다운로드

2. Chrome 폴백 전략:
   - API rate limit 시 Chrome MCP로 Figma에서 직접 에셋 추출
   - "이미지 없이 placeholder로 대체"는 최후의 수단, Chrome 시도가 우선
   
3. 레퍼런스 확보 의무:
   - 코드 작성 전에 레퍼런스 이미지 확보 (API → Chrome export → 사용자 요청)
   - 레퍼런스 없이 빌드한 페이지는 "미검증" 상태로 표시
   
4. Pixelmatch 검증 포함:
   - 빌드 후 반드시 Pixelmatch 비교 실행
   - 98%+ 미달 시 수정 루프 실행
   - 에이전트 결과에 매치율 보고 필수

5. 에셋 완전성:
   - 이미지 placeholder로 빌드 금지 (Chrome으로 추출 시도 먼저)
   - 불가피한 경우에만 placeholder 사용하고, 이유를 명시

"빠르게 양산"보다 "정확하게 하나"가 우선.
```

### 완료 검증 (페이지 빌드 후 필수)
```
페이지 빌드/수정 완료 시 아래 자동 검증을 반드시 실행:

── Placeholder 잔존 체크 ──
grep -cE "placeholder|Image Here|Image Placeholder|bg-gray-[23]00.*rounded.*w-\[|Chart.*placeholder" page.tsx

→ 0건이어야 통과. 1건이라도 있으면 "완료" 판정 금지.

── 시각 노드 누락 체크 ──
Figma 원본에 이미지가 있는데 코드에 <img> 또는 background-image가 없는 영역 확인.
빈 컨테이너 (내용물 없는 div with fixed dimensions) = 이미지 누락 의심.

── 실패 사례 (이 상태로 완료 처리하면 안 됨) ──
✗ <div className="bg-gray-200 w-[300px] h-[200px] rounded-lg" /> ← 이미지가 들어가야 할 자리
✗ <span>World Map Chart</span> ← 실제 지도 이미지여야 함
✗ <span>Image Placeholder</span> ← 실제 사진이어야 함

이 검증을 통과해야 Pixelmatch 단계로 넘어갈 수 있다.
```

---

## Phase 3: 코드 생성

### Figma 값을 정확히 매핑한다 (Prescriptive)
| Figma 값 | Tailwind | 금지 |
|----------|----------|------|
| fontSize: 60px | `text-[60px]` | `text-7xl` |
| color: #7c3aed | `bg-[#7c3aed]` | `bg-purple-600` |
| gap: 80px | `gap-[80px]` | `gap-20` |
| borderRadius: 8px | `rounded-[8px]` | `rounded-lg` |
| letterSpacing: -1.5 | `tracking-[-1.5px]` | `tracking-tight` |

**Tailwind 디자인 스케일 근사값은 사용하지 않는다.** Figma 정확값만 사용.

### 레이아웃 원칙
- **flex/justify-between 등 시맨틱 CSS 우선** — absolute 포지셔닝 남발 금지
- `clipsContent=true` 프레임 → `overflow-hidden` + 고정 크기 + `relative`
- **absoluteBoundingBox 기반 포지셔닝 시 정밀 계산** — 부모 좌표를 빼서 상대 offset. 추정/대충 금지.

### 뷰포트 적응 (필수) — 큰 모니터/작은 노트북 모두 대응

**구조 패턴 (2-layer):**
```
외부 wrapper: w-full (뷰포트 전체 채움, max-w 금지!)
  └ section: w-full bg-[color] (배경색은 뷰포트 끝까지)
      ├ absolute inset-0 bg-... (배경 레이어 — inner 밖에 둠)
      └ div.max-w-[1600px] mx-auto relative h-full (콘텐츠 센터링)
          └ absolute left-[245px] ... (콘텐츠)
```

**절대 규칙:**
1. **외부 래퍼에 `max-w-[1600px]` 절대 금지** — `w-full`만 사용, 센터링 불필요
2. **섹션 배경색은 section 태그에 직접** — 뷰포트 전체로 자연 확장됨
3. **absolute 포지셔닝 콘텐츠는 inner container 안에** — `<div className="max-w-[1600px] mx-auto relative h-full">`
4. **full-width 배경 레이어 (`absolute inset-0`)는 inner container 밖에** — 그래야 뷰포트 끝까지 확장
5. **nav 바에 고정 너비 금지** — `left-0 right-0 max-w-[1600px] mx-auto px-[48px]` 패턴 사용
6. **flex/grid 중앙 정렬 섹션은 그대로** — `text-center`, `mx-auto`, `justify-center` 이미 반응형
7. **body에 `overflow-x: clip`** — 가로 스크롤 방지 (globals.css)
8. `w-[1440px]`, `w-[1600px]` 등 고정값 → `w-full` 또는 `max-w-[…]`로 대체
9. Pixelmatch 비교 시 Figma 프레임 폭과 동일한 뷰포트를 사용하되, 코드 자체는 반응형

### 반응형 필수
Figma에 Tablet/Mobile variant가 있으면 **반드시** Tailwind 브레이크포인트로 구현.

### 스택
- HTML/CSS 기반이면 프레임워크 무관 (React, Vue, Svelte, vanilla 등)
- 폰트: Google Fonts 또는 프로젝트의 폰트 로드 방식 사용
- 이미지: native `<img>` 또는 프레임워크 이미지 컴포넌트
- 외부 컴포넌트 라이브러리 사용 금지

---

## Phase 4: Pixelmatch 자율 수정 루프

### 비교 설정
- Playwright 뷰포트: Figma 프레임과 **동일한 크기**
- `deviceScaleFactor: 2` (레티나 대응)
- Pixelmatch: `threshold: 0.15`, `includeAA: false`

### 전체 페이지 섹션별 진행 시 비교 전략
전체 페이지를 섹션별로 나눠 진행하면, 위 섹션들의 누적 높이 차이로 스크롤 기반 비교의 y-오프셋이 점점 벌어진다.
```
대응:
- 섹션별 비교: element screenshot vs Figma 노드 export
  (전체 페이지 스크롤 크롭 비교 대신)
- 크기 불일치 시 (Figma render bounds ≠ CSS bounds):
  → 브라우저 element를 기준으로, 레퍼런스를 중앙 정렬 크롭하여 비교
- 모든 섹션 완성 후: 전체 페이지 높이를 Figma와 일괄 맞추고
  full-page 비교 1회 실행
```

### 3단계 검증 체계

**Step 1: 그리드 텍스트 분석 (매 iteration 자동)**
- `pixel-diff.mjs`로 6x6 그리드 diff% + 핫스팟(>3%) 출력
- match% 기록

**Step 2: 레퍼런스 대비 시각 확인 (필수)**
- **iter 0은 반드시 diff 이미지 1장 Read** — 높은 match%도 깨짐을 숨길 수 있음 (실증: 99.38%인데 아이콘 전멸)
- **레퍼런스와 비교하여** 차이점 텍스트로 상세 기록. 내 스크린샷만 보고 "양호" 판정 금지.
- Read 즉시 소견 기록 (이미지는 자연 압축 대상)
- 한 iteration에 최대 1장

**Step 3: 넓은 뷰포트 검증 (iter 0에서 1회)**
- Figma 프레임 폭 + 200px 뷰포트에서 추가 캡처
- 센터링/정렬 이슈 감지

### Pixelmatch 신뢰도 규칙
> **match%가 높아도 실제 품질이 낮을 수 있다.**
> - 32x32 아이콘이 완전히 깨져도 셀 기준 ~3%밖에 안 뜸
> - Pixelmatch는 모든 픽셀을 동등 취급하지만, 사람 눈은 의미 있는 요소에 민감
> - 반드시 시각 확인으로 "의미적 정확성" 검증

### 루프 규칙

```
최대 20회 반복
목표: 98% 이상 + 시각 확인 통과

for iteration in 0..19:
  1. Playwright로 브라우저 스크린샷 캡처
  2. Figma 레퍼런스와 Pixelmatch 비교 (그리드 분석 포함)
  3. match% 계산 및 기록

  종료 조건 (어느 하나라도 충족 시 중단):
    - match >= 98% + 시각 확인 OK  → 성공
    - 3회 연속 변화폭 < 0.1%  → 수렴 판정 (사용자에게 보고)

  롤백 조건:
    - match%가 직전보다 하락  → 코드를 직전 버전으로 복원
    - 다른 접근법으로 재시도 (같은 실수 반복 금지)

  수정 전략:
    - 그리드 핫스팟 위치 → 해당 영역의 Figma 데이터 재확인
    - CSS 값만 만지지 말고 구조적 원인을 찾는다
    - 필요시 diff 이미지 1장 확인 → 즉시 텍스트 기록
```

### 섹션 완료 기준
```
섹션 완료 = 다음 중 하나:
  - Pixelmatch 98%+ AND 시각 확인 통과
  - 사용자 육안 승인

섹션 미완료 시 다음 섹션 진행 금지.
완료되지 않은 섹션은 사용자에게 명확히 보고.
```

### 수정 우선순위 (임팩트 순)
1. **누락 에셋** — 장식 벡터, 곡선, 아이콘 등 아예 없는 요소
2. **아이콘/로고 렌더링** — Pixelmatch가 과소평가하지만 육안 임팩트 최대
3. **클리핑/overflow** — 가장 큰 매치율 차이
4. **절대 좌표 기반 위치 보정**
5. **색상/opacity** — fill color + opacity 분리 확인
6. **간격/패딩** — 미세 조정
7. **폰트 렌더링** — 구조적 한계, 3% 이내면 무시

---

## 컨텍스트 관리

### 이미지 누적 방지
- 이미지는 디스크에 저장, **필요시에만** 1장씩 Read
- Read 직후 소견을 텍스트로 기록 → 이미지는 자연 압축 대상
- 한 세션에 이미지 누적 최대 3장 이내 유지 목표

### 섹션 간 전환 시
- 현재 섹션 결과를 텍스트로 요약
- 사용자에게 `/compact` 실행 권고 메시지 출력
- 다음 섹션 시작 전 컨텍스트 정리

---

## 결과 보고

섹션 완료 후 아래 형식으로 보고:

```
=== Pix 섹션 완료 ===
대상: [섹션명]
최종 매치율: XX.XX%
반복: N / 20
종료 사유: [목표 달성 / 수렴 / 사용자 승인]
시각 확인: [통과 / 이슈 있음]
에셋 완전성: [전체 확보 / N개 누락]

Iteration 로그:
  #0: XX.XX% — 초기 생성, 시각 확인 [OK/이슈]
  #1: XX.XX% (+X.XX) — [수정 내용]
  ...

남은 차이: [설명]
```

---

## 주의사항

- **전체 페이지를 한번에 변환하지 않는다** — 섹션별로 나눠서 진행
- **Figma Community 파일은 Duplicate 후 사용** — 원본 커뮤니티 URL로는 API 접근 불가
- **섹션 프레임 링크 사용** — 전체 페이지 링크가 아닌 개별 프레임의 "Copy link to selection" 링크
- **API 호출 최소화** — 원샷 풀 파일 캐시 + 배치 이미지 export. 섹션마다 개별 API 호출 금지.
- **MCP 우선** → REST API (Personal Access Token) → Chrome 직접 추출 fallback
- **reference/diffs/ 폴더에 모든 중간 결과물 보존**
- **MCP `excludeScreenshot: true`** 사용하여 불필요한 이미지 컨텍스트 유입 방지 (레퍼런스는 파일로 별도 저장)
- **벌크 에셋 추출 대안**: 프로젝트에 `@figma-export/cli` 설치 시 CLI로 벌크 추출 가능 (`npx figma-export components FILE_KEY`). API 기반이지만 내부 배치 최적화됨.