SkillsDesign & Web › Design Auditor
design-auditor

Design Auditor

A deep, beginner-friendly design audit that checks a design against 19 rules across both Figma files and code (HTML/CSS/React/Vue/Tailwind) — covering accessibility, color contrast, spacing, states, forms, motion, and even dark patterns — and explains every finding in plain language.

Cowork & Chat
How to use it
Give it a Figma link, a live URL, or the code/file. It auto-detects the framework and design system (shadcn/ui, MUI, Chakra, Radix, Bootstrap, etc.) and runs all 19 categories — ARIA and focus, color contrast (with color-blindness risk flagged), tokens, responsiveness, motion, forms, navigation, microcopy, and more — plus checks for manipulative “dark patterns” and runs Nielsen usability heuristics. You get a scored report with before/after fix diffs and a developer-handoff version, and it explains why each rule matters (it’s built for people who’ve never studied design). Works in English and Korean. This is the heavier, technical cousin of Design Review — reach for it on real web pages and accessibility/WCAG checks.
How to invoke / keep it on
Say “audit this design,” “check my UI for accessibility,” “is this WCAG compliant?”, or paste a Figma/site link. Have Figma connected (or the page URL handy) so it can pull the design directly.
20 powerful examples for Melinda Maria
Copy, tweak, make them yours. Just describe the task — Claude loads the skill automatically.
01"Audit our live Lariat collection page on melindamaria.com against all 19 rules — especially color contrast, accessibility, and mobile responsiveness — and give me a scored report plus before/after fixes I can hand to the developer."
02"Run a full accessibility and WCAG audit on our checkout and PDP pages, flag any color-blindness risks in our lavender/plum/pink palette, and explain each issue in plain English since I’m not a designer."
03"Check this Figma mockup of our new email-signup popup for dark patterns and manipulative UX — is the ‘no thanks’ option fair and clear? — and run Nielsen’s usability heuristics on it."
04"Audit the sign-up form on our landing page for form accessibility and focus states, then give me a developer-handoff report with the exact fixes and a before/after diff."
05"Audit our onboarding-hub home page across all 19 categories — ARIA, focus order, contrast, responsiveness, and motion — and give me a scored report with developer-ready fixes."
06"Run a contrast and color-blindness check specifically on every place we put hot pink #F161B0 on lavender or plum, tell me which combos fail WCAG AA, and suggest accessible alternatives that stay on brand."
07"Audit the mobile experience of our PDP from a Figma link — tap-target sizes, spacing, the sticky add-to-cart, and text scaling — and explain each finding for a non-designer."
08"Check our cart and checkout flow for dark patterns — forced upsells, sneaky pre-checked boxes, confusing ‘remove’ controls — and run Nielsen’s heuristics, flagging anything that erodes trust."
09"Audit the keyboard and screen-reader experience of our main navigation menu — focus states, skip links, ARIA labels — and give me the exact code-level fixes in a handoff report."
10"Run a full 19-rule audit on our email-signup landing page, score it, and prioritize the findings into ‘fix now’ vs ‘nice to have’ so I can brief the developer on what matters most."
11"Audit this Figma prototype of a new gift-finder quiz for accessibility and usability — form fields, error states, progress clarity, and motion — before we build it."
12"Check our blog template against the accessibility and readability rules — heading structure, link contrast, image alt text, and line length — and explain why each one matters."
13"Audit our wholesale portal landing page (the page NuORDER buyers hit) for accessibility and clarity, flag any confusing or off-brand patterns, and give me before/after fixes."
14"Run an accessibility audit on the interactive elements of our onboarding hub — the dropdown nav, the metric-mixer controls, and the carousel — and tell me what fails for keyboard and screen-reader users."
15"Audit our 404 and out-of-stock states for usability and tone — are they helpful and on brand, do they meet contrast and focus rules — and give me prioritized fixes."
16"Check this Figma mockup of a sale countdown banner for dark patterns — is the urgency honest, the dismiss control fair, the motion not distracting — and run the heuristics."
17"Audit the forms across our site — signup, contact, wholesale application — for label association, focus order, error messaging, and required-field clarity, and produce one consolidated handoff report."
18"Run a responsiveness and breakpoint audit on our homepage from a live URL — what breaks between phone, tablet, and desktop — and give me the exact CSS-level fixes with before/after."
19"Audit our cookie/consent banner and pop-up stack for dark patterns and accessibility — are choices equal and clear, is it keyboard-operable — and explain each finding plainly."
20"Audit our collection page’s filter and sort UI against all 19 rules — keyboard access, focus, contrast, and clear states — and give me a scored report with before/after fixes for the developer."
← Back to Design & Web
Powered by our people. Amplified by AI. Ready-to-run playbooks for every team.