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.

This skill vs neighbors

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)