figma_to_html_agent 추가 + MCP/Claude 설정

figma_to_html_agent/:
- Figma MCP 기반 블록 추출 에이전트 (CLAUDE.md, PLAN.md, PROCESS.md 등)
- block-tests/: Figma→HTML 변환 결과물 (bim-3roles-cards 등)
- templates_staging/: Jinja2 템플릿 + meta.yaml + example.yaml
- figma-analysis/, figma-assets/: Figma 분석 데이터 + 에셋
- scripts/: gradient_math.py 등 유틸리티

설정:
- .mcp.json: Figma MCP 서버 연결 설정
- .claude/settings.json: Claude Code 프로젝트 설정

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

figma_to_html_agent/PLAN.md

@@ -0,0 +1,98 @@
+# Figma → HTML 변환 파이프라인
+
+> 핵심 운영 절차는 [PROCESS.md](PROCESS.md), 수학 공식은 [MATH.md](MATH.md), CSS 보정 규칙은 [RULES.md](RULES.md), 변환 완료 목록은 [blocks_index.md](blocks_index.md).
+
+## 현재 방향 (2026-04 확정)
+
+**프로세스 우선, 인벤토리 후순위.** 35개 프레임을 사전 분류하지 않고, 1세션 1프레임씩 변환하면서 패턴이 발견되면 그때 템플릿화한다.
+
+### 폐기된 접근
+
+| 단계 | 폐기 사유 |
+|------|---------|
+| ~~Stage 1: Figma 인벤토리 일괄 추출~~ | work-creating-work. 35개는 사람이 5분이면 훑음 |
+| ~~Stage 2: 노드 수 기반 지문~~ | leaf 카운트는 약한 시그널. 패턴 분류에 부정확 |
+| ~~Stage 3: 자동 군집~~ | 약한 지문으로 자동 군집 시 잘못 묶임. 사람 눈이 빠름 |
+
+**대체:** 매 변환 직후 [blocks_index.md](blocks_index.md)에 1줄 메모. 패턴은 bottom-up으로 발견된다.
+
+## 활성 단계
+
+```
+[루프, 1세션 1프레임]
+
+A. 1:1 변환    ← PROCESS.md 10단계 실행
+   ↓
+B. 변형 축 메모 ← flat.md에 1~5줄 작성
+   ↓
+C. blocks_index.md 1줄 추가
+   ↓
+D. 패턴 2번째 등장? → 템플릿화 (Jinja2 + catalog.yaml 등록)
+                      ↓
+                      design_agent/templates/blocks/{category}/
+   ↓
+[다음 프레임은 새 세션에서]
+```
+
+## 현황 (2026-04-10)
+
+| 항목 | 상태 |
+|------|------|
+| 핵심 문서 (CLAUDE/PROCESS/MATH/RULES/PROCESS-CONTROL) | ✅ 정리 완료 |
+| 재사용 스크립트 (scripts/gradient_math.py) | ✅ 자체 회귀 테스트 통과 |
+| 변환 완료 블록 (정적 HTML) | 2 / N |
+| 템플릿화 (Jinja2) | 0 |
+| catalog.yaml 등록 (새 패턴) | 0 |
+| design_agent 본체 통합 | 0 |
+
+### 변환 완료 블록
+
+| # | slug | frame | pattern | 상태 |
+|---|------|-------|---------|------|
+| 1 | prerequisites-3col | 45:15 | 3-column-comparison | static (이전 작업) |
+| 2 | bim-goals-3circles | 66:310 | cycle-3way-intersect | static (Pure CSS, 검증 ✓) |
+
+자세한 내역: [blocks_index.md](blocks_index.md)
+
+## 대상 Figma 파일
+
+- 파일키: `9S6LsQyO6zlRxtiqZccOUM` ("Untitled")
+- 페이지: Page 2
+- 추정 프레임 수: ~35개 (확정 안 됨, 사용자가 매번 선택)
+
+## 다음 액션
+
+1. 사용자가 Figma desktop에서 다음 변환할 프레임 **선택**
+2. 에이전트가 PROCESS.md의 10단계 그대로 실행
+3. 변환 후 blocks_index.md 업데이트
+4. 다음 프레임은 **새 세션에서**
+
+## 학습된 규칙 (이 프로젝트에서 발견)
+
+> [RULES.md](RULES.md) R1~R12에 정리됨
+
+1. Figma MCP는 rotation 미제공 → bbox 비율로 감지 (R2)
+2. CSS line-height:1 → descender 잘림 → padding-bottom 보정 (R1)
+3. Figma 세로 텍스트 = 좁은 박스 + 가로 텍스트 → HTML `<br>` 방식 (R3)
+4. 흰 텍스트 stroke → HTML에서 비주얼 안 좋음 → 제거
+5. 미리보기 배경은 항상 흰색 (R7)
+6. 다중 fills → 최상단만 사용 (R5)
+7. 동일 좌표 중복 노드 → 1개만 렌더링 (R6)
+8. **순수 CSS 우선, SVG는 곡선/필터에만** (R9, 1171281211 변환에서 확정)
+9. **plus-darker → multiply 교체** (R10, Safari 외 호환)
+10. **Stroke inside/outside 구분** → box-sizing 결정 (R11)
+11. **viewBox padding 그라데이션 좌표 remap** 필수 (R12)
+12. **Vector 노드 metadata bbox는 회전된 좌표** → React wrapper 좌표 신뢰
+
+## 블록 라이브러리 통합 경로 (Stage E~G, 미래)
+
+```
+figma_to_html_agent/templates/   ← Jinja2 템플릿 임시 저장소
+       ↓
+design_agent/templates/blocks/{category}/{pattern_id}.html.j2
+design_agent/templates/catalog.yaml   ← when/slots/min_size_px 등록
+       ↓
+design_agent Phase Q 블록 선택 단계와 자동 연결
+       ↓
+사용자 콘텐츠 → 존 크기 → 패턴 매칭 → 블록 선택 → 슬롯 채우기 → 렌더
+```