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-future-statement.html
+++ b/figma_to_html_agent/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>