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>
99 lines
3.8 KiB
Markdown
99 lines
3.8 KiB
Markdown
# Figma → HTML 변환 파이프라인
|
|
|
|
> 핵심 운영 절차는 [PROCESS.md](PROCESS.md), 수학 공식은 [MATH.md](MATH.md), CSS 보정 규칙은 [RULES.md](RULES.md), 변환 완료 목록은 [blocks_index.md](blocks_index.md).
|
|
|
|
## 현재 방향 (2026-04 확정)
|
|
|
|
**프로세스 우선, 인벤토리 후순위.** 35개 프레임을 사전 분류하지 않고, 1세션 1프레임씩 변환하면서 패턴이 발견되면 그때 템플릿화한다.
|
|
|
|
### 폐기된 접근
|
|
|
|
| 단계 | 폐기 사유 |
|
|
|------|---------|
|
|
| ~~Stage 1: Figma 인벤토리 일괄 추출~~ | work-creating-work. 35개는 사람이 5분이면 훑음 |
|
|
| ~~Stage 2: 노드 수 기반 지문~~ | leaf 카운트는 약한 시그널. 패턴 분류에 부정확 |
|
|
| ~~Stage 3: 자동 군집~~ | 약한 지문으로 자동 군집 시 잘못 묶임. 사람 눈이 빠름 |
|
|
|
|
**대체:** 매 변환 직후 [blocks_index.md](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](blocks_index.md)
|
|
|
|
## 대상 Figma 파일
|
|
|
|
- 파일키: `9S6LsQyO6zlRxtiqZccOUM` ("Untitled")
|
|
- 페이지: Page 2
|
|
- 추정 프레임 수: ~35개 (확정 안 됨, 사용자가 매번 선택)
|
|
|
|
## 다음 액션
|
|
|
|
1. 사용자가 Figma desktop에서 다음 변환할 프레임 **선택**
|
|
2. 에이전트가 PROCESS.md의 10단계 그대로 실행
|
|
3. 변환 후 blocks_index.md 업데이트
|
|
4. 다음 프레임은 **새 세션에서**
|
|
|
|
## 학습된 규칙 (이 프로젝트에서 발견)
|
|
|
|
> [RULES.md](RULES.md) R1~R12에 정리됨
|
|
|
|
1. Figma MCP는 rotation 미제공 → bbox 비율로 감지 (R2)
|
|
2. CSS line-height:1 → descender 잘림 → padding-bottom 보정 (R1)
|
|
3. Figma 세로 텍스트 = 좁은 박스 + 가로 텍스트 → HTML `<br>` 방식 (R3)
|
|
4. 흰 텍스트 stroke → HTML에서 비주얼 안 좋음 → 제거
|
|
5. 미리보기 배경은 항상 흰색 (R7)
|
|
6. 다중 fills → 최상단만 사용 (R5)
|
|
7. 동일 좌표 중복 노드 → 1개만 렌더링 (R6)
|
|
8. **순수 CSS 우선, SVG는 곡선/필터에만** (R9, 1171281211 변환에서 확정)
|
|
9. **plus-darker → multiply 교체** (R10, Safari 외 호환)
|
|
10. **Stroke inside/outside 구분** → box-sizing 결정 (R11)
|
|
11. **viewBox padding 그라데이션 좌표 remap** 필수 (R12)
|
|
12. **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 블록 선택 단계와 자동 연결
|
|
↓
|
|
사용자 콘텐츠 → 존 크기 → 패턴 매칭 → 블록 선택 → 슬롯 채우기 → 렌더
|
|
```
|