Add remaining samples, tooling, and local project assets

figma_to_html_agent/CLAUDE.md

@@ -19,7 +19,7 @@ Figma 프레임을 **수학적으로 정확하게** HTML/CSS로 변환하고,
 6. **AI 역할 분담** — AI는 분류(고르기)만, 구성(만들기)은 코드. LLM은 px을 못 본다
 7. **컨텍스트 관리는 compact로** — 한 세션에서 여러 프레임을 연속 작업할 수 있다. 컨텍스트가 무거워지면 `/compact` 로 핵심만 요약하고 계속 진행. 이유: 핵심 결정/구조/규칙은 모두 파일(CLAUDE.md, PROCESS.md, RULES.md, blocks_index.md, 산출물)에 박혀있어 compact 후에도 보존됨. 손실되는 건 시행착오/디버깅 과정 뿐이며, 이건 잃어도 OK. 매 프레임마다 새 세션을 강제하면 누적 학습이 silo되어 R13 같은 sub-pattern 발견의 즉시 적용이 불가능해짐.
 8. **순수 CSS 우선, SVG는 곡선/필터에만** — 동적 재구성 위해 가능한 한 HTML div + linear-gradient 사용
-9. **프로모션 게이트는 사용자 전용** — 에이전트는 절대 `design_agent/templates/` 에 직접 쓰지 않는다. 모든 작업은 `figma_to_html_agent/` 안에서 끝나며, 본체 라이브러리 이전은 사용자 수동 검수 후 사용자 본인이 수행한다.
+9. **프로모션은 사용자 승인 후 진행** — 1:1 HTML 검증 완료 후, 사용자 승인을 받아 `templates/blocks/new/`에 블록을 생성하고 `templates/blocks/svg/`에 이미지를 정리한다. catalog.yaml 등록과 blocks_index.md 업데이트까지 에이전트가 수행한다. 단, 사용자 승인 없이 프로모션하지 않는다.
 10. **시맨틱 우선, Figma 평면 레이어 그대로 옮기지 말 것** — Figma의 평면 레이어 구조는 디자인 도구의 한계일 뿐, 의미 구조가 아니다. 마커+텍스트는 list item, 카드 묶음은 column unit, 등 시맨틱하게 재그룹핑하여 작성한다. RULES.md R13 (Custom-marker bullet list) 참조. 새로 발견되는 sub-pattern은 [blocks_index.md](blocks_index.md) "디자인 인사이트" 섹션에 누적한다.
 11. **모든 슬롯은 기본 optional** — 1:1 단계에서 모든 슬롯이 채워져 있다고 해서 "이 블록은 필수" 로 해석하지 않는다. 같은 블록이 사진 없는/짧은/긴 mdx에 모두 매칭되어야 한다는 가정으로 설계한다.
 
@@ -60,12 +60,18 @@ Figma 프레임을 **수학적으로 정확하게** HTML/CSS로 변환하고,
 ## 입출력
 
 **입력:** Figma 파일 + 노드 ID (또는 현재 선택 노드)
-**출력:**
-- `block-tests/{slug}.html` — 변환 결과
+**출력 (변환):**
+- `block-tests/{slug}.html` — 1:1 변환 결과
 - `block-tests/{slug}_flat.md` — 플래튼/이상 탐지/변형 축 메모
 - `assets/shared/...` — 공유 자산 캐시
 - `blocks_index.md` 한 줄 추가
 
+**출력 (프로모션, 사용자 승인 후):**
+- `templates/blocks/new/{pattern}.html` — AI가 재디자인 가능한 블록 (CSS + Jinja2)
+- `templates/blocks/svg/{name}.png/svg` — 블록 공용 이미지
+- `templates/catalog.yaml` — 블록 등록 (content_structure, when, not_for)
+- `blocks_index.md` 상태 → promoted
+
 ## 폴더 구조
 
 ```
@@ -73,9 +79,9 @@ figma_to_html_agent/                ← 에이전트 작업 영역 (staging)
 ├── CLAUDE.md                       ← 이 파일 (에이전트 명세)
 ├── PROCESS.md                      ← 10단계 운영 절차 (변환 핸드북)
 ├── MATH.md                         ← 수학 공식 레퍼런스
-├── RULES.md                        ← CSS 보정 규칙 (R1~R12)
+├── RULES.md                        ← CSS 보정 규칙 (R1~R16)
 ├── PROCESS-CONTROL.md              ← "찍어맞추기 금지" 규칙
-├── PLAN.md                         ← 현재 진행 현황
+├── README.md                       ← 사용법 가이드
 ├── blocks_index.md                 ← 변환 완료 도서관
 │
 ├── scripts/
@@ -90,22 +96,22 @@ figma_to_html_agent/                ← 에이전트 작업 영역 (staging)
 │       ├── shared/                 ← 해시 기반 자산 캐시 (재사용)
 │       └── frame_{id}/             ← 프레임 전용 자산 (legacy)
 │
-└── templates_staging/              ← Stage 2: Jinja2 추상화
-    ├── {pattern_id}.html.j2
-    └── {pattern_id}.meta.yaml      ← when/slots/min_size_px 초안
+└── templates_staging/              ← Stage 2: Jinja2 추상화 (legacy, 현재 미사용)
 
 ────────────────────────────────────────────────────────
-🚧 프로모션 게이트 (사용자 수동 작업) 🚧
+프로모션 (사용자 승인 후 에이전트가 실행)
 ────────────────────────────────────────────────────────
 
-design_agent/                       ← 본체 라이브러리 (에이전트 접근 금지)
-└── templates/
-    ├── blocks/{category}/
-    │   └── {pattern_id}.html.j2    ← 사용자가 staging에서 이전
-    └── catalog.yaml                ← 사용자가 when/slots 등록
+design_agent/templates/
+├── blocks/
+│   ├── new/                        ← Figma 추출 블록 (에이전트가 작성)
+│   ├── svg/                        ← 블록 공용 이미지 (에이전트가 정리)
+│   ├── slide-base.html             ← 고정 슬라이드 배경
+│   └── cards/, emphasis/, ...      ← 기존 블록
+└── catalog.yaml                    ← 블록 등록 (에이전트가 업데이트)
 ```
 
-**중요:** 에이전트는 위 구분선 아래(`design_agent/templates/`)를 **절대 수정하지 않는다.** 그 영역은 사용자가 staging 결과물을 검수한 뒤 본인이 직접 프로모션한다.
+**중요:** 프로모션(블록 생성, 이미지 정리, catalog 등록)은 사용자가 1:1 HTML을 검증하고 승인한 후에만 진행한다. 사용자 승인 없이 templates/ 를 수정하지 않는다.
 
 ## 금지 사항
 
@@ -116,6 +122,8 @@ design_agent/                       ← 본체 라이브러리 (에이전트 접
 - 블록 배경을 검정으로 표시 (미리보기는 항상 흰색 배경)
 - **이미지 해석으로 gradient 방향 판단** (멀티모달 금지, 데이터로만 판단 — PROCESS-CONTROL.md 참조)
 - **한 번에 여러 값 동시 수정** (gradient 각도와 border-radius 동시 변경 금지)
+- **장식 요소를 이미지 슬롯(img src)으로 넣기** — gradient bar, ribbon, pill, badge, 오버레이 등은 CSS로 구현. AI가 색상/크기를 조정할 수 없는 이미지 의존 블록은 쓸 수 없다
+- **사용자 승인 없이 templates/ 수정** — 프로모션은 사용자 승인 후에만
 - **여러 프레임을 한 세션에 변환** (1세션 1프레임 원칙)
 - **plus-darker 블렌드 사용** (Safari 전용 → multiply로 교체, RULES.md R10)
 - **Figma 인벤토리/지문/군집 같은 사전 분류** (work-creating-work, 패턴은 bottom-up으로 발견)