claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

1. Figma 링크에서 node-id 추출
   - URL의 node-id 파라미터: 25-1393 → 25:1393 (하이픈을 콜론으로)

2. MCP 도구 호출 (병렬 실행)
   ├─ get_design_context (dirForAssetWrites 필수!)
   │  └─ 에셋 자동 다운로드 + 코드 반환
   └─ get_screenshot
      └─ Figma 원본 스크린샷 (비교 기준)

3. 에셋 폴더에서 SVG 파일 읽기
   └─ 다운로드된 SVG 파일 내용 확인

4. HTML에 인라인 SVG 삽입
   └─ <img> 대신 <svg> 태그로 직접 삽입

5. CSS 작성
   └─ 컨테이너 스타일, SVG 크기 조정

6. Playwright 스크린샷 캡처
   - viewport를 Figma 프레임 크기와 동일하게 설정

7. 시각적 비교
   ├─ get_screenshot 결과 (원본)
   └─ Playwright 스크린샷 (구현물)

8. 완료 판단
   └─ 원본과 구현물이 시각적으로 일치할 때만 완료

mcp__figma-desktop__get_design_context({
  nodeId: "1:140",
  clientLanguages: "html,css",
  clientFrameworks: "vanilla",
  dirForAssetWrites: "./Figma_Conversion/Static_Components/[프로젝트명]/[컴포넌트명]/assets"
})

mcp__figma-desktop__get_screenshot({ nodeId: "1:140" })

Figma_Conversion/Static_Components/
└── [프로젝트명]/
    └── [컴포넌트명]/
        ├── assets/              # SVG 에셋 (자동 다운로드)
        │   └── xxxxxxxx.svg     # 해시 파일명
        ├── screenshots/         # 구현물 스크린샷
        │   └── impl.png
        ├── [컴포넌트명].html    # 인라인 SVG 포함
        └── [컴포넌트명].css

<!-- ❌ figma-to-html 방식 (img 태그) -->
<div id="component-container">
    <img src="./assets/abc123.svg" alt="symbol">
</div>

<!-- ✅ figma-to-inline-svg 방식 (인라인 SVG) -->
<div id="component-container">
    <svg class="symbol-svg" viewBox="0 0 73 54" preserveAspectRatio="none">
        <!-- SVG 파일 내용 그대로 삽입 -->
        <path d="..." fill="#4ADE80"/>
        <path d="..." stroke="#16A34A"/>
    </svg>
</div>

1. get_design_context로 에셋 다운로드
2. assets/ 폴더의 SVG 파일 읽기 (Read 도구)
3. SVG 내용에서 불필요한 부분 제거:
   - <?xml ...?> 선언
   - <!DOCTYPE ...> 선언
   - xmlns 속성은 유지
4. <svg> 태그에 class 추가
5. HTML에 인라인으로 삽입

#component-container {
    width: 73px;   /* Figma 프레임 크기 */
    height: 54px;
    position: relative;
}

.symbol-svg {
    display: block;
    width: 100%;
    height: 100%;
}

<!-- ✅ 원본 색상 그대로 (하드코딩) -->
<path d="..." fill="#4ADE80"/>
<path d="..." stroke="#16A34A"/>

<!-- ❌ CSS 변수 변환은 이 단계에서 하지 않음 -->
<path d="..." fill="var(--fill-primary)"/>

❌ 잘못된 접근:
- "이 정도면 비슷해 보이니까 완료"
- "대충 이 값이면 맞겠지"
- CSS 값을 "추측"해서 조정

✅ 올바른 접근:
- get_screenshot → 유일한 원본
- get_design_context → 정확한 구조와 수치
- SVG 파일 내용 그대로 사용
- 시각적 차이가 있으면 MCP 데이터 다시 확인

node -e "
const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage({
    viewport: { width: 73, height: 54 }  // Figma 프레임 크기와 동일
  });
  await page.goto('file:///path/to/component.html');
  await page.screenshot({ path: './screenshots/impl.png' });
  await browser.close();
})();
"

1. 각 상태의 Figma node-id 확인
   - green: 1:102
   - yellow: 1:178
   - red: 1:140

2. 각 node-id에서 get_design_context 호출
   └─ 색상 정보 추출

3. 색상 정보 문서화 (README.md 또는 주석)
   - 어떤 색상이 어떤 상태인지 기록
   - 다음 단계(create-symbol-state-component)에서 사용

/*
 * 상태별 색상 (Figma에서 추출)
 *
 * green (1:102):
 *   - fillPrimary: #4ADE80
 *   - strokeColor: #16A34A
 *
 * yellow (1:178):
 *   - fillPrimary: #FACC15
 *   - strokeColor: #CA8A04
 *
 * red (1:140):
 *   - fillPrimary: #EF4444
 *   - strokeColor: #DC2626
 */

❌ 추측하지 않는다
- "비슷해 보인다" ≠ "일치한다"
- 확인하지 않고 완료라고 말하지 않음

❌ CSS 변수로 변환하지 않는다
- 이 단계에서는 원본 색상 유지
- CSS 변수 변환은 create-symbol-state-component에서

❌ 스크립트 작성하지 않는다
- 이 단계는 순수 퍼블리싱
- JavaScript는 다음 단계에서

❌ 로컬호스트 URL 직접 사용
- http://127.0.0.1:3845/... URL을 HTML에 직접 사용

❌ SVG 내용 임의 수정
- Figma에서 제공된 path, fill, stroke 그대로 사용
- viewBox 등 필수 속성만 조정

❌ 스크린샷 비교 생략
- 매번 get_screenshot과 Playwright 결과 비교 필수

- [ ] Figma 원본 스크린샷 확보 (get_screenshot)
- [ ] 에셋 자동 다운로드 완료 (dirForAssetWrites)
- [ ] SVG 파일 읽기 완료
- [ ] SVG를 인라인으로 HTML에 삽입
- [ ] 컨테이너 크기가 Figma와 일치
- [ ] SVG 색상 원본 유지 (하드코딩)
- [ ] Playwright 스크린샷 캡처 완료
- [ ] Figma 원본과 구현물 시각적 비교 완료
- [ ] 차이점 없음 확인
- [ ] (여러 상태일 경우) 색상 정보 문서화

figma-to-inline-svg (정적)
    │
    │  인라인 SVG HTML/CSS
    │  + 색상 정보 문서화
    │
    ▼
create-symbol-state-component (동적)
    - 하드코딩 색상 → CSS 변수
    - 상태별 색상 클래스
    - 런타임 API (setStatus 등)