skills.rest
sukeun1997
sukeun1997COMMUNITY
Explore all skills by this author →
GitHub

design-audit

Identify UI design issues and generate a structured improvement report.

Updated Mar 3, 2026
Search Tags:#design#ui#accessibility#audit#diff#report#visual
One-click install
npx skills add https://github.com/sukeun1997/claude-config --skill design-audit-sukeun1997
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-audit
Source: https://github.com/sukeun1997/claude-config/tree/main/skills/design-audit
Command: npx skills add https://github.com/sukeun1997/claude-config --skill design-audit-sukeun1997

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Design Audit skill helps teams systematically evaluate UI quality and generate actionable improvement reports, reducing subjective design debates and accelerating design fixes.

Core Features & Use Cases

  • Automated multi-axis assessment: Typography, Color & Contrast, Spatial, Hierarchy, Distinctiveness, and Interaction are evaluated against a formal rubric.
  • Evidence-driven reporting: Produces concrete observations, evidence locations, and concrete recommendations in a standard audit template.
  • Use Case: When a product team wants to validate a UI improvement before release, run an audit on the target screens and generate a prioritized fix plan.

Quick Start

Provide a target UI artifact path or URL and run the audit to generate a detailed report.

Frequently Asked Questions about design-audit

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

FAQPage Schema
How do I audit UI design quality from a screenshot or URL?▼

A UI design audit systematically evaluates UI screens to identify visual and interaction issues. It assesses typography, color, spacing, and hierarchy against a formal rubric, generating a standardized report with evidence and concrete fix diffs.

What is included in a UI design audit report?▼

A UI design audit report includes concrete observations, evidence locations, and prioritized recommendations. It uses a standardized audit template to evaluate axes like typography, color contrast, spatial layout, hierarchy, distinctiveness, and interaction.

Can I generate concrete code diffs for UI design fixes?▼

Yes, you can generate concrete code diffs for UI design fixes. The audit detects design tokens and provides actionable recommendations within a standardized template, proposing specific diffs to accelerate design fixes and reduce subjective debates.

Does the design audit assess accessibility and color contrast?▼

Yes, the design audit assesses accessibility and color contrast. It evaluates color and contrast alongside typography, spatial layout, and hierarchy to identify UI issues and generate a structured improvement report.

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

The best way to validate UI improvements before release is to run a multi-axis design audit on target screens. This generates a prioritized fix plan covering typography, hierarchy, and interaction, replacing subjective design debates with evidence-driven reporting.

Related Skills

Explore More Design & Creative Skills→
supersterlingsupersterling
1

before-and-after

Capture before-and-after screenshots from two URLs or image paths to compare UI changes.

Community
Intermediate
adryanmoldokkr32-pixeladryanmoldokkr32-pixel

browse

Drive a Playwright-based headless browser to navigate, interact, and verify page states.

Community
Intermediate
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
Tahona-AITahona-AI

wcag-audit-patterns

Audit website compliance with WCAG 2.2 standards using automated scripts.

Official
Intermediate