skills.rest
inho-team
inho-teamOFFICIAL
Explore all skills by this author →
GitHub

Qvisual-redesign

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
One-click install
npx skills add https://github.com/inho-team/qe-framework --skill qvisual-redesign
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
davpatel605-beepdavpatel605-beep

design-md

Create and validate DESIGN.md design token specification files with YAML front matter.

Community
Intermediate
cxnaivecxnaive

design-md

Manage Google DESIGN.md token specifications for design system documentation.

Community
Intermediate
Generous-CorpGenerous-Corp
13

screenshot

Capture and validate headless Pulp UI renders against reference images.

Official
Advanced
tobilafinhangittobilafinhangit
2

figma-design-references

Convert Figma design frames to static HTML/CSS files.

Community
Intermediate