RPT-024 위젯 생성 프롬프트 고도화 전략

사용자 입력 ("삼성전자 주가 대시") │ ▼ [Stage 1] 의도 파싱 (LLM) ─→ type: info, category: finance, features: [stock, price] │ ▼ [Stage 2] 질문 생성 (LLM) ─→ 2-3개 질문 + 선택지 │ ▼ 사용자 답변 수집 (텔레그램: 직접 / Creator: 자동 응답) │ ▼ [Stage 4-B] 위젯 HTML 생성 (LLM) ├── 시스템 프롬프트: widget_prompt.md (16,883자) ├── 유저 프롬프트: 사이즈 + 콘텐츠 가이드 + 의도 + 답변 └── 출력: JSON {html, reason, explanation} │ ▼ 후처리: sanitize → wrap_full_page → playground 저장 → 스크린샷

사용자 입력 ("삼성전자 주가 대시") │ ▼ S1 의도 파싱 (LLM) ├── type: info ├── category: finance ├── features: [stock, price, chart, change] └── NEW: suggested_components: [area_chart, badge, detail_grid, reference_line, change_indicator] │ ▼ S1.5 컴포넌트 자동 선정 (NEW) ├── 도메인 × 사이즈 매트릭스 조회 ├── LLM이 5개 핵심 컴포넌트 선정 + 이유 ├── 사이즈별 가용 컴포넌트 필터링 └── 출력: {components: [...], reasoning: "..."} │ ▼ S2 사용자 확인 (레이아웃 베리에이션) ├── 선정된 컴포넌트 기반 레이아웃 3종 제안 │ ├── A: 정보 밀집형 (데이터 중심) │ ├── B: 비주얼 중심 (차트 대형화) │ └── C: 균형형 (차트 + 데이터 그리드) └── 사용자 선택 또는 "Auto" (AI 추천) │ ▼ S3 도메인 전문 프롬프트 조합 ├── 기반: widget_prompt.md (공통 디자인 시스템) ├── 추가: domain_prompts/{category}.md (도메인별 전문 지식) ├── 추가: 선정 컴포넌트 상세 CSS/SVG 가이드 ├── 추가: 레이아웃 배치 지시 (선택된 베리에이션) └── 추가: 도메인별 현실적 샘플 데이터 │ ▼ S4 위젯 HTML 생성 (LLM) ├── 시스템 프롬프트: widget_prompt.md + domain prompt ├── 유저 프롬프트: 사이즈 + 컴포넌트 + 레이아웃 + 데이터 └── 출력: JSON {html, reason, explanation} │ ▼ S5 품질 검증 (NEW) ├── widget-root 사이즈 일치 확인 ├── 필수 컴포넌트 존재 확인 (DOM 파싱) ├── overflow 검사 └── 실패 시 → 1회 재생성 (피드백 포함)