| name | slide-deck-builder |
| description | プレゼンの内容（テキスト・Markdown・PDF等）を入力すると、SLIDE.mdとSLIDE-PATTERN-*.mdを自動選択・割り当てしてAIツールに渡せる設計書SLIDE-DECK.mdを生成する。「プレゼンの設計書を作って」「スライドデッキを組んで」「SLIDE-DECK.mdを生成して」「このプレゼン内容でスライドを作りたい」「slide-deck-builder」と言われたときに使用する。 |
slide-deck-builder
プレゼンの内容を入力すると、カレントディレクトリにあるSLIDE.mdとSLIDE-PATTERN-*.mdを自動で読み込み、各スライドにパターンを割り当てた設計書（SLIDE-DECK.md）を生成する。
生成されたSLIDE-DECK.mdにはデザインシステムとスライドパターンの定義がすべて埋め込まれるため、AIツールにこのファイル1枚を渡すだけでスライドを生成できる。
STEP 0：シナリオ入力の確認
slide-scenario-creator で作成したシナリオがあるかを最初に確認する。
- 入力として
SLIDE-SCENARIO-*.md が渡されたか、またはカレントディレクトリの SLIDE-SCENARIO/ フォルダにファイルがあるかを確認する（複数ある場合は一覧を提示して選んでもらう）
- シナリオがある場合、冒頭の Brief から
title / audience / purpose / slide_count を読み取り、以下のように要約して確認する：
「シナリオ SLIDE-SCENARIO-{name}.md を読み込みました。以下の内容でスライドを設計します。
- タイトル：[title]
- 対象者：[audience]
- 目的：[purpose]
- 枚数：[slide_count]
よろしいですか？」
- 承認を得たら STEP 1 のヒアリングをスキップ する。シナリオの Storyline・Agenda を STEP 2 のプレゼン内容として使用し、STEP 3 へ進む
- シナリオがない場合は、従来どおり STEP 1 へ進む
STEP 1：ブリーフ入力
プレゼンの基本情報を1問ずつヒアリングする。
質問1：タイトル
「今回のプレゼンのタイトルを教えてください。（例：「2026年度 営業戦略」「新サービスのご提案」）」
質問2：対象者（質問1の回答を受け取った後）
「このプレゼンは誰に向けたものですか？番号で選ぶか、自由に入力してください。
- 社内の上司・役員
- 顧客・取引先
- 社内チーム・同僚
- カンファレンス・一般聴衆
- その他（自由に入力してください）」
質問3：目的（質問2の回答を受け取った後）
「このプレゼンの目的を教えてください。番号で選ぶか、自由に入力してください。
- 状況報告・定例報告
- 提案・新サービス説明
- 教育・研修・勉強会
- 意思決定を求める（承認・予算獲得など）
- イベント・発表
- マニュアル・手順書
- その他（自由に入力してください）」
（この選択肢は slide-scenario-creator の「①資料の目的」と共通。変更する場合は両スキルを揃えること）
質問4：枚数（質問3の回答を受け取った後）
「スライドは何枚くらいにしたいですか？決まっていない場合は「おまかせ」で構いません。」
ブリーフ確認
4問が揃ったら内容をまとめて確認する：
「以下の内容でスライドを設計します。
- タイトル：[タイトル]
- 対象者：[対象者]
- 目的：[目的]
- 枚数：[枚数 or おまかせ]
よろしいですか？」
承認を得たらSTEP 2へ進む。
STEP 2：プレゼン内容の受け取り
以下のいずれかの形式でプレゼンの内容を受け取る：
- テキスト（箇条書き・文章どちらでも可）
- Markdownファイル（.md）
- PDFファイル（.pdf）
- Word文書（.docx）
何も提供されていない場合、以下のように尋ねる：
「プレゼンの内容を教えてください。アウトライン・箇条書き・文章・Markdownファイルなどどんな形式でも構いません。」
内容を受け取ったら「受け取りました。デザインシステムを確認します。」と伝え、STEP 3へ進む。
STEP 3：デザインシステムの選択
カレントディレクトリ内の SLIDE-md/SLIDE-md-*/SLIDE.md を検索する。
1件だけ見つかった場合
「デザインシステムとして SLIDE-md/SLIDE-md-{source}/SLIDE.md が見つかりました。これを使用しますか？」
承認を得たら読み込む。
複数件見つかった場合
各ファイルのOverview（マッチするシーン）を読み取って以下の形式で提示する：
「以下のデザインシステムが見つかりました。どれを使いますか？番号で教えてください。
SLIDE-md/SLIDE-md-{source1} — [SLIDE.mdのOverview「マッチするシーン」の内容]SLIDE-md/SLIDE-md-{source2} — [同上]
...」
選ばれたファイルを読み込む。
1件も見つからない場合（プラグイン同梱サンプルへのフォールバック)
カレントディレクトリに1件も見つからない場合、この SKILL.md ファイルのあるフォルダから見て ../../docs/SLIDE-md/SLIDE-md-*/SLIDE.md（プラグインとしてインストールした場合に同梱されるサンプルデザインシステム）を検索する。
見つかったら「複数件見つかった場合」と同じ形式で一覧を提示し、選ばれたフォルダ（SLIDE.md と sample.html）をカレントディレクトリの SLIDE-md/ にコピーしてから読み込む（以後のプロジェクトで再利用できるようにするため）。
プラグイン同梱サンプルも見つからない場合：
「デザインシステム（SLIDE.md）が SLIDE-md/ フォルダに見つかりませんでした。slide-md-creator スキルでSLIDE.mdを先に生成してから、このスキルを再度呼び出してください。」
→ スキルを終了する。
選択されたSLIDE.mdの全内容（Overview・Colors・Typography・Layout・Slide Frame・Component Style・Do/Don't の全セクション）を読み込んで保持し、STEP 4へ進む。
STEP 4：アウトライン生成と確認
STEP 1のブリーフとSTEP 2のコンテンツをもとにスライド構成を生成し、ユーザーに提示する。
生成ルール
- STEP 1で指定した枚数を目安にする（「おまかせ」の場合は内容量に応じて7〜15枚）
- シナリオ（SLIDE-SCENARIO）から開始した場合は、Brief の
goal（相手にどうしてほしいか）・structure（構成の型）と各アジェンダ項目の「想定枚数」を尊重して構成する
- 必ず「表紙」と「まとめ・クロージング」を含める
- セクションタイトルスライドで内容を章立てする
- 各スライドにスライドの種類（表紙 / セクション見出し / 箇条書き / データ / まとめ 等）を明記する
提示形式
「以下のスライド構成を提案します。順番・内容・枚数の変更があれば教えてください。
- [表紙] タイトル・対象者・日付
- [アジェンダ] 本日の流れ
- [セクション見出し] ○○について
- [箇条書き] ○○の現状と課題
- [データ] 数値・グラフ
- [セクション見出し] 解決策
- [箇条書き] 提案内容
...
N. [まとめ] 今日のポイントと次のステップ
このアウトラインでよいですか？」
変更があれば反映して再提示し、承認を得たらSTEP 5へ進む。
STEP 5：パターン自動割り当てと確認
カレントディレクトリの SLIDE-PATTERN/SLIDE-PATTERN-INDEX.md を読み込む。
読み込めない場合（プラグイン同梱パターンへのフォールバック）
カレントディレクトリに見つからない場合、この SKILL.md ファイルのあるフォルダから見て ../../docs/SLIDE-PATTERN/SLIDE-PATTERN-INDEX.md（プラグインとしてインストールした場合に同梱されるパターン集）を読み込む。この場合、STEP 6 でのパターン定義ファイルの読み込みも同じ場所の SLIDE-PATTERN-{name}/SLIDE-PATTERN-{name}.md から行う。
プラグイン同梱パターンも見つからない場合：
「SLIDE-PATTERN/SLIDE-PATTERN-INDEX.md が見つかりませんでした。SLIDE-PATTERN/ フォルダにスライドパターンが存在するか確認し、存在する場合は slide-pattern-creator スキルを呼び出してインデックスを生成してください。」
→ スキルを終了する。
割り当てロジック
SLIDE-PATTERN-INDEX.md に記載された各パターンの「概要」と「適したシーン」を参照し、STEP 4で確定した各スライドに最適なパターンを選ぶ。同じパターンを複数スライドに使い回してよい。
カテゴリごとに探す際の参考対応：
| スライドの種類 | 参照するカテゴリ |
|---|
| 表紙 | 🎯 表紙・セクション |
| アジェンダ・目次 | 📋 目次 |
| セクション見出し | 🎯 表紙・セクション |
| 箇条書き本文 | 📝 テキストリスト・✏️ コンテンツ（本文） |
| フロー・手順 | ➡️ フロー・ステップ |
| 図解・関係図 | 🔄 図解・ダイアグラム |
| カード・特徴列挙 | 🃏 カード・グリッド |
| グラフ・データ | 📊 グラフ・データ |
| 比較・テーブル | 📑 テーブル・比較 |
| KPI・実績 | 🏆 KPI・まとめ |
| まとめ | 🏆 KPI・まとめ |
| Q&A | ❓ Q&A・FAQ |
| プロフィール・登壇者 | 👤 プロフィール |
パターンプレビュー（pattern-preview.html）の生成
割り当て表をテキストで見せるだけでは、ユーザーはどんなレイアウトが選ばれたのかイメージできない。割り当てが決まったら、提示と同時に SLIDE-DECK/pattern-preview.html を生成する（SLIDE-DECK/ フォルダがなければ作成する。このファイルは使い捨ての確認用のため、既存のものがあれば上書きしてよい）。
プレビューの構成：
- ページ冒頭に見出しとひとこと説明：「各スライドに割り当てたレイアウトパターンのプレビューです。変更したい場合は『Slide 番号 → パターン名（または 候補A / 候補B）』の形式で伝えてください。」
- 冒頭見出しの右側に、パターンギャラリーへのショートカットボタンを配置する：
<a href="https://sho-ai-magic.github.io/slide.md/" target="_blank"> で「全パターンをギャラリーで見る ↗」というボタン（例：padding:10px 20px; border-radius:999px; background:#1A73E8; color:#FFF; font-size:14px; font-weight:700; text-decoration:none）。候補以外のパターンから選びたいときはギャラリーで全127種類を確認できる
- スライド1枚につき1つのカード（行）を縦に並べる。各カードの内容：
- 左側の情報欄：スライド番号・種類・スライドタイトル・割り当てパターン名（
code 表記）・INDEXに書かれた概要の1行
- 右側のサムネイル列：先頭に割り当てパターンのサムネイル、その右に同カテゴリの代替候補2〜3個のサムネイルを並べる（カテゴリ内のパターンが少ない場合はある分だけでよい。他スライドと候補が重複してもよい）。各サムネイルの下にパターン名を添え、候補には「候補A」「候補B」のラベルを付ける。割り当てパターンのサムネイルは枠を強調色（例：
border:3px solid #1A73E8）にし、「割り当て」バッジを付けて区別する
- ユーザーが「Slide 3 → 候補B」のようにラベルで指定した場合は、該当するパターン名に読み替えて反映する
サムネイルの実装（画像は作らず、既存のスケルトンHTMLをiframeで縮小埋め込みする）：
.thumb {
width: 384px; height: 236px; overflow: hidden; position: relative;
border: 1px solid #DDD; border-radius: 8px; background: #FFF;
}
.thumb iframe {
width: 1540px; height: 940px; border: 0;
transform: scale(0.25); transform-origin: top left;
pointer-events: none;
}
- iframe の
src には各パターンのスケルトンHTMLを指定する。カレントディレクトリにある場合はプレビューHTMLから見た相対パス（../SLIDE-PATTERN/SLIDE-PATTERN-{name}/SLIDE-PATTERN-{name}.html）、プラグイン同梱パターンを使っている場合はその絶対パスを指定する
- JavaScriptは使用しない（iframeとCSSのみで完結させる）
表示にはローカルサーバーが必須（file://直開きでは表示できない）：
pattern-preview.html は同一階層にない別のローカルHTMLファイルをiframeで読み込む構成のため、file:// で直接開くとブラウザのセキュリティ制限によりiframeの中身が空白になる（ダブルクリックで開いた場合や、プレビューパネルがファイルパスをそのまま渡す場合に起きる）。表示確認は必ず http:// 経由で行う。
-
カレントディレクトリの .claude/launch.json を確認し、カレントディレクトリ全体（SLIDE-DECK/ と SLIDE-PATTERN/ の両方を含む親フォルダ）を配信する設定が無ければ追記する（既存の設定は消さず末尾に追加する）。無ければ以下の形式で新規作成する：
{
"version": "0.0.1",
"configurations": [
{
"name": "patterns-root",
"runtimeExecutable": "python3",
"runtimeArgs": ["-m", "http.server", "{空いているポート番号}", "--directory", "{カレントディレクトリの絶対パス}"],
"port": {空いているポート番号}
}
]
}
-
そのサーバーを起動し、http://localhost:{port}/SLIDE-DECK/pattern-preview.html を開いて表示を確認する
-
ユーザーへの提示時にも、直接ファイルを開くのではなく上記のローカルサーバー経由で開くよう明記する
提示形式
「各スライドにパターンを割り当てました。
| スライド | 種類 | 割り当てパターン |
|---|
| Slide 1 | 表紙 | {pattern-name} |
| Slide 2 | アジェンダ | {pattern-name} |
| ... | | |
SLIDE-DECK/pattern-preview.html で、割り当てたパターンと代替候補をサムネイルで確認できます（file:// で直接開くとサムネイルが空白になるため、ローカルサーバー『{launch.jsonの設定名}』を起動してから開いてください）。
変更したいものがあれば「Slide番号 → 変更先のパターン名（または 候補A / 候補B）」の形式で教えてください。この割り当てでよいですか？」
HTMLのプレビュー表示機能が使える環境（Claude Code のプレビュー等）では、上記のローカルサーバーを起動した上で該当URLを開き、生成後にそのまま表示してよい。
変更があれば反映し、pattern-preview.html も再生成してから再提示する。承認を得たらSTEP 6へ進む。
STEP 6：SLIDE-DECK.md の生成
確定したブリーフ・アウトライン・パターン割り当てをもとにSLIDE-DECK.mdを生成する。
出力フォルダの決定
フォルダ名はSTEP 1のタイトルから英小文字・ハイフンのみの識別子を生成する。
- 日本語タイトルの場合：主要キーワードをローマ字またはアルファベットで表現する（例：「2026年度 営業戦略」→
2026-eigyo、「新製品発表」→ new-product）
- 変換が難しい場合：
deck-YYYYMMDD 形式を使う（例：deck-20260604）
出力先：カレントディレクトリ内の SLIDE-DECK/ フォルダの中に SLIDE-DECK-{name}/ フォルダを作成して保存する：
SLIDE-DECK/SLIDE-DECK-{name}/SLIDE-DECK-{name}.md
生成の手順
以下の順番でSLIDE-DECK.mdを組み立てる：
- Deck Info セクションを書く（ブリーフの情報をYAMLで記述）
- Design System セクションを書く（STEP 3で読み込んだSLIDE.mdの全内容をそのままコピーして貼り付ける）
- Slide Patterns セクションを書く（STEP 5で使用が確定したパターン名をもとに
SLIDE-PATTERN/SLIDE-PATTERN-{name}/SLIDE-PATTERN-{name}.md を読み込み、全内容をそのままコピーして貼り付ける。使用しないパターンは含めない）
- Slides セクションを書く（各スライドの構成とコンテンツひな型を記述する）
SLIDE-DECK.md の出力形式
以下のテンプレートに従って出力する。各 [ ] に実際の値を入れる。YAMLはコードブロックではなく4スペースインデントで記述する。
出力ファイル：SLIDE-DECK/SLIDE-DECK-{name}/SLIDE-DECK-{name}.md
SLIDE-DECK-{name}
このファイル1枚をAIツール（Claude Design、NotebookLM、Google Slides等）に渡すだけでスライドを生成できます。デザイン定義・レイアウトパターン・スライド構成の全情報がこのファイルに含まれています。
Deck Info
deck:
title: "[タイトル]"
audience: "[対象者]"
purpose: "[目的]"
slide_count: [N]
Design System
以下はSLIDE.mdのデザインシステム定義です。全スライドのデザインはこの定義に従ってください。
[STEP 3で読み込んだSLIDE.mdの全内容をここにそのまま貼り付ける。Overview・Colors・Typography・Layout・Slide Frame・Component Style・Do/Don'tのすべてのセクションを含める]
Slide Patterns
以下は使用するスライドパターンの定義です。各スライドの「pattern:」に指定されたパターン名と照合してレイアウト構造を確認してください。
Pattern: {pattern-name-1}
[SLIDE-PATTERN-{name1}.mdの全内容をここにそのまま貼り付ける。Overview・Structure・Elements・Usage Guideのすべてのセクションを含める]
Pattern: {pattern-name-2}
[SLIDE-PATTERN-{name2}.mdの全内容をここにそのまま貼り付ける]
（使用するパターンが3件以上ある場合も同様に繰り返す）
Slides
各スライドの構成とコンテンツひな型です。「pattern:」に指定されたパターン定義を上記「Slide Patterns」から参照し、各エリアにコンテンツを入れてスライドを生成してください。
Slide 1 — [スライドタイトル]
slide:
number: 1
type: "[cover / section / bullets / data / summary 等]"
pattern: "[pattern-name]"
コンテンツひな型：
[割り当てたSLIDE-PATTERNのElementsテーブルの各エリアを行として記述する。値の部分は「[○○を入れてください]」形式のひな型テキストにする。アウトラインの内容から推測できる場合はその内容を仮入力する]
例（bullet-listパターンの場合）：
- 見出し：[スライドの見出しを入れてください]
- 箇条書き1：[アウトラインの内容から生成]
- 箇条書き2：[アウトラインの内容から生成]
- 箇条書き3：[アウトラインの内容から生成]
AIへの指示：
上記の「Design System」と「Pattern: [pattern-name]」の定義に従い、このスライドを作成してください。
Slide 2 — [スライドタイトル]
slide:
number: 2
type: "[種類]"
pattern: "[pattern-name]"
コンテンツひな型：
[同様に記述]
AIへの指示：
上記の「Design System」と「Pattern: [pattern-name]」の定義に従い、このスライドを作成してください。
（以降、アウトラインの全スライド分を同じ形式で繰り返す）
生成完了の通知
SLIDE-DECK.md生成後、以下のようにユーザーに伝える：
「SLIDE-DECK/SLIDE-DECK-{name}/SLIDE-DECK-{name}.md を生成しました。
このファイル1枚をAIツールに添付するだけでスライドを生成できます。デザインシステムと使用したスライドパターン（[N]件）の定義がすべて1ファイルにまとめられています。」
