Qvisual-redesign

Name: Qvisual-redesign
Availability: InStock
Author: inho-team

Diagnose UI design discrepancies against DESIGN.md and apply automated fixes.

6|Updated Mar 14, 2026

Search Tags:#automation #design-system #visual-design #ui-audit #token-tuning #css-jsx

Ready to run

npx skills add https://github.com/inho-team/qe-framework --skill qvisual-redesign

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Qvisual-redesign
Source: https://github.com/inho-team/qe-framework/tree/main/skills/Qvisual-redesign
Command: npx skills add https://github.com/inho-team/qe-framework --skill qvisual-redesign

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnosing and correcting UI design inconsistencies across live pages by comparing rendered output against a design system specification (DESIGN.md) and applying automated fixes to code.

Core Features & Use Cases

Capture live pages and diagnose DESIGN.md violations to ensure visual parity with the design system.
Auto-fix code and generate precise fix specifications, then re-render for verification.
Support interactive token tuning via the --tune flag to adjust spacing, typography, and color tokens in-place.

Quick Start

Run the interactive visual redesign flow to audit a target file and apply fixes.

Frequently Asked Questions about Qvisual-redesign

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

FAQPage Schema

How do I automate UI redesigns to match my design system?▼

UI design discrepancies are diagnosed by comparing live page renders against a DESIGN.md specification, identifying violations, and applying automated fixes to align the code with the design system.

How do I audit my live pages for design system violations?▼

Auditing live pages involves capturing renders and comparing them against a DESIGN.md specification to detect deviations and ensure visual parity with the design system.

Can I tune spacing and typography tokens in CSS and JSX files interactively?▼

Yes, interactive token tuning is supported via the --tune flag, providing guidance for generating and applying adjusted spacing, typography, and color tokens directly to CSS and JSX files.

Does this skill support re-rendering pages to verify design system fixes?▼

After applying automated code fixes and generating fix specifications, the skill re-renders the live pages to verify visual alignment with the design system specification.

What is the best way to fix visual deviations from a DESIGN.md specification?▼

The best way is to run an interactive visual redesign flow that diagnoses DESIGN.md violations, applies automated code fixes, generates fix specifications, and re-renders the live page for verification.