| name | frontend-slides |
| description | Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices. |
| origin | ECC |
Frontend Slides
ブラウザ内で完全に動作する、依存関係ゼロのアニメーション豊富な HTML プレゼンテーションを作成します。
zarazhangrui が紹介したビジュアル探索アプローチにインスパイアされています（クレジット: @zarazhangrui）。
起動条件
- トークデッキ、ピッチデッキ、ワークショップデッキ、または社内プレゼンテーションの作成
.ppt または .pptx スライドを HTML プレゼンテーションに変換- 既存の HTML プレゼンテーションのレイアウト、モーション、またはタイポグラフィの改善
- デザインの好みがまだわからないユーザーとプレゼンテーションスタイルを探索
絶対条件
- 依存関係ゼロ: デフォルトではインライン CSS と JS を持つ単一の自己完結型 HTML ファイル。
- ビューポートフィットは必須: すべてのスライドは内部スクロールなしで1つのビューポート内に収まる必要があります。
- 見せて、語らない: 抽象的なスタイルのアンケートではなくビジュアルプレビューを使用します。
- 独自のデザイン: ジェネリックな紫グラデーション、Inter-on-white、テンプレート風のデッキを避けます。
- プロダクション品質: コードはコメント付き、アクセシブル、レスポンシブ、パフォーマントに保ちます。
生成前に、ビューポートセーフな CSS ベース、密度制限、プリセットカタログ、CSS の注意点について STYLE_PRESETS.md を読んでください。
ワークフロー
1. モードを検出する
いずれかのパスを選択します:
- 新規プレゼンテーション: ユーザーがトピック、メモ、または完全なドラフトを持っている
- PPT 変換: ユーザーが
.ppt または .pptx を持っている
- 改善: ユーザーが既に HTML スライドを持っており改善を望んでいる
