Introduction to Vibe Coding

The term “Vibe Coding” has gained popularity recently, discussed by figures like Karpathy and widely debated on platforms like Zhihu. However, most discussions focus on the concept rather than documenting the actual process. To fill this gap, I decided to conduct an experiment using pure “Vibe Coding”—describing requirements in natural language and letting AI handle all the coding—to create a usable project within a week. This is a real, hands-on diary of my experiences, including pitfalls and challenges.

Day 0: Defining the Goal

Choosing the right project is crucial. It should neither be too simple nor too complex to complete in seven days. I settled on creating a personal finance tracking web application with the following features:

I let the AI choose the tech stack, while I focused on specifying requirements and acceptance. The tools I used were Cursor IDE + Claude Sonnet 4 model.

Day 1: Setting Up the Framework

The first day’s instruction was straightforward: “Help me create a personal finance management application using React + Vite, including a sidebar navigation and a dashboard layout.”

The AI’s performance was beyond expectations. Within five minutes, it generated a complete Vite + React + Tailwind CSS scaffold, complete with sidebar navigation, responsive layout, and dark theme. The code structure was clear, and the component breakdown was reasonable.

⚠️ First Pitfall: The AI defaulted to the latest dependencies, which included a UI library incompatible with my browser, resulting in a blank page. It took me 20 minutes to diagnose the version conflict. Lesson learned: Specify exact version numbers instead of using ’latest’.

Day 2: Core Functionality - Expense Entry Page

Today’s instruction was: “Add income/expense entry functionality, including an amount input box, category selection (e.g., dining, transportation, shopping, salary), date picker, and notes text area, storing data in localStorage after submission.”

The AI generated a complete form with validation (e.g., amounts must be positive, dates cannot be in the future). However, there was a significant issue: categories were hardcoded dropdown options, preventing user customization.

I added a prompt: “Allow categories to be user-customizable for addition and deletion.” The AI quickly modified the code, adding a popup component for custom category management.

✅ Day 2 output: A complete expense entry page + category management functionality, with approximately 400 lines of code.

⚠️ Second Pitfall: The localStorage operations lacked error handling. Using it in private mode would cause an error. I later had the AI add a try-catch block to fix this.

Day 3: Data Visualization - Chart Challenges

Today was both the most anticipated and the most concerning day—data visualization.

The instruction was: “Add a monthly income/expense overview card to the dashboard, along with a pie chart showing expense category proportions and a line chart displaying income/expense trends over the past 7 days.”

The AI chose the Recharts library for the charts. The initial output was… usable at best. The pie chart’s labels overlapped, the line chart’s X-axis date format was incorrect, and the color scheme was unattractive.

This led to a lengthy optimization dialogue—about 7-8 iterations:

• Rounds 1-2: Fix label overlap and date format
• Rounds 3-4: Optimize color scheme for better harmony
• Rounds 5-6: Add chart interactivity (click to view details)
• Round 7: Mobile adaptation to prevent chart overflow

⚠️ Key Discovery: While AI excels at “building from 0 to 1,” it is inefficient at fine-tuning from “1 to 100.” The same modification requests often needed to be repeated 2-3 times to achieve satisfactory results. I spent more time on charts today than on the first two days combined.

Days 4-5: Budget Management and Export Functionality

These two days are grouped together due to relatively smooth progress.

On Day 4, I implemented budget management—setting monthly budget limits with alerts for overspending. The AI got it right on the first try, with clear logic and intuitive UI. The only issue was the lack of “budget categories” (e.g., separate budgets for dining and transportation), which I added in a follow-up.

On Day 5, I worked on the data export functionality—exporting in CSV and Excel formats. Here, I hit another pitfall: the AI used the xlsx library for Excel export, which increased the package size by 2MB. I later switched to a lighter solution that generated files entirely on the front end.

✅ Days 4-5 output: Budget management + CSV/Excel export + numerous bug fixes.

Day 6: Aesthetic Enhancements and Detail Refinement

With functionality complete, the app still looked very “AI-generated”—monotonous fonts, uneven spacing, uniform button styles, and no transition animations.

Today’s instruction style changed: instead of functional requirements, I focused on visual aesthetics:

• “The app looks too plain; add gradient colors and subtle shadow effects.”
• “Buttons should have scale animations on hover.”
• “Display numbers with thousand separators, using prominent colors for large figures.”
• “The bottom navigation bar on mobile should be fixed.”

The AI’s understanding was put to the test here. Some instructions it executed well (thousand separator formatting, fixed positioning), while others fell short (it provided a heavy box-shadow for “subtle shadows”).

Final effect: improved from 60 to 80 points. While it still fell short of designer quality, it was sufficient for a personal project.

Day 7: Deployment and Summary

On the final day, I deployed the project to Vercel with a single instruction: “Help me deploy to Vercel.”

The week-long experiment concluded. Here are the final project metrics:

The Truth About Vibe Coding: Five Key Insights

Insight 1: Strong from 0 to 1, Weak from 60 to 80

The AI’s efficiency in building project frameworks and implementing basic functionalities is impressive. However, transforming a “usable product” into a “well-designed product” requires significant fine-tuning, where the AI’s advantages are less pronounced.

Insight 2: You Need Some Knowledge to Direct Effectively

Although I wrote no code, without some understanding of front-end technology, I could not evaluate the AI’s proposals or identify potential issues. Vibe Coding does not lower the technical barrier but rather reduces the physical labor of coding.

Insight 3: The Quality of Prompts Determines Output Quality

For the same requirement, the difference between “make a chart” and “create a responsive pie chart showing expense proportions, with non-overlapping labels, harmonious colors, and click interactions” is vast. Learning to write effective prompts is a core skill in itself.

Insight 4: There Are Areas Where AI Struggles

Creative UI design, complex interaction experience optimization, and cross-browser compatibility handling are areas where AI still requires substantial human intervention.

Insight 5: It Changes the Nature of Development but Does Not Eliminate Developer Value

Future developers will resemble a blend of “product manager + architect + QA”—defining requirements, reviewing AI outputs, and ensuring quality. The importance of coding itself is diminishing, while the value of system thinking and judgment is on the rise.

Advice for Those Considering Vibe Coding

If you want to try Vibe Coding, my advice is to start with small projects and simple requirements. Don’t jump straight into building a SaaS platform, as that will only lead to frustration.

Find a small tool or website with a clear idea, describe it in natural language, and let the AI implement it step by step. Through this process, you will gradually develop an understanding of the AI’s capabilities—knowing what it can do, what it cannot do, and how to achieve the best results.

This understanding is more valuable than any tutorial.

Have you tried Vibe Coding? How was your experience? Feel free to share your stories in the comments.