Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Before & after
Same prompt, same agent — the only difference is the skill.
I'd be happy to review your UI mockup and give you feedback. To make my review most helpful, I should probably see the mockup first and understand what you're trying to accomplish with it. It would also be useful to know who the users are and what problems you're solving for them. Once I see the design, I can comment on things like visual hierarchy, usability, consistency with best practices, and whether the layout makes sense. I can also point out any potential issues with contrast, readability, or touch targets if it's a mobile design. Share the mockup and let me know if there are specific areas you want me to focus on, and I'll give you detailed feedback.
DESIGN FEEDBACK REPORT: DASHBOARD MOCKUP OVERALL ASSESSMENT Strengths: Clean grid layout, good color contrast, clear information hierarchy Weaknesses: Dense sidebar, call-to-action not prominent, mobile responsiveness unclear CRITICAL FEEDBACK (Fix before launch) 1. PRIMARY CTA PLACEMENT Issue: Export Report button bottom-right, hard to find Fix: Move to top-right OR floating action button (FAB) Priority: HIGH (primary user action) 2. FORM INPUT STYLING Issue: Input labels gray (67% contrast on white); fails WCAG AA Fix: Darken labels to #333333 (90% contrast) OR use bold weight Priority: HIGH (accessibility) 3. MOBILE VIEWPORT (320px) Issue: Sidebar fixed width (280px) = only 40px content area Fix: Collapse sidebar on mobile (hamburger toggle) Priority: HIGH (usability) SECONDARY FEEDBACK (Nice to have) 4. ICON CLARITY Suggestion: Settings icon too small (16px -> 20px minimum) Rationale: Touch target should be 44px minimum (iOS HIG) 5. TABLE SORT INDICATOR Suggestion: Add arrow icon (^ v) to active column header Rationale: Telegraphs sortability, improves discoverability 6. ERROR STATE VISUAL Suggestion: Input error -> red left border (not just red text) Rationale: Users with color blindness rely on shape/position DESIGN CONSISTENCY • Typography: Body text 14px (good); ensure heading hierarchy (18, 20, 24pt) • Spacing: 16px grid observed; apply consistently (aligned) • Colors: Primary blue #0071E3, secondary gray #6B7280 (sufficient contrast) ACTION PLAN Priority 1 (Fix this week): Accessibility issues + mobile collapse Priority 2 (Next iteration): Icon sizing, sort indicators, error states Delivery: Updated mockup in Figma + component specs ready for dev
About this skill
Your design "feels off" and you can't say why, or the feedback you get is a mix of taste opinions that are all treated as equally important. This skill critiques a design the way a senior designer does in a review. It names what the screen is for, checks where the eye lands first, and returns a short ranked list of fixes with real values you can apply right away.
What it does
- Names the screen's job and its main action first, then ties every finding to that job instead of to personal taste
- Runs a first-glance hierarchy read ("the eye goes here, then here") and compares it to the order you intended
- Computes WCAG contrast ratios from your hex codes and estimates them from screenshots, labeled as estimates, including text placed over photos
- Checks spacing, alignment, type size, line length, and tap target size against concrete limits, not "looks cramped"
- Tests the design with real content and states: long names, empty lists, errors, focus, and translated text
- Compares two design directions on the same criteria, picks a winner, and says what to borrow from the other one
What you get
A one-line verdict, then fixes grouped as Blocker, Should fix, and Polish. Each fix says where the problem is, why it hurts the goal, and the exact change to make, such as a size, a spacing value, an overlay opacity, or a replacement hex color.
Best for
Founders, marketers, and developers shipping landing pages or app screens without a design lead, and designers who want a structured second review before handoff or launch.
SKILL.md preview
---
name: design-critique-fix-list
description: Critiques a UI screen, landing page, layout, or graphic against its actual job, then returns a prioritized fix list (Blocker / Should fix / Polish) with concrete values - sizes, spacing, contrast ratios computed from hex codes, overlay opacities, and placement changes. Use when the user says "what's wrong with this design", "critique my landing page", "why does this layout feel off", "which of these two directions is better", "review my Figma before handoff", "my CTA isn't getting clicks and I think it's the design", "is this accessible", or "give me feedback on this mockup".
---
# Design Critique with Prioritized Fix List
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.
Evidence-Based Journey Map Builder
Map one persona's journey across every touchpoint with evidence-tagged cells, sized pain points, backstage handoffs, and ranked fixes.