Escape AI Slop — A Layout Reasoning Guide

This is a reasoning guide, not a generator. It doesn't write layout code by itself — it reshapes how your agent thinks about layout before it writes any code, wherever that code gets written. Use it standalone to critique an existing layout in plain text, or layer it onto your own mockup/LP-building workflow so every generation benefits.

Left unchecked, a text-based agent defaults to whatever layout is statistically "safest": a centered hero, a symmetric 2-column split, a cream/sand/terracotta background — the pattern now widely recognized as "AI slop." This skill exists to break that reflex by reinterpreting real eye-tracking physiology and cognitive biases as concrete structural constraints.

What it does

• Applies four eye-tracking topology models (Z-pattern, F-pattern, I-pattern, bottom-up) as DOM-level structural constraints, not just visual styling

• Forbids each model's own "reflex rendering" (e.g. Z-pattern always becoming alternating image-left/right rows) and requires picking from genuinely different alternatives

• Varies density, image treatment, typographic voice and conversion path as independent axes — together with the model and rendering, each pattern gets a five-point declaration, so multiple layout options never converge on "the same design with different colors"

• Counters three specific cognitive biases — banner blindness, tunnel vision, the gestalt/proximity trap — with named countermeasures at concrete spots in the layout

• Breaks the "safe nuance palette" reflex: white is the default background unless the brief gives a real reason otherwise, and color combinations are chosen deliberately from color theory (complementary, analogous, triadic, split-complementary, monochromatic, achromatic + accent)

• When multiple options are requested, sketches one extra candidate internally and prunes the weakest before any code is written — a selection, not just the first ideas that came to mind

• Adds a short plain-language aim statement to every delivered pattern: what the eye-path does, how dense it is, and where the conversion path leads

• Lets reading sections (pricing, FAQ, spec lists) borrow one declared guest micro-pattern from another model — at most two per page, never the hero, each with a functional reason

• Optionally keeps a pattern log, so regenerating the same brief later doesn't repeat combinations you've already seen

Two ways to use it

• Standalone: paste or describe an existing layout and ask for a critique, or for plain-text alternative directions with ASCII sketches — no code until you pick one. Nothing else needs to be installed.

• Layered onto your own workflow: if you already generate mockups or landing pages some other way, this skill's reasoning kicks in automatically on a layout request and shapes whatever gets built.

Also covers

Retrofitting a single section of an already-working page (spend the structural accent only where it matters, leave proven conventional patterns alone elsewhere), and mobile-primary briefs (Z/F-pattern's left-right alternation has nowhere to go on a narrow viewport, so the model pool correctly narrows instead of forcing a desktop pattern into a single column).

Requirements

A Claude Code agent. No dependencies, no Figma, no MCP server, no network or terminal calls. The only file access is the optional pattern log: if a pattern-log.md exists in your project root it is read at the start of a multi-pattern run, and after the delivery the skill asks once whether to record the run's combinations. It writes the file only if you say yes, and never when invoked non-interactively (for example from a pipeline). Any other file writes happen wherever the layout is actually built.