SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsgenerate-slide

generate-slide

Office & productivity

View repository

Updated 10-15 17:33

About this skill

Generate Slide Skill

Automatically generates a single-slide image introducing and explaining the project content using the Nano Banana Pro (Gemini 3 Pro Image Preview) API.

Activation Contract

This skill is user-invocable: false and disable-model-invocation: true . It is not assumed that Claude will automatically select it from a normal user utterance (e.g., "make a slide").

  • Explicit /generate-slide command, or only use it when internally invoked from a parent media workflow.
  • allowed-tools is for Claude Code. In Claude, you can use AskUserQuestion for user confirmation.
  • In the Codex mirror, the equivalent confirmation is read as plan-mode input equivalent to request_user_input . If that tool is not available in normal execution, present the default values and proceed without stopping, and confirm only important undecided matters with the user.
  • disable-model-invocation: true means "the model will not start on its own just by looking at the explanation text." If explicitly activated via slash or a parent workflow, follow the procedures in the body.

Overview

3 patterns x 2 candidate images each = 6 images generated in total → quality check per pattern → retry if NG → output the best 1 image per pattern, 3 images in total.

Prerequisites

  • GOOGLE_AI_API_KEY Environment variable is set
  • Nano Banana Pro (Gemini 3 Pro Image Preview) is enabled in Google AI Studio

Feature Details

Feature Details
Slide image generation See references/slide-generator.md
Quality judgment See references/slide-quality-check.md

Execution Flow

/generate-slide
    |
    +--[Step 1] 情報収集
    |   +-- ユーザー指定テキスト or コードベース自動分析（README, package.json 等）
    |   +-- プロジェクト名・概要・主要機能・技術スタックを抽出
    |
    +--[Step 2] 仕様確認（AskUserQuestion）
    |   +-- サイズ・アスペクト比（デフォルト: 16:9 / 2K）
    |   +-- トーン（テック、カジュアル、コーポレート等）
    |   +-- 強調したいポイント（曖昧な場合のみ質問）
    |
    +--[Step 3] 3パターン x 2枚生成（Nano Banana Pro API x 6回）
    |   +-- Pattern A: Minimalist（2枚）
    |   +-- Pattern B: Infographic（2枚）
    |   +-- Pattern C: Hero Visual（2枚）
    |
    +--[Step 4] パターンごとに品質チェック
    |   +-- 各パターンの2枚を Claude が Read で読み込み
    |   +-- 5段階スコアリング → 高い方を採用候補
    |   +-- 両方スコア2以下 → プロンプト改善してリトライ（最大3回）
    |   +-- リトライ上限到達 → ユーザーに報告、続行 or スキップを選択
    |
    +--[Step 5] 最良3枚を出力
        +-- 各パターンのベスト1枚を selected/ にコピー
        +-- 結果一覧（パス + スコア + 評価コメント）をユーザーに提示

Design Patterns

Pattern Concept Characteristics
Minimalist Predominantly whitespace and typography clean, whitespace, typography-driven, elegant
Infographic Data/flow visualization data visualization, metrics, flow diagram, structured
Hero Visual Large visual + catchphrase bold visual, impactful, hero image, catchy headline

Output Destination

out/slides/
+-- minimalist_1.png       # Pattern A 候補1
+-- minimalist_2.png       # Pattern A 候補2
+-- infographic_1.png      # Pattern B 候補1
+-- infographic_2.png      # Pattern B 候補2
+-- hero_1.png             # Pattern C 候補1
+-- hero_2.png             # Pattern C 候補2
+-- selected/
|   +-- minimalist.png     # Pattern A 最良
|   +-- infographic.png    # Pattern B 最良
|   +-- hero.png           # Pattern C 最良
+-- quality-report.md      # 品質チェック結果レポート

Execution Steps

Step 1: Information Gathering

Collect project information in the following priority order:

  1. User-specified text: If a project description is passed as an argument, use it
  2. Automatic codebase analysis: If there is no argument, automatically analyze the following
    • README.md — Project overview
    • package.json / Cargo.toml / pyproject.toml — Project name, description, dependencies
    • CLAUDE.md — Project structure and purpose
    • Plans.md — Tasks in progress (if any)

Information to extract:

Item Example
Project name Claude Code Harness
Overview (1-2 sentences) A plugin that autonomously operates Claude Code with Plan-Work-Review
Main features (3-5) Skill management, quality check, parallel execution
Tech stack TypeScript, Node.js, Claude Code Plugin
Color (if any) Brand color or inferred

Step 2: Specification Confirmation

Confirm the following with AskUserQuestion (since there are default values, ask only when ambiguous):

質問1: スライドのサイズ・アスペクト比は？
  - 16:9 / 2K（推奨）
  - 4:3 / 2K
  - 1:1 / 2K
  - カスタム

質問2: トーンは？
  - テック（ダークテーマ、コード感）
  - カジュアル（明るい、フレンドリー）
  - コーポレート（フォーマル、信頼感）
  - クリエイティブ（大胆、アート寄り）

Step 3: Image Generation

slide-generator.md Following the procedure, generate 3 patterns x 2 images = 6 images.

Since the generation of each pattern is independent, run curl in parallel as much as possible:

# 並列実行例（3パターン x 2枚）
for pattern in minimalist infographic hero; do
  for i in 1 2; do
    # slide-generator.md の curl パターンを実行
    # → out/slides/${pattern}_${i}.png に保存
  done
done

Step 4: Quality check

slide-quality-check.md Evaluate the two images of each pattern according to the following criteria:

  1. Read each image with Read
  2. 5-level scoring (information conveyance, layout, text readability, professionalism, brand consistency)
  3. Within a pattern, the one with the higher score becomes the adoption candidate
  4. If both score 2 or lower → improve the prompt and regenerate (up to 3 times)

Step 5: Output results

# 最良画像を selected/ にコピー
mkdir -p out/slides/selected
cp out/slides/minimalist_best.png out/slides/selected/minimalist.png
cp out/slides/infographic_best.png out/slides/selected/infographic.png
cp out/slides/hero_best.png out/slides/selected/hero.png

Generate a quality report (out/slides/quality-report.md):

# Slide Quality Report

## 生成情報
- プロジェクト: {project_name}
- 生成日時: {datetime}
- アスペクト比: {aspect_ratio}
- トーン: {tone}

## 結果サマリー

| パターン | 候補1 | 候補2 | 採用 | スコア |
|---------|-------|-------|------|--------|
| Minimalist | 3/5 | 4/5 | 候補2 | 4/5 |
| Infographic | 4/5 | 3/5 | 候補1 | 4/5 |
| Hero Visual | 5/5 | 4/5 | 候補1 | 5/5 |

## 詳細評価
...

Error Handling

GOOGLE_AI_API_KEY not set

GOOGLE_AI_API_KEY が設定されていません。

設定方法:
1. Google AI Studio でAPIキーを取得: https://ai.google.dev/aistudio
2. export GOOGLE_AI_API_KEY="your-api-key"

Retry limit reached for all patterns

Present options with AskUserQuestion:

パターン {pattern} の画像が3回のリトライでも基準を満たしませんでした。

選択肢:
1. 最も高スコアの画像を採用して続行
2. このパターンをスキップ
3. プロンプトを手動で指定して再生成

Related skills

  • generate-video — Product demo video generation (shares the image generation engine)
  • notebookLM — Document/slide generation (different approach)