YouTube

How to Avoid AI Slop in Vibe-Coded Landing Pages

2026-06-04 · 13:18 UTC ·DesignCode ·1 min read

Brief

How to Avoid AI Slop in Vibe-Coded Landing Pages is a hands-on tutorial by DesignCode (published 2026-06-04) that shows a step-by-step workflow: import a URL or screenshot, author DESIGN.md/AGENTS.md rules, iterate across Opus 4.8, GPT-5.5, and Gemini 3.1 Pro, then use Taste Skill/Impeccable/Aura to generate contextual images, background video, and final visual polish.

Why it matters

DesignCode (video published 2026-06-04) catalogs specific design 'tells'—oversized eyebrows, random status pills, glow lights, purple gradients, generic illustrations, default fonts, and weak pricing sections—that make vibe-coded landing pages read as AI slop.

Key details

  • Workflow: import screenshots/URLs, create DESIGN.md and AGENTS.md reusable rules, compare outputs from Opus 4.8, GPT-5.5, and Gemini 3.1 Pro, and use Taste Skill, Impeccable, and Aura to generate contextual images, background video, and final typography/gradient fixes (complete page generation and polish shown around 00:19–00:21).
  • Prompting tactics: don't start from zero—use reference assets and precise design vocabulary, 'prompt away' generic illustrations and weak colors, and adapt a pricing-section reference to iteratively fix UI mistakes (see plain prompt test at 00:02:51 and pricing adaptation at 00:12:57).
Source evidence

In this video, I break down the design tells that make vibe-coded landing pages look like AI slop, then show the workflow I use to avoid them.

The problem is not just one bad model. It is lazy selected states, oversized eyebrows, random status pills, glow lights, purple gradients, generic illustrations, default fonts, weak pricing sections, and visuals that do not match the product.

The fix is to stop prompting from zero. Use screenshots, reference URLs, DESIGN.md, skills, better typography, contextual image generation, generated video where it helps, and precise design vocabulary so you can tell the model what to change.

Resources:
Aura: https://aura.build/
Taste Skill: https://github.com/Leonxlnx/taste-skill
Impeccable: https://impeccable.style
Get DESIGN.md: https://getdesign.md/

Chapters:

00:00:00 Signs your vibe-coded project looks like AI slop
00:01:11 Model taste profiles and why prompting still matters
00:02:03 Put reusable rules into AGENTS.md
00:02:25 Learn the names of the visual problems
00:02:51 Plain prompt test: "beautiful landing page in dark mode"
00:03:32 Comparing Opus 4.8, GPT 5.5, and Gemini 3.1 Pro
00:05:05 Use screenshots and references
00:06:04 Import a URL as design context
00:07:00 Prompt away illustrations, weak colors, and missing sections
00:08:08 Recreate a site from a URL, then change the brand
00:09:00 Generate contextual images instead of using generic visuals
00:09:40 Change colors, fonts, and brand direction
00:11:22 Use skills like Taste Skill or Impeccable
00:12:08 Fix specific UI mistakes instead of accepting the first pass
00:12:57 Adapt a pricing-section reference
00:13:52 Turn a design into DESIGN.md
00:14:49 Use existing DESIGN.md libraries
00:16:06 Put the full workflow together
00:17:15 Choose landing page sections and animation polish
00:18:10 Add responsive polish, icons, images, and product context
00:19:17 Generate the first complete page
00:20:04 Generate images and background video
00:20:35 Fix borders, gradients, and final visual polish
00:21:44 Final workflow recap

Channel: DesignCode
Published: 2026-06-04
Video URL: https://www.youtube.com/watch?v=M4DNgmI7MIM