スライドの画像・ファイルからレイアウトパターンを抽出し、SLIDE-PATTERN-{name}.mdとスケルトンHTMLを生成する。「スライドパターンを抽出して」「スライドパターンを作って」「SLIDE-PATTERNを生成して」「slide-pattern-creator」と言われたときに使用する。
The English summary is being prepared. Showing the original description.
Review the instructions the agent will receive before you install.
スライドの画像・PowerPointファイル・テキスト説明からレイアウト構造を解析し、AIが再現できるようパターンを言語化した SLIDE-PATTERN-{name}.md と、グレースケールのスケルトンHTMLサンプルを生成する。
slide-md-creator が生成するSLIDE.md（デザイン定義）と組み合わせて使うことで、AIツールにデザイン＋パターンの両方を渡してスライドを生成できる。
スキル起動時、ユーザーが以下のいずれかを提供しているか確認する：
何も提供されていない場合、以下のように尋ねる：
「スライドの画像やファイルを渡してください。PowerPointファイル（.pptx）や、テキストでレイアウト構造を説明していただくことも可能です。なお、Google Slidesは直接受け付けできないため、スクリーンショットまたはPowerPoint形式でエクスポートしてください。」
複数の画像・スライドが渡された場合はすべてを受け取り、STEP 2の分析に使用する。
受け取った入力を解析し、異なるレイアウト構造を検出する。
元スライドと同じ構図を再現できるよう、コンテンツエリアを以下の観点で分析する：
以下の要素はSLIDE.mdの Slide Frame セクションで一括管理されるため、パターン分析には含めない：
パターンとして定義するのは、タイトル行より下のコンテンツエリアの構造のみとする。
表紙・セクション区切り・締め（クロージング）など、元スライドにタイトル行・フッターがなく、コンテンツがスライド全面を使う構図の場合は「フレームなし（frame: none）」のパターンとして扱う：
frame: none を記載する通常のコンテンツスライド（タイトル行があるもの）は frame: standard として扱い、従来どおりタイトルエリア・フッターのプレースホルダーを配置する。
1パターンの場合：
「1種類のレイアウトパターンを検出しました。 構造：[構造の簡単な説明] パターン名の候補：
[proposed-name]このパターン名でよいですか？別の名前にしたい場合はお知らせください。」
→ ユーザーが承認すればSTEP 4へ、別名を希望すればSTEP 3へ
複数パターンの場合：
「X種類のレイアウトパターンを検出しました：
- [構造の説明] → 候補名：
[name-1]- [構造の説明] → 候補名：
[name-2]- [構造の説明] → 候補名：
[name-3]すべてのパターンのファイルを生成しますか？ 生成するパターンを選びたい場合は番号で教えてください。」
→ ユーザーの回答に応じて対象パターンを確定し、STEP 3へ
STEP 2で提示した命名候補をユーザーが承認していない場合、このSTEPで確定する。
title-center — 中央にタイトルのみimage-left-text-right — 左に画像・右にテキストthree-column-icons — 3カラムにアイコンと説明full-image-overlay — 全面画像にテキストオーバーレイbullet-list — 見出し＋箇条書きdata-chart — 見出し＋グラフ・表quote-statement — 引用・インパクト文字summary-grid — まとめのカードグリッド複数パターンが対象の場合、1パターンずつ確認する：
「パターン1の名前：
image-left-text-rightでよいですか？」
ユーザーが承認したら次のパターンの確認へ、または変更を希望する場合は指定の名前を受け取る。
全パターンの名前が確定したらSTEP 4へ進む。
確定したパターン名でフォルダとファイルを生成する。
カレントディレクトリ内の SLIDE-PATTERN/ フォルダの中に SLIDE-PATTERN-{name}/ フォルダを作成して保存する：
SLIDE-PATTERN/SLIDE-PATTERN-{name}/SLIDE-PATTERN-{name}.md
SLIDE-PATTERN-{name}.md とスケルトンHTML（STEP 5）のどちらにも、元スライドの実際の文言（固有名詞・社名・製品名・具体的な数値・日付等）をそのまま転記しない：
以下の4セクション構成で出力する。各 [ ] に解析・確認で得た実際の値を入れる。
出力ファイル：SLIDE-PATTERN/SLIDE-PATTERN-{name}/SLIDE-PATTERN-{name}.md
このファイルはスライドのコンテンツエリア（タイトル行より下の領域）のレイアウトパターン定義書です。SLIDE.mdと組み合わせてAIツールに渡すことで、このパターンのスライドを生成できます。タイトルエリア・フッター（ブランドフッター・ページ番号）・装飾はSLIDE.mdの Slide Frame セクションで定義されるため、このファイルには含みません。文言はすべてサンプル（ダミーテキスト）です。
※ 表紙・セクション区切り・締めなど、タイトル行・フッターを使わない全面レイアウトのパターンの場合、この段落を「このファイルはスライド全面を使うレイアウトパターン定義書です。タイトルエリア・フッターは使用しません。」に差し替える。
パターン名： {name} 概要： [パターンの一言説明（例：左半分に画像、右半分に見出しと本文を配置する2カラムレイアウト）] 適したシーン： [どんな内容のスライドに向いているか（例：製品・事例紹介、ビフォーアフター、具体例の提示）]
[コンテンツエリアの構造を「分割構造 → 各エリアの中身 → 視覚階層」の順で3〜5文で説明する。縦横の段組みと各エリアの比率、繰り返し要素の個数と並び方向、どの要素が最も大きく目立つか（視線の流れ）まで記述する。タイトル・フッター・装飾は含めない。]
structure:
frame: [standard（タイトル行の下がコンテンツエリア） / none（表紙・セクション区切り・締め等の全面レイアウト）]
layout: [two-column / single / grid / top-bottom-split / 等]
columns: [カラム数（該当する場合）]
gap: [エリア間の隙間。元画像での比率から1920×1080基準に換算した値 例: 54px（高さの約5%）]
left:
width: [割合 例: 60%]
type: [image / text / icon / chart / 等]
align: [エリア内の揃え 例: 上下中央・左揃え]
role: [このエリアの役割]
right:
width: [割合 例: 40%]
type: [image / text / icon / chart / 等]
align: [エリア内の揃え 例: 上下中央・左揃え]
elements: [含まれる要素のリスト 例: [heading, body, caption]]
items: # カード・箇条書き等の繰り返し要素がある場合
count: [基本の個数（元スライドと同じ） 例: 4]
count_range: [可変範囲 例: 3〜5]
direction: [並び方向 例: 横並び・等幅]
shape: [形状 例: 角丸カード・背景塗り / ピル型 / 枠線のみ]
item_structure: [1アイテムの内部構成 例: アイコン → 見出し → 本文の縦積み]
（レイアウト構造に応じてYAMLのキーは適宜変更する。エリアの幅・高さは比率（%）で記述し、ギャップ・余白など細部のみ1920px基準のpxの目安を添える）
※ タイトル（H1）・フッターはSLIDE.mdの Slide Frame で定義されるため、この表には含めない。コンテンツエリアの要素のみを記述する。 ※ 写真は「写真添付エリア（後から実際の写真に差し替え）」、アイコンは「内容に沿ったSVGアイコンを生成して配置」として役割を記述する。 ※ 文字要素には、元スライドの見た目から見積もった1920px基準のフォントサイズの目安を役割欄に添える（例：本文24px相当、強調数値48px相当）。
| 要素 | 配置 | 役割 |
|---|---|---|
| [要素名（例：写真添付エリア）] | [配置場所（例：左カラム全体）] | [役割（例：メッセージを補強するビジュアル。ユーザーが後から実際の写真に差し替える）] |
| [要素名（例：見出し H2）] | [配置場所（例：右カラム上部）] | [役割（例：スライドの主張・サブタイトル。10〜15文字程度）] |
| [要素名（例：本文）] | [配置場所（例：右カラム中央）] | [役割（例：見出しを支える説明文（2〜4行））] |
| [要素名（例：アイコン）] | [配置場所（例：各カード上部）] | [役割（例：カードの内容を象徴する視覚要素。生成時に内容に沿ったSVGアイコンを生成する）] |
このパターンをAIに指示する際のプロンプト例：
「SLIDE-PATTERN-{name}のレイアウトで、[各エリアに入れる内容を指定]してください。デザインはSLIDE.mdに従ってください。」
注意点：
STEP 4と同じフォルダ内にスケルトンHTMLを生成する。
SLIDE-PATTERN/SLIDE-PATTERN-{name}/SLIDE-PATTERN-{name}.html
font-size: 20px; color: #999; text-transform: uppercase; で何のエリアか明示frame: standard の場合）：薄いグレーで "Title Area — SLIDE.md 参照" とラベル表示し、このエリアがSLIDE.mdで定義されることを明示する。frame: standard の場合）：薄いグレーで "Footer Area — SLIDE.md 参照" とラベル表示し、帯の中に左「ブランドフッター」・右「ページ番号」の薄字プレースホルダーを置く。タイトルエリアとフッターに挟まれた領域がコンテンツエリア（このパターンが定義する領域）となる。frame: none の場合）：表紙・セクション区切り・締めなど、STEP 2で「フレームなし」と判定したパターンでは、タイトルエリア・フッターのプレースホルダーを配置しない。スライド全体（1920×1080px）がコンテンツエリアとなる。Slide Frame 定義に従う。display:flex; flex-direction:column; で構成する：frame: standard ではタイトルエリアとフッターを flex-shrink:0 で固定し、コンテンツエリアを flex:1 で残りを埋める。frame: none では .slide 直下にコンテンツを直接配置する。border: dashed の枠内に「写真添付エリア（後から差し替え）」とラベル表示し、ユーザーが後から実際の写真に差し替えやすいことがわかるようにする。border-radius で再現する。特定のカラムや要素を囲む強調枠は、角丸・線の太さ・囲む範囲を含めて忠実に再現する（色はグレースケールに置き換えてよいが、形状は省略しない）。flex:1 を与えるか、親要素に justify-content: space-between / space-evenly を指定して高さ全体に均等分配する（元スライドが意図的に下を空けている場合のみ上寄せを維持する）。1920pxのスライドをブラウザで確認しやすいよう、SLIDE.mdのサンプルと同じ0.75スケール表示を使う。各スライドは .slide-outer > .slide-wrapper > .slide の構造で出力し、ブラウザ上では1440×810px相当で表示される。
body {
background: #E8E8E8;
padding: 40px 20px;
font-family: sans-serif;
}
.slide-outer {
margin: 0 auto 32px;
width: 1440px; /* 1920 × 0.75 */
}
.slide-wrapper {
width: 1920px;
transform-origin: top left;
transform: scale(0.75);
margin-bottom: -270px; /* 1080 × (1 - 0.75) = 270px */
}
.slide {
width: 1920px;
height: 1080px;
background: #FFFFFF;
border: 1px solid #CCCCCC;
box-sizing: border-box;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.area-label {
font-size: 20px;
color: #999999;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
.placeholder-box {
background: #F0F0F0;
border: 2px dashed #CCCCCC;
display: flex;
align-items: center;
justify-content: center;
color: #AAAAAA;
font-size: 24px;
}
パターンの構造に応じてHTMLを生成する。以下は2カラム（左写真・右テキスト）の構成例。タイトルエリア＋コンテンツエリア＋フッターエリアの3層構成とする：
<p class="slide-label">[{name}]</p>
<div class="slide-outer">
<div class="slide-wrapper">
<div class="slide">
<!-- タイトルエリア（SLIDE.mdの Slide Frame で定義） -->
<div style="padding:28px 80px 24px; border-bottom:1px dashed #CCCCCC; flex-shrink:0; background:#FAFAFA;">
<div class="area-label">Title Area — SLIDE.md 参照</div>
<div style="font-size:32px; color:#CCCCCC; margin-top:8px;">スライドタイトルが入ります</div>
</div>
<!-- コンテンツエリア（このパターンが定義する領域） -->
<div style="display:flex; flex:1; overflow:hidden;">
<div style="width:50%; padding:48px 64px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid #CCCCCC;">
<div class="area-label">Photo Area</div>
<div class="placeholder-box" style="flex:1;">写真添付エリア（後から差し替え）</div>
</div>
<div style="width:50%; padding:48px 64px; display:flex; flex-direction:column; justify-content:center;">
<div class="area-label">Heading (H2)</div>
<div style="font-size:40px; font-weight:bold; color:#333; margin-bottom:24px;">見出しが入ります</div>
<div class="area-label">Body Text</div>
<div style="font-size:24px; color:#555; line-height:1.7; margin-bottom:24px;">本文テキストが入ります。2〜4行程度の説明文が配置されます。ここにメッセージの詳細を記述します。</div>
<div class="area-label">Caption (optional)</div>
<div style="font-size:20px; color:#999;">補足・注釈テキスト</div>
</div>
</div>
<!-- フッターエリア（SLIDE.mdの Slide Frame で定義） -->
<div style="padding:16px 80px 20px; border-top:1px dashed #CCCCCC; flex-shrink:0; background:#FAFAFA; display:flex; justify-content:space-between; align-items:flex-end;">
<div>
<div class="area-label" style="margin-bottom:4px;">Footer Area — SLIDE.md 参照</div>
<div style="font-size:18px; color:#CCCCCC;">ブランドフッター</div>
</div>
<div style="font-size:18px; color:#CCCCCC;">ページ番号</div>
</div>
</div>
</div>
</div>
アイコンのプレースホルダーが必要な場合の例（円形枠＋ラベル）：
<div style="width:80px; height:80px; border-radius:50%; border:2px dashed #CCCCCC; background:#F0F0F0; display:flex; align-items:center; justify-content:center; color:#AAAAAA; font-size:14px; text-align:center;">アイコン<br>(SVG生成)</div>
td.own-value と書いたのにクラスが <td> ではなく内側の <span> に付いている等の対応ずれがあると、そのスタイルは適用されず文字がデフォルトサイズのままになる）対象パターンが複数ある場合、STEP 3〜5を1パターンずつ繰り返す：
全パターンの生成が完了したら、SLIDE-PATTERN/SLIDE-PATTERN-INDEX.md を更新する。
今回生成したパターンの内容（概要・適したシーン）をもとに、SLIDE-PATTERN/SLIDE-PATTERN-INDEX.md の最も近いカテゴリの末尾に追記する。
カテゴリは以下の12種類（ギャラリーと同じ順番）：
追記する形式（該当カテゴリのテーブル末尾に1行追加）：
| {name} | {概要の内容} | {適したシーンの内容} |
どのカテゴリにも当てはまらない場合は、最も近いカテゴリを選んで追記する。 「パターン数：XX」の行も更新する（現在の件数＋追加件数に書き換える）。
SLIDE-PATTERN/ フォルダ内にある既存の SLIDE-PATTERN-*/SLIDE-PATTERN-*.md をすべて読み込み、各ファイルの **概要：** と **適したシーン：** を抽出してインデックスを新規作成する。
各パターンは、概要・適したシーンをもとに上記12カテゴリの最も近いカテゴリに振り分ける（slide-deck-builder はこのカテゴリ見出しを頼りにパターンを探すため、カテゴリなしのフラットな一覧にしないこと）。
作成するファイルの形式（既存パターン＋今回生成したパターンをすべて含める）：
# SLIDE-PATTERN-INDEX
スライドパターンの一覧です。`slide-deck-builder` はこのファイルを参照してパターンを選択します。
新しいパターンを追加した際は、該当カテゴリの末尾に追記してください。
パターン数：XX
## 🎯 表紙・セクション
| パターン名 | 概要 | 適したシーン |
|---|---|---|
| {name} | {概要} | {適したシーン} |
## 📋 目次
| パターン名 | 概要 | 適したシーン |
|---|---|---|
| {name} | {概要} | {適したシーン} |
（以降、12カテゴリすべてを同じ形式で並べる。該当パターンがないカテゴリは見出しごと省略してよい）
インデックス更新後、以下のようにユーザーに伝える：
「[X]件のスライドパターンファイルを生成し、SLIDE-PATTERN-INDEX.md を更新しました。
[生成したフォルダ・ファイルの一覧] 例：
- SLIDE-PATTERN/SLIDE-PATTERN-image-left-text-right/
- SLIDE-PATTERN-image-left-text-right.md
- SLIDE-PATTERN-image-left-text-right.html
SLIDE.mdとこれらのパターンファイルをAIツールに渡すことで、このデザインとレイアウトでスライドを生成できます。」
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
プレゼンの内容（テキスト・Markdown・PDF等）を入力すると、SLIDE.mdとSLIDE-PATTERN-*.mdを自動選択・割り当てしてAIツールに渡せる設計書SLIDE-DECK.mdを生成する。「プレゼンの設計書を作って」「スライドデッキを組んで」「SLIDE-DECK.mdを生成して」「このプレゼン内容でスライドを作りたい」「slide-deck-builder」と言われたときに使用する。
The English summary is being prepared. Showing the original description.
既存のスライド・画像・WebサイトからデザインシステムSLIDE.mdと6ページのHTMLサンプルスライドを生成する。「このスライドのデザインシステムを作って」「SLIDE.mdを生成して」「SLIDE.mdを作りたい」「このサイトのデザインでSLIDE.mdを生成して」「slide-md-creator」と言われたときに使用する。
The English summary is being prepared. Showing the original description.
スライドの中身（シナリオ・構成案）をClaudeとの壁打ちで作成し、SLIDE-SCENARIO-{name}.mdとして出力する。レビュアー視点でのシナリオレビュー、資料を見せる相手のペルソナ定義（PERSONA-{name}.md）の作成にも対応する。slide-deck-builderの前段を担うスキル。「スライドのシナリオを作って」「構成案を壁打ちして」「プレゼンの構成を考えて」「シナリオをレビューして」「ペルソナを作って」「slide-scenario-creator」と言われたときに使用する。Use when user says "create a slide scenario" or "review my presentation outline".
The English summary is being prepared. Showing the original description.