add: figma_to_html_agent/blocks/ + 변환 도구 docs 갱신
전체 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>
This commit is contained in:
86
figma_to_html_agent/blocks/1171281209/flat.md
Normal file
86
figma_to_html_agent/blocks/1171281209/flat.md
Normal file
@@ -0,0 +1,86 @@
|
||||
# Frame 1171281209 — 실측 기록 (flat)
|
||||
|
||||
> 원본: 1697 × 582 px (node 145:8523, file 9S6LsQyO6zlRxtiqZccOUM, page 29:373)
|
||||
> 패턴: bordered-3paragraphs-with-3emphasis-labels (외곽 빨간 테두리 + 상단 타이틀 pill + 좌 본문 3단 + 우 강조 라벨 3개)
|
||||
> Scale: **min(1280/1697, 720/582) = 1280/1697 = 0.75427** (width fit, 1280×439 block)
|
||||
|
||||
## 구조 (bottom-up)
|
||||
|
||||
```
|
||||
Frame 145:8523 "Frame 1171281209" (1697 × 582)
|
||||
│
|
||||
├─ ① 145:8524 우측 그라디언트 패널 (752, 16) 941×564
|
||||
│ border-tr-radius 20, border-br-radius 20
|
||||
│ bg: linear-gradient(to-l, #F5D4C7 33% → white 91%) — 우측 핑크 → 좌측 흰
|
||||
│
|
||||
├─ ② 145:8536 외곽 테두리 박스 (0, 12.43) 1697×569.573
|
||||
│ border: 10px solid #9C0E0E, rounded 20, fill 투명
|
||||
│ (전체 콘텐츠 둘러싸는 강조 프레임)
|
||||
│
|
||||
├─ ③ 145:8537 image 4014 (타이틀 pill bg) (527, 0) 628×97.345 ← title_pill.png
|
||||
├─ ④ 145:8538 TEXT "현존 상용 S/W의 현실"
|
||||
│ center=(841, 42.46), w=540, h=66.278 → top-left=(571, 9.32)
|
||||
│ 50px Bold white, 가운데 정렬
|
||||
│
|
||||
├─ ⑤ 좌 본문 3단 (각 단: bullet icon + paragraph)
|
||||
│ │
|
||||
│ ├─ 145:8531 bullet icon (39, 130.48) 30×31 ← bullet_arrow.png (▶)
|
||||
│ └─ 145:8530 단락1 (80, 130.48) 883×124.27 — 30px Regular black + 30px Bold #CC5200
|
||||
│ "토목 분야는 [각 영역이 고도로 세분화]되어 있음에도,
|
||||
│ 현재는 건축용으로 개발된 S/W를 일부 수정하여 적용하는 수준에 그침.
|
||||
│ 이는 각 분야의 특수성을 반영한 [전문성 및 효율성 확보에 큰 걸림돌]이 됨."
|
||||
│
|
||||
│ ├─ 145:8528 bullet icon (39, 306.54) 30×31 ← 동일 src
|
||||
│ └─ 145:8527 단락2 (80, 302.39) 1076×82.847
|
||||
│ "[현존 상용 소프트웨어]는 사용자 확보 및 판매 수입이라는 한계로 인해 [범용적 개발에 집중]
|
||||
│ 이 때문에 특정 분야에 최적화된 전문가용 수준의 [전용 소프트웨어 개발에는 한계]가 따름."
|
||||
│
|
||||
│ ├─ 145:8534 bullet icon (39, 437.02) 30×31
|
||||
│ └─ 145:8533 단락3 (80, 432.88) 1021×82.847
|
||||
│ "각 분야의 시장 주도업체 소프트웨어조차 [시공 및 유지관리 기능은 개념적인 수준]임.
|
||||
│ 결과적으로 [실무에 직접 적용할 수 있는 프로그램은 전무]한 실정임."
|
||||
│
|
||||
└─ ⑥ 우 강조 라벨 3개 — bg-clip-text 그라디언트 (red → #711E1E to-top 79.5%)
|
||||
60px Black, text-shadow 0 10px 6px rgba(0,0,0,0.25)
|
||||
translate-x-1/2 → 박스 left = stated_left - w/2
|
||||
|
||||
├─ 145:8539 "토목 전문성 부족" center_left=1443.99, w=414, top=124.27 → top-left=(1237, 124)
|
||||
├─ 145:8540 "비효율성" center_left=1443.49, w=221, top=259.93 → top-left=(1333, 260)
|
||||
└─ 145:8541 "실무 적용 불가능" center_left=1443.99, w=414, top=395.59 → top-left=(1237, 396)
|
||||
```
|
||||
|
||||
## 에셋 (2개)
|
||||
|
||||
| 파일 | 의미 | 크기 | 사용 |
|
||||
|------|------|------|------|
|
||||
| `assets/bullet_arrow.png` | ▶ 화살표 모양 불릿 아이콘 | 30×31 | **3×** (재사용) |
|
||||
| `assets/title_pill.png` | 상단 타이틀 빨간 pill 배경 | 628×97 | 1× |
|
||||
|
||||
## 이상 탐지 결과
|
||||
|
||||
| 검사 | 결과 |
|
||||
|------|------|
|
||||
| 회전 단일문자 | 없음 |
|
||||
| 좁은 박스 세로 텍스트 | 없음 |
|
||||
| 중복 노드 | bullet_arrow.png 동일 src 3× — 정상 |
|
||||
| Vector 좌표 metadata vs design_context | 일치 |
|
||||
| 회전 적용 | 없음 |
|
||||
| **z-order 비정상** | 우측 gradient 패널(145:8524)이 본문/라벨 BEFORE 그려짐 → 시각 영향 OK (BG 역할) |
|
||||
| **타이틀 pill 위치** | top=0이고 외곽 border top=12.43이라, pill이 border 위에 살짝 걸침. 의도된 디자인 |
|
||||
|
||||
## 변형 가능 축
|
||||
|
||||
- **paragraphs[N=3] (required)** — cardinality 3 고정
|
||||
- `body` (required) — 30px Regular + 30px Bold #CC5200 강조 (인라인)
|
||||
- `bullet_icon` (required, ▶ 모양 PNG)
|
||||
- **emphasis_labels[N=3] (required)** — 우측 강조 라벨, paragraphs와 1:1 매핑
|
||||
- `text` (required, 60px Black gradient)
|
||||
- `title` (required) — 50px Bold white on red pill
|
||||
- `outer_border_color` — #9C0E0E (red, 정책/문제 진단 톤)
|
||||
- `right_panel_gradient` — 핑크→흰 (분위기)
|
||||
|
||||
## Sub-patterns
|
||||
|
||||
- `bordered-frame-with-title-pill-overlap` — 외곽 테두리 + 상단 타이틀 pill 일부 위 걸침 패턴
|
||||
- `bullet-paragraph-with-inline-highlight` — ▶ 아이콘 + 본문 인라인 색상 강조 (1171281179와 다른 스타일: 강조 폰트 사이즈 동일, 색만 변경)
|
||||
- `right-emphasis-labels-gradient-text` — bg-clip-text 그라디언트 + 큰 강조 라벨 (red → dark)
|
||||
Reference in New Issue
Block a user