Design System Analyzer

Overview

This skill enables systematic analysis of UI screenshots and design images to extract and document design system elements. Extract colors, typography, spacing patterns, and component styles from any UI, then generate a comprehensive, interactive design system with design tokens and CSS snippets ready for implementation.

When to Use This Skill

Use this skill when:

• Analyzing UI screenshots to understand the design system
• Reverse-engineering a design to create a style guide
• Documenting an existing UI's design patterns
• Converting visual designs into code-ready design tokens
• Creating a design system from mockups or screenshots
• Auditing UI consistency across different screens

Analysis Process

When analyzing a UI image, systematically examine and document the following elements in order: