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 in a file that does not use it. The hero gradient is the one. 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 has 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, and 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 that 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 bake 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". The community ran with it. By March 2025, "vibe coding" was a tag on Hacker News, a meme on X, a section in every developer newsletter.

The original framing from Karpathy was modest. He was talking about throwaway personal projects, the kind of thing a hobbyist would build over a Sunday. Within weeks, the term had been borrowed by a broader audience: SaaS founders, PMs, marketers, students, the "build in public" crowd. The framing morphed. 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 of vibe coding, 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 vibe coding is loaded now. Some people use it to mean "AI-assisted development", which is a much broader category that includes serious engineering work. Others use it as a synonym for "slop". In this article, I am going to 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. I am going to walk through, 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, looking honestly, is that you got 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. The product is 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 appear arguing that "you cannot vibe code production software". They are dismissed by the optimists.

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". The 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 missing WHERE clause in a generated DELETE query. The piece is shared widely.
• Cursor agent mode matures. Serious engineers are now using 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 that the AI-generated software economy will hit a saturation point similar to the App Store mid-2010s: too many apps, too few that 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. There are others. 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

Let's talk about money. 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 |

(These are approximate tiers from public pricing pages over 2025-2026; tools change pricing often. The shape — free + ~$20 consumer + ~$50 team — is the consistent pattern.)

Where the marketing breaks vs reality

The marketing claim: "ship in 5 minutes". This is 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". This is technically true and operationally false. Within an hour of building a non-trivial app, you will be reading code. Within a day, you will be debugging it. Within a week, you will be in the weeds of why a particular component was generated with a useEffect that fires on every render.

The marketing claim: "infinitely scalable". This is the place where the term vibe coding breaks hardest. The codebase that 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 you had been handed 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 cases that have been documented, is not small — directionally it is in the high tens of percent range, not "a little worse". I am not going to give you a precise number because the precise number depends entirely on what you are measuring and the comparison set is messy. But the direction is clear.

Who actually pays, and why

The buyer profile that the vibe-coding tools acquire most cheaply is:

• 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 to show 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 a team of five 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. You want a tiny tool that you and only you will ever use. Vibe code it. Read whatever code you want to read. 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 is going to remember the page.

The reason it works: the cost of design polish exceeds the value over the page's lifetime. If you spend a week designing a landing that lives 14 days, 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.

Throwaway prototype to test a flow

You have an idea. You want to know if the flow makes sense before you commit to building 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 is better than Streamlit, ships in less time than learning Dash, and is good enough for internal review.

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

---

Where vibe coding fails

This is the longer list. It is the list that explains why the term "vibe coded" became an insult. Each of these failure modes 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 we saw it ship 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 Tailwind blue-purple gradient 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 that uses these defaults is a site that 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.

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

Designer / agency portfolio (the irony)

I have, in the last six months, 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 have started showing pricing — is the three-tier table.

This is professional malpractice. The whole point of a designer's portfolio is to demonstrate that you can produce something that does not look like everything else. Shipping a vibe-coded site as a designer is the equivalent of a chef serving you instant ramen at a tasting. It does not work. 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 has become a real value prop.

Sites needing measurable conversion

Every CRO finding from the last decade — from Stripe's published landing-page-conversion playbooks, from Shopify's A/B test patterns, from 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. The model knows what a SaaS landing page looks like in aggregate. Aggregate is the median. The median is not what wins.

A vibe-coded pricing page, in the cases I have personally observed, underperforms a designed-and-tested pricing page. Sometimes by a small margin. Sometimes by a large margin. The margin depends on whether the original baseline was good or bad. But the directional finding has been consistent: AI defaults are not CRO-optimized; they are aesthetic-optimized.

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 that a model produces is a snapshot, not a foundation. Each new feature you ask for, 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. By month six, it has six. 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. The cost is visible at month nine, when the team that vibe-coded the original is now spending 60% of their time on maintenance instead of 20%.

Anything in regulated industries

If you are building software in legal, finance, health, education, or any other 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. That is fatal in regulated work.
• Accessibility: the model's defaults are decorative, not accessible. ARIA attributes are added performatively. Color contrast often fails WCAG AA.
• 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 be able 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 is in the diction, the rhythm, the references, the specificity, the willingness to be sharp or strange. The model sands voice off. The model defaults to the median of corporate B2B copy in 2024.

If your brand is, say, a regional craft beer company with a distinctive voice — informal, irreverent, full of local references — vibe coding your site will translate that voice 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. If you have a site that operates in five languages, vibe coding it produces five versions of "AI Voice", one per language. The localized content loses its distinctiveness. Native speakers of the target languages can identify AI-translated copy at high reliability; even if the words are technically correct, the rhythm is off.

This is 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 is a mess.

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 you do 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

Let me be careful here, because this is the part where it would be easy to invent stats. I am not going to.

What I will say is what the public conversion-research literature, in aggregated form across 2024-2026, points to:

• Stripe-published case studies of landing-page-conversion improvements consistently show that specific, branded copy outperforms generic SaaS copy, often by significant margins.
• Shopify's A/B test patterns, as discussed in their published merchant case studies, show that landing 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, in the aggregated form they publish for marketing purposes, consistently 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 is clear: the more your landing page looks like the AI default, the more it underperforms the curve. The exact number depends on the exact comparison. But the direction is consistent.

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. They are not a controlled experiment. They are the directional read.

For more on specific signals to look for, see How to detect an AI-generated site in 30 seconds: 21 signs.

---

What "vibe coding" actually feels like in practice

Let me walk through a real session, the way it actually goes. I am going to be honest about all three phases: the good, the bad, the ugly.

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. This is not nothing. 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, and anyone who tells you otherwise has not actually used these tools.

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 at the output more carefully. The hero is the gradient. The features section is three cards. The pricing has three tiers. You think: this looks like every other AI site. So you type:

> "Make it more unique."

The model reshuffles. The gradient changes from blue-purple to teal-purple. The cards get rounded corners. The pricing tiers are now in a slightly different 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 slight serif font to the H1. The hero gets a thin border. The buttons are now black instead of indigo. 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 that you cannot prompt your way out of it without effectively prompting it to stop being itself. You have to either accept the template or replace the template wholesale, and the wholesale replacement requires actual design knowledge that you came to vibe coding to avoid.

For more on this drift, see From AI Slop to Signature: 73 patterns that betray AI-generated sites and Tailwind blue-purple gradient: the AI signature.

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. There is a variant === "destructive" branch that will never fire. There is a size === "lg" branch that will never fire. There is a cn() helper that you do not understand.

You try to 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 have. 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. Stripping 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. The shape:

• Claude Code for scaffolding: when starting a new 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 the existing patterns better than a from-scratch generation.
• Custom design system that explicitly blocks shadcn defaults: the design system has its own button, input, card, spacing scale. The AI is allowed to use the design system's components; it is not allowed to import from shadcn/ui. This is enforced via lint rules.
• Sailop or equivalent linter as design CI: a pre-commit hook or CI step that runs an AI-signature scan over the changed files and the rendered output. If the gradient is the gradient, if the spacing is the spacing, if the copy is the copy, the build fails. This is what Sailop does.
• Code review by humans: every AI-generated PR is reviewed by a human, with explicit attention to drift toward defaults.
• Manual visual review: someone with design taste looks at every shipped page on staging before it goes to prod. The AI does not have 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.

Mermaid: 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

This is the small meta-story that tells the bigger story. 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, used by builders, used in marketing copy.
• Mid 2025: "vibe coding" — still mostly positive but now 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.

ASCII bar chart: term usage trajectory ("vibe coding" mentions, 2024-2026)

This is 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 this to 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 itself 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 just made "I have a blog" mean "I have 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" will increasingly need 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; 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 themselves as "for teams" and price accordingly. Cursor and Claude Code are already in this segment. v0 and Lovable will try to move up-market here; some will succeed.
• Commodity slop generators that lean into the "anyone can ship in 60 seconds" pitch and accept the slop label. They will be cheaper, faster, more visible in consumer ads, and will produce ever-more-recognizable output. The Bolt-and-Lovable consumer tier is the natural home of this segment.

2. An "anti-vibe" segment will emerge as 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 make it to prod". This is a real market because the underlying problem is real: every team that uses AI in their stack faces the slop-drift problem.

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

This is already happening in late 2026. By 2027 it will be the dominant positioning move for premium agencies. Pricing in this segment will move up — anti-vibe-coded sites will be a premium tier — and the conversion data will support 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. The CTR on a non-vibe-coded site, by contrast, gets the lift of distinctiveness. The gap between "designed" and "vibe coded" landing pages will be measurable and the pressure to invest in design will increase, not decrease.

5. Karpathy himself will distance from the term.

Just as the original creators of phrases like "growth hacking" eventually distanced from those terms once they had been ground down by the market, 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. (This is 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 (use vibe coding for an internal tool) or invest before you ship. - Yes → use AI within the constraints of the design system. Use Sailop or equivalent to enforce the constraints.

Practical guardrails if you must vibe code something public

• Block the gradient. Whatever the model wants to give you, replace it with a brand color. Even a flat brand color is better than the gradient.
• Replace shadcn components with your own primitives. Even if the primitives are simple. 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.

If you do these five things, you can use AI to ship 80% faster than from-scratch and avoid 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 designers and freelancers reading this

This is 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 that you understand the problem, you have an opinion about it, and you are positioned against it.
• "Premium, distinctive, brand-specific". The opposite of AI defaults. Use these words; they map to what the market is looking for.
• Process-as-pitch. Show your design audit. Show your typography decisions. Show your color decisions. Show your spacing system. 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 in 2026. Where a small-business landing page might have priced at low-to-mid four figures in 2023, the premium-anti-slop segment is pricing at low-to-mid five figures in 2026. The reason: the value gap is now 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 the $20/month tool 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. Specific examples:

• "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 fit — 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 will continue. The team tier will pivot 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. This is the most consistent finding across teams that tried.

Q: Is Karpathy embarrassed by the term? A: I would 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; the fault is in the workflow that ships defaults. Used as a starting point for customization, shadcn is great. Used as the final answer, it is the visual signature of vibe coding.

Q: Is Cursor vibe coding? A: No, in the strict sense. Cursor in agent mode can produce code that the user does not read, which is vibe coding. Cursor in surgical-edit mode is AI-augmented engineering, which is the post-vibe stack. The tool is the same; 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, with a design system, with 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 as 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. The wall is approximately when you have your first real customer with a real configuration. At that point, the lack of structural discipline starts to bite. Plan for a rewrite at that point, 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 — search 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 — search queries about the category — but the SERP ecosystem is increasingly hostile to obvious AI output, and the answer-engine ecosystem (the AI search overlays) prefers sources that have a clear identity. A vibe-coded site, on the long view, is an SEO drag.

Q: How long until vibe coding is fully obsolete? A: It will not be fully obsolete; it will be repositioned. The pure form will be a hobbyist tool by 2027-2028. The disciplined form (post-vibe stack) is the mainstream now. The market will keep 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. The terms are often confused; the distinction is important.

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 the pattern recognition by users 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, replace the blue-to-purple Tailwind gradient with a flat brand color or a custom palette. The gradient 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 reason is that the model's training data is now dominated by AI-generated sites, which means the model is converging on its own output. That is an anti-improvement loop. Until the training pipeline changes, the slop will get 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, and fixing only what visibly breaks. Coined by Andrej Karpathy, early 2025.
• Vibe coded — past participle, used to describe software that was built that way, increasingly pejorative through 2025-2026.
• Vibe slop — the worst examples of vibe coding's output. Derisive.
• Post-vibe stack — the set of 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 blue-to-purple gradient that has become 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 will use it as a discipline-augmenting tool or as a slop generator. The market, finally, is voting for the former.