HTML PPT Creator

HTML PPT Creator은(는) 무엇을 하나요?

브라우저에서 바로 열리는 명확하고 시각적으로 의도된 HTML 슬라이드 데크를 만듭니다. 기본적으로 단일 presentation.html 파일로, 인라인 CSS와 JavaScript를 포함하며 빌드 단계가 없습니다.

워크플로

1. 사용자의 요청, 소스 텍스트, 데이터, 브랜드 에셋 및 요청된 출력 위치를 검사합니다.
2. 누락된 세부 사항에 대해 합리적인 기본값을 추론합니다. 대상, 목적, 언어, 슬라이드 수 또는 시각적 방향이 결과를 실질적으로 변경할 수 있고 추론할 수 없는 경우에만 질문합니다.
3. 간결한 슬라이드 순서를 설계합니다. 각 슬라이드에 하나의 역할과 유용한 제목을 부여하고, 코딩 전에 반복을 제거합니다.
4. 주제에 맞는 시각 시스템을 선택합니다. 색상, 글꼴, 간격, 테두리, 그림자 및 모션에 대한 CSS 사용자 정의 속성을 정의한 다음 일관되게 사용합니다.
5. 처음부터 시작할 때 assets/starter.html을 기본 파일로 복사합니다. 샘플 스타일을 필수 테마로 취급하지 말고 모든 샘플 슬라이드와 테마 토큰을 교체합니다.
6. 전체 데크를 구현합니다. 의미론적 <section class="slide"> 요소, 뷰포트에 맞게 크기가 조정되는 고정 16:9 비율 단계, 키보드/클릭/터치 탐색을 사용합니다.
7. 최종 QA 전에 references/QUALITY.md를 읽습니다. 브라우저 제어가 가능할 때 브라우저에서 데크를 열고 모든 슬라이드를 검사하며 오버플로우 및 상호작용 결함을 수정한 후 HTML 파일을 전달합니다.

사용자가 반복적인 워크플로를 요청하지 않는 한, 계획 확인 지점을 도입하거나 챕터별 승인을 요구하지 마십시오.

출력 계약

• 기본적으로 presentation.html을 생성합니다. 사용자가 요청하거나 데크가 재사용 가능한 로컬 에셋 또는 상당한 애플리케이션 로직을 실제로 필요로 하는 경우에만 다중 파일 폴더를 사용합니다.
• 기본 데크를 오프라인에서 사용할 수 있도록 유지합니다: 인라인 CSS 및 JavaScript; 로컬 또는 포함된 이미지 및 글꼴 사용. 사용자가 승인하지 않는 한 CDN 종속성을 피합니다.
• 제공된 사실, 표현 제약 조건, 인용, 로고 및 브랜드 규칙을 유지합니다. 통계나 출처를 절대 만들어내지 않습니다.
• 적절한 경우 제목 슬라이드, 일관된 본문 및 목적 있는 마무리 슬라이드를 포함합니다. 요청된 형식이 달리 지정하는 경우 이를 강제하지 않습니다.
• ArrowLeft, ArrowRight, Space, PageUp, PageDown, Home 및 End를 지원합니다. 클릭/탭 탐색 및 터치 스와이프를 지원합니다. 전체 화면은 F를 사용합니다.
• 미묘한 슬라이드 카운터 또는 진행률 표시기를 표시합니다. 컨트롤을 시각적으로 조용하고 프레젠테이션에 안전하게 유지합니다.
• 각 슬라이드가 하나의 가로 페이지로 인쇄되고 장식용 컨트롤이 숨겨지도록 인쇄 CSS를 추가합니다.
• prefers-reduced-motion을 준수합니다. 모션을 절제하여 사용하고 필수 정보를 표시하기 위해 애니메이션에 의존하지 않습니다.
• 명시적으로 요청되지 않는 한 발표자 노트, 내레이션 스크립트, 오디오, 자동 재생, 녹화 도우미, 비디오 타임라인 또는 TTS 인프라를 추가하지 않습니다.

콘텐츠 및 시각 규칙

• 슬라이드당 하나의 주요 주장을 만듭니다. 단락보다는 3-6개의 간결한 지원 항목을 선호합니다.
• 관계에 적합한 시각적 형태(비교, 프로세스, 타임라인, 계층, 지표, 인용, 이미지, 차트 또는 다이어그램)를 사용합니다.
• 장식용 채우기보다는 실제 콘텐츠, 간단한 SVG, CSS 다이어그램 및 의미 있는 차트를 선호합니다.
• 강력한 계층 구조와 넉넉한 여백을 유지합니다. 문서 읽기가 아닌 먼 거리에서 보는 것을 고려하여 디자인합니다.
• 데크 전체에 걸쳐 일관된 테마를 유지하면서 레이아웃 다양성을 허용합니다. 모든 슬라이드를 동일한 둥근 카드 그리드로 만드는 것을 피합니다.
• 일반적인 AI 스타일링(불필요한 보라색 그라데이션, 과도한 광택, 무작위 유리 패널, 이모지 장식, 가짜 앱 크롬 및 데이터가 없는 장식용 차트)을 피합니다.
• 텍스트 대비, 가시적인 포커스 상태, 유용한 대체 텍스트 및 의미 있는 DOM 읽기 순서를 보장합니다.
• 콘텐츠가 맞지 않으면 콘텐츠를 줄이거나 슬라이드를 나눕니다. 본문 텍스트가 기술적으로 맞을 때까지 축소하지 마십시오.

기존 데크 편집

사용자가 재설계를 요청하지 않는 한 현재 아키텍처와 디자인 언어를 유지합니다. 가장 작은 일관된 변경을 수행한 다음 탐색, 슬라이드 번호 매기기, 오버플로우, 인쇄 레이아웃 및 반응형 크기 조정을 다시 확인합니다.

완료 확인

완료를 보고하기 전에:

1. 요청된 메시지, 숫자, 인용 및 슬라이드 순서를 확인합니다.
2. 첫 번째/마지막 슬라이드 경계 및 모든 탐색 방법을 테스트합니다.
3. 16:9 데스크톱 크기 및 최소 하나의 더 작은 뷰포트에서 모든 슬라이드를 검사합니다.
4. 잘린 텍스트, 충돌, 아주 작은 글꼴, 깨진 미디어, 콘솔 오류 및 우발적 스크롤을 확인합니다.
5. 외부 종속성이 승인되지 않는 한 파일이 빌드 단계 없이 열리고 오프라인에서 계속 사용 가능한지 확인합니다.
6. 결과를 전달하기 전에 모든 실패를 수정합니다.