frontend-slides
애니메이션이 포함된 HTML 프레젠테이션 만들기
비디자이너는 시각적으로 매력적인 프레젠테이션을 만드는 데 어려움을 겪습니다. 이 스킬은 안내된 시각적 탐색 워크플로를 통해 독특한 스타일링과 부드러운 애니메이션이 포함된 프로덕션品质的 HTML 슬라이드 덱을 생성합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"frontend-slides" 사용 중입니다. Create a pitch deck for my AI startup
예상 결과:
프레젠테이션이 준비되었습니다! 파일: ai-startup-pitch.html. 스타일: 네온 사이버 with 다크 배경. 12개 슬라이드와Entrance 애니메이션, 진행률 표시줄, 네비게이션 도트 포함. 화살표 키나 스크롤로 네비게이션하세요.
"frontend-slides" 사용 중입니다. Convert my quarterly-report.pptx to web format
예상 결과:
PowerPoint에서 15개 슬라이드를 추출했습니다. 스타일 선택 중 - 3개의 미리보기 옵션을 생성했습니다(Corporate Elegant, Dark Executive, Clean Minimal). 어떤 미학이 마음에 드시나요?
보안 감사
안전This skill generates HTML presentations and converts PowerPoint files. Static analysis detected external_commands, network, and filesystem patterns, but evaluation confirms these are false positives. The 'external_commands' are documentation strings showing file paths. Network access is limited to loading font resources from legitimate CDNs. Filesystem operations are for extracting PPT content. No malicious intent or security risks identified.
품질 점수
만들 수 있는 것
컨퍼런스 강연 슬라이드
일반적인 프레젠테이션에서 돋보이는 사용자 정의 애니메이션과 독특한 미학으로 기술 강연이나 키노트를 위한 시각적으로 인상적인 슬라이드를 만드세요.
스타트업 피치 덱
최소한의 디자인 노력으로 전문적인 피치 덱을 생성하여 투자자와 고객에게印象深刻인 시각적 디자인으로 제공하세요.
기존 PPT를 웹으로 변환
향상된 애니메이션과 더 나은 브라우저 호환성을 위해 레거시 PowerPoint 프레젠테이션을 현대적인 HTML 형식으로 변환하세요.
이 프롬프트를 사용해 보세요
[TOPIC]에 대한 새 HTML 프레젠테이션을 만드세요. [PURPOSE]에 필요합니다. 부드러운 애니메이션으로 시각적으로 인상적으로 만들어주세요.
[VIBE] 느낌의 슬라이드를 만들고 싶습니다. 적절한 미학을 선택할 수 있도록 스타일 미리보기를 생성해주세요.
[FILE_PATH]에 있는 PowerPoint 파일을 독특한 스타일링이 포함된 HTML 프레젠테이션으로 변환해주세요.
[FILE_PATH]에 있는 기존 HTML 프레젠테이션을 더 나은 애니메이션과 시각적 디자인으로 개선해주세요.
모범 사례
- 스타일링 전에 명확한 콘텐츠 구조로 시작하세요 - 먼저 메시지를 파악하세요
- 스타일 미리보기 단계를 사용하여 사용자가 시각적 선호도를 발견하도록 하세요
- 애니메이션을 미묘하고 의도적으로 사용하세요 - 강화하지만 방해하지 마세요
- 모바일 기기에서 테스트하고 작은 화면에서는 무거운 효과를 비활성화하세요
피하기
- Inter나 Roboto와 같은 일반적인 폰트 선택은 피하세요 - 독특한 타이포그래피를 추구하세요
- 애니메이션을 과도하게 사용하지 마세요 - 지연시키지 않고 강화해야 합니다
- 흰색 배경에 보라색 그라데이션은 피하세요 - 이것은 일반적인 AI 미학입니다
- 스타일 미리보기 단계를 건너뛰지 마세요 - 사용자는 전체 생성 전에 시각적 확인이 필요합니다