Screenshot Manual Generator

Problem

When writing operation manuals for web or SaaS products, the difficulty is often not writing from scratch, but organizing scattered materials: screenshots, feature notes, field meanings, and section ownership. Hand-written Markdown manuals can miss field validation, button states, table columns, or role-based UI differences, and later additions may break the table of contents and cross-references. screenshot-to-manual targets this workflow by turning screenshots plus brief notes into a structured documentation draft.

How It Works

The skill works in incremental passes:
- Phase 1 framework: from the first batch of screenshots, map page hierarchy, feature modules, role differences, and operation types, then create a Markdown skeleton, table of contents, and placeholder sections.
- Phase 2 content: extract page location, UI elements, fields, table columns, status indicators, and operation flow from each screenshot, then write steps using a consistent template.
- Asset management: store images under assets/manual_images/ and name them {number}_{module}_{action}.png for later reference.
- Formatting rules: use headings, bold button labels, tables for fields, and > **Tip**: or > ⚠️ **Warning**: callouts for important constraints.

Boundaries

It fits Web/SaaS user manuals, admin console guides, and quick product documentation, especially when screenshots exist but a complete manual does not. It does not replace requirements analysis: user notes define feature meaning, while screenshots supply details. For permissions, billing, external integrations, or complex workflows, business rules still need manual input. Update the version number after major edits, and avoid breaking anchors or cross-references during incremental additions.