---

name: enhance-web-landing description: > Build landing pages, portfolios, and marketing sites that don't look AI-generated. Use for "landing page", "portfolio", "marketing site", "anti-slop", "Awwwards-style", "premium frontend", or a design that needs a point of view. license: MIT

Surface router: /uiux. You are here: enhance-web-landing. Native iOS/Android (SwiftUI / Compose, no web layer) is out of scope — use Apple HIG / Material directly.

enhance-web-landing — Anti-Slop Landing Pages

Degree of freedom: MIXED. Design-read and dials [HIGH freedom]; dependency check, contrast, and preflight hard rules [LOW freedom — run exactly].

Landing pages, portfolios, and redesigns. Not dashboards, not data tables, not multi-step product UI. Every rule below is contextual. None of it fires automatically. First read the brief, then pull only what fits.

How to reason

1. Read — page kind, vibe words, audience, existing brand, quiet constraints
2. Dial — VARIANCE / MOTION / DENSITY from the read (not the LLM default)
3. System — official package if the brief is a system; one system per project
4. Preflight — hero-in-viewport, contrast, no slop defaults, real images

Worked example

Read: B2B SaaS landing for technical buyers; user said "Linear-style"; no brand serif. Dial: 5 / 3 / 3 — clean, low motion, airy. System: Tailwind v4 + Geist; not Inter + purple mesh; shadcn only if already owned. Preflight: split hero (not centered), one accent, real product shot, CTA unwrapped.

Self-critique before reporting

• Design read stated — one line before code; no silent default aesthetic
• Anti-default — no Inter + purple gradient + three equal cards unless the read asks
• Hard rules — hero fits first viewport; button contrast AA; one CTA intent
• Right owner — dashboards/product UI → enhance-web-ui; existing-app polish → enhance-web-redesign

---

0. BRIEF INFERENCE (Read the Room Before Anything Else) [HIGH freedom]

Before touching code or tweaking dials, infer what the user actually wants: page kind, vibe words, reference signals, audience, brand assets that already exist, quiet constraints (accessibility-first, public-sector, regulated, kids). Constraints override aesthetic preference. Before any code, state in one line: "Reading this as: <page kind> for <audience>, with a <vibe> language, leaning toward <design system or aesthetic family>." If the design read genuinely diverges, ask exactly one clarifying question; if you can infer from context, do not ask. Anti-Default Discipline: do not default to AI-purple gradients, centered hero over dark mesh, three equal feature cards, generic glassmorphism, infinite micro-animations, Inter / Roboto + slate-900, a cream page background, an italic accent word in every headline, "01 / 02 / 03" labels, mono eyebrows, pill buttons on every control. After a first pass, add whatever default the result reached for to this list. Signal list, example reads, and the full anti-default list: references/brief-dials-stack.md §0.

1. THE THREE DIALS (Core Configuration) [HIGH freedom]

After the design read, set DESIGN_VARIANCE (1 symmetry → 10 chaos), MOTION_INTENSITY (1 static → 10 cinematic), VISUAL_DENSITY (1 airy → 10 cockpit). Baseline 8 / 6 / 4 unless the read overrides; overrides happen conversationally, never by editing this file. Use these exact variable names throughout; never invent aliases like LAYOUT_VARIANCE or ANIM_LEVEL. Dial-inference table (signal → values) and use-case presets: references/brief-dials-stack.md §1.

2. BRIEF → DESIGN SYSTEM MAP [HIGH freedom]

If the brief reads as a real system (Fluent, Material 3, Carbon, Polaris, Atlaskit, Primer, GOV.UK, USWDS, Bootstrap 5.3, Radix Themes, shadcn/ui, Tailwind v4), install and use the official package. Do not recreate its CSS by hand or import its tokens and override 90% of them. One system per project. No Fluent + Carbon in one tree, no shadcn inside a Material 3 app. If the brief is an aesthetic (glassmorphism, bento, brutalism, editorial, dark tech, aurora, kinetic type, Apple Liquid Glass) there is no official package: native CSS + Tailwind + a maintained component library, and label approximations honestly. There is no official liquid-glass.css. Both mapping tables: references/brief-dials-stack.md §2.

3. DEFAULT ARCHITECTURE & CONVENTIONS [HIGH freedom]

Unless Section 2.A picked a system: React / Next.js with Server Components, Tailwind v4 (@tailwindcss/postcss, not the tailwindcss PostCSS plugin), Motion imported from motion/react, next/font or self-hosted @font-face + font-display: swap. Motion, scroll, and pointer code lives in isolated 'use client' leaves. Never track continuous input values (mouse, scroll, magnetic hover) in useState; use useMotionValue / useTransform / useScroll. Icons: @phosphor-icons/react → hugeicons-react → @radix-ui/react-icons → @tabler/icons-react; lucide-react only when asked or already a dependency; one family per project; never hand-roll SVG icons. Emoji discouraged unless the user asks for a playful vibe. Layout: breakpoints sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536; contain with max-w-[1400px] mx-auto or max-w-7xl; min-h-[100dvh] heroes, never h-screen; CSS Grid over flex percentage math. 3.F Dependency verification [LOW freedom — run exactly]: check package.json before importing any 3rd-party library; if missing, output the install command first. Never assume a library exists. Full stack, state, icon, emoji, and layout rules: references/brief-dials-stack.md §3.

4. DESIGN ENGINEERING DIRECTIVES (Bias Correction) [HIGH freedom]

Override LLM clichés proactively; every rule has a context-aware override path. Covered: typography (sans display by default; serif only when the brand names one or the aesthetic is genuinely editorial / luxury / heritage; Fraunces and Instrument_Serif banned as defaults; italic descender clearance), color (max 1 accent, saturation < 80%, the lila rule, premium-consumer beige + brass + espresso ban, color consistency lock), layout (no centered hero when DESIGN_VARIANCE > 4), materiality and shape consistency lock, interactive states, forms (label above, never placeholder-as-label), image strategy (image-gen tool → real photos → labelled placeholder slots; div-based fake screenshots banned; real SVG logos), content density (headline ≤ 8 words, sub ≤ 25 words; no data-dump sections; copy self-audit; fake-precise numbers flagged), quotes (max 3 lines, no em-dashes), page theme lock. 4.7 Layout Discipline [LOW freedom — run exactly]: hero fits the initial viewport (headline ≤ 2 lines, subtext ≤ 20 words, max 4 text elements, top padding ≤ pt-24); logo wall under the hero, never inside; single-line nav ≤ 80px; bento rhythm and exact cell count; each layout family at most once per page, ≥ 4 families per 8 sections; max 2 consecutive image+text zigzags; max 1 eyebrow per 3 sections (mechanical check: uppercase tracking count > ceil(sections / 3) fails); split-header banned as default; bento needs 2–3 visually varied cells; explicit < 768px collapse per section. Pre-Flight Fails: button or form contrast below WCAG AA, CTA label wrapping at desktop, two CTAs with the same intent. Full directives 4.1–4.11 verbatim: references/design-directives.md.

5. CONTEXT-AWARE PROACTIVITY [HIGH freedom]

Tools, not defaults. None fire automatically. Liquid Glass only for premium consumer / Apple-adjacent / luxury, with inner border, inner shadow, and a prefers-reduced-transparency fallback. Magnetic micro-physics and perpetual micro-interactions only when MOTION_INTENSITY > 5 and the section benefits; spring physics (type: "spring", stiffness: 100, damping: 20), no linear easing. Motion claimed, motion shown: if MOTION_INTENSITY > 4 the page must actually move (hero entry, scroll-reveal, CTA hover physics); if you cannot ship working motion, drop the dial to 3 and ship static. Every animation needs a one-sentence reason. Marquee: max one per page. Sticky-stack and horizontal-pan must be real pins: start: "top top", pin the wrapper, scrub the inner track. Full bullet list and canonical GSAP skeletons (5.A Sticky-Stack, 5.B Horizontal-Pan, 5.C Scroll-Reveal Stagger, 5.D forbidden patterns): references/details.md §5.

6–14. GUARDRAILS, TELLS, REDESIGN, PRE-FLIGHT

Performance & accessibility guardrails, dial definitions, dark mode protocol, AI tells (incl. §9.F production-test tells and §9.G em-dashes), reference vocabulary, redesign protocol, block library contract, out of scope, and the final pre-flight checklist: references/details.md §6–14. Appendices A–C hold install commands, canonical sources, and the Liquid Glass approximation.

Further reading

• Brief read, dials, system map, stack conventions (Sections 0–3)
• Design engineering directives (Section 4)
• Motion skeletons, guardrails, AI tells, redesign protocol, pre-flight, appendices (Sections 5–14)