Vibe Coding in Practice: Building a Personal Website with AI from Zero

When "Coding Without Coding" Becomes Possible

In the past, building a personal website usually meant learning HTML, CSS, and JavaScript, then wrestling with servers and deployment. Today, a new approach called Vibe Coding is letting ordinary people bypass these barriers—you just describe what you want in natural language, and AI writes the page for you, edits it, and gets it running.

It's worth noting that the concept of Vibe Coding was formally proposed and popularized by Andrej Karpathy—OpenAI co-founder and former Tesla AI director—in early 2025. Its core idea is: developers no longer write code line by line, but instead describe their intent to the AI in natural language, letting the large model generate, modify, and debug the code, while humans simply verify the results and give feedback. This model is built on the powerful code-generation capabilities of large language models, essentially transforming programming from "syntax memorization" into "intent expression"—it lowers the technical barrier, but also places new demands on the user's ability to break down requirements and think clearly. This is precisely the focus of this article.

This article is compiled from the hands-on experience shared by a husband-and-wife duo of content creators on Bilibili. One of them is a complete beginner with zero background, who managed to build a personal homepage using Codex entirely by feeling their way through—earning praise even from their spouse, who works in IT. Codex is OpenAI's code-generation model/agent product line, capable of understanding natural language instructions and generating, modifying, and running code; its early versions were the very foundation behind GitHub Copilot. Besides Codex, mainstream AI coding tools today also include Anthropic's Claude, the Cursor editor, as well as domestic tools like Tongyi Lingma and Wenxin Kuaima—what these tools share is treating "conversation" as the interaction entry point and "repositories/files" as the objects of operation. The most valuable part of their experience isn't "how powerful AI is," but how ordinary people can collaborate efficiently with AI—which happens to be the most scarce practical knowledge right now.

Their approach is worth learning from: don't aim for completeness, start with just a part. Initially, the homepage only contained the two of them's bios and their media introduction, and it gradually expanded as they worked. In her own words: "A lot of ideas actually emerge as you're working on it, not from sitting there thinking."

Four Core Techniques for Having AI Revise Your Work in Vibe Coding

Getting it right on the first try is basically impossible; the real test lies in the "revision" phase. She summarized four techniques for communicating with AI, nearly every one of which hits a common beginner pain point.

Technique One: Have the AI Restate Your Requirements to Align Granularity

Often, poor revisions aren't the AI's fault—it's that we described things unclearly. Her method: after stating a requirement, have the AI repeat back your meaning in its own words, and check whether it matches. "After doing this a few times, you'll find the AI's feedback matches what you had in mind."

She put it sharply: this isn't because the AI got smarter—"it's that you got trained yourself; you learned how to describe the problem." This actually reveals the essence of Vibe Coding—in human-AI collaboration, the human's ability to express is the bottleneck.

Technique Two: Screenshot to Pinpoint + Give Precise Numbers

Webpages are visual, and describing positions with text alone leaves the AI unable to pinpoint accurately. Whatever you want to change, screenshot that part and send it.

When it comes to size adjustments, always give exact numbers at once. For example, "make this text three-quarters of its original size" rather than vaguely saying "bigger" or "smaller"—the latter wastes tons of back-and-forth time and still misses the mark.

Technique Three: Change One Thing at a Time, Don't Overreach

Webpage code is often very long, and dumping a pile of instructions on the AI at once easily leads to chaos. "It's not that the AI doesn't understand what you're saying—it's that we get muddled ourselves as we talk." So make changes one at a time, no rush.

Technique Four: Repeatedly Emphasize "Only Change What I Asked You To"

This is the easiest trap to fall into. The AI often touches B while changing A. The solution is to emphasize three or four times in your instructions, "leave everything else alone, only change this part," and remind it from time to time—because it too will "forget." This is highly similar to the experience of using AI for photo editing.

Website Deployment: Beginners, Don't Hand All Permissions to AI

Once you've finished locally, it's time to go live. Here she offers an important security reminder: when it comes to accounts and passwords, don't hand all your permissions to the AI, to avoid being "exposed" online.

Her approach is clever: first have the AI propose a plan, with three clear requirements—

• Free
• Commonly used (don't pick some obscure platform others can't even open)
• Modifiable and updatable later

After getting the plan, she only asks the AI to "tell me the first two steps," because too much at once is hard to remember. An even more crucial tip: after registering and logging in, directly screenshot the entire page and ask the AI "where do I click next?" Because the AI reads text descriptions, but the platform interface may have been updated and buttons moved, making text descriptions unreliable. Using screenshot-based interaction, the entire deployment process took only three or four minutes.

Handling Long Chinese Text: DeepSeek's Unexpected Advantage

They had made over 20 videos and 50+ podcasts, and wanted to distill the content into a "knowledge tree" for the website. This step exposed clear differences between different AIs.

Recommended Audio/Video Transcription Tools

For converting audio and video into text, she recommended two free tools: Dedao Brain and Whisper. In testing, Whisper produced many typos when recognizing Chinese, while Dedao Brain performed more reliably in Chinese scenarios.

The "Neutral and Objective" Trap of Overseas AI

She sent over 70 files to Codex for summarization, but found a problem: the overseas AI smoothed out all their distinctive viewpoints and stances, turning the output into "bland, politically correct, very middle-of-the-road" content.

"For example, our evaluations of certain companies—we're not experts, but at the time we had an attitude based on that stage." But Codex deleted all this personality, and the output "didn't sound like us." This is fatal for building a personal IP—the whole point of the account was to showcase a genuine learning process.

DeepSeek's Two Major Advantages in Handling Long Chinese Text

Ultimately she turned to DeepSeek, gaining two things:

1. Better understanding of Chinese, able to grasp the true meaning behind tone and attitude, without over-censoring content due to ethics and safety settings;
2. Ultra-long context (million-level tokens)—"I've used DeepSeek for two years, and this was the first time the dialog box told me I was out of quota"—it could read all 70+ files at once, whereas other tools might require splitting them across several dialog boxes.

The key concept here is the Context Window, which refers to the maximum length of text a model can simultaneously "remember" and process in a single conversation, measured in tokens (which can be understood as fragments of words or characters—in Chinese, roughly 1 character ≈ 1.5 tokens). The larger the window, the more material the model can read at once, making it better suited for tasks like handling long documents and multi-file summarization. Early models had only a few thousand tokens, whereas mainstream models today have expanded to hundreds of thousands or even over a million tokens. When input exceeds the window, the model "forgets" earlier content—which is exactly why the cross-dialog-box migration technique mentioned below exists.

She also mentioned a comparison with Doubao: for everyday communication the two are similar, with Doubao being more fun and capable of more things, while DeepSeek is more serious—DeepSeek is the top choice for handling long text.

Cross-dialog-box migration technique: before opening a new dialog box, have the AI summarize "the methods used earlier, the requirements, what to do and what not to do, and examples" into a document, then copy it into the new dialog box to maintain consistent style.

The "2.5-Level" Knowledge Tree Design and Understanding APIs

Initially, Codex laid out all the content flat on the webpage—"really cold, all text." She asked for hierarchy, but the AI only knew how to divide logically into three levels: "main heading—subheading—content."

So she changed her question: "Go search online—given my content volume, from the user's perspective, how are the websites people like structured hierarchically?" This question cut to a common flaw in developer thinking—always thinking from one's own perspective. After searching, the AI concluded: three levels is too deep, users are too lazy to click through, so it should be 2.5 levels (click to see main heading → expand subheadings and partial content → click again to see the full text).

Regarding the digital avatar, they haven't yet connected an API. The article also explains what an API really is: "it sounds high-end, but it's just a channel," with the full name being Application Programming Interface—through it, you can connect a webpage or digital human to the AI behind it. More specifically, an API is an agreed-upon "channel" or "interface specification" between different software systems; it lets developers call a service's functionality without understanding its internal implementation, simply by sending requests in an agreed format. AI large-model vendors typically provide both a web version (for ordinary users, usually monthly subscription or free) and an API (for developers, billed by the number of tokens used). There are two reasons they haven't connected it: first, the current website doesn't need it, and second, connecting AI means starting to spend money—precisely because the API is a usage-based pricing model. In her testing, DeepSeek's API, thanks to its lower per-token price, is much cheaper than GPT and Claude, and she plans to break down the costs when they actually integrate it.

Takeaways for Ordinary People on Vibe Coding

The most moving thing about this case isn't how advanced the technology is, but that it proves: in the AI era, initiative and expression matter more than programming knowledge.

A few reusable core principles:

• Start doing it first; ideas will emerge in the process;
• Learn to "train yourself" to describe requirements precisely;
• Use screenshots instead of text to pinpoint, and numbers instead of vague adjectives;
• Retain human judgment for anything involving account security;
• For handling long Chinese text, DeepSeek is currently the best value-for-money choice.

They also plan to build an animated digital human and an automatic editing agent next. From practicing to actually launching their own website, this path itself is a perfect model for ordinary people embracing Vibe Coding.

Key Takeaways