Vibe Coding: build a website and app without a developer

You'll read it in 22 minutes. You'll build your first site that same evening. And after a week of practice you'll stop flinching at the word "app" - it becomes an ordinary two-hour task.

Section 01What vibe coding is, in plain words

Andrej Karpathy - a co-founder of OpenAI - coined the term "vibe coding" in early 2025. He described a new way of working: you don't write the code by hand and you don't even look at it. You tell the AI what you want, it writes it, you run it, you see the result, and you say in words what to fix. Around and around until it's right. The "vibe" part is that you steer by feel and by how the result looks, while the AI holds the technical side.

Compare it to a home remodel. You hire a contractor and say: I want a bright kitchen, the counter right here, an outlet by the window. You don't lay the tile yourself or study brands of adhesive. You look at the result and say: shelf higher, warmer light. The contractor does it. In vibe coding the AI plays the contractor - except it works in seconds and never tires of the twentieth revision.

What "without a developer" means

It used to be that a person who knew programming languages stood between your idea and a finished site. You explained the task, they translated it into code, you waited, you paid, you explained again. The AI removed that middleman for simple and medium tasks. You explain straight to it, in plain English, in the same words you'd use with a human.

That doesn't mean developers are obsolete. For taking payments, handling medical or legal data, and projects with thousands of simultaneous users, an experienced person is still needed - we'll talk about that honestly in the limits section. But a business-card site, a landing for a service, a price calculator, a quiz, an internal tool for you and your team - all of that you now build yourself.

Who this actually helps

Vibe coding covers the needs of everyone who sells services, courses, and consulting, and who always needs a landing, or a form, or a small tool:

• Experts and coaches - a service page, a quiz to match a program, a calculator for package pricing.
• Therapists and nutritionists - an intake form, a booking page, a simple journal for clients.
• Tutors and mentors - a site with a schedule and prices, a level test for newcomers.
• Small businesses - a services showcase, a request form, an internal calculator for the team.

They all share one thing: the task is clear, the budget for a developer feels wasteful, and there's no time to wait three weeks. That's exactly where vibe coding fits.

Section 02What you can actually build in an evening

Let's be honest about what comes together fast and what takes a few passes. These estimates are from practice, for a first-timer working through Claude.

The top five rows are the zone where you'll manage on your own, on the very first evening. The bot is a bit harder, because it has to run somewhere around the clock (more on that in the publishing section). But anything that touches taking money and storing people's personal data is best not thrown together with vibe coding. The reason is simple: the cost of a mistake is other people's money and other people's privacy.

One key idea up front. Don't try to build a whole big project at once. Build a small working version, show it to people, watch the reaction, then expand. The AI is great at growing a project piece by piece, and that's far more reliable than a heroic attempt to do everything in one sitting.

Section 032026 tools: what to build with

There are a lot of tools, and that paralyzes beginners. Let's simplify. To start, one is enough - Claude. The rest come in handy later, when you want more. Here's the lay of the land so you know what's for what.

My advice for the first evening - start with Claude artifacts. Open a chat, write "build a price calculator for my service," and ten seconds later a working calculator appears on the right that you can click around. It's the best way to feel vibe coding with your hands, installing nothing.

When you want a real multi-page site or a bot, move to Claude Code. It's the same Claude, only it works with a project folder on your computer: it creates files, edits them, runs them. There's a full step-by-step walkthrough in the piece on Claude Code for non-coders - install and all.

Section 04Setting up Claude

Claude is the main tool in this guide, and getting set up takes a few minutes. Here's the order.

If this is your very first time with AI at all, start with the piece on what you can do with AI, and a full walkthrough of Claude itself is in the guide learn Claude from scratch. From here on I'll assume you already have access.

Stage 01Build a business-card site in 20 minutes

Let's start with the simplest and most common thing - a one-page business-card site. Who you are, how you help, your services, testimonials, a booking button. We'll walk through it on a live example, as if you're a therapist. Swap in your own niche - the steps are the same.

The first line sets everything

Open Claude and write something like this. Don't be afraid of a long message - the more specifics, the fewer revisions later.

Build me a one-page business-card site. I'm a therapist,
I work with adults, and I specialize in anxiety and burnout.

I need these blocks in order:
1. Hero: my name, the line "Therapist. I help you handle
   anxiety and get your energy back," and a "Book a session" button.
2. About me: 4-5 sentences, education, 8 years of practice,
   400+ clients.
3. What I work with: a list of 6 concerns as tiles.
4. How it works: 3 steps - request, session, plan.
5. Testimonials: 3 cards with a name and text.
6. Contact: a "Message me on Telegram" button and email.

Calm style, warm beige and green tones,
large readable type. The "Book a session" button
links to my Telegram t.me/yourhandle.
Make it as an artifact so I can see the result.

A few seconds later a finished site appears on the right. With blocks, buttons, spacing. You can scroll and click it. It's already a working page, not a picture.

Next - edits by talking

Look at the result and say what to fix. One edit per message, so it's easier for the AI not to break the rest:

• "The hero is too washed out - make the background a bit richer and add my photo on the left."
• "Put the concern tiles in two columns; they're too narrow right now."
• "The Book button gets lost - make it bigger and green so it stands out."
• "Add a small line at the bottom about the privacy policy."

Claude applies each edit and shows the updated site. You never touch the code - you just look and comment, like a client with a designer. In 15-20 minutes of lines like these, the page gets to "ready to show people."

A finished site from an artifact can be downloaded as a single file and put online - more on that in the publishing section below. For now, the point is to feel the rhythm: say it, see it, fix it.

Stage 02A landing with a request form

A business-card site is a static page: you look and leave to Telegram via the button. A landing for a service usually wants more - a form where a person leaves their name and phone, and you get the request. Here's the first technical wrinkle, explained without scary words.

Why a form is trickier than it looks

The form on the page comes together in a minute - three fields and a button. The real question is where the data goes when someone hits "Submit." A page on its own can't send you messages - it needs a helper on the side that catches the request and forwards it to you. That helper is called a backend. The good news: for a simple form you can also build it with vibe coding or plug in a ready service.

Three working paths, from simple to advanced:

For a first landing I recommend Path 1. A request in Telegram is an instant notification on your phone - you won't miss a hot lead. When the flow grows, add the sheet.

Stage 03A mini-app: calculator and quiz

"App" sounds scary, but in practice it's often a small interactive tool that calculates or matches something. The two most useful for anyone who sells services are a price calculator and a quiz matcher. Both come together as an artifact in half an hour to an hour.

Price calculator

A person picks options, the app shows the price. It kills the eternal "so how much is it" and gently nudges toward a request. The prompt:

Build a price calculator for my services as an artifact.

I build websites. Parameters:
- Type: business-card ($200), landing ($500),
  multi-page ($1,000) - pick one.
- Rush: normal (+0), within a week (+30%) - a toggle.
- Copywriting: myself (+0), done for me (+$100) - a checkbox.

Show the total large at the bottom; it recalculates
instantly on any change. Under the total, a button
"Leave a request" linking to t.me/yourhandle.
Clean, light design, large buttons.

The finished calculator appears on the right, the numbers add up on the fly. Then you refine it with lines: "add a third parameter - number of pages," "also show the total split into 3 monthly payments." A calculator like this later embeds into a site or lives at its own link.

Quiz matcher

A quiz walks a person through a few questions and, at the end, hands them a recommendation - which package or program fits. It pulls people in more than a static page and gently collects contacts. The logic goes in the prompt: 4-5 questions, each with 3 answer options, ending in one of three results and a booking button. Claude builds all the screen-to-screen logic itself; you just supply the questions and options.

Section 05How to talk to the AI

Here's the main secret. The result of vibe coding is 80% about how you frame the task. The same AI turns a vague request into a lopsided draft, and a precise one into a nearly finished product. Here's the formula I use to set tasks.

Compare two requests and feel the difference.

Framing tasks for an AI is a skill of its own, and it pays off anywhere you work with AI. A full breakdown with a five-part formula and before-and-after examples is in the piece how to write prompts. Read it right after this one - the quality of your builds will jump noticeably.

Section 06How to put your project online

You've built a site or app - now people need to see it at a link, not just you in the chat. The method depends on what you built.

A static site or single-page app

A business-card site, a landing, a calculator, a quiz - these are a single page that works on its own, without a server. You publish it to a free host in five minutes:

• Netlify or Vercel - drag in the file, get a link. Free, fast, no card.
• GitHub Pages - a few more steps, but free forever and reliable.
• Cloudflare Pages - another solid free option that scales without fuss.

Claude will walk you through the steps of whichever option you pick, if you ask: "explain step by step how to publish this site on Netlify." Separately, buy a domain like your-name.com for about $15 a year - and the link looks legit.

An app or bot that has to run around the clock

It's a different story if you built a Telegram lead bot or a service that calculates and answers clients on its own at any hour. That needs a computer that's always on - your home machine won't do, it powers off and loses the connection. For that, you rent a server in the cloud (a VPS). It's the same kind of computer, just in a data center, running without weekends off.

If this is your first bot, don't let the word "server" scare you. Claude Code can deploy the project to a rented server on your command, in plain words. The full path is in the piece on Claude Code for non-coders.

Section 076 beginner mistakes

Almost everyone steps on these rakes on their first builds. Knowing them in advance saves you hours.

1. Asking for everything at once. "Build me a site with a member area, payments, a client database, and a newsletter" - the AI hands back a mush where nothing really works. Build one piece at a time and check each.
2. Vague edits. The AI reads "make it prettier" however it likes. Be concrete: "increase the spacing between blocks and make the headings bigger."
3. Not testing the result by hand. A pretty form that sends requests nowhere is a classic. Test every button and form yourself before showing people.
4. Storing other people's data carelessly. The moment you build something people type phones and emails into, you're responsible for keeping it safe. Don't drag that onto random services; add a privacy line.
5. Losing the version that worked. Sometimes an edit breaks what was already good. Ask Claude to "restore it to before the last change," or save good versions separately by copying the file.
6. Quitting halfway. The first site rarely comes out perfect in one pass. That's normal. Three or four evenings of practice and you'll build things like this calmly and fast.

Section 08Limits: what to leave to a developer

An honest talk, without which this article would be a con. Vibe coding covers a lot, but not everything. There are zones where the cost of a mistake is high, and there it's better to call in someone experienced.

• Taking payments. The moment other people's money flows through your site, you need real protection and a correct link to a payment system. For accepting payments, use a proven service (for example, the breakdown of accepting online payments), not a homemade form.
• Sensitive data. Medical records, IDs, legal documents. A leak of data like that is a liability that can reach fines. Here you shouldn't go without a security specialist.
• Heavy traffic. If you expect thousands of people at once, a homemade build may not hold. For a project like that, an engineer designs the architecture.
• Complex logic with clients' money. Exchanges, wallets, accounting. An error in the math hits other people's finances - a professional should check it.

A good strategy is to build a working prototype with vibe coding, show it to people, confirm the idea has legs, and only then invest in a developer for the serious version. That way you don't pay $3,000 to test a hypothesis you could check yourself in an evening. A prototype in hand also makes the developer's work cheaper - they don't have to guess what you wanted, they see a finished example.

Section 09Launch checklist

Run through this list when you build your first project. It keeps you in a working rhythm and stops you from getting stuck.

1. Decided what I'm building: a business-card site, a landing with a form, or a mini-app.
2. Signed up for Claude (with a VPN and a supported region if needed).
3. Wrote a strong first prompt: context, blocks as a list, style, "make it an artifact."
4. Refined the result one edit per message, without breaking what worked.
5. If there's a form - wired request intake to Telegram or a sheet and checked it with a live send.
6. Tested every button and link myself.
7. Published: a static page to a free host, a bot or 24/7 service to a rented server.
8. Bought a domain if I want a professional link.
9. Added a privacy line if I'm collecting other people's data.
10. Showed it to real people and gathered the first feedback.