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