Common Mistakes With Vibe Coded Websites

Key Concepts

• AI Design Slop: A term used to describe generic, unoriginal, or over-engineered design elements (like ubiquitous purple gradients) generated by AI that lack brand identity.
• Vibe Coding: The practice of using AI to generate code or design based on a general "feel" or prompt without rigorous attention to technical detail or user experience.
• Scroll Jacking: A technique that overrides the browser's native scrolling behavior to force animations or specific timing, often resulting in a clunky or "molasses-like" user experience.
• Information Hierarchy: The arrangement of elements in a way that implies importance; AI often fails here by adding unnecessary labels or styles that clutter the page.
• Conversion Wall: A point in a user journey where a visitor is prompted to sign up or pay, which should be strategically placed rather than hidden behind confusing UI.

1. Common AI Design Trends and Pitfalls

The discussion highlights that while AI tools have democratized high-quality web design, they have also led to a homogenization of startup websites.

• Ubiquity of Trends: Features like purple gradients, "meteor" animations, and complex SVG transforms have become standard because they are easy for LLMs to generate.
• The "Just Because" Fallacy: Founders often include complex animations simply because they are easy to implement, not because they add value. If a feature would have taken a week to code manually, it likely shouldn't be included unless it serves a clear purpose.
• Visual Inconsistency: AI-generated sites often suffer from "hallucinations" in design, such as mixing multiple button styles, inconsistent color palettes, or varying visual languages across different sections of the same page.

2. Critical Design Principles

• Clickability: Hover effects should be subtle and intuitive. The browser’s native cursor change (to a hand) is often sufficient. Avoid effects that make elements disappear or shift unexpectedly.
• Functionality over Flair: Avoid hiding critical information behind hover states. This is an anti-pattern, especially since hover does not exist on mobile devices.
• Clear Messaging: The H1 (headline) must clearly state: What is it? Who is it for? Why should they care? If these are not clear above the fold, the site fails as a customer acquisition channel.
• High-Fidelity Assets: AI-generated sites often use blurry or low-resolution images. All assets must be high-quality to maintain professional credibility.

3. Analysis of Specific Case Studies

• New.ai: Praised for tasteful hover animations on cards that reinforce the brand, but criticized for a distracting line-following animation that adds no value.
• Rosebud AI: Featured an impressive 3D browser game, but suffered from confusing navigation and a lack of clarity regarding whether the game was a product demo or a static example.
• Get Crux: Suffered from "scroll jacking" and a button that chased the cursor, which the reviewers found distracting and detrimental to user conversion.
• Sphinx: Noted for having a complex information hierarchy with too many competing styles, making the page feel cluttered.
• Build Zero: Highlighted the "fake dashboard" problem, where AI tools default to standard, unoriginal color schemes (red, green, blue, yellow) that look like every other AI-generated product.
• Zarna AI: Criticized for "molasses" scrolling and a lack of clear, actionable information, despite having a fresh visual style.

4. Expert Perspectives and Recommendations

• The Human-in-the-Loop: Raphael Shod emphasizes that founders must act as the "editor." Do not accept all AI suggestions; be opinionated about your brand.
• Design as a Tool, Not the Product: A landing page is a customer acquisition channel. Its primary goal is to convert visitors, not to showcase every possible animation the AI can generate.
• QA is Mandatory: Because AI can generate code instantly, founders often skip the quality assurance process. Bugs in AI-generated code are common and signal a lack of attention to detail to potential customers.
• Start with Brand, Not AI: Instead of letting the AI dictate the design, define your color palette and brand identity first, then use AI to execute that vision.

5. Notable Quotes

• "Just because something is possible doesn't mean you should say yes to it." — Discussion on the temptation of over-engineering with AI.
• "It feels like the visual manifestation of LLM hallucinations." — Raphael Shod on the confusing, shifting button styles seen on the Sphinx website.
• "You are still responsible to not outsource your thinking to LLMs." — Raphael Shod on the role of the founder in the design process.

Synthesis

The main takeaway is that AI is a powerful superpower for design, but it is currently being misused to create "AI slop"—sites that look modern but lack originality, clarity, and functional integrity. To stand out, founders must use AI to accelerate their workflow while maintaining strict control over the brand, messaging, and user experience. The goal is to use AI to solve the "hard questions" of product-market fit, rather than using it to fill the page with distracting, unoriginal, and buggy animations.