How to Avoid AI Slop in Vibe-Coded Landing Pages

Summary

The video explains how to prevent “AI slop” when generating Vibe/Codex-style landing pages (especially in dark mode) by using better prompting, a reusable design system, and a reference-driven workflow.

---

1) Signs of “AI slop” in generated UI

The tutorial calls out common visual/layout failures in AI-generated pages:

• Uneven spacing
  • Example: a selected menu state that only has a border, looking lazy and misaligned.
• Eyebrow/header typography issues
  • Example: caps + excessive letter spacing that crowds the layout.
• Unnecessary UI elements
  • Example: random “status” text added without a clear purpose, with inconsistent spacing.
• Overuse of “random lights” / SASS-ish decorations
  • Too many glow/lighting effects.
  • Colors don’t harmonize (e.g., gray not matching a purple theme).
• Generic “2025 purple gradient” templating
  • Pages start to look interchangeable.

---

2) Model weaknesses/strengths (and why prompting still matters)

Different models have different “design awareness” characteristics:

• GPT-5.5
  • Often has a recognizable style, but may become over-light and high info density.
  • Can spam lights/glows.
• Gemini 3.1 Pro
  • Slightly better attention to element sizing.
  • Fewer lights and improved hover state details—still not perfect.

Takeaway: don’t rely on a single model with generic prompts.

---

3) Core workflow to avoid AI slop (references + design system + agent rules)

The main approach is to ground generation in references and enforce constraints:

• Start with image references or URL references
  • Avoid prompts like: “Create a beautiful landing page…” (too open-ended).
• Use design system grounding
  • Create or obtain a design.md file containing:
    • typography rules
    • colors
    • spacing
    • component behaviors
  • If using an agent/workflow, put small prompt constraints in agents.md
    • e.g., browser choice, style rules, “no lights” rules
• Maintain an “AI memory” mindset
  • Memorize recurring failure types by name (e.g., “menu?”, “lights?”)
  • Prompt the model to remove/avoid those issues.

---

4) Demo-based fixes: import reference → constrain mistakes → generate missing parts

The tutorial demonstrates an iterative generation loop using:

• Image reference
  • Drag/drop screenshots or visual fragments from inspiring designs.
• URL import
  • Use a script to automate screenshotting from an existing site.

Then it adds explicit constraints to prevent common model errors, such as:

• “No illustration; use images” for hero/sections
• Adjust section palettes
  • alternate dark backgrounds
  • beige/earth tones

Once the structure is correct, generate missing sections like pricing and footer.

---

5) Replace generic stock imagery to remove “slop”

If the output uses generic stock images (e.g., Unsplash-style results), the page can still feel templated.

Suggestion: generate better, more custom visuals with AI so the page doesn’t look like a default template.

---

6) Typography guidance to avoid “AI-identical” fonts

To keep typography from feeling copy-pasted:

• Use Google Fonts and experiment
• Avoid defaulting to the “most-used” AI-safe fonts
  • This is what makes designs feel repeated.
• Try non-default options (examples mentioned/considered):
  • Urbanist
  • Inter (implied as common)
  • Google Sans
  • Signika
• Increase variation by changing:
  • fonts
  • light vs dark sections
  • earth-tone / pastel / off-white palettes

---

7) Use “skills” (including Taste + platform skills) for consistent polish

The key idea: don’t prompt without a Taste skill / design.md.

Examples mentioned:

• Impeccable (a good skill)
• Taste (used by most people)

Skills can be applied for:

• image generation
• HTML generation
• video work

Goal: improved originality versus generic output.

---

8) Finding real UI patterns (Mobbin) and reapplying them

When details are wrong (e.g., pricing layout):

• Use Mobbin to find proven UI patterns
• Apply a targeted patch, e.g.:
  • “Replace the pricing section… set it to dark mode… adapt the design into my page.”

Iterate on corrections, such as:

• button wrapping issues
• mismatched gradients/styles

---

9) Final polish checklist (animations, responsiveness, assets)

Before finishing, ensure the landing page is complete and refined:

• Correct page sections:
  • hero, features, pricing, testimonials
  • trusted-by logos
  • contact form
  • story/about
  • footer
• Add animations
  • “one prompt” approach can be used for rich interactions / smooth scroll
• Polish constraints:
  • fully responsive layout
  • SVG logo (avoid excessive logos to prevent code bloat)
  • prefer deliberate imagery (less generic-looking visuals)
  • avoid overusing lights/gradients/glows
  • use more distinctive icons
    • Lucide is mentioned as common/generic
    • alternatives referenced: Basil and IconMoon
  • add background blur, shadows, and smooth visuals where appropriate

---

10) Practical “one-shot” generation + targeted patching

Example end-to-end flow:

1. Import a design system/reference design
2. Generate the full landing page
3. Generate images/video backgrounds with AI
4. Patch remaining issues (e.g., white borders) using a targeted skill/prompt (e.g., border gradient)
5. Replay/verify animations and assets (some may load only once)

---

Main speakers / sources

• Main speaker: not explicitly named in the subtitles.
• Tools/sites referenced: Vibe-coded/Aura, Cursor.com, Mobbin, Google Fonts, Unsplash (as something to avoid), and icon libraries including Lucide (mentioned as generic).