skills.rest
yasarremre
yasarremreCOMMUNITY
Explore all skills by this author →
GitHub

ui-designer

Compare UI screenshots against design specifications to identify visual discrepancies.

Updated Feb 9, 2026
Search Tags:#typography#accessibility#ui-design#visual-analysis#color-contrast#design-verification#screenshot-review
One-click install
npx skills add https://github.com/yasarremre/SafeHands --skill ui-designer-yasarremre
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/yasarremre/SafeHands/tree/main/.agent/skills/ui-designer
Command: npx skills add https://github.com/yasarremre/SafeHands --skill ui-designer-yasarremre

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The UI Designer uses vision capabilities to verify UI screenshots against design requirements, enabling rapid identification of visual inconsistencies and accessibility gaps.

Core Features & Use Cases

  • Visual Verification: Compare implementations to designs for color accuracy, typography, spacing, and iconography.
  • UI Analysis: Identify visual issues and deviations from design specs.
  • Design Feedback: Provide actionable visual feedback and recommendations.
  • Screenshot Review: Evaluate screenshots across devices for responsive behavior.
  • Accessibility Check: Validate contrast, focus indicators, and target sizes.

Quick Start

Analyze the provided UI screenshot and report any visual deviations from the design specs.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I verify UI screenshots against design specifications?▼

You can verify UI screenshots against design specifications by using automated vision analysis to identify visual discrepancies in color, typography, and spacing. The tool outputs a structured report with actionable feedback.

Can I check color contrast for accessibility criteria during a UI design review?▼

Yes, you can check color contrast for accessibility criteria during a UI design review. The analysis validates contrast, focus indicators, and target sizes to ensure compliance with accessibility standards.

What is the best way to perform cross-platform visual testing for web and mobile interfaces?▼

The best way to perform cross-platform visual testing is by evaluating screenshots across web and mobile interfaces. This identifies responsive behavior issues and deviations from design specs.

How do I identify visual discrepancies in spacing and typography from UI implementations?▼

To identify visual discrepancies in spacing and typography, compare the UI implementation screenshots against the original design requirements. The vision analysis checks for accuracy in iconography and typography.

Does this UI design analysis tool support automated screenshot review?▼

Yes, this UI design analysis tool supports automated screenshot review. It evaluates provided screenshots to identify visual issues and provides actionable visual feedback and recommendations.

Related Skills

Explore More Design & Creative Skills→
supersterlingsupersterling
1

before-and-after

Capture before-and-after screenshots from two URLs or image paths to compare UI changes.

Community
Intermediate
arxxyrarxxyr
1

to-issues

Break down text-based plans into actionable issues for issue trackers.

Community
Intermediate
ovachieverovachiever
52

Playwright Browser Automation

Automate browser testing with Playwright across multiple viewports and UX validations.

Community
Intermediate
saajunaidsaajunaid

ui-review

Automate UI reviews for accessibility, branding, and design consistency.

Community
Advanced