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
commit beb5fd0c61
205 changed files with 19164 additions and 0 deletions
--- a/block-tests/bim-future-statement.html
+++ b/block-tests/bim-future-statement.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<title>BIM 미래 선언 (Frame 1171281207)</title>
+<!--
+  ============================================================
+  Figma → HTML 1:1 변환
+  원본: 3547 × 163 px (node 51:170, Frame 1171281207)
+  Scale: × 0.36088 → 1280 × 58.8 px
+
+  패턴: statement-pill-highlight
+  단일 메시지 + 일부 span highlighted + pill 배경 PNG
+  ============================================================
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet">
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: 'Noto Sans KR', sans-serif;
+  background: #e8ecf0;
+  display: flex; justify-content: center; align-items: center;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.slide {
+  width: 1280px; height: 720px;
+  background: #ffffff;
+  position: relative;
+  display: flex; justify-content: center; align-items: center;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
+}
+
+.block {
+  width: 1280px;
+  height: 58.8px;       /* 163 × 0.36088 */
+  position: relative;
+  overflow: hidden;
+}
+
+.inner {
+  position: absolute;
+  left: 0; top: 0;
+  width: 3547px;
+  height: 163px;
+  transform: scale(0.360869);
+  transform-origin: top left;
+}
+
+/* 배경 pill (CSS gradient, border-radius 97 = 완전 캡슐)
+   원본 이미지 픽셀 분석:
+     x=5%: #3b3523, x=50%: #263a2a, x=95%: #113f31
+     수직: 균일 (수평 gradient만)
+   → linear-gradient(90deg, ...)
+   원본에 미세한 네트워크 텍스처 패턴 있었으나 CSS gradient로 대체
+*/
+.banner-bg {
+  position: absolute;
+  left: 0; top: 0;
+  width: 3547px;
+  height: 163px;
+  border-radius: 97px;
+  background: linear-gradient(90deg, #3b3523 5%, #263a2a 50%, #113f31 95%);
+}
+
+/* 텍스트: center (1671.5, 78), font 80 Bold White, line-height 90 */
+.banner-text {
+  position: absolute;
+  /* translate-x-1/2 translate-y-1/2 → top-left = (center - w/2, center - h/2) */
+  left: 205px;          /* 1671.5 - 2933/2 = 205 */
+  top: 33px;            /* 78 - 90/2 = 33 */
+  width: 2933px;
+  height: 90px;
+  font-weight: 700;
+  font-size: 80px;
+  line-height: 90px;
+  color: #ffffff;
+  text-align: center;
+  letter-spacing: -0.16px;
+  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+  white-space: nowrap;
+  word-break: keep-all;
+}
+.banner-text .highlight {
+  color: #fe3;          /* highlighted span (yellow) */
+}
+</style>
+</head>
+<body>
+
+<div class="slide">
+  <div class="block">
+    <div class="inner">
+      <div class="banner-bg"></div>
+      <div class="banner-text">수행과정 연속화와 관리체계 일원화된 형태의 <span class="highlight">전용ㆍ전문 S/W 개발</span> 없이는 미래가 없다.</div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>