screenshot

Analyze UI screenshots for layout, color, typography, and design consistency.

8|2|Updated Feb 9, 2026
One-click install
npx skills add https://github.com/mikeparcewski/wicked-garden --skill screenshot-mikeparcewski
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: screenshot
Source: https://github.com/mikeparcewski/wicked-garden/tree/main/skills/product/screenshot
Command: npx skills add https://github.com/mikeparcewski/wicked-garden --skill screenshot-mikeparcewski

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Analyzes UI from screenshots to identify visual design quality, consistency, and usability without requiring source code.

Core Features & Use Cases

  • Inspect layout, spacing, color, typography, and responsiveness directly from image files.
  • Compare against a design system to detect deviations and accessibility considerations.
  • Use case: review a product UI screenshot to ensure alignment with brand guidelines across devices.

Quick Start

Provide the path to a screenshot image to start the visual review.

Frequently Asked Questions about screenshot

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review UI design from a screenshot without source code?

You can review UI design from a screenshot by using multimodal vision to analyze layout, spacing, color contrast, and typography directly from image files. This approach evaluates visual quality and consistency without requiring access to the underlying source code.

Can I check if my product UI screenshot matches an existing design system?

Yes, you can compare a product UI screenshot against a design system to detect deviations. The visual analysis flags inconsistencies in component usage, layout, and color contrast, ensuring alignment with established brand guidelines across devices.

What is the best way to analyze color contrast and typography in image files?

Analyzing color contrast and typography in image files is best done through visual design analysis. This method applies multimodal vision to inspect the image, identifying accessibility considerations and visual quality issues directly from the provided screenshot.

Does UI visual review work for evaluating responsiveness across multiple images?

UI visual review works for evaluating responsiveness by analyzing single or multiple images. You can provide screenshots of a product UI across different devices to assess layout adjustments and component consistency under a unified design analysis.

Do I need to provide source code to perform a design analysis on a screenshot?

No, you do not need source code to perform a design analysis. The review process requires only the path to a screenshot image, using multimodal vision to evaluate layout, spacing, and typography against design rules independently.

Why does my UI screenshot visual review flag spacing and alignment deviations?

A UI screenshot visual review flags spacing and alignment deviations to identify visual quality issues. It evaluates the image against design rules and a design system, highlighting inconsistencies in layout and component spacing to ensure visual consistency.