# 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 상태로 복원**
- 구조 변경이 불가피하면 **사전에 영향 범위 분석 + 사용자 확인 후** 진행

### 8. MCP 데이터 전수 반영 (단순화/생략 절대 금지)
- MCP get_design_context 응답의 **모든 요소**를 HTML에 반영한다
- "핵심만 골라서", "단순화해서", "비슷하게" → **전부 금지**
- MCP React+Tailwind 코드를 HTML/CSS로 **1:1 변환**한다
- 구조를 임의로 바꾸지 않는다 (래퍼 div 구조 유지)
- 반드시 반영해야 하는 속성:
  - transform: rotate(), scaleY() 등 → 래퍼 div로 감싸는 구조 그대로
  - mix-blend-mode: multiply 등 → 절대 생략 금지
  - opacity → 절대 생략 금지
  - border-radius, inset → Figma 값 그대로
  - background-image (gradient) → gradient_math.py로 정확한 CSS 변환
  - box-shadow, text-shadow → 값 그대로
  - letter-spacing, line-height → 값 그대로
- 검증: MCP 응답에서 CSS 속성을 추출 → index.html에서 동일 속성이 있는지 전수 대조
- "나중에 추가하면 된다"는 생각 금지 → **처음부터 빠짐없이**

## 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**