Vibe Coding in 2026: The Honest State of AI-Built Frontends (and When It Fails)

> "I built a SaaS in a weekend." — A tweet from mid-2025, retweeted 40,000 times. The site, looked at honestly, is a shadcn dashboard with three pages and one form. The pricing page does not work on mobile. There is a cn() helper imported into a file that never calls it. The hero gradient is from-blue-600 to-violet-600. You know the one.

We are now far enough into the vibe coding era to write something useful about it. Not a rant. Not a manifesto. A field report from the place where the marketing collides with what teams actually shipped, what their analytics show, and what their customers say.

This is going to be long. If you only have a minute, the TL;DR below is honest.

TL;DR

• Vibe coding — building software primarily by talking to an LLM, accepting whatever code it produces, fixing only what visibly breaks — works well for a narrow set of cases (internal tools, throwaway prototypes, one-off landing pages for a webinar) and fails badly for almost everything that has to differentiate, convert, age, or comply.
• The term itself shifted from neutral-to-positive in early 2025 (Karpathy, "vibes", "feel the code") to mildly insulting by late 2025 ("oh, that's vibe coded") to a real insult by mid-2026 ("this looks vibe coded"). The trajectory mirrors "made on Wix" and "blogspot template" before it.
• The landing-page-conversion data, while fuzzy, points one direction: AI-generated landing pages underperform designed-and-tested pages on the metrics that matter — meaningful CTA click-through, qualified lead rate, trust signals — even when raw page-speed numbers look fine.
• The post-vibe stack that serious teams converged on in 2026 is roughly: LLMs for scaffolding, humans for editing, custom design systems that explicitly block shadcn defaults, linters and design-CI tools (Sailop is one) that flag the obvious AI signatures before they ship, and a shorter list of components the AI is allowed to touch.
• For a founder or PM in 2026, the decision tree is: vibe code your internal CRUD; do not vibe code your homepage.

Decision matrix: vibe code, or don't

| Use case | Vibe code? | Why | |---|---|---| | Internal admin dashboard, ≤5 users | Yes | Form + table + CRUD. AI defaults are fine. | | Personal scratchpad, weekend project | Yes | You are the only user. Slop is free. | | Webinar landing page, lives 14 days | Yes, with humans on copy | Lifetime is shorter than the cost of design polish. | | Throwaway prototype to test a flow | Yes | If it survives, rebuild it. | | Public marketing site for a brand | No | You will become indistinguishable from 600,000 other AI sites. | | Designer / agency portfolio | No | The irony alone will end your career. | | Pricing page that has to convert | No | The CRO defaults baked into the model are 2022 SaaS, not your funnel. | | Anything that needs to age past 6 months | No | The drift compounds. Each new feature pulls the AI deeper into the same patterns. | | Regulated industries (legal, finance, health) | No | Consistency, accessibility, copy precision matter; the model does not know your jurisdiction. | | Multilingual site | No | The model collapses voice. Localized copy gets translated back into "AI Voice". | | Accessibility-critical experience | No | Defaults are decorative, not accessible. ARIA is performative. | | Brand with a strong voice (witty, technical, regional) | No | The voice gets sanded off in the first refactor pass. |

If your case is in the "No" column and you are still tempted, read the rest. There is a path; it just is not "open Lovable, type the brief, ship".

---

What vibe coding is, and where the term came from

The phrase vibe coding comes from a short post by Andrej Karpathy in early 2025. He described a way of working with Claude and Cursor where he stopped reading the code, mostly accepted what was generated, and only intervened when something visibly broke. He called it "vibes". By March 2025, "vibe coding" was a tag on Hacker News, a meme on X, a section in every developer newsletter.

Karpathy's original framing was modest. He was talking about throwaway personal projects, the kind of thing a hobbyist builds over a Sunday. Within weeks the term had been borrowed by SaaS founders, PMs, marketers, students, the "build in public" crowd. Vibes went from "I don't read the code on my weekend project" to "I shipped a production app without reading the code".

That transformation is the whole story.

The honest definition, as practiced in 2025-2026, is approximately this:

> Building software primarily by describing what you want in natural language to a large language model, accepting whatever code it produces, and fixing only what visibly breaks at runtime. Reading the code is optional. Reading the design is optional. Caring about the structure is optional. The unit of feedback is "does it look like the screenshot in the prompt".

The phrase is loaded now. Some people use it to mean "AI-assisted development", a much broader category that includes serious engineering work. Others use it as a synonym for "slop". In this article I use it in the strict sense — the unedited, accept-the-output, ship-the-default sense — because that is the version the market actually delivered.

The slip from "I work fast with AI" to "I do not read the code I ship" is small in language and enormous in outcome.

---

The 2024-2026 timeline

This is the field report, quarter by quarter: what happened, what shipped, what broke. There are no decimals here because the decimals would be invented. The directional shape is real.

Q4 2024 — pre-history

• v0.dev is a year old. Vercel's tool for generating React components from prompts, originally a curiosity, now a full product. Output: shadcn/ui under the hood, Tailwind classes, the gradient.
• Cursor is the editor of choice for AI-augmented development. Composer mode is a few months old. Most users are still copy-pasting from Claude or ChatGPT into VS Code.
• Bolt.new launches. StackBlitz's in-browser full-stack agent. The pitch: type a prompt, get a deployed app. The reality, looked at honestly, is a Vite + React + Tailwind starter with a hero, three cards, and a CTA. That was, briefly, magic.
• Replit Agent ships. Replit had been gunning for the "everyone is a programmer" market for years; the agent finally delivered the demo: a non-coder typing "build me a habit tracker" and getting a deployed, working app.

Q1 2025 — the Karpathy tweet, and the explosion

• Vibe coding enters the lexicon, late January / early February 2025. By March, every developer-focused newsletter has a "what is vibe coding" issue.
• Lovable (formerly GPT Engineer) ships its v2: a hosted Bolt competitor with a tighter UX and a stronger marketing engine. The founders hire growth, the ARR figures circulate on X, the term vibe coding appears in their landing copy.
• Claude Code launches publicly. Anthropic's official CLI for Claude. Initially aimed at engineers, it becomes the engine for a generation of "agentic coding" workflows.
• HN backlash starts, mildly. A few essays argue that "you cannot vibe code production software". The optimists dismiss them.

Q2 2025 — peak hype

• Lovable, Bolt, v0, Replit Agent are all running paid acquisition. The TAM is "every PM who has wanted to ship a frontend". Pricing converges on a $20-50/month consumer tier and a $200-500/month team tier.
• The first wave of "I built a SaaS in a weekend" content goes viral.
• The Lovable IPO speculation — to be honest about it: there were rumors, on X, of an IPO. There was an investor day in mid-2025. There was a fundraise. Whether a real IPO happened or whether it was a private secondary, I would not call from public reporting alone, and I am not going to invent a date.
• Designer Twitter notices that every new SaaS landing looks the same. The phrase "shadcn site" starts being used as a slight.

Q3 2025 — first signs of saturation

• Conversion rates on AI-generated landing pages, in aggregated reports from CRO consultancies, start showing a directional decline. Bounce rates climb. CTA click-through softens.
• "vibe coded" as a participle starts appearing in code review comments. It is mildly negative.
• The first big public "I shipped a vibe-coded app and lost all my data" post hits HN. The cause is a generated DELETE FROM users with no WHERE clause. The piece is shared widely.
• Cursor agent mode matures. Serious engineers now use Cursor for refactor-with-context, not generation-from-prompt. The market splits between "vibe coders" (consumer tools) and "AI-augmented engineers" (Cursor + Claude Code in real repos).

Q4 2025 — the term turns

• Stratechery (Ben Thompson) publishes a piece arguing the AI-generated software economy will hit a saturation point similar to the App Store mid-2010s: too many apps, too few anyone cares about, the platforms taking the rents.
• Ed Zitron's newsletter starts running pieces on the economics of AI-generated software, focusing on the gap between marketing claims and ARR reality. Pivot to AI (David Gerard) covers the same ground from the technical side.
• "vibe coding" starts getting used in a lightly insulting way in serious technical contexts. "Looks vibe coded" appears as a code review comment.

Q1 2026 — the backlash organizes

• A wave of "anti-slop" content tools and linters ships. Sailop is one. The framing is design CI: a layer that catches AI signatures before they make it into prod.
• Agencies and freelancers start positioning explicitly against vibe coding. The pitch: "we will give you a site that does not look like 600,000 other AI sites". Pricing for this segment moves up.
• The term vibe coded is now full-pejorative in design and senior-engineer circles.

Q2 2026 — where we are now

• The hype has cooled. Lovable, Bolt, v0, Replit Agent are all real businesses; their growth has slowed; their churn is what you would expect from a market segment built on novelty.
• The post-vibe stack — LLMs scaffolding, humans editing, design systems that explicitly block defaults — is the mainstream serious-team approach.
• The fight, in mid-2026, is over what "AI-assisted development" means going forward: a discipline-augmenting tool, or a slop generator that took the brand off your product.

Timeline at a glance

| Quarter | Tools shipping | Sentiment | Vibe coding term status | |---|---|---|---| | Q4 2024 | v0, Bolt.new, Replit Agent | Curious | Not yet coined | | Q1 2025 | Lovable v2, Claude Code | Excited | Coined, neutral-positive | | Q2 2025 | Cursor agent, paid acquisition wars | Hype peak | Marketing copy uses it | | Q3 2025 | first conversion declines | Saturation, mild backlash | Mildly negative | | Q4 2025 | Stratechery, Zitron coverage | Critical | Lightly pejorative | | Q1 2026 | anti-slop tools (Sailop, etc.) | Backlash organized | Pejorative in serious circles | | Q2 2026 | post-vibe stack mainstream | Sober | Full insult |

---

The economics of vibe coding

This is where the marketing and the reality diverge most clearly.

The funding picture

In 2025, vibe-coding tools raised, in aggregate, billions of dollars. That is a real number from public reporting on the category. The pitch to VCs was variations of:

• TAM expansion: every PM, every marketer, every founder is now a developer. Software gets built by 10x more people. We capture the rents.
• Time-to-MVP collapse: from weeks to hours. Customer acquisition cost on the consumer tier is low. Conversion is high.
• Network effects via templates and gallery: users share the apps they built; that becomes the marketing.

The numbers in the pitch decks were aggressive. The numbers in the actual P&Ls, where they have been disclosed or leaked, are softer. Churn on the consumer tier is high — much higher than SaaS averages — because most users build one thing and never come back. Net revenue retention on the team tier is more sustainable, but the team tier is a smaller market than predicted.

Pricing tiers, observed

| Tool | Free tier | Consumer / Pro | Team / Business | Notes | |---|---|---|---|---| | v0.dev | Yes, limited | ~$20/mo | ~$30/user/mo | Tied into Vercel's deploy economics | | Bolt.new | Yes, token cap | ~$20/mo | ~$50/user/mo | StackBlitz infra | | Lovable | Limited | ~$20/mo | ~$50-100/user/mo | Aggressive growth, hosted | | Replit Agent | Yes | ~$25/mo | ~$35/user/mo | Replit's existing platform | | Claude Code | Tied to Claude | Anthropic API/sub | Team / Enterprise via Anthropic | CLI, so no hosting layer | | Cursor | Limited | ~$20/mo | ~$40/user/mo | Editor, not generator |

(Approximate tiers from public pricing pages over 2025-2026; tools change pricing often. The shape — free + ~$20 consumer + ~$50 team — is the consistent pattern.) For a fuller breakdown of how these tools rank on the actual output, see AI website builders ranked by slop.

Where the marketing breaks vs reality

The marketing claim: "ship in 5 minutes". Technically true. You can have a deployed site in 5 minutes. The site, looked at honestly, will not be one you want to put your name on for a real product.

The marketing claim: "no code required". Technically true and operationally false. Within an hour of building a non-trivial app, you are reading code. Within a day, you are debugging it. Within a week, you are in the weeds of why a particular component shipped with a useEffect that fires on every render and re-fetches your pricing data four times per keystroke.

The marketing claim: "infinitely scalable". This is where the term breaks hardest. The codebase the model produces is not designed for evolution. It is a snapshot of "what looks plausible right now". Each subsequent prompt drags it further from any coherent architecture. By month three, you are doing as much code archaeology as if someone had handed you a 10-year-old PHP codebase.

The honest conversion claim, from CRO consultancies' aggregated case studies: AI-generated landing pages underperform designed-and-tested pages on qualified-lead conversion. The gap, in the documented cases, is not small — directionally it sits in the high tens of percent range, not "a little worse". I will not give you a precise number, because the precise number depends entirely on what you measure and the comparison set is messy. But the direction is clear.

Who actually pays, and why

The buyer profile the tools acquire most cheaply:

• Solo founders building their first product. They convert on the free tier, pay the $20, build their MVP, and either succeed (then they keep paying) or fail (and churn).
• PMs at mid-sized companies who want to prototype something for a stakeholder. They pay through expense, build the prototype, hand it to engineering, and use the tool intermittently.
• Marketing teams who need a quick landing for a campaign. High recurrence on the team tier, but small ACVs.

The buyer profile that does not convert well:

• Established teams with a real codebase. They might use Cursor or Claude Code, but they will not use Bolt or Lovable for production work.
• Designers and agencies. They explicitly avoid these tools because the output is the antithesis of their value prop.

That asymmetry — the tools growing fast in the segments where the work is most disposable — is the macro story of vibe coding's economics.

---

Where vibe coding works

Vibe coding is not a sham. It is a tool that fits a real set of cases. Here is the honest list.

Internal admin tools and dashboards for tiny teams

If you are building a CRUD admin for five people to use internally, vibe coding works. The form is a form. The table is a table. The auth is a single SSO integration. Nobody is going to A/B test the layout. Nobody is going to write a Stratechery piece about the spacing. The user is your colleague who already knows what to click.

This is, quietly, where most vibe-coded software actually lives in 2026: internal tooling. Operations dashboards, customer-support consoles, ad-hoc reporting tools. Things that would have been built in Retool or as a Streamlit script three years ago. The vibe-coded version is comparable; it is a fine fit.

The reason it works here: the cost of design mediocrity is zero. The user does not need to be persuaded; they need the data on screen.

Personal scratchpad apps

The original Karpathy use case. You want a habit tracker for yourself. You want a recipe scaler for your kitchen. A tiny tool that you and only you will ever use. Vibe code it. Read whatever code you want. Ship it to a Vercel free tier. Move on.

The reason it works: you are the user, the customer, and the audience. Your taste is the only metric.

One-off marketing landing for a webinar or Product Hunt launch

Lifetime: 7 to 30 days. Audience: people who already clicked from an email or social post. Conversion: signup form. The page is a placeholder for a CTA. The vibe-coded version, even with the gradient, even with the three-card section, is fine. Nobody will remember the page.

The reason it works: the cost of design polish exceeds the value over the page's lifetime. Spend a week designing a landing that lives 14 days and you have lost the trade.

The caveat: the copy still needs a human. A vibe-coded landing with vibe-coded copy is two layers of slop. One layer (the layout) you can survive. Two layers, you cannot. If you only have time for one human pass, see the banned phrases that mark copy as AI and strip them.

Throwaway prototype to test a flow

You have an idea. You want to know if the flow makes sense before committing to build it. Vibe code the prototype. Test it on five users. Throw it away. Build the real thing.

The reason it works: the artifact is disposable by design. The whole point is to not invest beyond the test.

Replacement for "I'll just write a Streamlit script"

For data scientists and analysts, vibe coding has replaced a category of work that previously lived in Streamlit, Dash, or hacky Flask. You need a UI on top of a model or a dataset, you do not want to learn React, you want it to look like a product instead of a notebook. Vibe code it. The output beats Streamlit, ships faster than learning Dash, and is good enough for internal review.

This is the quiet success story of vibe coding. It expanded the addressable surface of "can I make this interactive" for non-frontend people. A real win.

---

Where vibe coding fails

This is the longer list. It is the list that explains why "vibe coded" became an insult. Each failure mode is a place where vibe coding, deployed naively, produces a worse outcome than the alternative.

Public marketing site for a brand that needs to differentiate

This is the fail mode that did the most damage to the reputation of vibe coding in 2026. The pitch sounded reasonable: "ship your homepage in an hour". The result, as it shipped across thousands of brands, was that every site started to look the same.

The reason is structural. The model has a strong prior over what a SaaS landing page looks like. The shadcn/ui components are the components it knows. The bg-gradient-to-br from-blue-600 to-violet-600 is the gradient it generates by default. The "Trusted by" logo bar, the three-card features section, the testimonial slider, the pricing table with three tiers — these are not decisions, they are the model's output when no decision is made.

A public marketing site built from these defaults costs more in lost differentiation than it saves in time. If your brand is one of 600,000 sites with the same hero, the same gradient, the same component library, you have made yourself indistinguishable. That is the opposite of what a marketing site is for. This is the core mechanism behind why every AI-generated website looks the same.

The honest test: open your homepage next to three competitors' homepages. Cover the logos. If you cannot tell which is which, you have a vibe-coded marketing problem.

Designer / agency portfolio (the irony)

In the last six months I have seen multiple design-agency portfolios that were obviously vibe coded. The hero is the gradient. The case-study cards are the case-study cards. The pricing — yes, some agencies show pricing now — is the three-tier table.

This is professional malpractice. The whole point of a designer's portfolio is to demonstrate you can produce something that does not look like everything else. Shipping a vibe-coded site as a designer is a chef serving you instant ramen at a tasting. The market sees through it instantly.

The agencies and freelancers that did well in late 2025 and 2026 are the ones who positioned explicitly against the AI defaults. "We will not give you a shadcn site." That became a real value prop.

Sites needing measurable conversion

Every CRO finding from the last decade — Stripe's published landing-page playbooks, Shopify's A/B test patterns, the Baymard Institute's UX research — points to specific design decisions that improve conversion. Specific button copy, specific layout patterns, specific trust signals, specific friction reductions.

The model does not know your funnel. It knows what a SaaS landing page looks like in aggregate. Aggregate is the median. The median does not win.

A vibe-coded pricing page, in the cases I have observed, underperforms a designed-and-tested one. Sometimes by a small margin, sometimes by a large one; it depends on whether the baseline was good or bad. But the direction is consistent: AI defaults are not CRO-optimized, they are aesthetic-optimized. The default pricing layout is three tiers with the middle one scaled 1.05 and tagged "Most Popular" — which is a 2022 pattern, not your funnel. For layouts that actually convert, see pricing-page anti-slop: 15 layouts.

Anything that needs to age past 6 months without massive rewrite

This is the deep failure mode and the one that costs teams the most over time. The codebase a model produces is a snapshot, not a foundation. Each new feature, you ask the model to extend a structure it does not really understand, and the structure drifts.

By month three, the codebase has three slightly different patterns for the same thing — one component uses useState, another useReducer, a third a context you forgot existed. By month six, six patterns. By month twelve, you are doing as much rework as if you had inherited a legacy codebase.

The cost is not visible at month one. That is the trap. It is visible at month nine, when the team that vibe-coded the original is spending 60% of its time on maintenance instead of 20%.

Anything in regulated industries

If you are building software in legal, finance, health, education, or any space where consistency, accessibility, copy precision, and traceability matter, vibe coding is structurally a poor fit.

• Consistency: the model varies its outputs across sessions. The same prompt produces different code an hour later. Fatal in regulated work.
• Accessibility: the model's defaults are decorative, not accessible. ARIA attributes are added performatively. A grey #9ca3af label on white hits roughly 2.5:1 contrast — it fails WCAG AA's 4.5:1 minimum, and the model ships it anyway.
• Copy precision: in regulated industries, the difference between "may" and "shall" is a lawsuit. The model does not respect that distinction.
• Traceability: when something goes wrong, you need to explain why. "The LLM wrote it" is not an answer.

Sites with strong brand voice

A brand voice is what separates a memorable brand from a forgettable one. Voice lives in the diction, the rhythm, the references, the willingness to be sharp or strange. The model sands it off and defaults to the median of corporate B2B copy.

A regional craft brewery with an informal, irreverent, local-reference-heavy voice will get vibe-coded into "Welcome to [brand]. We empower craft enthusiasts to discover seamless brewing experiences." That is the opposite of the brand. That is a brand-killer.

Multilingual sites

This one is structural. A site that operates in five languages, vibe coded, produces five versions of "AI Voice", one per language. The localized content loses its distinctiveness. Native speakers identify AI-translated copy at high reliability; even when the words are technically correct, the rhythm is off.

A particular problem for international SaaS. The English version might be tolerable. The French version reads like it was machine-translated from the English vibe-coded version — because that is exactly what happened.

Accessibility-critical experiences

If your product is used by people who rely on screen readers, by people with motor impairments, by people with low vision, the vibe-coded defaults will fail them. The components are often accessible in name only: they have ARIA roles, but the focus management is broken; they have keyboard handlers, but the tab order is wrong; they have semantic HTML, but the heading hierarchy jumps from h1 to h4.

The model knows what accessibility looks like. It does not know how to implement it correctly across a real product. The gap is hidden until an actual a11y audit, at which point the cost of fixing a vibe-coded site is comparable to the cost of building it.

---

The conversion data

This is the part where it would be easy to invent stats. I am not going to.

What the public conversion-research literature, in aggregated form across 2024-2026, points to:

• Stripe-published case studies of landing-page conversion consistently show specific, branded copy outperforming generic SaaS copy, often by significant margins.
• Shopify's A/B test patterns, in their published merchant case studies, show that pages with strong hero images, distinctive value props, and credibility signals outperform pages with generic hero gradients and stock-style benefit cards.
• CRO consultancy reports point to specific failure modes that map directly onto AI-generated defaults: weak headlines, generic benefit cards, missing social proof, missing pricing context, low-trust CTAs.

The directional truth: the more your landing page looks like the AI default, the more it underperforms the curve. The exact number depends on the exact comparison. The direction does not.

Conversion observations on AI landing pages

| Observation | Pattern | |---|---| | Hero CTA click-through | Lower than designed/tested baseline, often by a meaningful margin | | Pricing-to-trial conversion | Lower; pricing pages often missing critical context (what's included, FAQs near pricing) | | Bounce rate | Higher; visitors recognize "AI site" within seconds and leave | | Time on page | Lower; less to engage with | | Brand recall | Much lower; sites are not memorable | | Qualified-lead rate | Lower; qualifications often missing from forms | | Mobile conversion gap | Wider; AI defaults often have mobile issues | | Repeat-visit rate | Lower; nothing to come back for |

These are honest observations across a meaningful sample of the AI-generated marketing-site segment. Not a controlled experiment. A directional read.

For the specific signals visitors react to in those first seconds, see How to detect an AI-generated site in 30 seconds: 21 signs.

---

What "vibe coding" actually feels like in practice

A real session, the way it actually goes. The good, the bad, and the ugly — and I mean all three.

The good (5 minutes to running site)

You open Lovable. You type:

> "Build me a landing page for an AI legal-tech startup called Lexora. Three sections: hero, features, pricing. Modern, professional design."

You hit enter. In about 90 seconds you have a deployed site. The hero is there. The features are there. The pricing is there. There is even a contact form. It works on desktop. It mostly works on mobile.

This is real. Five years ago, getting from "I have an idea" to "I have a deployed site" took a developer at least a day, often a week. Now it takes 90 seconds. The first 90 seconds of the vibe coding experience are genuinely magical.

The first time you do this, you understand why the hype was real.

The bad (you ask for "make it more unique" and get a different gradient)

Then you look more carefully. The hero is the gradient. The features section is three cards. The pricing has three tiers. This looks like every other AI site. So you type:

> "Make it more unique."

The model reshuffles. The gradient changes from from-blue-600 to-violet-600 to from-teal-500 to-violet-600. The cards get rounded-2xl. The pricing tiers swap order. Net change: zero. It is still recognizably a vibe-coded site. You try again:

> "I want this to look more distinctive, more brand-specific. Lexora is a serious legal-tech brand. It needs to feel premium, not like a generic SaaS."

The model adds a serif to the h1. The hero gets a thin border border-zinc-200. The buttons go from indigo to black. Net change: smaller. It is still, fundamentally, the same template.

This is the structural problem. The model's prior over "what a landing page looks like" is so strong you cannot prompt your way out without effectively prompting it to stop being itself. You either accept the template or replace it wholesale — and the wholesale replacement requires the design knowledge you came to vibe coding to avoid. The drift is catalogued in From AI Slop to Signature: 73 patterns, and the gradient specifically in the AI signature gradient.

The ugly (debugging the 30-line `cn()` ternary)

You decide to make a minor tweak yourself. You open the code. You find this:

<button
  className={cn(
    "inline-flex items-center justify-center rounded-md text-sm font-medium",
    "transition-colors focus-visible:outline-none focus-visible:ring-2",
    "focus-visible:ring-ring disabled:opacity-50 disabled:pointer-events-none",
    "ring-offset-background",
    variant === "default" &&
      "bg-primary text-primary-foreground hover:bg-primary/90",
    variant === "destructive" &&
      "bg-destructive text-destructive-foreground hover:bg-destructive/90",
    variant === "outline" &&
      "border border-input hover:bg-accent hover:text-accent-foreground",
    variant === "secondary" &&
      "bg-secondary text-secondary-foreground hover:bg-secondary/80",
    variant === "ghost" && "hover:bg-accent hover:text-accent-foreground",
    variant === "link" && "underline-offset-4 hover:underline text-primary",
    size === "default" && "h-10 py-2 px-4",
    size === "sm" && "h-9 px-3 rounded-md",
    size === "lg" && "h-11 px-8 rounded-md",
    className
  )}
  {...props}
/>

You did not ask for variants. You used the button once. The model imported the entire shadcn button component as a precaution. The variant === "destructive" branch will never fire. The size === "lg" branch will never fire. The cn() helper is a clsx + tailwind-merge wrapper you did not know you depended on.

You delete the unused branches. The model regenerates them on the next prompt, because the model thinks "buttons should be flexible". You did not ask for flexibility. You wanted to ship.

This is the maintenance problem, and it is the deepest one. Vibe coding produces code that is defensively over-engineered for cases you do not have, while being structurally fragile for the cases you do. The two failure modes compound.

The disciplined version, written by a human, looks like this:

// Lexora primary button. Used on hero, pricing, footer.
// One variant. One size. If we need more, we add them deliberately.
<button className="bg-lexora-ink text-white px-6 py-3 rounded-sm font-serif text-base hover:bg-lexora-ink/90">
  {children}
</button>

That is the post-vibe move: strip back to what the design actually requires.

---

The post-vibe stack

Serious teams in 2026 converged on a stack that uses LLMs without surrendering to them:

• Claude Code for scaffolding: when starting a feature, use the agentic CLI to lay out the rough structure. The output is a draft.
• Cursor for editing existing code: once code exists, Cursor's composer mode is for surgical edits. It respects existing patterns better than from-scratch generation.
• Custom design system that explicitly blocks shadcn defaults: its own button, input, card, spacing scale. The AI may use the design system's components; it may not import from shadcn/ui. Enforced via lint rules.
• Sailop or equivalent linter as design CI: a pre-commit hook or CI step that scans changed files and rendered output for AI signatures. If the gradient is the gradient, if the spacing is the spacing, if the copy is the copy, the build fails.
• Code review by humans: every AI-generated PR is reviewed, with explicit attention to drift toward defaults.
• Manual visual review: someone with design taste looks at every shipped page on staging before prod. The AI does not get the final word.

Post-vibe stack at a glance

| Layer | Tool | Role | What it blocks | |---|---|---|---| | Scaffolding | Claude Code | Initial structure | Manual repetitive setup | | Editing | Cursor | Surgical changes to existing code | From-scratch regenerations | | Components | Custom design system | Brand-consistent UI | shadcn defaults | | Lint | Sailop / design CI | AI signature detection | The gradient, the spacing, the copy | | Review | Human PR reviewer | Drift detection | Defensive over-engineering | | QA | Manual visual review | Final taste check | Aesthetic regressions |

This stack is what won. It is slower than pure vibe coding for the first week. It is much faster by month three.

For practical guardrails, see Anti-slop prompt template 2026 and De-AI your Lovable / v0 / Bolt site.

The should-you-vibe-code decision tree

flowchart TD
  A[Should I vibe code this?] --> B{Lifetime > 6 months?}
  B -- No --> C{Audience > 100 people?}
  B -- Yes --> D{Brand differentiation matters?}
  C -- No --> E[Vibe code freely]
  C -- Yes --> F{Webinar / launch / disposable?}
  F -- Yes --> G[Vibe code with human copy]
  F -- No --> D
  D -- No --> H{Regulated industry?}
  D -- Yes --> I[Do NOT vibe code. Use post-vibe stack.]
  H -- Yes --> I
  H -- No --> J{Conversion-critical?}
  J -- Yes --> I
  J -- No --> K[Vibe code with design CI on top]

---

The vocabulary shift, 2025-2026

The way the term vibe coding moved through the language tracks the way the practice moved through the market.

The trajectory

• Early 2025: "vibe coding" — neutral, slightly playful. Used by Karpathy, by builders, in marketing copy.
• Mid 2025: "vibe coding" — still mostly positive but with a faint condescension. Used by people who do not vibe code, about people who do.
• Late 2025: "vibe coded" — past participle, lightly pejorative. "Oh, that's vibe coded." A diagnosis.
• Early 2026: "this looks vibe coded" — full pejorative. A criticism.
• Mid 2026: "vibe slop" — derisive, used in design and engineering circles for the worst examples.

Term usage trajectory ("vibe coding" mentions, 2024-2026)

Illustrative, based on the directional observation across X, HN, dev newsletters, and code review comments. The exact counts are not meaningful; the shape is.

2024 Q4 |                                                  (term not coined)
2025 Q1 |####                                              (Karpathy tweet, takeoff)
2025 Q2 |##############                                    (peak hype, marketing copy)
2025 Q3 |#####################                             (peak usage, sentiment turning)
2025 Q4 |##################                                (decline begins, pejorative use)
2026 Q1 |##############                                    (now mostly pejorative)
2026 Q2 |##########                                        (declining, "vibe slop" rising)

Compare the trajectory of "blogspot" (early 2000s neutral; mid-2000s slightly cheap; late-2000s full pejorative) or "Wix template" (mid-2010s neutral, late-2010s pejorative). The shape repeats.

What this means

When a technology's origin term becomes an insult, the technology does not disappear; it bifurcates. It splits into a serious, professional segment that distances itself from the term, and a commodity segment that keeps the term as part of its commodity identity. Blogspot did not kill blogging; it made "I have a blog" mean "a real blog, on my own domain, not a blogspot". Wix templates did not kill websites; they made "I built a website" require qualification.

Vibe coding is doing the same. By late 2026, "I built it" increasingly needs qualification — "I built it" vs "I vibe coded it". The former implies discipline; the latter implies the defaults.

---

Predictions for 2027

Calling forward is dangerous, so let me be specific about what I would put money on.

1. The vibe-coding tools will split into two segments.

• Serious AI-augmented dev tools that double down on respecting design constraints, design systems, and brand voice. They will market "for teams" and price accordingly. Cursor and Claude Code are already there. v0 and Lovable will try to move up-market; some will succeed.
• Commodity slop generators that lean into "anyone can ship in 60 seconds" and accept the slop label. Cheaper, faster, more visible in consumer ads, ever-more-recognizable output. The Bolt-and-Lovable consumer tier is the natural home of this segment.

2. An "anti-vibe" segment will be a real product category.

Sailop is one example; there will be more. The pitch: "ship AI-assisted, but with design CI that catches the defaults before they hit prod". A real market, because the underlying slop-drift problem is real for every team using AI in their stack.

3. Designers and agencies will use "we are not vibe coded" as primary positioning.

Already happening in late 2026. By 2027 it will be the dominant positioning move for premium agencies. Pricing in this segment moves up — anti-vibe-coded sites become a premium tier — and the conversion data supports the price.

4. The conversion gap will widen, not narrow.

As more sites are vibe coded, the median site looks more and more the same. A non-vibe-coded site gets the lift of distinctiveness by contrast. The gap between "designed" and "vibe coded" pages will be measurable, and the pressure to invest in design will increase.

5. Karpathy himself will distance from the term.

Just as the originators of "growth hacking" eventually distanced from it once the market ground it down, my expectation is that Karpathy will, by late 2026 or 2027, write something about how the spirit of "vibes" was for hobby projects and the production-ization of the term went badly. (A soft prediction, not a hard one.)

6. The post-vibe stack will be the mainstream.

By 2027, "we use AI in our stack" will be the answer of every dev team, but the implementation will be the post-vibe stack: scaffolding + editing + design system + design CI + human review. The pure vibe-coding workflow will be the answer of hobbyists and consumer-tool users.

---

For founders and PMs reading this

You came to vibe coding because you wanted to ship faster. The honest advice for 2026:

Your decision tree

• Is your output going to be seen by more than 100 people, or live more than 6 months?

- No → vibe code freely. The cost of mediocrity is below the cost of design. - Yes → continue.

• Does your brand need to differentiate?

- No → vibe code with light human polish on copy. - Yes → do not vibe code your homepage. Use the post-vibe stack.

• Are you in a regulated industry?

- Yes → do not vibe code anything user-facing. Internal tools, fine; external, no.

• Do you have a design system, or access to a designer?

- No, and we cannot get one → either lower your ambition (vibe code an internal tool) or invest before you ship. - Yes → use AI within the constraints of the design system. Use Sailop or equivalent to enforce them.

Practical guardrails if you must vibe code something public

• Block the gradient. Whatever the model gives you, replace it with a brand color. Even a flat brand color beats the gradient.
• Replace shadcn components with your own primitives. Even simple ones. The act of replacing breaks the visual signature.
• Rewrite all copy with a human. The hero, the buttons, the empty states, the alt text. Do not ship AI copy on a public site.
• Run a slop scan before shipping. Sailop, Lighthouse, manual pixel diff against the top three sites in your category.
• Set a real review checkpoint. Someone with design taste signs off before public launch.

Do these five things and you can use AI to ship 80% faster than from-scratch while avoiding the obvious slop. That is the realistic best case for 2026 vibe-coding-with-discipline.

For the prompt template that gets you closer, see Anti-slop prompt template 2026. For the full build-it-unique walkthrough, see how to build a unique landing page in 2026 without looking AI-generated.

---

For designers and freelancers reading this

The most concrete shift in the market in 2026: vibe coding has created the largest premium-positioning opportunity for designers in a decade.

The opportunity

Every solo founder, every PM-led startup, every marketing team that shipped a vibe-coded site in 2024-2025 now has a problem. Their site looks like 600,000 other sites. Their conversion is soft. Their brand is invisible. They came in saying "I do not need a designer"; now they are quietly searching for one.

You are the answer. Your value proposition is the inversion of the vibe-coding pitch.

Positioning that works in 2026

• "We will not give you a shadcn site." Lead with the absence. Show the "before" (their vibe-coded site or a similar one) and the "after" (your work). The contrast is the entire pitch.
• "Anti-AI-slop design." The phrase is doing real work in the market right now. It signals you understand the problem, have an opinion about it, and are positioned against it.
• "Premium, distinctive, brand-specific." The opposite of AI defaults. These words map to what the market is searching for.
• Process-as-pitch. Show your design audit. Show your typography, color, spacing decisions. The fact that there are decisions, made by a person with taste, is what the market is buying.

Pricing strategies

The premium-anti-slop segment is repricing upward. Where a small-business landing page priced at low-to-mid four figures in 2023, the premium-anti-slop segment prices at low-to-mid five figures in 2026. The reason: the value gap is larger. The customer is not comparing you to a $5,000 designer; they are comparing you to a $20/month vibe-coding tool. If you can credibly produce a result that $20/month cannot, you can price for the difference.

For positioning copy, see De-AI your Lovable / v0 / Bolt site — the framing in that piece is what is selling in 2026.

Productized services

The agencies that did best in 2026 productized the anti-slop work:

• "De-vibe-ification" audit: a fixed-price scan of an existing vibe-coded site, with a report on what to change to differentiate. Anchor service, used as an entry point.
• "Brand-first landing": a fixed-scope landing page redesign with a custom hero, custom typography, custom component primitives. Replaces the vibe-coded version.
• "Design system, anti-slop edition": a small design system that explicitly blocks shadcn defaults, with documentation for the in-house dev team. Sells alongside the landing page.

The pattern: name the thing the market is anxious about, and offer to fix it specifically.

---

FAQ

Q: Is vibe coding dead? A: No. It is alive in the use cases it fits — internal tools, scratchpads, throwaways, webinar landings. It is dying in the use cases it does not — public marketing, brand-critical, conversion-critical, regulated, multilingual, accessibility-critical. The bifurcation is the story.

Q: Will Lovable still be around in 2027? A: Yes, almost certainly, but in a different form. The consumer tier continues. The team tier pivots toward "AI-assisted with design system support". The pure vibe-coding pitch is fading; the underlying capability is not.

Q: Can I vibe code a complex app? A: You can start it. You cannot maintain it. The drift compounds. By month six, the cost of having vibe coded the app is higher than the cost of having built it carefully. The most consistent finding across teams that tried.

Q: Is Karpathy embarrassed by the term? A: I will not put words in his mouth, but my read of his posting in late 2025 is that he is mildly weary of how the term has been productized. The original framing was modest; the market made it grandiose; he has not been the loudest voice using it since.

Q: Is shadcn slop? A: shadcn/ui is a fine component library. It is not slop. The slop is what happens when every site uses shadcn defaults without modification. The fault is not in the library; it is in the workflow that ships defaults. As a starting point for customization, shadcn is great. As the final answer, it is the visual signature of vibe coding. More on the mechanism in shadcn-ui and the design monoculture.

Q: Is Cursor vibe coding? A: No, in the strict sense. Cursor in agent mode can produce code the user does not read, which is vibe coding. Cursor in surgical-edit mode is AI-augmented engineering, which is the post-vibe stack. Same tool; the workflow is what differs.

Q: Is Claude Code vibe coding? A: Same answer. The tool is general; the workflow determines whether you are vibe coding or doing serious AI-augmented work. Claude Code in a real codebase, with a CLAUDE.md, a design system, and code review, is the post-vibe stack. Claude Code on a blank repo with no constraints is vibe coding.

Q: Should I tell my investors I vibe coded my MVP? A: Tell them the truth. If the MVP is throwaway, "vibe coded MVP, will rebuild" is a fine answer. If you intend the MVP to be the production code, "vibe coded" is a yellow flag for any technical investor in 2026, because they have seen the maintenance failures. Frame it as a starting point, not the finish line.

Q: Can I build a B2B SaaS by vibe coding? A: You can build a demo. You can probably build a v0.1. You will hit the wall — roughly when you land your first real customer with a real configuration. At that point the lack of structural discipline starts to bite. Plan for a rewrite, or invest in the post-vibe stack from the start.

Q: My competitor's site is vibe coded. Should I be worried? A: Probably not. If they are in a category where differentiation matters, their site is hurting them, not helping. Position against them on distinctiveness. Conversion data will be on your side over time.

Q: Are AI-generated sites bad for SEO? A: They are bad for brand SEO — queries that include your brand name. Generic AI copy ranks poorly for branded queries because there is nothing distinctive to rank. They can be okay for generic SEO — category queries — but the SERP ecosystem is increasingly hostile to obvious AI output, and answer engines prefer sources with a clear identity. On the long view, a vibe-coded site is an SEO drag. The mechanics are in Google's helpful content update and the AI slop war.

Q: How long until vibe coding is fully obsolete? A: It will not be fully obsolete; it will be repositioned. The pure form becomes a hobbyist tool by 2027-2028. The disciplined form (post-vibe stack) is mainstream now. The market keeps both, but the high-value work moves to the disciplined side.

Q: Is "AI-assisted" the same as "vibe coded"? A: No. AI-assisted is the broader category and includes serious engineering work. Vibe coded is the narrow case where the engineering is replaced by acceptance of defaults. Often confused; the distinction matters.

Q: I vibe coded my site and it is converting fine. What now? A: Keep watching. The conversion data on vibe-coded sites is, in the cases I have seen, weakest in the second six months, as the novelty wears off and users' pattern recognition matures. If you are converting fine now, you may be converting less well in a year. Plan for that.

Q: What is the single most important post-vibe move? A: Replace the gradient. If you make one change to a vibe-coded site, swap the blue-to-purple Tailwind gradient for a flat brand color or a custom palette. It is the most recognizable AI signature in 2026; removing it does more for differentiation than any other single change.

Q: Will vibe coding eventually produce sites indistinguishable from human-designed work? A: In the long run, perhaps. In 2026-2027, no. The model's training data is now dominated by AI-generated sites, which means the model is converging on its own output — an anti-improvement loop. Until the training pipeline changes, the slop gets more, not less, recognizable.

For the broader picture on this loop, see The AI slop economy 2026 and AI slop 2026: state of the AI-generated web.

---

Glossary

• Vibe coding — building software by talking to an LLM, accepting whatever code it produces, fixing only what visibly breaks. Coined by Andrej Karpathy, early 2025.
• Vibe coded — past participle, used to describe software built that way; increasingly pejorative through 2025-2026.
• Vibe slop — the worst examples of vibe coding's output. Derisive.
• Post-vibe stack — the practices that won in 2026: AI for scaffolding, humans for editing, design systems that block defaults, design CI to catch drift, human review.
• Design CI — a continuous-integration step that scans for AI signatures (the gradient, the spacing, the copy) and blocks deploys when they are detected. Sailop is one tool in this category.
• shadcn site — pejorative for a site that uses shadcn/ui defaults without customization. Synonym in practice for "vibe-coded site".
• The gradient — the Tailwind from-blue-600 to-violet-600 gradient that became the visual signature of AI-generated marketing pages. See the dedicated piece on the gradient.
• Anti-slop — the positioning, market segment, and tooling that emerged in late 2025 to counteract AI-generated sameness.

---

Sources and further reading

• Andrej Karpathy's original post on "vibe coding" — early 2025, X.
• Stratechery (Ben Thompson) on AI software economics — 2025-2026 archive.
• Ed Zitron's "Where's Your Ed At" — AI economics coverage, 2024-2026.
• Pivot to AI (David Gerard) — technical and economic critique, 2024-2026.
• Stripe published landing-page-conversion playbooks.
• Shopify A/B test merchant case studies.
• Hacker News discussions, "vibe coding" tag, 2025-2026.
• Anthropic's documentation on Claude Code, 2025-2026.
• Vercel v0.dev product pages and changelog, 2024-2026.
• Replit Agent and Bolt.new product launches, 2024-2025.

Internal links across this site:

• AI slop 2026: state of the AI-generated web
• Anti-slop prompt template 2026
• De-AI your Lovable / v0 / Bolt site
• Tailwind blue-purple gradient: the AI signature
• Detect an AI-generated site in 30 seconds: 21 signs
• The AI slop economy 2026
• From AI Slop to Signature: 73 patterns that betray AI-generated sites

---

The honest summary, in one paragraph: Vibe coding is a real tool with a narrow set of legitimate uses. Its marketing oversold its applicability; the market has, painfully, learned the limits. The post-vibe stack — AI for scaffolding, humans for editing, design systems that block defaults, design CI to catch drift, human review — is the mainstream answer in 2026. If you are a founder, vibe code your internal CRUD and not your homepage. If you are a designer, the largest positioning opportunity in a decade is sitting in front of you, labeled "the customer's previous site looks like 600,000 other sites and they are quietly looking for help". The question is not whether AI will be in the stack going forward. It will. The question is whether you use it as a discipline-augmenting tool or as a slop generator. The market, finally, is voting for the former.