WindsurfとVibe CodingでAIプレゼンテーションを作成する方法

テック好きとして常に新しいツールを探求している私は、FlowHunt.ioのAIワークフローに関する6時間トレーニング用のプロフェッショナルなPowerPointプレゼンテーションを作成するプロジェクトに挑みました。この経験が特別だったのは、Windsurfと、そのLLMであるClaude 4 Sonnetを活用し、pptxgenjsライブラリを使って、わずか1つのプロンプトと明確なアウトラインから24枚のプレゼンテーションを自動生成できたことです。その流れをご紹介します。

目標：実践的かつビジュアルなトレーニングプレゼン資料

私の目的は、FlowHunt.ioというAIワークフロー構築プラットフォームを題材に、6時間のワークショップ用の魅力的でインタラクティブなプレゼンテーションを作成することでした。プレゼンには以下が求められました：

• 実践的かつビジュアルであり、簡潔な説明の後に実演を行う
• 金融、人事、コンプライアンス、プロジェクト管理など幅広い実例を含む
• 30分ごとに課題やクイズなどのインタラクティブ要素を設け、理解を強化
• 2部構成で、基礎から高度なモジュール型プロセスコンポーネント（MPC）まで網羅

まずはClaude 4 Sonnetで詳細なアウトラインを作成し、2つの3時間セッションごとに話題と時間配分を明確化。このアウトラインがスライド内容と構成の土台となりました。

ツール：pptxgenjsとClaude 4 Sonnet搭載Windsurf

pptxgenjsは、PowerPointプレゼンテーションをプログラムで自動生成できる強力なJavaScriptライブラリです。スライドやテキスト、画像、フォーマットもコードで追加できるので自動化に最適。これを活用するため、Windsurf（Claude 4 Sonnet搭載）を使い、アウトラインに沿ったコードとプレゼン資料生成を行いました。

まずは以下のコマンドでライブラリをインストール：

npm install pptxgenjs

数秒でライブラリと依存関係がインストールされ、準備完了です。

プロンプト：1つの指示で網羅的な成果物

ライブラリがインストールできたら、Windsurf経由でClaude 4 Sonnetに詳細なプロンプトを作成。内容は：

• pptxgenjsのインストールコマンド
• 6時間トレーニング全体のアウトライン（2部構成）
• 実践重視、ビジュアル要素、実例重視など、プレゼンの要件
• 各モジュール用のスライド（導入、実演、事例、最終課題など）作成指示

プロンプト構成（簡略版）は以下の通りです：

npm i pptxgenjsをインストール。pptxgenjsライブラリで、FlowHunt.ioのAIワークフロー6時間トレーニングのプレゼン資料を作成。次のアウトラインに従う：[詳細なセッション内訳]。実践的・ビジュアル・実例（金融、人事、コンプライアンス）を含み、30分ごとに課題を。スライドはWelcome、FlowHunt紹介、ワークフローキャンバス、ライブデモ、ツール連携、繰り返し、事例、MPC、ロジック、API、モニタリング、コンプライアンス、デプロイ、最終課題、Q&Aを作成。

このプロンプトで、Claude 4 Sonnetはpptxgenjsを使った完全なJavaScriptファイル（flowhunt-training.js）を自動生成。スライドレイアウトからFlowHuntのカラースキームを使った一貫したブランディングまで、全て網羅されています。

プロセス：コードからスライドへ

生成されたスクリプトは簡単に実行できます。以下のコマンドを実行：

node flowhunt-training.js

スクリプトは順調に動作し、色コードに関する警告（例：“70AD4720 is not a valid scheme color or hex RGB! ‘000000’ used instead”）が数回出ましたが、出力には影響なく、ライブラリが黒色に自動調整してくれました。数秒でFlowHunt-AI-Workflows-Training.pptxという24スライド構成のプロ仕様プレゼン資料が生成されました。

生成資料は、以下のような自動化の成果が現れています：

Session 1（10枚）： FlowHunt.ioの基礎、ワークフロー構築ライブデモ、ツール連携（CSV、Google Sheets）、反復のヒント、実例（金融：予算チェック、人事：自動オンボーディングBot）、LEGOメタファーを使ったMPC紹介などを網羅。

Session 2（8枚）： MPCの作成、条件分岐ロジック、API連携（Google検索、CRM、Slack）、ガバナンス、コンプライアンスBot、デプロイまで。最後はハッカソン風の課題スライドで締め。

追加スライド： Welcome、アジェンダ、休憩、Q&A、お礼など、流れが途切れないよう工夫。

全スライドには一貫したブランド色、明快なタイトル、GIFや動画用のプレースホルダーなどビジュアル要素も備えています。インタラクティブな要素（実演手順やグループ課題）も自然に統合されています。

成果：すぐ使えるプレゼン資料

最終的な成果物は239KBのPowerPointファイルで、どの互換ソフトでもすぐに開けます。さらに、Claude 4 SonnetがREADME.mdも自動生成してくれたので、使い方やプレゼンの見どころもドキュメント化済み。要件通りのプロ仕様、かつインタラクティブでビジュアルなプレゼンが一発で完成しました。

振り返り：AI駆動開発の威力

今回の経験で、WindsurfやClaude 4 SonnetのAIツールの威力を実感しました。わずか1プロンプトで、アウトラインから24枚の本格的なプレゼンを、フォーマット・ブランド・インタラクティブ要素まで含めて自動生成。pptxgenjsも非常に強力で、要件理解とコード生成能力は素晴らしいものでした。

特に印象的だったのは効率性です。手作業で24枚分のコードとフォーマットを揃えるには何時間もかかるはずですが、Claudeは数秒でモジュール化されたカスタマイズしやすいスクリプトを出力。色コードの警告も、必要ならスクリプト内の値を直すだけで解決できます。

次のステップ

この成果には大満足で、FlowHunt.ioのトレーニング本番で使う予定です。今後は、

• スライドにオリジナル画像やGIFを追加（スクリプトにはプレースホルダーあり）
• カラースキームを調整して警告を解消
• インタラクティブ課題をさらに詳細化

など、さらなる改善も計画中。AI自動化によるコンテンツ作成の可能性を実感したので、今後も積極的に活用していきたいです。短時間で高品質なプレゼンを作りたい方には、pptxgenjsとClaude 4 Sonnet＋Windsurfの組み合わせを強くおすすめします—まさに革命的な体験でした！