skills.rest
CcchosyyY
CcchosyyYCOMMUNITY
Explore all skills by this author →
GitHub

uitest

Compare Pencil UI designs against live web pages using Puppeteer.

Updated Feb 1, 2026
Search Tags:#design consistency#puppeteer#visual regression#code automation#pencil#ui comparison
One-click install
npx skills add https://github.com/CcchosyyY/jyosblog --skill uitest
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uitest
Source: https://github.com/CcchosyyY/jyosblog/tree/main/.claude/skills/uitest
Command: npx skills add https://github.com/CcchosyyY/jyosblog --skill uitest

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

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.

Frequently Asked Questions about uitest

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

FAQPage Schema
How do I compare UI designs from Pencil against a live deployed website?▼

You can compare specific page frames by passing page arguments to the Skill, which then targets those exact UI elements for a direct visual and attribute comparison between the Pencil design and the live site.

Can I automate code fixes to resolve visual regression found during a UI comparison?▼

You can automate code fixes for visual regression by running the Skill, which detects inconsistencies between the design and live site and generates the necessary code modifications to resolve them.

What is the best way to verify design consistency after updating web components like headers or footers?▼

Verifying design consistency involves using the Skill to compare live deployed pages against Pencil files, ensuring that updates to components like headers, footers, or content cards are accurately reflected without visual discrepancies.

Does this visual regression tool require Chrome DevTools and Puppeteer to capture live UI states?▼

This visual regression process requires Puppeteer and Chrome DevTools to capture live UI states and Pencil's API to retrieve design data, ensuring accurate detection of visual and attribute-level differences.

Related Skills

Explore More Design & Creative Skills→
RxFitRxFit

canary

Monitor live web apps for console errors and performance regressions post-deployment.

Community
Advanced
curielmccurielmc

design-review

Audit live UI for visual consistency, spacing, hierarchy, and interaction latency.

Community
Advanced
lordmaculordmacu
6

Browser

Automate web page navigation, element interaction, and DOM reading via Chrome DevTools Protocol.

Community
Intermediate
Dragoon0xDragoon0x
4

diff

Scaffold Playwright visual regression test suites with toHaveScreenshot.

Community
Intermediate