Design Completeness Checklist
Ensure designs are complete and ready for handoff with comprehensive state coverage.
Actions
Open in
One click opens your agent with this prompt ready to send.
Tags
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 documentedHow to use
- 1Replace placeholders with your feature and design context
- 2Go through each checklist item systematically
- 3Mark items as complete, not applicable, or needs work
- 4Address any gaps before scheduling handoff
- 5Use this as a template for your team's definition of done
- 6Review with engineering partner before final handoff
Pro 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