From 01bb83752545c3a0f1afc4863abb72850fadf6f7 Mon Sep 17 00:00:00 2001 From: gahusb Date: Sun, 17 May 2026 20:54:00 +0900 Subject: [PATCH] =?UTF-8?q?docs(insta-lab):=20design=5Fimporter=20?= =?UTF-8?q?=E2=80=94=20placeholder=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=A7=88=EC=8A=A4=ED=82=B9=20=EC=9A=94=EA=B5=AC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 사용자 디자인 PNG에 placeholder 텍스트가 이미 박혀있는 경우 대응. Vision system prompt에 두 layer 요구: (a) 마스킹 박스: placeholder 영역 좌표 + 주변 배경색으로 덮음 (b) 동적 텍스트 layer: 동일 좌표에 새 카피, 원본 폰트 스타일 모방 + overflow:hidden으로 긴 카피가 박스 밖 새지 않게. spec 4-3 + plan Task 3 step 3 동시 패치. --- ...17-insta-design-importer-implementation.md | 20 +++++++++++-- ...2026-05-17-insta-design-importer-design.md | 29 +++++++++++++++---- 2 files changed, 40 insertions(+), 9 deletions(-) diff --git a/docs/superpowers/plans/2026-05-17-insta-design-importer-implementation.md b/docs/superpowers/plans/2026-05-17-insta-design-importer-implementation.md index 223fc0d..78c4a3a 100644 --- a/docs/superpowers/plans/2026-05-17-insta-design-importer-implementation.md +++ b/docs/superpowers/plans/2026-05-17-insta-design-importer-implementation.md @@ -529,15 +529,29 @@ from .config import ANTHROPIC_API_KEY, ANTHROPIC_MODEL_SONNET ```python _VISION_SYSTEM_PROMPT = """너는 인스타그램 카드 뉴스 디자인을 모방하는 프론트엔드 디자이너다. -입력: 10장의 카드 디자인 이미지 (각 1080×1350) + 파일명 → 페이지 번호 매핑. -출력: 단일 Jinja2 HTML 파일 본문 (코드펜스, 설명 텍스트 금지). +입력: 10장의 카드 디자인 이미지 (각 1080×1350, placeholder 텍스트가 박혀있음) + 파일명 → 페이지 번호 매핑. +출력: 단일 Jinja2 HTML 파일 본문 (코드펜스·설명 텍스트 금지). + +핵심 제약 — placeholder 텍스트 마스킹: +PNG에는 디자인 placeholder 텍스트가 이미 그려져 있다. 동적 카피로 교체할 때 +원본 텍스트가 비치면 안 된다. 각 텍스트 영역마다 두 layer를 그려라: + (a) 마스킹 박스: position: absolute로 placeholder 영역과 같은 좌표. + background는 그 영역 주변 픽셀 색 (카드 배경색)에서 추출. padding 8px 여유. + (b) 동적 텍스트 layer: 마스킹 박스와 동일 좌표. + font-size·font-weight·color는 원본 placeholder의 스타일을 모방. + {{ headline }} / {{ body }} / {{ cta }} Jinja 변수 사용. + +페이지 종류별 영역 가이드: +- page 1 (cover): 메인 headline 1개 영역 +- page 2~9 (body): headline 영역 + body 영역 +- page 10 (cta): headline + body + cta 영역 요구사항: - 컨테이너 width 1080px, height 1350px - 각 페이지마다 `background-image: url('pages/{{filename}}')`로 사용자 PNG 로드 -- 그 위에 텍스트 layer (headline, body, cta) — 원본 디자인에서 텍스트가 있던 위치·크기·색을 모방 - page_no 1~10 분기: {% if page_no == N %}...{% endif %} 구조 - 폰트는 Noto Sans KR (Google Fonts CDN). letter-spacing -0.02em, line-height 1.3 기본 +- 텍스트 영역은 word-wrap: break-word + overflow: hidden (동적 카피가 길어도 마스킹 박스 밖으로 안 새도록) - HTML 에