teamai-test/.teamai/skills/common/web-design-engineer/references/failure-patterns.md

Contextual Failure Patterns

Use this catalog to catch recurring AI-generated design failures. Read only the sections relevant to the artifact. These are strong defaults with explicit exceptions, not universal taste laws.

Contents

• Marketing and Multi-section Pages
• Layout and Components
• Typography and Content
• Imagery and Brand
• Motion and Interaction
• Dashboards and Product UI
• Final Use

Marketing and Multi-section Pages

Repeated section header formula

• Default: Do not put a tiny uppercase eyebrow above every heading.
• Why: It creates a mechanically templated rhythm.
• Detect: The same label + headline + paragraph stack appears in most sections.
• Exceptions: Manuals, intentionally indexed editorial systems, or an established brand pattern.
• Repair: Remove low-information labels; vary hierarchy using a lead sentence, image, number, quote, or direct headline.

Zigzag monotony

• Default: Avoid three or more consecutive left/right image-text splits.
• Why: Alternation alone is not composition.
• Detect: Mirroring is the only difference between adjacent sections.
• Repair: Introduce a full-width proof point, vertical narrative, comparison, gallery, diagram, or focused text break.

Default centered hero

• Default: Do not choose centered headline + gradient + two CTAs without brief support.
• Why: It is a statistical default, not a design decision.
• Exceptions: Manifestos, launch statements, search-first utilities, and deliberately ceremonial pages.
• Repair: Re-evaluate content hierarchy, asset role, audience, and viewport; choose the composition that makes those constraints clearest.

Decorative trust theater

• Default: No fabricated metrics, testimonials, logos, security badges, or “used by” claims.
• Why: False credibility is worse than an honest gap.
• Repair: Use a labeled placeholder or request real proof.

CTA duplication

• Default: Keep labels for the same intent consistent.
• Detect: “Get started,” “Try free,” and “Create account” all route to the same action without a meaningful distinction.
• Exceptions: Tested funnel copy or different commitment levels.
• Repair: Normalize the label or clarify the distinct outcomes.

Layout and Components

Cardification

• Default: Use containers only when grouping, selection, or elevation carries meaning.
• Detect: Every paragraph, metric, and icon lives in a rounded card.
• Repair: Use whitespace, alignment, dividers, typography, or one shared surface.

Bento without rhythm

• Default: Every cell needs content and a compositional role.
• Detect: Blank filler cells, uniform text-only tiles, or arbitrary spans.
• Repair: Match cell count to content; create hierarchy through size, media, data, or interaction rather than empty geometry.

Shape drift

• Default: Define a radius grammar and follow it.
• Detect: Pills, sharp cards, soft cards, and circular controls appear without semantic rules.
• Repair: Assign radius by component role and consolidate tokens.

Split-header filler

• Default: Avoid a large left headline paired with a small floating right paragraph when the split communicates nothing.
• Repair: Stack the content or give the second column a real visual, action, or evidence role.

Typography and Content

Generic display typography

• Default: Do not reach automatically for Inter, Roboto, Arial, system-ui, Fraunces, or Instrument Serif as the identity-bearing display choice.
• Exceptions: Existing brand/system requirements, accessibility contexts, or intentional platform neutrality.
• Repair: Use the chosen recipe, supplied brand font, or a justified pairing.

Micro-label noise

• Detect: Decorative version numbers, fake coordinates, weather, status dots, section numbers, or metadata that does not help the user.
• Repair: Delete it or connect it to real state/content.

Copy-shaped decoration

• Detect: Vague claims, fake precision, agency slogans, or captions written only to fill space.
• Repair: Replace with user-provided truth, a clear placeholder, or fewer words.

Unreadable hero

• Detect: CTA falls below the intended initial viewport, display text clips, or copy/image competition destroys hierarchy.
• Repair: Recompose; do not enforce a universal word or line cap when the artifact needs a different reading experience.

Imagery and Brand

CSS as counterfeit asset

• Default: Do not replace a recognizable product, logo, or interface with decorative CSS shapes.
• Repair: Source official material, generate a clearly non-identity-critical extension, or expose an honest asset slot.

Image-label clutter

• Default: Do not overlay pills and captions on imagery unless they identify, control, or explain it.
• Repair: Move necessary metadata into a stable caption or remove it.

Generated-world drift

• Detect: Multi-image output changes palette, material, lighting, typography character, device treatment, or brand symbols.
• Repair: Reuse a visual bible and regenerate the divergent frame rather than patching it with unrelated decoration.

Motion and Interaction

Motion for spectacle only

• Default: Every animation needs a hierarchy, feedback, causality, or narrative purpose.
• Detect: Removing the animation changes no understanding or feedback.
• Repair: Remove it, lower the Motion dial, or tie it to meaningful state.

Scroll-state rendering

• Default: Do not update broad React state on every scroll or pointer frame.
• Repair: Use CSS, motion values, IntersectionObserver, or an animation library appropriate to the stack.

Repeated spectacle

• Default: Avoid multiple marquees, pinned chapters, magnetic controls, or competing ambient loops on one surface.
• Repair: Select one signature moment and make other transitions quieter.

Missing reduced-motion path

• Default: Motion beyond simple state feedback must collapse cleanly under reduced motion.
• Repair: Preserve content order and interaction completion without relying on animation.

Dashboards and Product UI

Marketing styling on operational UI

• Detect: Giant headlines, excessive whitespace, cinematic cards, and low-density gestures impede scanning.
• Repair: Raise density, stabilize the grid, clarify state, and prioritize task completion.

Decorative data visualization

• Detect: Gradients, 3D, shadows, or animation obscure comparison and scale.
• Repair: Improve data-ink ratio, labels, semantic color, and accessible alternatives.

Happy-path-only components

• Detect: Only populated success states exist.
• Repair: Add relevant loading, empty, error, permission, disabled, and overflow states.

Final Use

Report only consequential failures. Do not dump the whole catalog into the user-facing response. Fix safe in-scope problems directly; surface exceptions and tradeoffs when they affect intent.