analysis-screenshot

Installation
SKILL.md

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

  • Designing from scratch without reference screenshots
  • Working from design files (Figma, Sketch) where tokens are already exported
Related skills

More from deepeshbodh/human-in-loop

Installs
14
GitHub Stars
28
First Seen
Feb 25, 2026