figma_to_html_agent 추가 + MCP/Claude 설정

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>
2026-04-13 11:00:31 +09:00
parent 360cd8e44c
commit 51548fdc41
467 changed files with 25280 additions and 10 deletions
--- a/figma_to_html_agent/block-tests/bim-goal-circles.html
+++ b/figma_to_html_agent/block-tests/bim-goal-circles.html
@@ -0,0 +1,322 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<title>건설산업의 목표 (BIM의 목적) — 원형 다이어그램</title>
+<!--
+  ============================================================
+  Figma → HTML 수학적 변환 (bottom-up)
+  ============================================================
+  원본 Frame: 2195.21 × 1195 px (node 45:14, Frame 1171281189)
+  타겟: 1280 × 720 px (16:9)
+  Scale S = 1280 / 2195.21 = 0.58309
+  스케일 후: 1280 × 696.8 px
+
+  leaf 노드: 48개 (타이틀 2 삭제 → 46개 렌더링)
+  "오른쪽 상단" 그룹 offset: (133, 77) → scaled (77.6, 44.9)
+  ============================================================
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&display=swap" rel="stylesheet">
+<style>
+/* S = 0.58309 */
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  display: flex; justify-content: center; align-items: center;
+  min-height: 100vh; background: #f5f5f5;
+  font-family: 'Noto Sans KR', sans-serif;
+}
+.slide {
+  width: 1280px; height: 720px; background: #fff;
+  position: relative; display: flex; justify-content: center; align-items: center;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+}
+/* 블록: 2195.21×1195 → 1280×697 */
+.block {
+  width: 1280px; height: 697px;
+  background: #ffffff; /* 미리보기용 흰색 */
+  position: relative; overflow: hidden;
+}
+
+/* ============================================
+   배경 도형 (4개)
+   OX=133, OY=77 → scaled OX=77.6, OY=44.9
+   ============================================ */
+
+/* 17:1316 Rectangle 42333 — abs(415, 718) 763×351
+   grad(-90deg, transparent 14% → #D5AA89 84%) r=175.5 0 0 175.5
+   → scaled (242, 419) 445×205, r=102 0 0 102 */
+/* 배경 도형: gradient 각도 = 90 - Figma각도
+   border-radius는 PNG에서 확인한 방향 */
+
+/* 래퍼 회전 방식:
+   - 래퍼: pre-rotation 위치/크기 + transform: rotate()
+   - 도형: Figma 값 그대로, 래퍼 채움 */
+
+/* 42335: Figma grad=90° → CSS rotate(-90°) */
+.wrap-42335 {
+  position: absolute;
+  left: 464.5px; top: 154.5px; width: 424px; height: 205px;
+  transform: rotate(-90deg);
+}
+.shape-42335 {
+  width: 100%; height: 100%;
+  border-radius: 102px 0 0 102px;
+  background: linear-gradient(90deg, rgba(217,162,104,1) 37%, rgba(220,103,14,0) 89%);
+}
+
+/* 42334: Figma grad=0° → 회전 없음 */
+.wrap-42334 {
+  position: absolute;
+  left: 671px; top: 420px; width: 381px; height: 206px;
+}
+.shape-42334 {
+  width: 100%; height: 100%;
+  border-radius: 0 0 139px 139px;
+  background: linear-gradient(90deg, rgba(96,164,81,1) 0%, rgba(37,62,31,0) 79%);
+}
+
+/* 42333: Figma grad=-90° → CSS rotate(90°) */
+.wrap-42333 {
+  position: absolute;
+  left: 362px; top: 299px; width: 205px; height: 445px;
+  transform: rotate(90deg);
+}
+.shape-42333 {
+  width: 100%; height: 100%;
+  border-radius: 102px 0 0 102px;
+  background: linear-gradient(90deg, rgba(115,115,115,0) 14%, rgba(213,170,137,1) 84%);
+}
+
+/* 17:1315 배경 이미지 — abs(272, 921) 1768×274
+   → scaled (159, 537) 1031×160 */
+.bg-image {
+  position: absolute;
+  left: 159px; top: 537px; width: 1031px; height: 160px;
+  overflow: hidden;
+}
+.bg-image img {
+  width: 100%; height: 100%; object-fit: cover;
+}
+
+/* ============================================
+   큰 원 공통 (3개)
+   outer: 350→204, inner: 280→163
+   ============================================ */
+.big-circle {
+  position: absolute; width: 204px; height: 204px;
+  border-radius: 50%;
+  mix-blend-mode: multiply; /* Figma blend mode — MCP 미제공, 사용자 확인 */
+}
+.big-circle-inner {
+  position: absolute; width: 163px; height: 163px;
+  border-radius: 50%;
+  border: 2.9px solid #FFF; /* 5×S */
+  box-shadow: 0 0 5.8px 0 rgba(0,0,0,1); /* 10×S */
+}
+.big-circle-text {
+  position: absolute;
+  font-weight: 700; font-size: 29.2px; /* 50×S */
+  line-height: 1; letter-spacing: -0.05em;
+  text-align: center; color: #FFF;
+  padding-bottom: 7px; /* descender 보정 */
+}
+
+/* 생산성 향상 — Group abs(827, 718) → scaled (482, 419) */
+.circle-productivity       { left: 482px; top: 419px; background: linear-gradient(219deg, #D5AA89 14%, #737373 100%); }
+.circle-productivity-inner { left: 502px; top: 439px; background: linear-gradient(154deg, #897445 6%, #3E3523 62%); }
+.circle-productivity-text  { left: 507px; top: 491px; width: 153px; /* 262.92×S */ }
+
+/* 안전과 품질 — Group abs(986, 444) → scaled (575, 259) */
+.circle-safety       { left: 575px; top: 259px; background: linear-gradient(145deg, #FDC69E 5%, #E0782C 50%); }
+.circle-safety-inner { left: 595px; top: 279px; background: linear-gradient(145deg, #BC652B 5%, #A24200 50%); }
+.circle-safety-text  { left: 600px; top: 331px; width: 153px; text-shadow: 0 0 2.9px #CC5200; }
+
+/* 소통과 신뢰 — Group abs(1142, 718) → scaled (666, 419) */
+.circle-comm       { left: 666px; top: 419px; background: linear-gradient(146deg, #FFF 3%, #253E1F 94%); }
+.circle-comm-inner { left: 686px; top: 439px; background: linear-gradient(154deg, #296B55 6%, #123328 62%); }
+.circle-comm-text  { left: 692px; top: 487px; width: 153px; }
+
+/* ============================================
+   작은 원 공통 (6개)
+   outer: 130.9→76, inner: 78.96→46
+   ============================================ */
+.sm-circle {
+  position: absolute; width: 76px; height: 76px;
+  border-radius: 50%;
+  mix-blend-mode: multiply;
+}
+.sm-circle-inner {
+  position: absolute; width: 46px; height: 46px;
+  border-radius: 50%;
+  border: 1.2px solid #FFF; /* 2×S */
+  box-shadow: 0 0 5.8px 0 rgba(0,0,0,1);
+}
+.sm-circle-text {
+  position: absolute;
+  font-weight: 700; font-size: 26.2px; /* 45×S */
+  line-height: 1.111; letter-spacing: -0.05em;
+  text-align: center; color: #FFF;
+  text-shadow: 0 0 2.9px #CC5200;
+}
+
+/* 速 — abs(688, 721) → (401, 420) */
+.sm-speed       { left: 401px; top: 420px; background: linear-gradient(219deg, #D5AA89 14%, #737373 100%); }
+.sm-speed-inner { left: 416px; top: 435px; background: linear-gradient(154deg, #897445 6%, #3E3523 62%); }
+.sm-speed-text  { left: 411px; top: 445px; width: 57px; }
+
+/* 利 — abs(688, 927) → (401, 540) */
+.sm-profit       { left: 401px; top: 540px; background: linear-gradient(219deg, #D5AA89 14%, #737373 100%); }
+.sm-profit-inner { left: 416px; top: 555px; background: linear-gradient(154deg, #897445 6%, #3E3523 62%); }
+.sm-profit-text  { left: 411px; top: 565px; width: 57px; }
+
+/* 安 — abs(992, 260) → (579, 152) */
+.sm-safe       { left: 579px; top: 152px; background: linear-gradient(146deg, #D9C868 3%, #DC670E 94%); }
+.sm-safe-inner { left: 594px; top: 167px; background: linear-gradient(145deg, #BC652B 5%, #A24200 50%); }
+.sm-safe-text  { left: 588px; top: 176px; width: 57px; }
+
+/* 質 — abs(1204, 260) → (702, 152) */
+.sm-quality       { left: 702px; top: 152px; background: linear-gradient(146deg, #D9C868 3%, #DC670E 94%); }
+.sm-quality-inner { left: 717px; top: 167px; background: linear-gradient(145deg, #BC652B 5%, #A24200 50%); }
+.sm-quality-text  { left: 712px; top: 176px; width: 57px; }
+
+/* 通 — abs(1505, 721) → (878, 420) */
+.sm-connect       { left: 878px; top: 420px; background: linear-gradient(146deg, #60A451 3%, #253E1F 94%); }
+.sm-connect-inner { left: 893px; top: 435px; background: linear-gradient(154deg, #296B55 6%, #123328 62%); }
+.sm-connect-text  { left: 887px; top: 445px; width: 57px; }
+
+/* 信 — abs(1505, 927) → (878, 540) */
+.sm-trust       { left: 878px; top: 540px; background: linear-gradient(146deg, #60A451 3%, #253E1F 94%); }
+.sm-trust-inner { left: 893px; top: 555px; background: linear-gradient(154deg, #296B55 6%, #123328 62%); }
+.sm-trust-text  { left: 887px; top: 565px; width: 57px; }
+
+/* 점선 타원 → SVG로 전환 (CSS 제거) */
+
+/* ============================================
+   텍스트 그룹 (6×2 = 12개)
+   제목: 700 40px→23.3px, 설명: 500 30px→17.5px
+   descender 보정: padding-bottom 5px
+   (Noto Sans KR, 23.3px: half_leading = (1-1.448)/2 × 23.3 = -5.22 → pb:6)
+   (17.5px: half_leading = |(1.167-1.448)/2| × 17.5 = 2.46 → pb:3)
+   ============================================ */
+.txt-title {
+  position: absolute;
+  font-weight: 700; font-size: 23.3px; /* 40×S */
+  line-height: 2.375;
+  padding-bottom: 6px;
+  white-space: nowrap;
+  /* Figma에서는 1줄이지만 Chrome에서 글자 넓이 차이로 줄바꿈 발생 방지 */
+}
+.txt-desc {
+  position: absolute;
+  font-weight: 500; font-size: 17.5px; /* 30×S */
+  line-height: 1.167;
+  color: #525151;
+  padding-bottom: 3px;
+}
+
+/* 좌상: 안전성 제고 */
+.txt-safe-t { left: 454px; top: 139px; width: 113px; color: #CC5200; text-align: right; }
+.txt-safe-d { left: 271px; top: 184px; width: 296px; text-align: right; }
+
+/* 우상: 품질 향상 */
+.txt-qual-t { left: 797px; top: 139px; width: 92px; color: #CC5200; text-align: right; }
+.txt-qual-d { left: 797px; top: 184px; width: 296px; text-align: left; }
+
+/* 좌중: 신속ㆍ정확성 증진 */
+.txt-fast-t { left: 78px; top: 405px; width: 310px; color: #604F32; text-align: right; }
+.txt-fast-d { left: 108px; top: 457px; width: 279px; text-align: right; }
+
+/* 우중: 소통ㆍ이해 원할 */
+.txt-comm-t { left: 963px; top: 405px; width: 156px; color: #124133; text-align: left; }
+.txt-comm-d { left: 963px; top: 454px; width: 250px; text-align: left; }
+
+/* 좌하: 비용저감ㆍ부가가치 창출 */
+.txt-cost-t { left: 127px; top: 525px; width: 260px; color: #604F32; text-align: right; }
+.txt-cost-d { left: 137px; top: 567px; width: 250px; text-align: right; }
+
+/* 우하: 신뢰ㆍ투명성 강화 */
+.txt-trust-t { left: 963px; top: 526px; width: 177px; color: #124133; text-align: left; }
+.txt-trust-d { left: 963px; top: 579px; width: 317px; text-align: left; }
+
+</style>
+</head>
+<body>
+
+<div class="slide">
+  <div class="block">
+
+    <!-- ===== Figma 레이어 순서 (뒤→앞) ===== -->
+
+    <!-- 1~4: 배경 도형 (래퍼 회전 방식) + 이미지 -->
+    <div class="wrap-42335"><div class="shape-42335"></div></div>
+    <div class="wrap-42334"><div class="shape-42334"></div></div>
+    <div class="bg-image"><img src="assets/bg_bottom_image.png" alt="bg"></div>
+    <div class="wrap-42333"><div class="shape-42333"></div></div>
+
+    <!-- 5~7: 큰 원 3개 -->
+    <div class="big-circle circle-productivity"></div>
+    <div class="big-circle-inner circle-productivity-inner"></div>
+    <div class="big-circle-text circle-productivity-text">생산성<br>향상</div>
+
+    <div class="big-circle circle-safety"></div>
+    <div class="big-circle-inner circle-safety-inner"></div>
+    <div class="big-circle-text circle-safety-text">안전과<br>품질</div>
+
+    <div class="big-circle circle-comm"></div>
+    <div class="big-circle-inner circle-comm-inner"></div>
+    <div class="big-circle-text circle-comm-text">소통과<br>신뢰</div>
+
+    <!-- 8~13: 텍스트 6그룹 -->
+    <div class="txt-title txt-trust-t">신뢰ㆍ투명성 강화</div>
+    <div class="txt-desc txt-trust-d">3D 모델을 통한 오류<br>최소화 및 Claim 예방</div>
+    <div class="txt-title txt-comm-t">소통ㆍ이해 원할</div>
+    <div class="txt-desc txt-comm-d">성과품, Solution을 통한<br>사용 편리성, 협업 및 의사소통 강화</div>
+    <div class="txt-title txt-fast-t">신속ㆍ정확성 증진</div>
+    <div class="txt-desc txt-fast-d">Analogue 기반 업무를<br>Digital화 하는 Process 혁신</div>
+    <div class="txt-title txt-cost-t">비용저감ㆍ부가가치 창출</div>
+    <div class="txt-desc txt-cost-d">건설비용 및 유지관리비 감소,<br>인력투입 최소화 등 생산성 향상</div>
+    <div class="txt-title txt-qual-t">품질 향상</div>
+    <div class="txt-desc txt-qual-d">Copy &amp; Paste로 하향 평준화된<br>기존 성과물의 품질 향상</div>
+    <div class="txt-title txt-safe-t">안전성 제고</div>
+    <div class="txt-desc txt-safe-d">시설물의 요구성능의 만족,<br>건설중 및 운영중 안전확보</div>
+
+    <!-- 14~15: 커브 599, 597 -->
+    <img src="assets/ellipse_599.svg" style="position:absolute;left:617px;top:217px;width:122px;height:58px;">
+    <img src="assets/ellipse_597.svg" style="position:absolute;left:443px;top:459px;width:58px;height:122px;">
+
+    <!-- 16~17: 작은원 速, 利 -->
+    <div class="sm-circle sm-speed"></div>
+    <div class="sm-circle-inner sm-speed-inner"></div>
+    <div class="sm-circle-text sm-speed-text">速</div>
+    <div class="sm-circle sm-profit"></div>
+    <div class="sm-circle-inner sm-profit-inner"></div>
+    <div class="sm-circle-text sm-profit-text">利</div>
+
+    <!-- 18: 커브 600 (速/利 위에!) -->
+    <img src="assets/ellipse_600.svg" style="position:absolute;left:853px;top:459px;width:58px;height:122px;">
+
+    <!-- 19~22: 작은원 安, 質, 通, 信 -->
+    <div class="sm-circle sm-safe"></div>
+    <div class="sm-circle-inner sm-safe-inner"></div>
+    <div class="sm-circle-text sm-safe-text">安</div>
+    <div class="sm-circle sm-quality"></div>
+    <div class="sm-circle-inner sm-quality-inner"></div>
+    <div class="sm-circle-text sm-quality-text">質</div>
+    <div class="sm-circle sm-connect"></div>
+    <div class="sm-circle-inner sm-connect-inner"></div>
+    <div class="sm-circle-text sm-connect-text">通</div>
+    <div class="sm-circle sm-trust"></div>
+    <div class="sm-circle-inner sm-trust-inner"></div>
+    <div class="sm-circle-text sm-trust-text">信</div>
+
+    <!-- 텍스트: 우하 신뢰ㆍ투명성 -->
+    <div class="txt-title txt-trust-t">신뢰ㆍ투명성 강화</div>
+    <div class="txt-desc txt-trust-d">3D 모델을 통한 오류<br>최소화 및 Claim 예방</div>
+
+  </div>
+</div>
+
+</body>
+</html>