AI Prompts

Design Review & Audit Prompts

AI prompts for reviewing existing code — accessibility audits, design consistency checks, and performance reviews.

AI Prompt advanced

How To Use This Guide

Use this as a starting prompt, then replace placeholders with your real brand, constraints, and content.

At A Glance

Level: advanced
Type: AI Prompt
Updated: 2026-03-22

Why AI-Powered Reviews?

AI catches what humans skip after staring at code too long: missing alt texts, broken heading hierarchies, contrast failures, inconsistent spacing. These prompts turn any AI assistant into a design QA tool.

Accessibility Audit

Perform a WCAG AA accessibility audit on the following HTML.

Check for:
1. Heading hierarchy (h1 → h2 → h3, no skipped levels)
2. Image alt text (meaningful for content images, alt="" for decorative)
3. Form labels (every input has a visible label, not just placeholder)
4. Color contrast (estimate from class names — flag text-gray-400 on white, etc.)
5. Focus states (are focus-visible styles present on interactive elements?)
6. ARIA attributes (correct roles, aria-labels, aria-current, aria-expanded)
7. Keyboard navigation (can all interactive elements be reached via Tab?)
8. Screen reader text (sr-only spans where visual context isn't available)
9. Skip link (is there a skip-to-content link?)
10. Language attribute (is lang set on <html>?)

For each issue:
- Line number or element description
- What's wrong
- How to fix it (exact code)
- WCAG criterion it violates (e.g., 1.1.1, 1.4.3)

Rate: 🟢 Pass | 🟡 Minor Issues | 🔴 Critical Issues

[PASTE HTML]

Design Consistency Check

Review this HTML for design consistency with these rules:

Spacing: 8px grid — only p-2, p-4, p-6, p-8, gap-2, gap-4, gap-6, py-12, py-16, py-24
Radius: rounded-lg for containers, rounded-md for small elements, rounded-full for pills
Colors: should use CSS custom properties (var(--color-*)), not hardcoded Tailwind colors
Typography: text-sm for labels, text-base for body, text-lg+ for headings
Shadows: max shadow-lg, no shadow-2xl
Borders: 1px (default), border-[var(--color-border)]

Flag every violation:
- Element description
- What rule it breaks
- Suggested fix

Also flag:
- Inconsistent patterns (same concept styled differently in different places)
- Unnecessary nesting (divs that serve no purpose)
- Missing responsive classes (elements that won't work on mobile)

[PASTE HTML]

Performance Review

Review this HTML/CSS for frontend performance issues:

Check for:
1. Excessive DOM depth (> 15 levels of nesting)
2. Large images without loading="lazy"
3. Render-blocking resources
4. Unused CSS classes (classes that don't match any Tailwind utility)
5. Layout shifts (images/iframes without explicit dimensions)
6. Expensive CSS (backdrop-filter, box-shadow on many elements, large border-radius)
7. Font loading (is font-display: swap used?)
8. Animations (do they use transform/opacity for GPU acceleration?)

For each issue, suggest the exact fix.

[PASTE HTML]

Component Simplification

Simplify this HTML component. The goal is fewer DOM elements and cleaner Tailwind classes while keeping the exact same visual result.

Rules:
- Remove wrapper divs that only add one utility class (merge it up)
- Replace complex class chains with simpler equivalents
- Remove redundant classes (e.g., flex + items-center when only one child)
- Use semantic HTML tags instead of divs where appropriate
- Combine similar padding/margin values

Show before/after with a brief explanation of each change.
Count: elements before vs. after, classes before vs. after.

[PASTE HTML]

Cross-Browser Check

Review this CSS for cross-browser compatibility:

Check for:
1. CSS features that need @supports fallbacks
2. Properties that need vendor prefixes (backdrop-filter, etc.)
3. OKLCH colors — do they have hex/rgb fallbacks?
4. Container queries — is there a fallback layout?
5. Subgrid usage — does it degrade gracefully?
6. :has() selector usage — is there a fallback?

Target browsers: last 2 versions of Chrome, Firefox, Safari, Edge.
Flag issues with "Can I Use" baseline status.

[PASTE CSS]

Tool-Specific Usage

| Prompt Type | Best Tool | Why | |---|---|---| | Accessibility Audit | Claude Code | Can read your actual project files, not just pasted snippets | | Design Consistency | Claude Code / Cursor | Can scan multiple files for cross-component inconsistencies | | Performance Review | Codex | Good at suggesting concrete optimizations | | Simplification | Any | Works well in all AI tools, paste and get results | | Cross-Browser | Claude | Strong CSS spec knowledge for edge cases |

Checklist

[ ] Run accessibility audit before every deployment
[ ] Design consistency check after adding new components
[ ] Performance review for pages with many sections
[ ] Simplification pass for components that grew organically
[ ] Cross-browser check when using modern CSS features

reviewauditaccessibilitywcagdesignqualityclaudecodex