Visual Polish Qa

Visual Polish QA

Principle

Do not stop when the code compiles. Inspect the rendered result, identify visible weaknesses, improve it, then run checks again.

Required Loop

• Start or locate the dev server when the project needs one.
• Open the site in a browser or capture screenshots when tooling is available.
• Check desktop and mobile widths.
• Inspect hero, navigation, major sections, interactive states, forms, media, and footer.
• Fix obvious visual defects and weak polish.
• Re-run build/lint/test commands available in the repo.
• Report what was checked and what could not be checked.

What To Look For

• Text overflow, awkward line breaks, cramped labels, clipped buttons.
• Elements overlapping or drifting outside their intended layout.
• Hero media that is too dark, blurry, cropped, generic, or disconnected from the subject.
• Repetitive card grids and generic spacing.
• Typography that lacks hierarchy or scale discipline.
• Weak button states, missing focus styles, inert hover states.
• Motion that is too fast, too busy, inaccessible, or unrelated to hierarchy.
• Mobile layouts that simply stack without composition.
• Desktop layouts that stretch content too wide.
• Forms that look unstyled or have poor error/empty/loading states.

Fix Biases

• Prefer fewer, stronger visual moves.
• Tighten spacing before adding decoration.
• Improve copy specificity before adding sections.
• Use real media, generated bitmap imagery, or purposeful 3D when visuals matter.
• Make controls clear with icons and labels where appropriate.
• Preserve accessibility while polishing motion and visual style.

Verification

Use Playwright, browser tools, screenshots, or the in-app browser when available. For canvas/WebGL/Three.js work, verify that the canvas is nonblank, framed correctly, and active across desktop and mobile.

Read references/polish-checklist.md for the detailed pass.