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.

Screenshot Design Analyzer

Name: Screenshot Design Analyzer
Author: deepeshBodh

bydeepeshBodh

•

设计工具

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.

主要功能

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

使用场景

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

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add deepeshbodh/human-in-loop analysis-screenshot

For use in Claude.ai and ChatGPT

Download Skill