design-audit

Evaluate website UI and frontend quality with a structured scoring rubric.

1|Updated Aug 6, 2026
One-click install
npx skills add https://github.com/luce12/agent-dev-workflow --skill design-audit-luce12
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-audit
Source: https://github.com/luce12/agent-dev-workflow/tree/main/toolkits/design-audit
Command: npx skills add https://github.com/luce12/agent-dev-workflow --skill design-audit-luce12

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Reviewing a website or frontend implementation often produces vague, subjective feedback. This Skill turns design review into a structured, evidence-based audit with consistent scores, prioritized issues, and concrete fixes, including before/after re-audits that verify whether prior problems were actually resolved. ## Core Features & Use Cases - Structured Scoring Rubric: Scores visual hierarchy, accessibility, interaction design, frontend implementation, and more on a 1-5 scale anchored to observed evidence, with presets for landing pages, SaaS dashboards, portfolios, ecommerce, mobile-first, and accessibility-heavy targets. - Re-Audit Mode: Compares before/after states with score deltas and marks each prior issue as Fixed, Improved, Still open, or Regressed. - Bilingual Output: Produces audits in English or Italian with localized labels while keeping preset IDs stable. - Use Case: Point the Skill at a localhost SaaS dashboard, and it inspects desktop and mobile widths, checks code and console errors, then returns a compact scorecard with the top three issues and prioritized fixes. ## Quick Start Use the design-audit skill to evaluate the design and frontend quality of my app running at localhost:3000.

Frequently Asked Questions about design-audit

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

FAQPage Schema
How do I audit the design quality of a website?▼

Provide a URL, localhost address, screenshot, or repository and select an audit preset such as landing-page or saas-dashboard. The audit inspects desktop and mobile widths, gathers evidence, and returns a scorecard with top issues and recommended fixes.

How to compare website design before and after changes?▼

Use re-audit mode with the previous audit, screenshot, URL, or commit as the baseline. It reinspects the current target, reports score deltas per category, and marks each prior issue as Fixed, Improved, Still open, or Regressed.

What design audit presets are available for different product types?▼

Presets include landing-page, saas-dashboard, portfolio, ecommerce, mobile-first, accessibility-heavy, general, and auto. Each preset adjusts category emphasis, for example conversion and CTA clarity for landing pages or information density for dashboards.

Can a design audit work from screenshots only?▼

Yes, but interaction, responsive behavior, and runtime performance are only partially inferred from static images. Running the app in a browser is preferred so console errors, states, and mobile widths can be inspected directly.

Does the design audit support languages other than English?▼

The audit explicitly supports English and Italian, localizing headings, table labels, statuses, priorities, and verdicts. Preset IDs like landing-page stay unchanged so prompts and comparisons remain stable across languages.

What are the limitations of a structured design audit?▼

Scores depend on available evidence, so inaccessible code, missing states, or screenshot-only targets introduce uncertainty that must be flagged. The audit also avoids decorative redesign advice and only recommends fixes tied to comprehension or task success.