ui-design-analyzer

Analyze UI/UX design screenshots for usability, accessibility, and visual issues.

1|Updated Jan 10, 2026
One-click install
npx skills add https://github.com/tomwangowa/agent-skills --skill ui-design-analyzer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-design-analyzer
Source: https://github.com/tomwangowa/agent-skills/tree/main/ui-design-analyzer
Command: npx skills add https://github.com/tomwangowa/agent-skills --skill ui-design-analyzer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the tedious and time-consuming process of manually reviewing UI/UX designs from screenshots, helping to identify usability issues, visual design flaws, and accessibility concerns.

Core Features & Use Cases

  • Comprehensive Analysis: Evaluates designs across usability, visual design, accessibility, consistency, and responsiveness.
  • Actionable Feedback: Provides specific, prioritized recommendations with examples for improvement.
  • Use Case: A product manager uploads a screenshot of a new app screen and asks for a review. The Skill provides a detailed report highlighting areas for improvement in user flow, color contrast, and button sizing before development begins.

Quick Start

Use the ui-design-analyzer skill to analyze the screenshot at /path/to/screenshot.png.

Frequently Asked Questions about ui-design-analyzer

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

FAQPage Schema
How do I analyze UI/UX designs from screenshots for usability issues?

You can review UI/UX designs from screenshots by using multimodal AI to evaluate static images for usability, visual design, and accessibility issues, generating actionable feedback and prioritized improvement suggestions.

Can I check if my app screenshot meets WCAG accessibility standards?

Yes, you can evaluate app screenshots for WCAG accessibility compliance by analyzing visual design elements like color contrast and button sizing, receiving specific recommendations to resolve accessibility concerns.

What is the best way to get design feedback on a new app screen before development?

Getting design feedback on a new app screen involves uploading a screenshot for automated review, which evaluates user flow, visual consistency, and responsiveness to generate a prioritized report of improvement areas before development begins.

Does screenshot review support extracting color palettes and comparing design variations?

Screenshot review supports extracting design elements like color palettes and comparing design variations, evaluating usability and visual consistency across multiple static UI mockups using multimodal AI capabilities.

How do I evaluate the visual consistency and responsiveness of a UI mockup?

You evaluate visual consistency and responsiveness of a UI mockup by analyzing the screenshot with multimodal AI, which assesses design elements and provides prioritized recommendations to improve the overall user experience.