Ask HN: How can you tell a site/app is vibe coded?
With so many people vibe coding sites and full apps, I feel like there is much more AI slop shown to the user. What are your tell-tale signs? Black background, green and orange gradients, same font, etc. Would love to learn more!
For B2B SaaS apps, you'll notice that the panels and navs (top navigation, bottom navigation, left-navigation, etc) are much smaller (which is a slightly more 'modern' look) - e.g., OpenAI/Claude dashboards. In general components are more uniform/standard, fonts are smaller. Again, this is just what I've noticed for specifically B2B SaaS apps. If you ask Claude Design to build you one - you'll see exactly what I'm referring to.
I honestly don't mind it. For these B2B SaaS apps its nice to have some site consistency. It almost reminds me of a a new "Bootstrap" way of doing things.
Often there is the Inter font. Corners are usually quite rounded, there are lots of gradients. Also, I sometimes see weird descriptions of what a particular UI element does, even though it's obvious. It's possible that the LLM is putting them as a comment to the operator.
I've been using two open-source tools to prevent, and then check this on my own sites / projects. They are actually pretty good at spotting and they are community driven so they get updates regularly.
1. Impeccable (github.com/pbakaus/impeccable) — a CLI that scans HTML/CSS/JSX for 59 deterministic anti-pattern rules. It catches the actual visual tells: zero-offset dark glows on text, 1px borders paired with 40px shadow blur, Inter/Roboto/Geist as the default "tasteful" font.... etc.. I wont list all 59 here.
2.Taste Skill (github.com/Leonxlnx/taste-skill) — preventive rather than detective. It's a set of SKILL.md files you load into your coding agent (Cursor, Claude Code, etc.) before generation so the slop never gets created in the first place.
---
everyone knows about Em-dash overuse, but there are other tells like the dark background offset glow, thick boarders, flat display style, over use of techy color schemes like navy blue (especially with gradients) and emojis in headers as large style iconography. there are like 5 common fonts ai's use etc.. the key is, your llm is going to reason that these are all good safe choices and even when you tell them to be different they will give you great sounding logic as to why to use them... which is exactly the problem. every llm 'reasons' themselves into using the same choices so the sites all look the same.
It matters because AI produced material cannot be copyrighted. You need to be able to prove there are significant human edits to protect intellectual property.
I honestly don't mind it. For these B2B SaaS apps its nice to have some site consistency. It almost reminds me of a a new "Bootstrap" way of doing things.
1. Impeccable (github.com/pbakaus/impeccable) — a CLI that scans HTML/CSS/JSX for 59 deterministic anti-pattern rules. It catches the actual visual tells: zero-offset dark glows on text, 1px borders paired with 40px shadow blur, Inter/Roboto/Geist as the default "tasteful" font.... etc.. I wont list all 59 here.
2.Taste Skill (github.com/Leonxlnx/taste-skill) — preventive rather than detective. It's a set of SKILL.md files you load into your coding agent (Cursor, Claude Code, etc.) before generation so the slop never gets created in the first place.
---
everyone knows about Em-dash overuse, but there are other tells like the dark background offset glow, thick boarders, flat display style, over use of techy color schemes like navy blue (especially with gradients) and emojis in headers as large style iconography. there are like 5 common fonts ai's use etc.. the key is, your llm is going to reason that these are all good safe choices and even when you tell them to be different they will give you great sounding logic as to why to use them... which is exactly the problem. every llm 'reasons' themselves into using the same choices so the sites all look the same.