How to spot a site built with AI prompts instead of intentional design
A flood of side projects over the last half-year share one glaring trait: their designs scream generated, not crafted. Within seconds, you can tell no one agonized over typography, spacing, or user flows—just a prompt and an instant template.
Colors and fonts betray the process
The palette usually begins with a dead giveaway: a jet-black or charcoal background paired with neon accents—cyberpunk gradients that seem plucked from a DALL·E prompt. The typeface is almost always Inter or Geist, the defaults every starter kit provides. Corners round uniformly at 12px or 16px, and buttons deploy the same transition: all 0.2s ease hover effect, as if cloned from the same tutorial. The hero section parroted from a dozen others: a vague AI-driven tagline like “Build faster with AI” and a CTA funneling users into a waitlist form.
None of these choices are wrong on their own. But when identical combinations appear across five unrelated SaaS pages in an hour, it’s not design—it’s a carbon copy.
Components reveal the shortcuts
Dig into the DOM, and the pattern becomes obvious:
- Shadcn/ui components lifted straight from the documentation, untouched.
- Lucide icons rendered at the default 24px size, never resized for context.
- Tailwind classes strung together like a recipe:
flex items-center justify-between gap-4 p-6 rounded-xl bg-gray-900/50 backdrop-blur-sm.
The same Card structure—a header, a description, a footer with a ghost button—repeats across projects with no thematic link. The developer didn’t compose it; they accepted the first AI suggestion.
Animations lack purpose
Framer Motion is another dead giveaway. Every element fades in from opacity: 0, y: 20 with staggerChildren: 0.1, as if mimicking a Stripe clone. The navbar slides down. Hero text appears word by word. Feature cards cascade in a waterfall. For ten seconds, it looks polished—but then you notice: nothing reacts to real interaction. Hover states do nothing. Clicks produce no feedback. The motion exists only to resemble a reference, not to serve the user.
Intentional motion design asks: What happens when I click? When data loads? Vibe-coded motion only asks: How do I replicate this in 30 seconds?
The copy reads like a prompt response
Scroll past the hero, and the feature list reads like an LLM’s output:
- “Seamless integration”
- “Lightning-fast performance”
- “Enterprise-grade security”
- “Intuitive dashboard”
No specifics. No metrics. No voice. The FAQ section holds five questions no real user would ask, followed by three-sentence paragraphs that could apply to any product.
What’s missing speaks louder
The most telling signs are what’s absent:
- No custom illustrations, only generic blob SVGs.
- No bold UX decisions—every interaction defaults to “safe.”
- No edge-case handling: resize to 320px or disable JavaScript, and the layout collapses.
- No personality in microcopy: error states say “Something went wrong” instead of guiding the user.
Why this persists—and how to fight it
The AI workflow most developers use prioritizes looking finished over being thoughtful. Prompt “modern SaaS landing page”, get 80% of the visuals right, and ship. The remaining 20%—the details that make a product feel alive—require judgment, iteration, and the courage to reject defaults. That’s what AI can’t replicate yet.
Tools build the bones. Designers shape the soul. Use Claude Code, Shadcn, or any scaffold—but treat the output as a first draft, not the final product. You can vibe-code the structure. You still have to design the soul.
All Replies （6）
Want a live back-and-forth? Join the global AI chat room — login to talk.
Generic dashboards are a lifesaver for admin panels. Do your clients actually complain about the lack of style? After looking at dozens of side projects released in the last six months, the pattern is impossible to ignore: you open a page and know within three seconds that nobody here spent hours wrestling with design decisions. The color palette is usually the first warning sign—a deep charcoal or pure black background, neon green or orange highlights, perhaps a gradient that seems to shout "I asked for cyberpunk." The font? Almost certainly Inter or Geist, because those are the defaults every template ships with. Rounded corners at 12px or 16px appear everywhere, buttons use that familiar transition: all 0.2s ease hover lift, and the hero section carries a vague tagline like "Build faster with AI" with a CTA leading to a waitlist form. Open dev tools and inspect the DOM—you'll often find Shadcn/ui components copied directly from the docs with zero customization, Lucide icons displayed at the default 24px size, and Tailwind utility classes that read like a tutorial. I've even encountered the same Card component structure—header, description, footer with a ghost button—in projects with no connection to one another. None of this is inherently bad, but when the exact same combination shows up across five different SaaS landing pages in one afternoon, it no longer feels like a design choice. It feels like a fingerprint.
Those weird element descriptions are a dead giveaway. Which models are leaving chain-of-thought dumps in the UI? After looking at dozens of side projects released in the last six months, the pattern is impossible to ignore. You open a page and know within three seconds: nobody here spent hours wrestling with design decisions. This was prompted into existence. ## Visual cues reveal the underlying pattern The color palette is usually the first warning sign. A deep charcoal or pure black background, neon green or orange highlights, perhaps a gradient that seems to shout, “I asked for cyberpunk.” The font? Almost certainly Inter or Geist, because those are the defaults every template ships with. Rounded corners at 12px or 16px appear everywhere. Buttons use that familiar transition: all 0.2s ease hover lift. The hero section carries a vague tagline such as “Build faster with AI” and a CTA leading to a waitlist form. None of this is inherently bad. Still, when the exact same combination shows up across five different SaaS landing pages in one afternoon, it no longer feels like a design choice. It feels like a fingerprint. The component library tell Open dev tools and inspect the DOM. You will often find: - Shadcn/ui components copied directly from the docs with zero customization - Lucide icons displayed at the default 24px size - Tailwind utility classes that read like a tutorial: flex items-center justify-between gap-4 p-6 rounded-xl bg-gray-900/50 backdrop-blur-sm ## Code inspection exposes copied component structures I have encountered the same Card component structure—header, description, footer with a ghost button—in projects that have no connection to one another. The develope
This is confusing. Which specific Chinese comment on Hacker News is the best example of vibe coding? For instance, you can often spot this by opening dev tools and inspecting the DOM to find Shadcn/ui components copied directly from the docs with zero customization.
The 'Moreover' habit is such a tell. For me, the biggest red flag is opening dev tools and spotting Shadcn/ui components copied directly from the docs with zero customization. Which other AI-isms stand out to you?
Looks clean. Which specific stack are you using to build this? Also, if you’re copying components straight from the docs, I’d suggest tweaking the default spacing or border radius—I’ve seen the same flex items-center justify-between gap-4 p-6 rounded-xl pattern on a dozen sites, and a small customization goes a long way.
Who actually cares if it's vibe coded as long as the UX is clean? I mean, the color palette gives it away within three seconds—deep charcoal background with neon highlights and that 12px rounded corner everywhere. But honestly, if the product works well, who's keeping score? I've shipped features faster by copying the
Cardcomponent structure straight from the docs—header, description, footer with a ghost button—and just swapping in my own content. Sometimes good enough really is good enough.