skills.rest
mqzkim
mqzkimCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/mqzkim/trading --skill design-review-mqzkim
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
speqqaispeqqai

figma-implement-design

Translate Figma design artifacts into production-ready React UI code.

Official
Advanced
ConnectiveTCSConnectiveTCS

ui-ux-expert

Guide accessible, responsive UI/UX design with WCAG 2.2 compliance.

Community
Advanced
I2olanDI2olanD

accessibility-design

Implements WCAG 2.1 accessibility standards in web interfaces.

Community
Basic
modu-aimodu-ai
267

ux-designer

Analyze user experience issues via heuristic evaluation, accessibility review, and user flow analysis.

Official
Advanced