[GitHub Global] Translate Vibe Coding 零基础教程/30 经验技巧/01 Vibe Coding 五大核心心法.md to en

2026-02-05 10:25:31 +00:00
parent ca54d95b42
commit 1678893fa8
1 changed files with 357 additions and 0 deletions
@@ -0,0 +1,357 @@
+# The Five Core Principles of Vibe Coding
+
+> Five essential mindsets to take you from beginner to expert
+
+Hello, I'm Yupi.
+
+If you've already created a few small projects using AI, you might have noticed an interesting phenomenon: sometimes AI follows instructions perfectly and gets things right on the first try; other times it can be stubbornly uncooperative no matter how you phrase your request.
+
+Why does this happen?
+
+Actually, Vibe Coding—just like traditional programming—has its own set of "principles." These aren't mystical concepts, but rather proven ways of thinking and working principles validated by countless practitioners. Mastering these principles will help AI better understand your intentions and produce higher quality outputs.
+
+Today, I'll share the five most important core principles of Vibe Coding. These principles come from my personal practical experience and incorporate insights from many community experts. Learning them will lead to a qualitative leap in your Vibe Coding skills.
+
+![](https://pic.yupi.icu/1/waytovibecoding%E5%A4%A7.jpeg)
+
+## Principle 1: Planning is Everything
+
+This is the single most important principle in Vibe Coding—bar none.
+
+Many students approach AI by immediately saying: "Help me build a budgeting app."
+
+Then they expect AI to deliver perfect results right away.
+
+But more often than not, the outcome either falls short of expectations or gets abandoned halfway.
+
+Why does this happen?
+
+Because you didn't plan properly.
+
+In 2025's Vibe Coding practice, one conclusion has been repeatedly validated: **5 minutes spent planning can save you 30 minutes of rework later.**
+
+### Planning Matters More Than Code
+
+There's a saying in traditional programming: "Sharpening the axe won't delay the job of cutting wood."
+
+This is even more crucial in Vibe Coding. While AI can write code quickly, it won't think about "what to do" for you—only "how to do it."
+
+If you're unclear about what you want to build, AI will proceed based on its own understanding. The result? You'll get a functioning app, but not the one you actually wanted.
+
+So before writing any code, you need to answer these questions:
+- What are the core features of this application?
+- How will users interact with it?
+- Which features are essential, and which can be added later?
+- Are there any special constraints or requirements?
+
+The answers to these questions constitute your plan.
+
+### How to Plan Effectively?
+
+Many students say: "I don't know how to plan—I'm not a product manager."
+
+Don't worry, AI can help. You can treat AI as your product manager and work together on planning.
+
+For example, you could start the conversation like this:
+"I want to build a Pomodoro timer app, but I'm not entirely clear on what features to include. Can you act as a product manager and ask me questions to help clarify my thoughts?"
+
+AI will then ask you a series of questions like:
+- Should users be able to customize work and break durations?
+- Should there be notifications when the timer ends? Audio alerts or popups?
+- Do we need to track how many Pomodoro sessions users complete?
+
+By answering these questions, you'll gradually transform vague ideas into clear requirements. Finally, you can ask AI to organize them into a **Product Requirements Document (PRD).**
+
+This document becomes your "project constitution." In subsequent conversations with AI, you can always reference it to keep AI aligned with your goals.
+
+### Planning Determines the Shape of Your Code
+
+Through my experience building projects with AI, I've noticed something interesting: **AI prioritizes making code runnable over making code well-structured.**
+
+Once the code runs, AI tends to patch the existing code rather than redesign it. It's like building a house—if the foundation is crooked, no amount of later adjustments will straighten it.
+
+Therefore, planning is your foundation. Before the "code spaghetti" forms, you need to establish the overall structure and direction to avoid rework later.
+
+![](https://pic.yupi.icu/1/shitcode.png)
+
+Because planning is so crucial, many AI programming tools now offer a Plan Mode that helps generate plans first, then waits for human confirmation before generating code.
+
+For example, Cursor's planning mode:
+
+![Cursor Plan Mode](https://pic.yupi.icu/1/image-20260104170011408.png)
+
+In Claude Code, you can press `Shift + Tab` twice to enter planning mode.
+
+![](https://pic.yupi.icu/1/image-20260109143426848.png)
+
+In this mode, you can discuss back and forth with Claude until you're satisfied with the plan. Then switch to auto-accept edit mode, allowing Claude to complete the task in one go without requiring confirmation for each edit.
+
+This "plan first, execute later" approach significantly improves development efficiency by preventing wasted time on wrong directions.
+
+## Principle 2: MVP Thinking
+
+MVP stands for Minimum Viable Product. This is an extremely important mindset.
+
+Simply put, MVP thinking means: **Build the simplest possible working version first, then improve it gradually.**
+
+### Why Use MVP Thinking?
+
+Many students approach projects wanting everything perfect from the start. For example, when building a budgeting app, they imagine categories, statistics, charts, exports, multiple accounts... trying to include every possible feature at once.
+
+What happens?
+
+They get stuck halfway, or end up with something so complex they don't know how to modify it.
+
+MVP thinking helps avoid this. It keeps you focused on core functionality—getting that working and stable first before considering additions.
+
+For a budgeting app, the MVP version might need just three features:
+1. Record an expense
+2. View all expenses
+3. Calculate total amount
+
+That's it.
+
+Once this version works, you can then consider adding categories, charts, etc.
+
+### Benefits of MVP Thinking
+
+Using MVP thinking offers several clear advantages:
+1. Reduces difficulty: You don't need to solve all problems at once—just the most critical ones.
+2. Enables rapid validation: You can quickly create a working version to test your idea's feasibility.
+3. Maintains motivation: Seeing your creation grow incrementally boosts satisfaction and willingness to continue.
+4. Facilitates adjustments: If the direction proves wrong, you can pivot quickly without significant time loss.
+
+### Applying MVP Thinking
+
+When conversing with AI, explicitly state:
+"Let's build an MVP version first, containing only core features. We'll add others later."
+
+Then list the 2-3 most important features. This prevents AI from creating an over-engineered solution, instead focusing on perfecting core functionality.
+
+**Remember: Done is better than perfect.**
+
+Build it first, then refine it.
+
+## Principle 3: Iteration Beats Perfection
+
+This principle resembles MVP thinking but focuses differently. MVP concerns "what to do," while this principle addresses "how to do it."
+
+Simply put: **Don't expect perfection on the first try—approach your goal through multiple iterations.**
+
+### Why Iteration Matters
+
+AI is powerful but not magical. It won't fully grasp your requirements immediately or generate perfect code in one attempt.
+
+This is normal—just like explaining something to a friend sometimes requires multiple attempts before they understand.
+
+Thus, the correct approach is: **Break large tasks into small steps and proceed incrementally.**
+
+For example, when building a login page, don't ask AI to implement all functionality at once. Instead:
+1. First create a simple login form (just email and password fields)
+2. Then add form validation (check email format, password length)
+3. Next connect to backend API
+4. Finally add error messages and loading animations
+
+Each step is small and easily testable. Complete one step, test it, then proceed to the next.
+
+### Iteration Rhythm
+
+A good iteration rhythm looks like this:
+1. State requirements: Tell AI what you want
+2. Generate code: AI provides code
+3. Test run: Execute the code to see results
+4. Identify issues: Note what's incorrect
+5. Adjust/optimize: Explain problems to AI for improvements
+
+Repeat this cycle, with each iteration bringing your project closer to the goal.
+
+### Don't Fear Rework
+
+Many students see incorrect AI-generated code and think: "This is garbage—I have to start over."
+
+But that's unnecessary. In Vibe Coding, rework is normal because you're exploring and learning with AI.
+
+The key is ensuring each rework provides value. Understand why the previous approach failed and why the new solution works better—this drives continuous improvement.
+
+**Iteration isn't wasted time—it's the necessary path to success.**
+
+After extensive Vibe Coding, I can often predict whether AI will need rework. Regardless, I remain confident AI will eventually complete the task—just keep going!
+
+## Principle 4: Context is King
+
+This frequently overlooked principle is critically important.
+
+What is context?
+
+Simply put, it's background information AI needs—your project's tech stack, existing features, special requirements, etc.
+
+### Why Context Matters So Much
+
+**AI has no memory.**
+
+Each new conversation starts blank—it doesn't recall previous discussions.
+
+Without sufficient context, AI will proceed based on its own understanding, potentially creating outputs mismatched with your project.
+
+For example, if you simply say "Help me write a button," AI might use plain HTML, React, or Vue—with colors, sizes, and styles of its choosing.
+
+But if you specify: "My project uses React and Tailwind CSS. Please create a blue primary-color, rounded, shadowed button," AI delivers precisely what you need.
+
+This is context's power.
+
+### Providing Good Context
+
+Some techniques for effective context:
+1) Use project documentation: Remember the PRD from Principle #1?
+   Paste it at each new conversation's start so AI understands your project.
+
+2) Specify tech stack: Clearly state your frameworks/libraries. Example: "I'm using Next.js and Supabase."
+
+3) Reference existing code: For consistency with current features, share relevant code structures. Example: "Please structure this new page similarly to my settings page code."
+
+4) Describe design style: Always clarify design requirements. Example: "Our design is minimalist and professional with navy blue as primary color." Otherwise, AI might generate purple-blue gradient pages—you know how it goes.
+
+### Context Files
+
+Some AI tools support context files. For example, Claude Code can read a `CLAUDE.md` file in your project root as system prompts.
+
+You can document project basics, tech stack, and design standards here so AI automatically references them without repetitive explanations.
+
+This highly efficient approach comes highly recommended.
+
+## Principle 5: Think Like a Product Manager
+
+The final principle—and most commonly neglected.
+
+Many believe using AI means "tell it what to do, and it does it." But your role isn't just giving orders—you should act as a product manager.
+
+### What is Product Manager Thinking?
+
+What's a product manager's core responsibility?
+
+Translating user needs into requirements developers understand.
+
+In Vibe Coding, you're the product manager, and AI is your development team.
+
+You must:
+- Understand users' (your or target users') real needs
+- Break requirements into clear feature points
+- Consider every UX detail
+- Balance features, timelines, and quality
+
+### Focus on User Experience
+
+Good product managers don't just check feature boxes—they ensure comfortable usability.
+
+For example, a login page shouldn't merely function but also consider:
+- Friendly error messages for wrong passwords
+- "Logging in..." indicators during loading
+- Network lag perceptions
+
+AI won't necessarily address these details unless prompted.
+
+### Make Trade-offs
+
+Another critical product manager skill: knowing what to include and exclude.
+
+In Vibe Coding, you must make similar decisions. Not every feature or detail needs perfection—prioritize based on goals and timelines.
+
+For example:
+- If building a demo for friends, data persistence may matter less than impressive visuals.
+- For commercial products, data security and performance optimization become essential.
+
+These judgments require product manager thinking.
+
+### Communicating with AI
+
+Another vital product manager skill is clear communication to developers (here, AI).
+
+Don't say "make a nice button"—specify "a rounded, blue-background, white-text button that darkens on hover."
+
+Don't say "add search functionality"—explain "add a top-bar search box where enter-key presses display all articles containing the keyword."
+
+Clearer specifications yield better AI understanding.
+
+Developer friends best understand how frustrating unclear product managers can be.
+
+![](https://pic.yupi.icu/1/d2fea61b927529d4c3a4007e7c36379f.jpeg)
+
+## Principles in Practice
+
+Let me demonstrate these five principles working together through a real example.
+
+Suppose you want to build a "Quote of the Day" app displaying daily inspirational quotes.
+
+### Applying Principle 1: Plan First
+
+Instead of immediately asking AI to code, first plan together:
+"I want to build a daily quote app. Can you help clarify requirements?"
+
+AI might ask:
+- Quote source: Fixed list or API?
+- Can users refresh for new quotes?
+- Should favorite quotes be saved?
+
+Through these questions, you define the MVP: **Display one random quote on launch with a refresh button.**
+
+### Applying Principle 2: MVP Thinking
+
+You decide on the simplest version first:
+1. One page
+2. Display one quote
+3. A "New Quote" button
+
+Other features (e.g., favorites, sharing) come later.
+
+### Applying Principle 3: Iterative Development
+
+Break tasks into small steps:
+1) Create a basic page showing one fixed quote.
+2) Add a quotes array for random selection.
+3) Add a "New Quote" button displaying different quotes.
+
+Each small step is easily testable and adjustable.
+
+### Applying Principle 4: Provide Context
+
+In every conversation, specify:
+"I'm using React and Tailwind CSS. Design is minimalist and warm with orange as primary color."
+
+This ensures AI-generated code matches your project.
+
+Professional AI tools like Cursor maintain context automatically, eliminating repetitive explanations.
+
+### Applying Principle 5: Product Manager Thinking
+
+Consider UX details like:
+- Adding fade animations when switching quotes for smoother transitions.
+- Automatically adjusting font size for long quotes.
+
+These refinements elevate your app's polish.
+
+## Final Thoughts
+
+These five core principles represent my most important Vibe Coding insights. They're not complex techniques but simple, effective mindsets.
+
+Let me recap:
+1. Planning is Everything: Plan thoroughly before coding.
+2. MVP Thinking: Build the simplest working version first.
+3. Iteration Beats Perfection: Progress incrementally through small steps.
+4. Context is King: Provide AI sufficient background information.
+5. Think Like a Product Manager: Focus on UX and make strategic trade-offs.
+
+While simple in concept, mastering these requires practice. Consciously apply them in your next project and observe the results.
+
+Remember, Vibe Coding isn't just about having AI write code—it's about guiding AI and managing the entire development process. Mastering these principles transforms you from someone who "uses AI" to someone who "uses AI effectively."
+
+In my next article, I'll explain techniques for efficient AI communication—"prompt engineering" skills.
+
+You've got this! 💪
+
+## Recommended Resources
+
+1) Yupi AI Navigation: [Comprehensive AI resources, latest AI news, free AI tutorials](https://ai.codefather.cn)  
+2) Code Navigation Learning Community: [Learning paths, programming tutorials, practical projects, career guides, Q&A](https://www.codefather.cn)  
+3) Programmer Interview Handbook: [Internship/campus/social recruitment high-frequency topics, company problem analysis](https://www.mianshiya.com)  
+4) Programmer Resume Builder: [Professional templates, rich examples, interview preparation](https://www.laoyujianli.com)  
+5) 1-on-1 Mock Interviews: [Essential for internship/campus/social recruitment interviews and job offers](https://ai.mianshiya.com)