Zero Coding Experience: Built a Website from Scratch with AI in 5 Evenings

What Is Vibe Coding?

Before diving into this case study, it's worth understanding where the concept of "Vibe Coding" comes from. Vibe Coding is a programming paradigm coined by OpenAI co-founder Andrej Karpathy in early 2025, and it quickly went viral. The core idea: developers no longer write code line by line. Instead, they describe their intent in natural language, let AI models generate, debug, and iterate on the code, while humans simply "feel" the product direction and make decisions. This concept emerged against the backdrop of explosive improvements in LLM code generation capabilities—GPT-4, the Claude 3 series, and other models can now handle complex multi-file projects, understand context, and maintain code style consistency. Vibe Coding doesn't mean programming knowledge is worthless; rather, it downgrades "knowing how to code" from a prerequisite to a nice-to-have, making product thinking, user insight, and requirements definition the new core competencies.

A person with absolutely zero coding ability used just 5 after-work evenings to build a fully functional AI tool directory website—complete with search, filtering, and external links—using Claude, and successfully deployed it online. This process reveals an important trend: Vibe Coding is making "product thinking" more important than "programming ability."

Phase One: Product Planning Matters More Than Writing Code

Before writing any code, the author spent substantial time doing product planning on Claude's web interface. He told Claude he wanted to vibe code a product, explained his skill level and goals, and Claude immediately generated a "zero-to-one guide" recommending a clear workflow:

• Claude Web Interface: Product planning, copywriting, requirements discussion
• Claude Code: Core development including writing code, debugging, and deployment

Out of 6 product directions, the author chose "an AI tool directory website for content creators." He then created a project on Claude and had the AI write a project instruction guide—the quality of this guide was good enough to serve directly as a product requirements document.

What followed were rounds of requirements discussions: how many pages the site would have, what modules each page would contain, how users would navigate from the homepage to detail pages. Eventually, Claude drew wireframes, generated them as HTML files that could be previewed directly in a browser. They also confirmed design specifications—light-theme only, covering four use cases: short-form video creation, graphic content creation, live streaming operations, and paid knowledge products.

Key Insight: Up to this point, none of this had anything to do with programming. The only core ability needed was—knowing clearly what you want to build.

This also embodies the essence of MVP (Minimum Viable Product) methodology. The MVP concept was systematized by Eric Ries in The Lean Startup, with the core principle of using minimal resources to validate your most critical product hypothesis. The author's choice of "AI tool directory" itself reflects MVP thinking: directory sites have low technical complexity, content can be populated quickly, and the target audience is well-defined—making it an ideal vehicle to validate the hypothesis "can I independently ship an online product."

Phase Two: Setting Up the Dev Environment and Letting AI Write Code

Development Tools: What Is Claude Code?

Claude Code is a command-line AI programming tool for developers released by Anthropic, officially launched in 2025. Unlike the conversational Claude web interface, Claude Code runs directly in the local terminal environment. It can read, modify, and create project files, execute terminal commands, and work within the context of a real codebase. Its core advantage is "agentic execution"—after receiving high-level instructions, Claude Code can autonomously decompose tasks, plan steps, invoke tools, and complete multi-step operations without requiring users to manually copy-paste every code snippet. This fundamentally differs from traditional "Q&A-style" AI-assisted programming, making it better suited for building complete projects from scratch.

Setting up the development environment was relatively simple: learn to use the terminal, install Claude Code and Node.js. The author used the Claude Code desktop version with a very clear workflow:

1. Figure out the next step on Claude's web interface
2. Have Claude write the prompt
3. Copy the prompt to Claude Code and have it produce a plan first
4. Confirm the plan looks good, then let it write the code
5. After each module is complete, check the effect in Preview—if something's off, iterate

The Project's "Brain": The CLAUDE.md File and Context Engineering

There's one critically important file here—CLAUDE.md—think of it as the project's brain. The author had Claude write this file based on the product requirements document. It contains:

• Technology stack choices
• Design specifications
• MVP page definitions
• Data structures
• Key constraints
• File structure conventions
• Current development progress

The design philosophy behind the CLAUDE.md file stems from "Context Engineering," an emerging practice. LLMs are fundamentally stateless—each conversation starts from zero, and they can't automatically remember previous decisions. CLAUDE.md solves this by placing a structured specification file in the project root directory, allowing Claude Code to automatically read project specifications at startup, achieving cross-session "memory." Different tools use different naming conventions: Cursor uses .cursorrules, GitHub Copilot uses .github/copilot-instructions.md, but the core idea is the same—explicitly encode human decisions and constraints into AI-readable rules rather than relying on the model's implicit inference.

With this file in place, Claude Code maintains consistent style and standards throughout development without going off track. The more detailed the file, the more predictable AI's output becomes, and the lower the probability of "hallucination-driven" code drift.

How to Prevent "Spaghetti Code"

The author noticed many people reporting that vibe coding tends to produce low-quality code, so he proactively collected descriptions of these problems and threw them directly at Claude for solutions. Claude not only addressed each issue but also generated an architecture.md project architecture document, solidifying the project skeleton from the ground up. This approach is very smart—rather than waiting for problems to appear and then fixing them, have AI design the architecture properly upfront.

Phase Three: Content Population and Going Live

Using AI to Batch-Produce Content

After the code was complete, it was time to populate content. The site includes nearly 70 AI tools with a domestic-to-international ratio of roughly 6:4, with 10 personally curated as featured tools by the author. The writing style for tool descriptions fell into three tiers:

• Tools the author had used extensively in-depth
• Tools briefly tried out
• Tools recommended from rankings

Claude helped generate data files and populated them into the site. For icon handling, the author had Claude write a script to batch-download website favicons from Google's public API—done in one click.

Testing and Vercel Deployment

Claude Code generated a complete testing checklist: check all four pages one by one, test on both mobile and desktop, verify external links work and search has no bugs—only after everything passed did they move to deployment.

Vercel, used for deployment, is a cloud platform created by the founding team behind the Next.js framework, designed specifically for frontend and full-stack JavaScript applications. Its core value lies in compressing the process between "pushing code to GitHub" and "website automatically going live" to the extreme—through OAuth authorization connecting to a GitHub repository, every git push triggers automatic build and deployment, typically completing within 60 seconds. For non-technical builders, Vercel eliminates the complex ops work of traditional deployment: configuring servers, managing DNS, handling SSL certificates. Its free tier is more than sufficient for personal projects and MVP validation.

Connect the GitHub repository, configure build parameters, and within three minutes you have a real live URL—the website is officially online.

Five Practical Vibe Coding Lessons

The author summarized five highly practical vibe coding lessons worth referencing for anyone wanting to try AI-assisted programming:

1. Don't Jump Straight Into Writing Code

Product planning, form factor selection,