UI Screenshot Reverse Engineer

Problem and Goal

Frontend reconstruction often stalls between a screenshot and usable code: the image shows layout, controls, and states, but it does not provide an engineering description that a model can act on. Screenshot Reverse Engineer turns UI screenshots into two practical artifacts: a development prompt for AI coding and a page function design document for product, design, and engineering collaboration. It stresses that conclusions should be grounded in visible screenshot evidence and user notes, not invented hidden business logic, visual elements, or modules.

How It Works and Its Boundaries

The skill starts with an overall judgment, identifying terminal type, page type, business domain, and visual style, then classifies screenshot states such as default, detail, form, modal, loading, empty, error, selected, or multi-state. It breaks down the visual system, functional modules, element interactions, and layout architecture, quantifying color, typography, radius, shadow, spacing, and density where possible. Confidence is labeled as confirmed, estimated, inferred, pending, or not applicable. When no stack is specified, it defaults to React + TypeScript + Tailwind CSS, and may infer Ant Design-style admin components, marked as inference.

It fits single-page, multi-state, or partial-screenshot reconstruction analysis; it is not meant for generating complete backend APIs, real business data, or workflows that are not visible. Multiple screenshots are analyzed separately before merging shared visual rules, and mock data must be clearly labeled rather than presented as real data.