No Design Slops

Core Judgment

• it could be pasted into an unrelated product unchanged
• it repeats a familiar generated-design pattern
• it conflicts with the local design system or nearby sections
• it communicates no useful information, state, action, hierarchy, or brand meaning
• it competes with content, weakens trust, or makes the interface harder to use

Apply Passively

1. Read the local instructions, tokens,

   DESIGN.md

   , screenshots, references, and existing components before choosing a direction.
2. Identify the product, audience, primary task, primary action, content hierarchy, and one visual thesis for the surface.
3. Preserve established decisions unless the user asks for a redesign.
4. During implementation, run the compact gates below whenever adding a section, component, effect, or state.
5. Render the result at relevant viewports and inspect the actual interface, not only the source.
6. Remove or correct the highest-impact problem created or exposed by the work.

audit-ai-design-slop

Design Principles

Start from context

• Prompt and design from evidence: product content, real constraints, references, and the local system.
• Use references to extract hierarchy, pacing, contrast, material, and interaction principles. Do not copy identity, layout, assets, or copy.
• When no system exists, define a compact one before polishing: type roles, spacing rhythm, palette, radii, borders, shadows, imagery, icons, and motion.

Choose one coherent idea

• Give each viewport one focal point and each flow one clear primary action.
• Let typography, media, color, material, and motion support the same visual thesis.
• Prefer one strong authored moment over many unrelated effects.
• Use contrast and asymmetry deliberately; do not neutralize character in the name of cleanliness.

Make relationships visible

• Use proximity before containers. Related items sit closer than unrelated items.
• Use hierarchy before labels. Size, weight, placement, and contrast should do more work than pills, eyebrows, numbers, and captions.
• Use depth only when the interface has a real layering model.
• Let repeated components express a real repeated content type, not a convenient template.

Make the product specific

• Choose sections from the product's story, buying journey, and usage flow instead of a default landing-page sequence.
• Show real product behavior, useful screenshots, or honest placeholders. Do not manufacture proof.
• Art-direct imagery and iconography to the subject. Generic stock, abstract SVG filler, and default icon tiles are not substitutes for product meaning.
• Adapt imported patterns to the current typography, palette, shape language, and density.

Make motion explain something

• Motion may explain state, causality, hierarchy, continuity, or spatial change.
• Do not animate merely to prove that the page is interactive.
• Keep reading and controls stable. Support reduced motion and complete static states.

Compact Quality Gates

• System: Does it use the established type, color, spacing, radius, icon, and motion language?
• Hierarchy: Is the most important content or action obvious without decorative labels?
• Composition: Are alignment, balance, proximity, overlap, and negative space intentional at every relevant viewport?
• Typography: Are roles distinct, readable, and optically spaced without oversized tracking or forced display treatments?
• Color and material: Does each gradient, glow, glass layer, border, shadow, and accent have a clear role?
• Product truth: Are imagery, copy, metrics, screenshots, logos, and states specific and honest?
• Interaction: Are active, hover, focus, loading, empty, error, disabled, selected, and success states present when needed?
• Motion and access: Does motion help, remain performant, preserve input, and respect reduced-motion preferences?

Removal Test

1. Name it precisely: selected state, eyebrow, radial light, nested card, icon tile, marquee, fake proof, clipped popover, or another concrete pattern.
2. State what job it performs.
3. Remove it mentally. If meaning, state, action, hierarchy, or brand character survives and clarity improves, delete it.
4. If deletion creates a real loss, make the smallest correction using the existing system.
5. Add a replacement only when the interface needs one. Do not compensate with a new effect.

Boundaries

• Do not treat a technique as slop in isolation.
• Do not replace a distinctive choice with a fashionable neutral template.
• Do not prescribe a new font, palette, layout, component library, or art direction unless the task authorizes it.
• Do not turn every content block into a card or every improvement into decoration.
• Do not add new sections, effects, colors, fonts, assets, or dependencies during a cleanup unless they solve a demonstrated loss.
• Do not remove useful density, edge, humor, asymmetry, or expressive motion merely because it is unusual.
• Do not invent customers, metrics, testimonials, awards, ratings, product screens, or activity.

Verification

• compare the rendered result with the local system and supplied references
• inspect the primary flow, relevant states, and responsive breakpoints
• confirm that text does not clip, overlap, overflow, or lose contrast
• confirm that controls remain labeled, reachable, stable, and responsive
• confirm that every remaining decorative layer has a defensible role
• confirm that the result is more specific to this product, not merely more fashionable