37:27Common Mistakes With Vibe Coded Websites
AI Design Trends and Pitfalls AI design tools enable easier creation, but accepting all AI suggestions can lead to common, unoriginal designs. Trends like purple gradients and fading-in sections are becoming ubiquitous due to LLMs being trained on popular examples. While AI offers superpowers, founders must remain in control, acting as editors to ensure originality and avoid "AI slop." Website Review: New.ai Features a very purple color scheme, a common AI-generated trend. A distracting line following the user down the page was implemented likely because it was easy with AI, but adds no value. Contrast issues make text hard to read. Tasteful hover animations on cards are a good use of AI, enhancing the brand and reinforcing messaging. Navigation hover effects that cause menu items to fade out are counterintuitive and distracting. Website Review: Rosebud AI Continues the purple gradient trend, leading to a lack of brand originality. Features an interactive 3D game demo, which is engaging but its connection to the product isn't clearly explained. Non-standard navigation and potentially confusing elements like a following top bar hinder usability. The combination of a red logo with purple accents and the use of emojis can appear lazy or unharmonious. Cursor-following light effects on game examples are visually appealing but may not be worth the development effort if not AI-assisted. Website Review: Get Crux Exhibits scroll jacking and automatic fade-in sections, which can be disorienting. A button that constantly chases the user is distracting and makes it difficult to focus on content. "Meteor" animations and blurry hero screenshots detract from the user experience and product clarity. Lack of visual consistency across sections suggests different AI generation approaches. The core value proposition is not immediately clear, requiring users to scroll extensively to understand the offering. Website Review: Sphinx More animation is present, a common outcome of AI design tools. Information hierarchy is complicated by an unnecessary "fourth style" element between the logo and H1. A confusing animated section with shifting button styles and unclear functionality appears to be a product of AI over-suggestion. Hover effects revealing icons that are not critical information can be distracting. A scroll-jacking animation that locks the user in place distracts from the content and lacks a clear purpose. The visual style, while modern, can be hindered by distracting animations and unclear messaging. Website Review: Build Zero Features purple gradients and "dumb hover effects" that add no value and can appear as bugs. An interactive element has a bug in selection, which might be overlooked due to the ease of AI generation. AI-generated dashboards with common color callouts and "bento box" layouts lack originality. The repetition of common patterns across sites diminishes brand uniqueness and credibility. Website Review: Zarna AI Employs scroll jacking, making the site feel clunky and slow to navigate. Lack of clear content and excessive scrolling to understand the offering are significant issues. The navigation bar can become unreadable against dynamic backgrounds, highlighting a lack of robust design. Inconsistent clickability of elements and automatic movement create a confusing user experience. While the visual style can be fresh, it's undermined by a lack of clear messaging and "fit and finish." Key Takeaways and Advice Founders must be intentional and act as editors when using AI design tools, ensuring originality and brand consistency. Thoroughly QA all AI-generated elements to catch bugs and confusing interactions. Prioritize clear messaging and ensure the website effectively functions as a customer acquisition channel. Use AI to enhance creativity and efficiency, not to outsource critical thinking about the product and brand.
























