mcpField
S
slide-creator

slide-creator

github.com/roasbeefドキュメント3258 回インストール1 日前に更新
リポジトリ

slide-creator について

文章をスライド構成にまとめ、AI でスライド画像を生成するスキルです。記事、ニュースレター、アウトラインから視覚的なプレゼン資料を作り、指定したスライドを修正できます。

主な機能

  1. 01要点の抽出と構成整理
  2. 02スライド構成と説明ポイントの作成
  3. 03画像プロンプトとスライド画像の生成
  4. 04指定スライドの再生成や編集
  5. 05画像の一括生成

活用シーン

  1. 01ブログ記事をスライドに変換
  2. 02記事やニュースレターからスライドを作成
  3. 03フィードバックを受けて特定ページを再生成
  4. 04統一感のあるスライド背景を作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/roasbeef/claude-files --skill slide-creator

インストール後、Claude Code で/slide-creatorを入力して読み込まれたか確認します。

同梱ファイルreferences/slide-styles.mdscripts/create_slides.py

詳細

スライド作成

このスキルは、AI 画像生成を使用して、文章の内容をビジュアルなスライドデッキ画像に変換します。テキストの内容を分析し、重要なポイントを抽出して、プレゼンテーション品質のスライド画像を生成します。

前提条件

  • 画像生成には nano-banana スキルが利用可能である必要があります。
  • Python 3.10+
  • google-genai パッケージがインストールされていること

ワークフローの概要

  1. 入力:コンテンツ(ブログ記事、記事、ニュースレター、アウトライン)を受け取ります
  2. 分析:重要なポイントと構成を抽出します
  3. アウトライン:タイトルと説明ポイントを含むスライドのアウトラインを作成します
  4. 生成:画像プロンプトを作成し、スライド画像を生成します
  5. 改善:フィードバックを受け取り、特定のスライドを再生成します

コンテンツからスライドを作成する

ステップ 1:コンテンツを分析する

元のコンテンツを読み、分析して、以下を特定します。

  • メインのトピック/テーマ
  • 重要なセクションや章
  • 視覚化すべき重要なポイント
  • 論理的な流れと移行
ステップ 2:スライドのアウトラインを作成する

プレゼンテーションを次のように構成します。

Slide 1: Title slide (topic, subtitle)
Slide 2: Introduction/Problem statement
Slides 3-N: Key points (one concept per slide)
Slide N+1: Conclusion/Summary
Slide N+2: Call to action (optional)
ステップ 3:画像プロンプトを作成する

各スライドについて、以下の条件を満たす画像プロンプトを作成します。

  • 重要なコンセプトを視覚的に表現する
  • すべてのスライドで一貫したスタイルを使用する
  • テキストを重ねるための適切なスペースを確保する
  • 希望するアスペクト比に合わせる(通常は 16:9)
ステップ 4:スライド画像を生成する

nano-banana スキルを使用して画像を生成します。

# Single slide
python ~/.claude/skills/nano-banana/scripts/generate_image.py \
    "Professional slide background: [concept], [style], 16:9 aspect, clean with text space" \
    slide_01.png --aspect 16:9

# Batch generation
python ~/.claude/skills/nano-banana/scripts/batch_generate.py \
    slide_prompts.json ./slides/ --aspect 16:9 --parallel 3
ステップ 5:改善する

フィードバックを受け取り、特定のスライドを再生成します。

# Edit existing slide
python ~/.claude/skills/nano-banana/scripts/edit_image.py \
    slides/slide_03.png "make the colors more vibrant" slides/slide_03_v2.png

スライドプロンプトのパターン

タイトルスライド
Bold typography-inspired background for [topic] presentation, [style], gradient [colors], modern and professional, 16:9 aspect ratio
コンセプトスライド
Visual metaphor for [concept]: [metaphor description], [style], [brand colors], clean composition with space on [left/right] for text overlay, presentation graphic
データ/統計スライド
Abstract data visualization representing [metric/trend], infographic style, [colors], clean white background, professional presentation graphic
トランジション/セクションスライド
Section divider for [section name], abstract [theme] imagery, gradient [colors], full bleed background, minimal text space
まとめスライド
Inspiring background for conclusion: [theme], uplifting atmosphere, [colors], professional, space for summary points

スタイルプリセット

定義済みのスタイルプリセットについては、references/slide-styles.md を参照してください。

  • コーポレート:プロフェッショナルなブルー、すっきりした線、ミニマル
  • クリエイティブ:大胆な色使い、動きのある構図
  • テクニカル:ダークテーマ、コード/回路をイメージしたデザイン
  • ミニマリスト:余白、控えめなアクセント
  • 温かみのあるスタイル:アースカラー、自然な形

一括生成形式

slide_prompts.json ファイルを作成します。

[
    {
        "prompt": "Title slide for AI presentation, modern tech aesthetic, blue gradient, bold composition",
        "filename": "slide_01_title.png",
        "aspect": "16:9"
    },
    {
        "prompt": "Visual metaphor: neural network as interconnected nodes, tech illustration style, blue and purple",
        "filename": "slide_02_intro.png",
        "aspect": "16:9"
    },
    {
        "prompt": "Growth chart concept, abstract rising bars with glow effect, tech presentation style",
        "filename": "slide_03_growth.png",
        "aspect": "16:9"
    }
]

例:ブログ記事からスライドを作成する

入力ブログ記事
# The Future of Remote Work

Remote work is transforming how we think about productivity...

## Key Benefits
1. Flexibility
2. Work-life balance
3. Global talent access

## Challenges
- Communication
- Culture building
- Technology needs

## Best Practices
...
生成されたスライドのアウトライン
1. Title: "The Future of Remote Work"
2. Hook: Remote work transformation visual
3. Benefits: Flexibility metaphor
4. Benefits: Work-life balance visual
5. Benefits: Global connectivity
6. Challenges: Communication barriers
7. Solutions: Best practices overview
8. Conclusion: Future outlook
生成されたプロンプト
[
    {"prompt": "Title slide: Future of Remote Work, modern office fading into home workspace, professional blue tones", "filename": "slide_01.png"},
    {"prompt": "Remote work transformation: office desk morphing into laptop anywhere, clean illustration style", "filename": "slide_02.png"},
    {"prompt": "Flexibility concept: person working from beach, mountain, city cafe montage, lifestyle photography style", "filename": "slide_03.png"}
]

高品質なスライドを作成するためのヒント

  1. 一貫性:すべてのプロンプトで同じスタイルキーワードを使用します。
  2. テキスト用スペース:「space for text」または「clean area for overlay」を必ず含めます。
  3. アスペクト比:標準的なプレゼンテーションには 16:9 を使用します。
  4. コンセプトは 1 つに:各スライドでは、重要なポイントを 1 つだけ視覚化します。
  5. 色の調和:カラーパレットを決め、各プロンプトで参照します。

フィードバックへの対応

ユーザーが変更を依頼した場合:

  1. 特定のスライド:プロンプトを修正して、そのスライドだけを再生成します。
  2. スタイルの変更:新しいプロンプトを作成し、すべてを一括で再生成します。
  3. 軽微な編集:edit_image.py を使用して調整します。
  4. 反復的な改善:複雑な調整には chat_session.py を使用します。

出力構成

output_dir/
├── slide_01_title.png
├── slide_02_intro.png
├── slide_03_point1.png
├── slide_04_point2.png
├── slide_05_point3.png
├── slide_06_conclusion.png
└── slide_prompts.json  # Save prompts for reference

コメント