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/INSIGHT-GRADIENT.md

@@ -0,0 +1,97 @@
+# Figma 도형 + 그라데이션 처리
+
+## 핵심 원리
+
+Figma에서 도형 작업 방식:
+1. 박스(프레임/컨테이너) 안에 도형을 만든다 (border-radius + gradient)
+2. **박스를 회전**시킨다 (도형 자체가 아니라)
+3. 박스가 돌면 그 안의 도형도 같이 돌아간다 → border-radius와 gradient가 함께 회전
+
+## CSS 구현 구조
+
+**도형 자체에 transform 적용 금지. 반드시 래퍼(wrapper) 컨테이너에 적용한다.**
+
+```html
+<div class="wrapper">   <!-- 이게 회전한다 -->
+  <div class="shape"></div>  <!-- 이건 건드리지 않는다 -->
+</div>
+```
+
+```css
+.wrapper {
+  position: absolute;
+  /* pre-rotation position/size */
+  transform: rotate(X deg);  /* Figma gradient 각도의 부호 반대 */
+}
+.shape {
+  width: 100%; height: 100%;
+  border-radius: <Figma 값 그대로>;
+  background: linear-gradient(90deg, <Figma 색상 그대로>);
+  /* CSS 90deg = Figma 0deg = 왼→오, 이것이 "기본 상태" */
+}
+```
+
+## 프로세스
+
+```
+1. Figma gradient 각도 확인 (예: 90°)
+2. 기본 상태(Figma 0°) 정의
+   - shape: border-radius = Figma 값, gradient = CSS 90deg (left→right) + Figma 색상
+3. 래퍼의 pre-rotation 위치/크기 계산
+   - 90° 회전이면 width/height 교환
+   - 래퍼 중심 = 최종 중심 (Figma position + size/2)
+4. 래퍼에 transform: rotate() 적용
+   - Figma +90° → CSS rotate(-90deg) (부호 반대, CSS는 CW 기준)
+```
+
+## 예시: 42335
+
+Figma 데이터:
+- 위치: (574, 45), 크기: 205×424 (tall, 최종 상태)
+- border-radius: 102 0 0 102 (왼쪽 둥근, 기본 상태 기준)
+- gradient: 90deg (시계 반대 방향 90도 회전됨)
+
+Pre-rotation 계산:
+- 최종 중심: (676.5, 257)
+- Pre-rotation 크기: 424×205 (swap)
+- Pre-rotation top-left: (464.5, 154.5)
+
+CSS:
+```html
+<div class="wrapper-42335">
+  <div class="shape-42335"></div>
+</div>
+```
+```css
+.wrapper-42335 {
+  position: absolute;
+  left: 464.5px; top: 154.5px;
+  width: 424px; height: 205px;
+  transform: rotate(-90deg);
+}
+.shape-42335 {
+  width: 100%; height: 100%;
+  border-radius: 102px 0 0 102px;
+  background: linear-gradient(90deg, rgba(217,162,104,1) 37%, rgba(220,103,14,0) 89%);
+}
+```
+
+## Figma gradient 각도 → CSS transform 변환
+
+Figma는 시계방향이 양수, CSS transform은 시계방향이 양수이지만:
+- Figma gradient 각도는 **도형 내부 방향** 기준
+- 박스를 회전시키는 관점에서는 부호가 반대
+
+```
+Figma gradient  0° → CSS transform: rotate(0deg)   (회전 없음)
+Figma gradient +90° → CSS transform: rotate(-90deg) (반시계)
+Figma gradient -90° → CSS transform: rotate(+90deg) (시계)
+Figma gradient ±180° → CSS transform: rotate(180deg)
+```
+
+## 주의사항
+
+- Figma 데이터가 유일한 소스. PNG는 픽셀 분석으로만 교차 검증.
+- 이미지를 눈으로 보고 방향 판단 금지 (멀티모달 해석 불안정).
+- border-radius와 gradient를 각각 수동 계산하지 않는다. **래퍼를 회전**시킨다.
+- 작동하는 값은 건드리지 않는다. 사용자가 지적한 것만 수정한다.