SLIDE.md

SLIDE.md

English version here

AIとスライドを作るための設計書フォーマットと、それを生成するClaude Codeスキルパッケージ。

→ ランディングページを見る

Google DESIGN.md のコンセプトに着想を得た、スライドに特化した設計書フォーマット「SLIDE.md」の仕様と、それを自動生成するClaude Codeスキルを公開しています。

---

SLIDE.md とは

AIツール（Claude Design、NotebookLM、Google Slides等）にスライドを生成させるとき、毎回「色はこれ、フォントはこれ、レイアウトはこう」と説明するのは手間がかかります。また、同じAIに何度頼んでもデザインがバラバラになりがちです。

SLIDE.mdは、そのデザイン指示を「設計書ファイル」として一度定義し、使い回すためのフォーマットです。

4種類のファイルで構成される

ファイル	役割
SLIDE.md	デザインシステム定義。色・フォント・余白・タイトルエリア・ページ番号などを定義する。
SLIDE-PATTERN-{name}.md	レイアウトパターン定義。コンテンツエリアの構造（カラム数・要素の配置）を定義する。
SLIDE-SCENARIO-{name}.md	シナリオ（構成案）。プレゼンで伝えたい内容をアジェンダ単位で言語化したもの。SLIDE-DECK.md を作る際の入力になる（任意）。
SLIDE-DECK.md	スライド設計書。デザインとパターンの定義をすべて埋め込み、スライド構成とコンテンツひな型をまとめた1枚のブリーフ。AIツールにこのファイルだけ渡せばスライドが生成できる。

設計のポイント

デザインと構造を分離する：SLIDE.md がブランドの見た目（色・フォント）とフレーム（タイトルエリア・ページ番号）を一括管理し、SLIDE-PATTERN-*.md はコンテンツエリアのレイアウト構造だけを定義します。これにより、同じパターンを異なるデザインシステムに使い回せます。

1ファイルで完結する：SLIDE-DECK.md にはデザインとパターンの定義がすべて埋め込まれます。AIツールに渡すファイルは1枚だけで済みます。

---

フォーマット仕様

SLIDE.md

デザインシステムの定義ファイル。色・フォント・レイアウト・スライドフレームをまとめて定義します。

# SLIDE.md

## Overview
**参照ソース：** （参考にしたWebサイト・ブランドガイドライン等）
**マッチするシーン：** （このデザインが合う用途・場面）

## Colors
| 役割 | カラー名 | HEXコード |
|---|---|---|
| Primary | （色名） | #XXXXXX |
| Secondary | （色名） | #XXXXXX |
| Background | （色名） | #XXXXXX |
| Accent | （色名） | #XXXXXX |
| Text | （色名） | #XXXXXX |
| Text Sub | （色名） | #XXXXXX |
| Text Muted | （色名） | #XXXXXX |

**グラデーション：** Primary → Secondary → Accent・90deg（横）など / なし

## Typography
| 役割 | フォント | サイズ | ウェイト |
|---|---|---|---|
| 見出し（H1） | （フォント名） | 48px | Bold |
| 見出し（H2） | （フォント名） | 32px | Bold |
| 本文 | （フォント名） | 18px | Regular |
| キャプション | （フォント名） | 14px | Regular |
| モノスペース | （フォント名 / なし） | - | - |

## Layout
- **スライドサイズ：** 16:9（1920 × 1080 px）
- **余白（上下）：** （px）
- **余白（左右）：** （px）
- **テキスト整列：** 左寄せ

## Slide Frame
（タイトルエリア・ページ番号・ブランドフッター・背景アクセント・縦バーの定義）

## Component Style
（カードの角丸・影・箇条書きマーカー・番号スタイルの定義）

## Do / Don't
（このデザインでやること・やってはいけないことの一覧）

SLIDE-PATTERN-{name}.md

レイアウトパターンの定義ファイル。コンテンツエリアの構造のみを定義し、色・フォントは含みません。

# SLIDE-PATTERN-{name}

## Overview
**パターン名：** （英小文字・ハイフン区切り）
**概要：** （このパターンの説明）
**適したシーン：** （使いどころ）

## Structure（構造）
（コンテンツエリアのレイアウト構造をYAMLで記述）

## Elements（各要素の役割）
（各UI要素の役割と推奨文字数の一覧）

## Usage Guide（AIへの使い方）
（AIへのプロンプト例と注意点）

SLIDE-SCENARIO-{name}.md（任意）

スライドの中身（シナリオ）の定義ファイル。slide-scenario-creator との壁打ちで作成します。slide-deck-builder がこのファイルを見つけると、ブリーフのヒアリングをスキップしてシナリオの内容から設計書を作ります。

# SLIDE-SCENARIO-{name}

## Brief
（タイトル・対象者・目的・ゴール・構成の型・枚数）

## Storyline
（資料全体のストーリーを2〜4文で）

## Agenda
### 1. アジェンダ項目名
（キーメッセージ・理解してもらいたいこと・根拠・想定枚数）

## Notes（任意）
（補強が必要な箇所・レビューでの指摘履歴など）

SLIDE-DECK.md

AIツールに渡す最終的な設計書ファイル。SLIDE.md と使用する SLIDE-PATTERN-*.md の内容をすべて埋め込み、スライド1枚ごとのコンテンツひな型を記述します。このファイル1枚をAIツールに渡すだけでスライドが生成できます。

# SLIDE-DECK-{name}

## Deck Info
（タイトル・対象者・目的・枚数）

## Design System
（SLIDE.md の全内容を埋め込み）

## Slide Patterns
（使用するSLIDE-PATTERN-*.md の全内容を埋め込み）

## Slides
### Slide 1 — 表紙
（パターン指定 + コンテンツひな型 + AIへの指示）

### Slide 2 — …
（スライド枚数分くり返す）

---

このリポジトリのスキルについて

SLIDE.mdフォーマットを手作業で書くのは難しいため、Claude Code上で動作する4つのスキルを開発しました。 スライドの画像やプレゼン内容を渡すだけで、AIが自動でSLIDE.mdファイル群を生成します。

スキルでできること

1. 既存のスライド・Webサイトのデザインを解析して、AIが読めるデザイン定義ファイル（SLIDE.md）を自動生成
2. スライドのレイアウト構造を抽出して、再利用可能なパターン定義ファイル（SLIDE-PATTERN-*.md）を生成
3. プレゼンの構成を壁打ちで言語化して、シナリオ（SLIDE-SCENARIO-*.md）を作成（レビュアー視点のチェック・ペルソナ設定にも対応）
4. プレゼン内容を入力すると、デザイン＋パターン＋スライド構成をまとめた設計書（SLIDE-DECK.md）を自動生成

SLIDE-DECK.mdをClaude DesignなどのAIツールに渡すだけで、デザインの一貫したスライドが生成できます。

スキル一覧

スキル	できること	出力ファイル
slide-md-creator	スライド・画像・Webサイトからデザインシステムを生成	SLIDE-md/SLIDE-md-{name}/SLIDE.md + sample.html
slide-pattern-creator	スライドのレイアウト構造を解析してパターンを定義	SLIDE-PATTERN/SLIDE-PATTERN-{name}/SLIDE-PATTERN-{name}.md + .html
slide-scenario-creator	プレゼンの構成（シナリオ）を壁打ちで作成・レビュー	SLIDE-SCENARIO/SLIDE-SCENARIO-{name}.md（＋PERSONA/PERSONA-{name}.md）
slide-deck-builder	プレゼン内容をもとにスライド設計書を生成	SLIDE-DECK/SLIDE-DECK-{name}/SLIDE-DECK-{name}.md

---

使い方

---

1. スキルとサンプルファイルをインストールする

方法A：プラグインとしてインストール（おすすめ・最も簡単）

Claude Code で以下の2つのコマンドを実行するだけで完了します。

/plugin marketplace add sho-ai-magic/slide.md
/plugin install slide-md@slide-md

4つのスキルに加えて、サンプルデザインシステム10種類とスライドパターン127種類が同梱されます。サンプルファイルをプロジェクトフォルダにコピーする必要はありません（プロジェクトにファイルがない場合、スキルが自動でプラグイン同梱のサンプルを参照します）。将来のバージョンアップも /plugin marketplace update slide-md で簡単に反映できます。

完了したらそのまま Step 5 に進んでください。

方法B：Claude Codeに頼む（OS共通）

作業したいプロジェクトフォルダで Claude Code を開き、以下のように話しかけるだけで完了します。