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>
3.8 KiB
3.8 KiB
Figma → HTML 변환 파이프라인
핵심 운영 절차는 PROCESS.md, 수학 공식은 MATH.md, CSS 보정 규칙은 RULES.md, 변환 완료 목록은 blocks_index.md.
현재 방향 (2026-04 확정)
프로세스 우선, 인벤토리 후순위. 35개 프레임을 사전 분류하지 않고, 1세션 1프레임씩 변환하면서 패턴이 발견되면 그때 템플릿화한다.
폐기된 접근
| 단계 | 폐기 사유 |
|---|---|
| work-creating-work. 35개는 사람이 5분이면 훑음 | |
| leaf 카운트는 약한 시그널. 패턴 분류에 부정확 | |
| 약한 지문으로 자동 군집 시 잘못 묶임. 사람 눈이 빠름 |
대체: 매 변환 직후 blocks_index.md에 1줄 메모. 패턴은 bottom-up으로 발견된다.
활성 단계
[루프, 1세션 1프레임]
A. 1:1 변환 ← PROCESS.md 10단계 실행
↓
B. 변형 축 메모 ← flat.md에 1~5줄 작성
↓
C. blocks_index.md 1줄 추가
↓
D. 패턴 2번째 등장? → 템플릿화 (Jinja2 + catalog.yaml 등록)
↓
design_agent/templates/blocks/{category}/
↓
[다음 프레임은 새 세션에서]
현황 (2026-04-10)
| 항목 | 상태 |
|---|---|
| 핵심 문서 (CLAUDE/PROCESS/MATH/RULES/PROCESS-CONTROL) | ✅ 정리 완료 |
| 재사용 스크립트 (scripts/gradient_math.py) | ✅ 자체 회귀 테스트 통과 |
| 변환 완료 블록 (정적 HTML) | 2 / N |
| 템플릿화 (Jinja2) | 0 |
| catalog.yaml 등록 (새 패턴) | 0 |
| design_agent 본체 통합 | 0 |
변환 완료 블록
| # | slug | frame | pattern | 상태 |
|---|---|---|---|---|
| 1 | prerequisites-3col | 45:15 | 3-column-comparison | static (이전 작업) |
| 2 | bim-goals-3circles | 66:310 | cycle-3way-intersect | static (Pure CSS, 검증 ✓) |
자세한 내역: blocks_index.md
대상 Figma 파일
- 파일키:
9S6LsQyO6zlRxtiqZccOUM("Untitled") - 페이지: Page 2
- 추정 프레임 수: ~35개 (확정 안 됨, 사용자가 매번 선택)
다음 액션
- 사용자가 Figma desktop에서 다음 변환할 프레임 선택
- 에이전트가 PROCESS.md의 10단계 그대로 실행
- 변환 후 blocks_index.md 업데이트
- 다음 프레임은 새 세션에서
학습된 규칙 (이 프로젝트에서 발견)
RULES.md R1~R12에 정리됨
- Figma MCP는 rotation 미제공 → bbox 비율로 감지 (R2)
- CSS line-height:1 → descender 잘림 → padding-bottom 보정 (R1)
- Figma 세로 텍스트 = 좁은 박스 + 가로 텍스트 → HTML
<br>방식 (R3) - 흰 텍스트 stroke → HTML에서 비주얼 안 좋음 → 제거
- 미리보기 배경은 항상 흰색 (R7)
- 다중 fills → 최상단만 사용 (R5)
- 동일 좌표 중복 노드 → 1개만 렌더링 (R6)
- 순수 CSS 우선, SVG는 곡선/필터에만 (R9, 1171281211 변환에서 확정)
- plus-darker → multiply 교체 (R10, Safari 외 호환)
- Stroke inside/outside 구분 → box-sizing 결정 (R11)
- viewBox padding 그라데이션 좌표 remap 필수 (R12)
- Vector 노드 metadata bbox는 회전된 좌표 → React wrapper 좌표 신뢰
블록 라이브러리 통합 경로 (Stage E~G, 미래)
figma_to_html_agent/templates/ ← Jinja2 템플릿 임시 저장소
↓
design_agent/templates/blocks/{category}/{pattern_id}.html.j2
design_agent/templates/catalog.yaml ← when/slots/min_size_px 등록
↓
design_agent Phase Q 블록 선택 단계와 자동 연결
↓
사용자 콘텐츠 → 존 크기 → 패턴 매칭 → 블록 선택 → 슬롯 채우기 → 렌더