AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Visual design

Design Completeness Checklist

Ensure designs are complete and ready for handoff with comprehensive state coverage.

Prompt

You are a design QA expert helping me verify that designs are complete before engineering handoff. I need to ensure nothing is missing that would cause development delays.

Design Context:
- Feature/flow being designed: [What you're designing]
- Design tool: [Figma, Sketch, etc.]
- Design system: [Your design system name, if any]
- Target platforms: [Web, iOS, Android, etc.]

Please create a completeness checklist:

1. Screen Coverage
   ? All screens in the flow documented
   ? Entry points identified
   ? Exit points (success, cancel, back) covered
   ? Navigation between screens clear
   ? User flow diagram included

2. Interactive States
   For each interactive element:
   ? Default state
   ? Hover state
   ? Active/pressed state
   ? Focus state (for accessibility)
   ? Disabled state
   ? Loading state
   ? Selected state (if applicable)

3. Input States
   For each form field:
   ? Empty/placeholder state
   ? Filled state
   ? Focused state
   ? Error state with message
   ? Success/validated state
   ? Disabled state
   ? Character limits shown

4. Content States
   ? Empty state (no data)
   ? Loading/skeleton state
   ? Partial data state
   ? Full data state
   ? Error state (failed to load)
   ? Pagination/infinite scroll (if applicable)

5. Error Handling
   ? Form validation errors
   ? API/server errors
   ? Network errors
   ? Timeout states
   ? Permission errors
   ? Error recovery paths

6. Edge Cases
   ? Maximum content length
   ? Minimum content
   ? Special characters
   ? Long usernames/text truncation
   ? Missing images/avatars
   ? Zero results
   ? Single item vs. multiple items

7. Responsive Design
   ? Desktop (1440px, 1280px)
   ? Tablet (768px)
   ? Mobile (375px, 320px)
   ? Breakpoint behavior documented
   ? Touch vs. click considerations

8. Accessibility
   ? Color contrast passing (4.5:1 for text)
   ? Focus order documented
   ? Touch targets minimum 44x44px
   ? Alt text for images specified
   ? Screen reader announcements noted

9. Motion & Animation
   ? Transitions specified (duration, easing)
   ? Loading animations
   ? Micro-interactions
   ? Reduced motion alternative

10. Copy & Content
    ? All UI copy finalized (not lorem ipsum)
    ? Error messages written
    ? Empty state messages
    ? Button labels
    ? Placeholder text
    ? Tooltip content
    ? Confirmation dialogs

11. Assets
    ? Icons exported (SVG)
    ? Images exported (appropriate formats)
    ? Assets named consistently
    ? @2x/@3x provided if needed

12. Documentation
    ? Component specifications
    ? Spacing and sizing annotated
    ? Design system tokens referenced
    ? Interaction notes
    ? Known limitations documented

How to use

  1. 01

    Replace placeholders with your feature and design context

  2. 02

    Go through each checklist item systematically

  3. 03

    Mark items as complete, not applicable, or needs work

  4. 04

    Address any gaps before scheduling handoff

  5. 05

    Use this as a template for your team's definition of done

  6. 06

    Review with engineering partner before final handoff

Tips

  • Not every item applies to every design - mark N/A appropriately
  • Use this early in the design process, not just at the end
  • Get engineering input on which states they need most
  • Prioritize error states and loading states - they're often forgotten
  • Customize this checklist for your team's specific needs
  • Review past handoffs to identify commonly missed items
  • Share with your team to standardize expectations