skills.rest
parisgroup-ai
parisgroup-aiOFFICIAL
Explore all skills by this author →
GitHub

design-critic

Analyze and auto-fix visual design issues in web applications.

1|2|Updated Apr 6, 2026
Search Tags:#design#ui#audit#auto-fix#playwright#ux#visual-audit
One-click install
npx skills add https://github.com/parisgroup-ai/imersao-ia-setup --skill design-critic-parisgroup-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-critic
Source: https://github.com/parisgroup-ai/imersao-ia-setup/tree/main/skills/design-critic
Command: npx skills add https://github.com/parisgroup-ai/imersao-ia-setup --skill design-critic-parisgroup-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design-critic eliminates inconsistent, unpolished, and untrustworthy user interfaces by automatically auditing visual quality across pages, scoring design pillars, and applying corrective code changes so teams can ship refined, modern interfaces with confidence.

Core Features & Use Cases

  • Reconnaissance that maps pages and shared components to establish scope for a full or targeted review.
  • Playwright-driven screenshot capture in desktop and mobile viewports to support visual analysis and before/after comparisons.
  • Five-pillar evaluation (Visual Consistency, Information Hierarchy, Interaction Quality, Spatial Design, Polish & Craft) with weighted scoring and severity-tagged findings.
  • Auto-fix engine that applies prioritized P0/P1/P2 corrections, re-captures screenshots, and generates a dated actionable report saved under docs/plans.
  • Cross-skill referral notes when issues fall into other domains such as layout, mobile usability, or code-quality.

Quick Start

Ask the assistant to run a full design audit on your running app and apply automatic fixes while the app is accessible at its local URL.

Frequently Asked Questions about design-critic

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

FAQPage Schema
How do I run an automated visual design audit on my web application?▼

Run a visual design audit by granting source file access and a local URL to capture Playwright screenshots, score visual pillars, and apply prioritized auto-fixes to your UI code.

What does a visual UI audit evaluate to fix inconsistent interfaces?▼

A visual UI audit evaluates Visual Consistency, Information Hierarchy, Interaction Quality, Spatial Design, and Polish & Craft using weighted scoring to tag severity and apply corrective code changes.

Do I need Playwright to capture before and after screenshots for UX fixes?▼

An optional Playwright-capable browser instance is required to capture desktop and mobile viewport screenshots for visual analysis, while source file access is required to modify UI code.

Can I automatically fix UI code issues found during a web design audit?▼

Yes, the auto-fix engine applies prioritized P0, P1, and P2 corrections to UI code, re-captures screenshots for comparison, and generates a dated actionable report saved under docs/plans.

What are the limitations of automated UX visual audits for component-based projects?▼

Automated UX visual audits require project source file access and UI code modification permissions, generating cross-skill referral notes for layout, mobile usability, or code-quality issues outside its visual scope.

Related Skills

Explore More Design & Creative Skills→
emiljuchnikowskiemiljuchnikowski

browser-capture

Capture browser screenshots at desktop, tablet, and mobile viewports with Playwright.

Community
Intermediate
ejolietejoliet

qa

Audit changed files with a dual-pass QA review and severity-tiered findings.

Community
Advanced
HouseofmvpsHouseofmvps
115

visual-diff

Detect visual regressions in web UIs via Playwright screenshot comparisons.

Community
Intermediate
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced