verify-ui

Name: verify-ui
Availability: InStock
Author: ImL1s

Compare live Flutter UI against reference designs via pixel-level diff analysis.

6|Updated Apr 23, 2026

Search Tags:#ui-design #flutter #pixel-perfect #reference-design #visual-regression #verify-ui

Ready to run

npx skills add https://github.com/ImL1s/flutter-claude-skills --skill verify-ui-iml1s

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: verify-ui
Source: https://github.com/ImL1s/flutter-claude-skills/tree/main/skills/verify-ui
Command: npx skills add https://github.com/ImL1s/flutter-claude-skills --skill verify-ui-iml1s

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Flutter UI often drifts from design specs; verify-ui provides a rigorous, evidence-based method to confirm UI matches Figma or reference on real devices, reducing false positives.

Core Features & Use Cases

Side-by-side visual comparison: compare live UI against the reference design with clear diff highlights.
Real-device verification: capture screenshots on actual devices instead of emulators to ensure authenticity.
Progress evidence & iteration: document diffs and resolutions to support design-to-code handoffs and QA.

Quick Start

Run the verify-ui skill on your current Flutter screen to begin a side-by-side visual comparison with the reference design.

Frequently Asked Questions about verify-ui

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

FAQPage Schema

How do I verify my Flutter UI matches the Figma design pixel-perfectly?▼

To verify your Flutter UI matches a reference design, you can run a pixel-level visual comparison on a real device. This process captures live screenshots, performs side-by-side diff analysis, and highlights discrepancies to ensure your implementation is pixel-perfect.

Why does my Flutter UI look different on a real device compared to the emulator?▼

Flutter UI often drifts from design specs because emulators do not render authentic hardware behaviors. Real-device verification captures actual screenshots to perform evidence-based visual regression checks, reducing false positives and confirming true UI fidelity.

What is the best way to perform visual regression testing for Flutter screens?▼

The best way to perform visual regression testing is capturing screenshots on actual hardware and conducting side-by-side diff analysis against a reference design. This evidence-based method identifies pixel-level UI discrepancies before claiming implementation is complete.

Can I document UI discrepancies for design-to-code handoffs using pixel-perfect verification?▼

Yes, you can document UI discrepancies and resolutions to support design-to-code handoffs and visual QA. By capturing real-device screenshots and performing side-by-side visual comparison, you generate progress evidence to track iterations across supported screen sizes.

Does UI verification work for multiple screen sizes and devices in Flutter?▼

Yes, UI verification works across supported screen sizes and devices by capturing screenshots on actual hardware. This ensures the live Flutter UI maintains pixel-perfect accuracy against the reference design, providing evidence-based validation before visual QA completion.