Kyeongmin/C.E.L_Slide_test2
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(persona): refine three_persona_benefits using index.html base (IMP-04 Track A 1/16)

Browse Source 
First Track A calibration refinement. Previous commit 556b448 wrote partial
from scratch (110 lines, minimum viable) without referencing the figma_to_html
index.html base. Per the matrix-clarification commit df9ee43 §4.1, this is the
first refinement and the agreed calibration point for the corrected work pattern.

Input :
- figma_to_html_agent/blocks/1171281191/index.html (184 lines, MCP Figma
  Desktop Dev Mode 2026-04-16, 텍스트 노드 전수 반영)
- figma_to_html_agent/blocks/1171281191/analysis.md (slot 정의 + suits/not_suits)
- figma_to_html_agent/blocks/1171281191/flat.md (좌표 + 색 + typography 실측)
- figma_to_html_agent/blocks/1171281191/texts.md (텍스트 전수)

Visual provenance applied :
- PROMOTED : 발주자/시공자/설계자 accent color (#285b4a / #445a2f / #743002),
  overlay tint (#d6e7c4 / #e1efe1 / #d0c0ad — 0.5 → 0.15 vertical fade),
  title gradient (#000 → #883700), card 외곽 color border + radius,
  badge round 의도, bullet check 의도, section divider 의 색 위계
- NOT PROMOTED : col_bg_texture.png, col-overlay raster, 하단 사진 3 개,
  원형 뱃지 outer/inner image, 체크 아이콘 image — Phase Z 기존 F13/F29/F16
  strict CSS-only convention 답습 (memory rule feedback_blocks_must_be_css.md)
- ADAPTED : Figma 65/50/40px → token-fixed (zone-title / sub-title / caption /
  body), 396×397 absolute round badge → flex card-header CSS round 의도, Figma
  zoom 0.49213 absolute positioning → Phase Z flex/grid zone-fit, 7 bullets
  absolute layout → flex column auto spacing

min_height_px derivation (Codex round 13 §2.2 — derive + confirm) :
- Figma frame 1927 px @ scale 0.49213 → 948 px adapted full frame
- Phase Z slide-body ≤ 585 px → adaptive content fit
- Content density (3 col × 7 bullets + badge) → F29 (345) class 보다 가벼움
- Derived = 290 (between F13=230 and F29=345). updated from 280 estimate.
- confirm via smoke + sample run (current commit)

Changes :
- templates/phase_z2/families/three_persona_benefits.html : rewrite (110 → 175
  lines). per-persona soft background tint (overlay color), CSS round badge
  with name + "목표" sub, CSS ::before check marker, full provenance comment
  block (PROMOTED / NOT PROMOTED / ADAPTED / min_height derivation).
- templates/phase_z2/catalog/frame_contracts.yaml : min_height_px 280 → 290
  with derivation comment.

Verification :
- python scripts/smoke_frame_render.py --self-check : PASS 4/4 (existing 3 +
  persona refined 5314 chars, was 3889 — visual richer)
- python run_mdx03_pipeline.py --phase-z2 --run-id imp04_persona_refinement :
  PASS (MDX 03 V4 rank-1 still F13/F29, persona refinement does not affect
  existing 03-1/03-2 selection)

Calibration outcome : ready for first-refinement Codex review (per scope-lock
#5, first refinement = mandatory Codex review). Pending F1/F2/F3 escalation
decision based on review result.

Refs Gitea #4 (IMP-04 Track A — first calibration refinement, persona)
This commit is contained in:
이경민
2026-05-13 10:32:24 +09:00
parent df9ee43d09
commit 2fcd8bb94a
2 changed files with 98 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
templates/phase_z2/catalog/frame_contracts.yaml
View File

@@ -206,10 +206,13 @@ three_persona_benefits:
- constructor - constructor
- designer - designer
# min_height_px : initial estimate (3-card 텍스트 밀도 기준, F13=230 vs F29=345 사이). # min_height_px : derive + confirm (Codex round 13 §2.2).
# smoke 통과 후 batch full-pipeline render 시 실측 갱신. # Figma frame 1927 px @ scale 0.49213 → 948 px adapted (full frame).
# Phase Z slide-body ≤ 585 px → adaptive content fit.
# Content density (3 col × 7 bullets + badge) → F29 (345) class 보다 가벼움.
# Derived = 290 (between F13=230 and F29=345). confirm via smoke + sample run.
visual_hints: visual_hints:
min_height_px: 280 min_height_px: 290
accepted_content_types: accepted_content_types:
- text_block - text_block

133
templates/phase_z2/families/three_persona_benefits.html
View File

@@ -5,29 +5,48 @@
Visual Provenance — figma_to_html_agent/blocks/1171281191/ (frame 14) Visual Provenance — figma_to_html_agent/blocks/1171281191/ (frame 14)
───────────────────────────────────────────────────────────────────────────── ─────────────────────────────────────────────────────────────────────────────
Frame 14 = "주체별 기대효과" (cards-3col-persona, 2601×1927 px, scale 0.49213). Frame 14 = "주체별 기대효과" (cards-3col-persona, 2601×1927 px, scale 0.49213).
Figma 원본 = 3 컬럼 카드, 각 카드 = 배경 텍스처 + 컬러 오버레이 + 원형 뱃지 3 컬럼 카드 : 발주자 / 시공자 / 설계자 각 persona 별 *목표* + bullet 7 개 안팎.
(persona 이름 + "목표") + 7 bullets + 하단 사진. token-fixed Phase Z partial. 본 partial 은 `figma_to_html_agent/blocks/1171281191/index.html` (184 lines) 을
base 로 Phase Z 규약 (Jinja slot + token CSS + slide-base wrap + pure CSS) adapt.
PROMOTED (Figma 색 → CSS gradient / accent 보존) : PROMOTED (Figma 색 / 디자인 의도 → CSS 로 보존) :
- 발주자 accent : Figma TEXT #285b4a (dark green) - 발주자 accent color : Figma TEXT #285b4a (dark green) — index.html L80
- 시공자 accent : Figma TEXT #445a2f (olive) - 시공자 accent color : Figma TEXT #445a2f (olive) — index.html L81
- 설계자 accent : Figma TEXT #743002 (red-brown) - 설계자 accent color : Figma TEXT #743002 (red-brown) — index.html L82
- title gradient : Figma #000 → #883700 (frame 13 과 동일 family 의 zone title) - 발주자 overlay tint : #d6e7c4 (opacity-80) — index.html L45
- card 외곽 border : 2px solid (frame 13 의 pillar bar 룰 따라) - 시공자 overlay tint : #e1efe1 — index.html L46
- 설계자 overlay tint : #d0c0ad — index.html L47
- title gradient : #000 → #883700 (F13 zone-title 와 동일 family)
- badge 원형 의도 : index.html L60-69 (396×397 round badges) → CSS round
- bullet check 의도 : index.html L94 (32×32 check icon) → CSS ::before unicode
- section divider line : 카드 별 색 border 위계 (F13 pillar bar 답습)
NOT PROMOTED (Figma 데코지만 MDX 에 없으므로 주입 X — memory rule NOT PROMOTED (Figma 데코지만 MDX 무관 — memory rule `feedback_blocks_must_be_css.md`
`feedback_blocks_must_be_css.md` : Figma SVG/PNG image slot 금지) : + 기존 F13/F29/F16 partials 의 strict CSS-only convention) :
- col_bg_texture / overlay / 하단 사진 등 image asset - col_bg_texture.png (3 컬럼 BG 텍스처) — index.html L113-115
- 원형 뱃지 inner/outer image — CSS round shape 으로 대체 - col-overlay raster (실제 데이터 = solid 색) — index.html L44-47 → CSS 단색
- 하단 사진 (photo--left/mid/right) 3 개 — index.html L122-123, 177-178
- 원형 뱃지 outer / inner image (badge-outer/inner) — index.html L62-69 → CSS round
- 체크 아이콘 image (bullet-icon img) — index.html L94-99 → CSS unicode
ADAPTED : ADAPTED :
- Figma 65/50/40px → token-fixed (zone-title 13 / sub-title 12 / body 11) - Figma 65/50/40px → token-fixed (zone-title 13 / sub-title 12 / body 11)
- badge 원형 → CSS circle (radial-gradient 의 accent border) - 396×397 absolute-positioned round badge → flex card-header 안 CSS round
- bullet check icon image → ::before 의 unicode check (∙ → ✓ approximate) - Figma `zoom: 0.49213` + absolute positioning → Phase Z flex/grid (zone fit)
- 7 bullets vertical absolute layout → flex column 안 자동 spacing
- Figma `line-height: 85/50px` → token-fixed `--lh-body`
─────────────────────────────────────────────────────────────────────────────
min_height_px derivation (Codex round 13 §2.2 — derive + confirm) :
Figma frame total height = 1927 px @ scale 0.49213 → 948 px adapted
But Phase Z slide-body height ≤ 585 px → adaptive content fit
Content density : 3 col × 7 bullets + badge → similar to F29 (345) class
Initial derived value = 290 (between F13=230 and F29=345)
→ confirm via smoke + sample run before bulk activation (Track A calibration)
───────────────────────────────────────────────────────────────────────────── ─────────────────────────────────────────────────────────────────────────────
slots : title, personas[].{label, body, color_class} slots : title, personas[].{label, body, color_class}
- color_class ∈ {client, constructor, designer} (role_order 따라) - color_class ∈ {client, constructor, designer} (role_order 따라)
- body = list[{text:str, indent:int}] (parse_quadrant_item 출력) - body = list[{text:str, indent:int}] (parse_quadrant_item 출력)
- persona suffix "목표" = frame 의 visual 언어 (slot 미사용, partial 내부 노출)
#} #}
<style> <style>
@@ -46,6 +65,7 @@ slots : title, personas[].{label, body, color_class}
-webkit-background-clip: text; background-clip: text; -webkit-background-clip: text; background-clip: text;
color: transparent; color: transparent;
flex-shrink: 0; flex-shrink: 0;
filter: drop-shadow(0 0 3px rgba(50,44,30,0.4)); /* index.html L41-44 의 title 처리 답습 */
} }
.f14b__cols { .f14b__cols {
display: grid; display: grid;
@@ -55,52 +75,83 @@ slots : title, personas[].{label, body, color_class}
min-height: 0; min-height: 0;
} }
.f14b__col { .f14b__col {
position: relative;
display: flex; flex-direction: column; display: flex; flex-direction: column;
border: 2px solid #000; border: 2px solid;
border-radius: 4px; border-radius: 12px;
overflow: hidden; overflow: hidden;
min-height: 0; min-height: 0;
background: #fff;
} }
.f14b__col--client { border-color: #285b4a; } /* PROMOTED */ /* per-persona color theme : Figma TEXT 색 + overlay tint promote */
.f14b__col--constructor { border-color: #445a2f; } /* PROMOTED */ .f14b__col--client {
.f14b__col--designer { border-color: #743002; } /* PROMOTED */ border-color: #285b4a; /* PROMOTED */
background: linear-gradient(180deg, rgba(214,231,196,0.5) 0%, rgba(214,231,196,0.15) 100%); /* PROMOTED L45 */
}
.f14b__col--constructor {
border-color: #445a2f; /* PROMOTED */
background: linear-gradient(180deg, rgba(225,239,225,0.5) 0%, rgba(225,239,225,0.15) 100%); /* PROMOTED L46 */
}
.f14b__col--designer {
border-color: #743002; /* PROMOTED */
background: linear-gradient(180deg, rgba(208,192,173,0.5) 0%, rgba(208,192,173,0.15) 100%); /* PROMOTED L47 */
}
/* badge — persona 라벨 + "목표" sub. Figma 원형 뱃지를 CSS pill 로 대체. */ /* badge — index.html L60-82 의 round badge (396×397 px outer + 302×303 inner + 65/50px text)
adapt : flex header 안 CSS round shape + persona name + "목표" sub */
.f14b__badge { .f14b__badge {
display: flex; align-items: baseline; justify-content: center; display: flex; flex-direction: column;
gap: 6px; align-items: center; justify-content: center;
padding: 6px 8px 4px; padding: 8px 10px;
border-bottom: 2px solid currentColor; border-bottom: 2px solid currentColor;
color: inherit;
flex-shrink: 0; flex-shrink: 0;
} text-align: center;
.f14b__badge-name { background: rgba(255,255,255,0.6);
font-size: var(--font-sub-title);
font-weight: 700;
line-height: var(--lh-sub-title);
}
.f14b__badge-suffix {
font-size: var(--font-caption);
font-weight: 500;
opacity: 0.75;
} }
.f14b__col--client .f14b__badge { color: #285b4a; } .f14b__col--client .f14b__badge { color: #285b4a; }
.f14b__col--constructor .f14b__badge { color: #445a2f; } .f14b__col--constructor .f14b__badge { color: #445a2f; }
.f14b__col--designer .f14b__badge { color: #743002; } .f14b__col--designer .f14b__badge { color: #743002; }
.f14b__badge-name {
font-size: var(--font-sub-title);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
}
.f14b__badge-suffix {
font-size: var(--font-caption);
font-weight: 500;
line-height: 1.2;
margin-top: 2px;
opacity: 0.85;
}
/* body — check-style bullet list. Figma image bullet → ::before unicode. */ /* body — index.html L102-104 의 bullet-list (7 bullets per persona) adapt :
flex column + check-style ::before. raster icon NOT PROMOTED. */
.f14b__body { .f14b__body {
flex: 1 1 auto; flex: 1 1 auto;
overflow: hidden; overflow: hidden;
padding: 8px 10px; padding: 8px 10px 10px;
color: #1a1a1a; color: #1a1a1a;
min-height: 0; min-height: 0;
display: flex; flex-direction: column;
gap: 3px;
} }
.f14b__body .text-line { color: inherit; } .f14b__body .text-line {
color: inherit;
/* Persona badge suffix label = static "목표" (Figma source) — slot 미사용, font-size: var(--font-body);
partial 안에서 직접 노출. content_object 와 무관한 frame 시각 언어. */ line-height: var(--lh-body);
position: relative;
padding-left: 14px;
}
/* CSS check marker — index.html L94-99 (bullet_check.png) 의 의도 보존 */
.f14b__body .text-line--bullet::before {
content: "\2713"; /* ✓ U+2713 — check mark */
position: absolute;
left: 0; top: 0;
font-weight: 700;
}
.f14b__col--client .f14b__body .text-line--bullet::before { color: #285b4a; }
.f14b__col--constructor .f14b__body .text-line--bullet::before { color: #445a2f; }
.f14b__col--designer .f14b__body .text-line--bullet::before { color: #743002; }
</style> </style>
<div class="f14b" data-frame-id="1171281191" data-template-id="three_persona_benefits"> <div class="f14b" data-frame-id="1171281191" data-template-id="three_persona_benefits">