wip: phase_z2 evidence 파이프라인 + matching 실험(phase2~26) + 프론트 trace 패널 진행분 스냅샷
- src: phase_z2 composition/mapper/pipeline/placement_planner/retry, ai_fallback(prompts/schema/validate), mdx_text_atoms 신규 - Front: PipelineTracePanel 신규, FramePanel/SlideCanvas/Home/designAgentApi 등 갱신 + 테스트 4종 추가 - templates/phase_z2: catalog(component_expansion_registry, node_slot_mapping 신규), frames, families, slide_base 갱신 - tests/matching: phase2~26 매칭 실험 스크립트·리포트·온톨로지 전체 (미커밋 진행분) - tests: b4_v4 evidence, task5~28.5 시리즈, regression(imp95 baseline) 등 신규 테스트 대량 추가 - docs/reference: MDX 구조 인벤토리, MDX→Frame 구조 계약 문서 - scripts: mdx 계약/parity/coverage/viewport 체크, gitea comment, run sync 유틸 - .gitignore: tmp*.json, chromedriver, .orchestrator, *.pkl, Front_test* 등 임시/스냅샷 제외 미완성 작업의 보존용 스냅샷 커밋 (2026-07-02) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,134 @@
|
||||
<!-- Phase Z-2 MVP-1 scaffold — MVP-2 이후 정식 Family CSS partial 로 대체. legacy structures/* 는 stylization 참고만. -->
|
||||
{# Frame 29 (1171281210) / process_product_two_way
|
||||
slots: title, banner_{left, right}, process/product (semantic naming)
|
||||
family: compare / layout: banner-top-2col-bottom / cardinality: 2
|
||||
시각 언어 (analysis.md + preview.png 참고 — frame 29 미변환이라 한계) :
|
||||
- 상단 배너 2 개 : 좌(과정) 우(결과)
|
||||
- 하단 2 col : 각각 변환 카드 (AS-IS → TO-BE) 또는 bullets
|
||||
MVP-1 한계 명시 :
|
||||
- frame 29 는 figma_to_html_agent 1:1 변환 미존재 (analysis 만)
|
||||
- banner 그라데이션 / cell 색은 frame 13 의 시각 언어와 일관 (blue 기반) #}
|
||||
|
||||
<style scoped>
|
||||
.frame-pp2w {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: 4px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.frame-pp2w__title {
|
||||
font-size: var(--font-zone-title);
|
||||
font-weight: var(--weight-zone-title);
|
||||
line-height: var(--lh-zone-title);
|
||||
color: #1e293b;
|
||||
padding-left: 4px;
|
||||
}
|
||||
.frame-pp2w__banners {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
.frame-pp2w__banner {
|
||||
padding: 4px 10px;
|
||||
background: linear-gradient(90deg, #1e40af 0%, #2563eb 100%);
|
||||
color: #fff;
|
||||
font-size: var(--font-sub-title);
|
||||
font-weight: var(--weight-sub-title);
|
||||
line-height: var(--lh-sub-title);
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.frame-pp2w__cols {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.frame-pp2w__col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* AS-IS → TO-BE transform 카드 */
|
||||
.frame-pp2w__transform {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
font-size: var(--font-caption);
|
||||
font-weight: var(--weight-caption);
|
||||
line-height: var(--lh-caption);
|
||||
}
|
||||
.frame-pp2w__cell {
|
||||
padding: 3px 6px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 3px;
|
||||
color: #475569;
|
||||
overflow: hidden;
|
||||
}
|
||||
.frame-pp2w__cell--to {
|
||||
background: #dbeafe;
|
||||
border-color: #93c5fd;
|
||||
color: #1e40af;
|
||||
font-weight: 700;
|
||||
}
|
||||
.frame-pp2w__arrow {
|
||||
color: #94a3b8;
|
||||
font-weight: 700;
|
||||
font-size: var(--font-body);
|
||||
}
|
||||
/* bullets (transforms 없거나 추가 항목) */
|
||||
.frame-pp2w__bullets {
|
||||
font-size: var(--font-caption);
|
||||
font-weight: var(--weight-caption);
|
||||
line-height: var(--lh-caption);
|
||||
color: #475569;
|
||||
overflow: hidden;
|
||||
}
|
||||
.frame-pp2w__bullets ul { padding-left: 12px; margin-top: 2px; }
|
||||
.frame-pp2w__bullets li { margin-bottom: 2px; }
|
||||
.frame-pp2w__bullets strong { color: #1e293b; font-weight: 700; }
|
||||
</style>
|
||||
|
||||
<div class="frame-pp2w" data-frame-id="1171281210" data-template-id="process_product_two_way">
|
||||
<div class="frame-pp2w__title">{{ slot_payload.title }}</div>
|
||||
<div class="frame-pp2w__banners">
|
||||
<div class="frame-pp2w__banner">{{ slot_payload.banner_left }}</div>
|
||||
<div class="frame-pp2w__banner">{{ slot_payload.banner_right }}</div>
|
||||
</div>
|
||||
<div class="frame-pp2w__cols">
|
||||
<div class="frame-pp2w__col" data-col="process">
|
||||
{% if slot_payload.process.transforms %}
|
||||
{% for t in slot_payload.process.transforms %}
|
||||
<div class="frame-pp2w__transform">
|
||||
<div class="frame-pp2w__cell">{{ t.from }}</div>
|
||||
<div class="frame-pp2w__arrow">➜</div>
|
||||
<div class="frame-pp2w__cell frame-pp2w__cell--to">{{ t.to }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if slot_payload.process.bullets %}
|
||||
<div class="frame-pp2w__bullets">{{ slot_payload.process.bullets | safe }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="frame-pp2w__col" data-col="product">
|
||||
{% if slot_payload.product.transforms %}
|
||||
{% for t in slot_payload.product.transforms %}
|
||||
<div class="frame-pp2w__transform">
|
||||
<div class="frame-pp2w__cell">{{ t.from }}</div>
|
||||
<div class="frame-pp2w__arrow">➜</div>
|
||||
<div class="frame-pp2w__cell frame-pp2w__cell--to">{{ t.to }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if slot_payload.product.bullets %}
|
||||
<div class="frame-pp2w__bullets">{{ slot_payload.product.bullets | safe }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,115 @@
|
||||
<!-- Phase Z-2 MVP-1 scaffold — MVP-2 이후 정식 Family CSS partial 로 대체. legacy structures/* 는 stylization 참고만. -->
|
||||
{# Frame 13 (1171281190) / three_parallel_requirements
|
||||
slots: title, pillar_{1,2,3}_{label, body}
|
||||
family: list / layout: 3-column / cardinality: 3
|
||||
시각 언어 도출 (figma_to_html_agent/blocks/1171281190/index.html 참고) :
|
||||
- 3 columns + 각 좌측 color bar (gradient)
|
||||
- 색상 : 기술 blue / 사람 orange / 자연 green (Figma 색)
|
||||
- 각 col 2 sections (heading + desc) — MVP-1 은 단일 body 로 단순화
|
||||
- top/bottom 검정 border (col 외곽)
|
||||
MVP-1 단순화 :
|
||||
- zoom 안 씀 — 기존 px 직접 (compact scale)
|
||||
- 한자 (技/人/天) 안 씀 — 라벨만 #}
|
||||
|
||||
<style scoped>
|
||||
.frame-3par {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: 4px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.frame-3par__title {
|
||||
font-size: var(--font-zone-title);
|
||||
font-weight: var(--weight-zone-title);
|
||||
line-height: var(--lh-zone-title);
|
||||
color: #1e293b;
|
||||
padding-left: 4px;
|
||||
}
|
||||
.frame-3par__cols {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.frame-3par__pillar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-top: 1.5px solid #1e293b;
|
||||
border-bottom: 1.5px solid #1e293b;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 좌측 color bar (Figma 색상 도출) */
|
||||
.frame-3par__bar {
|
||||
flex: 0 0 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: var(--font-caption);
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
padding: 4px 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
/* 3 색 — Figma 추출값 */
|
||||
.frame-3par__pillar:nth-child(1) .frame-3par__bar {
|
||||
background: linear-gradient(180deg, #0D78D0 0%, #023056 100%);
|
||||
}
|
||||
.frame-3par__pillar:nth-child(2) .frame-3par__bar {
|
||||
background: linear-gradient(180deg, #FF9A23 0%, #CC5200 100%);
|
||||
}
|
||||
.frame-3par__pillar:nth-child(3) .frame-3par__bar {
|
||||
background: linear-gradient(180deg, #39BE49 21%, #23742C 100%);
|
||||
}
|
||||
.frame-3par__body-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 6px 8px;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.frame-3par__label {
|
||||
font-size: var(--font-sub-title);
|
||||
font-weight: var(--weight-sub-title);
|
||||
line-height: var(--lh-sub-title);
|
||||
color: #1e293b;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px dashed #94a3b8;
|
||||
}
|
||||
.frame-3par__pillar:nth-child(1) .frame-3par__label { color: #134D7F; }
|
||||
.frame-3par__pillar:nth-child(2) .frame-3par__label { color: #D18B37; }
|
||||
.frame-3par__pillar:nth-child(3) .frame-3par__label { color: #23742C; }
|
||||
|
||||
.frame-3par__body {
|
||||
font-size: var(--font-body);
|
||||
font-weight: var(--weight-body);
|
||||
line-height: var(--lh-body);
|
||||
color: #475569;
|
||||
overflow: hidden;
|
||||
}
|
||||
.frame-3par__body ul { padding-left: 14px; margin-top: 2px; }
|
||||
.frame-3par__body li { margin-bottom: 2px; }
|
||||
.frame-3par__body strong { color: #1e293b; font-weight: 700; }
|
||||
</style>
|
||||
|
||||
<div class="frame-3par" data-frame-id="1171281190" data-template-id="three_parallel_requirements">
|
||||
<div class="frame-3par__title">{{ slot_payload.title }}</div>
|
||||
<div class="frame-3par__cols">
|
||||
{% for pillar in slot_payload.pillars %}
|
||||
<div class="frame-3par__pillar">
|
||||
<div class="frame-3par__bar">{{ pillar.label }}</div>
|
||||
<div class="frame-3par__body-wrap">
|
||||
<div class="frame-3par__label">{{ pillar.label }}</div>
|
||||
<div class="frame-3par__body">{{ pillar.body | safe }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user