verify-design

Compare UI against Paper design references using Playwright and fix mismatches in place.

9|2|Updated Apr 8, 2026

Search Tags:#Playwright #UI consistency #UI fixes #Paper design #fidelity checks

Ready to run

npx skills add https://github.com/0xrafasec/ai-workflow --skill verify-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: verify-design
Source: https://github.com/0xrafasec/ai-workflow/tree/main/skills/verify-design
Command: npx skills add https://github.com/0xrafasec/ai-workflow --skill verify-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) components.

What problem does it solve?

This Skill automates UI consistency checks by comparing the current UI against Paper design references, ensuring fidelity across different viewports and fixing mismatches in place.

Core Features & Use Cases

Real-Browser Fidelity Checks: Compares the UI with Paper design references using Playwright to ensure desktop and mobile viewports are consistent.
Fix-In-Place Mismatches: Directly fixes UI mismatches without generating reports, allowing users to address issues in the same session.
Use Case: Ideal for developers and designers who need to maintain UI consistency as the application evolves.

Quick Start

Run /verify-design to automatically check and fix UI mismatches against Paper design references.

Frequently Asked Questions about verify-design

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

FAQPage Schema

How do I automate UI consistency checks against Paper design references?▼

Automate UI consistency checks by using Playwright to compare your current UI against Paper design references across desktop and mobile viewports, directly fixing mismatches in place.

Do I need Playwright to perform real-browser fidelity checks for my UI?▼

Yes, Playwright is required to perform real-browser fidelity checks, enabling the Skill to render and verify your UI against Paper design references across different viewports.

Can I fix UI mismatches in place during a Playwright testing session?▼

Yes, you can fix UI mismatches in place during a Playwright testing session, directly applying corrections without generating intermediate reports or leaving the development environment.

What is the best way to maintain UI fidelity across different viewports?▼

The best way to maintain UI fidelity is to run automated real-browser checks using Playwright to compare your evolving application against Paper design references across desktop and mobile viewports.

Are UI consistency checks limited to specific development environments?▼

UI consistency checks are applicable in development environments where maintaining design fidelity is critical, and require applicable editing tools for fix-in-place actions alongside Playwright.