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/PROCESS-CONTROL.md

@@ -0,0 +1,66 @@
+# Figma → HTML 프로세스 제어
+
+## 변경 전 반드시 확인
+
+### 1. 소스는 Figma 데이터다
+- gradient 방향: Figma 데이터의 각도에서 CSS 변환 (CSS = 90 - Figma)
+- border-radius: Figma 데이터 그대로 (스케일만)
+- PNG를 보고 방향을 판단하지 않는다
+- PNG는 픽셀 데이터 분석으로만 교차 검증에 사용
+
+### 2. 이미지 해석 금지
+- 멀티모달 이미지 해석으로 gradient 방향 판단 불가 (미묘한 alpha에서 틀림)
+- 방향 확인이 필요하면 픽셀 데이터를 숫자로 분석
+- "보니까 ~인 것 같다" 금지. 데이터로 확인
+
+### 3. 작동하는 것은 건드리지 않는다
+- 사용자가 A만 문제라고 하면 A만 수정
+- B, C가 "같은 이유로 틀릴 것 같다"고 추측해서 함께 바꾸지 않는다
+- 변경 전: 현재 값이 뭔지 기록
+- 변경 후: 변경한 값이 뭔지 기록
+- 되돌려야 할 때 정확히 어디로 돌아가는지 알아야 한다
+
+### 4. 한 번에 하나만 바꾼다
+- gradient 각도와 border-radius를 동시에 바꾸지 않는다
+- 하나 바꾸고 확인, 맞으면 다음 하나
+
+### 5. 사용자가 말한 것만 한다
+- 사용자의 피드백을 자의적으로 해석하지 않는다
+- "주황색 gradient가 안 맞다" → 주황색 gradient만 수정
+- 초록, 다른 요소는 건드리지 않는다
+
+### 6. 찍어맞추기 금지
+- 0deg 안 되면 180deg, 그것도 안 되면 90deg... 이런 식 금지
+- 값을 바꾸기 전에 WHY를 먼저 설명할 수 있어야 한다
+- 설명 못하면 바꾸지 않는다
+
+### 7. "쉬운 전면 재작성" 절대 금지
+- 80점 결과물에서 2가지 문제를 고칠 때, 구조를 flex/grid 등으로 **전면 재작성하지 않는다**
+- 기존에 맞춘 수십 가지(pill 크기, 위치, 비율, border 걸침)가 전부 깨진다
+- **기존 구조 유지 + 문제만 정확히 수정**이 원칙
+- 보완이 안 되면 그 방식을 오답노트로 두고 **다른 방식으로 접근**
+- 점점 나빠지면 **즉시 멈추고 마지막 OK 상태로 복원**
+- 구조 변경이 불가피하면 **사전에 영향 범위 분석 + 사용자 확인 후** 진행
+
+## Figma 도형 gradient 처리 프로세스
+
+```
+1. Figma gradient 각도 확인
+2. gradient를 0으로 돌린 기본 상태 파악
+   - border-radius: Figma 값 그대로
+   - gradient: CSS 90deg (Figma 0 = 왼→오 = CSS 90deg)
+3. CSS로 기본 상태 구현
+4. Figma gradient 각도 적용: CSS = 90 - Figma각도
+5. 위치(left, top)와 크기(width, height) 배치
+```
+
+## Figma gradient 각도 체계
+
+```
+Figma  0° = 왼쪽 진 → 오른쪽 옅 = CSS  90°
+Figma -90° = 위 진 → 아래 옅     = CSS 180°
+Figma -180° = 오른쪽 진 → 왼쪽 옅 = CSS 270°
+Figma  90° = 아래 진 → 위 옅     = CSS   0°
+```
+
+변환: **CSS = 90 - Figma**