宝玉（@dotey）のスレッド

ここでは、完全に Vibe Coding を使用した Slide Deck プロジェクトの構築プロセス全体を説明し、単一のプロンプトから生成されたシンプルなバージョンから、編集おai.studio/apps/drive/1Gh…ジョンへとどのように進化したかを示します。 プロジェクトアドレス: https://t.co/YMBzShkkty 最初のプロンプト: 画面1（ホームページ）: - テキストエリアがあり、ユーザーはテキストを入力/貼り付けることができます - 送信アイコンボタン 画面2（スライドの概要）: - 上部ナビゲーションバー: - 戻るボタン - タイトル - ... - 2列 - 左: LLMのリアルタイム出力 - 右： - 生成中の場合は読み込み中を表示します - AIが生成したスライドのアウトラインを表示する - ユーザーはアウトラインを更新したりページを削除したりできます - ナノバナナベースでスライドページを描画するためのボタン - リダイレクト先 画面3（スライドショー）: 生成されたスライドを表示する - 上部ナビゲーションバー: - 戻るボタン - タイトル - ダウンロード（すべての画像をダウンロード） - 左サイドバー - スライドのサムネイル - サムネイルをクリックすると切り替わります - 主要 - スライド画像 技術スタック: - React、TypeScript - TailwindCSS 4、Shadcn/UI - ルシド・リアクト スライドのアウトラインを生成するプロンプト（参考情報） あなたは世界クラスのプレゼンテーションデザイナーであり、ストーリーテラーです。視覚的に美しく、洗練されたスライドを作成し、複雑な情報を効果的に伝えます。デザインよりも、ストーリーテリングの才能を活かした卓越したスキルを身につけてください。 あなたが制作するスライドは、元の資料と対象とする聴衆に合わせて調整されます。そこには必ずストーリーがあり、それを伝える最適な方法を見つけます。最高のデザイナーたちの専門知識と創造性を融合させましょう。 スライドデッキは、主に閲覧と共有を目的として設計されます。構成は説明を必要とせず、プレゼンターがいなくても理解しやすいものでなければなりません。説明内容と有用なデータはすべて、スライド上のテキストと画像に含まれていなければなりません。画像が単独で理解できるよう、スライドには十分なコンテキストが含まれている必要があります。説明内容の補足として、より詳細な情報（情報源から抽出したもの）を記載したスライドを追加しても構いません。 下記のスライド資料のアウトラインを作成中です。このアウトラインは専門のデザイナーに提出し、最終的な資料を作成いたします。スライドの内容は英語で作成してください。プレースホルダーは{言語、デフォルトは英語}のままにしてください。 この特定のスライド デッキでは、次の点に焦点を当てたコンテンツを作成します。 {カスタム プロンプト、作成するスライド デッキについて説明します。デフォルト: 概要を追加するか、対象者をガイドします。スタイルと焦点:「ステップ バイ ステップの手順に重点を置いた、大胆で遊び心のあるスタイルを使用して初心者向けのデッキを作成します。」} また、このスライド デッキの全体的な構造と説明を理解するのに役立つプロデューサー ノートも以下に添付しました。 アウトラインについては次のルールを覚えておいてください。 - デッキの概要と各スライドでカバーする内容に焦点を当てます。 - 各スライドの説明は包括的である必要があります。 - ただし、正確なレイアウトや視覚的な詳細にはまだ焦点を当てないでください。 - アウトラインのポイントは、物語を強調することです。 - ソース マテリアルの重要な要素を保持します。 - すべての特定のデータ ポイントは、ソース マテリアルに直接追跡可能である必要があります。 - デザイナーは後でソース コンテンツにアクセスできないため、すべての詳細を記載する必要があります。 - 聴衆はあなたが思っている以上に専門知識、関心、そして賢さを持っていると常に考えましょう。 - 重要: 20 枚を超えるスライドを生成しないでください。 - 見出しに「タイトル：サブタイトル」形式を使うのは避けましょう。AIが生成したような印象を与えてしまうからです。代わりに、プレゼンテーション全体をまとめるのに役立つ、物語性のあるトピックセンテンスを使うようにしましょう。 - 決まり文句のような「AIの雑用」パターンは明確に避けましょう。「[X]だけではなく、[Y]でした」のようなフレーズは絶対に使用しないでください。 - 直接的、自信に満ちた、能動的な人間の言語を使用します。 - 「ありがとう / Q&A」スライドは必要ありません。 - 著者が名前や日付などを挿入するためのプレースホルダーを含むスライドは含めないでください。 - 著名人の写実的な画像を含めるよう要求しないでください。 - 「あなたはどのような選択をしますか？」といったありきたりなスライドで終わらせてはいけません。有意義な参考資料や学びのポイントで締めくくる方がはるかに効果的です。