How does the Analysis Screenshot skill identify colors?

It uses a structured process to identify backgrounds, text, interactive elements, and semantic colors, providing hex codes and attributing each color to specific observed elements.

Can it detect specific font families?

Yes, it identifies font families with confidence levels and provides approximate measurements for size, weight, and line height based on visual hierarchy.

What is the output format of the design analysis?

The skill produces a structured report organized into phases including Platform Assessment, Color Palette, Typography, Spacing, Component Catalog, and Layout Structure.

Does this skill work with Figma files?

This skill is specifically designed for analyzing flattened screenshot images. For design files where tokens are already accessible, this analysis may be unnecessary.

💬 ชาวเน็ตแห่แชร์: tools/skills/screenshot design analyzer

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.

Key Features

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

Use Cases

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

Screenshot Design Analyzer

Key Features

Use Cases

Remotion Video Engineering

Liquid Glass UI Design

Frontend Development Patterns

Key Features

Use Cases