design-review

Analyze UI/UX designs from screenshots, Figma URLs, or component code.

Updated Mar 1, 2026

Search Tags:#accessibility #WCAG #UI/UX #design system #design review #usability heuristics

Ready to run

npx skills add https://github.com/mqzkim/trading --skill design-review-mqzkim

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/mqzkim/trading/tree/main/.agents/skills/design-review
Command: npx skills add https://github.com/mqzkim/trading --skill design-review-mqzkim

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides in-depth UI/UX design reviews from the perspective of a senior designer, identifying usability, accessibility, and aesthetic issues.

Core Features & Use Cases

Comprehensive Analysis: Reviews designs based on established heuristics, accessibility standards (WCAG), and psychological principles.
Multi-Format Input: Accepts screenshots, Figma URLs, or component code for review.
Use Case: Submit a screenshot of your app's new onboarding flow to get a detailed critique covering visual hierarchy, interaction clarity, and potential accessibility barriers.

Quick Start

Use the design-review skill to review the screenshot located at 'screenshots/onboarding_step1.png'.

Frequently Asked Questions about design-review

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

FAQPage Schema

How do I get an expert UI/UX design review for accessibility compliance?▼

An expert UI/UX design review evaluates your interface against WCAG 2.2 standards and usability heuristics. You submit screenshots, Figma URLs, or component code to receive a detailed critique identifying accessibility barriers and visual hierarchy issues.

Can I use a Figma URL for a comprehensive usability heuristics evaluation?▼

Yes, a Figma URL can be used for a comprehensive usability heuristics evaluation. The review simulates a senior designer's perspective to analyze interaction patterns, visual design, and adherence to established design principles directly from your linked components.

What is the best way to check if my onboarding flow meets WCAG 2.2 standards?▼

The best way to check WCAG 2.2 compliance is to submit a screenshot of your onboarding flow for review. The analysis identifies potential accessibility barriers, evaluates interaction clarity, and provides feedback based on psychological principles and established heuristics.

Does the design review process accept component code as input?▼

Yes, the design review process accepts component code as input. Alongside screenshots and Figma URLs, submitting code allows the review to analyze visual design, interaction patterns, and accessibility compliance from your actual implementation.

Are there limitations to what a simulated senior designer can evaluate in a design system?▼

A simulated senior designer evaluates visual hierarchy, interaction patterns, and accessibility compliance. The review is limited to the provided screenshots, Figma URLs, or component code, analyzing adherence to design principles and usability heuristics without testing live user interactions.