Design Experts Review Vibe Coded Websites
Artificial intelligence has democratized design — anyone can now spin up a polished landing page in minutes. But as YC designers Gustav and Raphael discover, that ease comes with a trap: a flood of purple gradients, scroll-jacking animations, and hover effects that serve no purpose beyond being easy to code. They dissect six YC company websites, all built with AI tools, to expose the gap between what's possible and what's actually good. The central tension: when the machine does the heavy lifting, who ensures the brand doesn't vanish into a sea of lookalikes?
Ключевые выводы
Purple gradients, scroll-jacking, and auto-fadeins are the telltale signs of AI-generated design slop — ubiquitous because they're trivial to implement, not because they serve the user or the brand.
Hover effects that hide functionality or reduce contrast are anti-patterns: browsers already signal clickability with the cursor, so additional CSS should amplify, not obscure.
The best use of AI design tools is to skip the tedious implementation work and invest saved time in original messaging, brand identity, and rigorous QA — not to accept every suggestion blindly.
Landing pages are customer acquisition channels, not art projects: animations and interactions must serve conversion, not exist for their own sake.
Start with your brand palette and messaging, then use AI to execute — not the other way around. Feeding constraints into the tool is the only path to originality.
Вкратце
AI design tools are a superpower — but only if you reject most of what they suggest. Founders must remain the editor, not the typist, treating AI output as a first draft that demands ruthless pruning and intentional brand decisions.
The AI Design Slop Taxonomy
When AI Gets It Right: The Nuance of Tasteful Animation
Some hover effects and animations genuinely enhance brand and usability.
The Hierarchy Trap: When AI Adds Too Many Styles
LLMs invent unnecessary labels and text styles, muddying information hierarchy.
Raphael flags a recurring pattern on Sphinx's landing page: the site has five distinct typographic styles in the hero section alone — logo, extra label, H1, subtext, and body copy. Human designers ruthlessly constrain hierarchy; LLMs, trained on a mishmash of examples, treat every new idea as worthy of a new style. The result is visual clutter that pushes the value proposition lower on the page and confuses the eye.
Another manifestation: gratuitous icons in navigation menus that change on hover but convey no additional information. Raphael's rule of thumb: if revealing something on hover isn't essential, leave it out entirely. Hover should make interfaces feel alive or disclose critical functionality — not play hide-and-seek with basic features. On mobile, where hover doesn't exist, these patterns fail completely.
The Button That Chases You Down the Page
A floating CTA that follows scroll is more distraction than conversion tool.
The Button That Chases You Down the Page
Get Crux's site features a «Talk to Founders» button that literally follows the user down the page, constantly repositioning itself. Raphael and Gustav are transfixed — but not in a good way. «Does it make you want to talk to the founders more or less?» Gustav asks. «It makes me distracted,» Raphael replies. The button is so visually demanding that neither reviewer can recall what the product actually does. Just because you can do something doesn't mean you should.
Quality Assurance: The Human Responsibility AI Can't Automate
One-shot landing pages often ship with bugs founders never noticed.
Build Zero's site has a subtle but glaring bug: text selection highlights bleed across UI elements in unpredictable ways. Zarna's nested accordion menus work only on some items, not others. Raphael's hypothesis: when you one-shot a landing page with AI, you don't experience the same attention to detail you would if you'd coded it line by line. You're less likely to notice small bugs because you didn't build the mental model that comes from manual construction.
The fix is simple but non-negotiable: QA everything as if you built it yourself. Click every button, hover every element, scroll at different speeds, test on mobile. AI gives you speed, but you still own the quality bar. If you skip this step, you're shipping the machine's blind spots as your own.
The Right Way to Use AI Design Tools
Start with brand and messaging constraints, then use AI to execute.
Define your brand first Choose your color palette, establish your voice, and clarify your value proposition before touching an AI tool. Feed these constraints into the system.
Treat AI output as a first draft The machine will give you a complete design in seconds. Your job is to ruthlessly edit: strip animations that don't serve conversion, simplify hierarchy, ensure every element earns its place.
Invest saved time in originality You've skipped weeks of manual coding. Use that time to craft messaging that resonates, source high-quality assets, and design interactions that are uniquely yours — not the defaults every other founder gets.
QA like you built it yourself Click, hover, scroll. Test on different devices and speeds. AI doesn't debug itself, and small bugs erode trust.
Remember: it's a customer acquisition channel Your landing page isn't art — it's a tool to convert visitors. Every design choice should ladder back to clarity, trust, and action.
Why Everybody's Site Looks the Same Now
LLMs train on popular examples, compressing trend cycles to weeks.
“In the old world, if there was a good website kind of establishing a trend, it took a while for others to copy these trends. But now with LLMs, if there's a good website with a purple gradient, it makes it into the LLM because the LLM gets trained on the good examples that get linked to a lot. And then all of a sudden, like the next week, all the startup websites look the same.”
Люди
Глоссарий
Отказ от ответственности: Это ИИ-сводка видео с YouTube, подготовленная в образовательных и справочных целях. Она не является инвестиционной, финансовой или юридической консультацией. Всегда проверяйте информацию по первоисточникам перед принятием решений. TubeReads не связан с автором контента.