uitest
CommunitySync UI designs with live code.
Design & Creative#design consistency#puppeteer#visual regression#code automation#pencil#ui comparison
AuthorCcchosyyY
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill bridges the gap between design mockups and live web interfaces, ensuring visual and functional consistency by detecting and rectifying UI discrepancies.
Core Features & Use Cases
- Visual & Property Comparison: Compares UI elements between design files (Pencil) and live deployed websites, identifying differences in appearance and attributes.
- Automated Code Fixing: Automatically suggests and applies code modifications to align the live UI with the design specifications after user confirmation.
- Use Case: After a design update, use this Skill to quickly verify that all changes are accurately reflected on the live site and automatically fix any inconsistencies in components like headers, footers, or content cards.
Quick Start
Use the uitest skill to compare the 'home-dark' frame from Pencil with the live website.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: uitest Download link: https://github.com/CcchosyyY/jyosblog/archive/main.zip#uitest Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.