skills.rest
BaGyun0107
BaGyun0107COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-review

Detects UI inconsistencies, spacing and hierarchy issues in designs and source code, then suggests or applies fixes automatically.

Updated Mar 27, 2026
Search Tags:#design consistency#layout correction#visual qa#auto fix#ui polishing
One-click install
npx skills add https://github.com/BaGyun0107/harness-starterkit --skill design-review-bagyun0107
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/BaGyun0107/harness-starterkit/tree/main/.agents/skills/gstack-design-review
Command: npx skills add https://github.com/BaGyun0107/harness-starterkit --skill design-review-bagyun0107

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps identify visual irregularities, spacing issues, and hierarchy problems in User Interfaces, ensuring designs look consistent and polished.

Core Features & Use Cases

  • Visual Inconsistency Detection: Finds misaligned elements, spacing gaps, and hierarchy mistakes in design mockups or live sites.
  • Iterative Fixing: Automates source code corrections for identified issues, committing changes atomically.
  • Use Case: When a designer or developer notices the UI looks off, they can run this Skill to automatically find and fix spacing or alignment errors, then verify with before/after screenshots.

Quick Start

Use the design-review skill to analyze the style consistency of your web app and push changes directly to the source.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I find and fix UI spacing and hierarchy inconsistencies in my web app?▼

Visual QA for UI polish works by analyzing interface designs and source code to detect visual inconsistencies, automatically suggesting or applying fixes to spacing and hierarchy, and verifying the results through image comparison.

Can I automatically apply layout corrections to source code after a visual QA check?▼

Yes, you can automate layout corrections by applying source code modifications for identified visual inconsistencies and committing the changes atomically to maintain layout refinement and visual consistency.

Does visual QA work with both design mockups and live websites?▼

Yes, visual QA works with both design mockups and live sites by visually analyzing user interface designs and source code to detect inconsistencies, spacing gaps, and hierarchy mistakes for seamless UI polish.

What do I need to perform automated visual inconsistency detection on my UI?▼

To perform automated visual inconsistency detection, you need image comparison capabilities and source modification automation to analyze interfaces, detect spacing gaps, and apply iterative fixes to your source code.

What's the best way to ensure visual consistency across front-end components?▼

The best way to ensure visual consistency is to analyze UI designs and source code visually to detect misaligned elements and hierarchy issues, then automate source corrections and verify the results with before and after screenshots.

Related Skills

Explore More Design & Creative Skills→
truongnattruongnat

ui-reverse-engineer-pro

Convert visual UI designs into structured React components.

Community
Advanced
sajalsuhanesajalsuhane

design-review

Audit UI designs for visual inconsistencies and apply atomic fixes with before/after verification.

Community
Advanced
Adelie-SquadAdelie-Squad
17

creative-frontend

Develop reusable UI components with design-system tokens across React, Vue, and Angular.

Official
Advanced
abretonc7sabretonc7s

visual-testing

Capture screenshots before and after UI interactions to detect visual regressions.

Community
Intermediate