skills.rest
seokan-jeong
seokan-jeongCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

team-shinchan:design-review

Detect discrepancies between design mockups and implemented UI by category.

8|2|Updated Feb 3, 2026
Search Tags:#design-review#visual-diff#design-implementation#qa-workflow#ui-fidelity#mismatch-report
One-click install
npx skills add https://github.com/seokan-jeong/team-shinchan --skill team-shinchan-design-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: team-shinchan:design-review
Source: https://github.com/seokan-jeong/team-shinchan/tree/main/skills/design-review
Command: npx skills add https://github.com/seokan-jeong/team-shinchan --skill team-shinchan-design-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps product teams ensure that UI designs faithfully translate into implemented interfaces by automatically identifying mismatches between design mockups and code.

Core Features & Use Cases

  • Design fidelity checks: compare mockups to implemented UI to surface discrepancies in components, layout, colors, and typography.
  • Guided design review: generate actionable reports to drive design-to-code alignment during handoffs, reviews, and post-change validation.
  • Use Case: When a design update lands, run a fidelity pass to confirm the new spec is reflected in the UI before release.

Quick Start

Provide the path to the design mockup image and the corresponding implementation path to begin the design fidelity review.

Frequently Asked Questions about team-shinchan:design-review

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

FAQPage Schema
How do I detect UI mismatches between design mockups and implemented code?▼

To detect visual discrepancies between design mockups and implemented code, provide the mockup image path and the implementation path. It analyzes visual assets against code and reports mismatches by components, colors, typography, and layout.

What is a design fidelity review and when do I need it?▼

A design fidelity review ensures UI designs faithfully translate into implemented interfaces. You need it during web and mobile design handoffs, QA reviews after design iterations, and UI validation before releases to confirm new specs are reflected in the UI.

Can I use this for both web and mobile design handoffs?▼

Yes, you can use this for both web and mobile design handoffs. It compares mockups to implemented UI to surface discrepancies in components, layout, colors, and typography, applicable across different platforms during the design-to-code alignment process.

How do I generate an actionable mismatch report for a QA workflow?▼

To generate an actionable mismatch report for a QA workflow, run a fidelity pass after a design update lands. Provide the mockup and implementation paths to produce a structured report categorizing visual discrepancies to drive post-change validation.

What's the best way to validate UI changes before a release?▼

The best way to validate UI changes before a release is to run a guided design review. By comparing the updated design mockups against the implemented UI, you can surface and resolve visual discrepancies in components, colors, typography, and layout.

Related Skills

Explore More Design & Creative Skills→
joi-fairsharejoi-fairshare
1

design-verify-web

Compares live web UI screenshots with mockup baselines using Playwright and pixel-diff analysis.

Community
Advanced
TheSoftwareHouseTheSoftwareHouse
282

ui-verification

Compare implemented interfaces against Figma designs and generate structured verification reports.

Official
Advanced
r3dlexr3dlex
2

visual-verdict

Compare UI screenshots against reference images to detect layout, style, and content discrepancies.

Community
Intermediate
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced