Screenshot Design Analyzer
Extracts precise design tokens, component inventories, and layout structures from UI screenshots through a systematic eight-phase analysis.
The analysis-screenshot skill enables Claude to act as a professional design engineer by reverse-engineering UI screenshots into structured design data. It follows a rigorous eight-phase process to identify color palettes (with hex codes and role attribution), typography scales, spacing systems, and component architectures. By tracing every extraction back to observed visual elements, it provides developers with implementation-ready specifications, making it an essential tool for building design systems, auditing interfaces, or recreating layouts from visual references.
Características Principales
0124 GitHub stars
02Systematic 8-phase UI extraction process from visual images
03Component cataloging with variant identification and state analysis
04Spacing and grid measurement to establish base units and layout patterns
05Detailed typography identification covering font families, scales, and weights
06Comprehensive color role mapping including brand, neutral, and semantic palettes
Casos de Uso
01Generating a Tailwind CSS or CSS variable theme from an existing app screenshot
02Cataloging a component library and UI inventory for legacy application modernization
03Extracting exact design tokens from high-fidelity mockups when source files are unavailable