Vibe-coding websites

Vibe-coding a website works when the brief is locked first. The model then generates a prototype, a simple web app, or a marketing page from copy, brand rules, and links you already decided. If the brief is a mood, the page will be a mood too: plausible, pretty, and wrong.

A locked brief is a short written artifact the generator is not allowed to invent around. It names the page's job, the audience, the primary action, the words that must appear, the words that must not, and the links that already exist. It also names what is out of scope. "A cleaner homepage" is not a brief. "Replace the hero with this headline, keep the existing nav, point the button at /pricing, do not add social proof" is a brief.

Write that artifact in a file, not only in chat. Include brand constraints you already have: voice notes, color tokens, type scale, component names, and any legal lines that are approved. Include the URLs the page may use. Include a hard list of claims that are not approved. If you do not have a claim, the brief should say so in one line, such as "no testimonials" or "no pricing."

Treat generation tools as a class, not a ranked shortlist. Cursor, v0, ChatGPT, Claude, and Copilot can all take a brief and return HTML, a component tree, or a repo-shaped draft. None of them know which claims your organization will stand behind on a public URL. That sits in the brief, or it does not exist.

If you already use AI assistants for other drafting work, reuse the same constraint habit here. Paste the brief at the top of the session. Pin it in a file the agent must read. Do not describe the page across twenty turns and hope the model reconstructs the constraints.

A page with no owner is a failure mode that starts at this step. Name the person who will review and the person who will publish. If those roles are empty, stop. Generating a public-facing page that nobody is accountable for is how invented quotes, leftover placeholder copy, and localhost URLs reach production.

Generate once the brief is locked, not while you are still arguing about the offer. Ask for a first pass you can open, click, and mark up: a local preview, a stack of files, or a single HTML document. The goal is a reviewable artifact, not a finished site.

Keep the generation prompt boring. Restate the brief. Attach existing CSS tokens, a screenshot of the current page, or the component names you already use. Tell the model to leave a visible placeholder wherever the brief has no copy. Tell it not to invent testimonials, logos, metrics, or "as seen in" rows. Tell it not to invent routes. If the brief points at /register, the button goes to /register.

The same pattern shows up in vibe scripting: the script is only useful if it runs against inputs you supplied. A website draft is only useful if every sentence maps to the brief or to an explicit blank.

Here is one pass through a typical first draft, as an illustration, not a case study. A demand-gen lead needs a one-page webinar registration page. The brief has a title, a date, three bullets from the speaker outline, a registration URL, and a note that legal has not approved any customer names. The model returns something that looks complete: a hero, the three bullets, a quote from "a VP at a Fortune 500 company," and a footer that lists the product as live at localhost:3000. The layout is close. The quote was never in the brief. The localhost string is a preview address, not a production URL. No publisher is named. That draft is what you review. It is not what you ship.

If you have AI Skills that encode brand tokens, banned claims, or a component library, load them before generation. Skills do not replace the brief. They stop the model from re-litigating spacing and tone while you are trying to get a page that cites the brief.

Regenerate only when the brief changed or the first pass ignored a constraint. Do not regenerate to chase a nicer hero if the copy is still ungrounded. You will lose the review trail and invite new invented claims.

Quality means the page cites the brief. Every visible sentence should be traceable to supplied copy, a brand rule, or a real URL. If you cannot point to the source, the line does not belong on the page.

Read the draft as a skeptic. Check the headline, buttons, navigation, licensed imagery, and whether "we" and "you" match the rest of the site.

Brand review is not a feeling. If the brief says the product is in private beta, the page cannot say it is generally available. If the brief gives one call to action, the page cannot grow a second one in the footer because the template had a slot. If the brief lists three links, those are the three links.

Click every control in the preview. A generated page often wires buttons to "#", to example.com, or to a path the model guessed from the product name. Those are not acceptable as temporary. They are wrong claims about where a person will go.

When the work is a marketing page, keep the same discipline you would use for vibe-coding slides. The page is not done because it looks like a landing page. It is done when the claims on the page match the brief you locked.

Write review notes on the draft itself: strike invented lines, label blanks, and list missing owners. Then edit. Do not start a fresh chat that only says "make it more on-brand." That prompt invites the model to fill gaps with plausible copy you never approved.

Empty stays empty if the brief has no claim. That is the quality bar.

The highest-risk failure mode is inventing a customer quote. Models fill social-proof slots because landing-page patterns include them. A quote that was not in the brief is fiction. Do not "placeholder" it with a realistic name. Do not attribute it to a role at a recognizable company. Delete the slot, or replace it with a labeled blank such as [customer quote: none approved].

The same rule covers metrics, named customers, analyst badges, and "trusted by" logo rows. If the brief did not supply them, they do not appear. A blank region is honest. A plausible invention becomes your organization's claim the moment a person publishes.

Leave structural blanks too. If legal has not approved the pricing footnote, do not generate a footnote that sounds like legal. If you do not have a product screenshot, do not ask the model to draw a fake interface and caption it as the product. Mark the gap. The next human pass fills it with real assets or keeps it empty.

Catch ownerless pages here as well. A blank owner or publisher field on the brief is a stop sign. Fill the names before you spend time polishing layout. A generated page with no owner will still look shippable, which is why it is dangerous.

If someone asks you to fill the quote box so it does not look empty, refuse. Empty is correct until a real quote is approved.

A person still publishes. Preview is not production. Treating localhost as live still happens: footer links to a local port, share tags pointing at a tunnel URL, buttons that only work on the author's machine.

Before publish, a named person confirms: the page cites the brief, invented quotes and logos are gone, every link resolves on the intended host, localhost and example.com are gone, remaining blanks are labeled, and a named person is the publisher.

A hosted preview is still a draft. Remove preview URLs from the page body. Keep the brief next to the page so the next edit does not start from a new vibe.