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>

block-tests/assets/shared/29c778b566aca6778f505874f21670de129351f8.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 22.4 16.8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M21.4629 0.5L11.1191 15.8984L0.930664 0.5H21.4629Z" fill="var(--fill-0, black)" stroke="var(--stroke-0, white)"/>
+</svg>

block-tests/assets/shared/42b569ef8be40cb859fc5aa4fcbaa6310f2478c1.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1080 119.144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Rectangle 42421" d="M0 50C0 22.3858 22.3858 1.3574e-10 50 1.3202e-10L1030 0C1057.61 0 1080 22.3858 1080 50V69.1436C1080 96.7578 1057.61 119.144 1030 119.144H50C22.3858 119.144 0 96.7578 0 69.1436V59.5718V50Z" fill="url(#paint0_linear_102_194)"/>
+<defs>
+<linearGradient id="paint0_linear_102_194" x1="1370.18" y1="59.5718" x2="290.181" y2="59.5718" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A5A196" stop-opacity="0.5"/>
+<stop offset="1" stop-color="#39321E"/>
+</linearGradient>
+</defs>
+</svg>

block-tests/assets/shared/5d27ecb194e670c9af26e98d11075b86c40efffa.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1080 118.047" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Rectangle 42422" d="M0 50C0 22.3858 22.3858 -1.00084e-07 50 0L1030 3.55188e-06C1057.61 3.65196e-06 1080 22.3858 1080 50V68.0473C1080 95.6616 1057.61 118.047 1030 118.047L50 118.047C22.3858 118.047 0 95.6616 0 68.0474V50Z" fill="url(#paint0_linear_102_198)"/>
+<defs>
+<linearGradient id="paint0_linear_102_198" x1="1080" y1="59.0233" x2="1.03314e-06" y2="59.0233" gradientUnits="userSpaceOnUse">
+<stop stop-color="#296B55" stop-opacity="0.5"/>
+<stop offset="1" stop-color="#032118"/>
+</linearGradient>
+</defs>
+</svg>

block-tests/assets/shared/6d311a18898deded5376b25996a13757e8c42d17.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1080 119.144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Rectangle 42421" d="M0 50C0 22.3858 22.3858 1.3574e-10 50 1.3202e-10L1030 0C1057.61 0 1080 22.3858 1080 50V69.1436C1080 96.7578 1057.61 119.144 1030 119.144H50C22.3858 119.144 0 96.7578 0 69.1436V59.5718V50Z" fill="url(#paint0_linear_102_196)"/>
+<defs>
+<linearGradient id="paint0_linear_102_196" x1="1370.18" y1="59.5718" x2="290.181" y2="59.5718" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A5A196" stop-opacity="0.5"/>
+<stop offset="1" stop-color="#39321E"/>
+</linearGradient>
+</defs>
+</svg>

block-tests/assets/shared/7713e15d6eaebd868c6ea632c1199b94603af2fd.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1214 170" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Rectangle 42631">
+<path d="M0 0H1214V170H0V0Z" fill="var(--fill-0, #FAEDCB)" style="mix-blend-mode:multiply"/>
+</g>
+</svg>

block-tests/assets/shared/README.md

@@ -0,0 +1,51 @@
+# shared/ — 해시 기반 공통 자산 캐시
+
+여러 프레임에서 등장하는 자산(배경 텍스처, 아이콘, 아크 등)을 **해시 파일명**으로 한 번만 저장한다.
+
+## 파일명 규칙
+
+Figma MCP 가 자산 URL을 다음 형식으로 제공:
+```
+http://localhost:3845/assets/849658071be46a26936e8666e3722b2dd548aee7.png
+```
+
+URL 끝의 hash (`849658071be46a26936e8666e3722b2dd548aee7`) 그대로 파일명 사용:
+```
+shared/849658071be46a26936e8666e3722b2dd548aee7.png
+```
+
+## dedup 작동 원리
+
+Figma는 같은 자산을 다른 노드에서 사용해도 동일 hash로 서빙한다. 따라서:
+
+```
+프레임 A: bg_texture (hash: 849658...) → 다운로드 → shared/849658....png
+프레임 B: bg_texture (hash: 849658...) → 이미 있음 → 다운로드 스킵
+프레임 C: 새 아이콘   (hash: f05ebf...) → 다운로드 → shared/f05ebf....png
+```
+
+매 변환마다 다운로드 전 `[ -f "shared/${hash}.${ext}" ]` 체크.
+
+## 의미 매핑
+
+해시 파일명은 사람이 못 읽으므로 의미 라벨을 따로 관리:
+
+1. **블록별 매핑**: `block-tests/{slug}_assets.txt`
+   ```
+   849658071be46a26936e8666e3722b2dd548aee7.png   bg_texture
+   f05ebf15a1125b6c5809f9ffa35b4e4e750687d3.png   arc_top
+   ```
+
+2. **전체 카탈로그**: `blocks_index.md` 의 "발견된 공통 자산" 표
+
+## HTML 참조
+
+블록 HTML은 `block-tests/{slug}.html` 위치이므로 상대 경로:
+
+```html
+<img src="assets/shared/849658071be46a26936e8666e3722b2dd548aee7.png">
+```
+
+## legacy 자산
+
+이전 변환물 ([bim-goals-3circles](../../bim-goals-3circles.html)) 의 자산은 `block-tests/assets/frame_1171281211/` 에 그대로 두었음. 새 변환부터는 shared/ 만 사용.

block-tests/assets/shared/b614390a7ec2f351fc8290d640bcd3e6b237bfb2.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 195 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 934" d="M195 1H0" stroke="var(--stroke-0, #60A451)" stroke-width="2" stroke-dasharray="2 2"/>
+</svg>

block-tests/assets/shared/bf1755273910e17f7a012ce2d269a93cca9483ac.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 192 169" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M192 169L179.022 154.254C168.646 142.474 159.023 133.381 145.754 127.296C133.472 121.666 118.062 118.732 97.6292 118.185V165.326L0 82.663L97.6292 0V47.3981C131.266 48.7758 156.328 59.8343 172.195 80.3485C185.335 97.3587 192 120.867 192 150.291V169Z" fill="url(#paint0_linear_101_190)"/>
+<defs>
+<linearGradient id="paint0_linear_101_190" x1="0" y1="84.5" x2="192" y2="84.5" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-opacity="0.3"/>
+</linearGradient>
+</defs>
+</svg>

block-tests/assets/shared/cab8c8284090fb4893d7f584cc6081370b115b11.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1080 118.047" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Rectangle 42422" d="M0 50C0 22.3858 22.3858 -1.00084e-07 50 0L1030 3.55188e-06C1057.61 3.65196e-06 1080 22.3858 1080 50V68.0473C1080 95.6616 1057.61 118.047 1030 118.047L50 118.047C22.3858 118.047 0 95.6616 0 68.0474V50Z" fill="url(#paint0_linear_102_200)"/>
+<defs>
+<linearGradient id="paint0_linear_102_200" x1="1080" y1="59.0233" x2="1.03314e-06" y2="59.0233" gradientUnits="userSpaceOnUse">
+<stop stop-color="#296B55" stop-opacity="0.5"/>
+<stop offset="1" stop-color="#032118"/>
+</linearGradient>
+</defs>
+</svg>

block-tests/assets/shared/ff649c28fd98518d6b48b9e5451fe1da4c1e95d5.svg

@@ -0,0 +1,30 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 210.699 489.919" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Mask group" filter="url(#filter0_d_106_321)">
+<mask id="mask0_106_321" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="201" height="475">
+<path id="Intersect" d="M0 58.1721C0 62.7691 3.14483 66.7452 7.5533 68.0482C80.6773 89.662 134.036 157.329 134.036 237.46C134.036 317.59 80.677 385.255 7.55332 406.868C3.14484 408.171 0 412.148 0 416.745V465.118C0 471.337 5.62415 476.059 11.6872 474.677C119.925 450.01 200.699 353.169 200.699 237.46C200.699 121.751 119.925 24.9083 11.6872 0.241745C5.62413 -1.13998 0 3.58191 0 9.80042V58.1721Z" fill="url(#paint0_linear_106_321)"/>
+</mask>
+<g mask="url(#mask0_106_321)">
+<rect id="Rectangle 43991" y="-0.00117085" width="270" height="95" fill="var(--fill-0, #FD9164)" fill-opacity="0.8"/>
+<rect id="Rectangle 43992" y="94.9988" width="270" height="95" fill="var(--fill-0, #F29700)" fill-opacity="0.8"/>
+<rect id="Rectangle 43993" x="-54" y="189.999" width="270" height="95" fill="var(--fill-0, #FCC948)" fill-opacity="0.8"/>
+<rect id="Rectangle 43994" y="284.999" width="270" height="95" fill="var(--fill-0, #C3D601)" fill-opacity="0.8"/>
+<rect id="Rectangle 43995" y="379.999" width="270" height="95" fill="var(--fill-0, #65C6C4)" fill-opacity="0.8"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_106_321" x="0" y="0" width="210.699" height="489.919" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="5" dy="10"/>
+<feGaussianBlur stdDeviation="2.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_106_321"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_106_321" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_106_321" x1="121.177" y1="-3.68723" x2="22.5301" y2="487.856" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6FD6D8"/>
+<stop offset="1" stop-color="#14706E"/>
+</linearGradient>
+</defs>
+</svg>