aboudjem /design-checklist: Pre-Launch Design Checklist
Interactive checklist covering all design quality aspects before launch.
Checklist Categories
Visual Consistency
- Color system defined with CSS variables or tokens
- Typography scale with clear hierarchy
- Consistent spacing scale (4px or 8px base)
- Consistent border-radius
- Consistent shadow system
- Icon style consistent (all outline or all filled)
- Consistent capitalization (sentence case for UI)
State Coverage
- Button states: hover, active, focus, disabled, loading
- Input states: focus, error, disabled, filled
- Empty states for all data views
- Loading states (skeletons or spinners)
- Error states with recovery actions
- Skeleton screens for initial load
Responsive
- Works on mobile (375px)
- Works on tablet (768px)
- Works on desktop (1440px)
- No horizontal scroll on any breakpoint
- Touch targets 44x44 on mobile
- Text readable without zoom on mobile
Accessibility
- Contrast ratios pass WCAG AA (4.5:1 text, 3:1 large/non-text)
- Focus indicators visible on all interactive elements
- Keyboard navigable (all actions reachable via Tab)
- Skip-to-content link
- Alt text on images
- Form labels associated with inputs
- prefers-reduced-motion supported
- Heading hierarchy correct (h1 > h2 > h3)
Dark Mode (if applicable)
- Proper surface hierarchy (not just inverted)
- Reduced saturation on vivid colors
- Text contrast maintained
- Images/illustrations adapt to dark
Performance
- Images lazy loaded
- Fonts preloaded with font-display: swap
- Above-fold content loads first
- No layout shift during load
Polish
- Favicon works at all sizes
- og:image / social sharing meta
- Custom error pages (404, 500)
- Smooth transitions on interactive elements
- Custom selection color
- Branded focus ring
- Print styles (if content is printable)
For each unchecked item, the agent provides specific fix guidance.