Vibe Coding Beginner's Guide: I Built a Production-Ready Product with AI Without Writing Code

Without writing a single line of code, taking the "Hangzhou One-Day Trip Planner" from an empty folder to a complete web application that runs, searches, and schedules itineraries — this is the actual Vibe Coding workflow demonstrated by a Bilibili creator in this video. At the cost of six real mistakes, the video distills five key actions: "Think, Frame, Save, Capture, Feed," each accompanied by real conversation screenshots and debugging insights, making it a hands-on manual you can follow along.

What Exactly Is Vibe Coding

The term was first coined by Andrej Karpathy in early 2025. The core idea: code by feel, even forget about the code itself. You speak in plain language, AI writes the code; you say what you want, run it and see; you tell it what's wrong, and it writes and fixes.

But the creator throws cold water in the video: the faster AI changes things, the faster it can derail. This time he crashed six times, and the most insidious one nearly broke the entire itinerary recommendation logic. So Vibe Coding isn't about going with your gut — it's about stating things clearly.

For tools, he used Claude, and emphasized that the workflow applies equally to any other AI coding tool. The entire demo starts from "create a new folder," which contains nothing but a key configuration file.

Andrej Karpathy is the former AI director at Tesla and a founding member of OpenAI. In 2024, he founded the AI education company Eureka Labs. In a tweet in early 2025, he first proposed the Vibe Coding concept, describing a development approach of "fully giving in to the vibes, embracing exponential productivity, and even forgetting that the code exists." The term was subsequently named Word of the Year 2025 by Collins Dictionary and sparked widespread discussion. Its core premise: developers describe intent in natural language, AI generates and iterates on code, and humans take on the role of "director." However, Karpathy himself cautioned that this approach suits rapid prototyping and low-risk projects; production systems with high security and correctness requirements still need traditional engineering review. Understanding this context explains why the creator repeatedly stresses "state things clearly" — the ceiling of Vibe Coding depends on the precision of your requirement expression.

Think: Let AI Ask You First, Don't Let AI Guess

The first line was: "I want to build a one-day trip planner for areas around a city. Don't write code yet — first ask me a few questions to clarify the requirements and data APIs."

Sure enough, the AI didn't rush to act. Instead, it threw back a series of multiple-choice questions: Which provider for location data? How many steps should the planning cover? How should destinations be recommended? What frontend technology?

The creator selected each item: AMap for maps, QWeather for weather, skip complex maps for now, desktop only. He said this step looks like it's not writing code, but it's actually saving himself a ton of rework later. AI writes fast, but it won't decide what the product actually should be for me — so the first word is "Think": think it through first, don't let AI guess.

AMap Open Platform and QWeather are the two third-party data APIs chosen in the video. AMap provides maps, POI (Point of Interest) search, geocoding, route planning, and more. After registering, developers can apply for a Web Service API Key, and the free quota is usually sufficient for personal projects. QWeather focuses on meteorological data, offering real-time weather, hourly forecasts, life indices, and other APIs. Both require a Key in the request for authentication. The creator chose them for two reasons: relatively complete domestic data coverage and stable free tiers. But note: if such a Key is written directly into frontend code, any visitor can see it through browser developer tools, creating a risk of unauthorized use — this is precisely the first vulnerability addressed in the "three guardrails" at the end of the video.

Frame: Tell AI Which Path to Take and Where the Boundaries Are

After confirming requirements, the AI excitedly wrote a whole multi-file full version. The creator quickly called a halt: "Just use the simplest three-piece web setup, one file for now, AMap for locations, QWeather for weather, and the first version is desktop browser only."

This is the second word "Frame" — define the path and boundaries for AI. After receiving clear instructions, the AI deleted the extra directories and consolidated everything into a single index.html.

Once boundaries were set, the creator still only asked it to do one thing: take input, list scenic spots, skip weather for now, and don't beautify the interface yet. The AI did just that one thing and opened the browser itself to test. The first open showed an old page — it self-diagnosed as browser cache. Testing again, typing "Hangzhou" returned 25 spots, with the first being Hangzhou Christian Chongyi Church.

The page was ugly — text on a black background was barely readable — but the "input — coordinates — scenic spots" path actually worked. Working is enough. First prove the most critical path works, and add the rest piece by piece later.

Save: For Every Step Done, Leave a Place You Can Go Back To

Instead of rushing to add features, the creator did one thing first — save. He told the AI: "Help me commit a version with Git, with the message 'scenic spot search working version.'"

He compared Git to game saves and mentioned a real case: someone worked on a project behind closed doors for two weeks without any backup, then a file swap wiped out two weeks of work. This time he saved a version starting with A98 — the third word is "Save": every step done, leave a place you can go back to.

After saving, he fixed the unreadable text, then started "finding features" — and only one at a time.

• First: scenic spots within the mountain area, adding ratings, per-person cost, and drive time. He switched to AMap's new API and got 25 entries per category. One category suddenly showed no results — he checked and found a parameter was passed wrong.
• Second: clickable cards. There were no user reviews here, so only add what the API actually provides.
• Third: weather body-feel cell displayed as undefined — a field name typo, fixed in one go, sunny 24°C.
• Fourth: itinerary scheduling — morning scenic spot, lunch restaurant, afternoon leisure, using only real retrieved locations, with indoor alternatives for rain. He wrote the rules clearly first. The first schedule had him visiting a church in the morning, and the West Lake spot was also a church — couldn't get in at all. After changing the search keywords, the morning finally got Liulang Wenying.

Git is the most mainstream distributed version control system today, originally created by Linus Torvalds to manage Linux kernel development. Its core value: every commit takes a snapshot of the current code state and records who, when, and what changed. Developers can roll back to any historical version at any time, or create branches for parallel experiments without affecting the mainline. The creator's comparison of Git to "game saves" is very apt — in Vibe Coding scenarios, a single AI change may involve multiple files. Without saves, once a hard-to-locate bug is introduced, you might be forced to start from scratch. Only a few commands are commonly used: git init to initialize a repository, git add . to stage changes, git commit -m "message" to commit a version. For non-professional developers, remembering the habit of "commit once for every runnable small feature completed" matters more than memorizing commands.

Capture: Describe the Scene Clearly So AI Knows Where to Start

With four features in place, the most critical crash arrived. After refreshing and searching "Hangzhou" again, the itinerary said morning visit to Liulang Wenying, but looking further down, the top scenic spot was Starry Music Fountain, with Liulang Wenying pushed to the back.

At this point just saying "wrong order" won't work. The creator clarified three things: how the error occurred, what I saw, what I want. If there's an error, copy it; if the interface is wrong, screenshot it. He wrote: "After entering Hangzhou, the itinerary's recommended places don't match the cards below. I want those three places in the itinerary to rank first in their respective categories, and tag them with the segment."

The AI quickly found the cause: not two datasets, but the same dataset sorted twice — cards sorted by distance, itinerary scored by rating plus drive time. The fix: first select the three itinerary stops, then push them to the top of their categories. After refreshing: morning Liulang Wenying, lunch Shangfang Hotpot, afternoon Shangcheng District Sports Center — all ranked first and tagged with segments.

The fourth word "Capture" means capturing the on-site details so AI knows where to start.

Feed: Feed Enough of the Truly Useful Information

With bugs fixed, the creator asked it to "look better." But he didn't say something vague like "help me beautify it" — he gave a series of specific instructions:

Weather at the top, three categories grouped, rating/per-person cost/business hours/distance prioritized, blue tech style, add some layers, only five per category, number them, overall follow iOS frosted glass.

You can see every requirement maps to a corresponding change on the page. After the changes, the AI even self-checked: the three itinerary stops matched the first of each category. The fifth word "Feed" means giving it the truly useful information — reference images, screenshots, color schemes, and even what you don't like — all directly.

iOS Frosted Glass effect refers to the semi-transparent blur visual style Apple used extensively after iOS 7. Technically it usually relies on CSS's backdrop-filter: blur() property, which blurs background content behind an element, combined with a semi-transparent white overlay to create a layered "glass panel" look. This style isn't hard to write on the frontend, but the key is that parameters like "blur radius, opacity, edge shadow" need repeated fine-tuning to look good. The creator directly named "follow iOS frosted glass" in the prompt, effectively providing AI with a clear aesthetic anchor — far more effective than saying "make it look nice." This also confirms the core of "Feed": translating abstract requirements into concrete references AI can directly map to code.

Running Doesn't Mean Ready to Launch: Three Guardrails You Must Add

The page looks good, features are complete — but can it go live directly? The creator ran through the whole thing from scratch: entered Hangzhou, weather, itinerary, and travel suggestions all appeared, the first of each of the three card categories matched, and clicking itinerary entries showed details.

But he was clear-headed: running on my computer doesn't mean it's ready to launch. This version's key is still in the frontend code, usable only locally. He listed three guardrails:

1. Keys must not be in the webpage — move them to the server side for production launch.
2. APIs need rate limits and error fallbacks — otherwise they can be abused, and any external service failure takes down the whole page.
3. Fix bugs with minimal scope — don't rewrite working parts while you're at it. When adding features, only add features; when fixing problems, only fix problems. Don't mix them in the same conversation. The clearer the scope, the better AI's results and the easier to verify and roll back.

Final review: Think, Frame, Save, Capture, Feed — all five actions went through once, all six crashes were fixed, get it working first then grow it. This is Vibe Coding that can actually ship. The creator packaged the methods and prompts — leave a comment to get them.

One-line Summary

A Bilibili creator uses a Hangzhou one-day trip planner to distill five Vibe Coding steps — Think, Frame, Save, Capture, Feed — from six real mistakes.

Paragraph Summary

This article documents a Bilibili creator building a "Hangzhou One-Day Trip Planner" web app from an empty folder using Claude without writing a single line of code, distilling five key actions: "Think, Frame, Save, Capture, Feed" — let AI ask about requirements first, define the minimal viable boundary, use Git to save incrementally, describe errors and UI issues clearly, and give concrete executable optimization instructions. Six crashes occurred, including browser cache, wrong parameters, field name typos, and duplicate sorting logic — all fixed quickly by describing "how it went wrong, what I saw, what I want." The article concludes: running locally doesn't mean ready to launch — three guardrails are mandatory: move keys to the server, add rate limiting and fallbacks, and keep modifications minimal in scope.