Search

Use truthful content, inspectable media, stable data displays, and complete empty or error states.

Dark overlays, blur, aggressive crops, or stock-like media obscure the product, place, object, person, or state users need to inspect.

Primary imagery reveals the actual subject users need to inspect and includes correct crop, dimensions, loading, and alternative text.

Expressive first viewports that establish the literal offer or subject and reveal evidence of the next section.

Every section, metric, control group, and nested region receives its own rounded container and shadow.

Content touches a visible border, peer items stick together, or responsive wrapping removes the separation needed to read grouping and hierarchy.

Selection, status, error, or chart meaning depends only on a hue change with no text, icon, shape, or position cue.

Inspectable product media paired with an early merchandising spine, essential configuration, trust, fulfillment, and purchase information.

A product-selling page spends its early screens on atmosphere and brand narrative while hiding concrete products, prices, options, and buying actions.

Choose macrostructure, hierarchy, structural fingerprints, and responsive reading order before components.

Viewport-wide backgrounds and media extend independently while text, controls, and repeated panels remain aligned to the shared content grid.

Text, meaningful graphics, controls, focus, and states meet relevant contrast thresholds and do not depend on color alone.

Make one focused visual pass after implementation for optical alignment, spacing, crop, type fit, states, and responsive composition.

Decision-oriented views that preserve comparison, units, filters, freshness, provenance, and drill-down context.

Typography, spacing, color, icons, shape, surfaces, and interaction states follow one deliberate foundation.

Desktop columns, labels, toolbars, and interaction models are merely reduced in size for mobile.

Generate three materially different visual routes, then choose the product-derived direction with the strongest audience, content, asset, and responsive fit.

Authored reading rhythm, distinctive composition, and high-quality media for stories, essays, work, and case studies.

Invented testimonials, customer logos, avatars, metrics, integrations, awards, or claims are presented as real.

A hero-led entry fits its header, identity, subject crop, orientation, proof, and primary action within one declared short-viewport budget.

Establish proportional tokens for color, typography, spacing, shape, elevation, and icons.

Choose an authored entry strategy, strong visual carrier, memorable type move, navigation posture, and visible motion signature before detailed component styling.

Resolve the product thesis, audience feeling, content spine, assets, and constraints before generating visual directions.

A centered headline, two calls to action, and three equal feature cards used regardless of product or content needs.

Purple-blue gradients, blurred accents, glass, or glow are added by habit without brand, material, or state meaning.

An external header is stacked above a hero that independently consumes a full viewport height, pushing the hero bottom below the visible screen.

Constrain display type, vertical budget, subcopy, action position, and mobile proof so expressive heroes remain readable and useful.

People, data, customer evidence, metrics, integrations, awards, and product claims are source-backed or clearly labeled as samples.

Unrelated briefs repeatedly converge on the same macrostructure and motif bundle, such as dark canvas, fluorescent accent, mono section labels, hard grids, terminal chrome, and giant condensed type.

When a page needs a memorable visual subject, create or select one focused asset and design around its composition.

Design complete state feedback, interruptible transitions, gestures, and reduced-motion behavior.

Choose the page or screen structure and reading order before selecting component recipes or detailed styling.

Unrelated component libraries, icon families, token scales, or interaction conventions are combined in one surface.

Platform-aware navigation, reachable actions, safe-area handling, keyboard resilience, and explicit gesture alternatives.

Change grouping, order, disclosure, and control layout for narrow screens instead of proportionally shrinking desktop UI.

Use platform components, navigation, safe-area behavior, dynamic type, accessibility APIs, and native feedback conventions.

Use Server Components by default, narrow client boundaries, framework routing and metadata, and explicit static-generation contracts.

An otherwise immersive hero stops just short of the viewport edge and exposes a thin, empty strip of the page background.

Hero-scale headings and generous marketing spacing are placed inside dense dashboards, panels, tables, or sidebars.

Every long-page section resets into another hero with giant display type, excessive lead-in space, outline words, numbered labels, or a full visual spectacle.

Prefer semantic document structure, progressive enhancement, modern layout primitives, and minimal JavaScript for stateful behavior.

The requested core path works from its initial state through a truthful completion, recovery, or explicitly bounded endpoint.

Adapt interface patterns and implementation choices to the product surface and existing frontend stack.

Tie every UI/UX quality claim to design reasoning, static inspection, existing project checks, or rendered review when practical.

Verify UI/UX quality, accessibility, responsive behavior, and correctness with proportionate evidence.

Model state explicitly, preserve semantic elements, keep component ownership local, and avoid unsafe HTML or unnecessary effects.

Headings, body copy, metadata, and actions retain intentional line lengths without brittle hard breaks or accidental one-word columns.

Implement the primary task or experience as the first screen instead of surrounding an incomplete feature with marketing content.

Real failure paths explain what happened, preserve useful input, and provide a clear retry, correction, undo, or escape route.

Reduced-motion preference removes nonessential travel and autoplay while preserving state feedback and every user outcome.

Studied references inform principles and craft without reproducing one source's recognizable shell, navigation, typography, and accent composition.

Treat WCAG-oriented semantics, keyboard access, contrast, reflow, and input modes as delivery requirements.

Supported widths and text zoom preserve content, controls, reading order, and recovery without clipping or incoherent overlap.

Resolve requirements, conflicts, and uncertain design directions before selecting aesthetics.

Quiet, repeatable workspaces for frequent tasks, scanning, comparison, triage, and stateful business workflows.

Keep third-party content untrusted, execution approval-gated, and externally derived guidance attributable.

Native semantics, programmatic names, logical focus order, and keyboard operation cover the complete core workflow.

Define color, text, icon, and behavior for default, focus, disabled, loading, error, success, and empty states.

Declare page gutters, section gaps, panel insets, stack gaps, and control gaps as separate relationships before component styling.

Media, loading, validation, long labels, and async results reserve space and do not unexpectedly move controls or content.

Reserve dimensions for controls, rows, media, and async regions so labels and state changes do not shift the layout.

Use two stable system constants and one flexible signature so the interface feels authored without coating every region in the same motifs.

Use a shared token vocabulary, stable responsive rules, and extracted components only where repetition creates real ownership.

Adapt inputs, outputs, and verification to greenfield, implementation, redesign, audit, and component work.

Use a proven 3D engine, stable full-bleed canvas geometry, explicit loading and fallback states, and measured input performance.

The primary product or object appears at icon scale inside a large empty panel, often with multiple nested frames and surrounding labels doing more visual work than the subject.

Every element fades upward, scales on hover, or receives `transition: all` regardless of interaction purpose.

The final report names executed checks, inspected viewports and states, material fixes, and any remaining limitations.

Every keyboard-focusable element has a visible high-contrast indicator that sticky or modal UI does not hide.

Public copy explains the prompt, landing page, hero, layout, feature grid, generated output, or why the interface was composed a certain way.

Explore and select a product-derived aesthetic direction before implementation without converging on a house style.

Allocate one display apex, one signature subject or object, one motion motif, one texture or field, and one accent logic across the page.