Vibe coding: from idea to deployed project

What Vibe Coding Is

Andrej Karpathy (OpenAI co-founder, former head of AI at Tesla) defined the term on 6 February 2025 in a single post:

“There's a new kind of coding I call “vibe coding”, where you fully give in to the vibes, embrace exponentials, and forget that the code even exists. […] I “Accept All” always, I don't read the diffs anymore. When I get error messages I just copy paste them in with no comment, usually that fixes it. […] I'm building a project or webapp, but it's not really coding — I just see stuff, say stuff, run stuff, and copy paste stuff, and it mostly works.”

Simon Willison (co-creator of Django) drew the line between that and real work:

“If an LLM wrote the code for you, and you then reviewed it, tested it thoroughly and made sure you could explain how it works to someone else — that's not vibe coding, it's software development.”

In October 2025 he coined a name for the disciplined version: vibe engineering — “seasoned professionals accelerate their work with LLMs while staying proudly and confidently accountable for the software they produce”. This guide teaches that: the agent writes the code, you stay accountable for the result.

How an Agent Works

A coding agent is not a chat window that suggests code. It is a program that reads your files, edits them, runs commands, and reads its own errors — in a loop, until the task is done:

That loop is why the method is useful. The model does not guess what would work — it runs it and sees.

What You Can Build and What You Cannot

This is the most important section on the page. Follow it and the method pays off; ignore it and you will lose time or ship something unsafe.

An Example That Shows the Difference

FibreCalc is a steel-fibre calculator for concrete: from slab area or volume it computes fibre mass, boxes, pallets, and cost under EN 14889-1. It was built with a single prompt. It saves its author roughly ten manual calculations per project.

Why it works: the task has a clearly defined input, a known formula, and a verifiable output. No user accounts, no database, no personal data. You can check the result with a pencil. That is exactly the kind of task where this method pays best.

The counter-example: the same page with customer logins, saved quotes, and payment would need a security review the model does not reliably perform. The first version would probably work. That is precisely the danger.

Where the Limit Shows in Practice

The Stack Overflow 2025 survey names the same problem most often — 66% of developers cite solutions that are “almost right, but not quite”. That is why verification is part of the method, not an add-on. Who verifies determines the scope: for an internal tool it is enough that you check the output; for a public product you need someone who can read the code.

What People Build

Analyses of Reddit posts (r/vibecoding, r/ClaudeAI, r/ChatGPTCoding) show most of the activity around internal tools, prototypes, landing pages, and personal projects — not large products. The most-mentioned tools are Claude Code and Cursor; a common route is a fast prototype in a browser tool (Lovable, Bolt), then a move to Claude Code or Cursor for serious work (mention analysis).

Karpathy Builds a Full Web App

The author of the term used the method to build a real app, MenuGen: “You take a picture of a menu and it generates images for all the menu items.” He is not a web developer; Cursor and Claude wrote the code. His write-up is more useful than the app:

“I didn't even spend all that much work in the code editor itself. I spent most of it in the browser, moving between tabs and settings and configuring.”

The lesson: writing code is no longer the bottleneck. The bottleneck is glue work — auth, payments, keys, domains, settings. The model cannot do that for you, because it needs your account and your decision.

Simon Willison's 227 Tools

Willison publicly maintains tools.simonwillison.net: 227 small web tools, nearly all built with an LLM. The most instructive part is the colophon: each tool lists its commit messages, and many link to the full transcript of the conversation with the model. The code is open on GitHub. If you want to see how something was actually made, this is the best free material available.

The Official Use-Case Catalog

For non-coding tasks, the use-case catalog by role (engineering, data, research, marketing, finance, HR, legal) beats guessing. Examples such as “Build a daily briefing across your tools”, “Analyze patterns in user feedback”, and “Forecast & scenario modeling” come with concrete steps.

The Author's Projects

A mechanical engineer built all of these (not a professional programmer), mostly with coding agents. The links are live — open and try them.

FibreCalc — A Calculator That Paid for Itself in an Hour

fibrecalc.com · From concrete slab area or volume it computes steel-fibre mass, box and pallet counts, and cost, under EN 14889-1. Works with no login and offline. Translated into four languages.

Built with one prompt. It replaces about ten manual calculations per project. The telling detail: the task was fully specified before any writing — the formula is known, the inputs are numbers, the output is verifiable.

Clay Studio — Generative Design for Clay 3D Printing

gcode.pages.dev · Parametric vessel design: diameter, height, and wall waviness are set with sliders, and the tool emits G-code — the command language a printer reads directly. Targets the large Delta WASP 40100 clay printer.

Interesting because the output is not a web page but a physical, kiln-fired object. A bug shows up as a collapsed vessel, not a console message.

DK Lab — Eight Tools, One Afternoon Each

claudeartifacts.pages.dev · A collection of small web apps: phone sensor access, image transfer over WebRTC (a direct browser-to-browser connection), language and reference tools.

Practical proof of the scope argument: eight useful small things are easier and more rewarding than one big product.

Board Game Rules — Rules Behind a QR Code on the Box

boardgamerules.pages.dev · A bilingual rules archive for 24 remade board games. Each box carries a QR code that opens its own rules. The digital part is tied to physical fabrication — rules, print, and box are one project.

Ljubljana Bulletin — A Daily That Publishes Itself

ljubljana.pages.dev · A tourist bulletin styled like an old newspaper. It scrapes events from selected sites, curates them, and publishes every day with no manual step.

It grew from a single prompt — printed in Ways of Working. The best example of a scheduled task becoming a standalone product.

Nightona US&A — An Arcade Racing Game

nightona.pages.dev · Browser racing on Three.js (3D graphics in the browser): a banked oval, procedurally generated tracks, AI drivers. Construction started with one car and a lap timer; traffic was added in batches while measuring frame rate.

A textbook case of incremental building: the hardest part first (driving that feels good), scope second.

TileGroove — An Instrument Made of Printed Tiles

tilegroove.pages.dev · A camera detects printed markers (computer vision); the tile type selects a loop or effect, while its position, rotation, and occlusion shape the sound in the browser.

A good school for agent work, because the feedback loop is immediate: move a tile and you hear at once whether the code works.

ScalePrint AR — True-Scale Print Preview

view3d.pages.dev · Load an STL or 3MF file and place it in the room at true scale through WebXR (augmented reality in the browser). It answers “will this even fit through the door” before you spend filament.

Triviador — A Pub-Quiz Platform

triviador.pages.dev · A question bank and synchronized sub-quizzes running on static hosting — no server, no database. An example of a constraint producing simplicity and zero cost.

XIANO — A Synthesizer With a Custom Board

GitHub · A compact electro-mechanical synthesizer. A custom PCB with a capacitive keyboard — the keys sense touch through a change in capacitance, with no mechanical switches. The firmware runs on a Seeed XIAO microcontroller.

It shows the agent is not limited to the web: it also writes code for reading sensors and generating audio in real time on a device with a few kilobytes of memory.

Marine Aid — Safety at Sea With One Camera

GitHub · A system on a Raspberry Pi that monitors a vessel's surroundings with a single camera. The image is processed by segmentation (single-camera segmentation) — each pixel is assigned a class (water, shore, vessel, obstacle) — and alerts follow from that.

The most demanding project in the set: hardware, computer vision, and alerting in one. Also the clearest case of an internal tool, where you are the user, the tester, and the responsible party.

At Work

All of these fall into the categories documented by Claude Academy: data, engineering, research, automation, metrics.

• Building other people's software. The agent downloads an open-source tool, compiles it, and adds your patch. Work that used to mean a week of reading someone else's build instructions.
• Firmware. “Have an ESP32 read a sensor every 10 s and save the data to CSV” is routine, pinout included.
• Literature review. Screening, extracts of methods and results, comparison tables with citations. Open and check the citations.
• Measurements and reports. A script cleans raw CSVs, plots charts, and drafts a commentary. You approve the conclusions.
• Scripts for small chores. Renaming 400 files by pattern, merging PDFs, Excel formulas and macros, format conversions.
• Single-purpose apps. A tally counter for counting events during a measurement, a sample-entry form, a protocol timer. Half an hour of work.
• Metrics. A script reads the weekly export and plots the KPIs on one page.

Tools the agent already knows: DuckDB (analytical SQL over local files, no server), Polars or pandas for tables, Jupyter for exploration, Streamlit for a colleague-facing interface.

Getting Started: Three Decisions

This is the shortest path from nothing to a first working result. Everything else in this guide is detail attached to these three steps.

1. Choose a Provider

   Test ChatGPT, Claude, and Gemini on three or four of your own tasks: one writing task, one data task, one document or screenshot, and one small coding task. Use the free tiers.

   Pick the one whose answers you most often keep without major repair. Do not decide by leaderboards — see Choosing a Model.

2. Choose a Way of Working

   For questions and short transformations, use chat. For a task across several files, Work/Cowork. For a project that must be edited and run, a coding agent. For recurring chores, a schedule.

   Detail in Ways of Working and Tools.

3. Start the Work

   Write clearly what you want and how. This is the one skill you actually have to master. A good first request answers four questions:

   • What it should do — the function, in one sentence.
   • What goes in and what comes out — inputs, outputs, units, formats.
   • How it should look and behave — no login, works on a phone, works offline.
   • What it must not do — no database, no external libraries, no user accounts.

   An example of such a request — this is how FibreCalc was made:

   Build a web calculator for steel fibres in concrete.
   
   Input:  slab area (m2) or volume (m3), thickness,
           dosage (kg/m3), box mass, price per kg.
   Output: total fibre mass, number of boxes, pallets, total cost.
           Recalculate live, no "calculate" button.
   
   One page, no login and no database.
   Must work on a phone and offline.
   Use EN 14889-1 naming.
   Round the box count up to a whole box.

   Then verify the result. For a calculator, work one case out by hand. For data processing, compare a few rows against a known answer. If you cannot verify the output, the task is not specified correctly yet.

Free official courses, if you prefer guided teaching: Claude Academy (Claude 101 → Claude Code in Action), OpenAI Academy, Google AI Essentials, GitHub Skills.

Ways of Working and Tools

You reach the same model through four different interfaces. The interface affects the result more than the model does.

Why a Local Agent Is Different

Claude Code and Codex are programs you run in a terminal, inside your project folder. That is not a cosmetic difference:

• It sees the real files. No guessing from a description — it reads what you actually have.
• It runs your commands. Builds, tests, scripts. And it reads what they return.
• It fixes its own errors. The loop runs without you until the check passes.
• Your data stays with you. Only what the agent actually reads goes to the cloud, not the whole folder.
• It works with Git. It sees history, creates commits, compares versions.
• It is included in the subscription. You do not pay extra — see Subscription vs API.

Anthropic recommends giving the agent a check it can run itself — a test, a build, a screenshot to compare: “It's the difference between a session you watch and one you walk away from.” (Claude Code best practices)

Skills

When you no longer want to paste the same instructions into chat, save them as a skill: a folder with a SKILL.md file where the procedure is written once. The agent uses it when relevant, or you invoke it directly with /skill-name.

The advantage over putting everything into CLAUDE.md: a skill's body loads only when used, so long reference material costs nothing until you need it (documentation). Typical skills: a release procedure, a review checklist, house style rules, a report format.

A Scheduled Task With No Code

The fastest payoff for someone who does not program. You just describe the task — bluntly:

every day at 8.00 search bolha for e-mtb and give me a curated list
of current best offers, what makes them stand out and what I should
be careful about and how they compare to other current and past offers

The pattern works for Bolha, Avto.net, property portals, tenders, and flight prices. The second real prompt, which produced Ljubljana Bulletin:

create a retro-looking ljubljana bulletin for tourist in style of
new york times that scrapes events from xx.dsd, yy.com, ztz.com websites,
curates them and publishes them daily

Anthropic gives developers the same advice: “find the simplest solution possible, and only increasing complexity when needed” (Building effective agents). Build an application only once a scheduled task is no longer enough.

Choosing a Model

Do not choose by benchmarks. Build a test set from work you actually do and compare the outputs. The differences below summarize published comparisons and community experience.

The Big Three in Practice

Which Model Tier

Every provider has three tiers. The price gap between them is fivefold or more:

• Fast/small model (Haiku, mini) — summaries, classification, simple conversions. Too weak for code.
• Default model (Sonnet, main GPT, Gemini Pro) — this is where the large majority of users get their work done. Start here and stay until you have a reason not to.
• Frontier model (Fable/Opus, Deep Think) — large migrations, hard reasoning, tasks where the default fails repeatedly. Considerably slower; on a subscription it burns limits about five times faster.

The Full Market

Prices: EU, August 2026, approximate and excluding VAT. Open the linked pricing page before you pay.

Task-specific tools: Perplexity (cited search; open and check the citations), NotebookLM (answers strictly from uploaded sources), Elicit and Consensus (academic literature), Lovable and Bolt (browser prototypes, nothing to install).

Subscription vs API

The most expensive beginner mistake is not picking the wrong model. It is paying API rates for work that belongs on a subscription.

A common misconception: “I pay for ChatGPT Plus, so my integration is free.” It is not. These are separate accounts and separate bills. A subscription does not cover the API.

Another: “Claude Code costs extra.” It does not — Claude Code and Codex run within the ordinary subscription (Pro, Max, Plus). That is exactly why a subscription is the right answer for most people.

The Context Window

If you take away one technical idea from this guide, make it this one. Nearly every best practice follows from a single constraint:

“Most best practices are based on one constraint: Claude's context window fills up fast, and performance degrades as it fills.”

The context window is everything the model considers at once for the current task: your messages, its replies, the contents of files it read, and command output. It is measured in tokens — chunks of text, roughly three quarters of a word.

It is not memory that clears itself. During a conversation it only grows. A single debugging session can consume tens of thousands of tokens. As the window fills, the model starts forgetting early instructions and making more mistakes — long after you assume everything is fine.

How to Manage It

• Do not drag conversations out. When a task is done, start a new session. A long conversation is not savings — it is weight the model carries into every following answer.
• Do as much as possible in one prompt. Review the whole result, collect everything that bothers you, and send it at once. Ten messages with one remark each cost far more tokens than one message with ten remarks — each one drags the entire history along with it.
• Put stable rules in a file. AGENTS.md or CLAUDE.md instead of repeating yourself in every prompt. Save longer procedures as a skill, which loads only when used.
• Send excerpts, not everything. The diff, the filename, and the failing part of the log — not the whole project and not 20,000 lines of output.
• Clear between unrelated tasks. In Claude Code that is /clear; elsewhere, a new conversation.
• Use subagents for investigation. A subagent reads a hundred files in its own context and returns only a summary. Your window stays free for the work.

Subscription plans meter usage in tokens, so saving context also saves your limits. A cluttered context is the most common reason an agent “suddenly gets stupid”.

Workflow

A process that survives the first demo. The first three steps are preparation, and they decide the outcome more than all the rest combined.

1. One-Page Brief

   Write down the user, the problem, inputs, output, constraints, and the definition of done. Add what is explicitly out of scope. Template: PROJECT-BRIEF.md.

2. Sketch the Flow

   Sketch screens and data flow in Excalidraw. Write the architecture in Mermaid so it lives in the repo and changes with the code.

3. Project Instructions

   Write a short AGENTS.md or CLAUDE.md: stack, commands, key files, forbidden changes. Include only what the model cannot infer from the code.

4. Plan Before Editing

   Anthropic recommends four phases: explore → plan → implement → commit. The agent first only reads and answers, making no changes. Only an approved plan starts the writing. One exception: “If you could describe the diff in one sentence, skip the plan.”

5. One Complete Path

   Build one full path through the system — input to output — with real data. A real CSV has three date formats and a decimal comma; a test file does not.

6. Run and Verify

   The agent runs the build and the tests. Check the output yourself: screenshots for the interface, known answers for data, one hand calculation for a calculator.

7. Revise by Delta

   State what is wrong, what must stay unchanged, and how success is checked. Do not say only “make it nicer”.

8. Save the Working State

   Commit before risky edits and after each working feature. Without Git, make a dated copy of the folder.

9. Deploy Early

   Deployment exposes errors local development hides: environment variables, paths, mobile layout, permissions.

10. Handoff

    Write down what works, what remains, and how to run it. Start the next session from that note, not by dragging an exhausted conversation forward.

Prompting and Good Practices

A good prompt is a short engineering brief, not a magic phrase:

Context     - what exists, who uses it, which files matter
Goal        - the concrete outcome of this task
Constraints - technology, style, privacy, what not to change
Criteria    - observable conditions of done
Process     - inspect first, plan, relevant files only, run tests

Revision

Weak: “Still ugly, make it nicer.” — the model reinterprets the entire design. Useful:

Keep all text and links. Remove cards and gradients.
One 760 px column, white background, blue only for links.
No horizontal overflow at 390 px (exception: the table).
Run it and show the changed files.

Good Practices

• Do not drag conversations out. The context window only grows and quality falls with it. Start a new session once a task is done.
• Collect your remarks and send them at once. Review the whole result and describe everything that bothers you in one prompt. Every extra message drags the whole conversation history along — ten short messages cost far more than one long one.
• Stable rules in files, not in prompts. Commands, conventions, and architecture belong in AGENTS.md or a skill.
• Require inspection before editing. This prevents code for files and APIs that do not exist.
• Send diffs and error excerpts, not the whole project. Cut logs down to the failing part.
• The expensive model only after the default fails on a clearly specified task — then switch back.
• Tests are durable requirements. One test states the rule to every later session with no paragraph of explanation.
• Revert early on a wrong assumption. Extra tokens spent on a wrong assumption buy only a more elaborate mistake.

Review checklist: REVISION-CHECKLIST.md. Vendor guides: Anthropic, Google, Prompting Guide.

Five Common Failures

Condensed from Avoid common failure patterns in Claude Code best practices. Each of these costs time.

1. The Kitchen-Sink Session

   You start one task, ask something unrelated, then return. Context is full of irrelevant information. Fix: /clear between unrelated tasks.

2. Correcting in Circles

   The model gets it wrong, you correct, it is still wrong. Context is polluted with failed approaches. Fix: after two failed corrections, start fresh with a better prompt.

3. The Over-Specified CLAUDE.md

   If the instruction file is too long, the model ignores half of it. Test each line: “Would removing this cause Claude to make mistakes?” If not, cut it.

4. The Trust-Then-Verify Gap

   The model returns a plausible-looking implementation that misses edge cases. The fix, and the shortest rule in this guide: “If you can't verify it, don't ship it.”

5. Infinite Exploration

   You ask it to “investigate” with no scope. It reads a hundred files and fills the context. Fix: scope the task narrowly, or use a subagent.

Git: Optional, and the Cheapest Undo

Git records project history locally. GitHub keeps a remote copy. Git is not required — a folder of files is a valid project. It is, however, the fastest way back when an agent “improves” half the project in the wrong direction.

Terms: a commit is a named snapshot. A branch is a parallel line of work. Push and pull synchronize with the remote copy (more on branches).

• git statuschanged and untracked files
• git diffreview changes before the commit
• git add .stage the changes
• git commit -m "..."restore point
• git pushsend to the remote copy

Commit before risky edits and after each working feature. Graphical client: GitHub Desktop. Learning: Learn Git Branching, GitHub Skills.

Deploy

The default path — how this page and every project above is published: push the repository to GitHub (it can be private). In Cloudflare Pages, connect the repository. Set preset None, an empty build command, output /. Each push triggers a new deploy, and each branch gets a preview URL. The *.pages.dev address works immediately; a custom domain is optional.

Sensitive Data

The strongest protection is a local model with no cloud connection. Run one with Ollama or LM Studio. Lower level: llama.cpp. Browser interface: Open WebUI.

A small local model is enough for classification, extraction, and summaries. For hard reasoning and long agentic work the cloud remains substantially better. Do not take the word “local” on trust: a local interface can still call web search, cloud embeddings, or telemetry. Check the settings and the network traffic.

Glossary

LLM (large language model)

A neural network that generates text from learned patterns and context. It does not read from a fact table — so verify.

Token

A chunk of text, roughly three quarters of a word. The unit usage is measured in.

Context window

Everything the model currently considers: messages, files, command output. It only grows during a conversation. See the section.

Coding agent

A program that reads and edits files locally, runs commands, and fixes its own errors — Claude Code, Codex.

Skill

A saved procedure in a SKILL.md file that loads only when used.

Subagent

A separate session with its own context that does the research and returns only a summary.

Prompt

The instruction you give the model. A good prompt is a short engineering description, not a phrase.

Diff

The listing of changes between two versions of a file. This is what you review before approving.

Multimodality

Input and output beyond text: images, PDFs, audio, video.

Orchestration

Permissions, memory, retries, and coordination of several agents around the model.

Subscription vs API

A subscription pays for a person in the app; the API pays for calls from your code, by usage. See the section.

Sources and Further Reading

All sources are also linked inline. Checked August 2026. Prices and names change; the vendor page is the authority.

Courses (Free, Official)

• Claude Academy Claude 101 → Claude Code in Action; use cases by role at academy.claude.com/use-cases.
• OpenAI Academy The same for ChatGPT and Codex.
• Google AI Essentials For non-developers.
• GitHub Skills Git and pull requests in a real repository.
• DeepLearning.AI Short courses: prompting, agents, RAG (retrieval-augmented generation).
• Generative AI for Beginners Open-source course with runnable notebooks.

Working With Agents and Skills

• Claude Code best practices Source for explore–plan–implement–commit, the verification rule, context management, and the five common failures.
• Claude Code: skills How to save a procedure in SKILL.md so it loads only when used.
• Codex best practices The same rules at the other vendor.
• Effective context engineering Why AGENTS.md and context compaction.
• Building effective agents “Find the simplest solution possible” — simple patterns before frameworks.
• Anthropic prompting / Google prompting / Prompting Guide / OpenAI Cookbook Techniques and runnable recipes.

Pricing, Plans, and Choice

• Claude Code Pricing: Subscriptions vs API Source for the 15–30× ratio and the $200 subscription vs $1,588 API-rate example.
• CloudZero: Claude Code pricing An independent break-even calculation across plans.
• Claude / ChatGPT / Gemini Official price lists — the only binding source.
• Reddit post analysis What the community actually uses and builds; tool mention counts.

The Term and First-Hand Accounts

• Karpathy, 6 Feb 2025 The original post that coined the term.
• Karpathy: Vibe coding MenuGen The author of the term builds a full web app and reports honestly on what was hard (not the code).
• Willison: Not all AI-assisted programming is vibe coding The distinction. Archive for the current state.
• Willison: Vibe engineering The disciplined version: tests, planning in advance, documentation, review.
• tools.simonwillison.net — colophon 227 tools with links to the model transcripts. Code.
• Pragmatic Engineer A professional team's view.

Measurements

• Stack Overflow Developer Survey 2025: AI 66% cite “almost right, but not quite” as the main problem.
• DORA 2025 Google's industry survey: 90% adoption; AI as an amplifier of a team's existing habits.
• METR (2025) Randomized controlled trial: experienced developers were 19% slower, though they estimated a 20% saving. Paper: arXiv:2507.09089.

Tools

• Cloudflare Pages / Workers / Cron Triggers Deployment and schedules.
• About Git / Learn Git Branching / GitHub Actions History, branches, automation.
• DuckDB / Polars / uv / Mermaid Analytics, environments, diagrams in the repo.
• Ollama / LM Studio / llama.cpp / Open WebUI Local models.