kyeongmin
9fbe3ac90c
전체 401 files (397 추가 + 4 수정), 14304 insertions.
추가:
- figma_to_html_agent/blocks/ — Figma 변환 결과 (32 frame, ~79MB).
각 frame folder = {analysis.md, flat.md, texts.md, index.html, assets/,
_renders/, _render.py, RELATIONSHIPS.md / STATUS.md / classification.md
(일부 frame)}.
Phase Z 의 *figma source layer* — runtime 에서 직접 사용 X, contract /
partial / builder adapter (미래 axis A) 의 source.
- figma_to_html_agent/DISCUSSION-SUMMARY-20260411.md — 변환 설계 회의 기록.
- figma_to_html_agent/HARNESS.md — 변환 검증 harness.
- figma_to_html_agent/scripts/fetch_figma_screenshots.py — Figma 스크린샷 자동 수집.
수정:
- figma_to_html_agent/PROCESS-CONTROL.md / PROCESS.md / RULES.md —
변환 프로세스 / 룰 갱신 (R8/R9 lock 강화 등).
- figma_to_html_agent/blocks_index.md — 32 frame 인덱스 갱신.
Phase Z 영향 0 (figma_to_html_agent/blocks/ 가 V4 catalog +
templates/phase_z2/families adapter 의 source — runtime 에서 직접 import X).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
3.7 KiB
3.7 KiB
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