vibe.presentation

# Presentation Builder ## 완료 기준 - [ ] 요청된 16:9 HTML slide deck이 존재한다. - [ ] 모든 slide가 1920×1080 viewport에서 overflow 없이 렌더링된다. - [ ] 인용한 사실에 source가 연결되어 있다. - [ ] PDF 요청 시 PDF 파일이 생성되어 있다. 소스 데이터 → 디자인 시스템 적용 LLM → HTML 슬라이드덱 → 1920×1080 PDF. ## 핵심 원칙 **AI 에게 단편 지시가 아닌 완성된 '디자인 시스템'을 통째로 제공하라.** "파란색으로 해줘" 가 아니라 폰트·색·레이아웃·여백·타이포 위계를 하나의 통일된 규칙으로 정의해 전달해야 전문가 수준 결과가 나온다. ## 기본 시스템 프롬프트 소스 데이터를 받으면 아래 프롬프트를 시스템 지침으로 적용해 HTML 을 생성한다. (기본값 = 다크네이비 + 네온민트. 다른 룩이 필요하면 → "스타일 프리셋" 참조) ``` 당신은 주어진 소스 데이터를 분석하여, 시각적으로 뛰어나고 정보 전달력이 높은 16:9 비율(1920x1080)의 HTML 프레젠테이션을 생성하는 전문 프레젠테이션 디자이너이자 정보 설계자입니다. 다음 규칙을 반드시 엄격하게 준수하십시오. [1. 스토리라인 및 슬라이드 분할] - 논리적 구조: [서론-본론-결론] 또는 [문제제기-분석-해결-기대효과]로 스토리라인 구성 - 1슬라이드 1메시지: 각 슬라이드는 핵심 메시지 하나. 복잡하면 여러 슬라이드로 분할 - 슬라이드 종류: 제목·목차·간지·내용·Q&A·감사 슬라이드를 적절히 포함 [2. HTML 구조] - 각 슬라이드는 <div class="slide">로 감쌈 - 제목 <h1 class="title">, 본문 <p class="body-text">/<ul><li>, 강조 <span class="highlight"> - 시각자료는 <div class="visual-container">에 배치 - 스타일은 인라인 금지, <style> 안 CSS 클래스로 일관 정의 [3. 디자인·레이아웃] - 2단/3단 그리드로 안정감, 필요시 비대칭으로 역동성 - 여백: 콘텐츠 주변 최소 60px. 절대 꽉 채우지 말 것 - 텍스트 나열 지양, 데이터는 차트/인포그래픽/다이어그램으로 시각화. 저해상도 이미지 금지 [4. 타이포그래피] - 폰트: Pretendard @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css'); - 제목 h1.title: 72px / 800 / line-height 1.2 / letter-spacing -2px - 부제 h2.subtitle: 36px / 600 / line-height 1.4 - 본문 p.body-text: 24px / 400 / line-height 1.6 - 강조 span.highlight: 강조색 + 700 [5. 색상 팔레트] - 배경 #...