PromptVisual design
Design Completeness Checklist
Ensure designs are complete and ready for handoff with comprehensive state coverage.
Share
Actions
Tags
design-handoffdesign-qachecklistcompletenessengineering-handoff
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
Related Prompts
Visual design
UI Component Specification
Generate a detailed UI component specification with states, variants, and interaction patterns.
uicomponentsspecification
Visual design
Visual Hierarchy Design
Design effective visual hierarchy for layouts to guide user attention and improve readability.
visual-hierarchygraphic-designlayout
Visual design
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.
visual-designdesign-systemcomponents
Visual design
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.
visual-designdesign-systemcolor
New prompts & templates by email
Weekly copy-paste prompts, pattern notes, and AI UX resources on Substack - no spam, unsubscribe anytime.