Vibe design: a vibe-coded site that doesn't look vibe-coded

Vibe design is designing an interface by describing the feeling you want and letting an AI tool draw it. Google gave the phrase its push in March 2026, when it rebuilt its Stitch tool around it, and it borrows from vibe coding, the habit of building software by prompting a model instead of writing code.

The method is fast, and its results look alike. A feeling names no values, so the model fills every open value with the most typical choice, and most vibe-coded sites end up in the same family. The fix keeps the speed. Let the vibe choose the direction, then write that direction down as numbers before the model starts. The rest of this guide shows how.

Where vibe coding and vibe design come from#

The parent term is about a year older. On February 2, 2025, Andrej Karpathy posted on X about a new kind of coding he called "vibe coding", where you "fully give in to the vibes, embrace exponentials, and forget that the code even exists." He was describing throwaway weekend projects. The phrase outgrew them fast, and Collins Dictionary named vibe coding its Word of the Year for 2025.

Vibe design arrived as the visual half. On March 18, 2026, Google introduced "vibe design" with Stitch, its Labs design tool. Google's framing is to start from a business objective, the feeling you want users to have, or examples that inspire you, rather than from a wireframe, and to explore many ideas quickly on an infinite canvas, by text or by voice.

In practice the term now covers any of these:

• prompting Stitch, Claude Design or Figma Make with a mood and a purpose
• vibe coding a site in Lovable, v0, Bolt, Base44 or Cursor and accepting what the first draft looks like
• iterating by feel: "more premium", "make it pop", "less corporate"

All three are reasonable ways to find a direction. They are poor ways to finish one, for the reason in the next section.

Why a vibe-coded site looks vibe-coded#

A model filling an open value picks the choice that fits the most pages of that kind. Ask for "a modern, clean SaaS site" and each of those words points at the middle of the distribution, so the middle is what comes back. The tells are consistent enough to list:

• Type: a neutral geometric sans for everything, very often Inter; our study of the defaults found it recommended on three pages of Lovable's documentation and used in four of five curated Bolt templates.
• Color: a gray on the neutral axis such as #6B7280, and frequently a blue-to-purple gradient behind the hero.
• Shape: 8px corners on buttons, cards and images alike.
• Motion: every section fading up 20px over roughly 300ms, or the framework's stock easing at about 150ms on every transition.
• Layout: a centered headline with two buttons, then three cards with icons, then testimonials, then pricing.

None of these is wrong on its own. Together they are the sound of nobody deciding, and readers have learned to hear it; the slop checklist turns them into ten checks you can run on any page.

Prompting harder does not move it. Adding "unique", "stunning" or "award-winning" stacks more adjectives on the same center, and the piece on prompting harder shows the same brief behaving differently once it is written as values instead of phrasing. A vibe tells the model which way to lean and never says how far, and "how far" is the whole design.

Here is the other end of the scale: three pages whose vibes were written down in full before anything was built.

Keep the vibe, translate it into values#

The useful move is to keep the vibe word and spell out what it means for this page. The same word can mean different things to different brands, which is exactly why the model cannot guess it.

Each row is still a vibe, and now it is one a model can build. The values in the table are illustrative; the three pages above show the same three vibes, loud, playful and edgy, taken all the way by a designer, with every value decided down to the one interaction each page is remembered for. None of them could come from the vibe word alone, and each one's exact values live in its prompt in the Thanor library.

Vibe coding prompts that carry a design#

A good vibe coding prompt for design has two layers. The top line is the vibe and the purpose, which still helps the model with every choice you did not specify, such as copy tone or how to crop a photo. Everything under it is values, in a fixed order:

VIBE: loud and sweaty, a running club that races at night. One job: join the Thursday run.
TOKENS: black #0A0A0A, signal orange #FF5A1F, off-white #F2EFE8.
TYPE: condensed grotesk, clamp(5rem, 16vw, 14rem), line-height 0.85, tracking -0.04em.
      Body 17px / 1.55, two weights.
MOTION: headline lines slam in at 120ms, cubic-bezier(0.2, 0, 0, 1), no fades anywhere.
        A band of route names runs at a constant speed under the hero. Nothing else moves.
SECTIONS: 1 hero, type only. 2 next run: date, distance, meeting point, one button.
          3 the routes as a full-width list. 4 photos in a 7/5 grid. 5 join, the button again.
MEDIA: one night photo per route, high contrast, grain kept.
REFUSE: gray, gradients, icons, testimonial carousels, rounded corners, a third color.

Tokens come first so later lines can lean on them. Refusals come last, where they stay in force to the end; in a short prompt they are often the most useful lines. The vibe line stays, because "loud and sweaty" will shape the copy and the photo crops better than any value could. For a gym, the same second section would be a class timetable with the spaces left.

The same block works in any capable tool. In Claude it goes in the first message; the Claude Design prompt guide shows the longer version. For motion beyond a single line, the website animation effects guide writes out common effects with their curves and durations.

The three things a vibe never specifies#

Palette and type are where most people start adding values, and they help. Three other decisions carry more of the difference, and a vibe never reaches any of them.

1. Motion, as mechanics. "Animated" gets you the fade. A designed page names what drives the motion (scroll position, the pointer or time), the curve and duration, and the scope: which one thing moves while the rest stays still.
2. Depth, as an order of layers. Generated heroes are usually flat, text on a background. A page that feels made often puts the subject in front of the headline, which means stating what sits on which layer and how the subject is cut out, for example a film with an alpha channel.
3. Media, as files. A vibe gets you a gradient or a stock-looking image. A designed page uses a specific film, cut-out or still, given as a file with its loop and its crop. For a hero that needs only a moving background, the animated backgrounds page has looping clips you can paste by URL or download.

That depth comes from deciding the layers before anything is built, and no vibe word gets you there. For a 3D object rather than a film, the 3D guide writes the scene, the material and the camera as values.

Where the values go in each vibe coding tool#

Every tool in the category has a place for a specification. Use it, so the values survive past the first message.

• Claude and Claude Design: the first message of the conversation, above the first request, or an imported design system for the components.
• Google Stitch: a DESIGN.md file. Its tokens cover colors, typography, spacing, corner radius and components, and it has no slot for motion, but the spec keeps sections it does not recognize, so add your own Motion section in prose. The Stitch comparison covers the format.
• Figma Make: the Guidelines.md file, which Figma's docs say Make always looks at first. The Figma Make comparison covers what else it reads.
• Lovable, v0, Bolt, Base44 and Cursor: paste the block as the first message, and keep it in a file in the project so a new conversation can start from it. The Lovable prompt guide and the Base44 guide cover those two. To see how much the wording changes from tool to tool, NightMarquee writes each of its prompts in five variants, one per tool.

The values themselves are tokens, mostly; the design tokens guide covers how to name and structure them so every tool reads them the same way.

If writing them is the part you would rather skip, that is what the Thanor library is for. Each design is a live, moving preview with a long, exact prompt behind it: the palette in hex, the typefaces and scale, spacing, easing curves and durations, the section order and every interaction, and the hosted films, cut-outs and stills the page uses. Paste it into any of the tools above. The Thanor MCP connects the library to Claude, ChatGPT or Cursor, so the assistant can search the catalog and pull a design's full art direction without the clipboard.

Mistakes that bring the default back#

Even with values in place, a few habits pull a page back to the middle:

• Correcting by vibe. "Make it pop" after a precise brief undoes the brief. Correct in the same units: "accent on the button only", "headline tracking -0.04em".
• Letting the model pick the typeface. It will pick the safe one. Name both faces and the display size.
• Asking for "animations" with no driver. Every section fades in and none of them matters. Name the one mechanism and say nothing else moves.
• Regenerating instead of editing. A fresh generation re-rolls every value you did not pin. Change one value and keep the rest.
• Dropping the brief in a new thread. A new conversation without the tokens tends to drift back toward the defaults.
• Accepting the first hero. The first draft's hero is the most typical one. Decide what the subject is, what layer it sits on and what moves it, then ask for exactly that.

The guide to making AI websites not look like AI covers the same ground from the finished page backward, if you already have a site that needs fixing.

Paste one finished design into your vibe coding tool#

Open Vesperion and copy its prompt; it is free with a free account. Paste it into the tool you vibe-code with, and keep your last one-line prompt next to it. Then compare the two first drafts: the depth of the hero, the curve on the motion, the type size, the color of the gray. That comparison shows what the values add more clearly than any explanation.

When it clicks, browse the library for a design whose vibe matches your project, from Onward and Strix to Kairosveld, and paste its art direction instead of a mood. The paid designs and the MCP come with the plans on the pricing page.