Design Completeness Checklist
Ensure designs are complete and ready for handoff with comprehensive state coverage.
Use Case
Self-review before handoff, design QA, ensuring nothing is missed, or creating team standards for design completeness.
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
Tags
Related Prompts
UI Component Specification
Generate a detailed UI component specification with states, variants, and interaction patterns.
Visual Hierarchy Design
Design effective visual hierarchy for layouts to guide user attention and improve readability.
Design System Component Visual Spec Writer
Developer-friendly visual specs: anatomy, tokenized properties per variant/state, spacing, responsive behavior, and accessibility for one component cluster.
Color Palette & Typography System Builder
Production-oriented foundations: primitive scales, semantic tokens, contrast tables, dark mode mapping, modular type scale, and token naming for tools like Style Dictionary.