Screenshot Analysis

Overview

Extract precise, implementation-ready design tokens, components, and layout structure from screenshot images through a systematic eight-phase process. Every extraction must trace back to something observed in the screenshot, and every gap must be explicitly acknowledged.

When to Use

• Analyzing a screenshot image to extract a design system
• Building a color palette from an existing interface
• Cataloging components visible in a UI screenshot
• Identifying typography scale and hierarchy from a reference app
• Measuring spacing patterns and grid structure from a screenshot
• Producing implementation-ready tokens from visual inspiration

When NOT to Use