About this skill

Problem: screenshot notes tend to be scattered

UI prototype screenshots are often turned into loose page notes: navigation, filters, tables, modals, and states are spread across chat messages; multi-page projects repeat the same header, pagination, and button rules; and screenshot-to-page generation can easily invent missing APIs, backend flows, or business rules. This skill addresses that gap by turning screenshots into reusable, reviewable front-end page specifications.

How it works: classify the context, then document with a fixed structure

Scope detection: one screenshot produces a standardized single-page document; multiple related screenshots produce per-page documents, an overall workflow/page-relationship document, and shared cross-page rules.
Scenario routing: defaults to PC web / desktop; for mobile, responsive, standalone modals, low-fidelity wireframes, real product screenshots, or design-system extraction, read references/scenario-routing.md before deciding output style.
Prompt depth: complex pages with multiple panels, tables, forms, modals, or drawers use the full prompt; simple pages or standalone components use the concise prompt.
Fixed decomposition order: page basics, global navigation, category/filter/form area, main content carrier, footer/pagination/auxiliary actions, modal/drawer/overlay components, interaction rules, and data states.
Cross-page standardization: shared navigation, headers, colors, pagination, or state rules are written once and referenced by each page document.
Output boundary: missing backend flows, API semantics, or business rules are not invented; uncertain items are marked none or unknown.

Boundaries

Use it for UI-to-frontend specs, component-level rules, mobile/responsive page docs, design-system extraction lists, or wireframe inference. It does not replace API design, backend workflow design, or a full PRD. Ask for split screenshots only when information density is high and missing details would materially affect accuracy. Upstream/downstream relationships in the same main flow belong in the overview document rather than repeated on every page.

Screenshots

Use Cases

Front-end engineers turn multiple admin screenshots into a unified page doc covering navigation, filters, tables, and pagination.
Product owners separate mobile and PC prototypes into terminal-specific interaction rules to avoid mixed assumptions.
Design-system owners extract shared button, color, state, and layout rules from real product screenshots.
Outsource teams convert low-fidelity wireframes into structural inference docs with uncertain details marked.

Best For

Front-end engineers building admin pages who need screenshots turned into reviewable page specs.
Product managers handling cross-platform pages who need mobile and PC interaction rules separated.
UI designers maintaining design systems who need shared component, color, state, and layout rules extracted.
Tech leads managing outsourced front-end work who need wireframes converted into docs with uncertainty marked.