Visual Quality Guide¶
When To Use This Guide¶
Use this guide for frontend, landing page, app UI, docs UX, or other user-facing work where "looks fine" is not a high enough bar.
Goal¶
Produce interfaces that feel intentional and product-specific rather than generic, vibe-coded, or obviously AI-generated.
Core Method¶
- define the product's point of view
- choose a visual direction that fits the product instead of defaulting to generic SaaS aesthetics
- constrain layout, spacing, type, and components before broad generation
- review real screenshots or browser output
- refine until the page has clear hierarchy, clean motion, and believable copy
Strong Defaults¶
- use references or an existing design system when available
- choose fewer patterns and execute them well
- let typography and spacing do most of the work
- make motion purposeful, not ornamental
- write copy that helps the user, not copy that flatters the product
Common Failure Modes¶
- one-shot generation of an entire page with no visual constraints
- generic gradients and feature cards standing in for real hierarchy
- overpacked pages that try to say everything at once
- copy that sounds like a model smoothing over uncertainty
- treating every specialized design tool as something ORCA Framework must replace