/tutorial-generator

name: tutorial-generator
description: "スクリーンショットからGemini Vision APIで操作チュートリアルを自動生成する。 「操作マニュアルを作って」「スクショから手順書を生成」「使い方ガイドを作成」等で発動。"
triggers:
  - 操作マニュアルを作って
  - スクショから手順書を生成
  - 使い方ガイドを作成
  - チュートリアルを作って
  - 画面キャプチャから説明
  - tutorial-generator
  - how-to guide

Tutorial Generator

Analyze screenshots and generate step-by-step operation instructions.

Workflow

1. Provide screenshot of the UI/screen 2. Gemini Vision analyzes visible elements (buttons, forms, menus) 3. Generates structured tutorial with actionable steps 4. Outputs HTML tutorial with embedded image

Usage

python scripts/generate_tutorial.py "{screenshot_path}" --output "{output_path}"

Parameters

| Parameter | Required | Default | Description | |-----------|----------|---------|-------------| | screenshot_path | Yes | - | Path to screenshot | | --output | No | auto | Output HTML path | | --context | No | - | Additional context about the screen |

Output Format

Generated HTML includes:

• Screen overview (what this screen is for)
• Original screenshot
• Numbered operation steps
• Element locations and descriptions
• Tips and warnings

Example

# Basic usage
python scripts/generate_tutorial.py "login_screen.png"

# With context
python scripts/generate_tutorial.py "settings.png" --context "User settings page for changing password"

# Specify output
python scripts/generate_tutorial.py "dashboard.png" --output "docs/tutorials/dashboard_guide.html"

Requirements

• GEMINI_API_KEY or GOOGLE_API_KEY in environment
• Python packages: google-genai, Pillow, python-dotenv