Kyeongmin/Figma-to-HTML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
beb5fd0c610ebbdd0203281ba37535516db347cd
Figma-to-HTML/block-tests/bim-3roles-cards_flat.md
kyeongmin beb5fd0c61 Figma-to-HTML 에이전트 초기 커밋 
- 10단계 변환 프로세스 (PROCESS.md)
- 수학 공식 레퍼런스 (MATH.md, gradient_math.py)
- CSS 보정 규칙 R1~R16 (RULES.md)
- 작업 규율 7개 규칙 (PROCESS-CONTROL.md)
- 8개 Figma 프레임 1:1 HTML 변환물 (block-tests/)
- 8개 Jinja2 템플릿 staging (templates_staging/)
- 변환 완료 도서관 + 디자인 인사이트 (blocks_index.md)
- 사용법 가이드 (README.md)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-13 11:16:33 +09:00

5.8 KiB
Raw Blame History

Frame 1171281191 — BIM 3역할(발주자/시공자/설계자) 목표 카드

원본: 2600.998 × 1927.004 px Scale: × 0.49213 → 1280 × 948.5 px Node ID: 45:16 (Figma) 패턴 ID (잠정): cards-3col-persona 슬라이드 컨테이너: 1280 × 949 (16:9 초과. design_agent 본체 이전 시 재배치 필요)

계층 경로

Frame 45:16 "Frame 1171281191" (2600.998 × 1927.004)
└─ 17:1450 "오른쪽" (0,0) full size
   ├─ 17:1451 Frame 1171276940 (0, 1204.82) 2600.998 × 677.02 — bottom area placeholder
   ├─ 17:1452 Group 1171276418 (43, 82.30) 2508 × 1844.70
   │   └─ 17:1453 Group 1171276417
   │       ├─ 17:1454 image 2977 (43, 82.30) 833 × 1844.70   ← 좌 컬럼 BG
   │       ├─ 17:1455 image 2978 (880, 82.30) 834 × 1844.70  ← 중 컬럼 BG (동일 src 2977)
   │       └─ 17:1456 image 2979 (1718, 82.30) 833 × 1844.70 ← 우 컬럼 BG (동일 src 2977)
   │   ├─ 17:1457 image 2986 (114.01, 180.66) 691 × 1510.49 opacity 0.80  ← 좌 오버레이
   │   ├─ 17:1458 image 2987 (948.01, 180.66) 692 × 1053.83 opacity 0.80  ← 중 오버레이
   │   ├─ 17:1459 image 2988 (1783.01, 180.66) 691 × 1128.10 opacity 0.80 ← 우 오버레이
   │   └─ 17:1460 image 3574 (108, 1150.18) 697 × 700.55 r=49 opacity 0.70 ← 좌하 사진
   ├─ 17:1461 Group 1171276695 "시공자 뱃지" (1092.88, 0) 396.02 × 397.47
   │   ├─ 17:1462 image 2984 outer (1092.88, 0) 396.02 × 397.47
   │   ├─ 17:1463 image 2981 inner (1139.46, 51.84) 301.83 × 301.91
   │   └─ 17:1464 TEXT "시공자 목표" center (1291.9, 256.94) 179.27 × 130.47
   │            #445a2f Bold, "시공자" 65px / "목표" 50px
   ├─ 17:1465 Group 1171276696 "설계자 뱃지" (1945.7, 0) 396.02 × 397.47
   │   ├─ 17:1466 image 2985 outer
   │   ├─ 17:1467 image 2982 inner
   │   └─ 17:1468 TEXT "설계자 목표" #743002, 65/50px
   ├─ 17:1469 Group 1171276694 "발주자 뱃지" (265.38, 0) 396.02 × 397.47
   │   ├─ 17:1470 image 2983 outer
   │   ├─ 17:1471 image 2980 inner
   │   └─ 17:1472 TEXT "발주자 목표" #285b4a, 65/50px
   ├─ 17:1473 TEXT "발주자 본문" (171.18, 421.58) 643.4 × 750.34
   │            font 40 Medium black, leading 85, 7줄
   ├─ 17:1474 TEXT "시공자 본문" (1004.79, 417.52) 624.3 × 650.61
   │            font 40 Medium, mixed leading 50/85, 12+줄 (긴 본문)
   ├─ 17:1475 TEXT "설계자 본문" (1842.01, 417.52) 664.7 × 750.34
   │            font 40 Medium, mixed, 8+줄
   ├─ 17:1476 image 3571 (948, 1150.18) 697 × 700.55 r=50 opacity 0.70 ← 중하 사진
   ├─ 17:1477 Group "체크박스 우 6개" (1794.78, 446.04~919.74)
   │            6개 아이콘 32.41×32.53 image 3005 (체크박스)
   │            y: 446, 526, 661, 746, 833, 919
   ├─ 17:1484 Group "체크박스 중 7개" (961.20, 447.04~1056.84)
   │            7개 아이콘. y: 447, 530, 609, 744, 832, 969, 1056
   ├─ 17:1492 Group "체크박스 좌 7개" (127.63, 449.63~963.46)
   │            7개 아이콘. y: 449, 535, 620, 704, 791, 877, 963
   └─ 17:1500 image 3572 (1781, 1150.18) 697 × 700.55 r=50 opacity 0.70 ← 우하 사진

이상 탐지 결과

검사 결과
회전 단일문자 없음
좁은 박스 세로 텍스트 없음
중복 노드 image 2977이 image 2978/2979로 3번 사용됨 — 의도된 재사용 (각 컬럼의 BG가 동일 텍스처). image 3005는 20개 인스턴스 모두 동일 src — 체크박스 아이콘
Vector metadata 회전 불일치 없음 (vector 노드 없음)
텍스트 leading 혼합 17:1474 시공자 본문에서 leading 50/85/40 혼재 — Figma 원본의 line break 표현 의도 그대로 보존
색상 시스템 발주자 #285b4a (녹), 시공자 #445a2f (올리브), 설계자 #743002 (브라운). 각 컬럼 컬러 코드

패턴 분류

이 패턴은 기존 cycle-3way-intersect와 다름:

  • cycle: 3원 교차 다이어그램 (관계/통합)
  • cards-3col-persona: 3 stakeholder 세로 카드 + 본문 리스트 (병렬/대조)

기존 legacy prerequisites-3col와도 다름:

  • legacy: 색상바 + 한자 라벨 + 키워드 카드
  • cards-3col-persona: 사진 배경 + 원형 뱃지 + 긴 본문 리스트

→ 새 패턴 등록. 패턴 카탈로그에 cards-3col-persona 추가, 등장 횟수 1.

변형 가능 축

  • columns[N]: 현재 3, 가능 2~4
    • 각 column: bg_image, overlay_image, badge_outer, badge_inner, badge_label, role_color, body_text, checkbox_count, bottom_photo
  • role_colors[3]: 현재 #285b4a / #445a2f / #743002 (역할별)
  • body_text_lines[]: 각 컬럼당 6~10줄
  • checkbox_count[col]: 현재 7/7/6, 가능 5~10
  • bottom_photos[N]: 현재 3 (둥근 모서리 사진), 가능 0~N
  • badge_label_2lines: "역할이름"/"목표" 형식 (변형 가능)

자산 매핑

hash 의미 라벨 사용처
4a17cd1d... column_bg_texture 3컬럼 BG (재사용 ×3)
e837f870... overlay_left 좌 컬럼 컬러 오버레이
755384bd... overlay_mid 중 컬럼 컬러 오버레이
5577732e... overlay_right 우 컬럼 컬러 오버레이
77f31997... badge_outer_owner 발주자 outer circle
e64c967d... badge_inner_owner 발주자 inner circle
1550ec75... badge_outer_builder 시공자 outer circle
85beaf9d... badge_inner_builder 시공자 inner circle
9ac089fa... badge_outer_designer 설계자 outer circle
4b534ccf... badge_inner_designer 설계자 inner circle
6896d5c2... checkbox_icon 체크박스 (재사용 ×20)
d2c070f2... bottom_photo_left 하단 좌 사진
2a6a58e7... bottom_photo_mid 하단 중 사진
39113493... bottom_photo_right 하단 우 사진
Reference in New Issue View Git Blame Copy Permalink