Delightful Frontend Verification Checklist
Run this after the first implementation pass. Use browser automation or screenshots when possible.
First viewport
- Does it read as one composition instead of a dashboard?
- Is the brand or product unmistakable even with the nav mentally removed?
- Is there one dominant visual anchor?
- Is the CTA easy to find in under 2 seconds?
- Did extra chips, stats, badges, or promos sneak into the hero?
Image and text relationship
- Is there a calm tonal area behind text?
- Does the image carry narrative value instead of acting as decoration?
- Would the page still feel coherent if the image changed crop slightly?
- Does any overlay block important details or create clutter?
Layout discipline
- Does each section have one clear job?
- Are there unnecessary cards, borders, shadows, or glass layers?
- Did any section become a pile of pills, icons, or micro-panels?
- Can the page be understood by scanning headings only?
Copy quality
- Is the copy specific to the product/context?
- Did placeholder-sounding claims survive?
- Can 20-30% of the copy be deleted without losing meaning?
Motion
- Are there at least 2-3 intentional motions when the design is visually led?
- Does motion improve hierarchy, reveal, or affordance?
- Is motion smooth on mobile?
- Does any animation feel ornamental only?
Responsive safety
- Desktop loads cleanly.
- Mobile loads cleanly.
- Fixed or sticky elements do not cover key content.
- Tap targets remain comfortable.
- Text remains legible at narrow widths.
- Overflow, clipping, and layout jumps are resolved.
Premium test
Remove the decorative shadows mentally. If the design collapses into something ordinary, improve composition, typography, spacing, or imagery instead of adding more effects.
Fast iteration loop
- Capture desktop and mobile screenshots.
- Note the 3 biggest issues only.
- Fix hierarchy first, then spacing, then chrome, then micro-copy.
- Re-check the hero before touching lower sections.
- Stop when the page feels deliberate, not merely busy.