Tutorial Generator
Documentstutorial-generatorTutorial Generator is an Agent Skill for documents published in the minicoohei/ai-agent-camp repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.
スクリーンショットからGemini Vision APIで操作チュートリアルを自動生成する。 「操作マニュアルを作って」「スクショから手順書を生成」「使い方ガイドを作成」等で発動。
QUICK START
How to use this skill
Bring this guide into your coding agent with a prompt tailored to the tool you use.
- Open your project in Codex.
- Copy and paste the prompt below.
- Review files and risks before approving any action.
Prompt to paste
Inspect the Agent Skill at https://github.com/minicoohei/ai-agent-camp/blob/HEAD/.claude/skills/tutorial-generator/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/tutorial-generator, but wait for my approval before writing files or running scripts.
Copying this prompt does not install or run the skill. Review third-party files before use.
Tutorial Generator
Analyze screenshots and generate step-by-step operation instructions.
Workflow
- Provide screenshot of the UI/screen
- Gemini Vision analyzes visible elements (buttons, forms, menus)
- Generates structured tutorial with actionable steps
- 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