promptslide

PromptSlide

AI コーディングエージェントを使ってスライドデッキを作成します。各スライドは Tailwind CSS でスタイルを設定した React コンポーネントで、アニメーションと PDF エクスポート機能が組み込まれています。

モードの判定

現在のディレクトリに PromptSlide プロジェクトがすでに存在するか確認します。

grep -q '"promptslide"' package.json 2>/dev/null

• 一致するものが見つかった場合 → 既存の PromptSlide プロジェクトです。スライドの作成に進みます。
• 一致するものがない場合 → まだプロジェクトはありません。新しいデッキの作成に進みます。

---

新しいデッキの作成

ステップ 1：コンテンツの検討

コードを書く前に、ユーザーに次のことを尋ねます。

1. このプレゼンテーションのテーマは何ですか？（トピック、主要なメッセージ）
2. 対象となる聴衆は誰ですか？（投資家、チーム、顧客、カンファレンス）
3. スライドは何枚ですか？（テーマを絞ったデッキには 5～10 枚、詳細なデッキには 10～15 枚を提案します）
4. 用意済みのコンテンツはありますか？（アウトライン、箇条書き、またはエージェントに下書きを作成させるか）

スキャフォールディングを行う前に、回答をもとにスライド構成を計画します。

ステップ 2：スタイルの方向性

コードを書く前に、ビジュアルの方向性を決めます。

1. ブランドガイドラインがあるか尋ねます — ロゴ、色、フォントなどです。ある場合は、それらをそのまま使用します。
2. ブランドガイドラインがない場合は、references/style-presets.md から 2～3 個のプリセットを提案します。それぞれを簡潔に説明し（一文と雰囲気）、ユーザーに選んでもらうか、組み合わせてもらいます。
3. ユーザーがカスタムスタイルを希望する場合は、ダークかライトか、どのような雰囲気にするか（プロフェッショナル、遊び心のある、ドラマチック、テクノロジー感のある）を尋ねます。そのうえで、プリセットの構成要素をもとにカスタムの方向性を作ります。

選択した方向性に応じて、ステップ 3～4 で設定する項目が決まります。

• 色 → src/globals.css（--primary などの CSS 変数）
• フォント → index.html の <link> と src/theme.ts の fonts
• レイアウト → src/layouts/ にカスタム React コンポーネントを作成します（下記のレイアウトを参照）
• カードスタイルとアニメーション → 方向性に応じてスライドごとに適用します

プリセットは出発点であり、厳格なテンプレートではありません。ユーザーはすべてを変更できます。すべてが React コンポーネントと CSS 変数でできています。

ステップ 3：スキャフォールディングと起動

npm create slides my-deck -- --yes
cd my-deck
npm install
npm run dev

--yes フラグを指定すると、対話形式のプロンプトを省略し、適切なデフォルト値が使用されます。my-deck はユーザーが希望する名前に置き換えます。開発サーバーはホットモジュール置換を有効にして http://localhost:5173 で起動します。

ステップ 4：ブランド設定

ブランド名とロゴは src/theme.ts で、テーマカラーは src/globals.css で編集します。詳しくは references/theming-and-branding.md を参照してください。

ステップ 5：デザインの検討

スライドのコードを書く前に、明確な美的方向性を定め、デッキ全体を見通して計画します。ありきたりでテンプレートのようなスライドは、スライドがないよりも劣ります。

方向性を選び、徹底する

エディトリアル、ブルータリスト、ラグジュアリー・ミニマル、大胆な幾何学、温かみのあるオーガニックなど、個性の際立つビジュアルスタイルを選び、デッキ全体で精緻に表現します。大切なのは強さではなく、意図の明確さです。余白とタイポグラフィを完璧に仕上げた抑制的なミニマルデッキも、大胆なマキシマリストのデッキと同じくらい力強いものです。デッキを台無しにするのは優柔不断です。あれこれ取り入れながら、何ひとつ貫き通さないことです。

コンテンツに合わせて各スライドをデザインする

• このコンテンツはどのような形がふさわしいでしょうか？ 力強い統計データが1つなら、スライドの中央に大きく配置するのが効果的です。比較なら左右に分けます。機能のリストは、余白を活かしたすっきりしたタイポグラフィで表現できるかもしれません。すべてをカードにする必要はありません。
• スライドの流れはどうでしょうか？ 情報量の多いスライドと余白の多いスライド、暗いスライドと明るいスライド、構造的なスライドと自由なレイアウトを交互に配置します。白いスライドが3枚続くと単調になります。暗い「息抜き」のスライド、画面いっぱいの色面、または非対称なレイアウトで流れに変化をつけましょう。
• 見せ場はどこでしょうか？ どのデッキにも、パターンを崩すスライドが1〜2枚必要です。大きな数字、鮮やかな色面、余白をたっぷり取った一文などがそれにあたります。人々の記憶に残るのは、こうしたスライドです。
• このデッキを忘れられないものにするのは何でしょうか？ コーディングを始める前に、この質問を考えてください。答えが「何もない」なら、デザインの方向性がまだ十分に強くありません。

最初に思いついたレイアウトを安易に選ばないでください。各スライドについて2〜3案を検討し、メッセージを最も効果的に伝えられる案を選びましょう。

コーディングの前に、デザインプランをユーザーに共有してください。 ビジュアルの方向性、配色の方針、各スライドのレイアウト案（例：「スライド3：大きな統計データを配置した非対称の2カラム構成」）を簡潔に説明します。ユーザーに承認または調整してもらい、相談せずに決めて作り始めないでください。

ステップ6：スライドを作成する

src/slides/ からデモスライドを削除し、src/deck-config.ts を空にしてから、以下の作成手順に従います。

---

スライドの作成

スライドを書く前に

新しいデッキでも既存のデッキでも、スライドファイルを作成する前に、ビジュアルの方向性をユーザーに確認してください。足場となるプロジェクトの設定で、ユーザーのメインカラーがすでに設定されている場合があります。確認せずに上書きしないでください。

スライドのコードを書く前に、デザインプランをユーザーに提示してください。 次の内容を含めます。

1. 全体的なビジュアルの方向性――雰囲気、配色の方針、メインカラーの使い方（すべての要素に使うのではなく、効果を狙って控えめに使います）
2. 各スライドのレイアウト案――単に「カード」とするのではなく、具体的な構成を示します（例：「左に大きな数字、右に説明を配置した非対称の分割レイアウト」）
3. パターンを崩す「見せ場」にするスライド
4. フォントの選択と、そのフォントがデッキの個性に合う理由

各スライドについて、コンテンツにどのような形がふさわしいかを考えてください。デザインの原則と避けるべきアンチパターンについては、references/slide-design-guide.md を参照してください。

アーキテクチャ

src/
├── layouts/           # Slide layouts — your "master themes", create freely
├── slides/            # Your slides go here
├── theme.ts           # Brand name, logo, fonts
├── deck-config.ts     # Slide order + step counts
├── App.tsx            # Theme provider
└── globals.css        # Theme colors (CSS custom properties)

主な制約

• スライドのサイズ：1280×720（16:9）。プレゼンテーションモードではコンテンツが自動的に拡大縮小されます。
• セマンティックカラー：text-foreground、text-muted-foreground、text-primary、bg-background、bg-card、border-border を使用します。これらはテーマの CSS カスタムプロパティに対応しています。
• アイコン：lucide-react からインポートします（例：import { ArrowRight } from "lucide-react"）。

スライドの作成

すべてのスライドは、SlideProps を受け取る React コンポーネントです。

// src/slides/slide-example.tsx
import type { SlideProps } from "promptslide";

export function SlideExample({ slideNumber, totalSlides }: SlideProps) {
  return (
    <div className="bg-background text-foreground flex h-full w-full flex-col p-12">
      <h2 className="text-4xl font-bold">Your Title</h2>
      <div className="flex flex-1 items-center">
        <p className="text-muted-foreground text-lg">Your content</p>
      </div>
    </div>
  );
}

src/deck-config.ts に登録します。

import type { SlideConfig } from "promptslide";
import { SlideExample } from "@/slides/slide-example";

export const slides: SlideConfig[] = [{ component: SlideExample, steps: 0 }];

レイアウト（マスターテーマ）

レイアウトは src/layouts/ に配置する React コンポーネントで、スライドのコンテンツを囲みます。構造（ヘッダー、フッター、背景、パディング）を制御し、従来のツールにおける「マスタースライド」に最も近いものです。レイアウトを一度変更すれば、それを使用するすべてのスライドに反映されます。

ビジュアルに変化をつけるため、デッキごとに2〜4種類のレイアウトを作成します。

足場となるプロジェクトには、スターターとして SlideLayoutCentered が含まれています。自由に新しいレイアウトを作成できます。どれも通常の React コンポーネントです。パディングや背景、ヘッダーのスタイルをカスタマイズしたり、まったく新しい構造パターンを追加したりできます。

アニメーション

クリックして表示するステップには <Animated> を、順番に表示する場合は <AnimatedGroup> を使用します。利用可能なアニメーション：fade、slide-up、slide-down、slide-left、slide-right、scale。

重要なルール：

• deck-config.ts の steps の値は、そのスライドで使用される最も大きい step 番号と一致する必要があります。steps: 0 はアニメーションがないことを意味します。
• <Animated> はラッパーの <div> を描画します。グリッドまたはフレックスコンテナ内で使用する場合、レイアウト用クラス（h-full、w-full、col-span-*）は内側の子要素だけでなく、<Animated> の className に指定する必要があります。そうしないとラッパーが縮んで、レイアウトが崩れます。

アニメーション API の全容については、references/animation-api.md を参照してください。

スタイル設定の制約（PDF 互換性）

画面表示と PDF 出力でスライドが同じ見た目になるように、次のルールを守ってください。

• ぼかし禁止：filter: blur() と backdrop-filter: blur() は、Chromium の PDF パイプラインで黙って破棄されます。
• グラデーション禁止：bg-gradient-to-* と放射状グラデーションは一貫して描画されません。代わりに、不透明度を指定した単色（例：bg-primary/5、bg-muted/20）を使用してください。柔らかな放射状の光彩効果を使いたい場合、プロジェクトに /public/images/glow-white.png が含まれており、絶対位置に配置した画像として使用できます。詳細はテーマ設定のリファレンスを参照してください。
• 影禁止：box-shadow（shadow-sm、shadow-lg、shadow-2xl を含む）は PDF に正しく出力されません。代わりに、境界線または背景の色合い（例：border border-border、bg-white/5）を使用してください。

コンテンツ密度のルール、デザイン原則、視覚的なアンチパターンについては、references/slide-design-guide.mdを参照してください。

視覚的な確認

スライドの作成または変更後、スクリーンショットを撮影して、正しく描画されるか視覚的に確認できます。promptslide to-image コマンドとワークフローについては、references/visual-verification.mdを参照してください。

注釈（ユーザーフィードバック）

ユーザーはブラウザーでスライドの要素をクリックして、注釈を残すことができます。注釈は、特定の DOM 要素に関連付けられたテキストフィードバックです。注釈はプロジェクトのルートにある annotations.json に保存されます。

注釈の確認

作業を開始する前に、注釈を確認してください。

cat annotations.json 2>/dev/null

各注釈には次の情報があります。

• slideIndex — 対象のスライド（0 始まり。deck-config.ts の順序に対応）
• slideTitle — 人が読めるスライド名
• target.selector — スライド内の要素を示す CSS セレクター
• target.textContent — 対象要素のテキスト内容
• target.dataAnnotate — 要素に data-annotate 属性がある場合の安定した識別子
• body — ユーザーからのフィードバック
• status — "open" または "resolved"

注釈の解決

フィードバックに対応した後、注釈の status を "resolved" に更新し、必要に応じて変更内容を説明する resolution メモを追加します。annotations.json を直接編集してください。

data-annotate 属性の追加

スライドを作成するときは、重要な要素（見出し、機能カード、統計ブロック）に data-annotate="descriptive-name" を追加し、編集後も注釈が安定するようにしてください。

<h2 data-annotate="main-title" className="text-4xl font-bold">Title</h2>
<div data-annotate="feature-card-1" className="rounded-2xl bg-card p-6">...</div>

公開メタデータ

すべてのスライドを作成した後、.promptslide-lock.json の deckMeta（タイトル、説明、3～6 個のタグ）と、items 内の各スライドの meta エントリー（タイトル、タグ、セクション）を更新してください。これらは、ユーザーが promptslide publish を実行するときに、あらかじめ入力されたデフォルト値として使用されます。まず既存のロックファイルを読み込み、他のフィールドを上書きせずに統合してください。