frontend-slides
アニメーション付き HTML プレゼンテーションの作成
デザイン的非専門家は視覚的に魅力的なプレゼンテーションの作成に苦労します。このスキルは、ガイド付きの視覚的探索ワークフローを通じて、特徴的なスタイリングとスムーズなアニメーションを備えた本番品質の HTML スライドデッキを生成します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「frontend-slides」を使用しています。 AI スタートアップ用のピッチデッキを作成
期待される結果:
プレゼンテーションの準備ができました！ファイル：ai-startup-pitch.html。スタイル：ダーク背景の Neon Cyber。12 スライドで、エントランスアニメーション、プログレスバー、ナビゲーションドット付き。矢印キーまたはスクロールでナビゲートしてください。
「frontend-slides」を使用しています。 quarterly-report.pptx を Web 形式に変換
期待される結果:
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 を Web に変換
レガシーな PowerPoint プレゼンテーションを、強化されたアニメーションと優れたブラウザ互換性を備えたモダンな HTML 形式に変換します。
これらのプロンプトを試す
[TOPIC] に関する新しい HTML プレゼンテーションを作成してください。[PURPOSE] 用に必要です。スムーズなアニメーションで視覚的に印象的なものにしてください。
[VIBE] の雰囲気でスライドを作成したいです。適切な美学を選べるように、スタイルプレビューを生成してください。
[FILE_PATH] の PowerPoint ファイルを、特徴的なスタイリングで HTML プレゼンテーションに変換してください。
[FILE_PATH] の既存の HTML プレゼンテーションを、より良いアニメーションとビジュアルデザインで改善してください。
ベストプラクティス
- スタイリングの前に明確なコンテンツ構造から始める - まずメッセージを把握する
- スタイルプレビューフェーズを使用して、ユーザーがビジュアルの好みを発見できるようにする
- アニメーションは控えめで目的を持ったものにする - 気を散らすのではなく強化する
- モバイルデバイスでテストし、小さい画面では重いエフェクトを無効にする
回避
- Inter や Roboto のような一般的なフォント選択は避ける - 特徴的なタイポグラフィを目指す
- アニメーションの使いすぎは避ける - メッセージを強化するもので、遅延させるものであってはならない
- 白い背景に紫のグラデーションは避ける - これは一般的な AI 風の外観になる
- スタイルプレビューフェーズをスキップしない - ユーザーはフル生成前に視覚的な確認が必要