feat: 同步 vibe 教程到 AI 导航知识库

[GitHub Global] Add translations for en

.github/workflows/sync-vibe-coding-course.yml

@@ -0,0 +1,77 @@
+name: 同步 Vibe 教程变动内容到 AI 导航后端服务
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  send-file-list:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 检出代码
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: 获取分类变更文件列表并 POST
+        env:
+          POST_URL: ${{ secrets.SYNC_AI_GUIDE_URL }}
+          AUTH_TOKEN: ${{ secrets.SYNC_AI_COURSE_TOKEN }}
+        run: |
+          # 关闭 Git 路径转义，防止中文乱码
+          git config --global core.quotepath false
+
+          # 1. 基础校验
+          if [ -z "$POST_URL" ]; then
+            echo "Error: SYNC_AI_GUIDE_URL is not set."
+            exit 1
+          fi
+
+          # 2. 确定对比范围
+          BEFORE_SHA=${{ github.event.before }}
+          CURRENT_SHA=${{ github.sha }}
+
+          # 如果是新分支或首次推送，对比当前提交与父提交；如果没有父提交，对比空树
+          if [ "$BEFORE_SHA" = "0000000000000000000000000000000000000000" ]; then
+            # 4b825dc... 是 git 的空树 SHA 
+            BEFORE_SHA=$(git rev-parse $CURRENT_SHA^ 2>/dev/null || echo "4b825dc642cb6eb9a060e54bf8d69288fbee4904")
+          fi
+
+          # 3. 定义函数：根据过滤器获取 JSON 数组
+          # A: 新增, M: 修改, D: 删除
+          get_json_list() {
+            local filter=$1
+            local files=$(git diff --no-renames --name-only --diff-filter=$filter $BEFORE_SHA $CURRENT_SHA)
+            if [ -z "$files" ]; then
+              echo "[]"
+            else
+              echo "$files" | jq -R . | jq -s -c .
+            fi
+          }
+
+          ADDED_JSON=$(get_json_list A)
+          MODIFIED_JSON=$(get_json_list M)
+          DELETED_JSON=$(get_json_list D)
+
+          echo "Added: $ADDED_JSON"
+          echo "Modified: $MODIFIED_JSON"
+          echo "Deleted: $DELETED_JSON"
+
+          # 4. 构造最终的 JSON Payload
+          # 使用 jq 构造可以自动处理所有的转义问题，防止 curl 报错
+          PAYLOAD=$(jq -n \
+            --arg repo "${{ github.repository }}" \
+            --argjson addedFileList "$ADDED_JSON" \
+            --argjson modifiedFileList "$MODIFIED_JSON" \
+            --argjson deletedFileList "$DELETED_JSON" \
+            '{repository: $repo, addedFileList: $addedFileList, modifiedFileList: $modifiedFileList, deletedFileList: $deletedFileList}')
+
+          # 5. 发送 POST 请求
+          # 注意："$POST_URL" 必须加双引号
+          curl -X POST "$POST_URL" \
+            -H "Content-Type: application/json" \
+            -H "Authorization: Bearer $AUTH_TOKEN" \
+            -d "$PAYLOAD" \
+            --fail-with-body

README.md

@@ -22,6 +22,13 @@
 
 
 
+## 🌐 Translations
+
+[English](./translations/en/README.md)
+
+---
+
+
 ## 🔥 鱼皮的 Vibe Coding 零基础入门教程
 
 

translations/en/Vibe Coding 零基础教程/00 Vibe Coding 简介.md

@@ -0,0 +1,417 @@
+# Introduction to Vibe Coding
+
+Hello, I’m Yupi, a former full-stack developer at Tencent and an [AI programming blogger](https://space.bilibili.com/12890453) with over 2 million followers across platforms. I’m also the creator of more than 10 self-developed products, including [AI Navigation](https://ai.codefather.cn) and [Programming Navigation](https://www.codefather.cn).
+
+If you’ve ever wanted to learn programming but were discouraged by complex syntax and difficult concepts; or if you’re a traditional programmer tired of repetitive code; or if you have great ideas and want to quickly develop and monetize your own product—then congratulations! My tutorial series, **"Vibe Coding: Zero to Hero"**, might be just what you need.
+
+By 2026, the rules of product development have completely changed. The advent of AI has transformed programming from "writing code" to "writing requirements," and from "memorizing syntax" to "discussing needs." This new approach to programming is called **Vibe Coding**.
+
+In this article, I’ll explain in the simplest terms: What is Vibe Coding? Why will it become the mainstream programming method of the future? And how can you start learning it?
+
+Don’t worry about not understanding—I’ll explain it to you as if we’re having a casual chat with a friend.
+
+Let’s get started!
+
+---
+
+## 1. What is Vibe Coding?
+
+In one sentence, **Vibe Coding is a programming approach where you use natural language (plain English) to chat with AI, allowing AI to generate, modify, and optimize code for you.**
+
+You might say: Isn’t that just using AI to write code?
+
+Well, yes, but true Vibe Coding is more than just having AI write a few lines of code. It’s a completely new development mindset and workflow.
+
+To put it formally, Vibe Coding is:
+
+> An intent-driven development model where natural language prompts drive large language models (LLMs) to directly generate and iterate code.
+
+In this model:
+- You focus on "figuring out what to do" (expressing intent)
+- AI handles "making it happen" (implementing logic)
+- You iterate and optimize together (collaborative evolution)
+
+You don’t need to remember this complex definition. Just know this:
+
+**Vibe Coding = Chatting with AI in plain language + AI writing code for you + Iterating and optimizing together**
+
+![](https://pic.yupi.icu/1/whatisvibecoding%E5%A4%A7.jpeg)
+
+---
+
+### Why is it called "Vibe" Coding?
+
+The word "Vibe" originally means atmosphere or feeling.
+
+In programming, it has a special meaning: **You only need to tell AI the "feeling" you want, and AI can turn the ideas in your head into real programs.**
+
+For example:
+- "I want a clean and modern expense tracking page," and AI generates a sleek interface.
+- "This button should have an animation when clicked," and AI adds the animation.
+- "Change this page to dark mode," and AI redesigns the color scheme.
+
+Pretty magical, right?
+
+This is the charm of Vibe Coding—it makes programming as natural as chatting.
+
+**So why call it "Atmosphere Programming"?**
+
+Here’s my take.
+
+When developing with Vibe Coding, the entire work atmosphere changes. In the past, programmers would frown while typing code, spending hours debugging and searching online. Now, they mostly stare at the editor, typing occasionally (chatting with AI), with relaxed expressions, and sometimes even getting excited!
+
+Not only does the developer’s work atmosphere change, but the entire office vibe shifts too. Developers discuss problems, and colleagues from product and operations can chime in because everyone can quickly validate ideas with AI.
+
+**Atmosphere Programming—it’s real.**
+
+---
+
+## 2. Core Idea: Intent-Driven Programming
+
+What is intent-driven?
+
+In traditional programming, you write code to tell the computer "how" to do something:
+
+```python
+# Traditional way: You write every step
+total = 0
+for item in shopping_cart:
+    total = total + item.price
+print(total)
+```
+
+In Vibe Coding, you just tell AI "what" to do:
+
+```
+You: Calculate the total price of all items in the shopping cart
+AI: Got it, I’ll implement this feature
+```
+
+See the difference? You don’t need to worry about loops or variable names—you just need to clearly express your intent, and AI will handle the implementation.
+
+In the era of Vibe Coding, the most important "programming language" isn’t Python or JavaScript—**it’s your native language**!
+
+This is truly Chinese programming—far surpassing anything like Yi Language or Q Language that I’ve encountered before.
+
+In the past, learning programming required memorizing:
+- How to define variables
+- How to write loops
+- How to call functions
+- Various syntax rules
+
+Now, you just need to speak plain language:
+- "I want to make a to-do list"
+- "This button should redirect to the homepage when clicked"
+- "Show a red error message when the user inputs incorrectly"
+
+**Your intent is your code logic.**
+
+---
+
+### AI is Your Programming Partner
+
+Many people treat AI as a tool, but in Vibe Coding, AI isn’t just a tool—it’s your programming partner:
+- You’re the product manager: Responsible for figuring out what to do
+- AI is the engineer: Responsible for making it happen
+- You’re a team: Discussing, iterating, and optimizing together
+
+This collaborative model turns programming from a "lonely battle" into a "pleasant conversation."
+
+---
+
+## 3. Traditional Programming vs. Vibe Coding
+
+Let me use a table to help you understand the differences between these two mindsets:
+
+| Dimension | Traditional Programming | Vibe Coding |
+|-----------|-------------------------|-------------|
+| **Core Skill** | Writing code (memorizing syntax) | Expressing needs (speaking plain language) |
+| **Learning Focus** | Programming languages, algorithms, data structures | Product thinking, need expression, iteration optimization |
+| **Work Style** | Writing from scratch | Generating through AI conversation |
+| **When Problems Arise** | Debugging, checking docs, searching | Telling AI the error and letting it fix it |
+| **Optimizing Code** | Refactoring, optimizing algorithms | Telling AI the optimization direction |
+| **Learning Curve** | Steep (months to years) | Gentle (can get started in days) |
+| **Target Audience** | STEM background, strong logical thinking | Anyone who can express needs |
+
+For example, if you want to build a weather app.
+
+With traditional programming:
+1. Learn a programming language (e.g., JavaScript)
+2. Learn how to build a webpage
+3. Learn how to call a weather API
+4. Learn how to process JSON data
+5. Learn how to design the interface
+6. Spend weeks writing code bit by bit
+
+With Vibe Coding:
+1. Tell AI: "Build me a weather query webpage where I can enter a city name and display the temperature and weather conditions"
+2. AI generates the initial code
+3. After seeing the result, say: "Add a search history feature"
+4. AI adds it
+5. Say: "Change the interface to a blue theme for a fresher look"
+6. AI adjusts it
+7. Done in half an hour!
+
+![](https://pic.yupi.icu/1/codingway%25E5%25A4%25A7.jpeg)
+
+See the difference? Traditional programming focuses on "how," while Vibe Coding focuses on "what." **Clearly expressing needs is key.**
+
+---
+
+## 4. A Real-Life Example
+
+After all this theory, let me show you a real Vibe Coding case.
+
+### Background
+
+I have a teacher friend who used to spend hours every week manually editing attendance and homework completion reports for each student to send to parents.
+
+She asked me if I could create a tool to automatically generate weekly reports based on student information.
+
+### Implementing with Vibe Coding
+
+I opened Cursor (a popular AI code editor), created an empty directory (to hold the generated project code), and prepared to chat with AI:
+
+![](https://pic.yupi.icu/1/image-20260104123610886.png)
+
+Round 1:
+```
+Me: Build me a student weekly report generator webpage
+Requirements:
+1. Can input student name, attendance days, and homework completion count
+2. Clicking the generate button automatically creates a weekly report text
+3. Can copy the text to the clipboard with one click
+```
+
+AI immediately generated an initial page with input fields and a button.
+
+![](https://pic.yupi.icu/1/image-20260104123951214.png)
+
+Round 2:
+```
+Me: Change the report format to this:
+"【Weekly Report】{Name}’s performance this week: Attended {Attendance} days, completed {Homework} assignments. {Evaluation}"
+Where the evaluation is automatically generated based on completion
+```
+
+AI modified the code, adding a smart evaluation feature (though not very smart).
+
+![](https://pic.yupi.icu/1/image-20260104124115828.png)
+
+Round 3:
+```
+Me: The interface is too plain. Change it to a fresh green theme with rounded corners and shadows
+```
+
+AI beautified the interface.
+
+![](https://pic.yupi.icu/1/image-20260104124230581.png)
+
+Round 4:
+```
+Me: Add a history feature to view previously generated reports
+```
+
+AI added the history feature.
+
+![](https://pic.yupi.icu/1/image-20260104124459035.png)
+
+From start to finish, it took less than **10 minutes**. My friend now uses this tool weekly, saving enough time to play a round of Werewolf with me.
+
+Notice what I did in this process:
+- I didn’t write a single line of code (AI wrote it all)
+- I just clearly expressed the requirements
+- I iterated and optimized through multiple rounds of conversation
+- I focused on functionality and results, not implementation details
+
+This is the magic of Vibe Coding!
+
+---
+
+## 5. What Can Vibe Coding Do?
+
+You might wonder: Vibe Coding sounds cool, but what exactly can it do?
+
+The answer is: **Almost any software development you can think of!**
+
+For example, these practical applications:
+
+1) Web apps: Personal portfolio websites, online tools (to-do lists, expense tracking, notes), corporate websites, blog systems, online stores
+
+2) Mini-programs / Apps
+
+3) AI apps: Chatbots, smart writing assistants, image generation tools, voice recognition apps
+
+4) Data processing tools: Data visualization, automated reporting, spreadsheet tools
+
+5) Automation scripts: Batch file processing, web scraping tools, automated testing
+
+6) Auxiliary tools: Websites for presenting PPTs, prototype and demo websites, architecture and flowchart diagrams, animation demo websites
+
+As Vibe Coding evolves, our problem-solving mindset expands. For many tasks, I now think: Can AI generate a website to solve this?
+
+This shift in thinking allows us to validate ideas and showcase creativity faster.
+
+I’ve personally used Vibe Coding to create dozens of projects, such as:
+
+1) A mini-program that helps users learn through questions: [《Learning Hero》](https://bilibili.com/video/BV1yMn3zuE7L)
+
+![](https://pic.yupi.icu/1/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%BC%94%E7%A4%BA%E6%8B%BC%E5%9B%BE.png)
+
+2) A website that helps programmers improve requirement analysis and technology selection: [《Programmer’s Training Ground》](https://bilibili.com/video/BV1dW4tz9E5M)
+
+![](https://pic.yupi.icu/1/1760438722374-4e8edebc-d975-4873-8f06-9e9856733694.png)
+
+And various image processing tools, data processing tools, data analysis tools, etc. In most of these projects, the code was generated through conversations with AI—I could sip cola while watching AI do the work~
+
+---
+
+## 6. Why is Now the Best Time to Learn Programming?
+
+If you’ve ever been discouraged from learning programming, I have good news for you: **Today is the easiest time in human history to learn programming!**
+
+**The Barrier Has Never Been Lower**
+
+In the past, learning programming required months of studying basics, facing countless errors and debugging. Now, learning Vibe Coding only requires speaking plain language and expressing needs—you can get started in days, programming as naturally as chatting, with AI solving most problems.
+
+**From Idea to Product is Shorter Than Ever**
+
+In the past, you might have a great idea, but realizing it could take months of learning programming, weeks or months of development, or hiring a programmer—often leading to abandoning the idea.
+
+Now, with Vibe Coding, you can think of an idea today and build it today—even deploy it online—with near-zero cost.
+
+**Creativity is More Important Than Technology**
+
+In the AI era, the most important skill isn’t "writing code," but having creativity, expressing needs (communication skills), and iterating and optimizing (product thinking). These are skills anyone can develop.
+
+**Lifelong Learning is Possible**
+
+In the past, programming technologies evolved too quickly—what you learned could quickly become outdated. Now, with AI assistants, new technologies are already learned by AI—you just need to tell AI to implement them, freeing you to focus on creativity and products.
+
+---
+
+## 7. 3 Major Misconceptions About Vibe Coding
+
+Before you start learning Vibe Coding, I must help you dispel 3 common misconceptions. Many hesitate to start because of these.
+
+### Misconception 1: Is Vibe Coding Cheating?
+
+Of course not!
+
+Some traditional programmers might say: Using AI to write code means you don’t know how to program.
+
+But let’s think:
+- 100 years ago, mental calculators thought using calculators was cheating
+- 30 years ago, handwritten coders thought using IDEs was cheating
+- Today, handwritten coders think using AI is cheating
+
+**Tool advancement isn’t cheating—it’s efficiency improvement.**
+
+Using AI to write code is like designers using Photoshop or architects using CAD—it’s a normal productivity tool.
+
+The key isn’t how you implement it, but whether you can deliver and solve problems.
+
+---
+
+### Misconception 2: Will Vibe Coding Make Me Lose Learning Ability?
+
+Some worry: If I always let AI write code, won’t I learn nothing?
+
+Quite the opposite! Vibe Coding is the best way to learn:
+- After AI generates code, you can read and understand it
+- If you don’t understand something, ask AI to explain
+- Try modifying the code and see the results
+- Learn while doing projects
+
+I learned many new technologies by doing projects in college. Now, with Vibe Coding, even if you can’t independently create projects at first, after using AI for a few projects, you’ll understand some new technologies’ code.
+
+**Learning through practice is far more efficient than studying textbooks!**
+
+---
+
+### Misconception 3: Can Vibe Coding Only Handle Simple Toy Projects?
+
+Of course not! It can handle complex projects too!
+
+Some think AI can only write simple code, and complex projects still require programmers.
+
+But in reality, today’s AI is incredibly powerful:
+- Can handle projects with tens of thousands of lines of code
+- Can understand complex business logic
+- Can use various frameworks and tech stacks
+- Can help debug complex bugs
+
+Not to mention the hype online about independently using AI to develop monetized projects, even my team’s [Programming Navigation Mini-program](https://codefather.cn/) was developed with Vibe Coding in a week. I also live-streamed using AI to develop a full-stack project: [《AI Programmer’s Training Ground》](https://bilibili.com/video/BV1dW4tz9E5M).
+
+![](https://pic.yupi.icu/1/1760439049424-532d6ad1-0600-4654-bd9b-311d48cfdc2f.png)
+
+The key isn’t AI’s ability, but your ability to express needs and iterate.
+
+---
+
+## 8. Challenges of Vibe Coding
+
+While Vibe Coding is powerful, I must honestly tell you it still has some limitations. Understanding these will help you use Vibe Coding more rationally.
+
+---
+
+### 1. Homogeneous Interfaces
+
+You might notice that many AI-generated websites look similar, especially in color—often light purple or blue gradients. This is because such designs (or referenced style codes) are common in AI’s training data, so it tends to generate similar styles.
+
+![](https://pic.yupi.icu/1/1752744100231-3dc376f3-7571-45c6-8f7c-6098ddde35cf.png)
+
+If you want unique designs, you need to specify colors, styles, or reference cases in your prompts, or provide design drafts for AI to reference.
+
+---
+
+### 2. Risks of Uncontrollable Code
+
+A more troublesome issue is that AI-generated code can be uncontrollable. AI is currently more suited for small projects. If you use AI in a sizable codebase, debugging bugs can lead to a **deadlock**—you can’t understand the AI-generated code but don’t want to abandon it. In AI communities, developers have complained about colleagues breaking projects with AI:
+
+![](https://pic.yupi.icu/1/1752736716516-a86b3751-7c1f-42ad-b15a-b5721614f023.png)
+
+This is why I recommend:
+- Let AI generate simple, clear code
+- Test every generated code
+- Roll back promptly when issues arise—don’t go down a dead-end road
+- If possible, learn some basic programming knowledge
+
+---
+
+### 3. Risk of Skill Degradation
+
+Long-term use of Vibe Coding might erode some basic programming skills. Just like long-term use of calculators reduces mental math ability.
+
+So I recommend programmers with a foundation:
+- Don’t rely entirely on AI—maintain some handwritten coding ability
+- Try to understand AI-generated code, don’t blindly use it
+- Regularly practice without AI
+- Treat AI as an assistant, not a replacement
+
+But honestly, this isn’t an issue for absolute beginners—you have no programming skills to degrade and can learn a lot through Vibe Coding.
+
+---
+
+## 9. Learning Roadmap
+
+After all this, you’re probably eager to start learning. So where should you begin?
+
+---
+
+### Recommended Path for Absolute Beginners
+
+I’ve prepared a complete learning roadmap for you:
+
+![](https://pic.yupi.icu/1/vibecodingroadmap%E5%A4%A7.jpeg)
+
+If you’re completely new, I recommend this path, with a very relaxed schedule.
+
+Week 1:
+- Day 1: Finish this article (understand Vibe Coding)
+- Day 2: Complete the quick-start tutorial (create your first project)
+- Days 3-7: Learn no-code platforms
+
+Weeks 2-3:
+- Learn AI code editors (e.g., Cursor)
+- Complete 3-5 simple projects

translations/en/Vibe Coding 零基础教程/01 快速上手 Vibe Coding.md

@@ -0,0 +1,367 @@
+# Getting Started with Vibe Coding
+
+> Create and deploy your first web app in 10 minutes
+
+Hello, I’m Yupi, a former full-stack developer at Tencent and an [AI programming blogger](https://space.bilibili.com/12890453) with 2 million followers across platforms. I’m also the creator of over 10 self-developed products like [AI Navigation](https://ai.codefather.cn) and [Programming Navigation](https://www.codefather.cn).
+
+In my previous article, we discussed the philosophy and mindset behind Vibe Coding. Now, it’s time to put it into practice!
+
+In this article, I’ll guide you step-by-step to create your first web app in just 10 minutes and deploy it online so that people worldwide can access it.
+
+Yes, you heard it right—no prior programming knowledge is required. All you need is the ability to type and browse the internet.
+
+---
+
+## 1. Preparation
+
+Before we begin, let’s make some simple preparations. Don’t worry—it’s quick and easy, taking only 5 minutes.
+
+What you’ll need:
+
+1. A computer with internet access (Windows or Mac)
+2. A browser (Chrome, Edge, or Safari)
+3. An AI tool account (we’ll use Bolt.new, which is free)
+4. A GitHub account (for deployment, also free)
+
+That’s it! No need to install any programming software or learn any code. Everything is done in your browser.
+
+💡 What is GitHub?
+
+[GitHub](https://github.com/) is the most popular, free, open-source code hosting platform. Think of it as a “cloud drive” for storing and managing code. Users or teams can upload their code to GitHub for sharing, maintenance, and downloading. Developers can freely access code on GitHub for learning or referencing.
+
+If you’re interested in GitHub, check out [Yupi’s Beginner-Friendly GitHub Learning Path](https://www.codefather.cn/course/1789189862986850306/section/1789190804671012866) for free learning.
+
+---
+
+### How to Choose an AI Tool?
+
+For complete beginners, I highly recommend starting with Bolt.new. It’s entirely online, requires no software installation, and can be accessed directly in your browser. The best part is that you can see the results of your code immediately and publish it online with just one click—zero barriers. Plus, it offers free credits, perfect for beginners.
+
+Once you’re comfortable, you can move on to professional tools like Cursor.
+
+Note: If Bolt.new is inaccessible due to network issues, you can try [Meituan NoCode](https://nocode.cn/) or [Baidu Miaoda](https://www.miaoda.cn/), which are similar AI app generation platforms.
+
+---
+
+### Registering on Bolt.new
+
+1) Open your browser and visit: https://bolt.new  
+2) Click the "Sign in" button in the top-right corner  
+3) Log in using your Google account, GitHub account, or email (recommend using GitHub for deployment later)
+
+Once logged in, the preparation is complete. You can now start generating projects by typing your requirements in the chat box.
+
+![](https://pic.yupi.icu/1/image-20260104140815455.png)
+
+---
+
+## 2. Choose Your First Project
+
+Your first project is crucial as it directly impacts your learning experience. I recommend choosing a simple yet complete project that’s practical and delivers visible results.
+
+Based on my experience, the following projects are beginner-friendly and easy to complete:
+
+1) **Personal Business Card Website**: Showcase your name, avatar, self-introduction, and contact information. Simple and elegant. Perfect for those who want a quick sense of accomplishment.  
+2) **To-Do App**: A simple task management tool (commonly known as a Todo List) where you can add tasks, mark them as completed, and delete them. Ideal for those who want to create something practical.  
+3) **Countdown Website**: Set a target date (e.g., an exam or birthday) and display the remaining days in real-time with a visually appealing design. Great for those who want to create something creative.
+
+In this tutorial, I’ll use the classic **To-Do App** as an example because it’s feature-complete, practical, and allows you to experience the full development process. If you prefer another project, the steps are the same—just replace the requirements with your desired ones.
+
+---
+
+## 3. Generate Code by Conversing with AI
+
+Now, let’s dive into the most exciting part—conversing with AI to generate code.
+
+---
+
+### Round 1: Describe Basic Requirements
+
+In Bolt.new’s chat box, type the following (you can copy-paste):
+
+```
+Please create a to-do app webpage with the following requirements:
+
+1. Functional Requirements:
+   - Ability to input task content and add it to the list
+   - Each task has a checkbox in front; clicking it marks the task as completed
+   - Completed tasks are displayed with a strikethrough
+   - Each task has a delete button at the end
+   - Display the number of completed and uncompleted tasks
+
+2. UI Requirements:
+   - Clean, modern design style
+   - Use a fresh blue color scheme
+   - Rounded buttons and input fields
+   - Subtle shadow effects
+   - Responsive design that works well on mobile devices
+
+3. Technical Requirements:
+   - Use HTML + CSS + JavaScript
+   - Data is saved in browser local storage; refreshing the page won’t lose data
+```
+
+You can also choose a large model, use plan mode, add attachments, or enhance prompts, but I recommend ignoring these for now. Just click send and wait for AI’s response.
+
+![](https://pic.yupi.icu/1/image-20260104141314370.png)
+
+---
+
+### What is AI Doing?
+
+After sending, you’ll see Bolt.new start working.
+
+The AI understands your requirements, creates the project file structure, and automatically generates the webpage code. The entire process takes about 2 minutes.
+
+![](https://pic.yupi.icu/1/image-20260104141512389.png)
+
+Once the code is generated, a preview will automatically appear on the right. You’ll see an input field, an add button, and a task list area.
+
+Try typing "Learn Vibe Coding with Yupi" in the input field and click the add button to see the result.
+
+![](https://pic.yupi.icu/1/image-20260104141637255.png)
+
+---
+
+### Round 2: Optimize Details
+
+After seeing the initial version, you might want to tweak some details. For example:
+
+```
+Great! But I’d like to make some adjustments:
+
+1. Change the input field placeholder text to "What’s on your to-do list today?"
+2. Change the add button to "➕ Add Task"
+3. Change the title to "My To-Do List" and add a cute icon
+4. Change the background to a gradient from light blue to light purple
+5. Add a "Clear Completed" button
+```
+
+You can also enable the visual modification feature, select the element you want to modify, and tweak it directly.
+
+![](https://pic.yupi.icu/1/image-20260104141819294.png)
+
+The AI will modify the code based on your requests, and you’ll soon see the updated result.
+
+![](https://pic.yupi.icu/1/image-20260104142026165.png)
+
+---
+
+### Round 3: Add New Features
+
+If you want to add more features, continue the conversation with AI:
+
+```
+Add a few more features:
+
+1. Tasks can have priority levels (high, medium, low) indicated by different colors
+2. Ability to edit added tasks
+3. Add a "Clear All" button with a confirmation prompt
+4. Display a friendly message when the task list is empty
+```
+
+The AI will continue to implement these features for you.
+
+![](https://pic.yupi.icu/1/image-20260104142238907.png)
+
+---
+
+### Conversation Tips
+
+When conversing with AI, keep these tips in mind:
+
+1. Be specific with requirements: Instead of saying "make it look better," say "change the background to a blue gradient and add rounded corners to buttons."  
+2. Don’t change too much at once: Limit yourself to 1~5 requests per round, review the results, and continue.  
+3. Report issues directly: If there’s a bug or something doesn’t look right, tell AI directly, e.g., "There’s an issue with XX."  
+4. Ask for explanations: If you don’t understand something, ask, "What does this code do?"
+
+---
+
+## 4. Verify the Results
+
+Now, your to-do app is complete. Let’s test all the features:
+
+1) Type "Learn Vibe Coding with Yupi" in the input field and click the add button. The task appears in the list.  
+2) Click the checkbox in front of the task—the task text shows a strikethrough. Click the delete button, and the task disappears from the list.
+
+Finally, click the device icon above the preview window to see how it looks on mobile and different screen sizes.
+
+![](https://pic.yupi.icu/1/image-20260104142538383.png)
+
+If you find that a feature isn’t working properly, don’t panic. Describe the issue in detail to AI, e.g., "When I click the delete button, the task isn’t removed." AI will fix the bug, and you can test again.
+
+This is the charm of Vibe Coding—AI solves problems for you!
+
+---
+
+## 5. Deploy Online
+
+Now that your app is complete, let’s publish it online so people worldwide can access it!
+
+---
+
+### Quick Deployment (Recommended)
+
+Bolt.new offers the simplest deployment method. Just click the "Publish" button in the top-right corner:
+
+![](https://pic.yupi.icu/1/image-20260104142853639.png)
+
+Wait a moment, and you’ll see the published accessible URL in the chat box:
+
+![](https://pic.yupi.icu/1/image-20260104142912318.png)
+
+Once deployed, you should be able to access your app from any browser or share the URL with friends.
+
+Congratulations, your first web app is live—it’s that simple! 🎉
+
+💡 If you find the URL unattractive, Bolt.new supports custom domains, but this is only available in the premium version, which I don’t think is necessary.
+
+---
+
+### Extended Knowledge - Manual Deployment
+
+Yupi has shared multiple video tutorials on quickly deploying projects:
+
+- [Vercel Project Deployment Tutorial](https://www.bilibili.com/video/BV1TV4y1j76t)  
+- [Cloud Editor + Vercel + Object Storage + Intranet Penetration: 4 Deployment Methods](https://www.bilibili.com/video/BV1UZ4y197i1)  
+- [Nginx + Baota: 2 Ways to Deploy a Personal Blog](https://www.bilibili.com/video/BV1rU4y1J785)  
+- [WordPress Personal Blog Setup](https://www.bilibili.com/video/BV14q4y1R7XM)  
+- [4 Mainstream Frontend/Backend Project Deployments](https://www.codefather.cn/course/1790943469757837313/section/1791075571845345281?contentType=video&tabKey=videoList)
+
+Additionally, Yupi has guided over 20 projects on [Programming Navigation](https://codefather.cn/), covering almost every deployment method. If you want to become a professional programmer, I recommend learning these.
+
+- [AI No-Code App Generation Platform Project](https://www.codefather.cn/course/1948291549923344386): 1Panel + Nginx Frontend + Java Backend (JAR Package)  
+- [Code Generator Sharing Platform Project](https://www.codefather.cn/course/1790980795074654209): Baota Panel + Nginx Frontend + Java Project Manager (JAR Package) Backend Deployment  
+- [AI Quiz App Platform Project](https://www.code-nav.cn/course/1790274408835506178): Vercel Frontend + Docker Backend + Cloud Hosting Serverless Platform Deployment  
+- [AI Super Agent Project](https://www.codefather.cn/course/1915010091721236482): Docker Frontend + Docker Backend + Cloud Hosting Serverless Platform Deployment  
+- [OJ Online Judge Project](https://www.codefather.cn/course/1790980707917017089): Docker Compose Backend Microservice Deployment
+
+Mastering these deployment methods will prepare you for most deployment needs.
+
+---
+
+## 6. Understand What You’ve Built
+
+Now that your project is complete, let’s spend a few minutes understanding what you’ve built to help you create better projects in the future.
+
+---
+
+### Project Structure
+
+First, you should know that the foundation of a web app is the "frontend trio":
+
+- **HTML (Structure)**: Defines the elements on the page, such as input fields, buttons, task lists, and statistics.  
+- **CSS (Styling)**: Defines how the page looks, including colors, fonts, sizes, layout, spacing, and animations.  
+- **JavaScript (Functionality)**: Defines how the page works, including logic for adding tasks, marking them as completed, deleting tasks, and local storage.
+
+However, in this project, AI chose to use **React**, a modern frontend development framework, to implement the functionality. React is one of the most popular frontend frameworks, making development more efficient and code easier to maintain.
+
+So, you’ll see `.tsx` files in the project—these are React component files. Essentially, they are eventually converted into HTML, CSS, and JavaScript that browsers can understand.
+
+![](https://pic.yupi.icu/1/image-20260104162356144.png)
+
+Don’t worry if you don’t understand this now. If you’re interested in frontend development, check out [Yupi’s Latest Beginner-Friendly Frontend Learning Path](https://www.codefather.cn/course/1789189862986850306/section/1789190394078011393) for a quick start.
+
+---
+
+### Core Functionality Breakdown (Optional)
+
+Let’s look at how some key features are implemented:
+
+1) **Adding Tasks**: When you click the "Add Task" button, the program first retrieves the text from the input field, creates a new task object, adds the task to the list, saves it to local storage, clears the input field, and refreshes the page display. It’s as natural as writing a to-do item on paper and sticking it on the wall.  
+2) **Marking Tasks as Completed**: When you click the checkbox, the program finds the corresponding task, updates its completion status, updates local storage, refreshes the page display (adding a strikethrough to the task text), and updates the statistics. It’s like crossing off a task on paper with a pen.  
+3) **Local Storage**: You might wonder why tasks remain after refreshing the page. This is because the data is saved in the browser’s local storage (`localStorage`). Every time you modify a task, the program saves the latest data to `localStorage`. When you reopen the page, the program reads the saved data from `localStorage`. This ensures data isn’t lost even if you close the browser. It’s like writing your to-do list in a notebook that never gets lost.
+
+![](https://pic.yupi.icu/1/theoryofworksoftware%E5%A4%A7.jpeg)
+
+---
+
+### Ask AI for Explanations
+
+If you want to dive deeper into a specific part, ask AI directly:
+
+```
+Can you explain how local storage works?
+```
+
+Or:
+
+```
+What does this code do?
+[Paste code]
+```
+
+AI will explain it in simple terms.
+
+---
+
+## 7. Try Modifying and Optimizing
+
+Now that you have a practical mini-app, let’s try some modifications and optimizations to deepen your understanding.
+
+You can try:
+
+- Changing the color theme ("Change the app to a pink theme for a soft, cute feel")  
+- Modifying text ("Translate all text into English")  
+- Adjusting layout ("Move the statistics to the bottom of the page and center-align them")  
+
+Or add new features, such as:
+
+- Task search ("Add a search bar to search task content")  
+- Task categorization ("Add categorization to tag tasks")  
+- Export functionality ("Add a button to export all tasks as a text file")  
+
+You can also enhance the user experience to make the app more user-friendly:
+
+- Add shortcuts ("Press Enter to quickly add a task")  
+- Add animations ("Add a fade-in animation when adding a task and a slide-out animation when deleting a task")  
+- Optimize empty states ("When there are no tasks, display a cute illustration and encouraging text")  
+
+If you find it too easy, try adding:
+
+- Deadline functionality  
+- Task reminders  
+- Drag-and-drop sorting  
+- Dark mode toggle  
+- Support for multiple task lists  
+
+Whenever you want to add a new feature, tell AI, "I want to add [feature description]. How should I do it?" AI will help you implement it.
+
+---
+
+## Final Words
+
+Congratulations! You’ve completed your first hands-on experience with Vibe Coding.
+
+What you just did would have taken months of learning a few years ago. But today, you did it in just 10 minutes! That’s the power of Vibe Coding.
+
+Through this project, you’ve learned how to clearly describe requirements to AI, optimize projects through multiple rounds of conversation, collaborate with AI to solve problems, and publish projects online. Even though you didn’t write code, you’ve understood the basic structure of web apps, how user interactions are implemented, and the fundamentals of data storage.
+
+More importantly, you’ve developed the Vibe Coding mindset: **Focus on "what to do" rather than "how to do it,"** create first and optimize later, learn by doing projects rather than learning first, and treat AI as a programming partner rather than just a tool.
+
+This is just the beginning. As you work on more projects, you’ll find your ability to express requirements improving, your understanding of technology deepening, the complexity of what you can create increasing, and your creativity truly unleashed.
+
+Remember what I said in the first article: **In the AI era, creativity is more important than technical skills, ideas are more important than implementation, and iteration is more important than perfection.**
+
+---
+
+### Next Steps
+
+Next, I recommend completing 2~3 more projects of similar difficulty to solidify your skills, such as a personal business card website, a countdown app, a simple calculator, or a weather query tool.
+
+Practice is the best teacher. Only by actually doing will you truly understand the charm of Vibe Coding.
+
+Once you’re comfortable with Bolt.new and simple projects, you can continue with the advanced sections of this tutorial:
+
+- 【Advanced】Programming Tools  
+- 【Advanced】Project Practice  
+- 【Advanced】Tips and Tricks  
+- 【Advanced】Resource Library  
+
+You can also explore Cursor (a more professional AI code editor), GitHub (code management and collaboration), and more deployment platforms.
+
+You’ve got this! 💪
+
+---
+
+##

translations/en/Vibe Coding 零基础教程/10 编程工具/00 AI 编程工具大全.md

@@ -0,0 +1,149 @@
+# AI Programming Tools Guide
+
+> Choose the AI programming tool that's right for you
+
+Hello, I'm Yupi, a former Tencent full-stack developer and now an [AI programming content creator](https://space.bilibili.com/12890453) with 2 million followers across platforms. I'm also the creator of over 10 self-developed products including [AI Navigation](https://ai.codefather.cn) and [Programming Navigation](https://www.codefather.cn).
+
+If you've completed the [Essential Basics] section and successfully built your first web application, congratulations! You've already experienced the magic of Vibe Coding!
+
+But you might have some questions:
+
+- The web AI generator is nice, but I heard Cursor is more powerful. Which one should I use?
+- What's the difference between AI models like Claude, ChatGPT, and Gemini that I see mentioned online?
+- Some tools are free while others require payment. How should I choose?
+
+Don't worry - these confusions are completely normal. With dozens or even hundreds of AI programming tools on the market, even professional programmers can feel overwhelmed.
+
+This section is specifically designed to address these questions.
+
+## 1. Why Understand Programming Tools?
+
+In the traditional programming era, tool selection wasn't that crucial. Whether you used VS Code or Sublime Text, the code you wrote would be the same.
+
+But in the Vibe Coding era, **choosing the right tool can potentially increase your development efficiency by 10 times!**
+
+Why is that?
+
+Because different AI programming tools:
+
+1. Vary greatly in capability: Some can only generate simple code, while others can help you build entire projects
+2. Serve different scenarios: Some are better for prototyping, others for production, and some for learning
+3. Have significant cost differences: Some are completely free, while others cost hundreds per month
+4. Differ in learning curve: Some are ready to use immediately, while others require some foundational knowledge
+
+Choosing the right tool means working smarter; choosing the wrong one might make you think "Vibe Coding isn't all that special."
+
+## 2. Three Major Types of AI Programming Tools
+
+Before diving into specific tools, let's look at the basic categories of AI programming tools. Based on usage and complexity, I've divided them into three main types:
+
+![](https://pic.yupi.icu/1/toolstype%E5%A4%A7.jpeg)
+
+### No-Code Platforms
+
+Ready to use directly in your browser - no software installation or coding knowledge required. Perfect for complete beginners or those wanting to quickly create prototypes.
+
+Representative tools: Bolt.new, Lovable, Miaoda
+
+Advantages: Quick start, WYSIWYG, automatic deployment
+
+Limitations: Relatively simple functionality, may struggle with complex projects
+
+![](https://pic.yupi.icu/1/image-20260106100544197.png)
+
+### AI Code Editors
+
+Require download and installation. The interface resembles traditional code editors but comes with powerful built-in AI assistants. Suitable for those with some foundation who want to deeply learn Vibe Coding or work on complex projects.
+
+Representative tools: Cursor, Windsurf, Antigravity, Augment Code
+
+Advantages: Powerful features, high flexibility, suitable for large projects
+
+Limitations: Requires some learning curve, not very beginner-friendly
+
+![](https://pic.yupi.icu/1/image-20260106100559696.png)
+
+### Command Line Tools
+
+Interact with AI through terminal commands. Ideal for developers with programming experience or command line enthusiasts.
+
+Representative tools: Claude Code, Gemini CLI
+
+Advantages: Extremely efficient, highly automated, cost-effective
+
+Limitations: Requires technical foundation, not recommended for beginners
+
+![](https://pic.yupi.icu/1/image-20260106100958506.png)
+
+## 3. What Will This Section Cover?
+
+In this section, I'll provide a comprehensive understanding of all aspects of AI programming tools.
+
+### Main Content (Recommended to follow in order)
+
+1) AI Model Selection Guide  
+First introduces mainstream AI models (Claude, ChatGPT, Gemini, etc.), helping you understand their differences and selection criteria. This is the foundation for using all AI tools.
+
+2) No-Code Development Tools  
+Detailed explanations of various AI no-code platforms and AI application development platforms, including tools for quickly generating websites, platforms for building AI applications, and AI agent platforms capable of autonomously executing complex tasks.
+
+3) Professional Development Tools  
+In-depth introduction to AI code editors, AI command line tools, AI IDE plugins and other professional development tools to help you find the development approach that best suits you.
+
+4) Auxiliary Toolset  
+Shares practical auxiliary tools like version management, deployment hosting, MCP services, Agent Skills, and standardized development tools, along with my recommended tool combinations and practical experience.
+
+5) More AI Tool Recommendations  
+Provides specific tool combination suggestions and practical experience based on different scenarios and needs.
+
+### Side Content (Optional Learning)
+
+The tool practice section mainly explains usage methods and practical cases of specific tools, which can be studied selectively as needed.
+
+- **Spec-Driven Development**: Detailed tutorials on Spec-kit and OpenSpec
+- **AI Skill Libraries**: Installation and advanced usage of Agent Skills and Superpowers
+- **Command Line Tool Testing**: Practical evaluations of tools like OpenCode, Gemini CLI, TRAE SOLO
+- **AI Application Platforms**: Practical tutorials on no-code AI application development platforms like Dify
+
+## 4. How to Use This Section?
+
+You don't need to study all articles in this section - choose based on your situation:
+
+- If you're a complete beginner: Start with the "AI Model Selection Guide", then focus on "No-Code Platforms" for quick onboarding.
+- If you want deeper learning: Jump directly to "AI Code Editors" to learn Cursor's usage.
+- If you have programming experience: Check out "Command Line Tools" to try more efficient development approaches.
+- If you're unsure what to choose: Go straight to "My Tool Combination Recommendations" where I provide specific suggestions for different scenarios.
+- If you want in-depth knowledge of a particular tool: Read the corresponding supplementary articles and practical cases.
+
+## 5. What Will You Gain From This Section?
+
+After studying this section, you'll be able to:
+
+- Understand the characteristics and differences of various AI programming tools
+- Select appropriate tools based on your needs
+- Master usage methods and techniques of multiple mainstream tools
+- Learn how to combine multiple tools to improve efficiency
+- Build your own toolbox and development workflow
+- Master essential skills like version management and project deployment
+
+Choosing the right tools can truly make your development efficiency soar! 🛫
+
+## Final Words
+
+I know facing so many tools might feel overwhelming.
+
+Remember what I said in the [Essential Basics] section? Tools are just means - what matters is what you want to achieve.
+
+So don't obsess over "which tool is best", but rather think "which tool best fits my current needs".
+
+In this section, I'll use the most down-to-earth approach to help you understand these tools' relationships, enabling you to confidently select and use them.
+
+Go forth, future Vibe Coding masters! 💪
+
+## Recommended Resources
+
+1) Yupi's AI Navigation Site: [Comprehensive AI resources, latest AI news, free AI tutorials](https://ai.codefather.cn)  
+2) Programming Navigation Learning Circle: [Learning paths, programming tutorials, practical projects, job hunting guides, Q&A](https://www.codefather.cn)  
+3) Programmer Interview Cheat Sheet: [Internship/campus/social recruitment high-frequency test points, corporate question analysis](https://www.mianshiya.com)  
+4) Programmer Resume Builder: [Professional templates, rich example sentences, direct path to interviews](https://www.laoyujianli.com)  
+5) 1-on-1 Mock Interviews: [Essential for internship/campus/social recruitment interviews to get offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/10 编程工具/01 AI 模型选择指南.md

@@ -0,0 +1,220 @@
+# AI Model Selection Guide
+
+Hello, I'm Yupi.
+
+We've already explored the three major types of AI programming tools. But whether you choose no-code platforms, code editors, or command-line tools, they all share a common core - the **AI model**.
+
+You might be wondering:
+
+- Cursor offers choices like Claude, ChatGPT, Gemini - what's the difference between them?
+- Why do some say Claude is the best for programming while others recommend ChatGPT?
+- Are domestic large models reliable? How big is the gap compared to international models?
+
+Don't worry. In this article, I'll explain the characteristics of mainstream AI models in the most straightforward way and teach you how to choose the right model based on your needs.
+
+A quick note: AI models evolve rapidly. This article is based on the situation as of January 2026. New models may emerge in the future, or existing models' capabilities may change. So stay updated with the latest developments and adjust your choices flexibly.
+
+## 1. What is an AI Model?
+
+First, let's clarify a basic concept: What is an AI model?
+
+Simply put, **an AI model is the "brain" behind Vibe Coding tools**.
+
+When you input requirements into an AI programming tool, it's the AI model that understands your words; when you see generated code, it's also written by the AI model. Different AI models are like experts in different fields, each with their strengths. Some excel at writing code, others at organizing literature; some are fast, others produce high-quality output.
+
+To use an analogy:
+
+- AI programming tools (Cursor, Bolt.new) = Workbench
+- AI models (Claude, ChatGPT) = Programmers sitting at the workbench doing the work
+
+So, even when using the same Cursor, choosing Claude versus ChatGPT is like hiring two programmers with different styles to write code for you - the final results will naturally differ.
+
+![](https://pic.yupi.icu/1/whatisaimodel大.jpeg)
+
+## 2. Mainstream AI Models
+
+As of January 2026, the market offers a rich variety of AI models. Based on origin and positioning, they can be divided into three major camps:
+
+- Top international models: The three giants - Claude, ChatGPT, Gemini
+- Excellent domestic models: Cost-effective options like DeepSeek, Zhipu GLM, Tongyi Qianwen, Kimi
+- Open-source models: Llama, Qwen, etc., requiring some technical skills for deployment
+
+For learning Vibe Coding, focusing on the first two categories is sufficient. While open-source models are flexible, they have higher configuration and usage barriers, making them less suitable for beginners.
+
+![](https://pic.yupi.icu/1/image-20260106202328517.png)
+
+Next, I'll introduce the characteristics of these mainstream models one by one to help you find the one that best suits your needs.
+
+## 3. Claude - The Strongest Coding Capability
+
+Claude 4.5 is the latest version released by Anthropic in 2025. As of January 2026, it's still widely recognized as the AI model with the strongest programming capabilities.
+
+Claude 4.5 mainly has two versions: Opus 4.5 is the top-tier version with the strongest programming capabilities but relatively slower speed and higher price; Sonnet 4.5 is the balanced version, offering an excellent balance between performance and speed at the best value.
+
+### Why is Claude considered the strongest for programming?
+
+In the authoritative SWE-bench (Software Engineering Benchmark), Claude Opus 4.5 scored higher than GPT-5 and Gemini 3 Pro, firmly holding the SOTA (State of the Art) position in programming. Specifically, Claude excels in code understanding, refactoring, debugging, etc. It accurately understands complex code logic, is good at optimizing and improving existing code, can quickly locate and fix bugs, and has excellent context memory (less prone to "forgetting").
+
+These advantages make Claude particularly suitable for developers who need high-quality code, those working on complex projects, and scenarios with high code quality requirements.
+
+**Of course, this assumes your budget is sufficient.**
+
+### Pricing and Access Methods
+
+There are three main ways to use Claude:
+
+- Official subscription: Claude Pro at $20/month (≈¥145)
+- Through Cursor: Cursor Pro subscription at $20/month includes Claude usage quota
+- API calls: Pay-as-you-go based on tokens, offering flexibility
+
+![Claude Official Pricing](https://pic.yupi.icu/1/image-20260106203330977.png)
+
+If you're serious about learning Vibe Coding and want to build commercial-grade products, I recommend subscribing to Cursor Pro. For the same $20, you can not only use Claude but also switch to other models, offering the best value.
+
+Note that Cursor packages aren't unlimited - exceeding quotas incurs additional charges. Here's a look at my bill:
+
+![](https://pic.yupi.icu/1/image-20260106202855849.png)
+
+Also recommended is the learning resource [Claude Cookbooks](https://github.com/anthropics/claude-cookbooks), a collection of Claude usage tips and code examples provided by Anthropic, covering tutorials for various practical scenarios like tool calling, RAG, classification, summarization, and multimodal applications - very much worth learning.
+
+## 4. ChatGPT - Intelligence and Speed Combined
+
+After discussing Claude, let's look at ChatGPT.
+
+ChatGPT is OpenAI's product, the tool that first made AI chat popular worldwide. By 2025, OpenAI had launched the GPT-5 series, including the general GPT-5, the more reasoning-capable GPT-5 Pro, and the o3 version specifically optimized for logic, math, and programming.
+
+![](https://pic.yupi.icu/1/image-20260106221446611.png)
+
+While ChatGPT may slightly trail Claude in pure programming capability comparisons, it has unique advantages.
+
+First, it's faster, generating code significantly quicker than Claude, making it ideal for rapid iteration scenarios. Second, its knowledge updates more promptly, with better understanding of the latest technologies and frameworks. It also has a better ecosystem with richer plugin and tool support, and stronger Chinese comprehension and generation capabilities.
+
+Thus, if you need rapid prototyping, prioritize speed, or want to use various plugins and tools, ChatGPT is also an excellent choice.
+
+ChatGPT pricing and access methods:
+
+- ChatGPT Plus: $20/month
+- ChatGPT Pro: $200/month (includes advanced models like o3)
+- API calls: Pay-as-you-go based on tokens
+
+![](https://pic.yupi.icu/1/image-20260106203501181.png)
+
+## 5. Gemini 3.0 - The King of Long Context
+
+Next is Gemini, Google's AI model. The 2025 Gemini 3.0 series mainly has two versions: the top-tier Gemini 3 Pro with comprehensive capabilities, and the lightweight Gemini 3 Flash that's extremely fast and affordable.
+
+![](https://pic.yupi.icu/1/image-20260106221514964.png)
+
+Gemini's most impressive feature is its ultra-long context window - Gemini 3 Pro supports **1M tokens** (≈1 million Chinese characters) of input context.
+
+What does this mean?
+
+It can read an entire large project's code at once, remember extremely long conversation histories without easily "forgetting," and simultaneously analyze vast amounts of documentation and materials.
+
+Moreover, Gemini 3 Pro performs exceptionally well in UI construction. Practical tests show its strong capabilities in front-end UI design, 3D model building, etc., even surpassing Claude and GPT-5 in certain scenarios.
+
+![Developing a 3D animation website with one sentence](https://pic.yupi.icu/1/1763785739331-b643bd7d-85d6-42d9-8462-f842a8a790e6.png)
+
+So if you need to handle large projects, analyze massive codebases, work on UI/front-end development, or have budget constraints but need powerful capabilities, Gemini is an excellent choice.
+
+Gemini pricing and access methods:
+
+- Gemini 3 Pro: $19.99/month
+- API calls: Much cheaper than Claude and GPT
+- Free version: Gemini 3 Flash offers some free quota, with several daily trials of the thinking model
+
+## 6. Domestic Large Models - Cost-Effective Options
+
+### What are the mainstream domestic models?
+
+After covering the international big three, let's look at domestic large models. Today, domestic models have caught up in programming capabilities and even surpassed international models in some aspects!
+
+- DeepSeek-V3 is open-source, completely free to use, with top-tier programming capabilities among domestic models and extremely low API prices, especially suitable for scenarios requiring extensive API calls.
+- Alibaba's Tongyi Qianwen Qwen outperformed GPT-5 in LiveCodeBench evaluations, with exceptional Chinese comprehension - very accurate when receiving requirements in Chinese.
+- Zhipu GLM-4.7 from Tsinghua's team excels in multilingual programming, specifically optimized for Chinese development scenarios. Supporting 200K token contexts, it performs well in complex task execution and creative writing. I've been using GLM for development myself, finding its speed and effectiveness in generating complete projects excellent.
+- Moonshot's Kimi supported ultra-long contexts (2 million characters) early on, unique among domestic models. Particularly suitable for handling large project codebases, capable of processing 500 files at once.
+- Tencent's Hunyuan CodeBuddy deeply integrates with Tencent Cloud services, natively supporting 3000+ cloud APIs with Level 3 security certification, suitable for enterprises and very affordable.
+- Baidu's ERNIE Bot offers free quotas and deep integration with Baidu's ecosystem (like Baidu Miaoda platform), ideal for creative small projects needing rapid commercialization.
+
+### Advantages and Limitations of Domestic Models
+
+Domestic models' biggest advantage is affordability, with API prices typically 1/10th of international models. They also understand Chinese more accurately, offer faster direct access within China, and comply with domestic regulations.
+
+Of course, there are limitations. For the most complex tasks, top-tier capabilities still slightly trail Claude Opus 4.5, and tool/plugin support isn't as rich as international models.
+
+However, for budget-constrained students and individual developers, those mainly working on Chinese projects or unable to access international services easily, or scenarios requiring extensive API calls, domestic models are excellent choices. Many of my AI products integrate DeepSeek, Tongyi Qianwen, or GLM - their free quotas are sufficient for daily learning.
+
+And I believe domestic models have the potential to surpass international ones - I believe in the power of open source!
+
+![Open Source Model Rankings](https://pic.yupi.icu/1/image-20260106215413048.png)
+
+## 7. How to Choose the Right Model?
+
+With so many models, each with its strengths, how do you choose?
+
+Model selection mainly depends on two dimensions: your budget and your usage scenario.
+
+### Choosing by Budget
+
+Your budget directly determines which tools you can use.
+
+If you have ample budget (¥100+/month), subscribing to Cursor Pro ($20) with Claude Opus 4.5 or Sonnet 4.5 offers the best current experience. Claude's high code quality makes it particularly suitable for complex and commercial projects.
+
+If your budget is limited, make full use of free resources. DeepSeek is completely free + Tongyi Qianwen offers free quotas + Gemini 3 Flash provides daily free trials - these free resources combined are sufficient for learning and personal projects. Moreover, domestic models' API prices are very affordable; even paid plans can provide great value for just tens of yuan per month.
+
+### Choosing by Scenario
+
+Different development scenarios suit different models.
+
+1) Learning phase: If you're still learning, primarily use free DeepSeek or Tongyi Qianwen, supplemented by Gemini 3 Flash's free quota. At this stage, the focus is familiarizing yourself with AI programming - free models are entirely adequate.
+
+2) Front-end/UI projects: Gemini 3 Pro performs exceptionally well in front-end UI design. Practical tests show it generates high-quality interfaces and strong 3D modeling capabilities. If you mainly do front-end work, Gemini is an excellent choice.
+
+3) Full-stack projects: Prioritize programming-strong Claude Sonnet for comprehensive front-end and back-end capabilities. Using it with Cursor provides a great development experience. For quickly generating complete projects, Zhipu GLM-4.7 also offers good speed and results.
+
+4) Handling large codebases: Gemini 3 Pro's (1M token) ultra-long context capability is most suitable, able to analyze entire projects at once. Zhipu GLM-4.7's 200K token support can also handle medium-to-large project codebases including complete front-end and back-end.
+
+5) Rapid iterative development: GPT-5 offers the fastest response, ideal for quickly validating ideas. Zhipu GLM also excels in generation speed.
+
+6) Extensive testing and API calls: DeepSeek is completely free, and both DeepSeek and Tongyi Qianwen have extremely low API prices, suitable for scenarios requiring extensive calls - you can use them freely during testing.
+
+### Personal Choice
+
+For me, with relatively rich project development experience and many commercial projects under my belt, I generally prioritize more capable large models when choosing. For daily development, I mainly use Cursor + Claude Sonnet - this combination is comprehensive and effective.
+
+Other scenarios:
+
+- For particularly complex problems, I switch to Claude Opus.
+- For rapid prototyping or idea validation, I use Gemini.
+- When prioritizing speed, I choose Zhipu GLM, which performs well in quickly generating complete projects.
+- For extensive testing, I use DeepSeek or Tongyi Qianwen APIs because they're relatively cheaper.
+
+## Final Thoughts
+
+By now, you should have a clear understanding of current mainstream AI models.
+
+I want to emphasize again: **There's no absolutely best model, only the one that best suits your current needs.**
+
+Moreover, AI models evolve rapidly - new models may emerge in a few months, or existing models' capabilities may change. I recommend checking monthly for updates on mainstream models, trying new releases, or following tech community evaluations and comparisons. Who knows when a better, cheaper new model might appear!
+
+So don't blindly believe in any single model - learn to choose flexibly based on actual circumstances.
+
+Tools and models are just means - what truly matters is what you want to do and what you can create. Choosing the right tools can make you twice as productive, but ultimately, your ideas and execution determine success or failure.
+
+In the next article, I'll detail how to use no-code platforms, introducing the simplest and fastest Vibe Coding development methods.
+
+Let's keep moving forward - full speed ahead!
+
+![](https://pic.yupi.icu/1/image-20260106220555209.png)
+
+## Recommended Resources
+
+1) Yupi's AI Navigation Site: [Comprehensive AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guides, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheat Sheets: [Internship/Campus/Social Recruitment High-Frequency Topics, Enterprise Question Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Builder: [Professional Templates, Rich Examples, Direct to Interviews](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus/Social Recruitment Interviews to Secure Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/10 编程工具/02 AI 零代码平台.md

@@ -0,0 +1,354 @@
+# AI Zero-Code Platform
+
+> Create applications directly in your browser, the simplest way of Vibe Coding
+
+Hi, I'm Yupi.
+
+If you're a complete beginner or just want to quickly validate an idea, then a **zero-code platform** is definitely your best choice.
+
+Why is that?
+
+Because zero-code platforms have three huge advantages:
+
+1. No software installation required: Just open your browser and start using it
+2. No coding knowledge needed: Describe your requirements in natural language
+3. What You See Is What You Get (WYSIWYG): See the effects immediately after making changes, and deploy with one click
+
+In this article, I'll introduce several mainstream zero-code platforms in detail, focusing on the domestic Baidu Miaoda platform, and teach you how to choose and use them.
+
+## 1. What is a Zero-Code Platform?
+
+Before introducing specific tools, let's clarify: What is a zero-code platform?
+
+Simply put, **a zero-code platform is an AI programming tool that you can use directly in your browser.**
+
+You just need to describe your requirements in natural language, and the AI will generate a complete application for you, which can be previewed and modified in real-time.
+
+The difference from traditional development:
+
+![](https://pic.yupi.icu/1/traditiondevpkvibecoding%E5%A4%A7.jpeg)
+
+Isn't it much simpler? This is the charm of zero-code platforms.
+
+### Suitable Scenarios
+
+Zero-code platforms are particularly suitable for:
+
+- Complete beginners: Haven't learned programming yet, want to get started quickly
+- Rapid prototyping: Need to quickly validate an idea
+- Simple applications: Personal websites, landing pages, simple tools
+- Learning experience: Want to experience the feeling of Vibe Coding first
+
+Of course, zero-code platforms also have limitations. For particularly complex projects, a code editor might still be necessary. But for most scenarios, zero-code platforms are already powerful enough.
+
+After understanding the basic concepts of zero-code platforms, I'll introduce several mainstream platforms in detail. Each platform has its own features and advantages, and I'll demonstrate their usage with practical examples to help you find the one that suits you best.
+
+## 2. Bolt.new - Super-Fast Prototyping Tool
+
+Bolt.new is currently one of the hottest zero-code platforms, launched by StackBlitz. Its biggest feature is **speed**, taking just about 1 minute from idea to seeing the result.
+
+Core advantages of Bolt.new:
+
+1. Extremely fast: Code generation and preview are both quick
+2. Real-time preview: See changes as you make them, WYSIWYG
+3. One-click deployment: Supports deployment to platforms like Netlify
+4. Auto-fix: AI automatically detects and fixes errors
+
+### How to Use Bolt.new?
+
+> 💡 We've already learned how to use Bolt.new in the [Basic Must-Read] Quick Start Tutorial, so you can skip this part.
+
+Using Bolt.new is very simple. I'll demonstrate with a practical example, such as creating a simple Pomodoro timer.
+
+Steps:
+
+1) Open the [website](https://bolt.new) and enter your requirements in the dialog box:
+
+```
+Please help me create a Pomodoro timer with the following features:
+- Default 25-minute countdown
+- Start, pause, and reset buttons
+- Notification sound when time is up
+- Clean and modern interface
+```
+
+![](https://pic.yupi.icu/1/image-20260107110501086.png)
+
+2) Wait for the AI to generate the code
+
+![](https://pic.yupi.icu/1/image-20260107110607536.png)
+
+3) See the real-time effect in the preview area on the right
+
+![](https://pic.yupi.icu/1/image-20260107110658047.png)
+
+4) If not satisfied, continue the conversation to adjust. Or use the visual editing feature to click and modify~
+
+```
+Change the background color to light blue and the buttons to rounded corners
+```
+
+![](https://pic.yupi.icu/1/image-20260107110744960.png)
+
+5) Once satisfied, click the "Publish" button to deploy with one click, and you'll get a shareable link.
+
+![](https://pic.yupi.icu/1/image-20260107111103207.png)
+
+It's that simple! The whole process takes less than 5 minutes.
+
+### Pros and Cons of Bolt.new
+
+Bolt.new is suitable for quickly validating ideas or creating simple demos, and it's very fast. The learning curve is also low, requiring no coding knowledge at all—just the ability to speak. And you can see the generated code, which you can study if you want to learn. Finally, deploying the website is also simple, with just one click to go live, and you'll get a shareable link.
+
+However, if the project is particularly complex, such as requiring complex backend logic or database operations, Bolt.new can still do it, but the results might not be as good. Although you can adjust the website through conversation, for very detailed customization, it might not be as flexible as writing code directly. Also, it must be used on the web, and the code editing experience is average.
+
+### Pricing
+
+- Free version: Limited usage, suitable for experience and learning
+- Paid version: Around $25 per month, removes limitations
+
+If you're a beginner, start with the free version to experience the charm of Vibe Coding. Once you're sure you want to dive deeper, consider paying.
+
+## 3. Lovable - Full-Stack Application Builder
+
+Lovable is a powerful zero-code platform that can not only handle the frontend but also build full-stack applications: including frontend, backend, database, and even user authentication!
+
+Core advantages of Lovable:
+
+1. Full-stack capability: Can create complete web applications
+2. Database integration: Built-in Supabase for data storage
+3. User authentication: Supports login, registration, etc.
+4. High code quality: Generated code is well-structured and easy to maintain
+
+### How to Use Lovable?
+
+Let me demonstrate with a more complex example. Suppose I want to create a simple expense tracking app that requires login functionality.
+
+Steps:
+
+1) Open the [website](https://lovable.dev) and log in with GitHub or email
+
+2) Enter your requirements in the dialog box:
+
+```
+Please help me create an expense tracking app with the following features:
+- User login and registration
+- Add income and expense records
+- Display total income, total expenses, and balance
+- Filter records by date
+- Data should be saved to a database
+```
+
+![](https://pic.yupi.icu/1/image-20260107111601472.png)
+
+3) Lovable will then generate a complete full-stack application, including:
+
+   - Frontend interface (React)
+   - Backend API
+   - Database schema (Supabase)
+   - User authentication system
+
+During this process, you might need to manually confirm some operations, such as enabling Cloud to support database and user authentication:
+
+![](https://pic.yupi.icu/1/image-20260107111715955.png)
+
+4) After a few minutes, the AI finishes generating, and you can test the features in the preview area
+
+![](https://pic.yupi.icu/1/image-20260107112144754.png)
+
+5) Continue optimizing details through conversation and visual editing, the editing experience is still good
+
+![](https://pic.yupi.icu/1/image-20260107112259442.png)
+
+6) Deploy with one click
+
+![](https://pic.yupi.icu/1/image-20260107112411553.png)
+
+### Pros and Cons of Lovable
+
+If your project requires backend, database, and user systems, Lovable is a good choice for building more complex full-stack applications.
+
+The generated code is also well-organized, making it easier to export and maintain yourself. Plus, it directly integrates Supabase, a powerful backend service, allowing you to easily handle complex functions like data storage and user authentication.
+
+![](https://pic.yupi.icu/1/image-20260107112431787.png)
+
+Of course, because it's more powerful, it's also relatively more complex, and beginners might need some time to adapt. Also, since it generates more code (frontend + backend), it might be slower than Bolt.new.
+
+### Pricing
+
+- Free version: Limited usage
+- Paid version: Around $25 ~ $50 per month
+
+If you're building a complete web application that requires a database and user system, Lovable is a great choice. But if you're just creating a simple showcase page, Bolt.new is sufficient.
+
+## 4. Baidu Miaoda - Domestic Zero-Code Platform
+
+Baidu Miaoda is an AI no-code application building platform launched by Baidu, and one of the most successful zero-code platforms in China.
+
+Miaoda's biggest feature is that it not only generates applications but also enables direct commercialization. It has built-in payment functionality (including WeChat Mini Program payments) that can be directly integrated without additional development. Plus, the interface is entirely in Chinese, making it particularly user-friendly for domestic users.
+
+### How to Use Baidu Miaoda?
+
+Using Miaoda is very simple, just like other zero-code platforms:
+
+1) Visit the [Baidu Miaoda official website](https://www.miaoda.cn/), register an account, and log in
+
+2) Describe your requirements in Chinese:
+
+```
+Create an online booking system where users can select a date and time, fill in contact information, and submit a booking
+```
+
+![](https://pic.yupi.icu/1/image-20260107112754177.png)
+
+3) Next, enter the development phase, and the AI might confirm requirements through conversation.
+
+If you want to create a commercial-grade project, communicate carefully with it; if you're just making a demo for fun, skip the conversation directly.
+
+![](https://pic.yupi.icu/1/image-20260107112932144.png)
+
+Then the AI generates a requirements document:
+
+![](https://pic.yupi.icu/1/image-20260107113021068.png)
+
+You can manually edit the document or immediately generate the application.
+
+After waiting a few minutes, the AI automatically generates a complete application, and you can preview the effect in real-time:
+
+![](https://pic.yupi.icu/1/image-20260107113641264.png)
+
+5) Like other platforms, you can modify the application. It supports visual editing, and the editing experience is still good.
+
+![](https://pic.yupi.icu/1/image-20260107113743213.png)
+
+6) Once satisfied, you can directly publish it and get an access link.
+
+![](https://pic.yupi.icu/1/image-20260107113853665.png)
+
+7) If you need more capabilities, you can use plugins to extend functionality, such as integrating WeChat Pay for charging
+
+![](https://pic.yupi.icu/1/image-20260107113922034.png)
+
+### Pros and Cons of Baidu Miaoda
+
+Miaoda's biggest advantage is its Chinese-friendly interface, requiring no knowledge of English. Plus, its commercialization capabilities are strong, with built-in payment functionality that allows you to directly create paid applications, with many successful cases to reference.
+
+But in my tests, compared to foreign platforms, the generated results are relatively average, suitable for small to medium-sized applications.
+
+However, for domestic users, especially those looking to create mini-programs or quickly commercialize in the domestic market, Miaoda is a good choice.
+
+## 4. Other Zero-Code Platforms Worth Noting
+
+Besides the three mainstream platforms mentioned above, there are other zero-code platforms worth knowing about.
+
+### v0
+
+[v0](https://v0.dev) is an AI collaboration assistant launched by Vercel, capable of designing, developing, and scaling full-stack web applications.
+
+Features: High-quality UI, can generate complete applications, based on shadcn/ui, supports design pattern manual adjustments, can connect to databases and APIs, supports one-click deployment to Vercel, has a rich template library.
+
+Suitable scenarios: Need to generate beautiful interfaces, quickly build full-stack applications, high design requirements.
+
+![](https://pic.yupi.icu/1/image-20260107123602515.png)
+
+### Replit Agent
+
+[Replit](https://replit.com) is not just a zero-code platform but also a complete online development environment. Replit Agent can automatically build applications based on your descriptions and supports multiple programming languages.
+
+Features: Supports multiple languages, runs entirely in the browser, built-in database and deployment, supports online collaborative development, supports mobile devices, has a free version.
+
+Suitable scenarios: Need backend development, want to learn multiple languages, need team collaboration, want to program on mobile devices.
+
+![](https://pic.yupi.icu/1/image-20260107123620053.png)
+
+### Firebase Studio
+
+[Firebase Studio](https://studio.firebase.google.com) is a collaborative workspace launched by Google, unifying Project IDX and Gemini in Firebase, providing an AI-assisted application development experience.
+
+Features: Entirely browser-based, integrates Firebase backend services, uses Gemini AI assistance, supports frameworks like React, can code, debug, test, refactor.
+
+Suitable scenarios: Use Google ecosystem, need Firebase services, want AI-assisted development.
+
+![](https://pic.yupi.icu/1/image-20260107123700807.png)
+
+## 5. AI Application Development Platforms
+
+Besides the zero-code platforms introduced above, there are also platforms specifically for developing AI applications, such as Dify, Coze, Alibaba Cloud Bailian, etc.
+
+Their positioning is different from zero-code platforms like Bolt.new. Bolt.new is mainly used to generate regular websites and applications, while AI application development platforms are mainly used to build AI chatbots, AI knowledge base Q&A, AI workflows, and other applications that require AI capabilities.
+
+In short, if you're creating regular websites or applications (like personal homepages, e-commerce sites), Bolt.new or Baidu Miaoda is sufficient. If you're creating AI applications (like smart customer service, AI assistants, knowledge base Q&A systems), you can try Dify or Coze.
+
+![Dify Developing AI Applications](https://pic.yupi.icu/1/1743561915955-ad27735a-c927-4207-b769-03fda32081b6.png)
+
+These platforms provide visual configuration interfaces, allowing you to build AI workflows through drag-and-drop, creating powerful AI applications without writing code.
+
+![Alibaba Cloud Bailian Building AI Workflows](https://pic.yupi.icu/1/1745388167957-d7995436-fc2f-410e-bc59-4f6db6544359-20260112161510229.png)
+
+## 6. How to Choose a Zero-Code Platform?
+
+By now, you might be asking: With so many platforms each having their own strengths, which one should I choose?
+
+Actually, the choice is simple, mainly depending on your needs and personal situation.
+
+1) Choose based on needs
+
+If you're a domestic user looking to create mini-programs or need commercialization, Baidu Miaoda is the first choice, as it's Chinese-friendly and has built-in payment functionality, with hundreds of thousands of successful commercial application cases.
+
+If you need to quickly create prototypes or simple pages, Bolt.new is fast and easy to use, showing results in 1 ~ 2 minutes. If you need to create complete web applications requiring databases and user systems, Lovable is a better choice, as it's the most powerful.
+
+2) Choose based on personal situation
+
+If you're a complete beginner (never written code), start with Baidu Miaoda or Bolt.new, as they're the simplest and easiest to use. If you have some basics (learned some programming), try Lovable, as it's more powerful and can create more complex things.
+
+My suggestion is to start with Baidu Miaoda or Bolt.new, then gradually try other platforms based on your needs.
+
+## 7. Zero-Code Platform Practical Tips
+
+During my use of zero-code platforms, I've summarized some practical tips to share with you.
+
+1) Be specific in describing requirements
+
+Don't just say "create a website," but describe in detail, such as "create a personal portfolio website, including a homepage (large title + introduction + avatar), project showcase (card layout), contact information, with a clean and modern style using a blue color scheme." The more specific your requirements, the closer the AI-generated result will be to your expectations.
+
+2) Implement in steps
+
+Don't make too many requests at once, but proceed step by step. First, build the basic framework, then add features, and finally optimize details. This makes it easier to control progress and discover and fix issues.
+
+3) If you have reference designs, you can upload images for the AI to reference, generating UI that better meets expectations.
+
+4) After each AI code generation, always test in the preview area. For example, click all buttons to see if functions work, check effects on different screen sizes, input test data to see if displays are correct. If issues are found, immediately ask the AI to fix them, don't wait until problems pile up.
+
+5) Before making major changes, it's best to save the current version. Most platforms support version history, allowing you to revert if something goes wrong.
+
+![](https://pic.yupi.icu/1/image-20260107114739910.png)
+
+6) Finally, even if you don't understand code now, you can export and save the generated code. When you learn later, you can revisit and study how this code was written.
+
+## Final Words
+
+By now, I believe you have a comprehensive understanding of zero-code platforms.
+
+I think **zero-code platforms are the best starting point for learning Vibe Coding.**
+
+They allow you to quickly see results, build confidence, understand how AI programming works, accumulate project experience, and validate your ideas.
+
+After reading this tutorial, be sure to try it out immediately! You can create a simple calculator, a to-do list, or a personal introduction page... Anything is fine, the important thing is to start.
+
+Remember, the biggest charm of Vibe Coding is rapid iteration. Don't aim for perfection in one go, but quickly create something and keep improving.
+
+In the next article, I'll explain the use of AI code editors in detail, taking you to experience a more professional and powerful way of Vibe Coding.
+
+Keep it up!
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheat Sheet: [Internship/Campus Recruitment/Social Recruitment High-Frequency Test Points, Enterprise Real Questions Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Writing Tool: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interview: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Get Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/10 编程工具/03 AI 智能体平台.md

@@ -0,0 +1,258 @@
+# AI Agent Platform
+
+Hello, I'm Yupi.
+
+In previous articles, we learned about no-code platforms that can generate websites and applications with a single sentence. But if you want AI to handle more complex tasks, such as:
+
+- Generating a large website with dozens of pages
+- Creating a PPT with dozens of slides
+- Automatically generating 100 short videos
+- Running complex workflows for several hours
+
+These tasks may not be suitable for no-code platforms because they require continuous interaction, confirmation, and modification with AI. Is there a tool that allows AI to autonomously plan tasks and execute them until completion?
+
+In this article, I will introduce the **AI Agent Platform**, a powerful tool that enables AI to autonomously execute complex tasks.
+
+## 1. What is an AI Agent Platform?
+
+Before diving into AI Agent Platforms, let me clarify a few easily confused concepts:
+
+1) **No-code platforms** (Bolt.new, Lovable, Miaoda): Generate complete projects with a single sentence, suitable for quickly creating websites and applications.
+
+You say a sentence, AI generates the code, you preview the result, and deploy if satisfied. The entire process may only take a few minutes.
+
+2) **AI application development platforms** (Dify, Coze, Bailian): Visually configure AI applications, suitable for creating AI applications like intelligent customer service or knowledge base Q&A.
+
+You configure workflows by dragging and dropping, set prompts and knowledge bases, without writing code.
+
+3) **AI Agent Platforms** (Flowith, Manus): AI autonomously plans and executes complex tasks, which can run for hours or even days.
+
+You only need to describe the goal, and AI will plan the steps, call tools, and execute tasks until completion.
+
+In simple terms, **an AI Agent Platform is like having AI as a project manager. You just tell it the goal, and it plans and executes on its own.**
+
+## 2. Flowith: The Infinite AI Agent
+
+[Flowith](https://flowith.io/) is one of the hottest AI Agent Platforms, dubbed "the world's first infinite AI agent" (possibly self-proclaimed).
+
+What does "infinite" mean?
+
+If we imagine AI agents as humans, some give up when tasks are too complex or encounter difficulties; others persist tirelessly, dedicating their lives to completing the task.
+
+Flowith is the latter. **Infinite steps, infinite context, infinite tools** enable it to autonomously execute tasks continuously until completion.
+
+![](https://pic.yupi.icu/1/1749013910178-598b6214-90e0-4940-b586-acac831947fa.png)
+
+### How to Use Flowith?
+
+Let me demonstrate Flowith's powerful capabilities with a few practical examples.
+
+#### 1. Generating a Complex Large Website
+
+Visit the [Flowith homepage](https://flowith.io/), and you'll see the familiar AI conversation interface. This is Flowith's basic functionality, capable of generating text, images, videos, and enriching responses using web search tools and custom knowledge bases.
+
+![](https://pic.yupi.icu/1/image-20250604130433876.png)
+
+I particularly like the **Comparison Mode**, which allows you to select various mainstream models and quickly compare their responses to the same prompt:
+
+![](https://pic.yupi.icu/1/1749014090154-389652e2-bff4-429a-aca5-caf340413958.png)
+
+Now, let's activate Flowith's **Agent Mode**, a super-intelligent agent that autonomously plans tasks, calls tools, and executes steps in the cloud. Also, enable **Infinite Mode** to keep it working until the task is complete.
+
+![](https://pic.yupi.icu/1/1749014872173-4d7c5086-ea2c-4faa-89f2-c7b5307a5183.png)
+
+Input the prompt:
+
+```
+Generate a complex enterprise-level frontend website - a low-code generation tool.
+It must have at least 20 pages and ensure all core functionalities are fully available.
+```
+
+After execution, we enter the **Workflow Canvas Page**, where AI first plans numerous steps for the entire task. For example, to create a website, it starts by writing a detailed architecture design document, then builds the basic UI framework, and develops each page sequentially.
+
+![](https://pic.yupi.icu/1/1749015118875-d8509204-be5d-4c01-b2c8-50737f20a9ba.png)
+
+This is how AI agents autonomously execute complex tasks. Although it can't complete a large task at once, it breaks it down into smaller tasks, completes them one by one, and summarizes the final result.
+
+![](https://pic.yupi.icu/1/1749015434868-dc3ab67e-9196-4ad1-9835-5afe4744f789.png)
+
+AI autonomously selects appropriate tools to complete tasks, such as generating a website and deploying it to a cloud server, allowing us to view the website's progress in real-time:
+
+![](https://pic.yupi.icu/1/1749015539809-9fd2d7b3-8377-4a54-a904-10eae595f1ee.png)
+
+After a long wait, about 2 hours, the entire website is finally generated. I've never had an agent autonomously execute for such a long time in Cursor.
+
+Let's look at the generated files. First, the documentation is very comprehensive, including test reports, release confirmation documents, system maintenance guides, test plans, summary reports, and more.
+
+![](https://pic.yupi.icu/1/1749016112489-c0ef8c0c-718b-4203-a96b-edc3876e95f5.png)
+
+Now, let's look at the generated project code. The page files are quite complete, generating over 5000 lines of code, which is the scale of a small to medium-sized project.
+
+![](https://pic.yupi.icu/1/1749016258008-7c68d00a-2ea8-40f2-a7d9-ef32e4432d86.png)
+
+Let's run the website and see the effect. It seems to use a foreign model, as the website is entirely in English. The pages look decent, fitting the functionality and design of a low-code platform.
+
+![](https://pic.yupi.icu/1/1749016335224-df5392ac-256e-4ad5-9596-75414c47dfe0.png)
+
+However, due to the lack of a backend and sample data, many page functionalities cannot be verified, and the overall effect is mediocre.
+
+#### 2. Generating a PPT with Dozens of Slides
+
+Now, let's tackle a more complex task: generating a PPT with at least 50 slides:
+
+```
+Generate a PPT that comprehensively introduces programmer Yupi, with at least 50 slides.
+```
+
+This time, the AI agent is clearly smarter. It first calls multiple web search tools simultaneously, gathering information from different sources, and then integrates it:
+
+![](https://pic.yupi.icu/1/1749017575205-4c4feed4-a76f-44ff-8553-51a289648d3e.png)
+
+AI is also clever when preparing image materials for the PPT. It not only searches for images online but also calls other AI drawing models to generate multiple images in parallel. Honestly, the effect of this small card really impressed me.
+
+![](https://pic.yupi.icu/1/1749017650764-99af8845-aba5-4a08-a960-20a9abbb4e5d.png)
+
+Interestingly, I found that AI isn't "rigid." During task execution, it may re-plan steps based on the situation; sometimes, it actively seeks user input, allowing us to guide AI better.
+
+![](https://pic.yupi.icu/1/1749017795714-cce96312-6347-47a3-bb6d-ecba3b3a49cf.png)
+
+However, task execution isn't always smooth. Sometimes, steps fail, but AI automatically retries:
+
+![](https://pic.yupi.icu/1/1749017899834-a7d1e6f1-e56c-4ba8-9e5d-172ff9f2a1e2.png)
+
+More seriously, tasks can get stuck. For example, I was stuck at the step using the browser tool, requiring manual re-execution. But thinking about it, it's quite reasonable—humans sometimes slack off or fall asleep at work, and someone needs to wake them up.
+
+After more than an hour, AI finally generated an online PPT webpage, even deploying it to a server. We can directly view the browsing effect:
+
+![](https://pic.yupi.icu/1/1749018233536-a331b205-43e4-43b4-aaf6-21239b408815.png)
+
+Honestly, it looks quite good. Although it's not in the standard PPT format but HTML webpage code, it can be converted to PPT format using tools.
+
+![](https://pic.yupi.icu/1/1749018314994-e00282d5-db98-41ff-b119-9f8dbdb7b27a.png)
+
+#### 3. Generating Self-Media Content
+
+Now, let's have AI generate a self-media article with images:
+
+```
+I am a self-media knowledge blogger. Please generate an article with images.
+The theme is 【Introducing Programmer Yupi's Programming Navigation Learning Website】
+```
+
+I recommend checking AI's progress periodically. Sometimes, AI may actively seek your input, and if you don't respond, it may get stuck (though you can skip it).
+
+![](https://pic.yupi.icu/1/1749018563491-dd75da94-48a0-4ef7-95c0-66085b7a99cb.png)
+
+After about 30 minutes, AI completed the task, generating a website with images and text, and the effect is quite good.
+
+![](https://pic.yupi.icu/1/1749018787641-1cff498b-d17e-4e20-b6ea-a0faa90a9b54.png)
+
+It's undeniable that AI really loves generating websites. This reminds us that if we want AI to accurately complete complex tasks, we must describe the tasks clearly (e.g., generate Markdown-formatted content).
+
+### Pros and Cons of Flowith
+
+Flowith's advantages are obvious. First, its **infinite execution capability** allows it to run continuously for hours or even days, completing super complex tasks. Moreover, AI's planning and self-correction abilities are strong, enabling it to adjust plans based on the situation.
+
+Additionally, its **parallel execution capability** allows it to call multiple AI models or tools simultaneously, greatly improving efficiency. It also supports cloud deployment, allowing generated websites to be accessed online directly.
+
+Of course, there are some limitations. First, **execution efficiency is relatively low**. The same task that Cursor might complete in 10 minutes could take Flowith 1-2 hours. Moreover, cost consumption is somewhat uncontrollable, as long-term running consumes a lot of tokens.
+
+Also, customization and modification capabilities are limited. If you want precise control over every step, Flowith may not be suitable. It's more suited for scenarios where "I don't care about the process, just the result."
+
+In terms of pricing, Flowith has a free version and a paid version. The free version has usage limits, while the paid version charges based on usage.
+
+## 3. Manus: The Universal AI Agent
+
+[Manus](https://www.manus.im/) is another very popular AI Agent Platform that went viral upon its release.
+
+Manus adopts a multi-model collaboration mechanism, with strong tool-calling capabilities, enabling it to generate and execute tasks across multiple domains. Moreover, Manus's autonomous planning ability is robust, capable of independent thinking and planning to ensure task execution.
+
+![](https://pic.yupi.icu/1/image-20260112171640030.png)
+
+For example, in a property purchase task, Manus can decompose it into sub-tasks like community safety analysis, budget calculation, and property screening, and reconstruct the thinking process through code agents to ensure transparency and traceability.
+
+## 4. OpenManus: The Open-Source Version of Manus
+
+[OpenManus](https://github.com/FoundationAgents/OpenManus) is the open-source version of Manus, reportedly replicated by a few Gen Zers in 3 hours.
+
+![](https://pic.yupi.icu/1/image-20260112172154353.png)
+
+Although its functionality isn't as comprehensive as Manus, it has basic agent capabilities. Moreover, it's completely open-source and free, allowing you to deploy and customize it yourself.
+
+OpenManus is a modular open-source agent framework suitable for:
+
+- Research prototype validation
+- Agent orchestration experiments
+- Automated workflows
+- Integrating multi-modal/LLM capabilities into existing systems
+
+If you enjoy tinkering and want to delve into the implementation principles of AI agents, OpenManus is a great choice.
+
+💡 In the AI Super Agent project led by Yupi, we thoroughly explain OpenManus's source code and guide you from scratch to implement a super agent similar to OpenManus. Interested students can watch the [Step-by-Step Video Tutorial](https://www.codefather.cn/course/aiagent) to learn.
+
+![](https://pic.yupi.icu/1/openmanus.png)
+
+## 5. Practical Suggestions for AI Agent Platforms
+
+If you want to try AI Agent Platforms, here are a few suggestions:
+
+### 1. Describe Tasks Clearly
+
+Although AI can autonomously plan, the clearer your task description, the better AI's execution. Don't just say "make a website"; specify:
+
+- Website type (corporate site, blog, e-commerce, etc.)
+- Core functionalities (list at least 3-5)
+- Style requirements (minimalist, modern, cartoonish, etc.)
+- Technical requirements (if any)
+
+### 2. Be Patient
+
+AI Agent Platforms take time to execute tasks, possibly hours. It's recommended to:
+
+- Start tasks during less busy times
+- Check progress periodically and respond to AI's queries promptly
+- Manually re-execute if tasks get stuck
+
+### 3. Control Costs
+
+Long-term running consumes a lot of tokens, potentially leading to high costs. It's recommended to:
+
+- Test with free credits first
+- Define task scope clearly to avoid unnecessary work by AI
+- If on a budget, consider using Cursor or other AI programming tools to complete tasks step-by-step
+
+### 4. Combine with Other Tools (As Needed)
+
+AI Agent Platforms are better suited for generating foundational content, which can then be refined with Cursor. For example:
+
+- Use Flowith to generate the basic framework of a large website
+- Export the code to Cursor
+- Use Cursor for detailed optimization and functionality enhancement
+
+This leverages Flowith's autonomous execution capabilities while utilizing Cursor's precise control.
+
+## Final Thoughts
+
+By now, you should have a comprehensive understanding of AI Agent Platforms.
+
+I recommend not treating them as everyday development tools but as supplementary tools for special scenarios. If you need to generate large amounts of content without manual effort or quickly set up the framework for a large project, try Flowith or other AI Agent Platforms.
+
+So far, we've explored various no-code development tools. From platforms that quickly generate projects to AI Agent Platforms that autonomously execute complex tasks, these tools allow you to create powerful applications without writing code.
+
+But if you want to delve deeper into programming and have more precise control over your code, AI code editors are more suitable.
+
+In the next article, I will explain how to use Cursor and other AI code editors in detail, taking you through a more professional and powerful Vibe Coding experience.
+
+Keep it up!
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheatsheet: [Internship/Campus Recruitment/Social Recruitment High-Frequency Points, Enterprise Exam Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Creator: [Professional Templates, Rich Examples, Direct to Interviews](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Secure Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/10 编程工具/04 AI 代码编辑器.md

@@ -0,0 +1,350 @@
+# AI Code Editor
+
+> A more professional and powerful Vibe Coding development approach
+
+Hello, I'm Yupi.
+
+In previous articles, we learned how to use no-code platforms and AI agent platforms. If you've already created several projects with these tools, you might start to feel some limitations:
+
+- I want to modify a specific file, but the no-code platform isn't flexible enough...
+- As projects grow larger, managing code in the browser becomes cumbersome...
+- I want to learn more professional development methods, but I don't want to give up AI assistance...
+
+If you have these thoughts, congratulations! It's time to upgrade to an AI code editor!
+
+AI code editors combine the powerful features of traditional code editors with AI's intelligent assistance, allowing you to develop projects more flexibly and professionally. In this article, I'll explain the mainstream AI code editor Cursor in detail and share more AI code editors worth paying attention to.
+
+## 1. What is an AI Code Editor?
+
+Before understanding AI code editors, let's first grasp a basic concept: what is a code editor?
+
+Simply put, **a code editor is a tool for programmers to write code**, just like Word is a tool for writing documents. Common code editors include VS Code, Sublime Text, Notepad++, etc.
+
+There's also a related concept called **IDE (Integrated Development Environment)**, which is more powerful than a code editor. It not only allows you to write code but also integrates a complete set of development tools like debugging, compiling, and version control. Common IDEs include JetBrains' IntelliJ IDEA, PyCharm, WebStorm, etc.
+
+However, in practice, the line between code editors and IDEs has become increasingly blurred. For example, although VS Code is called an editor, its functionality is almost on par with an IDE through the installation of plugins. So you don't need to worry too much about the distinction between these two concepts; just know that they are tools for writing code.
+
+Now let's clarify two questions:
+
+- What's the difference between an AI code editor and a no-code platform?
+- What's the difference between an AI code editor and a traditional code editor?
+
+### AI Code Editor vs. No-Code Platform
+
+No-code platforms are used in the browser, where you generate entire applications through conversations with AI, making them ideal for quickly prototyping and simple projects. AI code editors, on the other hand, need to be downloaded and installed on your computer, allowing you to precisely control each file and line of code, and they come with a complete development toolchain (e.g., code debugging, version control), making them more suitable for complex projects and professional development.
+
+To use an analogy, a no-code platform is like ordering food at a restaurant, where the chef prepares and serves it to you; an AI code editor is like cooking in your own kitchen with a smart assistant by your side.
+
+### AI Code Editor vs. Traditional Code Editor
+
+So what's the difference between an AI code editor and a traditional code editor (e.g., VS Code, JetBrains, Sublime Text)?
+
+In my opinion, the biggest difference is **deep integration with AI**.
+
+A traditional code editor is just a tool for writing code; you need to figure out how to write each line yourself. An AI code editor, however, comes with a powerful AI assistant built-in, which can help you generate code, explain code, modify code, and even automatically execute multi-file tasks.
+
+Specifically, AI code editors have capabilities that traditional editors lack:
+
+- Generate code by describing requirements in natural language
+- AI understands the context of the entire project
+- Automatically modify multiple files
+- Execute commands automatically (e.g., install dependencies)
+- Smart code completion (much smarter than traditional completion)
+
+In short, a traditional code editor is "a tool for you to write code," while an AI code editor is "a tool for AI to help you write code." In practice, the efficiency gap can be more than 10 times.
+
+If you have some programming foundation, you'll quickly get the hang of AI code editors.
+
+## 2. Cursor: The Hottest AI Code Editor
+
+Cursor is currently the hottest AI code editor, dubbed "VS Code of the AI era." It's based on VS Code, retaining all its advantages while adding powerful AI features.
+
+![](https://pic.yupi.icu/1/image-20260107133923123.png)
+
+Cursor's core advantages:
+
+1. Multiple AI features: Tab code completion, Agent, Chat, inline editing, etc.
+2. Multi-model support: Supports multiple models like Claude, GPT, Gemini, Grok, and has an Auto selection feature
+3. Context awareness: AI understands the entire project's code, supporting up to 1M Token context (Max mode)
+4. Mature ecosystem: Based on VS Code, supports all VS Code plugins
+
+### Cursor's Core AI Features
+
+Cursor's most powerful aspect is its variety of AI features, suitable for different scenarios.
+
+#### 1. Tab Code Completion
+
+This is the most basic feature, similar to GitHub Copilot. When you write code, AI automatically predicts what you want to write, and pressing Tab accepts the suggestion.
+
+![](https://pic.yupi.icu/1/image-20260107134002087.png)
+
+This feature is particularly useful for writing repetitive code, completing function implementations, and quickly generating boilerplate code. The advantage is speed, as it doesn't interrupt your flow; the drawback is that it can only complete code, not make significant modifications.
+
+#### 2. Agent
+
+This is the most powerful feature introduced in Cursor 2.0, and it's the closest to an AI programmer mode. In this mode, AI can modify multiple files simultaneously, create new files automatically, execute commands (e.g., install dependencies), understand the entire project structure, and even use the browser for testing.
+
+You can use it to add new features (requiring modifications to multiple files), refactor code, fix complex bugs, set up project frameworks, and handle various complex tasks.
+
+Cursor has also introduced its own **Composer model**, an AI model optimized specifically for software engineering, generating code four times faster than similar models.
+
+For example:
+```
+Please add user authentication functionality, including:
+- Login page
+- Registration page
+- Authentication middleware
+- User database model
+```
+
+Agent will automatically analyze the project, install necessary dependencies, create required files, modify relevant code, and complete the task.
+
+![](https://pic.yupi.icu/1/image-20260107134332952.png)
+
+#### 3. Chat and Inline Editing
+
+Chat is the most commonly used feature. You can select a piece of code and tell AI in natural language what you want to do. You can use it to explain code, modify a function, fix bugs, optimize performance, etc.
+
+![](https://pic.yupi.icu/1/image-20260107134511105.png)
+
+Inline editing allows you to modify code directly, press `Cmd/Ctrl + K` to quickly invoke it, and AI will generate or modify code at the current position.
+
+![](https://pic.yupi.icu/1/image-20260107134532921.png)
+
+For example, you can select a piece of code and tell AI:
+- What does this function do?
+- Help me optimize its performance
+- Add error handling
+
+### How to Use Cursor?
+
+Let me demonstrate Cursor's usage with a complete example.
+
+Suppose I want to create a simulated electronic whiteboard where I can draw anything and export it as an image.
+
+Let's get started!
+
+1) First, go to the [Cursor website](https://cursor.com) and download the version suitable for your system (Windows/Mac/Linux are all supported).
+
+2) Create an empty folder to store the entire project code. It's recommended to use an English name, such as `yupi-drawboard`.
+
+Then open Cursor and open the folder you just created.
+
+![](https://pic.yupi.icu/1/image-20260107142103143.png)
+
+3) Open the Agent panel, select Agent mode and the large model, then enter a prompt to describe your requirements:
+
+```
+Help me develop a simulated electronic whiteboard where users can draw and export images
+```
+
+![](https://pic.yupi.icu/1/image-20260107142244095.png)
+
+Next, grab a cup of coffee and wait for AI to generate the code. It will automatically create multiple files, and you can see its progress in the Agent panel.
+
+![](https://pic.yupi.icu/1/image-20260107142422465.png)
+
+4) After a few minutes, AI will generate the complete code. You can choose to accept all, reject all, or selectively accept parts of the code:
+
+![](https://pic.yupi.icu/1/image-20260107142737589.png)
+
+5) Since the requirement is relatively simple, you can directly open the `index.html` file in the browser to see the running effect.
+
+![](https://pic.yupi.icu/1/image-20260107142906255.png)
+
+Not bad, right? Guess what I drew~
+
+6) If you need to modify details or fix bugs, you can directly chat with AI.
+
+Of course, if you have some programming foundation, you can select a piece of code and use inline editing with `Cmd/Ctrl + K`.
+
+![](https://pic.yupi.icu/1/image-20260107142631274.png)
+
+When you write new code, AI will automatically suggest completions (Tab completion feature), and you can press Tab to accept the suggestion.
+
+This is the basic usage of Cursor. Additionally, Cursor supports online search, browser usage, voice input, MCP plugins, and more, which you can explore gradually.
+
+### Pros and Cons of Cursor
+
+Cursor is currently the most comprehensive AI code editor I've used, with its various AI modes covering all scenarios from code completion to agents.
+
+Since it's based on VS Code, all VS Code plugins, themes, and shortcuts work. If you've used VS Code before, you'll get the hang of it quickly.
+
+Moreover, you can freely switch between mainstream models like Claude, GPT, Gemini, and even use your own large models and API keys.
+
+![](https://pic.yupi.icu/1/1764145641557-9b0b777f-f9ca-4cb4-8566-437dbd4b2cbb.png)
+
+Additionally, Cursor has a large user base, making it easier to find solutions when encountering problems. There are also many tutorials and videos online, and I've been following Cursor's development closely, creating several tutorials myself.
+
+However, Cursor's biggest drawback is its price. The premium plans are quite expensive, and each plan has usage limits.
+
+When you exceed the monthly usage limit, you can choose to add pay-as-you-go usage (charged by API rate) or upgrade to a higher tier. Different models have different API costs, and your model choice will affect usage speed.
+
+For detailed pricing information and usage calculations, it's recommended to check the [Cursor official pricing documentation](https://cursor.com/cn/docs/account/pricing), which has the latest and most accurate information.
+
+If you're serious about learning Vibe Coding, I recommend subscribing to the Pro version. The efficiency boost you get for $20 is worth it for most people. If you're a heavy user, using Agent extensively every day, consider Pro Plus or Ultra.
+
+As a Cursor enthusiast like me, even with a premium subscription, I have to bear the high bills...
+
+![](https://pic.yupi.icu/1/yupicursorbilling.png)
+
+Additionally, Agent mode may take longer to handle complex tasks. Although AI assists, some programming foundation is still required, and complete beginners might find it a bit complex.
+
+For more Cursor usage tips and money-saving methods, check out the [Advanced Elective: Tips & Tricks] section of this tutorial series, where there are detailed explanations.
+
+## 3. Other Mainstream AI Code Editors
+
+Besides Cursor, there are other AI code editors worth knowing about.
+
+### Windsurf
+
+[Windsurf](https://codeium.com/windsurf) is an AI code editor launched by Codeium, with the biggest advantage being completely free. After using up the free quota, Windsurf remains free to use, making it particularly suitable for students and developers with limited budgets.
+
+It also offers Cascade Agent mode (similar to Cursor's Agent), where you describe requirements in natural language, and AI automatically creates and modifies multiple files. The biggest advantage is that it's completely free.
+
+![](https://pic.yupi.icu/1/image-20260107135727334.png)
+
+### Antigravity
+
+[Antigravity](https://antigravity.google) is a smart agent development platform launched by Google, with an interface similar to VS Code. It adopts an Agent-first design, where AI agents can autonomously plan, execute, and verify complex tasks.
+
+It integrates large models like Gemini, supports 1M Token context, and is suitable for developers who want to try Google's AI ecosystem and need ultra-long context for large projects.
+
+![](https://pic.yupi.icu/1/image-20260107135834072.png)
+
+### Kiro
+
+[Kiro](https://kiro.dev) is an AI IDE launched by Amazon, emphasizing "specification-driven development." You write the requirements first, and then AI implements them.
+
+It integrates deeply with AWS, allowing direct deployment to AWS services, making it suitable for developers using AWS, teams needing standardized development processes, and enterprise application scenarios.
+
+![](https://pic.yupi.icu/1/image-20260107135922286.png)
+
+### TRAE
+
+[TRAE](https://www.trae.ai) is an AI-native programming tool launched by ByteDance. It has two development modes:
+
+- IDE mode is similar to Cursor, retaining traditional development workflows
+- SOLO mode lets AI take the lead, automatically advancing development tasks
+
+TRAE's SOLO mode is its biggest highlight, distinguishing it from traditional human-led + AI-assisted programming. In SOLO mode, AI leads tasks and automatically executes development. You just need an idea, and AI will automatically generate product requirement documents, technical architecture documents, then autonomously write code, install dependencies, test, and verify until the project is ready to run.
+
+Moreover, TRAE supports integrating third-party services like Supabase databases, Stripe payments, OpenRouter AI services, etc., allowing seamless integration without reading documentation. It helps you quickly develop commercial-grade products with complete front-end and back-end.
+
+![](https://pic.yupi.icu/1/image-20250928222329915.png)
+
+The domestic version of TRAE is very suitable for Chinese users, with fast access speeds. I've used TRAE SOLO to develop WeChat mini-programs; interested users can check out the [practical video](https://www.bilibili.com/video/BV1yMn3zuE7L).
+
+### Zed
+
+[Zed](https://zed.dev) is a high-performance code editor written in Rust, created by the Atom founding team. It comes with an AI assistant, supports multiple AI models, and enables real-time collaborative editing.
+
+Its advantages are extremely fast startup speed and low resource consumption. It's suitable for developers who pursue ultimate performance, have average computer configurations, and need team collaboration.
+
+![](https://pic.yupi.icu/1/windows-multibuffer.jpeg)
+
+## 4. How to Choose an AI Code Editor?
+
+By now, you might be asking: With so many AI code editors, which one should I choose?
+
+Actually, the choice is simple, mainly depending on your needs and budget.
+
+**Cursor is the top recommendation.** As of now, Cursor remains the most powerful and mature AI code editor, and I personally use it as my main tool for project development.
+
+As mentioned earlier, its advantages include:
+
+- Comprehensive features: Tab, Agent, Chat, inline editing, etc.
+- Frequent updates: Often introduces new features
+- Strong context understanding: Supports up to 1M Token
+- Multi-model support: Freely switch between Claude, GPT, Gemini, etc., and connect to new models promptly
+- Mature ecosystem: Based on VS Code, all plugins work
+- Active community: Easy to find solutions when encountering problems
+
+If your budget allows (over $20 per month), Cursor is the first choice. If your budget is limited, Windsurf is a great free option; although its features are relatively simple, it's sufficient for learning.
+
+## 5. Practical Tips for AI Code Editors
+
+Whether you choose Cursor or another AI code editor, the following practical tips can help improve your efficiency.
+
+### 1. Leverage Context
+
+The most powerful aspect of AI code editors is their ability to understand the context of the entire project. Make full use of this:
+
+- Create a `README.md` in the project root directory to describe the overall architecture
+- Use `.cursorrules` (or other rule files supported by the editor) to tell AI your coding standards
+- When chatting, reference relevant files (`@filename`)
+
+For example:
+```
+Refer to the code style of @src/components/ImageUploader.vue to create a Card component
+```
+
+![](https://pic.yupi.icu/1/image-20260107140926938.png)
+
+### 2. Implement Step by Step
+
+Don't propose overly complex requirements at once; break them down:
+
+❌ Bad approach:
+```
+Create a complete e-commerce website
+```
+
+✅ Recommended approach:
+```
+Step 1: Create a product list page
+Step 2: Add a product detail page
+Step 3: Add a shopping cart feature
+Step 4: Add a checkout feature
+```
+
+### 3. Utilize Shortcuts
+
+Proficiency with shortcuts can significantly boost efficiency.
+
+Take Cursor as an example; try these shortcuts to reduce mouse usage and operate faster.
+
+Chat-related:
+- `Cmd/Ctrl + L`: Toggle sidebar (unless bound to a mode)
+- `Cmd/Ctrl + I`: Toggle sidebar (unless bound to a mode)
+- `Cmd/Ctrl + K`: Open inline editing, insert AI-generated code at the current position
+- `Tab`: Accept suggestion
+
+Code editing:
+- `Cmd/Ctrl + Shift + L`: Add selected content to chat
+- `Alt + ↑/↓`: Move current line
+- `Cmd/Ctrl + /`: Comment/uncomment
+
+File operations:
+- `Cmd/Ctrl + Shift + F`: Global search
+
+For the latest default keyboard shortcuts, refer to the [official documentation](https://cursor.com/cn/docs/configuration/kbd):
+
+![](https://pic.yupi.icu/1/image-20260104192219087.png)
+
+### 4. Code Review
+
+AI-generated code isn't always perfect; develop a habit of reviewing it.
+
+Check if the code logic is correct, if there are security risks, if performance is reasonable, and if the code style is consistent.
+
+Of course, you can also ask AI to review it:
+
+```
+Please review this code and point out potential issues
+```
+
+### 5. Save Important Versions
+
+Git is currently the most popular distributed version control system (VCS), an indispensable tool for team collaboration development. It saves and manages all update records of files, distinguishing them with **version numbers**. This supports restoring edited documents to their pre-modification state, comparing differences between versions, preventing old versions from overwriting new ones, and more.
+
+Before making major changes, remember to commit to Git:
+
+```bash
+git add .
+git commit -m "Version before adding user authentication functionality"
+```
+
+This way, if AI messes up, you can always revert.
+
+💡 If you want to learn Git and GitHub in depth, check out my [Git & GitHub Beginner's Learning Path](https://www.codefather.cn/course/1789189862986850306

translations/en/Vibe Coding 零基础教程/10 编程工具/05 AI 命令行编程工具.md

@@ -0,0 +1,366 @@
+# AI Command Line Programming Tools
+
+> A more efficient and geeky way of Vibe Coding
+
+
+
+Hello, I'm Yupi.
+
+In previous articles, we learned about AI zero-code platforms and AI code editors. As you use Vibe Coding more and more, you might encounter some special scenarios:
+
+- I want to develop directly on the server, but the server has no graphical interface...
+- I want to write a script to automate tasks, how can I make the script operate Cursor?
+- I want AI to process dozens of files in bulk, but it's too cumbersome to do it in Cursor...
+
+If you have these needs, then **command-line AI programming tools** might be the answer you're looking for.
+
+Command-line tools have no fancy interfaces, only concise text interactions. But it is this minimalism that gives them ultimate efficiency and flexibility.
+
+In this article, I will focus on introducing Claude Code, the hottest command-line AI programming tool, and share more command-line AI programming tools worth paying attention to.
+
+
+
+## 1. What is a Command-Line AI Programming Tool?
+
+Before learning about specific tools, let's first clarify: what is the difference between command-line tools and code editors?
+
+AI code editors are software with graphical interfaces, where you can see file lists, code highlighting, buttons, etc. Command-line tools run entirely in the terminal, with only text input and output, and almost no graphical interface.
+
+To make an analogy, AI code editors are like driving an automatic car, with a steering wheel, dashboard, and various buttons; command-line tools are like driving a manual racing car, with only the core controls, but faster and more flexible.
+
+
+
+### Advantages of Command-Line Tools
+
+Why do some developers prefer command-line tools?
+
+First, they are fast. Without loading a graphical interface, the startup speed is extremely fast, and full keyboard operation is more efficient. Resource usage is also very low, as there is no graphical interface, memory and CPU usage are minimal, and they can run smoothly even on average computers.
+
+Command-line tools are particularly suitable for automation. You can write scripts to batch process tasks or integrate them into automated workflows, which is difficult to achieve with graphical interface tools.
+
+In addition, if you need remote development, you can connect to the server via SSH and develop directly on the server using command-line tools.
+
+Honestly, typing commands in a black terminal and watching the code generate automatically is indeed cool.
+
+
+
+### Who is it Suitable For?
+
+If you are familiar with terminal operations, pursue ultimate efficiency, need remote development, or like a minimalist style, then command-line tools are very suitable for you.
+
+If you are not yet familiar with the terminal, it is recommended to practice with AI code editors like Cursor for a while, and then try command-line tools after you have enough understanding of Vibe Coding.
+
+
+
+## 2. Claude Code: The Most Powerful Command-Line Tool
+
+[Claude Code](https://claude.com/product/claude-code) is the official command-line AI programming tool launched by Anthropic, directly integrating the Claude model. It is currently one of the most powerful command-line programming tools.
+
+![](https://pic.yupi.icu/1/image-20260107153527087.png)
+
+What makes Claude Code most impressive is its autonomous execution capability — the AI can not only generate code but also automatically execute commands, modify files, and install dependencies, truly achieving "say a word, and the project is set up."
+
+Claude Code has built-in security review functionality, asking you before executing dangerous operations to prevent mistakes. It can also understand the structure and context of the entire project, considering the overall consistency of the project when modifying code.
+
+Particularly noteworthy is that Claude Code supports **Claude Skills**. This is a capability extension package prepared for the AI. You can think of it as a handover document prepared for a new colleague, containing task execution methods, tool usage instructions, template materials, etc.
+
+For example, you can create a `Company Code Specification Skill`, writing in code style, naming rules, comment requirements, etc. After that, the code generated by Claude Code will automatically follow these specifications, without needing to repeat the instructions each time.
+
+The core value of Skills lies in: people provide professional knowledge and methodology, AI provides intelligence. This is a great efficiency boost for quickly validating ideas and building internal tools.
+
+
+
+### How to Use Claude Code?
+
+Let me demonstrate the usage process of Claude Code with a practical example.
+
+1) First, install Claude Code with one command:
+
+```bash
+curl -fsSL https://claude.ai/install.sh | bash
+```
+
+2) Then execute the `claude` command to start the program. By default, you need to log in to a Claude account, and Claude Code has access restrictions for the Chinese region. Directly accessing the Anthropic website or using Claude's API might be blocked, really annoying!
+
+![](https://pic.yupi.icu/1/1764145940075-ace6fd24-a09c-41c0-b400-1cffc394fc8a.png)
+
+But it's okay, you can change the AI model API behind Claude Code to a domestic model API, such as Zhipu's GLM.
+
+3) Enter the `{user directory}/.claude` directory and create a `settings.json` configuration file:
+
+![](https://pic.yupi.icu/1/1764146110361-06e13de5-7de4-4fc5-9533-3651447d5e19.png)
+
+4) Modify the content of the configuration file as follows, remember to replace it with your own API Key.
+
+You can get the API Key on the [Zhipu AI Open Platform](https://open.bigmodel.cn), be careful not to leak it!
+
+![](https://pic.yupi.icu/1/1764146125955-3029843c-26b8-4628-b2b7-a9d8abb2aef1.png)
+
+```json
+{
+  "apiKey": "Your Zhipu API Key",
+  "baseURL": "https://open.bigmodel.cn/api/coding/paas/v4",
+  "model": "glm-4.6"
+}
+```
+
+5) Next, you can happily use it. Run `claude` in the project directory to start the conversation:
+
+![](https://pic.yupi.icu/1/1764146174167-3018c8f3-0ad9-4a4f-9764-246f33b33203.png)
+
+6) Let the AI create a practical image compression tool, the prompt is as follows:
+
+```markdown
+Please generate a "Image Compression Tool" website that implements image compression processing functions. It needs to include complete front-end and back-end code, and the project should be able to run normally.
+
+Functions to implement:
+1. Support uploading and compressing common image formats (JPG, PNG, WebP, etc.)
+2. Can set compression quality (e.g., high / medium / low or custom percentage)
+3. Display a comparison between the original and compressed images (size, file size, preview)
+4. Provide a download button after compression, support batch processing
+
+Design requirements:
+1. Modern minimalist style, main color is green
+2. Responsive layout, good experience on both mobile and desktop devices
+3. Upload area has obvious drag-and-drop hints, intuitive and clear operation flow
+```
+
+7) After clicking execute, the large model quickly gave a task plan — first build the backend, then implement the frontend, integrate frontend and backend, and finally test and run:
+
+![](https://pic.yupi.icu/1/1759250070544-7ede700d-37f2-4e4a-bfdb-01631f10df34.png)
+
+In less than 5 minutes, the AI completed the task, and it even automatically installed the dependencies for me, so thoughtful~
+
+![](https://pic.yupi.icu/1/1759250293957-36299a39-fff9-4e5d-a23a-299efd854938.png)
+
+We can open the browser and visit `localhost:3000` to see the effect:
+
+![](https://pic.yupi.icu/1/1759291145587-14fb0214-53c7-45a8-8ad1-949368363e19.png)
+
+Throughout the process, Claude Code automatically executes commands, creates files, and modifies code. You only need to describe the requirements in natural language. So satisfying!
+
+
+
+### Pros and Cons of Claude Code
+
+In addition to the autonomous execution capability and Skills support mentioned earlier, Claude Code has many other advantages.
+
+For example, it supports multiple programming languages, not just JavaScript / TypeScript, but also Python, Go, Rust, etc. Its project understanding ability is also very strong, able to automatically analyze project structure and understand the relationships between various files. When modifying code, it considers the overall consistency of the project.
+
+The downside is also known, Claude Code uses Anthropic's API, billed by Token, detailed pricing information is recommended to check the [Anthropic Official Pricing Document](https://www.anthropic.com/pricing). However, if you often need to develop complex new projects and write a lot of code, Claude Code's efficiency is worth the cost.
+
+💡 To systematically learn how to use Claude Code, you can check out the [Official Practical Tutorial](https://anthropic.skilljar.com/claude-code-in-action).
+
+
+
+## 3. Other Command-Line Tools Worth Paying Attention To
+
+In addition to Claude Code, there are some other command-line tools worth knowing about.
+
+
+
+### Gemini CLI
+
+[Gemini CLI](https://geminicli.com/) is an open-source command-line tool launched by Google, integrating the Gemini model. Its biggest advantage is that it has a free quota and supports ultra-long context (1 million Tokens), allowing you to analyze an entire large project at once. It is suitable for developers who want to try command-line tools but have a limited budget and need to analyze large projects.
+
+It adopts the ReAct (Reasoning and Action) loop, where the AI thinks before acting, making it stronger in handling complex tasks. It also supports MCP (Model Context Protocol), allowing connection to various external tools and services.
+
+The usage is similar to Claude Code, just one command to install:
+
+```bash
+npm install -g @google/gemini-cli
+```
+
+Then enter `gemini` to run it:
+
+![](https://pic.yupi.icu/1/image-20260107154410787.png)
+
+
+
+### Warp
+
+[Warp](https://www.warp.dev) is a modern terminal tool, not just a terminal, but also integrates a code editor and AI assistant, three in one.
+
+From personal experience, Warp's interface is more user-friendly than Claude Code, supporting AI command suggestions and team collaboration features.
+
+If you often work in the terminal and want a better interaction experience, Warp is a good choice. It allows you to enjoy the efficiency of command-line while not completely giving up the convenience of graphical interfaces.
+
+![](https://pic.yupi.icu/1/image-20260107154658863.png)
+
+
+
+### GitHub Copilot CLI
+
+GitHub Copilot is an AI programming assistant launched by Microsoft, already used by millions of developers. [GitHub Copilot CLI](https://github.com/features/copilot/cli) is its command-line version, allowing you to use AI assistance in the terminal.
+
+It is deeply integrated with GitHub, supports MCP protocol, and can generate and interpret commands.
+
+![](https://pic.yupi.icu/1/image-20260107154809001.png)
+
+If you are already using GitHub Copilot for code completion, then Copilot CLI allows you to enjoy similar AI assistance in the terminal, especially suitable for scenarios where you need to frequently execute commands.
+
+
+
+### OpenCode
+
+[OpenCode](https://opencode.ai) is a recently very popular open-source command-line AI programming tool, known as the "open-source version of Claude Code."
+
+The biggest advantage of OpenCode is that it is **completely free and open-source**. Compared to Claude Code, OpenCode does not require a paid subscription and has no regional restrictions, making it particularly friendly to domestic users.
+
+It provides an intuitive terminal interface, session management, custom commands, and other functions. It also supports multi-model switching, including Claude, GPT, Gemini, DeepSeek, etc. You can choose the most suitable model for different tasks, not limited by a single model.
+
+If you want to try command-line AI programming but don't want to pay, OpenCode is the best choice.
+
+The usage is very simple, just one command to install:
+
+```bash
+curl -fsSL https://opencode.ai/install | bash
+```
+
+Then execute the `opencode` command to happily use it:
+
+![](https://pic.yupi.icu/1/image-20260107155212400.png)
+
+This interaction is much more comfortable than Claude Code~
+
+![](https://pic.yupi.icu/1/image-20260107155206368.png)
+
+
+
+### How to Choose Command-Line AI Tools?
+
+Choosing command-line AI tools mainly depends on your needs and budget.
+
+- If you pursue the strongest functionality and the best experience, choose Claude Code. Its autonomous execution capability, Skills support, and project understanding ability are the strongest, suitable for professional developers and complex projects. However, it requires payment, and domestic users need to configure domestic model APIs.
+- If you want to use it completely for free, choose OpenCode. It is open-source, supports multi-model switching, and its functionality is close to Claude Code, with no regional restrictions. For students and individual developers with a limited budget, OpenCode is the best choice.
+- If you need ultra-long context to analyze large projects, choose Gemini CLI, which supports 1 million Token context, allowing you to analyze an entire large project at once, and it has a free quota.
+- If you need a better terminal experience, choose Warp. It combines terminal, editor, and AI into one, with a modern interface, suitable for developers who do not want to completely give up graphical interfaces.
+- If you are already using GitHub Copilot, choose Copilot CLI, which can seamlessly integrate with your existing workflow.
+
+Choose the most suitable tool for different tasks to achieve the highest efficiency.
+
+I mainly use Claude Code + configuring domestic models to quickly build small and medium-sized projects or perform file batch processing operations. Of course, as an AI programming blogger, I also try various different command-line tools, jumping back and forth.
+
+
+
+## 4. Practical Tips for Command-Line Tools
+
+No matter which command-line tool you choose, the following tips can help you improve efficiency.
+
+
+
+### 1. Make Good Use of Aliases
+
+Set aliases in `.bashrc` or `.zshrc` to quickly start tools.
+
+For example:
+
+```bash
+alias cc="claude"
+alias gc="gemini"
+alias oc="opencode"
+```
+
+This way, you only need to enter `cc` to start Claude Code, enter `gc` to start Gemini CLI, and enter `oc` to start OpenCode. Although it's just a few fewer letters, for developers who frequently use them, it can save time.
+
+
+
+### 2. Create Project Configuration Files
+
+Create configuration files in the project root directory to tell the AI the project specifications.
+
+Claude Code automatically reads the `CLAUDE.md` file in the project root directory, which is the officially recommended configuration file name. You can write project specifications, common commands, core file descriptions, etc.:
+
+```markdown
+# Project Specifications
+
+- Use TypeScript
+- Follow Airbnb code specifications
+- All functions must have type annotations
+- Use ESLint and Prettier
+
+# Common Commands
+
+- npm run dev: Start the development server
+- npm run build: Build the production version
+- npm test: Run tests
+```
+
+This way, the code generated by the AI will automatically follow these specifications. Moreover, you can submit the `CLAUDE.md` file to Git, allowing team members to maintain it together, making the AI understand your project better and better.
+
+
+
+### 3. Execute in Steps
+
+Don't propose overly complex requirements at once, but execute them in steps:
+
+- First create the basic project structure
+- Then add functions
+- Finally optimize details
+
+This makes it easier to control progress and discover and fix problems.
+
+
+
+### 4. Combine with Other Commands
+
+Command-line tools can be combined with other commands. For example, you can save the output of one command to a file and let the AI read it:
+
+```bash
+# Save git diff output to a file
+git diff > changes.txt
+
+# Then reference this file in Claude Code
+# In the conversation, say: Generate commit information based on the changes in @changes.txt
+```
+
+Or write scripts to batch process tasks, achieving a fully automated development process.
+
+For example, you can write a script to automatically traverse all files and let the AI add comments, optimize code, etc.
+
+
+
+### 5. Claude Code Founder's Pro Tips
+
+The founder of Claude Code once shared some pro usage tips, here are a few of the most practical ones:
+
+1) Open multiple instances to improve efficiency: Run multiple Claudes simultaneously in the terminal, number the tabs, and understand which one needs manual input through system notifications. You can also run multiple instances on the web version of Claude Code, running simultaneously with the local Claude, making full use of waiting time.
+
+2) Prioritize using models with thinking functions: Although slower, they perform better in tool usage, and in the long run, efficiency is higher.
+
+3) Team-shared CLAUDE.md file: Manage the file with Git, and team members maintain it together. Whenever Claude makes a mistake, add it to CLAUDE.md, so Claude knows not to do it next time.
+
+4) Use slash commands to improve efficiency: Enter `/` in the dialog to trigger shortcut commands, and you can customize these commands to encapsulate common workflows. For example, create a `/commit-push-pr` command to complete commit, push, and create PR at once.
+
+5) Use MCP tools to extend functionality: Such as Slack search and publish content, run BigQuery queries, get error logs from Sentry, etc.
+
+6) Improve feedback verification mechanism: Don't just let Claude work, but also let it know how to verify its work. For example, let it open the browser to test the UI, and automatically iterate after discovering problems until the function runs normally.
+
+
+
+## Final Words
+
+By now, I believe you have a comprehensive understanding of command-line AI programming tools.
+
+**Note, command-line tools are not a necessity, but a choice to improve efficiency.**
+
+If you think Cursor is already sufficient, you can continue using Cursor. Command-line tools are more suitable for developers who pursue ultimate efficiency, like minimalist styles, or have special needs such as remote development and automated processing.
+
+But I recommend that friends who want to deeply learn Vibe Coding try it out, after all, modern command-line tools are already very friendly, as long as you know basic terminal operations, you can get started.
+
+For domestic users, I recommend two choices:
+
+1. Claude Code paired with domestic models: Can be used normally, and the cost is not high.
+2. OpenCode: Completely free and open-source, supports multi-model switching, with no regional restrictions, suitable for students and individual developers with a limited budget.
+
+In the next article, I will introduce IDE plugins, teaching you how to flexibly configure your development environment.
+
+Keep it up!
+
+
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [

translations/en/Vibe Coding 零基础教程/10 编程工具/06 AI IDE 插件.md

@@ -0,0 +1,202 @@
+Here's the translated Markdown content:
+
+# AI IDE Plugins
+
+> Adding AI capabilities to your familiar editor
+
+Hello, I'm Yupi.
+
+In previous articles, we learned about AI code editors and AI command-line programming tools.
+
+But if you already have programming experience and are accustomed to using integrated development environments (IDEs) like VS Code or IntelliJ IDEA, and don't want to switch editors while still wanting to experience AI coding, what should you do?
+
+**IDE AI plugins** are the answer you're looking for.
+
+In this article, I'll introduce the most popular IDE AI plugins to help you add AI capabilities to your familiar editor.
+
+## 1. Why Choose IDE Plugins?
+
+Before diving into specific plugins, let's clarify: What's the difference between IDE plugins and Cursor? Why use plugins?
+
+Cursor is a standalone editor, though based on VS Code, it's a complete software package. IDE plugins are extensions installed on your existing editor (VS Code, IntelliJ IDEA, etc.), requiring no editor switch.
+
+To use an analogy: Cursor is like buying a new car with all features pre-installed; IDE plugins are like adding new features to your current car—the car remains the same.
+
+The advantages of IDE plugins are clear. First, there's no need to switch editors. If you're already comfortable with a particular editor, have configured various plugins and shortcuts, and don't want to adapt to a new environment, plugins are the best choice.
+
+Moreover, you can install different plugins as needed, freely combining them, and uninstall any plugin you don't like at any time. Many plugins are open-source and free, or allow you to use your own API key, making costs more controllable.
+
+If you're a beginner without a fixed editor preference, using Cursor directly might be simpler. But if you're already a seasoned user of a specific editor, plugins are the better option.
+
+## 2. Cline: The Most Powerful Open-Source AI Plugin
+
+[Cline](https://cline.bot/) is currently the most powerful open-source AI programming plugin, often called the open-source version of Cursor.
+
+Cline's biggest advantage is its **cross-platform support**, working not only with VS Code but also with JetBrains IDEs like IntelliJ IDEA, PyCharm, and WebStorm.
+
+![](https://pic.yupi.icu/1/image-20260108222935455.png)
+
+It's completely open-source and free, supporting various large models like Claude, GPT, Gemini, and DeepSeek. It can also deploy MCP services to extend functionality. Beyond generating code through conversation, it can autonomously execute commands, modify multiple files, and use browsers—making it incredibly versatile.
+
+Let's walk through a demo of using Cline.
+
+### Using Cline in VS Code
+
+For example, let's use Cline in VS Code to create a React project.
+
+1) Open the VS Code extension marketplace, search for "Cline," and click install.
+
+![](https://pic.yupi.icu/1/image-20260108223139213.png)
+
+2) After installation, click the Cline icon in the sidebar. You can use it for free or with your own large model API key.
+
+![](https://pic.yupi.icu/1/image-20260108223220642.png)
+
+3) Click "Next," and Cline will guide you through creating an account. Register using GitHub or email.
+
+4) Once your account is set up, you're ready to go. Simply input your requirements in the Cline panel:
+
+```
+Create a React + TypeScript project with:
+- Home page
+- About page
+- Navigation bar
+- Using React Router
+```
+
+![](https://pic.yupi.icu/1/image-20260108223531152.png)
+
+5) Cline will automatically run commands, install necessary dependencies, create component files, configure routing, and modify styles. You only need to confirm each step or let it run fully autonomously.
+
+![](https://pic.yupi.icu/1/image-20260108223742056.png)
+
+### Using Cline in JetBrains
+
+If you're a JetBrains IDE user, open Settings → Plugins, search for "Cline," and install it. The usage is identical to the VS Code version.
+
+![](https://pic.yupi.icu/1/image-20260108224135571.png)
+
+## 3. AI Programming Assistant IDE Plugins
+
+Besides Cline, here are some other noteworthy AI programming assistant IDE plugins.
+
+### Claude Code Official Extension
+
+Claude Code is an AI programming assistant by Anthropic, originally a standalone command-line tool. The [Claude Code VS Code Extension](https://www.anthropic.com/news/enabling-claude-code-to-work-more-autonomously) lets you use Claude Code directly in your code editor without opening an additional terminal.
+
+This extension's advantage is its graphical interface, allowing you to chat with Claude via the sidebar panel and input text flexibly.
+
+![](https://pic.yupi.icu/1/image-20260116124614180.png)
+
+When AI modifies code, you can see changes in real-time within the editor, with automatic diff comparisons showing exactly what was altered.
+
+![](https://pic.yupi.icu/1/image-20260116124700221-20260118135011240.png)
+
+I often use it for refactoring code, fixing bugs, and adding new features. It also supports multiple concurrent sessions, meaning you can have multiple Claude agents working on different tasks simultaneously—like one handling frontend and another backend—greatly improving development efficiency.
+
+![](https://pic.yupi.icu/1/image-20260116124928547.png)
+
+### GitHub Copilot
+
+[GitHub Copilot](https://github.com/features/copilot) is the most mature AI programming assistant, supporting VS Code, JetBrains IDEs, Vim, Neovim, and more.
+
+Its main feature is code completion, automatically suggesting the next line as you code. It also includes Copilot Chat for conversing with AI in the sidebar.
+
+![](https://pic.yupi.icu/1/image-20260108225417720.png)
+
+Its strengths are maturity, stability, high-quality code completion, and cross-platform support. Most importantly, it's free for students and open-source contributors.
+
+### JetBrains AI Assistant
+
+[JetBrains AI Assistant](https://www.jetbrains.com/ai-assistant/) is JetBrains' official AI programming assistant, optimized for JetBrains IDEs. Yupi even demoed it live at the Alibaba Cloud Summit.
+
+![](https://pic.yupi.icu/1/image-20260108230013824.png)
+
+It offers not only code completion but also test generation, code explanation, refactoring, documentation generation, and more. Deeply integrated with IDE features like debugging, refactoring, testing, and commit message generation.
+
+![](https://pic.yupi.icu/1/image-20260108225718180.png)
+
+Its advantage is being official, with the best IDE integration and support for multiple AI models. The downside is it requires a paid JetBrains subscription.
+
+### Continue
+
+[Continue](https://www.continue.dev/) is an open-source AI programming plugin similar to Cline but lighter. It supports multiple AI models, offering code completion, chat, and code editing in a simple interface. Completely free, it works with VS Code and JetBrains.
+
+![](https://pic.yupi.icu/1/image-20260108230116299.png)
+
+### Amazon Q Developer
+
+[Amazon Q Developer](https://aws.amazon.com/q/developer/) (formerly CodeWhisperer) is Amazon's AI programming assistant.
+
+Its features include deep AWS service integration, support for multiple IDEs (VS Code, JetBrains, etc.), a free tier, and code security scanning. Ideal for AWS users and teams needing code security checks.
+
+## 4. IDE Extension Plugins
+
+Beyond AI programming assistants, here are some practical IDE extension plugins.
+
+While not AI tools, these plugins can significantly boost your development efficiency when used alongside AI programming.
+
+### GitLens
+
+GitLens lets you visually explore Git history, showing code authorship and commit dates when hovering over any line.
+
+![](https://pic.yupi.icu/1/image-20260116125445257.png)
+
+### Office Viewer
+
+Office Viewer allows direct preview and editing of documents like Markdown, Excel, Word, and PDF within the editor, eliminating window switching.
+
+![](https://pic.yupi.icu/1/image-20260116130527681.png)
+
+### ESLint and Prettier
+
+ESLint checks code quality, while Prettier formats code. These plugins help maintain code standards and prevent formatting issues in AI-generated code.
+
+![](https://pic.yupi.icu/1/image-20260116131356553.png)
+
+### Error Lens
+
+Error Lens highlights error messages directly at the end of code lines, making issues instantly visible.
+
+![](https://pic.yupi.icu/1/image-20260116140619858.png)
+
+### Console Ninja
+
+Console Ninja lets you view code execution results directly in the editor, reducing the need to switch to browser consoles.
+
+![](https://pic.yupi.icu/1/image-20260116141109420.png)
+
+### Supermaven
+
+[Supermaven](https://supermaven.com/) focuses on code completion, boasting a 1-million-token context window, blazing-fast suggestions, and high accuracy.
+
+![](https://pic.yupi.icu/1/image-20260108230146505.png)
+
+## 5. How to Choose an AI IDE Plugin?
+
+- For the most powerful features (agents, multi-file editing), choose Cline. It supports VS Code and JetBrains, is completely free, and rivals Cursor.
+- If you mainly need code completion, GitHub Copilot is the choice. It's the most mature, with top-notch completion and cross-platform support.
+- If you're already a JetBrains subscriber, JetBrains AI Assistant is ideal for its deep IDE integration.
+- For a lightweight tool, try Continue.
+
+I don't use IDE plugins too frequently these days, mostly relying on Cline (feature-rich + free), GitHub Copilot (high-quality completion), and some domestic AI plugins like CodeGeex or Tongyi Lingma.
+
+## Final Thoughts
+
+By now, I've covered all mainstream AI programming tools. I recommend trying them out to find what suits you best.
+
+In the next article, I'll introduce auxiliary tools to complete your development toolkit.
+
+Keep coding!
+
+## Recommended Resources
+
+1) Yupi's AI Navigation Site: [Comprehensive AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Coding Tutorials, Practical Projects, Job Hunting Guides, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheat Sheets: [Internship/Campus/Job-Hunting FAQs, Company Problem Analysis](https://www.mianshiya.com)
+
+4) Resume Builder for Programmers: [Professional Templates, Rich Examples, Interview-Ready](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus/Job-Hunting Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/10 编程工具/08 AI 辅助工具集.md

@@ -0,0 +1,355 @@
+# AI-Assisted Toolset
+
+Hello, I'm Yupi.
+
+In previous articles, we explored various AI programming tools, including AI no-code platforms, AI agent platforms, AI code editors, command-line tools, and IDE plugins. However, to truly develop projects efficiently, AI tools alone are not enough. You also need some auxiliary tools to perfect the entire workflow.
+
+Here are some examples of issues you might encounter:
+
+- AI messed up the code—how do you revert it?
+- The project is done—how do you deploy it so others can access it?
+- Are there other practical tools to boost efficiency?
+
+In this article, I’ll introduce the auxiliary tools commonly used in Vibe Coding development to help you complete your development toolchain.
+
+## 1. Git Version Control
+
+### Why Do You Need Git?
+
+During development, you might encounter situations like:
+
+- You just modified the code, but it broke—how do you revert to the previous version?
+- You want to try a new feature but are afraid it might affect the existing code.
+- In team collaboration, you’re unsure who changed what.
+
+Git can solve all these problems.
+
+**Git is a version control tool** that records every change to your code, allowing you to revert to any historical version at any time.
+
+💡 If you want to become a professional programmer, learning Git is essential—it’s a fundamental skill in enterprise development.
+
+### Core Concepts of Git
+
+Git’s workflow is simple, consisting of three main steps:
+
+1. Modify code in the working directory.
+2. Add code to the staging area (using the `git add` command).
+3. Commit code to the repository (using the `git commit` command).
+
+Think of it like writing on a draft paper: adding to the staging area is like selecting the satisfactory content, and committing to the repository is like formally saving that content in a notebook.
+
+![](https://pic.yupi.icu/1/gitworkflow%E5%A4%A7.jpeg)
+
+### How to Use Git?
+
+There are two ways to use Git: **GUI tools** and **command-line**.
+
+For beginners, I strongly recommend starting with GUI tools. Many mainstream development tools (like Cursor and VS Code) come with built-in Git functionality. You can commit and pull code with just a few clicks—no need to memorize commands.
+
+When I first started with Git, I didn’t search for tutorials online. I just watched others submit projects by clicking a few times in the editor and found it magical. Then I followed suit and used tools like [GitHub Desktop](https://desktop.github.com/) for simple operations, searching for solutions when I encountered issues.
+
+![GitHub Desktop APP](https://pic.yupi.icu/1/screenshot-windows-dark.png)
+
+Once you’re comfortable, you can learn command-line operations. Although command-line seems complex, it’s more flexible and powerful, and many advanced features are only available through the command-line.
+
+Here are some of the most commonly used commands. Mastering these will handle 90% of your daily development tasks.
+
+```bash
+# Clone a project
+git clone https://github.com/liyupi/ai-guide.git
+
+# Check status
+git status
+
+# Add files
+git add .
+
+# Commit
+git commit -m "Added new feature"
+
+# Push to remote
+git push
+
+# Pull latest code
+git pull
+```
+
+No need to memorize them—just look them up when needed, or ask AI directly.
+
+I recommend installing Git on your computer regardless of whether you plan to learn it. [Download it directly from the official website](https://git-scm.com/). Some software or tools may depend on Git, and not having it installed could cause issues later.
+
+### Practical Usage Scenario
+
+Let me demonstrate Git usage with a practical example. Suppose you’ve created a project in Cursor and want to manage its versions with Git.
+
+1) First, initialize Git in the project’s root directory:
+
+```bash
+git init
+```
+
+2) Then add all files and commit the first version:
+
+```bash
+git add .
+git commit -m "Initial version"
+```
+
+3) Continue developing, make some changes, and commit again:
+
+```bash
+git add .
+git commit -m "Added user login feature"
+```
+
+4) If a modification causes issues and you want to revert to a previous version:
+
+```bash
+git log  # View history, find the commit hash you want to revert to
+git reset --hard commit_hash
+```
+
+Git records every change, allowing you to revert anytime.
+
+### Git and AI Tools Integration
+
+Many AI tools now come with built-in Git functionality. For example, Cursor allows you to commit code directly in the editor:
+
+![](https://pic.yupi.icu/1/image-20260109110826513.png)
+
+You can also let AI automatically execute Git commands—just tell it, “Help me manage the project with Git.”
+
+Additionally, AI can generate commit messages for you—everything is Vibe Coding!
+
+I recommend developing a habit: **Commit every time you complete a feature.**
+
+This way, even if AI messes up the code, you can always revert to a previous version. With Git, you can confidently let AI modify your code—you can always roll back.
+
+### Learning Recommendations
+
+Git is powerful, but for Vibe Coding, mastering the above usage is sufficient. If you want to dive deeper into Git and GitHub, check out Yupi’s [Git & GitHub Learning Path](https://www.codefather.cn/course/1789189862986850306/section/1789190804671012866). This learning path covers all core Git knowledge from beginner to advanced levels and is completely free.
+
+## 2. Deployment Hosting Platforms
+
+After completing your project with AI, it runs well locally. But if you want others to access it, you need to deploy it to a server.
+
+Traditional deployment is complex: renting a server, configuring the environment, uploading code, setting up a domain, etc. But now, there are many free deployment platforms that let you go live in minutes.
+
+### Vercel
+
+[Vercel](https://vercel.com) is currently the most popular frontend deployment platform, especially suitable for React, Next.js, Vue, and static websites.
+
+Its advantages include being completely free for personal projects, extremely fast deployment (usually 1–2 minutes), automatic HTTPS and CDN configuration, and deep integration with GitHub, enabling automatic deployment when you push code.
+
+Using Vercel is super simple.
+
+1) First, visit the [Vercel website](https://vercel.com) to register an account. It’s recommended to use your GitHub account for registration and login.
+
+2) Create a project, bind it to GitHub, select the hosted project, and click the "Deploy" button:
+
+![](https://pic.yupi.icu/1/image-20260109111323983.png)
+
+3) Wait 1–2 minutes, and your project is live!
+
+After successful deployment, Vercel automatically assigns you a domain, like `your-project.vercel.app`. You can also bind your own domain.
+
+Every time you push code to GitHub, Vercel automatically redeploys—no manual intervention needed.
+
+💡 For a detailed process, check out Yupi’s video tutorial: https://www.bilibili.com/video/BV1TV4y1j76t
+
+### Netlify
+
+[Netlify](https://www.netlify.com/) is similar to Vercel but offers more comprehensive features. It supports more frameworks and static site generators, includes form handling, serverless functions, larger free quotas, and supports A/B testing and analytics. Its usage is similar to Vercel, so I won’t elaborate further.
+
+### EdgeOne Pages (Domestic Deployment Platform)
+
+[EdgeOne Pages](https://pages.edgeone.ai) is a full-stack edge development platform launched by Tencent Cloud, based on Tencent Cloud’s EdgeOne infrastructure, providing a serverless deployment experience from frontend pages to dynamic APIs.
+
+EdgeOne is Tencent Cloud’s edge security acceleration platform, essentially combining “network acceleration + security protection.” It leverages Tencent’s global network nodes to serve your website closer to users, ensuring faster loading speeds. It also integrates web protection capabilities to filter and block malicious traffic at the edge, safeguarding your website.
+
+EdgeOne Pages, built on this robust infrastructure, offers advantages like fast domestic access speeds, deep integration with Tencent Cloud services, support for edge functions, and free quotas. It’s more suitable for domestic developers.
+
+### GitHub Pages
+
+[GitHub Pages](https://pages.github.com/) is GitHub’s free static website hosting service. Its advantages include being completely free, offering unlimited traffic, and seamless integration with GitHub.
+
+Using it is incredibly simple. After creating a repository on GitHub and uploading your website files, enable GitHub Pages directly in the repository settings:
+
+![](https://pic.yupi.icu/1/image-20260109111917547.png)
+
+Then, you can access it via `username.github.io/repo-name`. It’s suitable for personal homepages, project documentation, and simple static websites.
+
+### How to Choose?
+
+- If your project is Next.js, choose Vercel (official recommendation).
+- For other frontend frameworks or static websites, both Vercel and Netlify are good options.
+- For domestic users seeking faster access speeds, choose EdgeOne Pages.
+- For simple static pages, GitHub Pages is the easiest.
+
+I mainly use Vercel + EdgeOne Pages because they’re fast and offer a great experience. For domestic projects, EdgeOne Pages indeed provides much faster access speeds.
+
+### Cloudflare CDN
+
+If you want your website to load even faster, you can use [Cloudflare](https://www.cloudflare.com/zh-cn/)’s free CDN service.
+
+CDN (Content Delivery Network) caches your website content on servers worldwide, automatically serving users from the nearest server, significantly improving load times.
+
+![](https://pic.yupi.icu/1/1763643073516-5248d56c-bf7d-4537-b8f8-681a104626d9.png)
+
+Cloudflare’s advantages include:
+
+- Completely free (for personal websites).
+- Global CDN acceleration, covering 200+ cities.
+- Automatic HTTPS certificates.
+- DDoS protection and web firewall.
+- Free DNS service.
+
+Using it is simple: register a Cloudflare account, add your domain, and change your domain’s DNS servers to those provided by Cloudflare. Cloudflare will automatically accelerate and protect your website.
+
+You can also use Cloudflare’s Pages deployment capability to upload your code and let it handle deployment with a free domain—even more convenient!
+
+![](https://pic.yupi.icu/1/1763643412558-4d499b46-5e16-4f83-9df7-06a85175df35.png)
+
+If your website is deployed on Vercel or Netlify, they already have CDN acceleration, so no additional Cloudflare configuration is needed. But if you’re deploying on your own rented server, strongly consider using Cloudflare for acceleration.
+
+### More Deployment Methods
+
+Yupi has shared multiple video tutorials on quickly deploying projects:
+
+- [Vercel Project Deployment Tutorial](https://www.bilibili.com/video/BV1TV4y1j76t)
+- [Cloud Editor + Vercel + Object Storage + Intranet Penetration: 4 Deployment Methods](https://www.bilibili.com/video/BV1UZ4y197i1)
+- [Nginx + Baota: 2 Deployment Methods for Personal Blogs](https://www.bilibili.com/video/BV1rU4y1J785)
+- [WordPress Personal Blog Setup](https://www.bilibili.com/video/BV14q4y1R7XM)
+- [4 Mainstream Frontend/Backend Project Deployments](https://www.codefather.cn/course/1790943469757837313/section/1791075571845345281?contentType=video&tabKey=videoList)
+
+Additionally, Yupi has guided over 20 projects on [Programming Navigation](https://codefather.cn/), covering almost every deployment method. If you want to become a professional programmer, it’s recommended to learn these.
+
+- [AI No-Code Application Generation Platform Project](https://www.codefather.cn/course/1948291549923344386): 1Panel + Nginx Frontend + Java Backend (JAR package)
+- [Code Generator Sharing Platform Project](https://www.codefather.cn/course/1790980795074654209): Baota Panel + Nginx Frontend + Java Project Manager (JAR package) Backend Deployment
+- [AI Quiz Application Platform Project](https://www.code-nav.cn/course/1790274408835506178): Vercel Frontend + Docker Backend + Cloud Hosting Serverless Platform Deployment
+- [AI Super Agent Project](https://www.codefather.cn/course/1915010091721236482): Docker Frontend + Docker Backend + Cloud Hosting Serverless Platform Deployment
+- [OJ Online Judge Project](https://www.codefather.cn/course/1790980707917017089): Docker Compose Backend Microservices Deployment
+
+Mastering these deployment methods will handle most deployment needs.
+
+## 3. MCP Services - Extending AI Capabilities
+
+MCP (Model Context Protocol) is an open standard that allows AI tools to connect to various external tools and data sources.
+
+Simply put, MCP is like equipping AI with various “plugins,” enabling it to do more. For example, the File System MCP allows AI to read and write files, GitHub MCP lets AI operate GitHub repositories, Database MCP enables AI to query databases, and Browser MCP allows AI to browse the web.
+
+![](https://pic.yupi.icu/1/mcp.png)
+
+Almost all mainstream AI programming tools now support MCP, including Cursor, Claude Code, Cline, Windsurf, Gemini CLI, Kiro, etc. You can use various MCP services in these tools to greatly expand AI’s capabilities.
+
+Let me use Cursor as an example to demonstrate how to configure and use MCP.
+
+### Using MCP in Cursor
+
+Let me demonstrate how to configure and use MCP in Cursor with a practical example.
+
+For instance, suppose I want Cursor to know the current accurate time.
+
+1) Search for the MCP tool you need on the MCP Encyclopedia website and obtain the MCP configuration information for later use:
+
+![](https://pic.yupi.icu/1/image-20260109113038258.png)
+
+Since this MCP tool requires the `uvx` command for installation, we need to install the uv tool first. Refer to the [official installation documentation](https://docs.astral.sh/uv/getting-started/installation/), select your operating system, and execute a single command to complete the installation.
+
+![](https://pic.yupi.icu/1/image-20260109113308798.png)
+
+After installation, execute the `uvx` command, and you should see the following output, indicating successful installation:
+
+![](https://pic.yupi.icu/1/image-20260109113427041.png)
+
+2) Open Cursor settings, find the MCP configuration option, and click to add MCP:
+
+![](https://pic.yupi.icu/1/image-20260109113809834.png)
+
+3) Cursor manages MCP through JSON files. Add the previously copied MCP server configuration:
+
+```json
+{
+  "mcpServers": {
+    "time": {
+      "command": "uvx",
+      "args": [
+        "mcp-server-time",
+        "--local-timezone=America/New_York"
+      ]
+    }
+  }
+}
+```
+
+![](https://pic.yupi.icu/1/image-20260109112647904.png)
+
+4) After saving, you’ll notice the MCP tool is successfully enabled. Now AI can fetch the latest time.
+
+![](https://pic.yupi.icu/1/image-20260109113524465.png)
+
+5) You can ask AI: What time is it now?
+
+AI will call MCP to give you the most accurate time.
+
+![](https://pic.yupi.icu/1/image-20260109113631840.png)
+
+### Recommended MCP Services
+
+Besides the time MCP demonstrated earlier, there are many practical MCP services to enhance AI programming efficiency.
+
+**Web-related**:
+- Firecrawl MCP: Allows AI to automatically scrape and understand web content.
+- Brave Search MCP: Privacy-focused web search.
+- Context7: Fetches the latest technical documentation.
+- Web to MCP: Replicates web components.
+- Chrome DevTools MCP: Browser debugging.
+
+**Code Hosting**:
+- GitHub MCP: Operates GitHub code repositories.
+
+**Deployment-related**:
+- EdgeOne Pages MCP: One-click deployment to Tencent Cloud.
+
+**File Storage**:
+- COS MCP: Operates Tencent Cloud Object Storage.
+
+These MCP services significantly expand AI’s capabilities, transforming it from a mere code generator into a versatile assistant capable of web searching, file operations, and project deployment.
+
+![](https://pic.yupi.icu/1/image-20260116122211103.png)
+
+If you want to learn more about MCP services, visit:
+
+- ⭐️ [Yupi AI Navigation - MCP Encyclopedia](https://ai.codefather.cn/mcp): Continuously updated with quality MCP services to reshape your AI workflow.
+- [mcp.so](https://mcp.so/): MCP server marketplace, offering various MCP services.
+- [GitHub awesome-mcp-servers](https://github.com/punkpeye/awesome-mcp-servers): Community-maintained list of MCP servers.
+
+These websites continuously update the latest MCP services—recommended to bookmark.
+
+## 4. Standardized Development Tools
+
+Beyond version control, deployment platforms, and MCP, some standardized development tools can enhance project quality.
+
+### Spec-kit and OpenSpec
+
+If you want AI to follow a standardized development process, consider **Specification-Driven Development** (SDD) tools.
+
+The core idea of these tools is to first write requirements into specification documents, then have AI strictly adhere to these specifications when generating code, ensuring code quality and alignment with requirements.
+
+![](https://pic.yupi.icu/1/image-20260116161926017.png)
+
+1) Spec-kit: A specification-driven development framework launched by GitHub, suitable for starting large new projects from scratch.
+
+![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE4%E5%A4%A7.jpeg)
+
+2) OpenSpec: A lightweight specification-driven development framework, suitable for iterating features on existing projects.
+
+![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE6%E5%A4%A7.jpeg)
+
+For more detailed usage of these tools, refer to the “Tool Practice” section of this Vibe Coding tutorial.
+
+### Agent Skills
+
+Agent Skills is an AI skill system launched by Anthropic, allowing complex task instructions, scripts, and resources to be packaged into a skill, enabling AI to quickly learn new capabilities.
+
+![](https://pic.yupi.icu/1/%25E6%25BC%25AB%25E7%2594%25BB%25E5%259B%25BE7%25E5%25A4%25

translations/en/Vibe Coding 零基础教程/10 编程工具/09 我的 AI 工具箱推荐.md

@@ -0,0 +1,301 @@
+# My AI Toolbox Recommendations
+
+> My Top 20 Most Used AI Products This Year
+
+Hello, I'm Yupi, a former full-stack developer at Tencent and an [AI programming blogger](https://space.bilibili.com/12890453) with over 2 million followers across platforms. I'm also the creator of [AI Navigation](https://ai.codefather.cn) and [Programming Navigation](https://www.codefather.cn), among more than 10 self-developed products.
+
+In previous articles, we systematically explored various types of AI programming tools: from AI model selection, no-code platforms, AI code editors, command-line tools, IDE plugins, AI agent platforms, to auxiliary toolkits.
+
+So, the questions arise:
+
+- Among so many tools, which ones do you actually use, Yupi?
+- How do you combine these tools in actual work?
+- Are there any practical experiences you can share?
+
+In this article, I'll share my Top 20 most-used AI products in 2025, along with my practical insights, hoping to provide you with some reference.
+
+## 1. AI Programming Tools
+
+As a programmer, AI programming tools are what I use the most. Below are my main programming tools this year.
+
+### Cursor
+
+[Cursor](https://cursor.com/) is, in my opinion, the top AI editor in terms of development experience and AI engineering capabilities. I rely on it for major projects, whether it's writing, modifying, or refactoring code—Cursor's Agent mode handles it all.
+
+I particularly love its Tab completion feature. While coding, the AI predicts what I'm about to write, and pressing Tab accepts the suggestion. It feels like having an experienced driver sitting beside you, finishing your thoughts before you even type them.
+
+Moreover, Cursor allows seamless switching between multiple models like Claude, GPT, and Gemini, and supports using your own API Key, enabling me to choose the most suitable model for different tasks.
+
+However, Cursor's biggest drawback is its steep price. I once shared my bill, which exceeded 10,000 yuan in just over a month. So now, I combine it with some free tools to avoid budget explosions.
+
+![](https://pic.yupi.icu/1/yupicursorbilling.png)
+
+### Claude Code
+
+[Claude Code](https://claude.ai/code) is my most-used command-line AI programming tool. Its automation level is exceptionally high—it not only generates code but also executes commands, installs dependencies, and creates files automatically.
+
+I typically use it for simple tasks or quickly setting up project frameworks. For example, if I want to create an image compression tool, I just tell the AI in the command line, and it sets up the entire project for me.
+
+![](https://pic.yupi.icu/1/1764146174167-3018c8f3-0ad9-4a4f-9764-246f33b33203.png)
+
+Additionally, Claude Code supports Skills, allowing me to write common norms and processes as Skills for the AI to follow automatically, which is particularly useful for avoiding repetitive work and team collaboration.
+
+Since Claude Code has limitations in China, I often pair it with domestic AI models like Zhipu GLM. This ensures normal usage while keeping costs lower.
+
+### Cline
+
+[Cline](https://cline.bot/) is an AI IDE plugin and one of my backups. When Cursor's budget runs out, or I want to develop in VS Code, I turn to Cline.
+
+![](https://pic.yupi.icu/1/image-20260108222935455.png)
+
+Cline's biggest advantage is that it's completely free and quite comprehensive, achieving about 80% of what Cursor does. Although the experience isn't as smooth as Cursor's, considering it's free, it's already impressive.
+
+Moreover, Cline supports multiple platforms, not just VS Code but also JetBrains IDEs. This means I can use the same tool across different editors, maintaining a consistent experience.
+
+## 2. AI Multimedia Creation Tools
+
+Besides programming, I also use AI for content creation. Below are my most-used multimedia creation tools.
+
+### Nano Banana
+
+Nano Banana is this year's most explosive AI image generation tool. I use it to create comic-style knowledge-explanation images and article cover images.
+
+It has excellent support for Chinese, unlike Midjourney, which requires English prompts. Moreover, the generated images have a consistent style, making them perfect for tutorial illustrations.
+
+The anime-style images you see here are all created with Nano Banana:
+
+![](https://pic.yupi.icu/1/toolstype%25E5%25A4%25A7.jpeg)
+
+Since using Nano Banana, I've completely bid farewell to Midjourney.
+
+### Jimeng AI
+
+[Jimeng AI](https://jimeng.jianying.com/) is ByteDance's all-in-one AI creation platform, supporting text-to-image, image-to-video, and more.
+
+I mainly use it to generate video background scenes. For example, when creating tutorial videos, I use Jimeng AI to generate background visuals. Its video generation speed is fast, and the quality is decent.
+
+Moreover, Jimeng AI is a domestic platform, offering fast access and no worries about being blocked.
+
+### Veo 3
+
+[Veo 3](https://aistudio.google.com/models/veo-3) is Google's most advanced AI video generation model. I use it to create creative short videos.
+
+Veo 3's video quality is indeed high, with realistic physics and lighting effects. However, it's prohibitively expensive, so I only use it when I need high-quality videos.
+
+![](https://pic.yupi.icu/1/1751177650505-09aecbd1-a858-4a01-a74d-62120f074c98.png)
+
+### Eleven Labs
+
+[Eleven Labs](https://elevenlabs.io/) is an AI voice synthesis tool known for its incredibly realistic voice imitation.
+
+Eleven Labs supports multiple languages and voice styles, allowing me to choose different voices for various scenarios. I use it to synthesize voiceovers for creative videos.
+
+![](https://pic.yupi.icu/1/image-20260109100507368.png)
+
+## 3. AI Large Models
+
+AI large models are the foundation of all AI tools. Below are the large models I've used the most this year.
+
+### Zhipu GLM
+
+[Zhipu GLM](https://bigmodel.cn/) is my most-used domestic large model, excelling in programming and Chinese comprehension.
+
+I mainly use it with Claude Code to generate non-commercial full-stack projects. GLM's API is affordable and fast, making it ideal for small projects or quick idea validation.
+
+Zhipu's development has been rapid, with significant improvements in programming capabilities since GLM-4.6, even surpassing Claude Sonnet in some benchmarks! Its IPO was well-deserved.
+
+### Alibaba Tongyi Qianwen
+
+Tongyi Qianwen is the large model integrated into most of our team's products. Its advantages include fast generation speed, easy API integration, and debugging via [Alibaba Cloud Bailian Platform](https://bailian.console.aliyun.com/).
+
+![](https://pic.yupi.icu/1/1752569401445-7023e2c1-f709-4c22-af86-63ee1872c1cd.png)
+
+Our products use it to generate simple content or perform intent recognition. For example, when a user inputs a sentence, we use Tongyi Qianwen to determine the user's intent and call the corresponding function.
+
+Moreover, Tongyi Qianwen offers free quotas, which are sufficient for small projects.
+
+### DeepSeek
+
+[DeepSeek](https://www.deepseek.com/) was once a hit, completely free and strong in programming. However, its product ecosystem and new model release speed have recently lagged.
+
+I now mainly use it to verify technical knowledge. For example, when writing articles, if I'm unsure about a technical point, I ask DeepSeek. Since it's free, I can ask as much as I want without worrying about costs.
+
+![](https://pic.yupi.icu/1/image-20260109100658239.png)
+
+### Gemini
+
+[Gemini](https://gemini.google.com/) boasts powerful reasoning and multimodal understanding capabilities, supporting ultra-long contexts (1 million tokens).
+
+I mainly use it to analyze large projects. For example, when I take on a project with hundreds of files, I use Gemini to quickly understand the project structure.
+
+I also use Gemini's web version to gather foreign technology and product research, as it provides professional reports.
+
+![](https://pic.yupi.icu/1/image-20260109100840547.png)
+
+However, Gemini has certain usage barriers in China, as you know.
+
+## 4. AI Development Frameworks
+
+Besides directly using AI tools, I also use some AI development frameworks to build AI applications.
+
+### Spring AI
+
+[Spring AI](https://spring.io/projects/spring-ai) is the standard for Java AI development, providing a unified API to simplify large model integration.
+
+Our team uses Spring AI for Java projects. It unifies various large models' APIs into a single interface, allowing developers to easily switch between models without changing code.
+
+![](https://pic.yupi.icu/1/image-20260109100909041.png)
+
+Moreover, Spring AI offers many advanced features like conversation memory, RAG, and tool calling, enabling us to quickly build complex AI applications.
+
+### LangChain4j
+
+[LangChain4j](https://docs.langchain4j.dev/intro) is the Java version of LangChain, supporting declarative syntax and offering a great development experience, ideal for building complex agents.
+
+I particularly like its chained call syntax, which is elegant to write. Its documentation is comprehensive, and the community is active, making it easy to find solutions on GitHub Issues.
+
+When leading [Programming Navigation](https://codefather.cn/) members to develop an [AI No-Code Generation Platform Project](https://www.codefather.cn/course/1948291549923344386) comparable to major companies, we used LangChain4j + LangGraph4j, which made it easy to build complex AI workflows.
+
+![](https://pic.yupi.icu/1/1753332332820-9ec614de-65a2-496d-b9b2-dc89c20d06c9.png)
+
+### Vercel AI Gateway
+
+[Vercel AI Gateway](https://vercel.com/ai-gateway) is an AI model gateway service that allows unified access to hundreds of AI models.
+
+It provides a unified API, so I don't need to learn each model's API documentation—I just use Vercel AI Gateway.
+
+![](https://pic.yupi.icu/1/1760687990497-90720fbb-0df6-4ede-87b8-64b8702994e9-20251028181254840.png)
+
+I use it to develop creative projects. For example, if I want to create an AI tool that lets users choose different models, Vercel AI Gateway makes it easy to implement this feature.
+
+### Alibaba Cloud Bailian
+
+[Alibaba Cloud Bailian](https://bailian.console.aliyun.com/) is an enterprise-level AI application development platform supporting RAG knowledge bases, process orchestration, and more.
+
+Our team uses it to manage some knowledge bases. For example, we have many technical documents, and Bailian's RAG feature makes it easy for AI to answer questions based on these documents.
+
+![](https://pic.yupi.icu/1/1744177887403-6373c63c-d410-49ba-a71c-556389536376.png)
+
+Moreover, Bailian offers visual process orchestration, allowing us to build complex AI workflows without writing code.
+
+![](https://pic.yupi.icu/1/1745388167957-d7995436-fc2f-410e-bc59-4f6db6544359.png)
+
+### OpenRouter
+
+[OpenRouter](https://openrouter.ai/) is a unified AI model routing platform. It supports hundreds of models and allows easy switching without registering accounts on each platform.
+
+Whenever a new model is released, I try it on OpenRouter to experience the latest capabilities.
+
+![](https://pic.yupi.icu/1/image-20260109101446266.png)
+
+For developers looking to experiment, OpenRouter is an excellent choice.
+
+## 5. AI Browser Extensions
+
+AI browser extensions allow me to use AI anytime within the browser, which is incredibly convenient.
+
+### Monica
+
+[Monica](https://monica.im/) is an all-in-one AI assistant in the browser, offering webpage summarization, video summarization, translation, writing, and image processing.
+
+![](https://pic.yupi.icu/1/image-20260109101602426.png)
+
+I use Monica daily. For example, when reading long articles, I use it to summarize the core content; when reading English documents, I use it for translation; and when browsing code repositories, I summarize the project introductions.
+
+![](https://pic.yupi.icu/1/image-20260109101803122.png)
+
+Monica's biggest advantage is its high integration, covering almost all common AI functions. Moreover, it supports multiple large models, allowing me to choose the most suitable one for each task. Highly recommended.
+
+### AITDK
+
+[AITDK](https://aitdk.com/) is an SEO and content creation tool. I use it for keyword analysis and competitor research.
+
+Content creators know the importance of keyword research. AITDK helps me analyze which keywords have high search volume and low competition, so I can write articles or optimize my website accordingly.
+
+Moreover, AITDK can analyze competitors' content strategies, showing what others are writing, helping me find unique angles.
+
+![](https://pic.yupi.icu/1/image-20260109101947603.png)
+
+## 6. AI Daily Conversations
+
+Besides work, I also use AI to solve daily problems.
+
+### Byte Doubao
+
+Byte Doubao is a national-level AI application known for its speed and smooth interaction.
+
+Whenever I encounter a problem, I often pull out my phone and ask Doubao. Its response speed is incredibly fast, and its Chinese comprehension is excellent.
+
+### Tencent Yuanbao
+
+Tencent Yuanbao's biggest advantage is its integration with WeChat, making it accessible anytime, anywhere.
+
+When I see an article in WeChat and want an AI summary, I just @ Yuanbao. This seamless integration is fantastic—I can use AI within WeChat without switching apps.
+
+![](https://pic.yupi.icu/1/image-20260109102243168.png)
+
+## 7. AI Office Tools
+
+When creating content, I also use AI office tools to improve efficiency.
+
+### Baidu Wenxin Assistant
+
+[Baidu Wenxin Assistant](https://image.baidu.com/) integrates many document writing and image processing tools. I often use it for image editing and watermark removal.
+
+For example, if I take a photo and want to remove a watermark, Wenxin Assistant can do it in seconds. Or if I want to change a photo's background, Wenxin Assistant can handle that too.
+
+Moreover, Wenxin Assistant offers many other features like PPT generation and document translation. It's a practical tool for content creators.
+
+![](https://pic.yupi.icu/1/image-20260109102440839.png)
+
+## 8. Yupi AI Navigation
+
+The [AI Navigation Website](https://ai.codefather.cn/) developed by Yupi's team is also my most-visited AI website this year—it's comprehensive!
+
+I regularly check for the latest AI trends. Moreover, Yupi AI Navigation categorizes many AI tools, making it easy to find what I need.
+
+![](https://pic.yupi.icu/1/AI%E8%B5%84%E6%BA%90%E5%A4%A7%E5%85%A8%E7%BD%91%E7%AB%99.png)
+
+## 9. My Usage Strategy
+
+After sharing so many tools, here's a quick summary:
+
+- **For major projects**, I use Cursor + Claude Opus 4.5, as the code quality requirements are high, necessitating the strongest AI capabilities.
+
+- **For small projects or quick idea validation**, I use Claude Code + Zhipu GLM, as they are fast and cost-effective.
+
+- **When reading projects in VS Code**, I pair Cline + DeepSeek, as it's convenient.
+
+- **For image generation**, I use Nano Banana, as it supports Chinese well and generates quickly.
+
+- **For video generation**, I choose Jimeng AI (cost-effective) or Veo 3 (highest quality) based on quality needs.
+
+- **For daily problem-solving**, I directly ask Doubao or Yuanbao, as they are quick and convenient.
+
+- **When writing articles needing images**, I use Wenxin Assistant for image processing, as it's comprehensive.
+
+Choosing the most suitable tool for each scenario ensures efficiency while controlling costs.
+
+## Final Thoughts
+
+These are my Top 20 most-used AI products this year, along with my practical insights.
+
+**Tools will keep evolving, so flexibility in selection is key.**
+
+Beyond tools, the core competence of Vibe Coding is more important: how to clearly express requirements, how to effectively communicate with AI, how to understand and optimize AI-generated code, and how to turn ideas into products.
+
+Now that you've mastered the tool knowledge needed for Vibe Coding, it's time to use these tools to create real projects!
+
+In the [Project Practice] section, I'll guide you through various projects, from personal tools to AI applications, from simple to complex, helping you truly grasp the essence of Vibe Coding.
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [Comprehensive AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guides, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheatsheets: [Internship/Campus/Social Recruitment High-Frequency Topics, Enterprise Exam Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Builder: [Professional Templates, Rich Examples, Direct to Interviews](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus/Social Recruitment Interviews to Secure Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/10 编程工具/10 优质 AI 编程扩展推荐.md

@@ -0,0 +1,436 @@
+# Top AI Programming Extensions Recommendations
+
+Hello everyone, I'm programmer Yupi. Today I'll share some AI programming extensions I personally use to significantly improve AI programming efficiency and code quality.
+
+**10,000-word guide + 100+ images**, pure干货! Bookmark this and let's get started~
+
+## 1. MCP Server Category
+
+MCP stands for Model Context Protocol. Simply put, it's an open standard that allows AI models to connect with external tools and data sources.
+
+Think of MCP as a USB-C port for AI. Originally, AI could only answer questions or generate code based on its training data. But with this universal interface, it can now connect to various external tools - like opening browsers to view websites, searching and scraping web content, deploying projects to the cloud, accessing databases, etc. Its capabilities instantly become much richer.
+
+![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE1%E5%A4%A7.jpeg)
+
+### ⭐️ Firecrawl MCP for Web Content Scraping
+
+First is [Firecrawl MCP](https://www.firecrawl.dev/), which enables AI to automatically scrape and understand web content.
+
+When developing projects, I often need to gather reference materials from the web, read official documentation and tech blogs, or analyze competitors' feature implementations. Doing this manually requires opening websites, copying and pasting content, or writing custom scraping scripts - a huge hassle.
+
+With Firecrawl MCP, it becomes much simpler. I just tell my AI programming tool:
+- Get me the content from this website
+- Read this document for me
+- Search online for information about XX
+
+It automatically retrieves the webpage's content, structure, even dynamically loaded data.
+
+![](https://pic.yupi.icu/1/image-20260116105912027.png)
+
+**How to use?**
+
+First register on [Firecrawl's website](https://www.firecrawl.dev/app/api-keys) and create an API Key for service calls.
+
+![](https://pic.yupi.icu/1/image-20260116105955795.png)
+
+Then configure the MCP server in your AI programming tool. Using Cursor as an example (other tools have similar MCP integration methods - check their official docs like [Claude Code MCP integration](https://docs.anthropic.com/en/docs/claude-code/mcp)).
+
+Open Cursor settings, find Tools & MCP, click `+ New MCP Server`.
+
+![](https://pic.yupi.icu/1/image-20260116110425690.png)
+
+Essentially you're modifying the MCP config file to add:
+
+```json
+{
+  "mcpServers": {
+    "firecrawl-mcp": {
+      "command": "npx",
+      "args": ["-y", "firecrawl-mcp"],
+      "env": {
+        "FIRECRAWL_API_KEY": "Your_API_Key"
+      }
+    }
+  }
+}
+```
+
+![](https://pic.yupi.icu/1/image-20260116110454499.png)
+
+This configuration means: Run the firecrawl-mcp tool via npx command and pass your API key to it. If you don't have npx installed, first [install Node.js](https://nodejs.org/zh-cn) - npx comes bundled with it.
+
+After configuration, green success dots indicate it's ready to use.
+
+![](https://pic.yupi.icu/1/image-20260116110558199.png)
+
+Beyond basic web scraping, Firecrawl MCP also supports batch site scraping, recursive multi-layer link scraping, automatic retries on failure, and other advanced features.
+
+### Brave Search MCP for Private Searching
+
+Next is [Brave Search MCP](https://github.com/brave/brave-search-mcp-server), enabling AI to perform privacy-focused web searches.
+
+During development, I often need AI to search for the latest technical materials, find library usage examples, or troubleshoot technical issues. The traditional approach requires manually searching and copying results to AI - quite tedious.
+
+With Brave Search MCP, I simply tell AI:
+- Search for React 19's new features
+- Look up how to fix this error
+
+It uses Brave Search to find answers. Brave doesn't track search history, offering excellent privacy protection.
+
+![](https://pic.yupi.icu/1/image-20260116111803869.png)
+
+**How to use?**
+
+First register at [Brave Search API](https://brave.com/search/api/), then go to API Key management. You must select the free plan! 2000 monthly queries are enough for personal development.
+
+![](https://pic.yupi.icu/1/image-20260116110947801.png)
+
+One catch: Even the free plan requires payment method setup. Those without overseas bank cards may need to skip.
+
+After subscription, create an API Key:
+
+![](https://pic.yupi.icu/1/image-20260116111311536.png)
+
+With the API Key, add to Cursor's MCP config:
+
+```json
+{
+  "mcpServers": {
+    "brave-search": {
+      "command": "npx",
+      "args": ["-y", "brave-search-mcp"],
+      "env": {
+        "BRAVE_API_KEY": "Your_API_Key"
+      }
+    }
+  }
+}
+```
+
+Once configured, AI can search for latest information anytime.
+
+Supports web, image, video, news searches, even local business info (like nearby coffee shops).
+
+![](https://pic.yupi.icu/1/image-20260116111954334.png)
+
+It also features AI summarization, automatically condensing search results into concise answers.
+
+### ⭐️ Context7 for Latest Documentation
+
+[Context7](https://context7.com/) helps AI access the latest technical documentation.
+
+We know AI training data has cutoff dates - GPT-4's knowledge might only be current until 2023. This creates problems when asking about latest framework versions - answers may be outdated.
+
+Context7 solves this by automatically scraping latest version-specific docs from official sites for AI.
+
+![](https://pic.yupi.icu/1/image-20260116112229490.png)
+
+Thus, AI's code examples and suggestions are based on current docs, avoiding deprecated practices, significantly improving project success rates.
+
+**How to use?**
+
+Visit [Context7 Dashboard](https://context7.com/dashboard) to register and get an API Key (free for personal use).
+
+![](https://pic.yupi.icu/1/image-20260116112322940.png)
+
+Add to MCP config:
+
+```json
+{
+  "mcpServers": {
+    "context7": {
+      "url": "https://mcp.context7.com/mcp",
+      "headers": {
+        "CONTEXT7_API_KEY": "Your_API_Key"
+      }
+    }
+  }
+}
+```
+
+When discussing technical docs with AI or mentioning "use context7", it automatically fetches latest documentation.
+
+![](https://pic.yupi.icu/1/image-20260116112656483.png)
+
+### Web to MCP for UI Component Replication
+
+[Web to MCP](https://web-to-mcp.com/) is a Chrome extension that works with MCP to send any webpage UI component directly to AI for code generation - the fastest way to "copy homework"!
+
+![](https://pic.yupi.icu/1/image-20260116113052973.png)
+
+Often when browsing sites, I see nice UI components and want AI to recreate similar effects. Previously, I'd screenshot and describe: "Make a button like this - rounded corners, gradient, with shadow..." Time-consuming and imprecise.
+
+With Web to MCP, I just click the element I want to replicate:
+
+![](https://pic.yupi.icu/1/image-20260116113725321.png)
+
+It automatically captures the component's DOM structure, CSS styles, even interactions, providing a prompt for AI replication.
+
+Just send the prompt to AI, which uses MCP to get complete component info and generates replication code.
+
+![](https://pic.yupi.icu/1/image-20260116114142631.png)
+
+Compared to vague screenshots, the generated code is much more accurate.
+
+![](https://pic.yupi.icu/1/image-20260116114426822.png)
+
+**How to use?**
+
+1) Install extension via website or Chrome Web Store search
+
+![](https://pic.yupi.icu/1/image-20260116113138693.png)
+
+2) Log in with Google account to get your MCP config:
+
+![](https://pic.yupi.icu/1/image-20260116113241575.png)
+
+3) Add to AI tool's MCP config:
+
+```json
+{
+  "mcpServers": {
+    "web-to-mcp": {
+      "url": "https://web-to-mcp.com/mcp/your_unique_ID"
+    }
+  }
+}
+```
+
+When browsing, click the extension icon, select desired components, and directly reference them in your AI tool to quickly generate style-consistent code.
+
+### Chrome DevTools MCP for Browser Debugging
+
+[Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp) by Chrome's team lets AI directly control Chrome for operations and debugging.
+
+For frontend development, I often need to debug pages, inspect network requests, analyze performance. Previously manual in browser DevTools, now AI can do it.
+
+For example: "Why is this site loading slowly?" AI opens DevTools, analyzes network requests, checks resource load times, then identifies issues.
+
+![](https://pic.yupi.icu/1/image-20260116115138719.png)
+
+Or: "Test this form submission" - it auto-fills forms, clicks submit, checks responses.
+
+**How to use?**
+
+Add to MCP config:
+
+```json
+{
+  "mcpServers": {
+    "chrome-devtools": {
+      "command": "npx",
+      "args": ["-y", "chrome-devtools-mcp@latest"]
+    }
+  }
+}
+```
+
+After configuration, AI can automate testing and debugging. The tool auto-connects to your running Chrome browser without extra setup.
+
+Also supports element locating, network monitoring, performance analysis, screenshots - ideal for frontend development and testing.
+
+### EdgeOne Pages MCP for One-Click Deployment
+
+[EdgeOne Pages MCP](https://github.com/TencentEdgeOne/edgeone-pages-mcp) by Tencent Cloud deploys projects to Tencent's accelerated network for public access and speed boosts.
+
+After development, you'll want others to access your site. Traditional deployment is cumbersome - manually packaging code, uploading to servers, configuring domains, setting HTTPS certificates - takes significant time.
+
+![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE2%E5%A4%A7.jpeg)
+
+With EdgeOne Pages MCP, I just tell AI: "Deploy this project" - it handles packaging, uploading, deployment, providing a live URL. Deployed to global accelerated network for fast worldwide access.
+
+![](https://pic.yupi.icu/1/1752212029384-16cfba8f-babb-49c0-9d41-3b76ee78eecf.png)
+
+**How to use?**
+
+First enable Pages service at [EdgeOne Console](https://console.cloud.tencent.com/edgeone/pages):
+
+![](https://pic.yupi.icu/1/1752209404627-3a3193d9-4c94-4f80-ad02-435ff22f16ed.png)
+
+Get API Token as service credential:
+
+![](https://pic.yupi.icu/1/1752209504079-6741bbd0-438e-48a4-86be-6eddfc3efa83.png)
+
+Add to MCP config:
+
+```json
+{
+  "mcpServers": {
+    "edgeone-pages-mcp-server": {
+      "command": "npx",
+      "args": ["edgeone-pages-mcp"],
+      "env": {
+        "EDGEONE_PAGES_API_TOKEN": "Your_API_Token"
+      }
+    }
+  }
+}
+```
+
+After configuration, AI can one-click deploy projects. Free deployment supports static sites, full-stack projects, auto HTTPS and CDN - perfect for personal projects and small apps.
+
+![](https://pic.yupi.icu/1/1752211869664-b74dc4d9-57b1-4bb7-9f02-703112b613eb.png)
+
+### COS MCP for Object Storage
+
+[COS MCP](https://github.com/Tencent/cos-mcp) lets AI directly operate Tencent Cloud Object Storage.
+
+Object storage is cloud file storage - think cloud drives.
+
+![](https://pic.yupi.icu/1/image-20260116120009365.png)
+
+For team collaboration, we often need AI to reference project specs or images. Previously storing files locally and manually uploading to AI was inconvenient and hard to maintain/share/modify across teams.
+
+With COS MCP, I can store shared files in the cloud and have AI directly access them.
+
+![](https://pic.yupi.icu/1/image-20260116122211103.png)
+
+For example: "Write this feature according to our team's COS-shared project specs" - AI reads specs from COS and codes accordingly.
+
+![](https://pic.yupi.icu/1/image-20260116122453843.png)
+
+**How to use?**
+
+1) First enable Tencent Cloud COS service at [COS Console](https://console.cloud.tencent.com/cos), create a Bucket:
+
+![](https://pic.yupi.icu/1/image-20260116120711822.png)
+
+2) Get SecretId and SecretKey at "Access Management" > "API Key Management" - keep these secure!
+
+![](https://pic.yupi.icu/1/image-20260116121022222.png)
+
+3) Add to MCP config:
+
+```json
+{
+  "mcpServers": {
+    "cos-mcp": {
+      "command": "npx",
+      "args": [
+        "cos-mcp",
+        "--Region=your_region",
+        "--Bucket=your_bucket",
+        "--SecretId=your_SecretId",
+        "--SecretKey=your_SecretKey"
+      ]
+    }
+  }
+}
+```
+
+![](https://pic.yupi.icu/1/image-20260116121243549.png)
+
+After configuration, AI can read/manage your cloud files - essentially giving AI a cloud drive.
+
+Also supports image search, processing, document conversion, video thumbnail generation.
+
+![](https://pic.yupi.icu/1/image-20260116121658701.png)
+
+### GitHub MCP for Repository Management
+
+[GitHub MCP](https://github.com/github/github-mcp-server) by GitHub lets AI directly operate GitHub repositories.
+
+Programmers know GitHub - the largest code hosting platform for storing code and collaborative development.
+
+![](https://pic.yupi.icu/1/image-20260116122621938.png)
+
+Daily development may require searching repos, creating issues, submitting PRs, reviewing changes, analyzing commit history. Previously manual on GitHub website, now AI can do it.
+
+For example: "What projects have I recently open-sourced on GitHub? How many stars?"
+
+![](https://pic.yupi.icu/1/image-20260116123701822.png)
+
+It quickly generates a data report:
+
+![](https://pic.yupi.icu/1/image-20260116123734660.png)
+
+Or: "Show recent week's code changes" - analyzes Git history to show modifications.
+
+![](https://pic.yupi.icu/1/image-20260116124022290.png)
+
+**How to use?**
+
+First get your [Access Token](https://github.com/settings/tokens) as credential:
+
+![](https://pic.yupi.icu/1/image-20260116122846165.png)
+
+Add to MCP config:
+
+```json
+{
+  "mcpServers": {
+    "github": {
+      "url": "https://api.githubcopilot.com/mcp/",
+      "headers": {
+        "Authorization": "Bearer your_GitHub_token"
+      }
+    }
+  }
+}
+```
+
+Also supports code analysis, CI/CD monitoring, security scanning - nearly anything you can do on GitHub, AI can do.
+
+![](https://pic.yupi.icu/1/image-20260116123148068.png)
+
+## 2. IDE Extension Plugins
+
+Now let's discuss IDE extensions.
+
+IDEs are integrated development environments - essentially code editors like VS Code, JetBrains IDEA. Plugins enhance editor capabilities for better development experience.
+
+Many GUI-based AI programming tools (like Cursor) are VS Code-based, thus supporting VS Code plugins. Below I'll mainly share VS Code plugins that work out-of-the-box.
+
+![](https://pic.yupi.icu/1/image-20260116124127539.png)
+
+### Claude Code Official Extension
+
+Claude Code by Anthropic was originally a standalone CLI tool. The [Claude Code VS Code Extension](https://www.anthropic.com/news/enabling-claude-code-to-work-more-autonomously) lets you use it directly in editors without separate terminals.
+
+Search "Claude Code" in VS Code or Cursor's extension marketplace to install:
+
+![](https://pic.yupi.icu/1/image-20260116124255886.png)
+
+This extension provides GUI - converse with Claude via sidebar panel with flexible text input.
+
+![](https://pic.yupi.icu/1/image-20260116124614180.png)
+
+When AI modifies code, changes appear in real-time with diff comparisons showing exactly what changed.
+
+![](https://pic.yupi.icu/1/image-20260116124700221.png)
+
+I often use it for refactoring, bug fixes, new features. Supports parallel multi-sessions - multiple Claude agents handling different tasks (e.g. one for frontend, one for backend) for efficiency.
+
+![](https://pic.yupi.icu/1/image-20260116124928547.png)
+
+Similar plugins include Cline, GitHub Copilot - choose based on preference.
+
+### GitLens for Git Visualization
+
+[GitLens](https://www.gitkraken.com/gitlens) provides intuitive Git change history viewing.
+
+![](https://pic.yupi.icu/1/image-20260116125249627.png)
+
+Git manages code versions - recording every change: who, when, why.
+
+With these records, when bugs appear I can quickly find the "culprit".
+
+![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE3%E5%A4%A7.jpeg)
+
+But Git is CLI-only - viewing history requires manual commands in uncomfortable formats.
+
+![](https://pic.yupi.icu/1/image-20260116125146713.png)
+
+After installing GitLens from editor marketplace, hovering over any code line shows author, related PRs, etc.
+
+![](https://pic.yupi.icu/1/image-20260116125445257.png)
+
+The Git management panel clearly displays project commit history.
+
+![](https://pic.yupi.icu/1/image-20260116125736701.png)
+
+Also features AI capabilities - auto-generating commit messages, explaining changes, changelogs, and AI explanations of modification purposes.
+
+![](https://pic.yupi.icu/1/image-20260116130129466.png)
+
+### ⭐️ Office Viewer for Document Preview

translations/en/Vibe Coding 零基础教程/10 编程工具/工具实战/Agent Skills：通用 AI 技能库.md

@@ -0,0 +1,314 @@
+# Agent Skills: The Universal AI Skill Library
+
+> Empowering AI to quickly learn new skills
+
+Hello, I'm Programmer Yupi.
+
+In previous articles, we learned how to generate code with AI. But you might have noticed some issues:
+
+- AI-generated interfaces always follow the same blue-purple gradient pattern
+- Having to input the same lengthy prompts repeatedly is tedious
+- AI lacks professionalism in certain specialized tasks
+
+Is there a way to quickly teach AI new skills and make it more professional?
+
+In this article, I'll introduce **Agent Skills**, an AI skill system launched by Anthropic that enables AI to rapidly master various professional skills.
+
+⭐️ Recommended video version (easier to understand): [https://bilibili.com/video/BV1T7zzBQEaA](https://www.bilibili.com/video/BV1T7zzBQEaA/)
+
+## 1. Before Agent Skills Existed
+
+Before understanding Agent Skills, let's see how we used to solve these problems.
+
+Suppose you're developing a website with AI. To get better results, you tell the AI:
+
+- Don't use blue-purple gradients for the interface
+- Don't generate excessive unnecessary documentation
+- Follow the company's coding standards
+
+Blah blah blah, hundreds of words.
+
+![](https://pic.yupi.icu/1/1769306620114-3ddb877f-7e14-4e89-abbe-bcd19c33c9ff.png)
+
+Every time you develop a website, you have to write this long, tedious prompt - what a hassle!
+
+So the clever you starts looking for solutions.
+
+First, save common prompts to a separate file (like `prompts.md`) and manually feed them to AI each time.
+
+![](https://pic.yupi.icu/1/1769306653314-5b3a0f47-eff0-4c1c-9b9c-26139abfee80.png)
+
+Then create a resources folder, stuffing it with company coding standards and design materials, telling AI to reference these when writing.
+
+![](https://pic.yupi.icu/1/1769306679682-3f1a3eae-893e-4860-b97d-c7f91b111a8b.png)
+
+Next, you write some scripts to automatically format code, run tests, and commit to Git after AI generates code.
+
+![](https://pic.yupi.icu/1/1769306691846-4dcf892d-1969-40ae-8e73-b7c5c5c5d018.png)
+
+Finally, create an `AGENTS.md` file documenting all standards and workflows for AI to automatically read.
+
+You pat yourself on the back: Hehe, my workflow is perfect!
+
+![](https://pic.yupi.icu/1/1769306725742-e3c9a7e4-f18b-469c-b3d3-78f38ea8a37e.png)
+
+But soon, you notice a problem. As standards grow, documents become bloated, consuming too much AI context space and wasting tokens in every conversation.
+
+![](https://pic.yupi.icu/1/1769306754832-fad954ff-b289-4e02-a714-e5ca7dafc9cc.png)
+
+This is when Agent Skills should make its entrance!
+
+## 2. What Are Agent Skills?
+
+[Agent Skills](https://claude.com/blog/skills) is an [open standard](https://platform.claude.com/docs/zh-CN/agents-and-tools/agent-skills/overview) launched by Anthropic to enable AI to learn and use various professional skills without repetitive prompt input.
+
+![](https://pic.yupi.icu/1/1769306883902-94de7351-58e4-43ae-86da-e017725d59cc.png)
+
+It defines a standard for **encapsulating AI workflows**: Developers can package complex task instructions, scripts, and resources into a **Skill**; as a user, you just need to install these skills, and the AI can immediately master this capability without reinventing the wheel.
+
+Simply put, they're **skill packs** for AI. These packs contain carefully designed prompts, code scripts, and various resource files.
+
+![](https://pic.yupi.icu/1/1769306811193-2ee3acbc-5e36-46c2-8d08-b2682494fb56.png)
+
+Imagine AI as a workplace newbie. Equip it with a `Document Processing Skill`, and it instantly knows how to create PPTs and handle Excel sheets; install a `Coding Standards Skill`, and it learns to write code according to company standards.
+
+![](https://pic.yupi.icu/1/1769306900359-2a2b73da-a366-411d-ad3b-2ae61f6b5bc4.png)
+
+You might think: Wait, isn't this just packaging documents that teach AI how to do things and files AI needs into folders?
+
+![](https://pic.yupi.icu/1/1769306918453-1b2d34df-db49-4932-88cd-89eec0c9f773.png)
+
+Yes, that's essentially it. But Anthropic has made it a universal standard with some new tricks in implementation. Let's first practice using Agent Skills before revealing its secrets.
+
+## 3. Getting Started with Agent Skills
+
+Currently, the best tool supporting Agent Skills is Anthropic's official [Claude Code](https://claude.com/product/claude-code). Let's use it to install and use Skills.
+
+![](https://pic.yupi.icu/1/1769306959992-8489754c-6a63-4685-b804-f27836e92df8.png)
+
+### 1. Installing Skills
+
+First, open Claude Code and enter the command to add the official skill marketplace:
+
+```plain
+/plugin marketplace add anthropics/skills
+```
+
+![](https://pic.yupi.icu/1/1769307009465-4e04d585-3f68-4fcb-a3b0-ba43ad70139a.png)
+
+This is like opening a skill store in your AI assistant, allowing you to acquire skills from the store.
+
+![](https://pic.yupi.icu/1/1769307026089-70a117da-b18e-4c7d-992b-1d08e30a7a0b.png)
+
+In Claude Code, enter the command to install the official skill pack:
+
+```plain
+/plugin install example-skills@anthropic-agent-skills
+```
+
+![](https://pic.yupi.icu/1/1769307063576-10e2ce68-b5cd-41c7-8d6c-da0781298929.png)
+
+This example-skills pack contains various official sample skills, including frontend design, web testing, GIF creation, etc.
+
+![](https://pic.yupi.icu/1/1769307079120-6aaf2999-fee5-4fdb-a5e3-2ba66824b4de.png)
+
+After installation, you can directly have AI use these skills.
+
+Alternatively, you can install the [frontend-design](https://www.claudeskill.site/en/skills/anthropic-agent-skills:frontend-design) skill with this command:
+
+```markdown
+skill install anthropic-agent-skills:frontend-design
+```
+
+### 2. Frontend Design Skill
+
+For example, when creating a website, without skills, AI-generated code would have that familiar blue-purple gradient, the same AI aesthetic every time.
+
+![](https://pic.yupi.icu/1/1769307096370-df6a9ece-2720-4e1d-b725-431eb4e54afa.png)
+
+Now with the frontend-design skill installed - which **teaches AI to generate professionally designed websites** - when you input: "Help me develop a personal portfolio website," AI will proactively ask: "I noticed you have the frontend design skill installed. Would you like to use it to generate more design-conscious pages?"
+
+![](https://pic.yupi.icu/1/1769307135496-aa2a1e4e-4e8a-43e5-a138-9a148410b52e.png)
+
+After confirmation, AI will use the skill to generate code, bidding farewell to blue-purple gradients and creating uniquely styled, beautiful pages.
+
+![](https://pic.yupi.icu/1/1769307161745-c81ca221-9902-49dd-96de-a99d50a17684.png)
+
+No need to input the same lengthy prompts every time - install the skill once and you're done.
+
+### 3. Document Processing Skills
+
+Besides coding-related skills, official document processing skill packs are also available.
+
+![](https://pic.yupi.icu/1/1769307180929-3b2d4bcf-c1a7-40e0-831d-336c78b9ccb8.png)
+
+Install with this command in Claude Code:
+
+```plain
+/plugin install document-skills@anthropic-agent-skills
+```
+
+![](https://pic.yupi.icu/1/1769307200501-48c05a43-75d0-4cf9-bc4f-3f89554f6295.png)
+
+This pack includes skills for PPT creation, Word document generation, Excel data analysis, PDF parsing, etc.
+
+![](https://pic.yupi.icu/1/1769307220369-c4c7889b-6ddc-4f29-8247-9fe02af6d3eb.png)
+
+Now when you ask AI to create a PPT, it will automatically invoke the PPT creation skill, directly generating formatted PPT files, saving you hours.
+
+![](https://pic.yupi.icu/1/1769141161384-f52f68b1-9260-4ae2-bf92-f418673660e6.png)
+
+![](https://pic.yupi.icu/1/1769307245673-c64d081e-09c5-4cee-a3a2-7eaa0e1c98ad.png)
+
+## 4. Revealing Agent Skills' Internal Mechanics
+
+You might wonder: How do Skills work immediately after installation? What's inside skill packs? How does AI know which skill to use?
+
+A [skill](https://agentskills.io/what-are-skills) is essentially a folder containing a `SKILL.md` skill documentation file, along with executable scripts, resources, and reference documents.
+
+![](https://pic.yupi.icu/1/1769307275438-55f0f5fb-b429-43cc-9964-c48486af404e.png)
+
+```markdown
+my-skill/
+├── SKILL.md          # Required: Instructions and metadata  
+├── scripts/          # Optional: Executable scripts
+├── references/       # Optional: Reference documents
+└── assets/           # Optional: Templates and resources
+```
+
+Skill structures vary based on complexity. You can find installed skill folders in local directories.
+
+![](https://pic.yupi.icu/1/1769141068658-ef05e94f-380b-4784-b78c-2c588289832a.png)
+
+Take the official PPT creation skill as an example:
+
+```plain
+skills/pptx/
+├── SKILL.md          # Skill documentation (required)
+├── ooxml/            # OOXML resources
+├── scripts/          # Processing scripts  
+├── html2pptx.md      # HTML to PPT instructions
+├── ooxml.md          # OOML format documentation
+└── LICENSE.txt       # License
+```
+
+It contains a core skill documentation file `SKILL.md`, along with scripts, reference documents, and resource files.
+
+![](https://pic.yupi.icu/1/1769307298133-872126c8-e0b4-4264-8914-33ddea77c83d.png)
+
+The frontend-design skill only has a `SKILL.md` file.
+
+![](https://pic.yupi.icu/1/1769307312566-e868eead-6723-42e1-80ba-fbffd9976cf2.png)
+
+### SKILL.md File Structure
+
+The `SKILL.md` file is the core of each skill, containing two key parts.
+
+First is the **metadata**, written in YAML at the file's beginning:
+
+```yaml
+---
+name: frontend-design
+description: Generate frontend code with professional design sense, avoiding repetitive AI aesthetics
+---
+```
+
+`name` is the skill's name. `description` explains when AI should use this skill. Clearer descriptions help AI invoke it at appropriate times.
+
+![](https://pic.yupi.icu/1/1769307333844-a1c504a9-0bf9-41b0-ac0b-364e4edf881d.png)
+
+Second is the **instruction content** - carefully designed prompts guiding AI on exactly how to perform the task.
+
+Take the [frontend-design](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md) skill as an example. Its instructions include:
+
+- Design thinking: Before coding, analyze product purpose, user base, technical constraints, then choose a bold aesthetic direction (minimalist, retro-futuristic, industrial, organic natural, luxurious, etc.)
+- Frontend aesthetic guidelines: Font selection (avoid overused fonts like Arial, Inter; choose distinctive combinations), color themes (primary colors with vivid accents), motion design, spatial composition, backgrounds and visual details
+- Pitfall avoidance: Explicitly prohibit purple gradients, system fonts, repetitive layouts and other AI aesthetic traps
+
+![](https://pic.yupi.icu/1/1769307344477-48419e65-53ea-4cfe-a495-f70be84b2afe.png)
+
+### Progressive Disclosure Mechanism
+
+With multiple Skills, how does AI know which to use? Wouldn't loading all skill documentation consume too much context?
+
+This introduces the core mechanism of **Progressive Disclosure**.
+
+When you ask AI to perform a task, it first scans the skill directory without loading all content into context. It only reads each skill's metadata (name and description), identifying relevant skills based on task alignment.
+
+![](https://pic.yupi.icu/1/1769307378437-dce56ae8-4336-47c1-9ac6-dc39776222c7.png)
+
+Then it loads the complete skill documentation to execute according to instructions:
+
+![](https://pic.yupi.icu/1/1769307391204-f81c2a91-e21e-46bb-a49f-205196aa7774.png)
+
+And loads other resources from the skill pack as needed:
+
+![](https://pic.yupi.icu/1/1769307417577-6c55f619-9bf2-43d5-bc76-80f65c3db3c4.png)
+
+**Load what you need when you need it** - precise matching while saving context. This is the essence of progressive disclosure.
+
+So Agent Skills essentially **package professional knowledge into folders for AI to load and use on demand**.
+
+![](https://pic.yupi.icu/1/1769307432541-5753722e-ba96-404a-b042-c130afb4378f.png)
+
+## 5. Using Agent Skills Across Tools
+
+Besides Claude Code, do other AI tools support Agent Skills?
+
+Absolutely! [Agent Skills](https://agentskills.io/) has become a universal standard supported by tools like Cursor, VS Code, Codex, etc.
+
+![](https://pic.yupi.icu/1/1769307453878-b670716c-f2c7-4eb4-9986-671a7b42b480.png)
+
+The Skills community is also very active. You can find many ready-made skills at [Claude Skills Hub Marketplace](https://www.claudeskill.site/zh/skills), open-source [Awesome Claude Skills](https://github.com/ComposioHQ/awesome-claude-skills), and similar platforms.
+
+![](https://pic.yupi.icu/1/1769307598569-a61f88f7-5b26-41fe-a302-652034ed655c.png)
+
+For example, a skill called [UI UX Pro MAX](https://ui-ux-pro-max-skill.nextlevelbuilder.io/) is particularly popular, specifically designed to enhance AI's design capabilities.
+
+![](https://pic.yupi.icu/1/1769307611502-fa3224d8-9e04-41cd-848a-de9619edf762.png)
+
+### Using Agent Skills in Cursor
+
+Usage is simple. First, follow the [open-source repository documentation](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) to install the official CLI tool:
+
+```bash
+npm install -g uipro-cli
+```
+
+![](https://pic.yupi.icu/1/1769307627168-c682f14b-4517-4325-ad4a-33e88661e714.png)
+
+Then navigate to your project directory and execute the corresponding command based on your AI tool. For example, with Cursor:
+
+```bash
+uipro init --ai cursor
+```
+
+![](https://pic.yupi.icu/1/1769307641070-2138ef02-8f26-460a-8cdd-979c59b725de.png)
+
+It will automatically install the skill in Cursor's configuration directory.
+
+![](https://pic.yupi.icu/1/1769307669797-86215fbf-b9de-436f-9864-460eb307c5c5.png)
+
+After installation, you can see its file structure:
+
+![](https://pic.yupi.icu/1/1769307694431-c4ad6aa0-b559-4ae5-8573-0687948551f2.png)
+
+Now when asking AI to develop a website, you can manually trigger the skill with slash commands or let AI automatically recognize the skill.
+
+![](https://pic.yupi.icu/1/1769307707968-1545cef4-b8e2-4bf9-b0a7-98130afc78ba.png)
+
+AI will identify product type and required page types based on your needs:
+
+![](https://pic.yupi.icu/1/1769307720984-a6afcae8-a5e8-4577-be7c-8356b42832ee.png)
+
+Then invoke the `search.py` script to perform multi-dimensional searches in the data directory for suitable colors, fonts, and layout styles:
+
+![](https://pic.yupi.icu/1/1769307768048-ef58645a-6188-4af7-9865-8033602126f7.png)
+
+Compile search results into a complete design scheme (primary colors, font combinations, spacing standards, etc.):
+
+![](https://pic.yupi.icu/1/1769307782038-59ea2231-b43d-45e3-a39f-6c36b0c7f645.png)
+
+Finally, generate code according to the design scheme:
+
+![](https://pic.y

translations/en/Vibe Coding 零基础教程/10 编程工具/工具实战/Dify：零代码 AI 应用开发平台.md

@@ -0,0 +1,235 @@
+# Dify: A No-Code AI Application Development Platform
+
+> Build your AI applications visually
+
+Hello, I'm Yupi.
+
+In previous articles, we learned about no-code platforms like Bolt.new and Baidu Miaoda for quickly generating websites and applications. But what if you want to create AI applications, such as intelligent customer service, knowledge base Q&A, or AI assistants? What tools should you use?
+
+In this article, I'll introduce **Dify**, a no-code platform specifically designed for developing AI applications. Through a visual interface, you can quickly build powerful AI applications without writing any code.
+
+Let me walk you through how to use Dify with practical examples, while also explaining some core AI concepts along the way.
+
+## 1. What is Dify?
+
+[Dify](https://dify.ai/) is an open-source AI application development platform that allows you to build AI applications visually.
+
+How is it different from Bolt.new?
+
+Bolt.new is mainly used to generate regular websites and applications, such as personal homepages or e-commerce sites. Dify, on the other hand, specializes in AI applications, including:
+
+- Intelligent customer service chatbots
+- Knowledge base Q&A systems
+- AI writing assistants
+- Document analysis tools
+- AI workflow automation
+
+Dify provides a visual configuration interface where you can build AI workflows through drag-and-drop, configure large models, set prompts, add knowledge bases, and more—all without writing code to create powerful AI applications.
+
+![](https://pic.yupi.icu/1/853427c8123decb5ea3d163ae3bb8ab635d95e92f7ee14a2e51e54df06e94fd8.png)
+
+## 2. Getting Started with Dify Quickly
+
+Let me guide you through a practical example to quickly get started with Dify.
+
+### 1. Create an AI Application
+
+First, go to the [Dify platform](https://dify.ai/), register an account, and log in. Then create an AI application and enter the AI conversation interface.
+
+![](https://pic.yupi.icu/1/1743560753186-1e9452e6-0d38-4070-b369-c674bc418c91.png)
+
+### 2. Choose a Large Model
+
+For first-time use, we need to select a **large model (LLM)**.
+
+**Large models are the brains of AI**, referring to artificial intelligence models with massive parameters that acquire extensive knowledge and capabilities through large-scale pre-training.
+
+![](https://pic.yupi.icu/1/1743560803824-ab33d9d9-e994-45e5-8190-fc104e679747.png)
+
+Different large models vary in parameter size, processing power, and supported conversation lengths. For example, Claude Opus 4.5 excels in programming, Gemini 3 Pro supports ultra-long contexts, and DeepSeek is completely free.
+
+![](https://pic.yupi.icu/1/1743560841202-c37cde5b-0b25-4ebb-adff-3ab66af35d75.png)
+
+After selecting a large model, we can adjust its output by setting parameters. For example, **temperature** controls the randomness of the model's output:
+
+- Higher temperature values result in more random and diverse outputs (suitable for creative writing)
+- Lower temperature values produce more deterministic and conservative outputs (suitable for professional Q&A)
+
+![](https://pic.yupi.icu/1/1743560855583-7efaebb7-3552-4a5b-9787-adbb9acaddc6.png)
+
+### 3. Set Prompts
+
+Next, we'll engage in a conversation with the AI. The input we provide to the AI is called a **prompt**, which guides the model to generate specific content or perform certain tasks.
+
+The quality of the prompt directly determines the accuracy of the AI's output. Prompts can be divided into two types:
+
+- System prompts: Overall constraints on the AI's output, set in advance
+- User prompts: Content input by users on the fly
+
+![](https://pic.yupi.icu/1/1743560920031-d86572e4-b09e-46b4-8aa8-c734a96bec44.png)
+
+For example, if I want to create a programming assistant, I can set the system prompt as:
+
+```
+You are a professional programming assistant proficient in Python, JavaScript, Java, and other languages.
+Provide concise and clear answers with code examples.
+```
+
+Then users can directly ask: "How to read a file in Python?"
+
+### 4. Understanding Tokens
+
+After a conversation, you'll notice "Token cost" displayed below the dialogue.
+
+![](https://pic.yupi.icu/1/1743561058442-beebd2ac-94a0-4f00-8e56-f819822247e1.png)
+
+Seeing "cost" might make some nervous—what are Tokens? Are they expensive?
+
+**Tokens are the basic units of text processed by large language models**, which could be words or punctuation marks. Both input and output are calculated in Tokens. Generally, more Tokens mean higher costs and slower output speeds.
+
+Different models have varying pricing, typically costing tens of dollars per million Tokens. You can use online Token calculators to estimate costs.
+
+![](https://pic.yupi.icu/1/1743561097206-472514a9-3d13-4408-b222-2207b00f611a.png)
+
+But don't worry too much—daily usage costs are usually low, and many platforms offer free quotas.
+
+### 5. Add a Knowledge Base (RAG)
+
+Sometimes, large models may lack certain information. For example, if you ask AI to summarize [Yupi's "Ultimate Resume Writing Guide"](https://www.codefather.cn/course/cv), the information might be inaccurate because the AI hasn't read the article.
+
+In such cases, we can enable the knowledge base feature, which uses **RAG (Retrieval-Augmented Generation)** technology to supplement the AI's knowledge with external sources.
+
+![](https://pic.yupi.icu/1/1743561648847-337df359-2e2a-4e05-bec6-fdff52b3be1d.png)
+
+First, create a knowledge base and upload documents:
+
+![](https://pic.yupi.icu/1/1743561783744-1ddce7bb-802e-4feb-9e8f-7e0a83b4ad98.png)
+
+Then segment the text, setting your own chunking rules:
+
+![](https://pic.yupi.icu/1/1743561816205-22494e52-c011-49fe-8537-3b7f0f441a51.png)
+
+Next, use **Embedding** technology to convert text into vector representations and store them in a vector database.
+
+When a user asks a question, the question is converted into a vector, and relevant information is retrieved from the knowledge base. This information, along with the question, is then fed into the large model for processing, making the AI's answers more accurate.
+
+![](https://pic.yupi.icu/1/1743561872916-7971c368-14bd-49c2-9bd9-604973f469e3.png)
+
+This way, the AI can answer questions based on your provided knowledge base.
+
+### 6. Publish and Call
+
+Now, our AI application is complete. You can publish it for others to use or call it via **API interfaces** in your own code programs through network requests.
+
+![](https://pic.yupi.icu/1/1743561915955-ad27735a-c927-4207-b769-03fda32081b6.png)
+
+## 3. AI Agents and Workflows
+
+So far, we've only created a simple chat assistant. But Dify also supports more powerful features—**AI agents**.
+
+Agents are AI systems that can perceive environments, reason, plan, make decisions, and autonomously take actions to achieve goals.
+
+![](https://pic.yupi.icu/1/1743561972671-9c7ad13e-a467-4a08-ba14-711d4640939c.png)
+
+We can provide agents with **tools**, such as web search, weather queries, database calls, etc., enabling them to perform more complex tasks.
+
+After installing tools, the agent will use them when needed. For example, it might retrieve content from the web, summarize it, and then reply. This expands the AI's application scope and capabilities infinitely.
+
+![](https://pic.yupi.icu/1/1743562005435-e5ece3f2-5f4b-4729-b490-a1e51f1f006e.png)
+
+Of course, if your AI model isn't smart enough, it might not use tools effectively. I recommend using more capable reasoning models for agents.
+
+Some models employ **Chain-of-Thought (CoT)** and **ReAct** techniques, where the model first thinks about the problem, analyzes it, proposes an action plan, acts, and then further reasons based on results. The intermediate steps and reasoning processes are visible, helping us understand how the model reaches conclusions.
+
+![](https://pic.yupi.icu/1/1743562152661-80fabf5f-07a4-4463-a980-67da980f0ede.png)
+
+Sometimes, a single agent can't complete tasks like automatically generating 100 short videos or creating and publishing a game. 
+
+In such cases, we can use **agent workflows** (Agentic Workflow), which allow agents to combine functions through planning and orchestration, automating complex tasks—similar to visual programming.
+
+![](https://pic.yupi.icu/1/1743562195750-57a3b344-4282-4279-bd71-510f60fc17c6.png)
+
+## 4. MCP Service Integration
+
+Finally, let's discuss a trending concept: **MCP (Model Context Protocol)**, a standardized protocol for AI interactions with external tools or data.
+
+![](https://pic.yupi.icu/1/1743562215479-a19f8b1c-0190-41b4-8a2f-f508b24e74a7.png)
+
+Simply put, MCP services make it easier to integrate various tools and data into AI, enhancing application capabilities.
+
+First, install the MCP Agent policy to enable agents to call MCP:
+
+![](https://pic.yupi.icu/1/1743562275496-34bcb486-235d-4d97-bc5a-cdf00f59cff7.png)
+
+Then, visit the [MCP Directory](https://mcp.so/) to find needed MCP services, such as querying the current time.
+
+![](https://pic.yupi.icu/1/1743562325916-dbef66dc-d0d1-4a60-9bed-68691c462677.png)
+
+Back in the agent workflow, fill in the MCP server address, invocation commands, query conditions, etc. The AI can then send requests to MCP to fetch data when needed.
+
+![](https://pic.yupi.icu/1/1743562400230-79c99317-98f1-4579-8884-a5bf53623683.png)
+
+## 5. Other AI Application Development Platforms
+
+Besides Dify, here are some other notable AI application development platforms.
+
+### Coze
+
+[Coze](https://www.coze.com/) is an AI application development platform by ByteDance, offering numerous plugins for easy app development.
+
+Coze's strengths are no-code, visual workflows, and many pre-built plugins and templates, making it quick to learn. Ideal for individuals and lightweight applications.
+
+### Alibaba Cloud Bailian
+
+[Alibaba Cloud Bailian](https://bailian.console.aliyun.com/) is an enterprise-grade AI application development platform supporting RAG knowledge bases, workflow orchestration, and more.
+
+Bailian's strengths are enterprise-level capabilities, visual workflow orchestration, and deep integration with other Alibaba Cloud services, making it suitable for businesses.
+
+### How to Choose?
+
+If you're an individual developer or lack coding experience and want to quickly build an AI application, Dify and Coze are great choices.
+
+For enterprise users or Java developers needing stability and enterprise features, consider Alibaba Cloud Bailian.
+
+I primarily use Alibaba Cloud Bailian because, as a full-stack Java developer, Alibaba's dominance in China's Java ecosystem is unmatched. Their Spring AI Alibaba framework integrates seamlessly with their AI services, enabling rapid development of complete AI applications.
+
+## 6. Dify Practical Tips
+
+Here are some practical tips I've gathered while using Dify.
+
+1. Choose the right large model  
+   Different tasks suit different models. For creative writing, GPT-4 or Claude; for code generation, Claude excels; for budget constraints, DeepSeek or Gemini Flash.
+
+2. Optimize prompts  
+   Prompt quality directly affects AI output. Recommendations:
+   - Define roles clearly (e.g., "You are a professional...")
+   - Specify task requirements clearly
+   - Provide concrete examples
+   - Set output formats
+
+3. Leverage knowledge bases  
+   If your AI application needs to answer questions based on specific knowledge, use the knowledge base feature. Upload relevant documents to ensure accurate answers.
+
+4. Test and iterate  
+   After building an AI application, test extensively. Try various questions and adjust prompts or knowledge bases based on results.
+
+5. Use workflows  
+   For complex tasks, use workflows. Break tasks into steps, each handling a subtask, then combine them. This improves control and debugging.
+
+## Final Thoughts
+
+By now, you should have a basic understanding of Dify and AI application development.
+
+**Building AI applications with Dify is truly simple.** No coding is needed—just configure settings to create powerful AI applications.
+
+Through using Dify, you'll also grasp core AI concepts like large models, prompts, Tokens, RAG, and agents. These concepts are useful not just in Dify but across other AI tools.
+
+I recommend trying Dify to build a simple AI application, such as a programming Q&A assistant, document summarizer, or knowledge base Q&A system. You'll soon discover the joy of AI development.
+
+## Recommended Resources
+
+1) Yupi's AI Navigation Site: [AI resource directory, latest AI news, free AI tutorials](https://ai.codefather.cn)  
+2) Programming Navigation Learning Circle: [Learning paths, tutorials, projects, job guides, Q&A](https://www.codefather.cn)  
+3) Programmer Interview Cheatsheets: [Internship/campus/social recruitment FAQs, company interview questions](https://www.mianshiya.com)  
+4) Programmer Resume Builder: [Professional templates, rich examples, interview prep](https://www.laoyujianli.com)  
+5) 1-on-1 Mock Interviews: [Essential for internship/campus/social recruitment offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/10 编程工具/工具实战/Gemini CLI 首测：免费开源很香，但坑点很多！.md

@@ -0,0 +1,349 @@
+# Gemini CLI: Hands-on Review of Google's Free AI Command Line Tool
+
+Hi, I'm Yupi.
+
+Google has launched an interesting AI command line tool — Gemini CLI, directly embedding AI into the terminal.
+
+![](https://pic.yupi.icu/1/1750927083919-e42152fe-9df9-4686-b813-388ae261b738.png)
+
+According to the [official introduction](https://github.com/google-gemini/gemini-cli), this tool can:
+
+- Handle large codebases (up to 1 million Token context)
+- Multimodal capabilities: Generate new applications from PDFs or sketches
+- Automate operations: Help query code merge requests, handle complex code merges
+- Integrated with numerous tools: Supports connecting to MCP servers, supports image, video, and audio generation
+- Built-in search, and more
+
+Positioned against Claude Code, it currently offers free usage quotas, and the best part is that the code is open source!
+
+![](https://pic.yupi.icu/1/image-20260112165459541.png)
+
+As of January 2026, Gemini CLI has already garnered **90,000+ GitHub Stars**, skyrocketing in popularity!
+
+So, how does this tool actually perform? Let me take you through a hands-on experience and share my genuine thoughts.
+
+⭐️ Recommended video version: [https://bilibili.com/video/BV1LuKdzjEAc](https://www.bilibili.com/video/BV1LuKdzjEAc/)
+
+
+
+## 1. Installation and Setup
+
+Following the official documentation, we first need to install the Node.js runtime environment. Simply go to the [official website](https://nodejs.org/) to install it, **note that the version must be >= 20** (latest requirement as of 2026).
+
+Then open the terminal and enter a command to install the tool globally:
+
+```bash
+npm install -g @google/gemini-cli
+```
+
+Or install using Homebrew (macOS/Linux):
+
+```bash
+brew install gemini-cli
+```
+
+After installation, enter the `gemini` command to perform some basic setup:
+
+![](https://pic.yupi.icu/1/1750927215041-aef86c7f-90b6-41e1-8509-cb53809372dd.png)
+
+Next is the crucial part: you need to go through a wave of account verification. For personal users, just select the first option.
+
+![](https://pic.yupi.icu/1/1750927255279-3b2d860a-c514-492a-8b27-a8abe27b4b31.png)
+
+Here, you might encounter two types of verification failures. The first is due to network issues (hard to fix), and the second is when the account type doesn't meet the requirements, as shown:
+
+![](https://pic.yupi.icu/1/1750927301003-4937f694-3fc9-493f-8309-e169439f59fa.png)
+
+For the second scenario, the solution is simple. Go to the [Google Cloud](https://console.cloud.google.com/) console, create a new project to get the `project_id`:
+
+![](https://pic.yupi.icu/1/1750927486133-ecf76c02-ba82-4f85-adfe-4d168247bee6.png)
+
+Then enter the following command in the terminal to set the environment variable, and retry to log in:
+
+```bash
+export GOOGLE_CLOUD_PROJECT=<your project_id>
+```
+
+Once logged in successfully, we can start using it.
+
+
+
+## 2. Practical Testing
+
+Next, I selected 8 different scenarios to validate its capabilities from multiple angles. You can also get a feel for the actual performance of Gemini CLI. After all, only when everyone says it's good is it truly good.
+
+![](https://pic.yupi.icu/1/1750928002955-c44764ed-abd4-4568-ad07-954d909aa360.png)
+
+### 1. Basic Q&A
+
+Input prompt:
+
+```
+Hello, what can you do? What are your advantages?
+```
+
+Unexpectedly, it errored right from the start? And it was spouting nonsense.
+
+![](https://pic.yupi.icu/1/1750928093701-0a2cdf6c-483c-4198-8933-00268b7ca2af.png)
+
+After a while, it finally filled the screen with red errors. The error message indicated that I didn't enable API permissions:
+
+![](https://pic.yupi.icu/1/1750928146165-9359e7e2-0dfa-4b7e-b3bb-31bfcf94b540.png)
+
+Directly visiting the URL in the error message takes you to the console to enable API permissions. Let's enable it:
+
+![](https://pic.yupi.icu/1/1750928172586-6ec6dd3b-db41-4fb3-b096-e933936e1e37.png)
+
+Let's try again! This time, the AI's response was on point. It said it's an AI software engineer, ensuring transparent and secure operations. The result was decent, but it was a bit slow, taking 20 seconds for such a simple question. This is probably a side effect of intelligent agents.
+
+![](https://pic.yupi.icu/1/1750928224341-15221ba1-7dd2-462a-91f2-f9d832eda07c.png)
+
+
+
+### 2. Web Search
+
+Input prompt, asking the AI to automatically download memes from the web:
+
+```markdown
+Please help me get 10 healthy panda head memes and download them to the current directory
+```
+
+The AI recommended several meme websites but couldn't download them directly:
+
+![](https://pic.yupi.icu/1/1750928294365-8a9833e9-a05a-413f-8090-af944d2b4daf.png)
+
+Does it not support download tools?
+
+We can press the `/` key to see the commands supported by Gemini CLI:
+
+![](https://pic.yupi.icu/1/1750928337773-c1fec292-a628-4b3d-93e4-a8846ab7b5b2.png)
+
+Looking at the tool list, it seems there's no web resource download tool. It's a bit tough for the AI. But it supports writing Shell scripts, so we might as well guide the AI to write a script for resource downloading.
+
+![](https://pic.yupi.icu/1/1750928445912-9ba1f2bd-2262-499b-bec0-0f5caf967a47.png)
+
+Prompt:
+
+```markdown
+Please help me get 10 healthy panda head memes and download them to the current directory. You can achieve this by writing an executable script
+```
+
+This time, we can see the agent starting to plan the task autonomously. It first created a script, and then the "write file" operation required our confirmation. Here, it's recommended to choose "allow once only" for safety:
+
+![](https://pic.yupi.icu/1/1750928484880-802fa820-8ebe-44d2-963e-34b4eeca590c.png)
+
+When encountering issues, it tries to **replan** and retry, which is a key capability of intelligent agents:
+
+![](https://pic.yupi.icu/1/1750928516938-edbd9bb5-1507-4835-a83f-fa64ab5bed4d.png)
+
+After the task is completed, it remembers to clean up the script, which is a nice touch.
+
+![](https://pic.yupi.icu/1/1750928581541-3e1fdfc3-f18b-4202-9b74-b7e351cce7fd.png)
+
+Alright, mission accomplished. Let's check the downloaded files. Is this size for real? It indeed failed; the downloaded images were completely wrong!
+
+![](https://pic.yupi.icu/1/1750928679026-e945b956-7b1c-40ae-b941-5c41afbab70f.png)
+
+
+
+### 3. File Operations
+
+Input the following prompt, asking the AI to help process my local meme files:
+
+```markdown
+Help me double the size of all memes, convert them to WEBP format, and then combine all memes to generate a GIF
+```
+
+Then, I should specify the file path, otherwise, the AI might not know what to process.
+
+When I pressed the `@` key to specify the file path, wow, the input box just froze? Honestly, this interaction experience isn't great. Every time I select a file, it freezes, and I can't select directories.
+
+![](https://pic.yupi.icu/1/1750928995135-adc3d93a-6afc-4c0e-b971-5ba627ec3fc5.png)
+
+After some struggle, I found that I need to select slowly, following the directory tree listed by the program. Let's select an image first:
+
+![](https://pic.yupi.icu/1/1750929221785-9d4261ea-92e5-439e-b038-54ccb9bcfa33.png)
+
+Okay, this time the AI got smarter and asked if I want to process multiple files. Definitely:
+
+![](https://pic.yupi.icu/1/1750929281202-176c6599-3e3c-4b0c-93ba-2462c91bf375.png)
+
+Then the AI found it couldn't process the images and needed to download an image processing tool. It said it would use Mac's package management tool to install it. Just agree:
+
+![](https://pic.yupi.icu/1/1750929456285-d75c4e55-2593-424c-8bf0-1e52222305eb.png)
+
+After a long wait, it's been almost 10 minutes and it's still not done?!
+
+![](https://pic.yupi.icu/1/1750929498503-93b9d475-97a3-4979-92b5-c1538dce9396.png)
+
+Maybe it's my network issue, but I can't wait any longer. Honestly, by this point, I'm already a bit frustrated. It's 2:30 AM, and I'm waiting for software installation?
+
+![](https://pic.yupi.icu/1/1750929564667-ba06cda8-cd5e-44b5-afac-28c62e3af961.png)
+
+Isn't this something you could just write a simple Python script for?
+
+I feel this tool is still more suited for programmers, with some guidance needed. For example, let's ask the AI to use a Python script to achieve the task:
+
+```markdown
+Help me double the size of all memes, convert them to WEBP format, and then combine all memes to generate a GIF, using a Python script
+```
+
+We can see the AI installed an image processing library and then created a virtual environment. You have to admit, its consideration for security is okay:
+
+![](https://pic.yupi.icu/1/1750929702268-23a76696-f001-444f-8986-f28ad42d3b39.png)
+
+Then it wrote and executed the script:
+
+![](https://pic.yupi.icu/1/1750929740570-990bbe0f-f685-4e7d-be7f-ef53402882e5.png)
+
+The task was successfully completed. Let's check the result:
+
+![](https://pic.yupi.icu/1/1750929779663-14caecd9-ae80-4727-bc3f-0542fbdf71fe.png)
+
+The size was indeed doubled, the format was successfully converted, and the GIF was successfully generated. Finally, a task was completed successfully. Not bad. Processing local images this way is indeed much more convenient than using web-based AI applications.
+
+
+
+### 4. Code Generation
+
+Input the following prompt, asking the AI to create a pixel photography website:
+
+```markdown
+Please help me create a website that can call the camera to take photos, convert the photos to pixel style, support downloading, and require a simple and cool interface
+```
+
+This time, the generation speed was quite fast, but it required multiple manual confirmations during the process:
+
+![](https://pic.yupi.icu/1/1750929959173-97f40707-bbcc-4cba-a021-4e3c9e7372d4.png)
+
+Let's take a look at the generated website effect:
+
+![](https://pic.yupi.icu/1/1750930213995-9ca12c77-e2f4-4626-9da4-8f2783d73eeb.png)
+
+You can adjust the pixel density and download the photo with one click. The effect is quite good, and the AI successfully completed this task~
+
+![](https://pic.yupi.icu/1/1750930254795-38b8adcb-3a87-44dd-99d4-0b37532ae1fc.png)
+
+
+
+### 5. Code Explanation
+
+Add a learning guide to the newly generated project. Input prompt:
+
+```markdown
+Help me generate a learning guide for this project to help new developers get started quickly
+```
+
+Since the AI has context, it directly understood which project I wanted it to analyze and quickly generated a project document.
+
+![](https://pic.yupi.icu/1/1750930402860-d39c7707-0e3d-4cc8-aaeb-dbf9344589e4.png)
+
+Then I asked the AI to help open the document file:
+
+![](https://pic.yupi.icu/1/1750930530481-8b8f0abf-30fd-48ff-b36c-61b168af2cde.png)
+
+Originally, I wanted the AI to directly open the Markdown reading software, but it ended up outputting a bunch of irrelevant content. I don't understand.
+
+![](https://pic.yupi.icu/1/1750930702812-27e5e920-9e3c-48f7-8957-60025b80b773.png)
+
+Then I'll open it myself. The generated document content is passable, a standard GitHub open-source project document.
+
+![](https://pic.yupi.icu/1/1750930759557-f4b0a16f-d1c8-46fe-b0e5-21910a2bf752.png)
+
+
+
+### 6. Architecture Diagram Generation
+
+Okay, given that the previous task was completed decently, let's increase the difficulty. Ask the AI to generate a layered architecture diagram for the project:
+
+```markdown
+Help me generate a layered architecture diagram for the current project
+```
+
+The result was a bit of a blunder. The AI generated an architecture design document:
+
+![](https://pic.yupi.icu/1/1750930929870-b368fc52-c779-42f0-9ad5-fb056b99ef84.png)
+
+You call this pure English document an architecture diagram?
+
+![](https://pic.yupi.icu/1/1750930979557-8ab249fe-727e-4041-99b7-9e154a742090.png)
+
+Then I'll exert my remaining professionalism and ask it to generate the drawing code for the architecture diagram:
+
+```markdown
+Help me generate the draw.io code for the layered architecture diagram of the current project
+```
+
+This time, it looks much more reliable:
+
+![](https://pic.yupi.icu/1/1750931031112-0247644b-2626-459a-ae81-a240ad782400.png)
+
+Let's drag the AI-generated architecture diagram code file into draw.io and open it.
+
+Buddy? You call this an architecture diagram?
+
+![](https://pic.yupi.icu/1/1750931055227-1e674680-468c-4c4d-b182-8bd3026c993e.png)
+
+Let's try the same task with Cursor + Claude 4.
+
+Hey, Claude is quite confident, saying "I can generate a more complete and detailed layered architecture diagram for you":
+
+![](https://pic.yupi.icu/1/1750931203239-924cc09e-c80f-4acf-9855-66d6b4102cac.png)
+
+Okay, let's see the generated result. Isn't the difference clear?
+
+![](https://pic.yupi.icu/1/1750931312134-a573f7ff-07ca-4852-830a-07d74bc21690.png)
+
+
+
+### 7. Visualization Chart Generation
+
+Ask the AI to analyze the project's commit history. Input prompt:
+
+```markdown
+Based on the current project's commit history, generate a visualization chart to help me analyze the project's development history
+```
+
+We can see the AI using the git log command to view the code commit history and then starting to generate the chart.
+
+![](https://pic.yupi.icu/1/1750931424995-0e5cd8c2-1dfe-4f09-ac29-c08b1c1388b4.png)
+
+Wait? Where's the chart???
+
+My expectation was definitely to generate an image, or at least a character drawing that looks like a chart. This is a bit tough for it.
+
+
+
+### 8. Multimodal
+
+By the time I got to verifying multimodal capabilities, it was already 3 AM, and I was numb. Sigh, let's try multimodal one last time.
+
+Input prompt to generate an image:
+
+```markdown
+Help me generate a new image with a similar style based on the images in the current directory
+```
+
+This time, the AI directly refused, not supporting image creation. Why not write a script? You don't need AI; just use an image processing tool, right?
+
+![](https://pic.yupi.icu/1/1750931630520-47da3d4e-c55e-4b1c-9507-17dd0f08cb1e.png)
+
+Then let's try explaining an image. Input prompt:
+
+```markdown
+Help me explain all the images in the current directory
+```
+
+It did explain them, but it's still outputting in English. Probably related to the program's language settings. The experience isn't that great.
+
+![](https://pic.yupi.icu/1/1750931670952-251c1eb3-487a-44ca-b217-194f92a5442a.png)
+
+Gemini CLI likely uses the Gemini 2.5 Pro model, which has native multimodal input capabilities, meaning it can recognize images, but it can't create images, including creating audio and video, which should be achieved through third-party large models (or MCP tools).
+
+Finally, let's ask it to explain a PDF. Input prompt:
+
+```markdown
+Help me summarize the content of the PDF and generate a new PDF
+```
+
+The result was unexpected. The AI prompted

translations/en/Vibe Coding 零基础教程/10 编程工具/工具实战/OpenCode：开源免费的 AI 命令行工具实测.md

@@ -0,0 +1,392 @@
+# OpenCode: Hands-on Review of an Open-Source Free AI Command Line Tool
+
+Hello everyone, I'm programmer Yupi.
+
+Claude Code has long been recognized as the undisputed Top 1 AI programming command line tool, enjoying an almost god-like status in the AI and programmer communities.
+
+![](https://pic.yupi.icu/1/happy-new-year-claude-coders-v0-o2quvbl99lag1.png)
+
+But this damn thing isn't very friendly to Chinese users...
+
+First, to use Claude Code, you must have special network access + an official account, otherwise you'll just see red errors.
+
+![](https://pic.yupi.icu/1/cannotuseclaude.png)
+
+Moreover, in September 2025, Anthropic suddenly announced **a complete ban on Chinese-controlled enterprises using Claude services** for some inexplicable reason. This ban not only includes mainland Chinese companies but also overseas companies with over 50% Chinese ownership!
+
+Anthropic even specifically named China, calling us an **adversarial nation**!
+
+![](https://pic.yupi.icu/1/image-20250905164631315.png)
+
+The world has suffered under Claude Code's dominance for too long!
+
+But recently, many programmer friends around me have started switching from Claude Code to another tool - the suddenly popular open-source project OpenCode.
+
+![](https://pic.yupi.icu/1/image-20260107174223010.png)
+
+In just half a year, this project has skyrocketed to 52k stars on GitHub!
+
+To put this in perspective - that's more stars than all my dozens of open-source projects on GitHub combined! So jealous...
+
+![](https://pic.yupi.icu/1/opencodestarhistory.png)
+
+What exactly is OpenCode? Why is it so popular?
+
+
+
+## What is OpenCode?
+
+[OpenCode](https://opencode.ai/) is a 100% open-source AI programming command line tool that can be used in **terminals, IDEs, and even desktop applications**.
+
+![](https://pic.yupi.icu/1/screenshot.png)
+
+You might ask: How is this different from Claude Code?
+
+Why not try it and see?
+
+Next, I'll walk you through a hands-on demo - from installation and configuration to actual coding, all in one go~
+
+
+
+## Getting Started with OpenCode from Scratch
+
+### 1. Installing OpenCode
+
+Go directly to the OpenCode official website and copy this command:
+
+![](https://pic.yupi.icu/1/image-20260107174407894.png)
+
+Here's the command:
+
+```bash
+curl -fsSL https://opencode.ai/install | bash
+```
+
+Execute it in your terminal to complete the installation.
+
+After installation, enter `opencode` to launch the program, and you're ready to use it happily~
+
+![](https://pic.yupi.icu/1/image-20260107174646918.png)
+
+Let's start with the classic Hello World - the AI successfully responded.
+
+![](https://pic.yupi.icu/1/image-20260107174755331.png)
+
+Congratulations, you've now mastered 70% of OpenCode.
+
+### 2. Selecting Modes and Models
+
+OpenCode supports 2 modes. The default is Build mode for application development and code generation.
+
+Press Tab to switch to Plan mode for generating execution plans.
+
+![](https://pic.yupi.icu/1/image-20260107174952823.png)
+
+Press `Ctrl + p` to open the command palette with dozens of built-in commands. Let's try switching the LLM first:
+
+![](https://pic.yupi.icu/1/image-20260107175255527.png)
+
+By default, it offers 4 free models:
+
+![](https://pic.yupi.icu/1/image-20260107175409282.png)
+
+Wow, even the latest GLM-4.7 from Zhipu is free? Did I waste money on my Coding Plan subscription?
+
+![](https://pic.yupi.icu/1/image-20260107175513490.png)
+
+Besides free models, OpenCode supports a huge number of AI models for you to choose freely:
+
+![](https://pic.yupi.icu/1/image-20260107175614359.png)
+
+After selecting a model, just configure your API Key:
+
+![](https://pic.yupi.icu/1/image-20260107175657296.png)
+
+If you previously had a **Claude Pro/Max subscription account**, you can log in directly and seamlessly migrate from Claude Code.
+
+![](https://pic.yupi.icu/1/image-20260107175745963.png)
+
+### 3. Quick Commands
+
+OpenCode supports slash commands. Type `/` to see many operations like viewing model lists, checking Agents, managing MCP, switching themes, etc.:
+
+![](https://pic.yupi.icu/1/image-20260107175926346.png)
+
+It supports dozens of different themes, all quite aesthetically pleasing. This shows OpenCode really cares about user experience:
+
+![](https://pic.yupi.icu/1/image-20260107180108430.png)
+
+Type `@` to quickly associate directory files and add context for the AI:
+
+![](https://pic.yupi.icu/1/image-20260107182710150.png)
+
+### 4. Interactive Experience
+
+Compared to Claude Code, OpenCode really maximizes the command line interactive experience. I'd say it's more like a desktop app disguised as a command line tool.
+
+You can click any message to pop up an action box where you can recall messages and AI replies, copy them, or start a new dialog based on the current conversation.
+
+![](https://pic.yupi.icu/1/image-20260107180609525.png)
+
+You can scroll up/down to switch menus and directly click to proceed to the next step.
+
+Press `Ctrl + p` to open the command palette and enable the sidebar:
+
+![](https://pic.yupi.icu/1/image-20260107181100523.png)
+
+Then the interface becomes like this. You call this a command line?
+
+![](https://pic.yupi.icu/1/image-20260107181218259.png)
+
+### 5. LSP Support
+
+If you're observant, you've noticed the `LSP` in the right sidebar. What's this? Some perverted thing?
+
+LSP (Language Server Protocol) is a communication protocol developed by Microsoft to enable communication between code editors and language servers.
+
+Simply put, **LSP is the technology that helps editors understand code.**
+
+For example, when you type `console.` in VS Code, it automatically suggests `log`. You can jump to definitions by clicking function names, and incorrect code gets red underlines. These editor features all rely on LSP.
+
+OpenCode's LSP support means the AI truly understands your code structure rather than treating code as plain text for blind guessing, making modifications more precise.
+
+For instance, when I ask the AI to introduce the most valuable code in my AI quiz platform project, LSP comes into play. It helps the AI quickly locate where a piece of code is called and what variables it references, instead of having the AI dumbly search through text globally.
+
+![](https://pic.yupi.icu/1/image-20260107181807464.png)
+
+### 6. Returning to Previous Sessions
+
+If you accidentally close OpenCode, don't worry. Open the command palette and select "Switch session":
+
+![](https://pic.yupi.icu/1/image-20260107183241477.png)
+
+You can return to your previous chat:
+
+![](https://pic.yupi.icu/1/image-20260107183320692.png)
+
+## Desktop Version of OpenCode
+
+Even with all these user experience improvements in OpenCode, I suspect most of you still dislike the black terminal box.
+
+No problem - OpenCode also offers a desktop app version! Supporting macOS, Windows, and Linux across all platforms. They're really going all out to compete with Claude Code...
+
+> Link: https://opencode.ai/download
+
+![](https://pic.yupi.icu/1/image-20260107182151987.png)
+
+But when I installed and opened it with great enthusiasm, it errored out!
+
+![](https://pic.yupi.icu/1/image-20260107183123854.png)
+
+After some troubleshooting, I found it was because I had a proxy enabled. After disabling it, it ran normally.
+
+![](https://pic.yupi.icu/1/image-20260107183605119.png)
+
+But having gotten used to Cursor, this interaction experience feels a bit perfunctory. I don't recommend using it.
+
+## OpenCode's Extensibility
+
+So far, I think OpenCode completely crushes Claude Code in frontend user experience. Moreover, OpenCode is fully compatible with Claude Code's Skills system!
+
+Skills are capability extension packages prepared for the AI. You can think of them as onboarding documents for new colleagues, containing task execution methods, tool usage instructions, template materials, etc.
+
+For example, you can create a `Company Code Style Skill` documenting code styles, naming conventions, comment requirements, etc. Afterward, Claude Code will automatically follow these standards when generating code without needing repeated explanations.
+
+According to official documentation, OpenCode automatically searches for Skills in these locations:
+
+- `.opencode/skill/<name>/SKILL.md` (project directory)
+- `~/.config/opencode/skill/<name>/SKILL.md` (user directory)
+- `.claude/skills/<name>/SKILL.md` (Claude Code compatible)
+- `~/.claude/skills/<name>/SKILL.md` (Claude Code compatible)
+
+This means if you've previously created custom Skills for Claude Code, you can use them directly with OpenCode! Another seamless migration.
+
+## Oh My OpenCode Supercharged Plugin
+
+If you think OpenCode isn't powerful enough, try the open-source OpenCode enhancement plugin `Oh My OpenCode`, already with 10k stars.
+
+> Project address: https://github.com/code-yeongyu/oh-my-opencode
+
+![](https://pic.yupi.icu/1/image-20260107184457429.png)
+
+How amazing is this plugin? Check out user reviews:
+
+> "It made me cancel my Cursor subscription."
+> 
+> "Knocked out 8000 eslint warnings with Oh My Opencode, just in a day"
+
+The core feature of Oh My OpenCode is introducing an agent orchestration system called **Sisyphus**.
+
+I looked it up:
+
+> Sisyphus is a king in Greek mythology punished by the gods for deceiving them and challenging authority. His punishment was endlessly pushing a boulder up a mountain, only for it to roll back down upon reaching the top, symbolizing futile, never-ending tasks and representing a spirit of rebellion against absurd fate.
+
+This system can:
+
+1. Schedule multiple AI models in parallel: e.g., have GPT debug while Gemini writes frontend code
+2. Automatic task management: Won't stop until tasks are completed, persevering like Sisyphus pushing the boulder
+3. Intelligent code review: Automatically detects and cleans redundant AI-generated comments
+4. Deep LSP integration: Provides IDE-level features like renaming and jumping to definitions
+
+In short, Sisyphus is an AI supervisor that can command multiple AI models simultaneously while ensuring they complete tasks.
+
+![](https://pic.yupi.icu/1/omo.png)
+
+Although the official docs say installation can be done with one command, I recommend first installing bun, then using npx to install, otherwise errors may occur.
+
+```bash
+npm install bun -g
+npx oh-my-opencode install
+```
+
+During installation, it may ask if you have subscriptions to certain models. I just kept selecting "No":
+
+![](https://pic.yupi.icu/1/image-20260107185251337.png)
+
+After installation completes, enter OpenCode again. Then just include the `ultrawork` (or `ulw`) cheat code in your prompts to activate all enhanced features - automatic scheduling of multiple AI models working simultaneously, deep codebase exploration, and relentless execution.
+
+Let's test this out and see if OpenCode can really kick Claude Code to the curb when it comes to project capabilities?
+
+## Hands-on Project - Building an AI Health Assistant with OpenCode
+
+Recently, Ant Group's `Ant Afu` AI health assistant went viral, with ads featuring host He Jiong appearing everywhere from subway stations to office building TVs.
+
+![](https://pic.yupi.icu/1/mayiafuad.jpeg)
+
+Although I haven't used it yet, I heard it can provide AI preliminary diagnoses by scanning skin or reports, along with intelligent answers to medical questions and treatment suggestions.
+
+Let's build a similar health assistant website!
+
+Before there was Ant Afu, now there's Yupi Akun.
+
+![](https://pic.yupi.icu/1/image-20260107194117758.png)
+
+First, let's analyze: we're building a full-stack project including frontend + backend, with the backend needing to call AI models to generate content.
+
+Here I chose to use **Vercel AI Gateway** to implement AI capabilities - a simple and easy-to-use AI gateway.
+
+![](https://pic.yupi.icu/1/1760687990497-90720fbb-0df6-4ede-87b8-64b8702994e9-20251028181254840.png)
+
+What's an AI gateway?
+
+Simply put, it's like a train station ticket gate. Your application's requests first pass through the gateway, which handles authentication, rate limiting, monitoring, and other complex operations before forwarding requests to AI models.
+
+![](https://pic.yupi.icu/1/1761645642401-683e786e-3e06-420a-abce-cd43f7bfa901.png)
+
+Moreover, Vercel AI Gateway supports integration with over 500 large models and has free quotas, making it perfect for learning and small projects.
+
+> Link: https://vercel.com/ai-gateway
+
+1) First, you need to register/login to Vercel, then create an API Key in the console. Be careful not to leak it:
+
+![](https://pic.yupi.icu/1/1760688078133-7b91b6f3-2fc4-4bb4-b2c1-d517699f0968-20251028181254879.png)
+
+2) Launch OpenCode, switch the model to the highly capable and free GLM-4.7, then input this prompt:
+
+```markdown
+You are a professional programmer. Please help me develop the "Daily Health Assistant" website where users can chat with AI to record and manage daily health status.
+
+## Development Requirements
+
+1. Must include complete frontend and backend, backend using Node.js
+2. Implement AI capabilities using Vercel's AI Gateway, first check official docs for usage: https://vercel.com/docs/ai-gateway/getting-started
+3. Focus on completing core functionality to ensure the project runs properly
+4. Overall website interface should adopt a fresh green health style, responsive across devices
+5. AI should proactively ask about user health status like sleep, exercise, diet, etc.
+```
+
+After sending, OpenCode will automatically use web scraping tools to read Vercel AI Gateway's official docs and learn the latest usage:
+
+![](https://pic.yupi.icu/1/image-20260107190151933.png)
+
+In about 5 minutes, the AI completed all code generation and automatically installed dependencies.
+
+![](https://pic.yupi.icu/1/image-20260107190629349.png)
+
+3) I directly provided the Vercel API Key I obtained earlier to the AI to help launch the project:
+
+![](https://pic.yupi.icu/1/image-20260107190751628.png)
+
+4) After successfully launching the project, open a browser to `localhost:3000` to test it.
+
+But it errored! Couldn't call the AI.
+
+![](https://pic.yupi.icu/1/image-20260107191838608.png)
+
+Perhaps the AI misunderstood the Vercel AI Gateway documentation, leading to incorrect AI calling code. So I input the docs to the AI again for another attempt:
+
+![](https://pic.yupi.icu/1/image-20260107191719979.png)
+
+It errored again. Even though I provided the API Key, the system still reported "Missing API Key".
+
+So I called the AI again, telling it "I already gave you this key earlier".
+
+![](https://pic.yupi.icu/1/image-20260107192718301.png)
+
+After about 5 rounds of errors and fixes, it still wouldn't work properly! I'm exhausted...
+
+![](https://pic.yupi.icu/1/image-20260107193542108.png)
+
+Then I had a mischievous idea: Since we're comparing to Claude Code, why not try using Claude Code to fix this problem OpenCode couldn't solve?
+
+![](https://pic.yupi.icu/1/image-20260107193829543.png)
+
+Let's try! Input prompt:
+
+```markdown
+Currently the project's backend AI functionality isn't working
+Please refer to https://vercel.com/docs/ai-gateway/getting-started documentation
+Help fix the backend to ensure the project runs properly
+```
+
+![](https://pic.yupi.icu/1/image-20260107193701784.png)
+
+Claude Code successfully fixed the issue, and it finally worked normally:
+
+![](https://pic.yupi.icu/1/image-20260107194915666.png)
+
+💡 Note: If you encounter AI call network timeout issues, have the AI change the calling baseURL to https://ai-gateway.vercel.sh/v1
+
+Previously, similar tasks using Claude Code/Cursor + GLM took under 10 minutes to complete. This time it took about 20 minutes with back-and-forth before working properly.
+
+This makes me doubt OpenCode's capabilities. And it feels like the GLM model became dumber in OpenCode - or is that just my imagination...
+
+No way - everyone's raving about OpenCode. I must be using it wrong!
+
+![](https://pic.yupi.icu/1/image-20260107195050357.png)
+
+### Ultrawork Mode
+
+Remember the `ultrawork` (or `ulw`) cheat code mentioned earlier? Let's try it!
+
+![](https://pic.yupi.icu/1/image-20260107195327425.png)
+
+Entering battle mode:
+
+![](https://pic.yupi.icu/1/image-20260107195346575.png)
+
+You can view sub-agent operation details. First press `Ctrl + x`, then arrow keys to check different agents.
+
+When background tasks complete, there's a notification. Here the "Research Vercel AI SDK Conversation Mode" task is done.
+
+![](https://pic.yupi.icu/1/image-20260107195605772.png)
+
+But guess what? After waiting nearly 10 minutes, the task still wasn't finished...
+
+Looking at this task list - does it really need to be this complex? It even pulled in databases?
+
+![](https://pic.yupi.icu/1/image-20260107200237753.png)
+
+I've lost patience waiting. Just end it!
+
+Apparently, this not-too-complex work doesn't leverage multi-agent advantages well. It's like needing to print one sheet of paper but mobilizing the entire company - some researching paper types, some studying printer status, some exploring optimal printing postures.
+
+## Final Thoughts
+
+After these simple tests, I'm keeping OpenCode under observation for now.
+
+The frontend is indeed excellent, but backend capabilities seem behind Claude Code.
+
+If I just want frontend convenience, why not use Cursor?
+
+![](https://

translations/en/Vibe Coding 零基础教程/10 编程工具/工具实战/OpenSpec：轻量规范开发框架.md

@@ -0,0 +1,193 @@
+# OpenSpec: Lightweight Specification Development Framework
+
+> Keeping documentation and code always in sync
+
+Hello, I'm programmer Yupi.
+
+In previous articles, we learned about the Spec-kit specification-driven development framework. But you might find Spec-kit's workflow too complex—is there a more lightweight alternative?
+
+In this article, I'll introduce **OpenSpec**, a lightweight specification-driven development framework that's simpler and easier to use than Spec-kit, making it ideal for iterating features on existing projects.
+
+## 1. What is OpenSpec?
+
+[OpenSpec](https://openspec.dev/) is a lightweight specification-driven development framework that's simpler and more user-friendly than Spec-kit.
+
+Its core philosophy is to treat specification documents as part of the codebase. For every feature change:  
+**First draft a change proposal** => Implement after confirmation => Archive changes into specification documents after implementation, keeping documentation and code always synchronized.
+
+![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE6%E5%A4%A7.jpeg)
+
+## 2. Quick Start with OpenSpec
+
+Let me walk you through a practical example to quickly get started with OpenSpec.
+
+### 1. Installing OpenSpec
+
+Visit the [OpenSpec official repository](https://github.com/Fission-AI/OpenSpec/) to view documentation.
+
+First ensure your computer has Node.js installed with a compatible version (e.g., here it requires Node.js >= 20.19.0), then globally install the OpenSpec CLI:
+
+```bash
+npm install -g @fission-ai/openspec@latest
+```
+
+Navigate to your project directory and run the initialization command:
+
+```bash
+openspec init
+```
+
+During initialization, you'll be asked to select AI tools to integrate (e.g., Claude Code, Cursor, etc.). Here I choose Cursor.
+
+![](https://pic.yupi.icu/1/image-20260116163202471.png)
+
+After running the command, OpenSpec will automatically generate an `openspec/` directory in your project containing:
+
+- `openspec/specs/`: Stores main specification documents recording the project's complete current state
+- `openspec/changes/`: Stores change proposals recording modification plans
+- ⭐️ `openspec/AGENTS.md`: Guidelines for AI programming assistants to use OpenSpec for specification-driven development, including complete workflows for creating change proposals, writing requirement specifications, validating and archiving changes.
+- `openspec/project.md`: Contextual description of the current project (used to record project information)
+
+![](https://pic.yupi.icu/1/image-20260116164308965.png)
+
+Additionally, it will generate corresponding command files based on the AI programming tool you selected, such as for Cursor:
+
+![](https://pic.yupi.icu/1/image-20260116173814973.png)
+
+With these files, we can begin the standardized development process.
+
+### 2. Standardized Development Process
+
+Refer to the [official documentation](https://github.com/Fission-AI/OpenSpec/), mainly divided into 5 steps:
+
+#### 1) Draft Change Proposal
+
+Directly tell the AI in your programming tool to create a change proposal. For example, if I want to add user search functionality:
+
+```markdown
+Create an OpenSpec change to add feature: search users by name and email
+```
+
+You can also use slash commands in AI programming tools (e.g., Claude Code, Cursor):
+
+```markdown
+/openspec:proposal Add feature: search users by name and email
+```
+
+![](https://pic.yupi.icu/1/image-20260116171714070.png)
+
+The AI will create an independent directory `openspec/changes/add-user-search/` for this feature, containing:
+
+- `proposal.md`: Describes what to change and why
+- `tasks.md`: Task breakdown of implementation steps
+- `specs/…/spec.md`: Specific content of requirement changes
+
+![](https://pic.yupi.icu/1/image-20260116171953809.png)
+
+#### 2) Verify & Review
+
+Run the following commands to check if the AI-created change proposal is correct:
+
+```bash
+openspec list                        # View all changes
+openspec validate add-user-search    # Verify format correctness
+openspec show add-user-search        # View detailed content
+```
+
+![](https://pic.yupi.icu/1/image-20260116172259055.png)
+
+#### 3) Review Proposal with Team
+
+If improvements are needed, continue the conversation with AI, e.g.:
+
+```markdown
+Can you help add more search conditions and limitations?
+```
+
+The AI will update the specifications and task list until consensus is reached.
+
+#### 4) Implement Changes
+
+After confirming the specifications, have the AI begin implementation:
+
+```markdown
+The specifications are perfect, start generating code
+```
+
+Or use slash commands:
+
+```markdown
+/openspec:apply add-user-search
+```
+
+The AI will implement step-by-step according to the task list in `tasks.md` and mark completion status.
+
+![](https://pic.yupi.icu/1/image-20260116172654371.png)
+
+Generation completes quickly, with the AI's output being very organized—all changes are clear at a glance:
+
+![](https://pic.yupi.icu/1/image-20260116172905921.png)
+
+#### 5) Archive Changes
+
+After all tasks are completed, have the AI archive this change:
+
+```markdown
+Please archive this change
+```
+
+Or use slash commands:
+
+```markdown
+/openspec:archive add-user-search
+```
+
+Or run in terminal:
+
+```bash
+openspec archive add-user-search --yes
+```
+
+![](https://pic.yupi.icu/1/image-20260116172957759.png)
+
+This command will:
+- Move the change folder to the `openspec/changes/archive/` archive area
+- Automatically merge requirement changes into the `openspec/specs/` main specifications
+- Keep documentation and code synchronized
+
+![](https://pic.yupi.icu/1/image-20260116174247313.png)
+
+This way, through the historical records in `openspec/changes/`, you can trace the context of each change at any time.
+
+Additionally, during the development process, it's recommended to regularly run the `openspec validate` verification command to ensure specification integrity.
+
+## 3. Differences Between OpenSpec and Spec-kit
+
+By now, you can probably sense the differences between OpenSpec and Spec-kit.
+
+- Spec-kit requires a complete 7-step process: Establish guidelines → Write requirements → Clarify questions → Finalize solution → Break down tasks → Review → Write code), suitable for large new projects from scratch
+- OpenSpec's process is more streamlined: Draft proposal → Review → Implement → Archive → Verify, with faster onboarding, making it ideal for iterating features on existing projects.
+
+If you're iterating features on an existing project, OpenSpec is the better choice. If you're starting a large new project from scratch, Spec-kit's complete process helps lay a solid foundation.
+
+## Final Thoughts
+
+By now, you should have a basic understanding of OpenSpec.
+
+**OpenSpec is more lightweight than Spec-kit and better suited for daily development feature iterations.**
+
+If you find Spec-kit too heavy, try OpenSpec. Its simpler workflow still ensures documentation and code synchronization, making team collaboration smoother.
+
+I recommend trying OpenSpec in your projects to experience the benefits of specification-driven development firsthand.
+
+## Recommended Resources
+
+1) Yupi AI Navigation Site: [Comprehensive AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheat Sheet: [Internship/Campus Recruitment/Social Recruitment High-Frequency Topics, Enterprise Question Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Builder: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interview: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Get Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/10 编程工具/工具实战/Spec-kit：规范驱动开发框架.md

@@ -0,0 +1,237 @@
+# Spec-kit: Specification-Driven Development Framework
+
+> Enable AI to develop projects following professional processes
+
+Hello, I'm programmer Yupi.
+
+In previous articles, we learned how to quickly generate code using AI. But you might have noticed that AI sometimes "writes as it thinks," resulting in code that may not meet expectations or projects that fall apart halfway through.
+
+Is there a way to make AI develop projects following professional processes?
+
+In this article, I'll introduce **Spec-kit**, a specification-driven development framework launched by GitHub, which enables AI to work like a professional programmer.
+
+Let's get started!
+
+
+
+## What is Spec-kit?
+
+[Spec-kit](https://github.com/github/spec-kit) is a specification-driven development (SDD) framework launched by GitHub.
+
+What is specification-driven development?
+
+The traditional development process is: write whatever comes to mind, make changes as you go, and document it later. This often leads to unclear requirements and mismatched code and documentation.
+
+Specification-driven development takes the opposite approach: **first write the requirements into a specification document and treat it as the single source of truth for the code**. You can think of the specification document as "legal text," which contains detailed requirement descriptions, system designs, and interface definitions. AI must strictly adhere to these texts to generate code, ensuring the output fully meets expectations.
+
+![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE4%E5%A4%A7.jpeg)
+
+
+
+## Quick Start with Spec-kit
+
+Let me walk you through a practical example to quickly get started with Spec-kit.
+
+### 1. Install Spec-kit
+
+First, open the terminal and use the uvx command to directly install and run the Specify tool, and initialize a project:
+
+```bash
+uvx --from git+https://github.com/github/spec-kit.git specify init my-project
+```
+
+![](https://pic.yupi.icu/1/image-20260116141308958.png)
+
+Select the AI programming tool you use. Spec-kit supports almost all mainstream programming tools like Claude Code and GitHub Copilot. Here, I choose Claude Code:
+
+![](https://pic.yupi.icu/1/image-20260116141507190.png)
+
+Choose the script type based on your operating system. Select the bottom option for Windows and the top option for others:
+
+![](https://pic.yupi.icu/1/image-20260116141537030.png)
+
+After executing this command, a `my-project` folder will be created in the current directory:
+
+![](https://pic.yupi.icu/1/image-20260116141613246.png)
+
+The folder contains these core files:
+
+- `.specify/memory/constitution.md`: Basic guidelines and conventions for the project
+- `.specify/scripts/`: Some executable scripts
+- `.specify/templates/`: Template files
+- `.claude/commands/`: Defines a set of built-in slash commands that you can directly call in AI programming tools
+
+![](https://pic.yupi.icu/1/image-20260116142528820.png)
+
+The initialization program also provides some guidance on how to use these commands to develop the project.
+
+![](https://pic.yupi.icu/1/image-20260116141715310.png)
+
+Open this project folder with Claude Code, and you can use the defined commands in the conversation.
+
+![](https://pic.yupi.icu/1/image-20260116142740271.png)
+
+
+
+### 2. Standardized Development Process
+
+Next is the standardized development process, as outlined in the [official documentation](https://github.com/github/spec-kit), mainly divided into 7 steps:
+
+#### 1) Constitution: Define Project Guidelines
+
+Run the `/speckit.constitution` command to define the project's basic principles, code standards, performance criteria, etc. This is the project's "constitution," and all subsequent development must adhere to it.
+
+For example:
+
+```markdown
+/speckit.constitution Prohibit using blue-purple gradient UI styles
+```
+
+💡 If you're working on a Chinese project, it's best to explicitly tell AI "the entire website uses Chinese" when defining the project guidelines.
+
+![](https://pic.yupi.icu/1/image-20260116160508054.png)
+
+AI updated the project guidelines document:
+
+![](https://pic.yupi.icu/1/image-20260116160610169.png)
+
+It's recommended to commit a version with Git at each step, so you can roll back if something goes wrong and easily see the changes made at each step.
+
+![](https://pic.yupi.icu/1/image-20260116160745548.png)
+
+
+
+#### 2) Specify: Write Functional Specifications
+
+Run the `/speckit.specify` command to describe what functionality to implement, why, and what the user needs are. For example:
+
+```markdown
+/speckit.specify I want to create a [website that reminds me to drink water automatically]
+```
+
+![](https://pic.yupi.icu/1/image-20260116161231223.png)
+
+AI created a new Git branch for this requirement to prevent contaminating the existing project. Under this branch, a requirement specification document (spec.md) and a requirement checklist document (requirements.md) were created.
+
+![](https://pic.yupi.icu/1/image-20260116161307642.png)
+
+The requirement specification document is very detailed and includes edge test cases to handle various possible user actions.
+
+![](https://pic.yupi.icu/1/image-20260116161926017.png)
+
+The requirement checklist document records AI's understanding of the requirements, with checkmarks indicating AI's confirmation:
+
+![](https://pic.yupi.icu/1/image-20260116161500358.png)
+
+
+
+#### 3) Clarify: Clarify Ambiguities (Optional)
+
+If you find some items in the requirement checklist document are not checked, you need to use the Clarify command to guide AI in further clarifying the requirements until all items are checked.
+
+Run the `/speckit.clarify` command, and AI will ask structured questions for you to answer, helping you fill in the gaps in the requirements, such as edge cases and error handling.
+
+![](https://pic.yupi.icu/1/image-20260116162702812.png)
+
+
+
+#### 4) Plan: Develop Technical Solutions
+
+Run the `/speckit.plan` command to let AI decide on the technology stack, system architecture, data models, API interfaces, etc.
+
+![](https://pic.yupi.icu/1/image-20260116163506902.png)
+
+The technical solution is complete, and a bunch of documents were generated. Let's briefly understand them:
+
+- CLAUDE.md Project Development Guide, recording the technology stack and project structure to guide Claude Code on how to proceed with development
+- quickstart.md Quick Start Guide, containing 6 implementation phases and deployment plans
+- plan.md Implementation Plan, defining a pure client-side architecture, storage strategy, constitution compliance checks, etc.
+- data-model.md Data Model Design, defining 4 core entities (reminder settings, water log, daily progress, history) and storage structure
+- research.md Technical Research Document, recording 8 key technical decisions
+- contracts/api-contract.md API Interface Document
+
+![](https://pic.yupi.icu/1/image-20260116164021646.png)
+
+Next, we can prepare for development implementation.
+
+![](https://pic.yupi.icu/1/image-20260116163553725.png)
+
+
+
+#### 5) Tasks: Break Down Tasks
+
+Run the `/speckit.tasks` command to break down the plan into executable task lists, annotating dependencies and priorities.
+
+![](https://pic.yupi.icu/1/image-20260116164537006.png)
+
+A task list document was generated, clearly outlining what to do at each step:
+
+![](https://pic.yupi.icu/1/image-20260116164612533.png)
+
+
+
+#### 6) Analyze: Analyze and Check (Optional)
+
+Run the `/speckit.analyze` command to check if the specifications, plans, and tasks are complete and consistent, identifying design flaws early.
+
+![](https://pic.yupi.icu/1/image-20260116164936733.png)
+
+As you can see, AI didn't find any issues and encouraged me to proceed confidently. Feels great!
+
+
+
+#### 7) Implement: Execute Implementation
+
+Finally, run the `/speckit.implement` command to let AI generate code according to the task list.
+
+![](https://pic.yupi.icu/1/image-20260116170006815.png)
+
+Mission accomplished, let's see the results~
+
+![](https://pic.yupi.icu/1/image-20260116170146827.png)
+
+Since I never mentioned using Chinese output, the website content is in English, but I think the effect is quite good.
+
+
+
+## Pros and Cons of Spec-kit
+
+By now, we've learned how to develop a complete project using Spec-kit. Let's review the full process:
+
+![](https://pic.yupi.icu/1/%25E6%25BC%25AB%25E7%2594%25BB%25E5%259B%25BE5%25E5%25A4%25A7.jpeg)
+
+Even without Spec-kit, we can manually follow these steps when developing a complete project.
+
+The biggest advantage of this model is **alignment**. Everyone works based on the same clear specification document, ensuring a high level of understanding of the requirements, reducing misunderstandings in communication, and ensuring code quality.
+
+However, the downside is also obvious. For small projects, which could be completed in minutes by directly writing code, following this process might take about half an hour!
+
+So this process is more suitable for teams starting a complete new project from scratch. Although the process is slower than directly writing code, it significantly reduces the risk of rework, making it more efficient in the long run.
+
+
+
+## Final Thoughts
+
+By now, I believe you have a basic understanding of Spec-kit.
+
+**Spec-kit is not a panacea, but in the right scenarios, it can significantly improve project quality.**
+
+If you're working on a large project, need team collaboration, or have high code quality requirements, then you can try Spec-kit. But if you're just writing a simple script or quickly validating an idea, directly generating code with AI will be faster.
+
+Choosing the right tool can make your work more efficient.
+
+In upcoming articles, I'll continue to introduce other standardized development tools to help you find the most suitable development approach.
+
+
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheatsheet: [Internship/Campus/Social Recruitment High-Frequency Exam Points, Enterprise Real Questions Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Writing Tool: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interview: [Essential for Internship/Campus/Social Recruitment Interviews to Get Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/10 编程工具/工具实战/Superpowers：核心技能库.md

@@ -0,0 +1,187 @@
+# Superpowers: Core Skill Library
+
+> Empowering AI to Work Like Professional Programmers
+
+Hello, I'm Programmer Fish Skin.
+
+In previous articles, we explored various AI programming tools and standardized development frameworks. But you might wonder: Is there a complete development process that enables AI to work like a professional programmer?
+
+In this article, I will introduce **Superpowers**, a software development process that makes AI programming assistants more professional.
+
+## What is Superpowers?
+
+[Superpowers](https://github.com/obra/superpowers) is a **software development process** that enhances AI programming assistants. It not only provides a composable **programming skill package** for Claude Code but also offers guidelines and instructions to ensure AI uses these skills correctly.
+
+Traditional AI programming starts writing code as soon as you state the requirements, often resulting in undesired outcomes. With Superpowers, AI first clarifies what you want, proposes a design for confirmation, creates a detailed execution plan, and then implements it step-by-step, with self-checks at each stage.
+
+It's like giving superpowers to an AI that knows nothing when it joins the company, instantly equipping it with the development habits of a professional programmer.
+
+![](https://pic.yupi.icu/1/%E6%BC%AB%E7%94%BB%E5%9B%BE8%E5%A4%A7.jpeg)
+
+## Quick Start with Superpowers
+
+Let me guide you through a practical example to quickly get started with Superpowers.
+
+### 1. Installing Superpowers
+
+Refer to the [Superpowers official documentation](https://github.com/obra/superpowers) and run the following commands in Claude Code to install.
+
+First, register the marketplace:
+
+```bash
+/plugin marketplace add obra/superpowers-marketplace
+```
+
+![](https://pic.yupi.icu/1/image-20260116171109190.png)
+
+Then install the plugin from the marketplace:
+
+```bash
+/plugin install superpowers@superpowers-marketplace
+```
+
+![](https://pic.yupi.icu/1/image-20260116171125164.png)
+
+After installation, run `/help` to view available commands. You will see these 3 commands:
+
+- `/superpowers:brainstorm` Continuously improves design through user interaction
+- `/superpowers:write-plan` Creates an implementation plan
+- `/superpowers:execute-plan` Executes the plan in batches
+
+![](https://pic.yupi.icu/1/image-20260116171300633.png)
+
+### 2. Standard Workflow
+
+Let's take the development of a "User Registration Module" as an example to demonstrate Superpowers' official standard workflow.
+
+First, run the `claude` command in the terminal to start Claude Code, then follow these 7 steps:
+
+#### 1) Brainstorming => Aligning Requirements
+
+Select the `/superpowers:brainstorm` command and input your requirements:
+
+![](https://pic.yupi.icu/1/image-20260116175524611.png)
+
+Superpowers doesn't rush to write code. Instead, it aligns requirements through multiple rounds of Q&A, such as:
+
+- What are the main scenarios for the user registration module?
+- Which registration methods do you want to support?
+
+![](https://pic.yupi.icu/1/image-20260116175456666.png)
+
+Through interactive Q&A, AI explores different solutions and continuously improves the design.
+
+![](https://pic.yupi.icu/1/image-20260116175907783.png)
+
+Once the requirements and solutions are confirmed, it automatically saves the detailed design document to the `docs/plans/` directory.
+
+![](https://pic.yupi.icu/1/image-20260116180740987.png)
+
+#### 2) Using Git Worktrees to Create an Independent Workspace (Optional)
+
+After the design is approved, Superpowers helps you create a Git worktree, establishing an isolated workspace on a new branch, initializing the project, and verifying the test baseline is clean. This avoids polluting the main branch.
+
+This step is optional. Here, I let AI continue execution to see what happens:
+
+![](https://pic.yupi.icu/1/image-20260116181020601.png)
+
+#### 3) Writing Plans => Creating an Implementation Plan
+
+Run the `/superpowers:write-plan` command to let Superpowers generate a detailed implementation plan, breaking down development tasks into atomic-level steps (each task takes 2 ~ 5 minutes).
+
+Here, AI automatically executed it, skipping a command~
+
+![](https://pic.yupi.icu/1/image-20260116180907360-20260116180953363-20260116181058928-20260116181118631.png)
+
+Review the implementation plan document generated by AI. Each task includes:
+
+- Precise file paths
+- Complete code content
+- Verification steps
+
+![](https://pic.yupi.icu/1/image-20260116181910011.png)
+
+Wow, this isn't just an implementation plan document—it feels like most of the code is already written!
+
+![](https://pic.yupi.icu/1/image-20260116181959589.png)
+
+#### 4) Executing Tasks
+
+Run the `/superpowers:execute-plan` command. Superpowers executes in one of the following ways:
+- Subagent-Driven Development: Assigns a new subagent for each task, with two-stage reviews (specification compliance check + code quality check)
+- Batch Execution: Executes tasks in batches, pausing at key nodes for manual checks
+
+Here, AI directly asked me which method I preferred:
+
+![](https://pic.yupi.icu/1/image-20260116182128737.png)
+
+I blindly chose Subagent-Driven, and AI automatically selected the corresponding development skills:
+
+![](https://pic.yupi.icu/1/image-20260116182244311.png)
+
+Then AI started working:
+
+![](https://pic.yupi.icu/1/image-20260116182445078.png)
+
+#### 5) Test-Driven Development
+
+During implementation, Superpowers enforces the `Red-Green-Refactor` process:
+- Write failing tests first
+- Run tests to confirm failure
+- Write minimal code to pass the test
+- Run tests to confirm success
+- Commit the code
+
+![](https://pic.yupi.icu/1/image-20260116183728764.png)
+
+If code is written before tests, Superpowers deletes it, forcing you to write tests first.
+
+#### 6) Code Review
+
+After completing a batch of tasks, Superpowers automatically triggers code reviews, checking the code against the plan and reporting issues by severity. If critical issues are found, it halts further progress.
+
+![](https://pic.yupi.icu/1/image-20260116182947482.png)
+
+#### 7) Completing Development
+
+After all tasks are completed, Superpowers verifies that all tests pass:
+
+![](https://pic.yupi.icu/1/image-20260116194339313.png)
+
+Then AI may provide options, such as merging into the main branch / creating a PR / keeping the branch / discarding changes.
+
+If you're confident the feature works, you can use Superpowers' built-in skills to clean up the development branch.
+
+![](https://pic.yupi.icu/1/image-20260116194520921.png)
+
+## Pros and Cons of Superpowers
+
+Following this "design-first, code-later" standardized process ensures higher code quality, but the trade-off is that it's significantly slower than letting AI generate code directly. It's really slow! This simple requirement took me over half an hour!!!
+
+![](https://pic.yupi.icu/1/image-20260116183405162.png)
+
+If you're working on a large project requiring team collaboration, Superpowers is worth trying. The extra time spent upfront will pay off later. But if you're just writing a simple script or quickly validating an idea, using it is overkill—it's unnecessary.
+
+## Final Thoughts
+
+By now, you should have a basic understanding of Superpowers.
+
+**Superpowers enables AI to work like a professional programmer, but the trade-off is slower development speed.**
+
+If you're working on a large project, need high-quality code, and require team collaboration, Superpowers is a great choice. But if you're working on a simple personal project, letting AI generate code directly is faster.
+
+Choosing the right tool ensures efficiency.
+
+We've explored various standardized development tools, and I hope you find the development approach that best suits you.
+
+## Recommended Resources
+
+1) Fish Skin AI Navigation Website: [Comprehensive AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheatsheet: [Internship/Campus Recruitment/Social Recruitment High-Frequency Topics, Enterprise Exam Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Writing Tool: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interview: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Get Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/10 编程工具/工具实战/TRAE SOLO：AI 主导的全栈开发工具.md

@@ -0,0 +1,403 @@
+# TRAE SOLO: AI-Driven Full-Stack Development Tool
+
+Hi, I'm Yupi.
+
+In previous articles, we explored various AI programming tools. Whether it's Cursor or Claude Code, they all follow a **human-led + AI-assisted** model where you constantly need to converse with, confirm, and modify the AI's output.
+
+But what if you want the AI to take more initiative, planning tasks and executing development automatically? What tool should you use?
+
+In this article, I'll introduce TRAE SOLO, a full-stack development tool that lets AI take the lead in development tasks.
+
+## 1. What is TRAE SOLO?
+
+[TRAE](https://www.trae.ai/) is an AI-native programming tool launched by ByteDance, offering two development modes:
+
+- IDE Mode: Similar to Cursor, maintaining traditional development workflows with human leadership
+- SOLO Mode: AI takes the lead to automatically advance development tasks
+
+SOLO Mode means **AI leads the task and executes development automatically**. You just need an idea, and by working with AI, you can bring that idea to life.
+
+![](https://pic.yupi.icu/1/image-20250928220322788.png)
+
+What's the difference between TRAE SOLO and Cursor?
+
+To use an analogy: Using Cursor is like you being the project manager and AI being the programmer—you constantly assign tasks, check results, and provide feedback. With TRAE SOLO, AI is both the project manager and programmer—you just state the goal, and it will plan, develop, and test on its own.
+
+According to the latest 2026 evaluations, TRAE performs exceptionally well among AI programming tools, especially its customizable agent system that allows users to define and configure AI agents with different roles and skills based on project needs, much like assembling a team.
+
+## 2. Core Features of TRAE SOLO
+
+### 1. Automatic Documentation Generation
+
+TRAE SOLO automatically generates:
+
+- Product Requirement Documents (PRD)
+- Technical Architecture Documents
+- API Documentation
+- Test Reports
+
+These documents adhere to enterprise-standard development processes and are highly professional.
+
+### 2. Service Integration Capabilities
+
+TRAE offers powerful integration capabilities, enabling seamless connections to various services:
+
+- Supabase: Database storage and user authentication
+- Stripe: Payment functionality
+- OpenRouter: AI services
+- Figma: Design prototypes
+
+No need to read official documentation—just a few clicks in TRAE to complete integrations.
+
+![](https://pic.yupi.icu/1/image-20250928222329915.png)
+
+### 3. Multi-Task Parallel Execution
+
+TRAE SOLO supports parallel task execution, allowing simultaneous frontend and backend development to significantly improve efficiency.
+
+### 4. Code Change Tools
+
+TRAE provides DiffView, a code change tool that clearly shows what code was modified in each update, making review and rollback easier.
+
+### 5. Plan Mode
+
+Beyond direct execution, TRAE also supports Plan Mode. The AI first generates a detailed execution plan for your approval before proceeding, giving you better control over the development process.
+
+## 3. How to Use TRAE SOLO?
+
+Let me demonstrate TRAE SOLO's workflow with a practical example.
+
+⭐️ Recommended: Watch Yupi's video tutorial for a more detailed explanation: https://www.bilibili.com/video/BV1yMn3zuE7L
+
+### Preparation
+
+First, prepare the development tools:
+
+- Download and install [TRAE](https://www.trae.ai/)
+- Install the [Node.js environment](https://nodejs.org/zh-cn/download)
+- For mini-program development, also install [WeChat Developer Tools](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
+
+![](https://pic.yupi.icu/1/%E4%B8%8B%E8%BD%BD%E5%B7%A5%E5%85%B7%E6%8B%BC%E5%9B%BE.png)
+
+### 1. Requirements Analysis
+
+With tools ready, enter TRAE's SOLO Mode and open a blank project folder.
+
+![](https://pic.yupi.icu/1/image-20250928220647365.png)
+
+First, we conduct requirements analysis. Don't overcomplicate it—just describe your idea in natural language to the AI.
+
+For example, I gave the AI this requirement:
+
+```
+You are a professional programmer. Please help me develop the "Learning Hero - AI Q&A Guided Learning" WeChat mini-program.
+
+Users can set a topic they want to learn (or test), and the AI will generate several fun knowledge Q&A cards around that topic, guiding users to master knowledge more easily and enjoyably through a quiz-style challenge.
+```
+
+![](https://pic.yupi.icu/1/image-20250928221154635.png)
+
+The AI quickly generated detailed product requirement and technical architecture documents, aligning well with enterprise-standard development processes.
+
+![](https://pic.yupi.icu/1/image-20250928221128338.png)
+
+The AI seems eager to start coding, but don't rush—**carefully review the requirement documents first**.
+
+The AI's output is good but may not fully match our expectations. Focus manually on core functionalities, remove unnecessary additional features, and ensure the core business process (P0 requirements) works first.
+
+![](https://pic.yupi.icu/1/image-20250928221334652.png)
+
+**Don't skip this step—spending an extra minute now saves an hour later!** Clearly define requirements to prevent the AI from building unwanted features.
+
+A handy trick: Use TRAE's integrated Figma design tool to access free UI prototypes.
+
+![](https://pic.yupi.icu/1/image-20250928221519374.png)
+
+Click to view specific prototype designs. Just select the one you like, click "Add to Conversation," and TRAE will automatically associate the prototype with the AI dialogue.
+
+![](https://pic.yupi.icu/1/image-20250928221618668.png)
+
+### 2. Solution Design
+
+Next, we move to solution design—traditionally the job of architects earning tens of thousands monthly—now handled by our little AI SOLO.
+
+When writing this prompt, pay attention to details and **follow the minimal development principle** to prevent the AI from overcomplicating simple tasks.
+
+```
+I've manually adjusted the product requirement document, removing many unnecessary features. Please regenerate the technical architecture document based on my revised requirements. Requirements:
+1. Do not add any features not mentioned in the requirement document
+2. Follow the minimal development principle—focus on implementing core functionalities only, avoiding extras like deployment, monitoring, or rate limiting
+3. Follow the frontend-backend separation principle
+```
+
+The AI quickly generated a complete technical architecture document, covering frontend/backend technologies, API design, database schema, etc.
+
+![](https://pic.yupi.icu/1/image-20250928221924096.png)
+
+For those who understand the document, I recommend leveraging your expertise to specify technical choices, keeping the AI's code within your control. For example, I explicitly chose Supabase for the database and OpenRouter to connect with Gemini for AI services.
+
+![](https://pic.yupi.icu/1/image-20250928221952548.png)
+
+If you don't understand the document, don't worry. Imagine yourself as the boss or product manager—your programmer colleague hands you a technical proposal, and you just say, "I don't care how you do it—this feature goes live tomorrow!" Let the AI do its thing.
+
+Trust the AI—believe in the power of belief.
+
+### 3. Service Integration
+
+After solution design, before formal development begins, we need to prepare project dependencies.
+
+Where to store user data? How to connect the program to AI models? These are problems we need to solve.
+
+Instead of manually setting up services, use TRAE's integration capabilities to connect services without reading official documentation—just a few clicks.
+
+![](https://pic.yupi.icu/1/image-20250928222329915.png)
+
+#### Integrate Supabase
+
+[Supabase](https://supabase.com/) is an open-source Backend-as-a-Service (BaaS) platform offering database storage, user authentication, instant APIs, and more.
+
+![](https://pic.yupi.icu/1/image-20250928222457606.png)
+
+Click the connect button, then complete Supabase account creation, organization setup, and authorization on the pop-up page.
+
+![](https://pic.yupi.icu/1/image-20250928222520491.png)
+
+Back in TRAE, after the organization appears, click to create a new project, fill in configuration details, and hit create.
+
+![](https://pic.yupi.icu/1/image-20250928222545479.png)
+
+After creating the project, return to TRAE, refresh, and click connect—it's that simple.
+
+![](https://pic.yupi.icu/1/image-20250928222608471.png)
+
+If AI Vibe Coding made backend developers ecstatic, this feature is a win for frontend developers—simple projects don't even need manual backend setup.
+
+#### Integrate OpenRouter AI Services
+
+TRAE integrates with various AI services. Here, I chose [OpenRouter](https://openrouter.ai/), which offers a unified API to connect with major models like Gemini, GPT, Claude, etc.
+
+![](https://pic.yupi.icu/1/image-20250928222649319.png)
+
+First, register an account on the official site, then create an API key for AI calls in the API Keys section. Configure and enter the key in TRAE, and the AI service is ready.
+
+![](https://pic.yupi.icu/1/image-20250928222833273.png)
+
+Note: Ensure you have sufficient usage quotas, or calls may fail due to rate limits.
+
+![](https://pic.yupi.icu/1/image-20250928222853247.png)
+
+### 4. Backend Development
+
+With preparations complete, we finally enter the exciting development phase.
+
+Note: Due to **limited AI context**, to generate a complete project with fewer bugs, split the process: First generate backend code, manually verify it, then generate frontend code.
+
+Input a prompt to develop the backend first, ensuring the project runs:
+
+```
+Based on the latest product requirement and technical architecture documents, prioritize backend development to ensure the project runs correctly.
+```
+
+Use TRAE's prompt optimization feature to refine the prompt with one click.
+
+![](https://pic.yupi.icu/1/%E4%BC%98%E5%8C%96%E6%8F%90%E7%A4%BA%E8%AF%8D.png)
+
+Click execute—let the SOLO begin. The AI first provides a task plan:
+
+![](https://pic.yupi.icu/1/image-20250928224232897.png)
+
+Then it autonomously operates the terminal to execute commands, writes backend configuration and business logic code, creates database tables, etc., even seeking confirmation for critical operations—very meticulous.
+
+![](https://pic.yupi.icu/1/image-20250928224300188.png)
+
+If you don't understand, let it do its thing.
+
+While waiting, check out free programming learning paths at [Programming Navigation](https://codefather.cn/). TRAE has built-in notifications to alert you when tasks complete.
+
+TRAE seems well-trained—it validates whether the program runs correctly.
+
+![](https://pic.yupi.icu/1/image-20250928224350332.png)
+
+After some time, the AI finishes, generating not just code but also neatly organized backend API documentation.
+
+![](https://pic.yupi.icu/1/image-20250928224437599.png)
+
+### 5. Frontend Development
+
+Now for frontend development.
+
+Important: Don't continue writing prompts in the same dialogue.
+
+Why? Because AI models have limited context, and previous operations have consumed much of it. To prevent context exhaustion or confusion, start a fresh dialogue for frontend generation.
+
+![](https://pic.yupi.icu/1/image-20250928224735250.png)
+
+Provide the AI with product requirements, technical architecture, and backend API docs in the prompt to focus on frontend code generation.
+
+```
+You are a professional programmer. Please help me develop the "Learning Hero - AI Q&A Guided Learning" WeChat mini-program.
+
+Users can set a topic they want to learn (or test), and the AI will generate several fun knowledge Q&A cards around that topic, guiding users to master knowledge more easily and enjoyably through a quiz-style challenge.
+
+Based on @ProductRequirementDocument @TechnicalArchitectureDocument @BackendAPIDocument, generate complete, runnable WeChat mini-program frontend code.
+Notes:
+1. Follow the minimal functionality principle—do not develop any features not mentioned in the requirement document
+2. For images, use placeholder picsum.photos (e.g., picsum.photos/200/300)
+```
+
+Execute!
+
+While waiting, check out free interview questions and study paths at [Interview Duck](https://www.mianshiya.com/).
+
+After some time, the AI finishes, SOLO-generating over 20 files at once!
+
+![](https://pic.yupi.icu/1/image-20250928224830751.png)
+
+It looks impressive, but honestly, I'm a bit nervous—will it actually run?
+
+### 6. Testing and Validation
+
+Now comes the thrilling testing phase.
+
+First, open WeChat Developer Tools, import the project folder, and select the test account for debugging.
+
+![](https://pic.yupi.icu/1/image-20250928225118198.png)
+
+After opening the project, click the "Test Account" button in the top-right corner and follow the [documentation](https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html) to obtain the test AppID and AppSecret:
+
+![](https://pic.yupi.icu/1/image-20250928225220066.png)
+
+Manually enter these into the backend configuration file; otherwise, WeChat login won't work.
+
+![](https://pic.yupi.icu/1/image-20250928225304614.png)
+
+Now compile and run the project.
+
+And... it crashes!
+
+![](https://pic.yupi.icu/1/image-20250928225522618.png)
+
+Expected, expected. Mini-program development is trickier than web development, given WeChat's constantly updating tools and docs.
+
+![](https://pic.yupi.icu/1/image-20250928225618743.png)
+
+No worries—issues are inevitable in development. The solution is simple: **Copy the error message and let the AI fix it!**
+
+Here are some typical issues I encountered:
+
+1) Image path problems: Use TRAE's prompt optimization to guide the AI through step-by-step bug fixes.
+
+![](https://pic.yupi.icu/1/image-20250928225717687.png)
+
+2) Login failures: Click "Details" in the developer tools, go to local settings, and check "Do not verify valid domain names."
+
+![](https://pic.yupi.icu/1/image-20250928225825654.png)
+
+3) API path issues: Likely due to long context. Have the AI globally fix frontend API call paths and parameters.
+
+![](https://pic.yupi.icu/1/image-20250928225903118.png)
+
+4) Environment configuration mismatches: Inconsistent variable names between code and config files. This is simple—we can manually edit.
+
+After typing one character, the editor auto-suggests changes, even supporting multi-line edits.
+
+![](https://pic.yupi.icu/1/image-20250928225955681.png)
+
+This is TRAE's **CUE feature**, which not only auto-completes code but also predicts future edits—perfect for refactoring, boosting efficiency.
+
+![](https://pic.yupi.icu/1/%E5%A4%9A%E8%A1%8C%E4%BF%AE%E6%94%B9.gif)
+
+After some fixes, our mini-program runs. Though the UI is rough, once the core workflow functions and users can operate it, further optimizations are easy.
+
+![](https://pic.yupi.icu/1/image-20250928230045861.png)
+
+### 7. Continuous Optimization
+
+Finally, if you plan to launch the mini-program, spend time optimizing.
+
+Remember: Before optimizing, use Git to version-control the current code and commit a baseline. This lets you roll back if optimizations go wrong.
+
+![](https://pic.yupi.icu/1/image-20250928230154447.png)
+
+For example, I had the AI optimize the mini-program's overall style with a simple prompt:
+
+```
+You are a programmer. Please optimize the style of every frontend page and element in the mini-program for visual consistency.
+
+Reference style: Vibrant orange as the primary color, fresh and soothing cartoon style, simple yet elegant, creating a relaxed and pleasant feel.
+```
+
+Using TRAE's prompt optimization yields a more detailed plan.
+
+![](https://pic.yupi.icu/1/image-20250928230225960.png)
+
+Adjust as needed or let the AI handle it.
+
+I recommend committing code after each optimization or new feature and occasionally starting fresh AI dialogues to prevent context overload.
+
+The final mini-program you see is my optimized version—not bad, right?
+
+![](https://pic.yupi.icu/1/image-20250928230316272.png)
+
+## 4. Pros and Cons of TRAE SOLO
+
+TRAE SOLO's advantages are clear.
+
+First, **AI-led development** means you don't constantly converse with the AI—it plans and executes tasks automatically. Plus, **strong service integration** enables easy connections to Supabase, Stripe, etc., without reading docs.
+
+It also **auto-generates documentation** aligned with enterprise standards. And the **localized version is fast**, catering to Chinese users.
+
+Of course, there are limitations.
+
+First, **it needs guidance**—clearer requirements yield better results. Also, **generated code may have bugs**, requiring manual testing and fixes.
+
+Additionally, **context management is crucial**. Long dialogues may confuse the AI, necessitating fresh starts.
+
+Pricing-wise, TRAE offers free and paid versions. The free tier has limits; the paid version bills by usage.
+
+## 5. TRAE SOLO Practical Tips
+
+If you want to try TRAE SOLO, here are my suggestions:
+
+1. Define Requirements Clearly
+
+Though the AI can plan autonomously, clearer requirements yield better results. Recommend:
+
+- Specify core functionalities
+- Remove unnecessary features
+- Provide reference designs (if available)
+- Define technical choices (if you understand them)
+
+2. Develop Step-by-Step
+
+Don't generate the entire project at once. Instead:
+
+- Generate backend first, test it
+- Then generate frontend, test it
+- Finally, optimize styles and details
+
+Commit code after each step for easy rollback.
+
+3. Fix Bugs Promptly
+
+AI-generated code may have bugs—that's normal. Fix issues immediately; don't let them pile up.
+
+Provide complete error messages to the AI—it usually can fix them.
+
+4. Manage Context
+
+Long dialogues reduce AI accuracy. Recommend:
+
+- Start fresh dialogues after major features
+- Reference prior documents in new dialogues
+- Avoid overloading single dialogues
+
+## Final Thoughts
+
+By now, you should fully understand TRAE SOLO.
+
+**TRAE SOLO represents a major evolution in AI programming tools**, shifting from "integrating AI into tools" to "integrating development tools into AI."
+
+![](https://pic.yupi.icu/1/image-20250928220158367.png)
+
+It feels like development tools are just toys for the AI—it freely operates

translations/en/Vibe Coding 零基础教程/20 项目实战/00 Vibe Coding 项目实战导读.md

@@ -0,0 +1,114 @@
+# Vibe Coding Project Practice Guide
+
+> From 0 to 1: Building Real Projects
+
+
+Hello, I'm Yupi, a former Tencent full-stack developer, and an [AI programming blogger](https://space.bilibili.com/12890453) with 2 million followers across platforms. I'm also the creator of over 10 self-developed products, including [AI Navigation](https://ai.codefather.cn) and [Programming Navigation](https://www.codefather.cn).
+
+If you've already completed the 【Basic Essentials】section and successfully built your first web application, congratulations — you've taken the most crucial step in Vibe Coding!
+
+But I guess you might be wondering:
+
+"Building a simple to-do app feels rewarding, but it's still far from a usable product, right?"
+
+"I want to work on a more complex project, but I don't know where to start..."
+
+"Seeing those cool AI apps others have built, I want to try too, but I feel lost."
+
+Don't worry, these thoughts are completely normal. This section is specifically designed to address these concerns.
+
+
+
+## 1. Why Build Projects?
+
+Before answering "how to build projects," I want to talk about "why build projects."
+
+Many students, after completing basic tutorials, start frantically learning various tools and technologies but never complete a full project. The result? They learn a lot but feel like they can't do anything.
+
+**Building projects is the only true measure of learning.**
+
+More importantly, in the era of Vibe Coding, the barrier to building projects has never been lower. You don't need to master every technical detail; you just need to:
+
+1. Know what you want to build
+2. Be able to clearly articulate your requirements
+3. Use AI tools to implement them
+
+You've already learned these three points in the 【Basic Essentials】section. Now, it's time to apply these skills to more challenging projects.
+
+
+
+## 2. What Will This Section Cover?
+
+The core content of this section includes **the complete project development process** and **various types of project practices**.
+
+First, I'll introduce a proven standard development process, from idea to implementation, to make your project development more structured. This is the foundation of successful projects, and I strongly recommend starting with this part.
+
+Then, I'll guide you through hands-on projects of various types. Starting with simple personal tools, such as portfolio websites, to-do apps, and Markdown note-taking apps, these projects are practical and beginner-friendly. Next, we'll dive into popular AI applications, including chat assistants, writing assistants, and image generators, helping you master the core skills of AI app development. Following that, we'll tackle more complex full-stack applications, such as blog systems, Q&A communities, and online stores, learning how to handle front-end, back-end, and databases. We'll also cover WeChat Mini Program development, from development to launch.
+
+Once the project is complete, you'll learn how to deploy it. I'll teach you various deployment methods, from the latest AI auto-deployment to the popular Vercel one-click deployment, and even professional server deployment, making your project accessible to the world.
+
+Finally, if you're unsure what project to build, I've prepared 100 project ideas for you to choose from — there's something for everyone.
+
+Additionally, this section includes some extended content, such as enterprise project development processes, more enterprise-level AI project introductions, and Yupi's original project tutorials, which you can selectively learn based on your needs.
+
+
+
+## 3. How to Use This Section?
+
+You don't need to go through all the articles in this section; you can choose flexibly based on your situation.
+
+If you're a complete beginner, I recommend starting with 《Vibe Coding Project Development Process》 to understand the basic methods of project development. Then, begin practicing with personal tool development, selecting a simple project to work on. This gradual approach will prevent you from feeling overwhelmed.
+
+If you're particularly interested in a specific area, you can jump directly to the corresponding chapter. For example, if you're interested in AI applications, you can dive straight into AI app development; if you want to build Mini Programs, you can go directly to the Mini Program development content. Each article is relatively independent, so you can understand it without reading the preceding content.
+
+If you're unsure what project to build, you can start by browsing the Project Inspiration List, which contains 100 project ideas to spark your creativity.
+
+For those looking to dive deeper, after completing basic projects, you can continue with 《Enterprise Project Development Process》 to understand how real-world commercial projects are developed. Or follow [Yupi's Original Projects](https://www.codefather.cn/post/1797431216467001345), where you'll find complete video and text tutorials for building enterprise-level projects.
+
+
+
+## 4. What Will You Gain from This Section?
+
+Through the learning and practice in this section, you will be able to:
+
+1. Master a complete project development process
+2. Independently complete the journey from idea to product
+3. Build at least 2 ~ 3 showcase-worthy projects
+4. Understand how to use AI to solve real-world problems
+5. Establish confidence and methodology in project building
+
+More importantly, you'll discover: **Building projects can be so simple and fun!**
+
+
+
+## Final Words
+
+I know that seeing the words "Project Practice" might make some students feel a bit nervous. But trust me, with the help of Vibe Coding, building projects is really not as hard as you might think.
+
+Remember what I said in the 【Basic Essentials】section? Today, in 2025, is the easiest time in human history to learn programming. And the same goes for building projects.
+
+You don't need to be a technical expert, nor do you need to memorize all the code syntax. You just need:
+
+- An idea of what you want to build
+- The ability to clearly articulate your requirements
+- The willingness to experiment and iterate
+
+You already have these three things.
+
+So, are you ready? Let's embark on this exciting journey of project practice together!
+
+You've got this! 💪
+
+
+
+## Recommended Resources
+
+1）Yupi's AI Navigation Website: [Comprehensive AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2）Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guides, Q&A](https://www.codefather.cn)
+
+3）Programmer Interview Cheat Sheet: [High-Frequency Exam Points for Internships/Campus Recruitment/Social Recruitment, Enterprise Problem Analysis](https://www.mianshiya.com)
+
+4）Programmer Resume Builder: [Professional Templates, Rich Examples, Direct to Interviews](https://www.laoyujianli.com)
+
+5）1-on-1 Mock Interviews: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Land Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/20 项目实战/01 Vibe Coding 项目开发流程.md

@@ -0,0 +1,501 @@
+# Vibe Coding Project Development Process
+
+> The Complete Vibe Coding Workflow from Idea to Product
+
+
+
+Hello, I'm Yupi.
+
+In the quick start phase, we've already created a simple web application. That project was straightforward, and we could complete it by directly conversing with AI. But now, let's tackle a more practical question: How should we approach building a complete, commercial-grade project?
+
+Many beginners make the same mistake when starting with AI for projects: they open an AI coding tool and immediately start chatting with the AI to generate code. For small projects, this approach works fine. However, if you're aiming to build a full-fledged commercial project, this method will lead to problems. Initially, things might go smoothly, but soon you'll find the AI-generated code becoming increasingly messy and not what you intended. After endless modifications and mental battles, you might end up having to start over, wasting a lot of time.
+
+Why does this happen? Because you skipped the most crucial step — **planning**.
+
+In the era of Vibe Coding, although AI can help you write code, good planning remains the key to project success. In fact, planning is even more important now than ever before.
+
+Below, I'll share a proven 5-step development process to help you avoid these pitfalls.
+
+
+
+## Why Do We Need a Standard Process?
+
+In traditional programming, if your project planning is unclear, the worst-case scenario is that the code quality might suffer, but at least you know what you're writing.
+
+In Vibe Coding, however, the situation is entirely different. If your project planning is unclear, the AI will "freestyle," generating code that you neither understand nor need.
+
+AI is not magic; it's a highly powerful executor. You tell it what to do, and it does it. If you don't know what you want, the AI naturally can't help you create the ideal product.
+
+Therefore, a clear development process can help you:
+
+1. Clarify project goals and requirements
+2. Help the AI understand your intentions
+3. Prevent the project from spiraling out of control
+4. Improve development efficiency
+5. Create truly useful products
+
+
+
+## The Complete 5-Step Workflow
+
+This process is derived from my practical experience and incorporates insights from many excellent developers.
+
+It consists of 5 steps:
+
+1. Research
+2. Product Requirements Document (PRD)
+3. Technical Design Document (Tech Design)
+4. AI Agent Instructions (AGENTS.md)
+5. Implementation and Iteration (Build)
+
+Does it seem complicated? Don't worry, I'll break it down in the simplest way possible.
+
+![](https://pic.yupi.icu/1/vibecodingworkflow%E5%A4%A7.jpeg)
+
+
+
+## Step 1: Research
+
+After understanding the overall process, let's dive into the first step and explain how to approach each step.
+
+Before diving in, clarify: What exactly do I want to do? Why do I want to do it? Has anyone done something similar?
+
+Many beginners skip this step and jump straight into writing requirements. However, my experience shows that spending 30 minutes on research can save you from many detours.
+
+How to do it?
+
+1) Define Your Goal
+
+Start by asking yourself a few questions: What problem do I want to solve? Is this problem worth solving? What do I envision the final product to look like?
+
+For example, if you want to build a budgeting app, think clearly: Is it for personal use or others? What types of transactions will it primarily track? What core features are needed?
+
+
+
+2) Research Similar Products
+
+Look into whether there are similar products on the market. How do they approach it? What are their strengths and weaknesses?
+
+You can search for related apps or websites, explore open-source projects, or directly ask AI: "What are some good budgeting apps? What are their features?"
+
+This step is crucial as it helps you avoid reinventing the wheel and provides inspiration and references.
+
+
+
+3) Document Your Findings
+
+Record your ideas and research findings in a simple document, such as `RESEARCH.md`. This document doesn't need to be formal; think of it as a diary where you jot down your thoughts and discoveries.
+
+For example, suppose you want to build a budgeting app. After researching several budgeting apps on the market, you find their features too complex, and you only need a simple tool. You then document your thoughts, and `RESEARCH.md` might look like this:
+
+```markdown
+# Budgeting App Research
+
+## Goal
+Create a simple and easy-to-use personal budgeting app to help me develop a budgeting habit.
+
+## Research Findings
+- Existing budgeting apps are too complex
+- I only need to quickly record income and expenses
+- Monthly statistics would be helpful
+
+## Core Requirements
+1. Quickly add income/expense records
+2. View records by date
+3. View monthly statistics
+4. Local data storage
+```
+
+
+
+## Step 2: Product Requirements Document (PRD)
+
+After completing the research, you should have a clear understanding of what you want to build. Next, we need to organize these ideas into a formal document. Clearly define which features to include and which to exclude.
+
+This is the most critical step in the entire process. A well-written PRD helps the AI accurately understand your intentions and generate high-quality code.
+
+
+
+### How to Write a High-Quality PRD?
+
+My suggestion is to first write a simple requirement description yourself, then let the AI expand it into a complete PRD.
+
+For example, you could start with:
+
+```
+I want to build a budgeting app that can quickly record income and expenses and view monthly statistics.
+It should be simple and easy to use, without complex features.
+```
+
+Then send this to a large AI model like Gemini or DeepSeek:
+
+```
+Please expand this requirement into a complete Product Requirements Document (PRD),
+including:
+1. Product overview and target users
+2. Detailed feature list
+3. Feature priorities (MVP and future versions)
+4. UI design requirements
+5. Tech stack recommendations
+6. Non-functional requirements (performance, security, etc.)
+```
+
+The AI will generate a structured PRD, which you can then modify and refine based on your needs.
+
+
+
+### What Should a PRD Include?
+
+A complete PRD typically includes:
+
+- Product Overview (a brief description of what the product is)
+- Target Users (who will use this product)
+- Core Features (list all the features to be implemented)
+- Feature Priorities (which features are must-haves and which can be added later)
+- UI Design (a simple description of what the interface should look like)
+- Tech Stack Recommendations
+- Code Style and Architecture Patterns
+- Constraints and Edge Cases
+
+
+
+For example:
+
+```markdown
+# Budgeting App PRD
+
+## Product Overview
+A simple personal budgeting app to help users quickly record daily income and expenses.
+
+## Target Users
+Individuals who need to track their finances but don't want to use complex apps.
+
+## Core Features
+
+### Must-Have (MVP)
+1. Add Income/Expense Record
+   - Input amount
+   - Select type (income/expense)
+   - Select category (food, transportation, salary, etc.)
+   - Add notes (optional)
+   - Select date
+
+2. View Record List
+   - Display records in reverse chronological order
+   - Show amount, type, category, notes
+   - Allow record deletion
+
+3. Monthly Statistics
+   - Display total income for the month
+   - Display total expenses for the month
+   - Display monthly balance
+
+### Future Features
+- Data export
+- Chart visualization
+- Budget setting
+- Multi-account management
+
+## UI Design
+- Homepage: Display record list and add button
+- Add Page: Form input
+- Statistics Page: Display monthly data
+```
+
+
+
+## Step 3: Technical Design Document (Tech Design)
+
+With a clear PRD, we know what to build.
+
+The next step is to determine the technology stack to implement these features and the overall technical architecture.
+
+Create a `TECH_DESIGN.md` file that includes:
+
+- Tech Stack Selection (frontend, backend, database)
+- Project Structure (how the code is organized)
+- Data Model (what data needs to be stored)
+- Key Technical Points (technical challenges to be aware of)
+
+Continuing with the budgeting app example. Based on the PRD requirements, you decide to use React for the frontend due to its mature ecosystem and strong AI support. LocalStorage is sufficient for data storage since it's a personal tool and doesn't require a backend. The technical design document might look like this:
+
+```markdown
+# Budgeting App Technical Design
+
+## Tech Stack
+- Frontend: React + TypeScript + Vite
+- Styling: Tailwind CSS
+- Data Storage: LocalStorage
+- Deployment: Vercel
+
+## Project Structure
+
+src/
+  components/     # Components
+  pages/          # Pages
+  hooks/          # Custom Hooks
+  utils/          # Utility Functions
+  types/          # Type Definitions
+
+## Data Model
+
+### Transaction (Transaction Record)
+- id: string
+- amount: number
+- type: 'income' | 'expense'
+- category: string
+- note: string
+- date: string
+
+## Key Technical Points
+1. Use LocalStorage for data storage
+2. Use React Hooks for state management
+3. Use a date library for date handling (date-fns)
+```
+
+If you're unfamiliar with tech stack selection, you can ask AI: "What tech stack should I use for a budgeting app?"
+
+The AI will recommend suitable technologies.
+
+
+
+## Step 4: AI Agent Instructions (AGENTS.md)
+
+With the PRD and technical design ready, we now need to create a dedicated instruction file for the AI, specifying the rules it should follow in this project.
+
+You can name this file anything, such as `AI_RULES.md`, `INSTRUCTIONS.md`, etc. However, I recommend using `AGENTS.md` as it's an emerging community standard.
+
+[AGENTS.md](https://agents.md/) is a standardized file format used to guide AI coding tools on how to work. It's like a "work manual" for AI. This standard is promoted by companies like OpenAI, Anthropic, Google, and is currently used in over 80,000 open-source projects. Mainstream AI coding tools like Cursor, Windsurf, Claude Code, Gemini CLI, GitHub Copilot, etc., support automatic reading of AGENTS.md files.
+
+![](https://pic.yupi.icu/1/image-20260109161639565.png)
+
+What should AGENTS.md include?
+
+Generally, it includes project overview, development standards, testing requirements, code style, and notes.
+
+Continuing with the budgeting app example. Based on the previous PRD and technical design, you can create an AGENTS.md file like this:
+
+```markdown
+# Budgeting App AI Development Instructions
+
+## Project Overview
+This is a simple personal budgeting app built with React + TypeScript.
+
+## Development Standards
+- Use TypeScript for type safety
+- Use functional components + Hooks
+- Use Tailwind CSS for styling
+- Store all data in LocalStorage
+
+## Code Style
+- Use ESLint and Prettier
+- Component names in PascalCase
+- Function names in camelCase
+- Constants in UPPER_SNAKE_CASE
+
+## Testing Requirements
+- Manually test each feature after completion
+- Ensure data is correctly stored and retrieved
+- Test various edge cases
+
+## Notes
+- Keep the code simple, avoid over-engineering
+- Prioritize core features
+- Ensure mobile compatibility
+```
+
+With this file, the AI knows what rules to follow in this project, and the generated code will be more standardized and consistent.
+
+
+
+## Step 5: Implementation and Iteration (Build)
+
+The first 4 steps are preparatory work; now we can finally start coding!
+
+But don't write all the code at once; iterate step by step.
+
+
+
+### Iterative Strategy
+
+For complex projects, trying to achieve everything at once is unrealistic. I recommend a 3-step strategy:
+
+#### 1. Generate the Basic Framework
+
+First, let the AI generate the basic project framework. Don't worry about functionality yet; just ensure the project can run.
+
+```
+Based on the requirements in PRD.md, TECH_DESIGN.md, and AGENTS.md,
+initialize the project and create the basic project structure, including:
+1. Install necessary dependencies
+2. Create directory structure
+3. Configure the development environment
+4. Create basic routing and page framework
+Ensure the project can start normally.
+```
+
+For those with programming experience, there's an even simpler method. You can use scaffolding or project templates to quickly generate the basic framework.
+
+Scaffolding is like an automation tool that helps generate the basic project structure and configuration files, such as `create-react-app`, `create-vite`, etc.
+
+Project templates are pre-configured project examples that you can directly copy and use.
+
+Using these tools, you can set up the basic framework in minutes without starting from scratch.
+
+
+
+#### 2. Gradually Implement Core Features
+
+Once the framework is set up, you can start implementing specific features. The key here is to **get the core business process working and implement core features** first, rather than aiming for perfection from the start. Break the project into smaller features and implement them one by one.
+
+For example, the budgeting app can be broken down as follows:
+
+1. Implement the data model and storage
+2. Implement the add record feature
+3. Implement the record list display
+4. Implement the delete feature
+5. Implement monthly statistics
+
+For each feature, you can converse with the AI like this:
+
+```
+I want to implement the add record feature. Based on the requirements in PRD.md and TECH_DESIGN.md,
+create an AddTransaction component with form input and submission functionality.
+```
+
+After completing each feature, test it: Does the feature work correctly? Are there any bugs? Does the interface meet expectations?
+
+If there are issues, continue conversing with the AI to make modifications.
+
+
+
+#### 3. Optimize Implementation Details
+
+Once the core features are implemented, you can refine the details. **Without affecting functionality**, optimize performance, improve user experience, and beautify the interface.
+
+After refining the details, your MVP (Minimum Viable Product) is complete. You can then expand more features based on user feedback and your own ideas.
+
+Additionally, after getting the core features working, it's highly recommended to use Git for code management. Commit your code after completing each feature, so if issues arise later, you can quickly revert to a previous version.
+
+If you're not familiar with Git, check out [Yupi's Git Learning Path](https://www.codefather.cn/course/1789189862986850306/section/1789190804671012866), and you'll get the hang of it quickly.
+
+
+
+### Key Techniques to Avoid AI Going Out of Control
+
+In actual development, you might encounter these issues:
+
+- AI outputs irrelevant content
+- Implementing a new feature breaks an existing one
+- Fixing one bug introduces three more
+
+These issues are common, but there are solutions.
+
+#### 1. Modularize the Project
+
+Since AI's context is limited, as the project's information grows, it might forget previous information, leading to incorrect code generation. Therefore, we should isolate the project's features as much as possible, breaking a large project into smaller modules.
+
+For example, when developing an e-commerce system, you can isolate the product management module. When asking the AI to generate code for adding products, only provide the product table's field design and the business logic rules for adding products, without including unrelated features like payment settlement or user membership as context for the AI.
+
+
+
+#### 2. Limit Modification Scope
+
+AI-generated code isn't always controllable, and modifying feature A might inadvertently modify feature B. This issue is easily solved by limiting the modification scope in the prompt:
+
+```
+Only modify components/AddTransaction.tsx:
+1. Add form validation
+2. Keep existing styles and layout
+3. Don't modify other files
+```
+
+
+
+#### 3. Abstract and Reuse
+
+If we want the AI to generate two pages with identical layouts, it might rigidly copy the code from page A to generate page B. This is detrimental to maintaining large projects, as modifying page A might leave page B unchanged. Therefore, we need to proactively tell the AI:
+
+```
+Please abstract this page into a reusable component,
+allowing other pages to use it by passing different parameters.
+```
+
+This also reduces the overall codebase, easing the AI's context memory burden and making the generated results more accurate.
+
+
+
+#### 4. Version Control
+
+It's highly recommended to use Git for version control. Commit your code after correctly generating each feature, and manually compare the modified files after each AI-generated code update. If issues arise, you can quickly revert to a previous version, preventing code loss.
+
+```
+After completing each feature, commit the code:
+git add .
+git commit -m "Implemented add record feature"
+```
+
+Cursor comes with Git comparison functionality, making it easy to view code changes.
+
+
+
+#### 5. Manual Control
+
+Sometimes, the AI might get stuck in a loop due to a lack of key context or its own limitations. For example, repeatedly making the same mistakes or endlessly working on something useless. In such cases, manual intervention is necessary.
+
+Try manually specifying the context, changing the prompt to describe the problem from a different angle, clearing the conversation history and starting over, or even manually modifying part of the code to guide the AI in the right direction.
+
+This is where knowing some programming comes in handy. If you have some programming basics, you can better control and intervene in Vibe Coding. You can understand the AI-generated code, know where the issues lie, manually fix critical parts, and guide the AI in the right direction. This is why I recommend learning some programming basics alongside Vibe Coding.
+
+
+
+#### 6. Multi-AI Collaboration
+
+Different AI models excel at different tasks. If a single model can't complete the job properly, you can leverage other models to generate "methods and instructions for teaching the AI."
+
+For example, if GPT-generated code in Cursor has issues, you can:
+1. Copy the code and error message to Claude or Gemini
+2. Let it analyze the problem and provide modification suggestions
+3. Feed the modification suggestions back to GPT to modify the code
+
+This multi-model collaboration approach significantly increases the likelihood of solving problems.
+
+
+
+## Case Study - Unclear Requirements Leading to Project Failure
+
+In the project practice section of this Vibe Coding tutorial, I'll share many successful project cases for you to learn from. Here, I'll just give a negative example to show what can go wrong if you don't follow the process.
+
+Xiao Aba wanted to build a to-do list app. He directly opened an AI coding tool and entered:
+
+```
+Help me build a to-do list app
+```
+
+The AI generated an app that looked decent. But Xiao Aba soon found issues: no categorization, no priority settings, and he didn't like the interface style.
+
+So he continued the conversation:
+
+```
+Add categorization
+```
+
+The AI added categorization but messed up the layout. Xiao Aba then said:
+
+```
+Fix the layout
+```
+
+The AI fixed the layout but introduced new bugs. After endless modifications, the code became a mess, and Xiao Aba had to abandon the project.
+
+What went wrong?
+
+First, the initial requirements were unclear, so the AI could only generate code based on its own understanding. Second, each modification was "fixing one problem at a time" without overall planning. Finally, since there was no documentation, the AI had no idea about the project's overall design.
+
+If Xiao Aba had followed the 5-step process from the start, clearly writing the PRD and technical design, these issues wouldn't have occurred.
+
+
+
+## Practical Tips for More Accurate AI-Generated Code
+
+After mastering the complete development process

translations/en/Vibe Coding 零基础教程/20 项目实战/02 Vibe Coding 个人工具开发.md

@@ -0,0 +1,380 @@
+# Vibe Coding Personal Tool Development
+
+Hello, I'm Yupi.
+
+In the previous article, we learned the complete 5-step development process. Now, it's time to put this process into practice!
+
+In this article, I'll guide you through 5 practical personal tool projects: a personal portfolio website, a to-do app (advanced version), a Markdown note-taking app, a Pomodoro timer, and a weather query app.
+
+First, I need to clarify that this tutorial focuses more on guiding you through the thought process and project development workflow. The goal is to help you learn how to use Vibe Coding to develop projects, and you'll need to practice on your own. If you need more comprehensive Vibe Coding tutorials with images and videos, you can check out Yupi's original project实战 section.
+
+The projects I've selected are carefully chosen, practical, and actually usable—not just toys. They are moderately challenging, suitable for beginners to practice, neither too difficult nor too simple. Technically, they cover common scenarios such as front-end development, data storage, and API calls. After completing the basic version, you can continue to add new features. More importantly, these projects can be included in your portfolio to showcase your skills.
+
+For each project, I'll provide a complete development guide, including requirements analysis, technology selection, development steps, and expansion ideas. You can choose projects based on your interests; there's no need to complete them in order.
+
+## 1. Project Practice - Personal Portfolio Website
+
+A personal portfolio website is the best way to showcase your abilities. Whether you're job hunting, freelancing, or sharing your work on social media, a well-designed portfolio website can give you an edge. Moreover, this project itself becomes your first portfolio piece—pretty interesting, right?
+
+The website should include several sections: personal introduction (name, avatar, bio, contact information), skills showcase (technologies you know), and project showcase (projects you've done, including screenshots, descriptions, and links). The interface should be responsive, displaying properly on both mobile and desktop.
+
+For technology selection, we'll use React + TypeScript + Vite as the front-end framework, Tailwind CSS for styling, and deploy it on Vercel. This tech stack is modern and currently the most popular front-end development solution.
+
+![](https://pic.yupi.icu/1/demoweb1.png)
+
+### Development Steps
+
+1) Requirements Research
+
+Before developing any project, start with requirements research. You can look at other people's portfolio websites for inspiration, such as searching for "developer portfolio examples" online. Record the design styles and features you like, which can serve as references.
+
+2) Write PRD Document
+
+After gathering inspiration, write a PRD document. Create a `PRD.md` file to clearly outline what you want to showcase. Here's a reference example:
+
+```markdown
+# Personal Portfolio Website PRD
+
+## Core Features
+1. Homepage: Large title + bio + avatar
+2. About Me: Detailed introduction + skills list
+3. Project Showcase: Project card list, each card includes project name, screenshot, brief description, tech stack, project link
+4. Contact: Email, GitHub, social media links
+
+## Design Requirements
+- Clean, modern design style
+- Dark theme
+- Smooth scrolling animations
+- Mobile-friendly
+```
+
+This document doesn't need to be overly complex; just clearly state the core features and design requirements.
+
+3) Write Technical Design Document
+
+Next, write the technical design document `TECH_DESIGN.md`. Here, determine the specific technical solutions:
+
+```markdown
+# Technical Design
+
+## Tech Stack
+- React + TypeScript + Vite
+- Tailwind CSS
+- React Router (if multi-page is needed)
+- Framer Motion (for animations)
+
+## Project Structure
+src/
+  components/
+    Header.tsx
+    Hero.tsx
+    About.tsx
+    Projects.tsx
+    Contact.tsx
+    Footer.tsx
+  data/
+    projects.ts
+    skills.ts
+  App.tsx
+  main.tsx
+
+## Data Management
+- Project and skill data stored in TypeScript files
+- Use arrays for storage, facilitating future additions and modifications
+```
+
+This document helps the AI understand the technologies you'll use and the project structure.
+
+4) Write AGENTS.md File
+
+Then, create the `AGENTS.md` file to inform the AI about development standards:
+
+```markdown
+# Personal Portfolio Website Development Instructions
+
+## Project Overview
+A personal portfolio website developed using React + TypeScript + Tailwind CSS.
+
+## Development Standards
+- Use functional components + Hooks
+- Write styles with Tailwind CSS
+- Components should be reusable
+- Code should be commented
+
+## Design Requirements
+- Dark theme (background #0a0a0a, text #ffffff)
+- Use gradients as accent colors
+- Add smooth scrolling animations
+- Ensure mobile-friendliness
+
+## Notes
+- Keep the design clean; avoid over-designing
+- Optimize performance: use lazy loading for images
+- Ensure all links are clickable
+```
+
+This file provides development standards for the AI, letting it know how to write the code and the design style.
+
+5) Start Development
+
+With these three documents, you can start development. Open an AI code editor like Cursor and begin interacting with the AI.
+
+The first prompt is to initialize the project:
+
+```
+Based on the requirements in PRD.md, TECH_DESIGN.md, and AGENTS.md, initialize a React + TypeScript + Vite project and install Tailwind CSS.
+```
+
+This prompt is simple but contains all the necessary information. The AI will read these three documents and create the project structure, install dependencies, and configure Tailwind CSS as required.
+
+Then, implement each component step by step. For example, create the Hero component:
+
+```
+Create a Hero component containing a large title, bio, and avatar. Use Tailwind CSS to implement a dark theme and gradient effects.
+```
+
+This prompt tells the AI what component to create, what content to include, and what technology to use. The AI will generate the complete component code.
+
+Next, create the Projects component:
+
+```
+Create a Projects component to display a list of projects. Each project card should include a screenshot, title, description, and tech stack tags.
+```
+
+Continue step by step until the entire website is complete. Preview the effect in the browser after each component is completed to ensure it meets expectations.
+
+6) Deploy Online
+
+Once development is complete, deploy it online. The deployment process is simple:
+
+- Push the code to GitHub
+- Log in to Vercel, import the GitHub repository
+- Click deploy, wait for completion
+- Get your website link
+
+Vercel will automatically detect your project type and configure the build commands, making it very intelligent. After deployment, you'll have a website link that you can share with others.
+
+### Expansion Ideas
+
+After completing the basic version, you can continue to expand features. For example, add a blog feature to share your learning experiences; add dark/light theme switching to let users choose their preferred theme; support multiple languages to attract international users; add visitor statistics to understand website traffic; or even add a guestbook feature to allow visitors to leave messages.
+
+## 2. Project Practice - To-Do App (Advanced Version)
+
+After completing the portfolio website, let's tackle a more complex project. In the quick start section, we built a simple to-do app with basic add and delete functions. Now, let's create a more powerful version to learn how to handle more complex business logic.
+
+This advanced version has much richer features. When adding a to-do item, besides the title, you can also set a description, due date, priority, and category. When viewing the list, you can filter by category, priority, and status, and use a search function to quickly find specific to-do items. Editing and deleting are also supported. Data is saved in LocalStorage, so it won't be lost on page refresh. Additionally, there's a statistics feature to display completion rates and to-do counts.
+
+For technology selection, we'll use React + TypeScript + Vite for the front-end, Zustand (a lightweight state management library, much simpler than Redux) for state management, Tailwind CSS for styling, date-fns for date handling, and LocalStorage for data storage.
+
+![](https://pic.yupi.icu/1/demoweb2.png)
+
+### Development Steps
+
+1) Define Data Model
+
+The first step in development is to define the data model. You need to clearly outline the fields for a to-do item: id (unique identifier), title (title), description (description), category (category), priority (priority: low, medium, high), dueDate (due date), completed (whether completed), createdAt (creation time). Defining these fields clearly will make subsequent development smoother.
+
+2) Develop by Functional Modules
+
+Then, develop by functional modules. The suggested order is: first implement the data storage layer, encapsulating LocalStorage read/write operations; then implement state management, creating a global store with Zustand; next, implement the add function; then implement list display and filtering; finally, implement search and statistics. This step-by-step approach ensures each module is tested and working correctly.
+
+When interacting with the AI, you can say:
+
+```
+Create a Todo data model and LocalStorage utility functions.
+```
+
+The AI will define the data structure and encapsulate storage operations. This prompt is simple, but the AI knows what to do because it references your PRD and technical design documents.
+
+Then say:
+
+```
+Use Zustand to create global state management, including methods for adding, deleting, updating, and filtering.
+```
+
+The AI will create a complete store with all the necessary methods. Zustand is a lightweight state management library, much simpler than Redux but powerful enough.
+
+Next, say:
+
+```
+Create an AddTodo component containing form input and validation.
+```
+
+The AI will implement the interface and logic for the add function, including input fields, dropdown selections, and date pickers. Test each function after completion to ensure it works correctly.
+
+### Key Technical Points
+
+This project has several key technical points to note. First is state management, as there are many features, using Zustand to manage global state will be much more convenient. You can let the AI help you create a store containing methods for adding, deleting, updating, and filtering.
+
+The filtering function should support multi-condition filtering, such as filtering by category and priority simultaneously. The search function should support fuzzy search, finding keywords in titles and descriptions. These logics can be implemented by the AI; you just need to specify the requirements.
+
+### Expansion Ideas
+
+After completing the basic version, you can continue to expand features. For example, add tagging functionality to allow multiple tags per to-do item; support sub-tasks, breaking a large task into smaller ones; add reminder functionality to automatically remind before deadlines; support data export to CSV; or even use Firebase for cloud synchronization.
+
+## 3. Project Practice - Markdown Note-Taking App
+
+After mastering state management and data filtering, let's learn how to handle text editing and real-time preview. Markdown is the most commonly used document format by programmers, and building a Markdown note-taking app will help you learn how to handle text editing, real-time preview, and other functionalities.
+
+This project aims to implement a complete Markdown note-taking app. Users can create notes, input titles and content. The interface adopts a split-screen layout, with the editor on the left and real-time preview on the right. The left side also displays a list of notes, supporting search. Data is saved in LocalStorage, and note deletion is supported. Code blocks should have syntax highlighting for a more professional look.
+
+For technology selection, we'll use React + TypeScript + Vite for the front-end, react-markdown for Markdown parsing, react-syntax-highlighter for code highlighting, Tailwind CSS for styling, and LocalStorage for data storage.
+
+![](https://pic.yupi.icu/1/demoweb3.png)
+
+### Development Steps
+
+1) Implement Basic Layout
+
+The first step in development is to implement the basic layout, creating a split-screen layout with the editor on the left and the preview area on the right. This layout is easily achieved using Tailwind CSS's Flex or Grid.
+
+Tell the AI:
+
+```
+Create a split-screen layout with the Markdown editor (large text box) on the left and the preview area on the right. Use Tailwind CSS to implement a responsive layout.
+```
+
+The AI will create a beautiful split-screen layout, displaying as left-right on desktop and top-bottom on mobile.
+
+2) Integrate Markdown Parsing
+
+Then, integrate Markdown parsing. Using the react-markdown library, you can easily convert Markdown text to HTML. Just pass the text to this component, and it will render automatically.
+
+Tell the AI:
+
+```
+Use react-markdown to convert Markdown text to HTML and display the rendered result in the preview area.
+```
+
+This prompt is concise, but the AI knows what to do. It will install the react-markdown library, import the component, and use it in the preview area.
+
+3) Implement Real-Time Preview
+
+Next, implement real-time preview. The key to this feature is listening to changes in the editor's input and updating the preview area in real time. When the user edits on the left, the right side should display the rendered result synchronously.
+
+Tell the AI:
+
+```
+Listen to changes in the editor's input and update the preview area in real time. When the user edits on the left, the right side should display the rendered Markdown result synchronously.
+```
+
+This feature is easily implemented using React's state management. The AI will store the editor's content in state and pass it to the preview component, automatically updating the preview whenever the content changes.
+
+4) Add Code Highlighting
+
+Code highlighting is also important, making code blocks look more professional. Tell the AI:
+
+```
+Configure react-syntax-highlighter to support syntax highlighting for code blocks. Support multiple programming languages like JavaScript, Python, Java, etc.
+```
+
+The AI will configure react-syntax-highlighter, rendering code blocks with syntax highlighting, displaying different syntax elements in different colors.
+
+5) Add Note Management Functionality
+
+Finally, add note management functionality. Tell the AI:
+
+```
+Implement note management functionality:
+- Add a note list on the left, displaying titles of all notes
+- Clicking a note switches to that note
+- Support creating new notes, deleting notes
+- Support searching notes (by title)
+- Data saved in LocalStorage
+```
+
+This prompt includes all the functional requirements, and the AI will implement them all at once.
+
+### Key Technical Points
+
+The key to this project is implementing real-time Markdown preview. When the user edits on the left, the right side should display the rendered result in real time. This feature is easily achieved using the react-markdown library.
+
+Code highlighting is also important; you can let the AI configure react-syntax-highlighter to support syntax highlighting for multiple programming languages. For better user experience, let the AI add optimizations like inserting spaces with Tab instead of switching focus, supporting shortcuts like Ctrl+B for bold, and auto-saving drafts.
+
+### Expansion Ideas
+
+After completing the basic version, you can continue to expand features. For example, support image uploads to allow inserting images into notes; add table of contents navigation, automatically generating article outlines; support exporting to PDF for easy sharing; add theme switching, providing multiple editor themes; support multiple Markdown styles like GitHub style, standard style, etc.
+
+## 4. Project Practice - Pomodoro Timer
+
+The previous projects focused on data display and management. Now, let's tackle a project involving timers and notifications. The Pomodoro Technique is a popular time management method, and building a Pomodoro app will help you learn how to handle timers, notifications, and other functionalities.
+
+The Pomodoro Technique involves working for 25 minutes, then resting for 5 minutes, cycling through this pattern. This app will implement a countdown function, supporting start, pause, and reset. Users can customize work and rest durations. When time is up, notifications will be sent, and a sound can be played. Additionally, there's a statistics feature to record the number of completed Pomodoros, helping users understand their work efficiency.
+
+For technology selection, we'll use React + TypeScript + Vite for the front-end, Tailwind CSS for styling, the browser's Notification API for notifications, and LocalStorage for data storage.
+
+![](https://pic.yupi.icu/1/demoweb4.png)
+
+### Development Steps
+
+1) Implement Countdown Logic
+
+The core of development is implementing the countdown logic. Tell the AI:
+
+```
+Implement Pomodoro countdown functionality:
+- Default work 25 minutes, rest 5 minutes
+- Support start, pause, reset
+- Display time format as MM:SS
+- Trigger reminder when countdown ends
+```
+
+This prompt clearly states what functionality to implement. The AI will use JavaScript's setInterval to implement the countdown, decrementing by 1 every second, triggering a reminder when it reaches 0.
+
+2) Implement Notification Functionality
+
+Then, implement the notification functionality. The browser's Notification API can send system notifications but requires user permission first. Tell the AI:
+
+```
+Implement browser notification functionality:
+- Request notification permission when the page loads
+- Send notification when countdown ends
+- Notification title is "Pomodoro", content is "Time's up, take a break!"
+```
+
+This prompt specifies the notification trigger timing and content. The AI will first check if the browser supports notifications, request permission, and send notifications when time is up.
+
+3) Add Sound Effects
+
+You can also add sound effects. Play a sound when time is up, so users know even if they're not looking at the screen. Tell the AI:
+
+```
+Add sound effect functionality:
+- Prepare a sound file (place it in the public directory)
+- Play the sound when countdown ends
+```
+
+The AI will use the Audio object to play the sound file.
+
+4) Add Statistics Functionality
+
+Finally, add statistics functionality. Tell the AI:
+
+```
+Implement statistics functionality:
+- Record the number of completed Pomodoros
+- Display today's completed count, this week's completed count
+- Data saved in LocalStorage
+```
+
+This way, users can see their work efficiency and feel more accomplished.
+
+### Key Technical Points
+
+The core of this project is the countdown logic and notification functionality. The countdown must be accurate, decrementing by 1 every second without errors. The notification functionality requires user permission first; if denied, provide a friendly prompt.
+
+For better user experience, update the page title during the countdown, so users can see the remaining time even when switching tabs. You can also add sound effects, playing a sound when time is up.
+
+### Expansion Ideas
+
+After completing the basic version, you can continue to expand features. For example, add long break functionality, resting for 15 minutes after 4 Pomodoros; record daily Pomodoro counts, generating statistical charts; add task lists, associating Pomodoros with specific tasks; visualize data, displaying work efficiency with charts; or even support background music to enhance the work atmosphere.
+
+## 5. Project Practice - Weather Query App
+
+Finally, let's tackle our first project requiring external API calls. This project will help you learn how to interact with backend services, handle asynchronous requests, and errors.
+
+This project aims to implement weather query functionality. Users input a city name to query the current weather, displaying temperature, weather conditions, humidity, wind speed, etc. It also shows the weather forecast for the next few days. It can automatically fetch the user's location and display the weather. Frequently used cities can be favorited for quick queries.
+
+![](https://pic.yupi.icu/1/demoweb5.png)
+
+For technology selection

translations/en/Vibe Coding 零基础教程/20 项目实战/03 Vibe Coding AI 应用开发.md

@@ -0,0 +1,406 @@
+# Vibe Coding AI Application Development
+
+Hello, I'm Yupi.
+
+Today, AI is no longer a distant high-tech concept but a tool that every developer can easily use. By calling AI APIs, you can quickly create various intelligent applications, such as chat assistants, writing assistants, image generators, and more. These projects are not only fun but also highly practical. You can use them directly or showcase them as portfolio projects.
+
+In this article, I will guide you through building 4 popular AI applications: an AI Chat Assistant, a Smart Writing Assistant, an AI Image Generator, and a Speech Recognition App.
+
+Before we start, it's important to note that this tutorial focuses more on guiding you through the thought process and project development workflow. The goal is to help you learn how to develop projects using Vibe Coding. You will need to practice on your own. If you need more comprehensive Vibe Coding tutorials with images and videos, you can check out Yupi's original project实战 section.
+
+## 1. Basics of AI Application Development
+
+Before diving into the projects, let's first understand the basics of AI application development.
+
+An AI application leverages AI capabilities (such as text generation, image generation, speech recognition, etc.) to solve real-world problems. You don't need to train AI models; you just need to call existing AI APIs. It's like driving a car—you don't need to know how the engine works; you just need to know how to drive.
+
+Currently, there are many mainstream AI API services. For text generation, there's OpenAI's GPT-4, Anthropic's Claude, Google's Gemini, and domestic models like Tongyi Qianwen, Wenxin Yiyan, and Zhipu AI. For image generation, there's DALL-E 3, Midjourney, Stable Diffusion, and domestic models like Wenxin Yige. For speech recognition, there's OpenAI's Whisper, Google Speech-to-Text, and iFlytek's speech recognition.
+
+The development process for AI applications is similar to that of regular applications, with the added step of calling AI APIs. The overall workflow is: User Input → Process Input → Call AI API → Process AI Response → Display Results.
+
+Sounds simple, right? Indeed, the barrier to entry for AI application development is now very low.
+
+![](https://pic.yupi.icu/1/aiapp-workflow%E5%A4%A7.jpeg)
+
+When developing AI applications, there are a few things to keep in mind.
+
+First, API Key security: Do not expose your API Key in front-end code, as others can misuse it. Second, cost control: AI APIs charge based on usage, so manage costs to avoid waste. Third, error handling: API calls can fail, so handle errors gracefully and provide user-friendly prompts. Lastly, user experience: AI responses may take a few seconds, so provide loading indicators to let users know processing is underway.
+
+## 2. Project实战 - AI Chat Assistant
+
+The AI Chat Assistant is the most basic yet practical AI application. Through this project, you will learn how to quickly develop a complete AI conversation application using Vibe Coding.
+
+This project aims to implement a complete chat interface where users can input questions, and the AI provides answers. It should support multi-turn conversations, allowing the AI to remember previous content for coherent dialogue. For a better user experience, the AI's responses should be displayed character by character rather than all at once, known as streaming output. Conversation history should be saved locally, so it doesn't disappear on page refresh. Additionally, there should be a clear conversation function to start new topics easily.
+
+![](https://pic.yupi.icu/1/demoweb6.png)
+
+For the tech stack, we'll use React + TypeScript + Vite as the front-end framework and Tailwind CSS for styling. AI capabilities will be implemented by calling large model APIs, conversation history will be saved using LocalStorage, and AI responses will be rendered using react-markdown to support features like code highlighting.
+
+### Development Steps
+
+1) Preparation
+
+The first step in development is preparation. You need to obtain an API Key to call the AI model. Visit the [Zhipu AI Open Platform](https://bigmodel.cn), enter the user console, and click on API Key to get one. Zhipu AI's GLM model performs well and offers free quotas, making it suitable for learning.
+
+2) Write the Requirements Document
+
+With the API Key, you can start writing the requirements document. Create a `PRD.md` file to clearly define what you want to achieve:
+
+```markdown
+# AI Chat Assistant PRD
+
+## Core Features
+1. Users can input questions, and the AI provides answers
+2. Supports multi-turn conversations; the AI remembers previous dialogue
+3. AI responses are displayed character by character, not all at once
+4. Conversation history is saved locally and persists on page refresh
+5. Users can clear conversations to start new topics
+6. AI responses support Markdown formatting, including code highlighting
+
+## UI Requirements
+- Chat interface similar to WeChat
+- User messages on the right, AI messages on the left
+- Input box and send button at the bottom
+- Clean and modern design style
+```
+
+This document clearly outlines the functionality and interface requirements.
+
+3) Write the Technical Design Document
+
+Next, write the technical design document `TECH_DESIGN.md`:
+
+```markdown
+# Technical Design
+
+## Tech Stack
+- React + TypeScript + Vite
+- Tailwind CSS
+- Zhipu AI API
+- LocalStorage for conversation history
+- react-markdown for Markdown rendering
+
+## Data Structure
+- Message: role (user or assistant), content, timestamp
+- Conversation history stored in LocalStorage
+
+## API Calls
+- Use Zhipu AI Chat Completions API
+- Enable stream mode for streaming output
+- Store API Key in environment variables
+```
+
+This document specifies the technologies used, the data structure, and how API calls will be made.
+
+4) Write the AGENTS.md File
+
+Next, create an `AGENTS.md` file to outline development guidelines for the AI:
+
+```markdown
+# AI Chat Assistant Development Instructions
+
+## Project Overview
+An AI Chat Assistant developed using React + TypeScript, leveraging Zhipu AI API for dialogue functionality.
+
+## Development Guidelines
+- Use TypeScript for type safety
+- Use Tailwind CSS for styling
+- Read API Key from environment variables; do not hardcode
+- Provide friendly error messages
+
+## Feature Requirements
+- Implement streaming output; AI responses should be displayed character by character
+- Support multi-turn conversations; send historical messages to the API
+- Save conversation history in LocalStorage
+- Support Markdown rendering and code highlighting
+
+## Notes
+- Handle API call failures
+- Provide clear loading indicators
+- Disable the input box during sending to prevent duplicate submissions
+```
+
+This file serves as the development guideline for the AI, informing it how the code should be written.
+
+5) Develop with AI Dialogue
+
+With these three documents in place, you can start developing with AI dialogue. Open Cursor and place these three documents in the project root directory.
+
+The first step is to initialize the project:
+
+```
+Please initialize a React + TypeScript + Vite project based on the requirements in PRD.md, TECH_DESIGN.md, and AGENTS.md, and install necessary dependencies: Tailwind CSS, react-markdown, react-syntax-highlighter.
+```
+
+This prompt tells the AI what project to create and which dependencies to install. The AI will read these three documents and create the project structure, install dependencies, and configure Tailwind CSS accordingly.
+
+The second step is to create data types and API wrappers:
+
+```
+Create a types.ts file to define the Message type. Then create an api.ts file to wrap the Zhipu AI API calls, supporting streaming output and reading parameters from environment variables.
+```
+
+This step lays the foundation for subsequent development by encapsulating data structures and API calls, making them easier to use later.
+
+The third step is to implement the chat interface:
+
+```
+Create a ChatInterface component to implement the chat interface. Requirements:
+1. Display the message list at the top, with user messages on the right and AI messages on the left
+2. Include an input box and send button at the bottom
+3. Use Tailwind CSS to achieve a WeChat-like chat interface style
+4. Messages should support Markdown rendering
+```
+
+This prompt specifies the layout and styling requirements for the interface. The AI will create a complete chat interface component.
+
+The fourth step is to implement the conversation functionality:
+
+```
+Implement the message sending functionality:
+1. Add user messages to the message list after input
+2. Call the API to get the AI's response
+3. Use streaming output to display the AI's response character by character
+4. Send historical messages to the API to enable multi-turn conversations
+5. Disable the input box during loading and display "Thinking..."
+```
+
+This prompt includes all the requirements for the conversation functionality. Streaming output is key, as it makes the AI's response appear character by character like typing, enhancing the user experience. Multi-turn conversations are also important; sending previous dialogue history to the API allows the AI to remember earlier content.
+
+The fifth step is to add data persistence:
+
+```
+Use LocalStorage to save conversation history:
+1. Automatically save after each conversation update
+2. Read historical records on page load
+3. Add a "Clear Conversation" button to delete history
+```
+
+This ensures that users' previous conversations remain intact even after refreshing the page.
+
+The sixth step is to optimize the user experience:
+
+```
+Optimize the user experience:
+1. Automatically scroll to the bottom when new messages appear
+2. Add a copy button to easily copy the AI's response
+3. Enable syntax highlighting for code blocks
+4. Display friendly error messages when API calls fail
+```
+
+These small details can significantly enhance the user experience.
+
+### Development Tips
+
+During development, there are a few tips to help you work more efficiently. First, don't ask the AI to implement all features at once. Break it down into smaller steps, testing each step as you go. This makes it easier to locate and fix issues if they arise.
+
+Second, provide sufficient context when conversing with the AI. Clearly tell it what functionality to implement, specific requirements, and guidelines to follow. The clearer the context, the higher the quality of the code generated by the AI.
+
+If you encounter issues with the code, share the complete error message with the AI so it can analyze and fix the problem. Don't just say "the code has an error"; paste the specific error message.
+
+### Extension Ideas
+
+Once the basic version is complete, you can extend its functionality.
+
+For example, add system prompt settings to let the AI play different roles (e.g., programming assistant, writing assistant, psychological counselor); support multiple conversation sessions to handle multiple topics simultaneously; add voice input functionality to converse with the AI via voice; integrate image recognition to allow the AI to answer questions based on images; support exporting conversation history to save important dialogues.
+
+## 3. Project实战 - Smart Writing Assistant
+
+After mastering the basic workflow of AI dialogue, let's build a more professional application—the Smart Writing Assistant. Writing assistants are one of the most practical use cases for AI. Through this project, you will learn how to use prompt engineering to have the AI complete different writing tasks.
+
+This project will support various writing modes, such as article continuation, content rewriting, copywriting generation, email drafting, and more. Users can adjust parameters like creativity level and output length to control the AI's generation results. Additionally, users can optimize text grammar and expression with a single click to make the text more professional. For convenience, multiple versions can be generated at once, allowing users to choose the most satisfactory one. Generated content should be saved to a history log for easy review and management.
+
+![](https://pic.yupi.icu/1/demoweb7.png)
+
+The tech stack is similar to the chat assistant, using React + TypeScript + Vite with Tailwind CSS. The core functionality still relies on calling the Zhipu AI API, with data saved in LocalStorage.
+
+### Development Steps
+
+1) Design Prompt Templates
+
+The first step in development is to design prompt templates. Before writing code, design prompts for different writing tasks. Create a `prompts.md` file to define prompts for various writing modes:
+
+```markdown
+# Writing Assistant Prompt Templates
+
+## Article Continuation
+Please continue the following article, maintaining consistent style and coherent content:
+[User input]
+
+## Content Rewriting
+Please rewrite the following content to make it more fluent and professional:
+[User input]
+
+## Content Expansion
+Please expand the following content by adding more details and examples:
+[User input]
+
+## Content Summarization
+Please summarize the following content, extracting key points:
+[User input]
+
+## Email Drafting
+Please write a [formal/friendly] email with the subject: [Subject]
+
+## Copywriting Generation
+Please write a [style] marketing copy for [Product Name]
+```
+
+Prompts are the core of AI applications. Good prompts lead to better AI-generated results. A good prompt typically includes three elements: a clear task description, sufficient context, and clear output format requirements.
+
+![](https://pic.yupi.icu/1/promptcompare%E5%A4%A7.jpeg)
+
+For example, if you want the AI to write an article, don't just say "help me write an article." Instead, specify the topic, target audience, word count, and content to include. For example:
+
+```markdown
+Please write a popular science article about AI programming, targeting beginners, with easy-to-understand language and plenty of examples. The article should be 800-1000 words and cover what AI programming is, why to learn it, and how to get started.
+```
+
+This way, the AI knows exactly what to write.
+
+If you're rewriting content, provide context for the AI. For example:
+
+```markdown
+This is the opening paragraph of a technical blog. Please rewrite it to be more engaging while maintaining professionalism.
+```
+
+This helps the AI understand the direction to take.
+
+Specifying the output format is also important. If you want the AI to summarize an article, clearly state the format:
+
+```markdown
+Please summarize this article in the following format:
+1. Key points (3-5)
+2. Key data (if any)
+3. Conclusion (one sentence)
+```
+
+This ensures the generated result is structured and meets your needs.
+
+Sometimes, providing examples can yield better results. For instance, if you want the AI to write marketing copy, provide a few examples for it to reference. This approach, known as Few-shot Learning, is effective in many scenarios.
+
+2) Write the Requirements Document
+
+After designing the prompt templates, write the requirements document. Create a `PRD.md` file:
+
+```markdown
+# Smart Writing Assistant PRD
+
+## Core Features
+1. Split layout with input on the left and generated results on the right
+2. Supports 6 writing modes: continuation, rewriting, expansion, summarization, email, and copywriting
+3. Allows adjusting creativity level (temperature) and output length
+4. Generated content should be displayed via streaming
+5. Includes an "Optimize Prompt" button for the AI to refine user descriptions
+6. Saves generation history
+
+## UI Requirements
+- Top: Large title
+- Input Area: Large text box (multi-line)
+- Parameter Area: Size selection, style selection
+- Button Area: Optimize Prompt, Generate Content
+- Display Area: Shows generated content + Copy button
+- Sidebar: History log
+```
+
+3) Develop with AI Dialogue
+
+With the documents ready, you can start developing with AI dialogue.
+
+First, create the basic interface:
+
+```
+Please create the Smart Writing Assistant interface based on PRD.md:
+1. Split layout
+2. Left: Mode selection dropdown + Input text box + Generate button
+3. Right: Display generated content
+4. Use Tailwind CSS for a visually appealing interface
+```
+
+Second, implement the prompt templates:
+
+```
+Create a promptTemplates.ts file to implement prompt functions for the 6 writing modes based on the templates in prompts.md. Each function should take user input and return a complete prompt.
+```
+
+This encapsulates the prompt logic, with different writing modes using different prompts.
+
+Third, implement the content generation functionality:
+
+```
+Implement the content generation functionality:
+1. User selects a mode, inputs content, and clicks Generate
+2. Generate the corresponding prompt based on the selected mode
+3. Call the Zhipu AI API with streaming output
+4. Display the generated content in real-time on the right
+5. Support Markdown rendering
+```
+
+Fourth, add parameter adjustments:
+
+```
+Add an advanced settings panel:
+1. Creativity slider (temperature: 0-1)
+2. Output length slider (max_tokens: 100-2000)
+3. Pass these parameters to the API call
+4. Allow collapsing/expanding advanced settings
+```
+
+The temperature value affects the creativity of the output.
+
+- 0-0.3: Conservative, suitable for factual content
+- 0.4-0.7: Balanced, suitable for most scenarios
+- 0.8-1.0: Highly creative, suitable for creative writing
+
+Fifth, add history logging:
+
+```
+Implement the history logging functionality:
+1. Save each generation to LocalStorage
+2. Save content: Prompt, generated result, generation time
+3. Display the history log list on the left
+4. Clicking a history log allows viewing previous content
+5. Support deleting history logs
+```
+
+### Prompt Optimization Tips
+
+If you're unsure whether your prompt is good enough, let the AI optimize it for you. For example, you can ask:
+
+```
+I want the AI to help me rewrite an article to make it more professional. My current prompt is: "Please rewrite this paragraph." Please optimize this prompt to help the AI generate better results.
+```
+
+The AI will provide a more detailed and effective prompt, such as:
+
+```markdown
+This is the opening paragraph of a technical blog. Please rewrite it to be more engaging while maintaining professionalism. Requirements:
+1. Use more vivid language
+2. Maintain technical accuracy
+3. Keep the word count around 200
+```
+
+### Extension Ideas
+
+Once the basic version is complete, you can extend its functionality. For example, add more writing templates to support different types of writing like essays, reports, and novels; allow custom prompt templates for users to create their own; add multi-language translation functionality for one-click translation; implement batch generation to produce multiple versions for selection; add text comparison functionality to compare differences between versions.
+
+## 4. Project实战 - AI Image Generator
+
+Moving from text generation to image generation, let's build an even cooler AI application. AI image generation is one of the most exciting AI applications, allowing you to generate stunning images with simple text descriptions. This project will teach you how to call image generation APIs.
+
+The core of this project is text-to-image generation. Users input a description, select size and style, and click Generate to get an image. To help users write better prompts, include an "Optimize Prompt" feature where the AI expands simple descriptions into detailed prompts. Generated images should be saved to a history log and support downloading.
+
+![](https://pic.yupi.icu/1/demoweb8.png)
+
+The tech stack is similar to previous projects, primarily calling image generation APIs. Zhipu AI also provides image generation capabilities, and you can use the same API Key. [Visit the official site to get it](https://bigmodel.cn).
+
+### Development Steps
+
+1) Understand Image Generation APIs
+
+The first step in development is to understand image generation APIs. The main parameters for image generation APIs include:
+
+- prompt: Image description (most important)
+- size: Image size (e.g., 1024x1024)
+- quality: Quality (standard or high)
+- style: Style

translations/en/Vibe Coding 零基础教程/20 项目实战/04 Vibe Coding 全栈应用开发.md

@@ -0,0 +1,414 @@
+# Vibe Coding Full Stack Application Development
+
+Hello, I'm Yupi.
+
+In this article, I'll guide you through three complete full-stack projects: a personal blog system, a simple Q&A community, and an online store (Mini version).
+
+What is a full-stack application?
+
+Simply put, it's a complete application that includes a front-end interface, a back-end service, and database storage. Users interact with the front-end, data is processed by the back-end, and ultimately stored in the database. These projects will teach you how to develop both front-end and back-end using the Vibe Coding approach, handling real-world scenarios like user authentication and database operations.
+
+It's important to note that this tutorial focuses more on guiding you through the thought process and project development workflow, aiming to help you learn how to use Vibe Coding for project development. You'll need to practice on your own. If you need more comprehensive Vibe Coding tutorials with images and videos, you can check out Yupi's original project实战 section.
+
+## 1. Full Stack Development Basics
+
+Before starting the projects, let's first understand the basic concepts of full-stack development.
+
+Full-stack development consists of three parts: front-end (the interface users see), back-end (handling business logic), and database (storing data).
+
+The front-end is responsible for displaying data and receiving user input, the back-end handles requests and business logic, and the database is responsible for persistent storage. The three communicate through API interfaces.
+
+![](https://pic.yupi.icu/1/fullstackarchitecture%E5%A4%A7.jpeg)
+
+For example, when a user publishes an article on a blog website, the front-end collects the article's title, content, and other information, then sends an HTTP request to the back-end. The back-end receives the request, validates the data, and calls the database interface to save the article. After successful saving, the back-end returns a success response to the front-end, which displays a "Published successfully" message.
+
+There are many choices for mainstream full-stack technology stacks. For Vibe Coding, I recommend using modern, AI-friendly technology stacks. The front-end can use React or Vue, the back-end can use Node.js (Express, Nest.js) or Python (FastAPI), and the database can use MySQL, PostgreSQL, or MongoDB.
+
+However, the specific technology used isn't the most important; understanding the full-stack development mindset is. Once you grasp the mindset, you can quickly adapt to a different technology stack.
+
+Developing full-stack applications with Vibe Coding has a huge advantage: you don't need to master all the details of front-end and back-end development. You just need to know what functionality to implement, and AI will generate the code for you.
+
+For example, you just need to tell the AI: "Create a user registration interface that receives a username, email, and password, validates them, and saves them to the database."
+
+The AI will generate the complete back-end code for you, including parameter validation, password encryption, database operations, etc. This significantly lowers the barrier to full-stack development, allowing you to focus on business logic rather than getting bogged down in technical details.
+
+## 2. Project实战 - Personal Blog System
+
+The blog system is one of the most classic full-stack projects, involving article publishing, category management, comment interactions, and more. Through this project, you'll learn how to handle CRUD (Create, Read, Update, Delete) operations and basic user authentication.
+
+This blog system needs to support article publishing, editing, deletion, and viewing. Articles can be categorized and tagged. Users can register, log in, and publish their own articles. Visitors can browse articles but cannot publish them. Articles support Markdown format and can include cover images. The homepage displays a list of articles, supporting pagination and search.
+
+![](https://pic.yupi.icu/1/demoweb10.png)
+
+For the technology stack, the front-end uses React + TypeScript + Vite, with Tailwind CSS for styling. The back-end uses Node.js + Express, and the database is MySQL. User authentication is handled with JWT (JSON Web Token). The article editor can reuse a previously built Markdown editor.
+
+### Development Steps
+
+1) Design the Database
+
+The first step in development is designing the database. Before writing any code, design the database structure. Create a `database.md` file to define the tables needed and the fields in each table.
+
+For example, the user table needs: id (primary key), username (unique), email (unique), password (encrypted storage), avatar (URL), created_at (creation time).
+
+The article table needs: id, title, content (Markdown format), cover (cover image URL), category, tags (JSON array), author_id (foreign key linking to users), views (view count), created_at, updated_at.
+
+The category table needs: id, name (category name), description (category description).
+
+2) Write the Requirements Document
+
+After designing the database, write the requirements document. Create a `PRD.md` file:
+
+```markdown
+# Personal Blog System PRD
+
+## Core Features
+
+### User Features
+- Registration: username, email, password
+- Login: returns JWT token
+- Personal Center: view and edit personal information
+
+### Article Features
+- Publish Article: title, content, category, tags, cover
+- Edit Article: modify published articles
+- Delete Article: can only delete own articles
+- View Article: display article details, increment view count
+- Article List: supports pagination, category filtering, search
+
+### Front-end Pages
+- Homepage: article list
+- Article Detail Page
+- Write Article Page (requires login)
+- Personal Center Page (requires login)
+- Login/Register Page
+```
+
+3) Develop the Back-end with AI
+
+With the document ready, you can start developing the back-end with AI. Open Cursor and start a conversation with the AI.
+
+First, initialize the back-end project:
+
+```
+Please create a Node.js + Express back-end project:
+1. Initialize the project, install express, mysql2, jsonwebtoken, bcrypt, etc.
+2. Create the basic project structure: src/routes (routes), src/controllers (controllers), src/models (data models), src/middleware (middleware), src/config (configuration)
+3. Configure the database connection
+```
+
+This prompt specifies what project to create, which dependencies to install, and what the project structure should look like.
+
+Second, create the database tables:
+
+```
+Based on the design in database.md, create SQL statements for the database tables. Then create an initialization script to automatically create these tables.
+```
+
+The AI will generate the SQL statements for creating the tables based on your database design.
+
+Third, implement user registration and login:
+
+```
+Implement user registration and login functionality:
+
+Registration Interface (POST /api/auth/register):
+- Receive username, email, password
+- Validate parameters (username 3-20 characters, valid email format, password at least 6 characters)
+- Check if username and email already exist
+- Encrypt password with bcrypt
+- Save to database
+- Return success message
+
+Login Interface (POST /api/auth/login):
+- Receive username, password
+- Verify user exists
+- Verify password is correct
+- Generate JWT token (valid for 7 days)
+- Return token and user information
+```
+
+This prompt details the functionality requirements for both interfaces. The AI will implement the complete registration and login logic, including parameter validation, password encryption, JWT generation, etc.
+
+Fourth, implement article CRUD:
+
+```
+Implement article CRUD functionality:
+
+Create Article (POST /api/posts):
+- Requires login (verify JWT token)
+- Receive title, content, category, tags, cover
+- Get author_id from token
+- Save to database
+- Return article information
+
+Get Article List (GET /api/posts):
+- Supports pagination (page, pageSize)
+- Supports category filtering (category)
+- Supports search (keyword, searches title and content)
+- Returns article list and total count
+
+Get Article Detail (GET /api/posts/:id):
+- Returns article details
+- Increments view count
+
+Update Article (PUT /api/posts/:id):
+- Requires login
+- Can only update own articles
+- Updates specified fields
+
+Delete Article (DELETE /api/posts/:id):
+- Requires login
+- Can only delete own articles
+```
+
+This prompt covers all article operations. The AI will implement the complete CRUD functionality, including permission verification and data queries.
+
+4) Develop the Front-end with AI
+
+After the back-end is developed, you can start developing the front-end. It's recommended to first test the back-end interfaces with Postman or a similar tool to ensure they work correctly before developing the front-end. This avoids simultaneous issues on both ends, making it unclear where the problem lies.
+
+First, create the front-end project:
+
+```
+Create a React + TypeScript + Vite front-end project, install react-router-dom, axios, react-markdown, etc. Configure routes:
+- / Homepage (article list)
+- /post/:id Article Detail
+- /write Write Article (requires login)
+- /profile Personal Center (requires login)
+- /login Login
+- /register Register
+```
+
+Second, implement user authentication:
+
+```
+Implement user authentication functionality:
+1. Create AuthContext to manage login state and user information
+2. Store token in localStorage
+3. Encapsulate axios to automatically add token to request headers
+4. Create ProtectedRoute component to protect pages requiring login
+5. Implement login and register pages
+```
+
+This prompt explains how to implement user authentication. AuthContext is used to manage global login state, and ProtectedRoute is used to protect pages that require login.
+
+Third, implement the article list page:
+
+```
+Implement the homepage article list:
+1. Fetch article list, display title, cover, category, author, time
+2. Supports pagination, 10 articles per page
+3. Supports category filtering (category tags at the top)
+4. Supports search (search box)
+5. Clicking an article navigates to the detail page
+```
+
+Fourth, implement the article detail page:
+
+```
+Implement the article detail page:
+1. Fetch article details by ID
+2. Use react-markdown to render article content
+3. Display author information, publish time, view count
+4. If it's the user's own article, display edit and delete buttons
+```
+
+Fifth, implement the write article page:
+
+```
+Implement the write article page:
+1. Use the previously built Markdown editor
+2. Input title, select category, add tags, upload cover
+3. Edit on the left, real-time preview on the right
+4. Save button calls the create article interface
+5. If in edit mode, load existing article data
+```
+
+### Development Tips
+
+When developing full-stack applications, there are several tips to improve efficiency. First, use environment variables to manage configurations. Sensitive information like database connection details and JWT secrets should not be hardcoded; use environment variables instead. Create a `.env` file to store configurations and read them via `process.env` in the code.
+
+Second, handle errors properly. API calls may fail, database operations may encounter errors; capture these errors and return friendly messages. You can have the AI help you create a unified error-handling middleware.
+
+Finally, during development, use nodemon to automatically restart the back-end service and Vite's hot-reload feature to automatically refresh the front-end page. This way, you don't need to manually restart after modifying the code, significantly improving development efficiency.
+
+### Extension Ideas
+
+After completing the basic version, you can continue to expand functionality. For example, add a comment system where users can comment on articles; add a like feature to like favorite articles; support article drafts to save unpublished articles; integrate image uploads to cloud storage; add article archiving by month; support RSS subscriptions for easy reader subscriptions; optimize SEO to make articles more easily indexed by search engines.
+
+## 3. Project实战 - Q&A Community
+
+After completing the blog system, let's tackle a more complex project — a Q&A community. The Q&A community is more complex than the blog system, involving questions, answers, likes, and accepted answers. Through this project, you'll learn how to handle more complex data relationships and user interactions.
+
+This Q&A community needs to support users asking and answering questions. Users can post questions, and other users can answer them. Both questions and answers support likes. The question asker can accept the best answer. The homepage displays a list of questions, supporting sorting by popularity, newest, and unanswered. Each question has tags and can be filtered by tags. Users have a points system; asking questions, answering, and having answers accepted all earn points.
+
+![](https://pic.yupi.icu/1/demoweb11.png)
+
+The technology stack is similar to the blog system, with React + TypeScript + Vite for the front-end, Node.js + Express for the back-end, and MySQL for the database.
+
+### Development Steps
+
+1) Design the Database
+
+The first step in development is designing the database. Create a `database.md` file:
+
+```markdown
+# Q&A Community Database Design
+
+## User Table (users)
+- id, username, email, password, avatar
+- points: points
+- created_at
+
+## Question Table (questions)
+- id, title, content (Markdown)
+- tags: tags (JSON array)
+- author_id: question asker ID
+- views: view count
+- answers_count: answer count
+- votes: like count
+- is_solved: whether solved
+- created_at, updated_at
+
+## Answer Table (answers)
+- id, content (Markdown)
+- question_id: question ID
+- author_id: answerer ID
+- votes: like count
+- is_accepted: whether accepted
+- created_at, updated_at
+
+## Like Table (votes)
+- id, user_id, target_type (question/answer)
+- target_id: target ID
+- created_at
+```
+
+2) Develop with AI
+
+After designing the database, you can start developing with AI. The development process is similar to the blog system, but there are a few key points to note.
+
+The first key point is the points system:
+
+```
+Implement the points system:
+- Asking a question: -5 points
+- Answering a question: +10 points
+- Answer accepted: +30 points
+- Question liked: +5 points
+- Answer liked: +10 points
+
+Automatically update user points in relevant operations.
+```
+
+This prompt explains the rules for points. The AI will handle point changes automatically, such as adding 10 points after a user answers a question.
+
+The second key point is the like feature:
+
+```
+Implement the like feature:
+- Users can like questions and answers
+- Each user can only like a target once
+- After liking, the target's votes count increases by 1
+- After unliking, the votes count decreases by 1
+- Return whether the user has liked the target
+```
+
+The like feature needs to prevent duplicate likes, so it needs to record users' like actions. When returning data, inform the front-end whether the user has liked the target so the front-end can correctly display the like button's state.
+
+The third key point is accepting answers:
+
+```
+Implement the accept answer feature:
+- Only the question asker can accept answers
+- Each question can only accept one answer
+- After accepting, the question status changes to solved
+- The answerer receives points reward
+```
+
+This logic needs to be implemented on the back-end to ensure correct permission control.
+
+The fourth key point is sorting the question list:
+
+```
+Implement multiple sorting options for the question list:
+- Newest: sorted by creation time descending
+- Popular: sorted by like count descending
+- Unanswered: filter questions where is_solved = false
+Supports filtering by tags.
+```
+
+### Development Tips
+
+When developing the Q&A community, there are a few areas to pay attention to. First is data consistency; for example, when liking, both the like table and the target's votes count need to be updated. Both operations should either succeed or fail together. You can have the AI help you implement database transactions to ensure data consistency.
+
+Second is performance optimization. The question list may have a lot of data, so pagination is necessary. You can have the AI help you implement paginated queries, returning only one page of data at a time to avoid loading too much data at once and causing page lag.
+
+Additionally, judging the like state is important. When returning the question or answer list, inform the front-end whether the current user has liked the target so the front-end can correctly display the like button's state (red if liked, gray if not).
+
+### Extension Ideas
+
+After completing the basic version, you can continue to expand functionality. For example, add a comment feature to comment on answers; add a follow feature to follow interesting questions or users; implement a notification system to notify the question asker of new answers; optimize the search feature using full-text search to improve search quality; add a leaderboard to display points rankings; implement a badge system where users earn badges by completing achievements.
+
+## 4. Project实战 - Online Store
+
+After mastering user interactions and the points system, let's tackle a project involving transaction processes. The online store is one of the most complex full-stack projects, involving product management, shopping cart, order processing, and more. Through this project, you'll learn how to handle e-commerce business logic.
+
+This Mini version of the store needs to implement basic e-commerce functionality. Product display (list and details), shopping cart (add, delete, modify quantity), order management (create order, view order), user address management. Payment functionality is not required; after creating an order, it can be displayed as "Pending Payment." This reduces development complexity, allowing focus on core business processes.
+
+![](https://pic.yupi.icu/1/demoweb12.png)
+
+The technology stack is similar to the previous projects, with React + TypeScript + Vite for the front-end, Node.js + Express for the back-end, and MySQL for the database.
+
+### Development Steps
+
+1) Design the Database
+
+The first step in development is designing the database. Create a `database.md` file:
+
+```markdown
+# Online Store Database Design
+
+## User Table (users)
+- id, username, email, password, avatar
+- created_at
+
+## Product Table (products)
+- id, name, description, price, stock (inventory)
+- images: image URLs (JSON array)
+- category: category
+- created_at, updated_at
+
+## Shopping Cart Table (cart_items)
+- id, user_id, product_id, quantity
+- created_at
+
+## Address Table (addresses)
+- id, user_id, name (recipient), phone, province, city, district, detail
+- is_default: whether default address
+- created_at
+
+## Order Table (orders)
+- id, order_no (order number), user_id, address_id
+- total_price: total price
+- status: status (Pending Payment, Paid, Shipped, Completed, Canceled)
+- created_at, updated_at
+
+## Order Item Table (order_items)
+- id, order_id, product_id, quantity, price (price at order time)
+```
+
+2) Develop with AI
+
+After designing the database, you can start developing with AI. The development process is similar to the previous projects, but there are a few key points to note.
+
+The first key point is the shopping cart feature:
+
+```
+Implement the shopping cart feature:
+
+Add to Cart (POST /api/cart):
+- Receive product_id, quantity
+- If the product is already in the cart, accumulate the quantity
+- If it's a new product, create a new record
+- Check

translations/en/Vibe Coding 零基础教程/20 项目实战/05 Vibe Coding 小程序开发.md

@@ -0,0 +1,381 @@
+# Vibe Coding Mini Program Development
+
+Hello, I'm Yupi.
+
+In previous articles, we created web applications that can be accessed in browsers. Now, let's learn how to develop WeChat Mini Programs, allowing your applications to run within WeChat.
+
+WeChat Mini Programs are applications that can be used without downloading or installing. They leverage WeChat's massive user base, making them an excellent platform for individual developers. Mini Programs have low development costs and easy user reach.
+
+In this article, I'll guide you through creating two practical Mini Programs: a budgeting app and a habit tracker. I'll also explain the entire development and launch process in detail, enabling you to independently complete the journey from development to deployment.
+
+Please note that this tutorial is more of a guide for project development ideas and processes, aiming to teach you how to use Vibe Coding for project development. You'll need to practice on your own. If you need more comprehensive Vibe Coding tutorials with images and videos, check out Yupi's original project实战 section.
+
+## 1. Mini Program Development Basics
+
+Before diving into projects, let's cover some basic knowledge about Mini Program development.
+
+Mini Programs are lightweight applications that don't require installation and are designed for quick use. WeChat Mini Programs are the most popular platform, but there are also Alipay Mini Programs, Douyin Mini Programs, and others. The advantages of Mini Programs include low development costs (compared to native apps), easy user reach (due to WeChat's large user base), relatively lenient review processes, and rapid iteration.
+
+What’s the difference between Mini Programs and Web Applications?
+
+Simply put, Mini Programs run within the WeChat environment and have specific APIs and limitations. For example, Mini Programs can call WeChat's payment, sharing, and QR code scanning features but cannot directly access external links. From a development perspective, Mini Programs use a syntax similar to Vue, with their own component systems and lifecycle methods. **If you know web development, learning Mini Programs will be quick.**
+
+The tech stack for WeChat Mini Programs includes WXML (similar to HTML), WXSS (similar to CSS), and JavaScript. You can develop using native methods or frameworks like Taro or uni-app for cross-platform Mini Programs. For Vibe Coding, I recommend using native development because AI supports native syntax better, resulting in higher-quality code.
+
+To develop Mini Programs, you’ll need:
+
+- A WeChat Developer Account (free to register)
+- WeChat Developer Tools (the official IDE)
+- A project idea
+
+![WeChat Developer Tools](https://pic.yupi.icu/1/image-20260112150540207.png)
+
+Registering an account is straightforward—just go to the WeChat Official Platform and register a Mini Program account, selecting the personal type. Downloading the developer tools is also simple—just visit the official website and download the version for your system.
+
+Developing Mini Programs with Vibe Coding is similar to developing web applications, with slight syntax differences. You need to tell the AI that you're developing a WeChat Mini Program, and it will generate code that complies with Mini Program standards. For example, you can say, "Please create a budgeting page using WeChat Mini Program native syntax, including amount input, category selection, and note input." The AI will generate WXML, WXSS, and JS files.
+
+💡 If you want to systematically learn Mini Program development, check out Yupi's [free comprehensive Mini Program learning roadmap](https://www.codefather.cn/course/1789189862986850306/section/1789190355448471554) on CodeFather.
+
+## 2. Project实战 - Budgeting Mini Program
+
+Budgeting is a practical feature that many people need. Creating a budgeting Mini Program allows you to learn the basic development process, including data storage, page navigation, and component usage.
+
+This budgeting Mini Program will implement basic budgeting features. Users can add income and expense records, including amount, type (income/expense), category (food, transportation, salary, etc.), notes, and date. The home page displays a list of records and statistics (monthly income, expenses, and balance). Records can be filtered by date. Data is stored locally using WeChat's local storage API.
+
+![](https://pic.yupi.icu/1/demoweb13.png)
+
+We’ll use WeChat Mini Program native development without any frameworks. Data storage will use `wx.setStorageSync` and `wx.getStorageSync`.
+
+### Development Steps
+
+1) The first step is to register a Mini Program account. Go to the [WeChat Official Platform](https://mp.weixin.qq.com/) and register a Mini Program account. Select the personal type, fill in the basic information, and complete the registration. After registration, you’ll receive an AppID, which is needed for development.
+
+2) The second step is to download the developer tools. Go to the [WeChat Open Documentation](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html) and download the WeChat Developer Tools. Install it and log in using WeChat.
+
+3) The third step is to create a project. Open the developer tools, click "New Project," fill in the project name, select the project directory, enter the AppID, and choose not to use cloud services. Click "OK," and a Mini Program project template will be automatically generated.
+
+4) The fourth step is to understand the project structure. The basic structure of a Mini Program project includes:
+
+- `pages` directory: Contains pages, each with wxml (page structure), wxss (page style), js (page logic), and json (page configuration) files.
+- `utils` directory: Contains utility functions.
+- `app.js`: Mini Program logic.
+- `app.json`: Mini Program configuration.
+- `app.wxss`: Global styles.
+
+5) Now, open the project directory with Cursor and start developing with AI.
+
+First, design the data structure:
+
+```
+I want to develop a budgeting Mini Program. Please help me design the data structure.
+
+Information to store:
+- Amount
+- Type (income/expense)
+- Category (food, transportation, shopping, salary, etc.)
+- Notes
+- Date
+
+Please provide the JavaScript object structure.
+```
+
+The AI will help you design a reasonable data structure, including the type and description of each field.
+
+Next, create the home page:
+
+```
+Please create the home page (pages/index/index) using WeChat Mini Program native syntax:
+
+Top section displays statistics cards:
+- Monthly income (green)
+- Monthly expenses (red)
+- Monthly balance (blue)
+
+Middle section displays the record list:
+- Grouped by date
+- Each record shows: category icon, category name, notes, amount
+- Income displayed in green, expenses in red
+
+Bottom section has a large "+" button that navigates to the add page.
+
+Use Flex layout, and make the interface visually appealing.
+```
+
+This prompt details the layout and style of the home page. The AI will generate complete WXML, WXSS, and JS code.
+
+Next, implement data storage:
+
+```
+Create a utils/storage.js utility file to encapsulate data storage operations:
+
+1. saveRecord(record): Save a record
+2. getRecords(): Get all records
+3. deleteRecord(id): Delete a record
+4. getMonthRecords(year, month): Get records for a specific month
+
+Use wx.setStorageSync and wx.getStorageSync for data storage.
+Records should have a unique ID (can use a timestamp).
+```
+
+This encapsulates the data storage logic, making it easy to use later.
+
+Then, create the add record page:
+
+```
+Create the add record page (pages/add/add):
+
+Top section has two tabs: Income, Expense
+
+Amount input area:
+- Large amount input box
+- Display "¥" symbol
+
+Category selection area:
+- Grid layout displaying category icons
+- Income categories: Salary, Bonus, Investment, Other
+- Expense categories: Food, Transportation, Shopping, Entertainment, Medical, Other
+- Highlight selected categories
+
+Notes input:
+- Single-line text input box
+
+Date selection:
+- Defaults to today
+- Click to select a date
+
+Bottom save button:
+- Click to save the record and return to the home page
+```
+
+Next, implement the statistics feature:
+
+```
+Implement the statistics feature on the home page:
+
+1. Calculate total monthly income: Filter income records for the month and sum them
+2. Calculate total monthly expenses: Filter expense records for the month and sum them
+3. Calculate monthly balance: Income - Expenses
+
+Refresh statistics when the page loads or returns.
+```
+
+Finally, implement the record list:
+
+```
+Implement the record list on the home page:
+
+1. Get all records, sorted by date in descending order
+2. Group records by date (today, yesterday, earlier)
+3. Each record shows: category icon, name, notes, amount
+4. Long press a record to delete it
+
+Implement pull-to-refresh functionality.
+```
+
+### Development Tips
+
+Here are a few tips to improve efficiency when developing Mini Programs. First, make good use of the debugging features in WeChat Developer Tools. You can preview the app in the simulator or on a real device. Real device preview requires scanning a QR code with WeChat, allowing you to see the actual runtime effects.
+
+Second, Mini Program data storage is synchronous, using `wx.setStorageSync` and `wx.getStorageSync`. If the data volume is large, consider using the asynchronous versions `wx.setStorage` and `wx.getStorage` to avoid blocking the main thread.
+
+Additionally, Mini Program page navigation has several methods: `wx.navigateTo` (keeps the current page and allows returning), `wx.redirectTo` (closes the current page and doesn’t allow returning), `wx.switchTab` (navigates to a tabBar page), and `wx.navigateBack` (returns to the previous page). Choose the appropriate method based on the scenario.
+
+Finally, Mini Programs have some limitations, such as a package size limit of 2MB (each sub-package cannot exceed 2MB). Be mindful of image sizes and code volume. Use image compression tools and code splitting to manage these limits.
+
+### Extension Ideas
+
+After completing the basic version, you can extend the functionality. For example, add budget settings to set monthly budgets and receive alerts when exceeding them; add chart displays to show income and expense trends; support category management, allowing users to customize categories; add bill export to export data to Excel files; support multiple ledgers, such as work and personal ledgers; integrate cloud sync using WeChat Cloud Development for multi-device synchronization.
+
+## 3. Project实战 - Habit Tracker Mini Program
+
+After completing the budgeting Mini Program, let’s create a project involving calendars and data visualization. Habit tracking is a great tool for building habits like studying, exercising, or waking up early. Creating a habit tracker Mini Program allows you to learn about calendar components and data visualization features.
+
+This habit tracker Mini Program will implement habit tracking features. Users can create habit projects (e.g., daily study, daily exercise) and set tracking goals (e.g., consecutive days). Users can check in once per day, and successful check-ins will be displayed. The home page shows all habit projects and their status. The calendar view displays check-in history, with checked-in dates marked in green. Statistics show total check-in days, consecutive check-in days, and completion rates.
+
+![](https://pic.yupi.icu/1/demoweb14.png)
+
+We’ll use WeChat Mini Program native development, with data stored locally. Calendar components can use third-party libraries like Vant Weapp or be implemented manually.
+
+### Development Steps
+
+1) The first step is to design the data structure. Tell the AI:
+
+```
+I want to develop a habit tracker Mini Program. Please help me design the data structure.
+
+Habit Project:
+- id
+- name (project name, e.g., "Daily Study")
+- target (goal days)
+- created_at (creation time)
+
+Check-in Record:
+- id
+- project_id (associated project)
+- date (check-in date, format YYYY-MM-DD)
+- note (check-in note, optional)
+- created_at (check-in time)
+
+Please provide the data structure and storage solution.
+```
+
+The AI will help you design a reasonable data structure and explain how to store it locally.
+
+2) Create the project list page
+
+Tell the AI:
+
+```
+Create the home page (pages/index/index), displaying a list of habit projects:
+
+Each project card shows:
+- Project name
+- Whether checked in today (checked in shows a green check, unchecked shows a gray circle)
+- Consecutive check-in days
+- Total check-in days
+- Progress bar (check-in days / goal days)
+
+Bottom section has an "Add Project" button.
+
+Clicking a project card navigates to the project details page.
+Clicking the check-in button performs a check-in.
+```
+
+This prompt details the layout and interaction of the home page. The AI will generate complete page code.
+
+3) Implement the check-in feature
+
+Tell the AI:
+
+```
+Implement the check-in feature:
+
+1. Check if checked in today
+2. If not checked in, create a check-in record
+3. Save to local storage
+4. Display a success message
+5. Refresh page data
+
+Optionally, add a note when checking in.
+```
+
+The check-in feature should prevent duplicate check-ins, so first check if the user has already checked in today.
+
+4) Create the project details page
+
+Tell the AI:
+
+```
+Create the project details page (pages/detail/detail):
+
+Top section displays project information:
+- Project name
+- Goal days
+- Check-in days
+- Consecutive check-in days
+
+Middle section displays a calendar:
+- Shows the current month
+- Checked-in dates marked in green
+- Today marked with a blue border
+- Can switch months
+
+Bottom section displays the check-in record list:
+- Sorted by date in descending order
+- Shows date and notes
+
+Top-right corner has a delete project button.
+```
+
+5) Implement the statistics feature
+
+Tell the AI:
+
+```
+Implement the statistics feature:
+
+1. Total check-in days: Total check-in records for the project
+2. Consecutive check-in days: Number of consecutive days checked in, starting from today
+3. Completion rate: Check-in days / goal days
+4. Longest consecutive check-in: Longest streak in history
+
+Display these statistics on the project details page.
+```
+
+Calculating consecutive check-in days is complex—you need to traverse backward from today, checking if each day has a check-in record until you encounter a day without one. The AI will help you implement this algorithm.
+
+6) Implement the calendar component
+
+Tell the AI:
+
+```
+Implement the calendar component:
+
+1. Display all dates in the current month
+2. Mark checked-in dates with a green background
+3. Mark today with a blue border
+4. Can switch to previous/next month
+5. Clicking a date shows the check-in note for that day
+
+Use Grid layout, with 7 dates per row (Sunday to Saturday).
+```
+
+Implementing the calendar component is complex, but the AI can handle it. If it feels too cumbersome, you can use third-party libraries like Vant Weapp.
+
+### Development Tips
+
+When developing the habit tracker Mini Program, here are a few tips to keep in mind. First, date handling in JavaScript can be tricky. Let the AI help you encapsulate some utility functions, such as getting the number of days in a month, checking if a date is today, or calculating the difference between two dates.
+
+Second, calculating consecutive check-in days requires traversing backward from today, checking if each day has a check-in record until you encounter a day without one. Let the AI implement this algorithm, considering various edge cases.
+
+Additionally, implementing the calendar component is complex. If it feels too cumbersome, use third-party libraries. Vant Weapp is an excellent Mini Program UI library that provides a calendar component. Let the AI help you integrate Vant Weapp and use its calendar component.
+
+Finally, check-in data may accumulate over time, so be mindful of performance optimization. Load only the last three months of data initially, and load older data on demand to avoid performance issues from loading too much data at once.
+
+### Extension Ideas
+
+After completing the basic version, you can extend the functionality. For example, add check-in reminders to notify users daily; implement check-in sharing to generate posters for sharing on social media; add leaderboards to compete with friends; implement rewards for consecutive check-ins; support data export to export check-in records; integrate cloud sync using WeChat Cloud Development for multi-device synchronization.
+
+## 4. Mini Program Launch Process
+
+After development, how do you launch a Mini Program? Here’s a detailed explanation of the launch process.
+
+1) Complete Mini Program Information
+
+On the WeChat Official Platform, complete the Mini Program’s basic information: name, description, logo, and category (choose an appropriate category). Personal-type Mini Programs have some restrictions, such as not being able to use payment features or certain categories. If you need these features, register as an enterprise-type account.
+
+2) Configure Server Domain
+
+If the Mini Program needs to call backend APIs, configure the server domain on the WeChat Official Platform. Only configured domains can be accessed in the Mini Program. Note that the domain must use HTTPS and have an SSL certificate. For local development, you can check "Do not verify valid domain names" in the developer tools.
+
+3) Upload Code
+
+In WeChat Developer Tools, click the "Upload" button in the top-right corner, fill in the version number and project notes, and click "Upload." After uploading, the code will be submitted to WeChat’s servers.
+
+4) Submit for Review
+
+On the WeChat Official Platform, go to "Version Management" to see the uploaded version. Click "Submit for Review" and fill in the review information, including test accounts (if login is required), test instructions (tell reviewers how to test), and privacy-related explanations. After submission, wait for the review. The review time is typically 1–7 days, but it usually takes 1–2 days to pass.
+
+5) Launch
+
+After passing the review, you’ll receive a notification. On the WeChat Official Platform, click the "Launch" button, and the Mini Program will officially go live. After launch, users can access your Mini Program via search, QR codes, or sharing.
+
+6) Version Updates
+
+To update the Mini Program, repeat the process: upload code → submit for review → launch. You can use the "Staged Release" feature to release the update to a subset of users first and then roll it out fully after testing.
+
+![](https://pic.yupi.icu/1/weapp-workflow%E5%A4%A7.jpeg)
+
+### Common Review Issues
+
+Mini Program reviews may encounter some issues. Here are a few common ones.
+
+1) Incomplete functionality. Reviewers may find that features don’t work as expected, such as buttons not responding or pages displaying errors. Ensure all features work correctly and test thoroughly before submission.
+
+2) Incorrect category. The Mini Program’s functionality may not match the selected category. For example, if you’re developing a utility Mini Program but selected a social category. Choose the appropriate category, and consult WeChat support if unsure.
+
+3) Missing necessary explanations. For example, if the Mini Program requires user location but doesn’t explain why. Clearly state the purpose and usage of such permissions in the privacy policy.
+
+4) Content violations. The Mini Program’s content may violate WeChat’s guidelines, such as containing inappropriate material. Carefully read WeChat’s Mini Program operational guidelines to ensure compliance.
+
+If the review fails, you’ll receive the rejection reason. Make the necessary changes and

translations/en/Vibe Coding 零基础教程/20 项目实战/06 项目部署上线教程.md

@@ -0,0 +1,288 @@
+# Project Deployment Tutorial
+
+Hello, I'm Programmer Yupi.
+
+In previous articles, we learned how to develop various projects. However, if a project can only run locally, it would be a pity. In this article, I will teach you how to deploy a project to the internet, making it accessible to people worldwide.
+
+First, it's important to note that if you're using AI zero-code platforms like Bolt.new, Lovable, Meituan NoCode, or Baidu Miaoda, they usually come with built-in deployment features. You can simply click the publish button to go live, which is very convenient. However, if you want more flexible deployment options, such as using your own domain, choosing different servers, or deploying more complex full-stack projects, you'll need to learn more deployment methods.
+
+Below, I'll introduce multiple deployment methods, from the latest AI auto-deployment to the popular Vercel one-click deployment, and even professional server deployment. You can choose the appropriate deployment method based on your project type and needs.
+
+## Overview of Deployment Methods
+
+Before we start, let's take a look at the available deployment methods.
+
+For frontend projects (static websites, single-page applications, etc.), the simplest way is to use hosting platforms like Vercel, GitHub Pages, EdgeOne Pages, etc. These platforms offer free hosting services. You just need to upload your code, and they will automatically deploy it and generate an access link.
+
+For full-stack projects (including both frontend and backend), you can choose containerized deployment (Docker), cloud server deployment (Alibaba Cloud, Tencent Cloud, etc.), or Serverless deployment. These methods are relatively more complex but offer more powerful features.
+
+Below, I'll detail each deployment method.
+
+## Let AI Auto-Deploy (Latest and Coolest)
+
+First, let's share the latest technique: letting AI deploy your website for you.
+
+In the past, developing a website required proposing requirements, designing a solution, writing code, and finally deploying it. We all know that AI is getting better at writing code, gradually taking over some of the programmers' coding tasks. However, AI's capabilities go beyond that. Using MCP, it can even directly deploy our websites for us!
+
+Alright, so I just need to propose a one-sentence requirement, and I don't even need to write code or deploy it myself. Are you trying to make me obsolete?
+
+![](https://pic.yupi.icu/1/1752213314439-7925d7ba-0d1d-46f1-9f70-b1d391ac854d.png)
+
+Let's walk through a practical example of letting AI generate and deploy a personal blog website.
+
+### Preparation Tools
+
+The tools we need include:
+
+- Cursor: An AI programming tool responsible for calling AI to generate code
+- EdgeOne Pages MCP: A service that can quickly deploy websites to CDN and generate public access links
+
+What is EdgeOne Pages MCP? Let's break down the words.
+
+EdgeOne is a CDN acceleration service provided by Tencent Cloud, which caches website resources to edge nodes closest to users, improving website performance.
+
+![](https://pic.yupi.icu/1/1752216739540-3dbb9132-3ae0-4a5d-9949-2a4299663c39.png)
+
+EdgeOne Pages is a website deployment service based on this CDN, allowing you to easily deploy websites to CDN and obtain public access addresses without needing to set up your own server.
+
+![](https://pic.yupi.icu/1/1752216784265-0a71fe3a-7944-40b2-b5ce-87215df060fe.png)
+
+MCP is the currently popular Model Context Protocol, enabling AI models to easily use various tools to enhance capabilities and complete more complex tasks.
+
+![](https://pic.yupi.icu/1/1752216828838-510154d5-6a89-4089-84b9-fadeccb9d724.png)
+
+The role of EdgeOne Pages MCP is obvious — providing AI with website deployment tools, which is a popular MCP.
+
+![](https://pic.yupi.icu/1/1752217054075-0f149a76-9e42-482e-ae26-e23762c7ad1e.png)
+
+### Quick Practice
+
+1) Enable Pages Service
+
+First, go to the [EdgeOne Console](https://console.cloud.tencent.com/edgeone/pages) to enable the Pages service:
+
+![](https://pic.yupi.icu/1/1752209404627-3a3193d9-4c94-4f80-ad02-435ff22f16ed.png)
+
+After enabling the service, you'll be directed to the project management page by default. Let's not rush to create a project yet:
+
+![](https://pic.yupi.icu/1/1752209421726-11d8eff7-7bdd-4a85-accf-c70f74ead15a.png)
+
+Since we'll be using MCP to complete the website deployment, we need to obtain an API Token first as the credential for calling the service:
+
+![](https://pic.yupi.icu/1/1752209504079-6741bbd0-438e-48a4-86be-6eddfc3efa83.png)
+
+2) Configure MCP
+
+Create a new project folder `yupi-blog`, open it in Cursor, then go to settings and add the MCP service:
+
+![](https://pic.yupi.icu/1/1752209949437-369134bc-303b-46fc-bca1-e1a57a335f82.png)
+
+Copy and paste this configuration into the MCP configuration file:
+
+```json
+{
+  "mcpServers": {
+    "edgeone-pages-mcp-server": {
+      "command": "npx",
+      "args": ["edgeone-pages-mcp"],
+      "env": {
+        "EDGEONE_PAGES_API_TOKEN": "Your API Token",
+        "EDGEONE_PAGES_PROJECT_NAME": ""
+      }
+    }
+  }
+}
+```
+
+Make sure to replace the API Token with your own and delete the comments, otherwise, it will cause errors:
+
+![](https://pic.yupi.icu/1/1752210048110-15bf78cc-da14-4f7f-b9d5-3ec510332bf7.png)
+
+Normally, you'll see the MCP service successfully loaded, turning green!
+
+![](https://pic.yupi.icu/1/1752211512400-a59c2010-8701-4b75-80d9-014ad03e8b4a.png)
+
+This service provides two tools:
+
+- deploy_html: Deploys HTML content to EdgeOne Pages and returns a public access URL
+- deploy_folder_or_zip: Deploys a folder or ZIP file to EdgeOne Pages and returns a public access URL
+
+Note that this MCP service requires the NPX tool to start successfully locally. NPX can directly run commands from NPM packages without global installation, commonly used for scaffolding tools and one-time commands.
+
+If you don't have the NPX command or if your Node.js version is too low (preferably not below 20), the tool will fail to load.
+
+![](https://pic.yupi.icu/1/1752211437222-1400be90-e460-4948-b7f3-45a6a78ffe7d.png)
+
+In this case, you just need to install Node.js from the [official website](https://nodejs.org/zh-cn), which will automatically install NPM and NPX tools for you:
+
+![](https://pic.yupi.icu/1/1752209643527-73a7c2cc-046c-4faa-8531-2a22da95d4bd.png)
+
+If NPX is not automatically installed, use the NPM package manager to install NPX:
+
+```bash
+npm i -g npx
+```
+
+3) Generate and Deploy Website
+
+With the MCP service ready, let's generate the website. Enter the following prompt to let AI generate a personal blog website for me:
+
+```
+Help me generate a personal blog website based on Programmer Yupi's GitHub, with a geeky style, simple and elegant; deploy the website after generation
+@https://github.com/liyupi
+```
+
+Looking at AI's thought process, it has already considered using EdgeOne Pages to deploy the website:
+
+![](https://pic.yupi.icu/1/1752211869664-b74dc4d9-57b1-4bb7-9f02-703112b613eb.png)
+
+Soon, the website is generated and deployed. You can see that AI called the MCP tool to deploy HTML and obtained the access URL:
+
+![](https://pic.yupi.icu/1/1752212029384-16cfba8f-babb-49c0-9d41-3b76ee78eecf.png)
+
+Opening the URL directly shows the effect, so convenient!
+
+![](https://pic.yupi.icu/1/1752212096367-0a0fac32-118e-485a-9277-8dd507ff66d3.png)
+
+However, the generated website is currently quite simple, just a single HTML page, without even creating local code files.
+
+4) Deploy Website Directory
+
+Let's try a more complex project. Use the following prompt to let AI develop a multi-page website using a frontend framework:
+
+```
+Help me generate a personal blog website based on Programmer Yupi's GitHub, with a geeky style, simple and elegant;
+Include multiple pages, require modular development using Vue framework;
+Deploy the website after generation
+@https://github.com/liyupi/
+```
+
+![](https://pic.yupi.icu/1/1752212265608-6aa96245-199f-487f-9c57-bc2f0550cdf6.png)
+
+This time, the waiting time will be longer. Yupi suggests everyone take this time to grab a glass of water and stretch. Recently, sitting for long periods, I feel my shoulders have become as hard as stone.
+
+![](https://pic.yupi.icu/1/1752217850836-e83f0d59-a657-4048-94cd-a515e960a4d7.png)
+
+We'll notice that although a lot of code is generated, it's not automatically deployed, only deployment suggestions are provided:
+
+![](https://pic.yupi.icu/1/1752213747665-192b57be-90a5-44e4-92b1-5cd468394707.png)
+
+Looking at AI's thought process, it turns out that using the deployment tool failed:
+
+![](https://pic.yupi.icu/1/1752214113764-2afad6bc-5777-4e9e-b2d2-745476caadc2.png)
+
+After testing, I found that if you want to deploy a website directory or ZIP file, it's best to first create a project on the Pages web version, then let MCP upload the website files to this project.
+
+So, let's use the official example to deploy a website randomly:
+
+![](https://pic.yupi.icu/1/1752215857055-9a84b9d5-4787-4181-b054-8883884c34b2.png)
+
+Modify the project name to `yupi-blog` and click "Start Deployment":
+
+![](https://pic.yupi.icu/1/1752215971422-9e57abea-077a-4847-88b3-bd1cd1de4217.png)
+
+Waiting for deployment, it should take about 30 seconds:
+
+![](https://pic.yupi.icu/1/1752216002653-9d7c5127-642a-4b3c-b542-c9e6cfcd0dde.png)
+
+After the project is successfully deployed, modify the Cursor MCP configuration and fill in the newly created project name:
+
+![](https://pic.yupi.icu/1/1752216064120-e1e8e58e-0eaa-4b9c-814b-605c664c35a3.png)
+
+Then, talk to AI again and let it help deploy the website directory:
+
+![](https://pic.yupi.icu/1/1752213933060-071efc16-a9ac-4333-8fd9-53beeeeedd90.png)
+
+This time, you can see that AI successfully executed the deployment tool and obtained the access URL:
+
+![](https://pic.yupi.icu/1/1752216306792-fb4c2e9c-d600-4b7c-b3c4-d5ae02614974.png)
+
+Check out the website effect, not bad, quite techy!
+
+![](https://pic.yupi.icu/1/1752216337356-667e0577-b0a5-4f44-b147-5bb3ab14824e.png)
+
+However, note that the generated website uses a temporary domain by default, which has a short validity period:
+
+![](https://pic.yupi.icu/1/1752216364625-c93f7b26-133a-4aac-a849-77ee6840e6f1.png)
+
+If you have a domain, it's recommended to configure a custom domain for unlimited access~
+
+![](https://pic.yupi.icu/1/1752216408600-03b16e94-4668-4295-b7bb-2a07bc5592c7.png)
+
+How about it? Isn't it simple? When MCP can be easily used on mobile phones, imagine this: you're walking on the street chatting with a friend, and your friend recommends a blogger — Programmer Yupi. You just need to say one sentence to AI, and 2 minutes later, you can give your friend access to a website introducing this blogger, like magic.
+
+![](https://pic.yupi.icu/1/1752218294278-9d31872f-e883-4736-a3f6-584ee31e9ad7.png)
+
+It's worth mentioning that EdgeOne Pages is currently free, which is awesome.
+
+![](https://pic.yupi.icu/1/1752216569752-fbd0f243-7d43-44de-af69-d3d6eb954f8a.png)
+
+## Vercel One-Click Deployment (Recommended)
+
+[Vercel](https://vercel.com) is currently the most popular frontend deployment platform, especially suitable for React, Next.js, Vue, static websites, and other frontend projects.
+
+The advantages of Vercel are that personal projects are completely free, deployment speed is extremely fast (usually 1 ~ 2 minutes), automatic HTTPS and CDN acceleration are configured; it also integrates deeply with GitHub, automatically deploying when you push code to a GitHub repository.
+
+### Usage Steps
+
+1) First, visit the [Vercel official website](https://vercel.com) to register an account. It's recommended to use a GitHub account to register and log in.
+
+2) Create a project, directly bind GitHub and select an already hosted project, then click the "Deploy" button:
+
+![](https://pic.yupi.icu/1/image-20260109111323983.png)
+
+3) Wait for 1 ~ 2 minutes, and the project is live!
+
+After successful deployment, Vercel will automatically give you a domain, such as `your-project.vercel.app`. You can also bind your own domain. Moreover, every time you push code to GitHub, Vercel will automatically redeploy, requiring no manual operation.
+
+### Command Line Deployment
+
+In addition to web operations, Vercel also provides a command-line tool, allowing us to deploy our projects to the platform with a single command. First, install the Vercel CLI tool using NPM:
+
+```bash
+npm i -g vercel@latest
+```
+
+Then, directly enter the `vercel` command in the project folder you want to deploy, and the current project will be deployed:
+
+![](https://pic.yupi.icu/1/1752218682107-8c8457e4-3fbe-40d8-afb8-f6cb0691beee.png)
+
+The method to let AI complete auto-deployment is also simple. You just need to tell AI in the prompt "You can use the vercel command-line tool to complete website deployment." Smart as it is, it will surely help you complete the task.
+
+💡 For the specific process, you can watch Yupi's video tutorial: https://www.bilibili.com/video/BV1TV4y1j76t
+
+Besides Vercel, there's also [Netlify](https://www.netlify.com/), a similar platform. Netlify and Vercel have similar functions, but Netlify is more comprehensive, supporting more frameworks and static site generators, with features like form processing, serverless functions, larger free quotas, and support for A/B testing and analysis. The usage method is similar to Vercel: register an account => connect GitHub => select a project => click deploy. If your project is not Next.js (Next.js is best used with Vercel), you can consider using Netlify.
+
+## GitHub Pages Deployment
+
+[GitHub Pages](https://pages.github.com/) is a free static website hosting service provided by GitHub. The advantages are that it's completely free, has unlimited traffic, and integrates seamlessly with GitHub.
+
+The usage method is extremely simple. After creating a repository on GitHub and uploading website files, directly enable GitHub Pages in the repository settings:
+
+![](https://pic.yupi.icu/1/image-20260109111917547.png)
+
+Then, you can access it via `username.github.io/repo-name`. It's suitable for personal homepages, project documentation, and simple static websites.
+
+The limitation of GitHub Pages is that it can only deploy static websites and cannot run backend code. However, for pure frontend projects, it's completely sufficient. And it's completely free, with no need to worry about traffic limits.
+
+## Cloud Server Deployment
+
+If you want more control, you can rent a cloud server and deploy the project yourself. Mainstream cloud service providers in China include Alibaba Cloud, Tencent Cloud, and Huawei Cloud.
+
+The basic process of cloud server deployment:
+
+1) Purchase a cloud server (recommended starting with a 2-core 4GB configuration, with new user discounts for first-time purchases)
+
+2) Install the runtime environment, such as Node.js, Nginx, MySQL database, etc.
+
+3) Upload code to the server
+
+4) Configure Nginx reverse proxy
+
+5) Configure domain and SSL certificate
+
+This process can be a bit complex for pure beginners, but you can use visual management tools like BT Panel or 1Panel to greatly simplify operations. These panels provide a graphical interface, eliminating the need to remember complex commands, and you can complete configurations with just a few clicks.
+
+![](https://pic.yupi.icu/1/1736821032080-4be9c9e5-6dfe-434b-8db8-7eb8d7068a16.png)
+
+The advantage of cloud server deployment is

translations/en/Vibe Coding 零基础教程/20 项目实战/10 Vibe Coding 项目灵感大全.md

@@ -0,0 +1,444 @@
+# Vibe Coding Project Inspiration Guide
+
+Hello, I'm Fish Skin.
+
+In this article, I will provide you with 100 project ideas suitable for Vibe Coding, covering personal tools, work efficiency, entertainment creativity, education, social interaction, and more. You can choose based on your interests and skill level.
+
+## How to Choose the Right Project?
+
+Before diving into project ideas, let's talk about how to choose the right project.
+
+Many students get excited when they see project ideas but give up after a few days.
+
+Why? Because they chose the wrong project.
+
+### Three Principles for Choosing Projects
+
+#### Principle 1: Start with Your Own Needs
+
+The best projects solve your own problems. If you use it daily, you'll naturally be motivated to continue. For example, if you find existing expense tracking apps too complex, you can create a simple expense tracker. If you want to develop a study habit, you can create a check-in app.
+
+#### Principle 2: Choose a Moderate Difficulty Level
+
+The project shouldn't be too simple or too difficult. If it's too simple, you won't learn much; if it's too hard, you might give up. A good standard is: you roughly know how to do it, but there are some technical points you need to learn. This way, it's challenging but not overwhelming.
+
+#### Principle 3: Quick Results
+
+Choose projects that yield quick results. For example, a simple tool that can be built in a few days and used immediately. This will give you a sense of achievement and motivation to continue. Avoid projects that take months to see results.
+
+![](https://pic.yupi.icu/1/choose-project-3ways%E5%A4%A7.jpeg)
+
+### My Suggestions
+
+If you're a complete beginner, start with personal tool projects. These projects are simple, use a single tech stack, and are easy to get started with. Examples include to-do lists, expense trackers, and Pomodoro timers.
+
+If you've already completed a few projects, try work efficiency or education-related projects. These are slightly more complex and involve more features and interactions. Examples include note-taking apps, online whiteboards, and study check-ins.
+
+If you want to challenge yourself, try social interaction or entertainment creativity projects. These involve user interaction, real-time communication, and other complex features. Examples include anonymous chat rooms, online games, and content communities.
+
+### How to Validate Project Ideas
+
+Once you have an idea, don't rush to start. First, validate whether the idea is worth pursuing.
+
+Ask yourself these questions:
+
+- Does this problem really exist?
+- How many people have this need?
+- What are the shortcomings of existing solutions?
+- What are the advantages of my solution?
+
+If the answers are all positive, then you can start.
+
+You can also create a minimal viable product (MVP) first, implementing only the core features to see if it's truly useful. If it is, continue refining it; if not, pivot early.
+
+## Personal Tool Project Ideas
+
+Personal tool projects are perfect for beginners—simple and practical.
+
+**1. Password Generator**
+
+A tool to generate strong passwords with customizable length and character types (uppercase, lowercase, numbers, symbols). This is one of the most practical tools, helping you create secure passwords. You can add password strength detection and save generated passwords for easy access.
+
+**2. Color Picker**
+
+A tool to select colors and get HEX, RGB, HSL codes, with palette saving. Useful for designers and front-end developers to quickly get color codes. You can add color scheme recommendations and support extracting colors from images.
+
+**3. Text Comparison Tool**
+
+Compare two texts and highlight differences, supporting line-by-line and character-by-character comparison. Useful for code reviews and document comparisons. Add options to ignore spaces or case for more flexibility.
+
+**4. JSON Formatter**
+
+Format and validate JSON data, with folding, syntax highlighting, and error detection. A must-have tool for developers to quickly view and debug JSON data. Add JSON conversion features like XML or YAML.
+
+**5. Base64 Encoder/Decoder**
+
+Encode and decode Base64 for text and images, with online preview. Useful for handling image data and API calls. Add batch processing and support for other encoding formats like URL encoding.
+
+**6. QR Code Generator**
+
+Generate QR codes from text or links, with customizable size, color, and logo. Useful for sharing links, WiFi passwords, and business cards. Add QR code scanning and batch generation.
+
+**7. Countdown Timer**
+
+Set a target date and display the countdown, supporting multiple timers. Useful for reminders like exams, birthdays, and anniversaries. Add notifications and support for count-up timers.
+
+**8. Random Decision Maker**
+
+Input multiple options and randomly select one, perfect for indecisive people. Useful for deciding what to eat, where to go, or what to do. Add weighting and history tracking.
+
+**9. Unit Converter**
+
+Convert units like length, weight, temperature, and currency, supporting common units. Useful in daily life, like cooking. Add real-time currency exchange rates and custom units.
+
+**10. Regular Expression Tester**
+
+Test regular expressions with real-time matching results and common templates. Useful for developers working with text. Add explanations and regex generation based on requirements.
+
+**11. Markdown to HTML Converter**
+
+Convert Markdown to HTML with live preview and syntax highlighting. Useful for writing documentation and blogs. Add custom styles and export to PDF or Word.
+
+**12. Image Compressor**
+
+Compress images online with batch processing and customizable quality. Useful for reducing image size and speeding up web loading. Add format conversion and basic editing like cropping.
+
+**13. File Format Converter**
+
+Convert common file formats like PDF to images or video formats. Useful for handling different file types. Add batch conversion and cloud processing for large files.
+
+**14. Screen Recorder**
+
+Record screen actions and generate GIFs or videos with annotations. Useful for creating tutorials and software demos. Add editing features and support for camera recording.
+
+**15. Shortcut Lookup Tool**
+
+Look up shortcuts for various software, with search and categorization. Useful for mastering software operations quickly. Add custom shortcuts and practice modes.
+
+**16. Time Zone Converter**
+
+Convert time between different time zones, useful for international collaboration. Add meeting time suggestions and multiple time zone clocks.
+
+**17. Word Count Tool**
+
+Count words, characters, and paragraphs in text, supporting multiple languages. Useful for writing articles and essays. Add reading time estimates and keyword analysis.
+
+**18. URL Shortener**
+
+Generate short URLs for easy sharing, with custom short links. Add click tracking and QR code generation.
+
+**19. Random Name Generator**
+
+Generate random names for people, companies, or products, with different styles. Useful for naming projects or characters. Add AI generation and domain availability checks.
+
+**20. Number Base Converter**
+
+Convert between binary, octal, decimal, and hexadecimal. Useful for programmers working with different number bases. Add bitwise operations and floating-point conversion.
+
+## Work Efficiency Project Ideas
+
+Work efficiency projects can improve productivity and are highly practical.
+
+**21. Advanced Pomodoro Timer**
+
+In addition to basic timing, record what you did in each Pomodoro and generate work reports. This classic method improves focus through 25-minute work + 5-minute break cycles. Add statistics and calendar integration.
+
+**22. Meeting Notes Tool**
+
+Record meeting content with audio-to-text conversion and task extraction. Helps teams follow up on decisions. Add AI summaries and collaborative editing.
+
+**23. Project Kanban Board**
+
+A Trello-like tool to manage project tasks with drag-and-drop, labels, and deadlines. Clearly visualize project progress. Add Gantt charts and task dependencies.
+
+**24. Time Tracking Tool**
+
+Record time spent on different tasks and generate time analysis reports. Helps optimize time allocation. Add automatic tracking and weekly/monthly reports.
+
+**25. Habit Tracker**
+
+Track multiple habits and generate habit formation curves. Helps build good habits like daily exercise or reading. Add reminders and social elements.
+
+**26. Goal Management Tool**
+
+Set long-term and short-term goals, break them into tasks, and track progress. Helps achieve big goals by breaking them into smaller steps. Add OKR management and goal reports.
+
+**27. Reading List Manager**
+
+Save articles and books you want to read, mark reading status, and add notes and tags. Avoid collecting articles you never read. Add reading time estimates and web clipping.
+
+**28. Idea Collector**
+
+Record ideas anytime with text, images, and links, and organize them by category. Good ideas are fleeting—capture them quickly. Add AI organization and idea linking.
+
+**29. Schedule Assistant**
+
+Manage daily schedules with calendar views, reminders, and recurring events. Helps organize time and avoid missing important tasks. Add smart suggestions and integrate weather/traffic info.
+
+**30. Focus Mode Tool**
+
+Block distracting websites and enter focus mode with whitelist/blacklist support. Helps resist distractions and stay focused. Add Pomodoro integration and distraction statistics.
+
+**31. Quick Note Tool**
+
+Quickly jot down ideas with Markdown, tags, and search, and export notes. Lighter than traditional note apps—open and write. Add global shortcuts and note linking.
+
+**32. Email Template Manager**
+
+Save common email templates for quick insertion with variable replacement. Saves time on repetitive emails. Add smart variables and team sharing.
+
+**33. Password Manager**
+
+Securely store passwords with categorization, search, and password strength checks. More secure and flexible than browser password managers. Add password generation and sharing.
+
+**34. File Organizer Tool**
+
+Automatically organize download folders by type, date, and custom rules. Keeps messy folders tidy. Add smart categorization and duplicate file detection.
+
+**35. Quick Launcher**
+
+Quickly launch apps and websites with custom shortcuts. Boosts efficiency by reducing mouse usage. Add search and workspace support.
+
+**36. Clipboard History Manager**
+
+Record clipboard history for quick access to previously copied content. Avoid losing copied content. Add favorites and formatted pasting.
+
+**37. Invoice Management Tool**
+
+Scan and manage invoices with automatic amount and category recognition, generating expense reports. Simplifies reimbursement. Add OCR and expense analysis.
+
+**38. Contract Management System**
+
+Manage contracts with signing dates, expiration dates, and automatic reminders. Avoid forgetting contract renewals. Add contract templates and e-signatures.
+
+**39. Mini CRM**
+
+Manage client info, communication history, and follow-up reminders. Suitable for freelancers or small businesses. Add sales funnel tracking and client reports.
+
+**40. Team Collaboration Whiteboard**
+
+An online whiteboard for real-time collaboration with drawing, writing, and sticky notes. Useful for remote teams brainstorming and designing. Add templates and recording playback.
+
+## Entertainment Creativity Project Ideas
+
+Entertainment creativity projects let you unleash your creativity and make something fun.
+
+**41. Meme Maker**
+
+Upload images, add text, and generate memes with various templates. Everyone loves memes. Add popular templates and GIF creation.
+
+**42. Avatar Generator**
+
+Generate personalized avatars based on names or keywords. Avoid duplicate avatars with AI-generated unique ones. Add multiple styles and batch generation.
+
+**43. Quote Generator**
+
+Randomly generate motivational or funny quotes for social media sharing. Useful for social media posts or signatures. Add AI generation and quote images.
+
+**44. Horoscope Checker**
+
+Check daily horoscopes for love, career, and finance. Add zodiac compatibility and zodiac knowledge.
+
+**45. Fortune Teller Tool**
+
+Online fortune-telling with custom fortunes for decision-making or entertainment. Simulate temple fortune-telling. Add fortune explanations and wish tracking.
+
+**46. Guess the Number Game**
+
+Classic guess-the-number game where the computer generates a number and the user guesses. Simple but fun. Add difficulty levels and leaderboards.
+
+**47. Typing Speed Test**
+
+Test typing speed and accuracy with different difficulty levels and languages. Improve typing speed—essential for programmers. Add practice modes and code typing.
+
+**48. Memory Game**
+
+Card-matching game to test memory with different difficulty levels. Classic memory training game for all ages. Add themes and multiplayer modes.
+
+**49. Jigsaw Puzzle Game**
+
+Upload images to create jigsaw puzzles with different difficulty levels. Make puzzles with your own photos. Add timers and 3D puzzles.
+
+**50. Music Player**
+
+Simple music player with playlists, lyrics, and playback controls. Practice front-end audio processing. Add visualizations and music recommendations.
+
+**51. Movie Recommendation Tool**
+
+Recommend movies based on user preferences with ratings, reviews, and favorites. Helps choose good movies. Add AI recommendations and Douban API integration.
+
+**52. Recipe Sharing Platform**
+
+Share and browse recipes with search, categories, and favorites. Record your signature dishes or learn from others. Add ingredient lists and nutritional analysis.
+
+**53. Travel Diary**
+
+Record travel experiences with photos, location tags, and travel maps. Preserve travel memories. Add route planning and travel albums.
+
+**54. Pet Diary**
+
+Record pet daily life with photos, weight, and vaccine info. Helps pet owners take better care of pets. Add health reminders and multi-pet management.
+
+**55. Mood Diary**
+
+Record daily moods with colors or emojis and generate mood curves. Understand emotional patterns. Add mood analysis and sharing.
+
+**56. Dream Recorder**
+
+Record dream content with tags, search, and theme analysis. Many people are interested in dreams. Add dream interpretations and keyword statistics.
+
+**57. Random Story Generator**
+
+Input keywords for AI-generated random stories in different styles. Inspire creativity or entertain. Add story continuation and multiple endings.
+
+**58. Poetry Generator**
+
+Input themes for AI-generated poetry in different styles. Quickly create poetry for special occasions. Add rhyme detection and style selection.
+
+**59. Virtual Pet Game**
+
+Raise a virtual pet with feeding, playing, and leveling up. Nostalgic gameplay reminiscent of Tamagotchi. Add multiple pets and pet battles.
+
+**60. Online Doodle Board**
+
+Simple drawing tool with brushes, colors, and erasers, with save and share options. Unleash creativity with doodles. Add layers and collaborative drawing.
+
+## Education Project Ideas
+
+Education projects help with learning and growth—very meaningful.
+
+**61. Flashcard App**
+
+Memorize words with spaced repetition and automatic review scheduling. Scientifically proven to improve word retention. Add pronunciation and example sentences.
+
+**62. Math Problem Generator**
+
+Generate math problems of varying difficulty, including addition, subtraction, multiplication, division, equations, and geometry. Helps students practice math. Add automatic grading and error tracking.
+
+**63. Coding Problem Repository**
+
+Collect coding problems with online coding and answer viewing. Helps learn programming and improve algorithm skills. Add code evaluation and sharing.
+
+**64. Study Plan Tool**
+
+Create study plans, break down learning goals, and track progress. Helps systematize learning and avoid procrastination. Add smart recommendations and study reports.
+
+**65. Error Notebook**
+
+Record mistakes with photos, categorization, and periodic review. Effective for improving grades by focusing on weak areas. Add OCR and error analysis.
+
+**66. Knowledge Card App**
+
+Record knowledge points with Markdown, tags, and search, with random review. Similar to Anki for fragmented learning. Add spaced repetition and card sharing.
+
+**67. Mind Mapping Tool**
+
+Create mind maps with node editing, colors, and icons, exportable as images. Helps organize thoughts and build knowledge systems. Add AI generation and collaborative editing.
+
+**68. Class Schedule Manager**
+
+Manage class schedules with reminders, homework records, and exam countdowns. Essential for students to organize study time. Add course material management and course evaluations.
+
+**69. Study Note Sharing Platform**
+
+Share and browse study notes with Markdown, code highlighting, and favorites. Learn from top students and access high-quality notes. Add note ratings and paid notes.
+
+**70. Online Practice Questions**
+
+Practice questions across subjects and difficulty levels, with history and error tracking. Systematic practice improves exam performance. Add smart recommendations and mock exams.
+
+**71. Recitation Assistant**
+
+Input content for memorization with segmented recitation, keyword masking, and voice reading. Helps memorize texts, poems, and speeches. Add dictation and voice recognition.
+
+**72. Study Time Tracker**
+
+Record daily study time and generate reports and trends. Quantify study efforts and motivate persistence. Add focus analysis and leaderboards.
+
+**73. Book Note Manager**
+
+Record book notes with book info, reading progress, excerpts, and thoughts. Makes reading more rewarding and builds personal knowledge libraries. Add book recommendations and reading reports.
+
+**74. Thesis Management Tool**
+
+Manage academic papers with reading notes and reference formatting. Essential for researchers and graduate students. Add PDF annotations and citation networks.
+
+**75. Online Whiteboard Teaching**
+
+Teachers can explain on a whiteboard while students watch in real-time, with recording playback. Suitable for remote teaching and tutoring. Add interaction and group discussion.
+
+**76. Homework Submission System**
+
+Students submit homework, teachers grade and score, with file upload and online preview. Makes homework management more efficient. Add plagiarism detection and grade statistics.
+
+**77. Exam Countdown**
+
+Set exam dates and display countdowns with study plans and review reminders. Increases urgency and motivates review. Add review progress tracking and study plans.
+
+**78. Study Group Management**
+
+Create study groups to share materials, discuss questions, and supervise each other. Makes learning less lonely and fosters mutual help. Add check-ins and voice discussions.
+
+**79. Skill Tree Visualization**
+
+Show learning paths like game skill trees, unlocking the next after completing one. Gamifies learning for more fun. Add achievement systems and multiple paths.
+
+**80. Learning Achievement System**
+
+Complete learning tasks to earn achievements and badges, increasing motivation. Gamifies learning for more sense of accomplishment. Add leaderboards and achievement sharing.
+
+## Social Interaction Project Ideas
+
+Social interaction projects involve user interaction and are relatively complex.
+
+**81. Anonymous Chat Room**
+
+Randomly match strangers for text and emoji chats, with privacy protection. Lets people express themselves freely. Add interest matching and reporting.
+
+**82. Confession Tree Platform**
+
+Anonymously post confessions for others to comment and comfort, like a tree hole. Lets people release stress and receive warmth from strangers. Add mood analysis and professional counseling.
+
+**83. Mini Q&A Community**
+
+Users ask and answer questions with likes, comments, and accepted answers. Similar to Zhihu for sharing and acquiring knowledge. Add point systems and topic following.
+
+**84. Blog Platform**
+
+Users publish blog posts with Markdown, comments, and follows. Lets people share ideas and build personal brands. Add RSS subscriptions and article columns.
+
+**85. Photo Sharing Platform**
+
+Share photos with likes, comments, and tags, similar to Instagram. Records life's beautiful moments and shares with friends. Add filters and photo stories.
+
+**86. Short Video Sharing Platform**
+
+Upload and watch short videos with likes, comments, and follows. The most popular content format for showcasing talent and creativity. Add video editing and topic challenges.
+
+**87. Music Sharing Platform**
+
+Share favorite music, create playlists, and comment and recommend. Discover new music and connect with music lovers. Add music recommendations and synchronized lyrics.
+
+**88. Book Review Sharing Platform**
+
+Share book reviews, rate and recommend books, and discover good reads. Helps choose books and avoid bad ones. Add reading progress sync and booklists.
+
+**89. Movie Review Platform**
+
+Share movie reviews, rate and recommend movies, and view reviews. Helps choose movies and understand their quality. Add watch history and movie lists.
+
+**90. Food Sharing Platform**
+
+Share food photos and recipes, mark restaurant locations, and view recommendations. Discover great restaurants and learn cooking. Add maps and food check-ins.
+
+**91. Travel Sharing Platform**
+
+Share travel experiences and guides, mark attractions, and view travelogues. Gets travel inspiration and plans trips. Add itinerary planning and travel maps.
+
+**92. Skill Exchange Platform**
+
+Users post their skills and skills they want to learn, exchanging skills for free. Learn new skills and meet like-minded friends. Add matching algorithms and online teaching.
+
+**93. Secondhand Trading Platform**
+
+Post and browse secondhand

translations/en/Vibe Coding 零基础教程/20 项目实战/进阶 | 企业级 AI 编程实战项目.md

@@ -0,0 +1,216 @@
+# More Enterprise-level AI Programming Practical Projects
+
+Hello, I'm Yupi.
+
+In previous articles, we learned about the Vibe Coding project development process and practiced many personal projects. These projects can help you get started with AI programming and master basic development skills.
+
+But if you want to further improve your programming skills and create more competitive projects to help you find programming-related jobs and secure offers, then I recommend you learn more enterprise-level AI programming practical projects.
+
+As the founder of China's top [Programming Learning Website - Code Navigation](https://codefather.cn/), I've been leading everyone in project development for several years. Many students have successfully landed offers at major companies by learning these projects!
+
+![](https://pic.yupi.icu/1/de62f4cc-32cb-4814-aca7-03c232d0e2d2.png)
+
+In this article, I'll introduce my enterprise-level AI project tutorials on the [Code Navigation Platform](https://codefather.cn/). These projects are carefully designed by me, aligned with real enterprise business scenarios, and cover all aspects of AI application development. Project materials include complete video/text tutorials, runnable source code, resume writing guidance, interview question solutions, and Q&A support, providing a one-stop service.
+
+👉🏻 Before starting a project, I recommend reading [Yupi's Project Learning Suggestions](https://www.codefather.cn/post/1797431216467001345) to choose the right project for you and learn efficient project development methods.
+
+## 1. Why Learn Enterprise-level Projects?
+
+You might ask: I already know how to do projects with Vibe Coding, why should I learn enterprise-level projects?
+
+The reason is simple: the gap between personal projects and enterprise-level projects is huge.
+
+Personal projects focus on quickly implementing features, while enterprise-level projects emphasize:
+- Complete development process (requirements analysis, architecture design, development, testing, deployment)
+- Standardized code quality (code standards, design patterns, unit testing)
+- Real business scenarios (user authentication, permission control, data security)
+- Systematic architecture design (microservices, distributed systems, high concurrency)
+- Continuous operation and monitoring (logging, monitoring, performance optimization)
+
+Learning enterprise-level projects not only improves your technical skills but also helps you understand how real commercial projects are developed. This is immensely helpful for job hunting and work.
+
+Moreover, these projects incorporate the latest AI technologies, allowing you to keep up with the AI era while mastering traditional development skills.
+
+## 2. Yupi's AI Project Series
+
+Below are the enterprise-level AI project tutorials on the Code Navigation platform. These projects are designed and taught by me, each with complete tutorials and supporting materials.
+
+👉🏻 You can also directly visit the [Code Navigation AI Project Learning Zone](https://www.codefather.cn/course?sortField=priority&tags%5B%5D=AI%E9%A1%B9%E7%9B%AE) to view all AI projects.
+
+### AI No-code Application Generation Platform
+
+An enterprise-level AI code generation platform developed with Spring Boot + LangChain4j + LangGraph4j + Vue 3, comparable to major tech companies. This is a microservices full-stack project focusing on AI development + backend architecture, featuring AI agents, AI workflows, various design patterns, Spring Cloud + Dubbo microservices architecture, and multi-dimensional system optimization.
+
+Target audience: Those with some project experience who want to learn microservices architecture and AI agent development.
+
+[👉🏻 Start Learning](https://www.codefather.cn/course/1948291549923344386)
+
+Technical highlights:
+- LangChain4j + LangGraph4j AI framework
+- AI agents and workflows
+- Spring Cloud + Dubbo microservices
+- Practical application of various design patterns
+- COS object storage
+- Selenium automation
+- Reactive programming
+- Enterprise-level monitoring system
+
+![Yupi AI No-code Application Generation Platform Project](https://pic.yupi.icu/1/1753332293578-0ccc2a53-6d98-41a7-b714-16fa6a7f095f-20250814154720271.png)
+
+### Intelligent Collaborative Cloud Gallery
+
+An enterprise-level intelligent collaborative cloud gallery platform based on Vue 3 + Spring Boot + COS + WebSocket. Covers enterprise mainstream business scenarios like file storage and management, content retrieval, permission control, and real-time collaboration. Technologies include MySQL sharding, Redis + Caffeine multi-level caching, COS object storage, Sa-Token permission control, DDD domain-driven design, WebSocket real-time communication, and AI drawing models.
+
+Target audience: Those who want to learn enterprise-level architecture design and real-time collaboration features.
+
+[👉🏻 Start Learning](https://www.codefather.cn/course/1864210260732116994)
+
+Technical highlights:
+- Vue 3 + Spring Boot full-stack
+- MySQL sharding
+- Redis + Caffeine multi-level caching
+- COS object storage
+- WebSocket real-time collaboration
+- AI drawing model integration
+- DDD domain-driven design
+
+![Yupi Intelligent Collaborative Cloud Gallery Project](https://pic.yupi.icu/1/image-yupic.png)
+
+### AI Quiz Application Platform
+
+An AI quiz application platform based on React + Spring Boot. Deep dive into business scenarios to learn practical React cross-platform mini-program development, Vue3 AI application website development, backend sharding, distributed locks, caching, idempotent design, design patterns, RxJava reactive programming, SSE real-time push, thread pool isolation, etc., significantly improving development experience and architecture design capabilities.
+
+Target audience: Those who want to learn cross-platform development and reactive programming.
+
+[👉🏻 Start Learning](https://www.codefather.cn/course/1790274408835506178)
+
+Technical highlights:
+- React cross-platform mini-program development
+- Vue 3 + Spring Boot full-stack
+- MySQL sharding
+- Distributed locks and caching
+- RxJava reactive programming
+- SSE real-time push
+- AI question generation
+
+![Yupi AI Quiz Application Platform Project](https://pic.yupi.icu/1/20240604145229177.png)
+
+### Intelligent Interview Practice Platform
+
+An intelligent interview practice platform based on React + Next.js + Spring Boot, a real enterprise-level project. Learn practical React + Next.js server-side rendering website development, backend Redis multi-level caching, Elasticsearch search, Redisson advanced data structures, Druid concurrency, HotKey detection, Sa-Token permission control, Nacos dynamic configuration, Sentinel flow control, anti-crawler design, etc., to enhance technical application capabilities.
+
+Target audience: Those who want to learn server-side rendering and advanced caching techniques.
+
+[👉🏻 Start Learning](https://www.codefather.cn/course/1826803928691945473)
+
+Technical highlights:
+- Next.js server-side rendering
+- Redis multi-level caching
+- Elasticsearch search
+- Redisson advanced data structures
+- HotKey detection
+- Sentinel flow control
+- Anti-crawler design
+
+![Yupi Intelligent Interview Practice Platform Project](https://pic.yupi.icu/1/image-20240928131639783.png)
+
+### Multi-WeChat Official Account Management System
+
+A WeChat official account intelligent management system based on Spring Boot + WxJava + Spring AI. Practical official account business scenarios include multi-account management, server authentication, material management, reply management, menu management, AI auto-reply, etc., involving practices like intranet penetration and virtual threads.
+
+Target audience: Those who want to learn official account development and AI auto-reply.
+
+[👉🏻 Start Learning](https://www.codefather.cn/course/1932410836060119041)
+
+Technical highlights:
+- WxJava official account development
+- Spring AI framework
+- Multi-account management
+- AI auto-reply
+- Intranet penetration
+- Virtual threads
+
+![Yupi Multi-WeChat Official Account Management System Project](https://pic.yupi.icu/1/1743665084072-ce18bc93-e711-40d3-9111-14e5cae8587e.png)
+
+### AI Programming Assistant
+
+An AI programming assistant developed with Spring Boot + LangChain4j, suitable for beginners in AI application development. Through this project, you'll practice mainstream uses and features of the LangChain4j framework, including conversation memory, structured output, AI Service, RAG, tool calling, MCP, SSE, etc.
+
+Target audience: Those who have just learned Spring Boot and want to start AI application development.
+
+[👉🏻 Start Learning](https://www.codefather.cn/course/1943267371799080961)
+
+Technical highlights:
+- Comprehensive LangChain4j framework practice
+- Conversation memory and context management
+- Structured output and data parsing
+- RAG knowledge base Q&A
+- Tool calling and MCP integration
+- SSE streaming output
+
+![Yupi AI Programming Assistant Project](https://pic.yupi.icu/1/1752027043776-cd6d17ed-175f-4c7e-8b25-aee81a5296b2-20250710114302208.png)
+
+### AI Programmer Training Ground
+
+A full-stack AI application developed with Java + Vue + LangChain4j to help programmers improve their skills through challenges. This project focuses on AI programming, practicing LangChain4j framework, structured output, prompt engineering, and mastering enterprise-level AI application development processes and techniques.
+
+Target audience: Those with Java and Vue basics who want to improve AI application development skills.
+
+[👉🏻 Start Learning](https://www.codefather.cn/course/1965699176489484289)
+
+Technical highlights:
+- LangChain4j framework practice
+- Structured output and data parsing
+- Prompt engineering and optimization
+- Vue 3 full-stack development
+- Gamified learning design
+
+![Yupi AI Programmer Training Ground Project](https://pic.yupi.icu/1/1760438722374-4e8edebc-d975-4873-8f06-9e9856733694.png)
+
+### Intelligent BI Platform
+
+An intelligent BI data analysis platform based on Spring Boot + React. Learn and practice asynchronous processing, thread pools, RabbitMQ message queues, AI application development, AIGC prompt optimization, etc. Users can upload data, and AI automatically generates analysis reports and charts.
+
+Target audience: Those who want to learn message queues and AI data analysis.
+
+[👉🏻 Start Learning](https://www.codefather.cn/course/1790980531403927553)
+
+Technical highlights:
+- Asynchronous processing and thread pools
+- RabbitMQ message queues
+- AI data analysis
+- AIGC prompt optimization
+- Chart generation
+
+![Yupi Intelligent BI Platform Project](https://pic.yupi.icu/1/bi-20231026151929666.png)
+
+### AI Auto-reply Tool
+
+An intelligent monitoring and AI auto-reply tool based on Spring Boot. Practice mediator pattern + OpenAI integration, master scheduled task scheduling, third-party platform integration, Docker containerized deployment, and cultivate enterprise-level architecture design thinking.
+
+Target audience: Those who want to learn design patterns and automated tool development.
+
+[👉🏻 Start Learning](https://www.codefather.cn/course/1966420016440999938)
+
+Technical highlights:
+- Mediator pattern
+- OpenAI integration
+- Scheduled task scheduling
+- Third-party platform integration
+- Docker containerized deployment
+
+![Yupi AI Auto-reply Tool Project](https://pic.yupi.icu/1/1756260059900-8be2cc5d-0cfc-4b7f-b99d-47c82af1925c.png)
+
+Keep it up, future AI engineers! 💪
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Code Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guides, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheat Sheet: [Internship/Campus Recruitment/Social Recruitment High-frequency Topics, Enterprise Question Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Builder: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interview: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Get Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/20 项目实战/进阶 | 企业项目开发流程.md

@@ -0,0 +1,312 @@
+# Enterprise Project Development Process
+
+> Unveiling how large-scale projects are born in big companies
+
+Hello, I'm Yupi.
+
+In previous articles, we learned about the project development process of Vibe Coding and practiced many personal projects. Most of these projects were completed individually, from requirements to design to development to deployment, all controlled by oneself.
+
+But you might wonder: What is the process like for enterprise projects? Especially those projects in big companies with millions of users, how do they differ from the projects we do while learning programming?
+
+Honestly, the difference is huge! Developing projects on your own is a solo effort, where you control your own destiny without dragging down teammates. But developing projects in an enterprise is like teaming up for a raid, where everyone is in the same boat, and each person affects the entire project.
+
+![](https://pic.yupi.icu/5563/202311060822776.png)
+
+I interned at several companies during my university years, and I must say, the development process in big companies is significantly different from others. For most students, if they haven't worked in a big company, many aspects of the development process might be completely unknown.
+
+So, this article aims to unveil the project development process in big companies, helping everyone broaden their horizons. Even if you're currently using Vibe Coding for personal projects, understanding the enterprise development process can make your projects more standardized and professional. Moreover, if you aspire to work in a big company in the future, knowing these processes in advance will make you more competitive.
+
+![](https://pic.yupi.icu/5563/202311060822458.png)
+
+If you want a more intuitive understanding of the project development process in big companies, I highly recommend watching my video: [How Large-Scale Projects Are Made in Big Companies](https://www.bilibili.com/video/BV11q4y1T7kY/). Combining the video with this article will yield better results.
+
+### Full View of the Development Process
+
+To standardize teams and ensure project progress, the development process in big companies is generally quite complex. It can be divided into many stages, summarized in a mind map:
+
+![Enterprise Project Development Process Mind Map](https://pic.yupi.icu/roadmap/enterprise-project-development-process.png)
+
+It's important to note that the above stages are not strictly executed in a top-down order; there may be overlaps between stages. For example, **technology selection** should actually be considered during the **design phase**.
+
+After working formally for over a year, I have experienced the complete development process of multiple projects. Below, I'll take you through it quickly from my perspective.
+
+(To make the content more interesting, the following story contains fictional elements.)
+
+## Requirements Phase
+
+It's Monday, and Yupi rides his electric scooter to the company as usual, unaware that a nightmare is about to begin.
+
+### Requirement Generation
+
+At 10 AM, the product manager approaches Yupi and tells him: After our system went live, users reported that many features are not user-friendly and need major changes.
+
+The boss also approaches Yupi and says: Today, I opened the page and it took more than ten seconds to load. The performance of our system is terrible!
+
+Yupi thinks: Oh no, we're doomed! Probably need to start a new project, and more meetings are coming.
+
+![](https://pic.yupi.icu/5563/202311060822455.png)
+
+Sure enough, soon after, a "Welcome to the Meeting" invitation pops up on the screen.
+
+### Requirement Review
+
+The next morning, the boss, product manager, testers, a few senior developers, and Yupi gather in the meeting room to discuss whether the mentioned requirements are **reasonable and whether they should be implemented**.
+
+The product manager opens a document and says: For this iteration, we need to implement these requirements. Let me explain them in detail, and everyone can evaluate if there are any issues.
+
+### Requirement Analysis
+
+As the product manager continues to elaborate on the screen, one of the senior developers can't hold back.
+
+Senior Developer: This requirement is unreasonable!
+
+Product Manager: Why is it unreasonable? Users have this need!
+
+Senior Developer: I know, but it's impossible to implement!
+
+Thus begins the classic product vs. developer debate...
+
+![](https://pic.yupi.icu/5563/202311060822360.png)
+
+Meanwhile, Yupi is calmly analyzing **how to implement this requirement** in the corner. After a while, he proposes a solution with low impact and quick implementation, ending the debate.
+
+In the AI era, we can also use AI tools (like ChatGPT, Cursor) to assist in requirement analysis, quickly generating multiple technical solutions for comparison, greatly improving the efficiency of requirement analysis.
+
+### Scheduling
+
+After confirming that the requirement is reasonable and feasible, the product manager asks: When can this requirement be launched?
+
+Senior Developer: I'm busy this week, maybe next week.
+
+Product Manager: The users are in a hurry; we need it this week!
+
+Senior Developer: I know, but I can't finish it!
+
+Thus begins the classic product vs. developer debate...
+
+![](https://pic.yupi.icu/5563/202311060822785.png)
+
+Yupi: How about we break this requirement into Feature A and Feature B? I'll complete Feature A this week, and Feature B can be tested next Tuesday and launched next Thursday?
+
+And so, we schedule the completion dates for each requirement one by one.
+
+## Design Phase
+
+Finally, the meeting is over. Looking at the time, it's already time to get off work!
+
+Well, the requirements discussion is done, and the product manager's work is somewhat completed, but Yupi's work is just beginning.
+
+Eager to start coding?
+
+**No, thinking about how to write the code is more important than writing the code itself.**
+
+### Architecture Design
+
+Yupi opens a document editor and a drawing tool, starts organizing the entire system, from the overall structure to the details, designing the system's hierarchical structure, interfaces, and communication methods between layers, important modules within each layer, and the physical deployment methods for each module.
+
+![Architecture Design of the Famous Framework Dubbo](https://pic.yupi.icu/5563/202311060822027.png)
+
+With the help of AI tools, we can now use AI to assist in generating architecture diagrams, analyzing the pros and cons of architecture solutions, and even let AI help us with technical research, greatly improving design efficiency. I recommend watching Yupi's video on [AI Drawing Guide and Tips](https://www.bilibili.com/video/BV1DP7JzAE7k/).
+
+### Outline Design
+
+After completing the architecture design, Yupi starts analyzing the requirements based on the PRD (Product Requirement Document) written by the product manager, organizing the functional modules needed for the system, and then analyzing the sub-modules within each functional module.
+
+Compared to the abstract architecture design, the outline design is more closely related to the requirements and is a refinement of the architecture design.
+
+To put it simply, if you're building a house, the architecture design considers the overall structure, how many floors there are, how the pipes connect on each floor, how many units per floor, how the foundation is laid, etc. The outline design, on the other hand, considers the internal layout of each unit, where the living room is, where the bathroom is, etc.
+
+> In many cases, the outline design and architecture design might be combined into one document, with no clear distinction.
+
+### Detailed Design
+
+After figuring out the system's functionalities, Yupi starts analyzing how each function will be implemented, what algorithms will be used, and what details need attention.
+
+### Solution Alignment
+
+After writing the design document, in the next meeting, Yupi and other developers (front-end, back-end, etc.) discuss the designed solutions, eventually producing a unified solution, and then everyone divides the work.
+
+### Test Case Design
+
+To ensure the system's functionality and stability, testers (or QA) are crucial. For detailed learning on software testing, check out [Software Testing Learning Path](https://www.codefather.cn/course/1789189862986850306/section/1990755616108359682). Testing isn't just clicking around on a webpage like we do in personal projects.
+
+In big companies, to ensure test coverage and improve testing efficiency, test cases are generally designed. For example: When a user clicks "Login" without entering any data, the expected result is to warn the user to enter a username and password.
+
+![Test Case Management](https://pic.yupi.icu/5563/202311060822534.png)
+
+After designing the test cases, they need to be reviewed by other team members, not just the testers. Because one person can easily overlook many testing details, it's best to have developers who are more familiar with the code help supplement them.
+
+Yupi himself wrote a few test cases that might have been missed and confirmed them with the testers, trying to expose issues during the testing phase rather than after deployment.
+
+## Development Preparation
+
+After writing design documents for almost a week, it's finally time to start building the project. But before that, there are still some preparations to be made.
+
+### Technical Research
+
+With technology evolving so rapidly, Yupi first researches the technologies needed or potentially needed for the project.
+
+In the AI era, technical research has become more efficient. We can use AI tools to quickly understand new technologies, compare different solutions, and even let AI generate technical selection reports.
+
+### Technology Selection
+
+Through research, Yupi identifies several technologies that can meet the requirements, but he starts to hesitate: Which one should I use? Should I use the SSM framework or Spring Boot? Should I use the Guava package or Apache Commons?
+
+Yupi opens the document editor again, starts comparing the pros and cons of different technologies, and feels a headache coming on. There are too many factors to consider in technology selection, such as:
+
+- From a technical perspective: performance, ease of use, stability, mainstream status and ecosystem, documentation detail
+- Considering the team: team members' familiarity with the technology, mastery level (whether there's someone proficient in the technology)
+- Considering the business: whether it fits the business scale (single machine or microservices), whether it fits the business (read-heavy, write-heavy, or analysis-heavy)
+
+For critical projects, Yupi doesn't dare to make the final decision alone. After writing his selection document, he discusses it with colleagues and the leader before finalizing the choice.
+
+### Resource Application
+
+After confirming the technology, resources need to be applied for. For example, Yupi uses a MySQL database, but where does this MySQL come from?
+
+Previously, Yupi would buy a cloud server and set up MySQL himself. But in enterprises, there are usually centralized resource management and allocation platforms. You just fill out the budget on the platform, wait for leadership approval, and then wait for the resources to be allocated. Never use your own or external servers to deploy projects privately; it's not safe!
+
+This time, Yupi directly applied for a cloud database costing over 20,000 yuan per year, which is a great deal.
+
+![](https://pic.yupi.icu/5563/202311060822734.png)
+
+### Environment Preparation
+
+After applying for resources like the database, Yupi sets up a local development environment and a test environment identical to the requested machine versions, so he can connect directly later.
+
+### Project Initialization
+
+With the environment ready, since it's a new project, Yupi needs to create a minimal runnable project demo, using **scaffolding** to automatically generate code instead of starting from scratch, creating files one by one, and manually typing repetitive code.
+
+Now there's a smarter way: using AI tools (like Cursor, GitHub Copilot) to assist in initializing projects and generating template code, saving a lot of time.
+
+### Dependency Installation
+
+After generating the project code, Yupi uses package management tools (front-end yarn/npm, Java Maven/Gradle, etc.) to automatically install dependencies, and then the project demo is ready to run!
+
+## Development Phase
+
+After completing the preliminary preparations, it's finally time for the most familiar part for programmers: writing code, which is also Yupi's favorite part.
+
+![](https://pic.yupi.icu/5563/202311060822531.png)
+
+Because designing the solution requires staying calm and thinking carefully, you can't listen to music while doing it. But once the design is finalized and it's clear what needs to be done, implementing the code is straightforward. At most, you might encounter some pitfalls and need to search online for solutions.
+
+### Local Development
+
+During development, Yupi usually writes code locally first, configuring hot-reload tools to automatically recompile and package the code when it's updated, without manually restarting the project, greatly improving development efficiency.
+
+By the way, enterprise development always uses version control systems like Git. Before starting development, remember to create your own branch and develop on that branch.
+
+### Remote Development
+
+Nowadays, remote development is becoming popular, allowing you to edit remote files as if they were local, directly modifying code on the server. Usually, each developer has their own development machine, and remote development eliminates the hassle of repeatedly deploying and debugging, improving efficiency. Generally, using development tools like VSCode with remote development plugins can achieve this. Yupi previously shared a simple [VSCode Remote Development Hands-on Video](https://www.bilibili.com/video/BV1s64y167cM), which you can check out.
+
+### AI-Assisted Development
+
+In 2025, AI-assisted development has become mainstream. Yupi now often uses AI tools like Cursor and GitHub Copilot when writing code, which can:
+
+- Automatically complete code, improving coding efficiency
+- Generate unit tests, ensuring code quality
+- Explain complex code, aiding understanding
+- Detect potential bugs, providing early warnings
+- Refactor and optimize code, enhancing maintainability
+
+I recommend using the tools in the [AI Resource Collection](https://ai.codefather.cn/) to improve development efficiency.
+
+![AI Resource Collection Website](https://pic.yupi.icu/1/AI%E8%B5%84%E6%BA%90%E5%A4%A7%E5%85%A8%E7%BD%91%E7%AB%99.png)
+
+### Code Optimization
+
+While writing code, Yupi always maintains the good habit of actively optimizing code, paying attention to time and space complexity. When repetitive code accumulates, he abstracts it into functions or uses design patterns. Previously, Yupi shared his programming habits in an article: [My Little Stubbornness When Writing Code](https://mp.weixin.qq.com/s?__biz=MzI1NDczNTAwMA==&mid=2247497781&idx=1&sn=9c5ec35cda90ca080ba1dbfa78429275&scene=21#wechat_redirect).
+
+### Unit Testing
+
+Note! Don't think testing is only the tester's job; developers also need to write small-scale tests to take responsibility for their code.
+
+Yupi usually writes unit tests for each database read/write function and business logic function. For Java, tools like JUnit are commonly used, and Jacoco can generate test coverage reports. After modifying critical code, unit tests should be executed to prevent unexpected errors.
+
+![Jacoco Test Coverage Report](https://pic.yupi.icu/5563/202311060822942.png)
+
+Now, AI tools can also automatically generate unit test code, saving a lot of repetitive work.
+
+### Development Integration
+
+Yupi finally completes the back-end code and self-tests it. The next step is to package and build the written code, then publish the executable project package to the test server, integrating with the front-end developer to verify the system's functionality by having them request his interfaces.
+
+## Testing Phase
+
+After Yupi and the front-end developer complete the integration, they inform the testers and product manager.
+
+Testing is a crucial phase in enterprises, often considered the last line of defense. The purpose of testing is to find bugs, identify issues in the system, and eliminate them during the testing phase.
+
+In enterprises, testing can be divided into several types.
+
+### Integration Testing
+
+Integration testing has a larger granularity than unit testing, combining multiple modules or code units to verify the integration and interaction between modules.
+
+Because individual functions might execute correctly, but when multiple functions are combined and called sequentially, issues might arise.
+
+For example, consider a bread-eating system:
+
+Function A: Xiao Yu eats a piece of bread
+
+Function B: Xiao Pi eats a piece of bread
+
+Only one piece of bread is available at a time, and executing Function A and B independently is allowed. But if both are executed together, the latter function will fail.
+
+![](https://pic.yupi.icu/5563/202311060822513.png)
+
+### System Testing
+
+System testing has an even larger granularity, testing the entire system, including not only software but possibly also hardware.
+
+### Product Experience
+
+Besides testers verifying system usability, the product manager also needs to experience whether the functionality meets expectations and is user-friendly. Most of the time, the product manager will suggest modifications during the experience, and developers might need to make further changes.
+
+### Acceptance Testing
+
+Finally, the testers and product manager confirm that there are no issues, and the last step is to have the end-users experience the entire product or feature. Only when the boss/users say it's fine, is it truly fine!
+
+## Submission Phase
+
+After confirming that the system has no issues, Yupi can publish the code to the remote repository, usually using version control systems like Git and SVN.
+
+### Code Submission
+
+Yupi first triggers a code submission locally (`git commit`). To ensure standardization, large projects generally use submission detection plugins (like Husky, pre-commit hooks) to prevent incorrect code from being submitted.
+
+Modern code submissions also automatically trigger:
+- Code formatting checks (Prettier, ESLint)
+- Unit test execution
+- Code style checks (CheckStyle, SonarLint)
+
+### Code Push
+
+The next step is to push the local commit to the remote branch with the same name. Large companies usually have push detection tools to check for code errors, cyclomatic complexity, code style, etc., similar to submission detection, preventing incorrect or non-standard code from being pushed.
+
+### Merge Request
+
+After pushing the code branch to the remote repository, Yupi initiates a branch merge request (MR or PR), hoping to merge the branch's code into the main branch (assuming the code is fine).
+
+![Initiating a New Merge Request](https://pic.yupi.icu/5563/202311060822490.png)
+
+### Code Review
+
+Submitting a merge request doesn't mean it can be merged directly; it needs to pass code review, known as CR (Code Review).
+
+Reviews can be done in two ways: manual review and automated review.
+
+Many students are familiar with manual review, usually conducted by your supervisor and other project leads who read and comment on your code. If everything is fine, they Approve (pass); otherwise, they send it back for revisions.
+
+What is automated review? It's essentially automated checks by machines to ensure your code complies with standards and can be built successfully. This is usually configured by project leads and helps identify issues that humans might miss.
+
+When Yupi first joined a new project, he was often tormented by automated reviews, frequently being flagged for seemingly trivial code issues, like needing to break lines after plus signs or adding empty lines at the end of files. But after paying attention to coding habits, he naturally adapted, which was indeed beneficial.
+
+Now, there are AI Code Review tools that can automatically detect issues in code and suggest optimizations, further improving code quality.
+
+## Release Phase
+
+After

translations/en/Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/AI 创意应用 - 互联网数字墓园项目.md

@@ -0,0 +1,87 @@
+# AI Creative Application - Internet Digital Graveyard Project
+
+This project is an interesting Internet Digital Graveyard website, commemorating those once glorious but now closed internet products, including Kaixin001, Qvod, Qianqian Jingting, Tudou, and more.
+
+This article does not cover the development process but shares a typical AI creative application case to help broaden your thinking.
+
+---
+
+Hello everyone, I'm programmer Yupi, and I'd like to share a somewhat interesting project. I used AI to create an `Internet Digital Graveyard`! It commemorates those once glorious internet products.
+
+![](https://pic.yupi.icu/1/image-20250803162751255.png)
+
+This idea came to me quite suddenly. A few days ago, while surfing the internet, I stumbled upon Renren and discovered that it officially ceased service in December 2024. Suddenly, I felt a mix of emotions. Thinking back to when I was a primary school student, I registered on Renren just to play Happy Farm, setting alarms every day to steal crops. That kind of joy is probably something today's Gen Z and Gen Alpha will never experience.
+
+Then I started wondering, how many websites and apps that once accompanied us have silently disappeared over the years? These digital memories deserve a place to be preserved. That's when I came up with the idea — to create a digital graveyard specifically for recording these closed internet products.
+
+The entire website, from design to material collection and development, was completely made using AI, all within an hour. I chose the graveyard theme, with a black and gray color scheme, and added subtle animations to create a commemorative atmosphere.
+
+Honestly, the result turned out better than I expected. So, I deployed it online and even got a domain: https://gualeme.cn (which translates to "Is it down?"). Feel free to visit it; it might stir some memories in you.
+
+![](https://pic.yupi.icu/1/image-20250803163450884.png)
+
+The website catalogues various domestic and international websites and apps that closed between 2009 and 2024, sorted by year. Each product has a brief introduction and its specific "date of death."
+
+![](https://pic.yupi.icu/1/image-20250803194606031.png)
+
+> Note: Since it's AI-generated, there might be inaccuracies. Corrections are welcome.
+>
+> Code is open-source: https://github.com/liyupi/better-coder/tree/master/dead-web
+
+For example, let me mention a few classic domestic products that truly represent the memories of a generation.
+
+## Classic Product Reviews
+
+### Renren
+
+As the Chinese version of Facebook, how much of the youth of the 80s and 90s did it carry? Back then, I played various mini-games on it tirelessly. The social interactions were simple and pure. Unfortunately, it officially bid farewell on December 2, 2024.
+
+![](https://pic.yupi.icu/1/image-20250803164326361.png)
+
+### Qianqian Jingting
+
+This was the first music player I ever used. I still remember the first song I listened to on it was "Far Away." Its simple interface and the then cutting-edge lyric synchronization feature accompanied many students' lives. After being acquired by Baidu in 2013 and renamed Baidu Music, it continued in another form, but the pure Qianqian Jingting era truly ended.
+
+![](https://pic.yupi.icu/1/f6ecbca783ff2cd-1.png)
+
+### Tudou
+
+Founded in 2005, Tudou coined the slogan "Everyone is the director of their life." In an era without TikTok or Kuaishou, Tudou was our main platform for sharing videos and showcasing creativity. It was also the first platform I ever uploaded a video to. I remember uploading short skits and game recordings, hoping for views to surpass 10.
+
+After 2012, Tudou merged with Youku, and in 2017, it was completely absorbed by Youku. From an independent brand to complete disappearance, Tudou's decline took several years. It's likely that kids today have never heard of it.
+
+![](https://pic.yupi.icu/1/image-20250803164620995.png)
+
+### Tencent Weibo
+
+Launched in 2010, it quickly gained traction with QQ's massive user base. In 2011, its registered users even surpassed Sina Weibo. However, the rise of WeChat completely changed the game. Tencent realized that WeChat better aligned with its strategic layout, so Tencent Weibo was strategically abandoned. By 2014, it was essentially in a "vegetative state," and it wasn't until 2020 that it officially announced the cessation of services.
+
+![](https://pic.yupi.icu/1/image-20250803165127414.png)
+
+### Qvod
+
+Among all the closed products, Qvod might be the most lamentable. In April 2014, the Qvod servers were shut down, and relevant personnel were sentenced. As for why it closed and the sentencing, I won't elaborate; those who know, know. Technologically, Qvod was indeed innovative, but it was misused.
+
+![](https://pic.yupi.icu/1/2025020712054687015.png)
+
+## Final Thoughts
+
+There are other websites like China Mobile's Fetion, Xiami Music, and Tianya Community, which I won't delve into. Each vanished product has its own story. Although they have declined, their marks on the history of the internet are indelible, and they carry the youth of our generation.
+
+Although this project is simple, it showcases an important application scenario of AI programming — quickly realizing creative ideas. When you have a good idea, you don't need to spend a lot of time learning complex technologies. Just use AI tools to turn your idea into reality in a short time.
+
+I hope this case inspires you, showing that AI programming isn't just for serious commercial projects but can also be used to realize various interesting ideas. Perhaps the next hit creative application will be made by you?
+
+Did these websites stir any memories for you? Which product do you think is the most regrettable? Feel free to share your thoughts in the comments!
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [Comprehensive AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheatsheet: [High-Frequency Exam Points for Internships/Campus Recruitment/Social Recruitment, Enterprise Real Questions Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Writing Tool: [Professional Templates, Rich Examples, Direct to Interviews](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Get Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/AI 创意应用 - 高考分数预测器项目.md

@@ -0,0 +1,119 @@
+# AI Creative Application - College Entrance Exam Score Predictor Project
+
+This project is an interesting AI College Entrance Exam Score Predictor, supporting various prediction methods such as scientific prediction, metaphysical prediction, psychological prediction, and social prediction.
+
+This article does not cover the development process but shares a typical AI creative application case to inspire your thinking.
+
+---
+
+The college entrance exam is approaching, but unfortunately, I won't be able to participate this year due to other commitments. So, I decided to help all the examinees by gifting them a tool I created—the **College Entrance Exam Score Predictor**!
+
+Ta-da! Here it is, the **College Entrance Exam Score Predictor**!
+
+Experience it here: [https://gaokao.codefather.cn](https://gaokao.codefather.cn/)
+
+![](https://pic.yupi.icu/1/1749196072689-c78e6eb5-3446-4071-a40a-28946ac6f2f8.png)
+
+This is a futuristic AI technology that can predict your college entrance exam scores. Does it sound impressive? Or perhaps a bit outrageous?
+
+Come on, test whether you'll get into Tsinghua University or Peking University? Or maybe a 985/211 university? Or perhaps... Bilibili University?
+
+**Recommended to watch the video demo for a better experience:** [https://bilibili.com/video/BV1wqTTzoEoo](https://www.bilibili.com/video/BV1wqTTzoEoo)
+
+![](https://pic.yupi.icu/1/1749196043750-928b991a-5a28-4fd1-a02c-a4e83740668f.png)
+
+There are 4 prediction methods, each of which is mind-blowing.
+
+First, let's try the **Scientific Prediction**, which sounds very scientific. This is an accurate prediction based on big data analysis and machine learning algorithms, using a multi-dimensional subject ability assessment model combined with statistical analysis and probability theory calculations, with an error rate of no more than 0.001%. The testing method is simple: you just need to input your **expected score for each subject** and click "Start Scientific Prediction." The system will then use advanced **Arithmetic addition** (yes, that's **addition**) combined with normal distribution theory for precise calculations.
+
+Let's give it a try!
+
+![](https://pic.yupi.icu/1/1749137873952-46d3d94b-7193-40d7-a7b3-9654e1a28c89.png)
+
+How about it? Isn't the prediction accurate? It predicts that I can get into a top-tier university—Tsinghua University!
+
+![](https://pic.yupi.icu/1/1749137431241-eb102e40-9bce-4159-98de-55a7d2bb2a81.png)
+
+If I had this tool back when I took the college entrance exam, wouldn't I have been unstoppable?
+
+![](https://pic.yupi.icu/1/1749196106729-172a1359-5072-4773-a0e2-cb87dc54d6fa.jpeg)
+
+You can also download a high-resolution certificate image, whether to share your joy with friends and family or to be the brightest star on your social media feed. This is another magical feature of the score predictor.
+
+![](https://pic.yupi.icu/1/1749196116388-607732bb-f48a-4961-8ec6-f6f715691ef5.jpeg)
+
+Next, let's try the **Metaphysical Prediction**. Metaphysics is a mysterious field—you believe it or you don't. This prediction combines ancient wisdom with modern divination, inheriting techniques like Zi Wei Dou Shu, Qi Men Dun Jia, and the I Ching, along with modern astrology and blood type psychology to predict your fate and academic fortune. Come on, input your name, zodiac sign, blood type, Chinese zodiac, and most importantly, your birth date!
+
+![](https://pic.yupi.icu/1/1749137831527-c5a50c49-36b9-44bb-ad3f-f7c6dc64a596.png)
+
+“
+
+Heaven and Earth, the universe vast,
+
+The Big Dipper, the Southern Dipper,
+
+The Five Elements, the Eight Trigrams,
+
+Yin and Yang, the cosmos rotates!
+
+The Three Powers established, the Four Symbols clear,
+
+The Six Jia Generals, the Nine Palaces Flying Stars!
+
+By the decree of the Supreme Lord Lao,
+
+The Mysterious Heavenly Emperor, show your power!
+
+”
+
+Wow, the result is Tsinghua University again. I guess it's just my destiny!
+
+![](https://pic.yupi.icu/1/1749137995189-dbdc4416-67c0-42d7-a974-a965230285d3.png)
+
+Now, let's try my most proud creation—the **Quantum Mechanics Prediction**, based on the Schrödinger equation and wave function theory, using quantum entanglement principles to analyze probabilities across multiple universes, breaking the temporal and spatial limitations of traditional predictions.
+
+![](https://pic.yupi.icu/1/1749138175465-f3983ac6-303d-4e4b-9a6f-16184b40cc6b.png)
+
+Just click the button to start the quantum computing engine, determining the distribution of your college entrance exam score across multiple universes through wave function collapse.
+
+![](https://pic.yupi.icu/1/1749138183051-34ce35ff-3144-4799-afc4-fa12e3af8f7d.png)
+
+Here it comes, here it comes!
+
+![](https://pic.yupi.icu/1/1749138203811-544cb676-863b-460b-b39e-398374cb2df2.png)
+
+As expected, Tsinghua University again! It's truly destiny! (I swear I added random logic in the program)
+
+![](https://pic.yupi.icu/1/1749138273388-e579158e-cd4a-45a4-bde4-0551c815b493.png)
+
+Let's take a look at the detailed analysis. Turns out my learning state is in a superposition, my potential fluctuates quantumly, I'm the legendary top student, and I'm the light of prestigious universities!
+
+![](https://pic.yupi.icu/1/1749138286782-f94e0b50-15c3-4980-8300-3ebe0504375c.png)
+
+Finally, let's try the traditional ancient method—**Quick Prediction**, a **thousand-year-old** mysterious divination technique that connects with the cosmic energy field through spiritual sensing to reveal heavenly secrets...
+
+![](https://pic.yupi.icu/1/1749138468801-0f4dc174-f55a-49f7-9cae-15ee5987fcef.png)
+
+This is just drawing lots! Here's one, bro~
+
+![](https://pic.yupi.icu/1/1749138486223-848f5962-bcdd-4faf-b2ff-27bb3d994098.png)
+
+Pour it! The final test result is still Tsinghua University, and this time **aiming for a perfect score**. Honestly, I feel like Tsinghua is almost too small for me...
+
+![](https://pic.yupi.icu/1/1749138501970-7306098c-3c4c-4c44-b56c-840c19b7d4bd.png)
+
+How about it? Can you feel the power of my College Entrance Exam Score Predictor? Seriously, I highly recommend everyone to **try it before the exam**—it will definitely boost your confidence!
+
+Finally, I wish all examinees success in their exams and a bright future! Remember to apply for computer science—learn programming, fix bugs, earn a high salary, and climb to the peak of life!
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheat Sheet: [Internship/Campus Recruitment/Social Recruitment High-Frequency Questions, Enterprise Exam Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Maker: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interview: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Get Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/Kimi K2 - AI 文档阅读助手项目实战.md

@@ -0,0 +1,133 @@
+# Kimi K2 - AI Document Reading Assistant Project Practice
+
+This project is an AI document reading assistant website that helps you quickly understand various complex documents (papers, technical documents, PDFs, etc.) and also helps you manage your documents.
+
+The project includes a complete frontend and backend, developed entirely through conversations with AI, without writing a single line of code. It is suitable for those who want to quickly practice the complete Vibe Coding development process and learn how to develop practical tools using AI.
+
+---
+
+Hello everyone, I am programmer Yupi. The school season has arrived, and I believe many friends are starting to collect and read papers. Like me, when learning new technical knowledge, I also read documents, and I deeply understand the pain of reading documents. Even though each word seems understandable when separated, when put together, it becomes incomprehensible.
+
+![](https://pic.yupi.icu/1/1757559057843-b9d37369-49bf-4eec-878a-c70ac945cbd9.png)
+
+To help everyone avoid the torment of reading documents, I developed an AI document assistant website using AI, which can help you quickly understand various complex documents and also manage your documents.
+
+![](https://pic.yupi.icu/1/1757561248387-205bf672-7a6c-452a-a283-698fb526601c.png)
+
+The website is completely free, and the code is fully open source!
+
+Open-source repository: [github.com/liyupi/literature-assistant](https://github.com/liyupi/literature-assistant)
+
+![](https://pic.yupi.icu/1/1757829143308-d5bfdac6-847a-4061-9194-4821bdf3d3dc.png)
+
+Below, I will first teach you how to use the website, then share the process of making this website, and also introduce the method of using Claude Code in China.
+
+⭐️ Recommended to watch the video version, learn in 2 minutes: [bilibili.com/video/BV1MnpVzdETW](https://www.bilibili.com/video/BV1MnpVzdETW/)
+
+## How to Use?
+
+First, download the open-source code to your computer, then directly run the quick start script I provided, and you can see the effect by opening the webpage.
+
+💡 Make sure your computer has Node.js and Java environments installed. You can refer to the README.md document for installation instructions.
+
+![](https://pic.yupi.icu/1/1757567928358-ad506045-faaf-47b1-b742-190c83c94ad3.png)
+
+When you want to read a document, click the "Single Import" button, upload the document file, and then you need to fill in the Kimi AI API Key.
+
+![](https://pic.yupi.icu/1/1757560732751-de713284-c039-41c1-b9f4-0af34e4c703c.png)
+
+I chose Kimi because they just released the new version of the K2 model, which performs well in programming, reasoning, and document understanding;
+
+Moreover, it supports a context of 256K, so it can handle papers with hundreds of thousands of words.
+
+![](https://pic.yupi.icu/1/1757560219469-2eab0801-a9b3-49dd-b680-d1d27c1850cf.png)
+
+In benchmark tests like SWE-bench Verified, which focus on real software engineering tasks, the new Kimi K2 model also performs well:
+
+![](https://pic.yupi.icu/1/1757560161782-1c78bd3c-a3a5-42f9-b79b-a0b07d808e6b.png)
+
+Just log in to the [Kimi Developer Console](https://platform.moonshot.cn/), then go to API Key management to get a key for calling the large model.
+
+![](https://pic.yupi.icu/1/1757560312832-cfd4158d-8c31-4c22-8b42-573551334863.png)
+
+Although new users have free credits, do not leak your key!
+
+![](https://pic.yupi.icu/1/1757560674974-180d8475-e83e-4b35-ba9b-2ded866aa730.png)
+
+After filling in the API Key, you can generate the document reading guide, and the generation speed is very fast.
+
+![](https://pic.yupi.icu/1/1757560771758-4c3df93e-889d-4c74-afa2-90e69347f286.png)
+
+The effect generated by AI is quite good, with both text and images, helping you understand complex documents faster.
+
+![](https://pic.yupi.icu/1/1757560820325-87111dd8-cd82-49d0-9385-24ea9a33e885.png)
+
+You can also batch import multiple documents and simultaneously call AI to generate reading guides, improving efficiency.
+
+![](https://pic.yupi.icu/1/1757560886812-1706415c-cff5-4475-872f-ba66891563f7.png)
+
+In addition, you can use this website as your smart document collection folder, where you can categorize and retrieve imported documents, download original files, and view document reading guides at any time. **Don't let your collected documents get lost again~**
+
+![](https://pic.yupi.icu/1/1757560925975-079ad961-7cc8-498b-99e2-84a4a534023f.png)
+
+## How to Implement?
+
+In the past, such a website might take several days to build. But now, AI programming technology is mature. I chose Claude Code AI development tools and easily completed it in one day without writing a single line of code.
+
+First, enter a command in the terminal to install Claude Code:
+
+```bash
+npm install -g @anthropic-ai/claude-code
+```
+
+Then execute the `claude` command, and you can ask it questions~
+
+Result: an error occurred!
+
+![](https://pic.yupi.icu/1/1756451588360-37620a0b-bc2f-4ad5-adf9-4efde87f17ed.png)
+
+**Damn it, this thing doesn't support use in China yet!**
+
+But it's okay, we can switch to Kimi. Enter a command in the terminal to configure an environment variable (note the difference between operating systems):
+
+```bash
+# Linux/macOS start the high-speed version of the kimi-k2-turbo-preview model
+export ANTHROPIC_BASE_URL=https://api.moonshot.cn/anthropic
+export ANTHROPIC_AUTH_TOKEN=<Your API Key>
+export ANTHROPIC_MODEL=kimi-k2-turbo-preview
+export ANTHROPIC_SMALL_FAST_MODEL=kimi-k2-turbo-preview
+
+# Windows Powershell start the high-speed version of the kimi-k2-turbo-preview model
+$env:ANTHROPIC_BASE_URL="https://api.moonshot.cn/anthropic";
+$env:ANTHROPIC_AUTH_TOKEN=<Your API Key>
+$env:ANTHROPIC_MODEL="kimi-k2-turbo-preview"
+$env:ANTHROPIC_SMALL_FAST_MODEL="kimi-k2-turbo-preview"
+```
+
+Then you can happily use Claude Code to generate code~
+
+![](https://pic.yupi.icu/1/1756451713145-29e5ba15-76b2-4848-903a-f098b942e2f9.png)
+
+For a website that includes a complete frontend and backend, it's difficult to generate satisfactory results with just one prompt. Therefore, we need to **decompose the work steps** like real enterprise development. First, the backend, then the frontend, and finally, connect and debug the frontend and backend. It's best to develop features one by one and adjust promptly if problems arise.
+
+Here are some reference prompts:
+
+![](https://pic.yupi.icu/1/1757567728565-5724de3e-7863-457b-9866-368c1535bd2c.png)
+
+---
+
+That's all for this sharing. I hope this tool is helpful to everyone, and don't forget to support Yupi with likes, shares, and comments. Thank you all~
+
+![](https://pic.yupi.icu/1/1757829315038-73ef4fd7-7fef-4fa2-859d-11bb28381933.webp)
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheatsheet: [Internship/Campus Recruitment/Social Recruitment High-Frequency Exam Points, Enterprise Real Questions Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Writing Tool: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interview: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Get Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/Spring AI - AI 超级智能体项目实战.md

@@ -0,0 +1,168 @@
+# Spring AI - AI Super Agent Project in Action
+
+This project is a comprehensive AI super agent tutorial that guides you through developing an AI Love Master application and a super agent with autonomous planning capabilities. Through this project, you'll master the essential AI concepts, practical tools, programming techniques, framework principles, and optimization skills that modern programmers must know.
+
+The project combines manual coding with Vibe Coding, integrating AI through Java backend + Spring AI code while using AI tools like Cursor to assist in coding. The focus is on learning enterprise AI application development, core concepts and implementation principles of AI agents, ReAct patterns, tool invocation, MCP, and other cutting-edge technologies.
+
+Ideal for students with some project experience who want to systematically learn AI agent development and enhance their resumes with AI projects to boost competitiveness.
+
+💡 The project is quite challenging, including video tutorials (dozens of hours), written tutorials (over 100,000 words), and ready-made resume writing and interview solutions. Completing it is expected to take 20+ hours, so it's not recommended for those without backend programming experience.
+
+Project code is open-source: https://github.com/liyupi/yu-ai-agent
+
+Project text + video tutorials: https://www.codefather.cn/course/aiagent
+
+Below are the project introduction and demonstration effects.
+
+---
+
+Hello everyone, I'm programmer Yupi. After another period of intense work, my new hands-on project tutorial on [Programming Navigation](https://mp.weixin.qq.com/s/I1oD6pAaWBvGLyFDT9AgvA?token=1925632390&lang=zh_CN) — AI Super Agent, is complete!
+
+This is a project tutorial centered around AI development, designed to help you master the essential AI concepts, practical tools, programming techniques, framework principles, and optimization skills that modern programmers must know, significantly boosting your job competitiveness!
+
+![](https://pic.yupi.icu/1/8052592c-97ce-4568-b82e-6153924a053c.png)
+
+In addition to dozens of hours of live, step-by-step video tutorials, I've also written a complete set of written tutorials (over 100,000 words), meticulously detailed!
+
+![](https://pic.yupi.icu/1/image-20250529133214316.png)
+
+That's not all—for each project, I've prepared detailed resume writing guides and interview solutions, so you can directly add the project to your resume and prepare for interviews, all in one go!
+
+![](https://pic.yupi.icu/1/image-20250529133336580.png)
+
+Sincerity begets sincerity. My dedication to project tutorials has been recognized by many students, helping them secure offers.
+
+![](https://pic.yupi.icu/1/%E5%9B%BE7%20-%20%E7%9C%9F%E5%AE%9E%E8%AF%84%E4%BB%B7.png)
+
+Next, Yupi will quickly introduce this project, hoping to reach more students who need it and turn it into their own project. With the early recruitment season for autumn jobs approaching, filling your resume with cutting-edge technologies will not only boost your confidence but also significantly improve your project development skills.
+
+**🧧 Ways to join the learning are provided later—don't miss out!**
+
+## Project Introduction
+
+A project tutorial centered around **AI development**, guiding you through developing an **AI Love Master application + a super agent with autonomous planning capabilities**, helping you master the essential AI concepts, practical tools, programming techniques, framework principles, and optimization skills that modern programmers must know, significantly boosting your job competitiveness!
+
+The `AI Love Master application` relies on AI models to solve users' emotional problems, supporting multi-turn conversations, Q&A based on custom knowledge bases, and autonomous tool invocation and MCP services to complete tasks, such as calling map services to find nearby locations and plan dates.
+
+![](https://pic.yupi.icu/1/1745225631067-44a111e1-1032-4f1c-bd69-9f08a59a654b.png)
+
+Additionally, you'll be guided step-by-step to complete the `autonomous planning agent YuManus` based on the ReAct pattern, which can use web search, resource downloads, and PDF generation tools to help users create complete date plans and generate documents:
+
+![](https://pic.yupi.icu/1/1745224663573-04af8f65-2da4-4ef9-8033-a179e703f9c4.png)
+
+Of course, after learning this project, you won't just be able to develop an AI Love Master—you'll truly master AI core concepts and development techniques, enabling you to flexibly develop various complex AI applications. Let your imagination run wild!
+
+Learn cutting-edge technologies, gain development experience, and design and develop real enterprise-level (commercial-grade) projects from 0 to 1. You're guaranteed to gain a lot!
+
+> Online learning: https://www.codefather.cn/course/aiagent (free preview available)
+
+To make it accessible to more students, I've **fully open-sourced** all the code! Students with strong skills can self-study, and a star on the repo would be a great support for Yupi!
+
+> Open-source repository: https://github.com/liyupi/yu-ai-agent
+
+![](https://pic.yupi.icu/1/image-20250529133739433.png)
+
+### 2. Project Benefits
+
+This project features a novel theme and real-world business scenarios, standing out from the typical CRUD projects. Yupi will guide you through practical applications of many new technologies and enterprise scenarios, using a single tutorial to cover all the **essential AI technologies** programmers must know, helping you become a sought-after talent in the AI era and significantly boosting your resume and job competitiveness.
+
+Yupi teaches **universal project development methods and architectural design patterns**. From this project, you'll learn:
+
+- Usage of mainstream AI application platforms
+- 4 ways to integrate AI models
+- AI development frameworks (Spring AI + LangChain4j)
+- Local deployment of AI models
+- Prompt engineering and optimization techniques
+- Spring AI core features: custom Advisor, conversation memory, structured output
+- RAG knowledge base in practice, principles, and optimization techniques
+- PgVector vector database + cloud database services
+- Tool Calling in practice and its principles
+- MCP model context protocol and service development
+- AI agent Manus principles and autonomous development
+- AI serviceization and Serverless deployment
+- Various new concepts: multimodal, agent workflows, A2A protocol, model evaluation, etc.
+
+For example, RAG core feature practice and full-link optimization:
+
+![](https://pic.yupi.icu/1/1746250760306-3b545556-59df-43a9-b843-b73ec9b5a867.png)
+
+Other project advantages:
+
+- Hands-on practice with both AI cloud platforms and programming, not just using AI services but also writing them yourself!
+- Teaching the latest AI technologies based on official documentation, meticulously detailed, tearing through docs and source code!
+- Sharing extensive AI extension knowledge and programming tips, mastering best practices!
+
+Yupi guides you through tearing apart the source code of the open-source framework OpenManus:
+
+![](https://pic.yupi.icu/1/ae36dd94-e87e-4dfe-ae31-81a6cc32c9e8.png)
+
+Even if you haven't learned the technologies mentioned above, it's no problem. Yupi's original project series focuses on hands-on practice, guiding you **from 0 to 1** to learn technical knowledge and immediately apply it in projects, ensuring practical learning.
+
+From requirements analysis, technology selection, project design, initialization, demo writing, development implementation, optimization, to deployment, every step is explained **from theory to practice**, leaving no detail untouched!
+
+Full of project feedback:
+
+![](https://pic.yupi.icu/1/20240604145231908.png)
+
+In addition to video tutorials, Programming Navigation projects also provide:
+
+- Detailed live notes (this project has a complete set of written tutorials)
+- Complete project source code (sectioned code for easier learning)
+- Q&A and exclusive project discussion groups
+- ⭐️ Ready-made resume writing (directly filling your resume)
+- ⭐️ Project extension ideas (setting you apart from others)
+- ⭐️ Project-related interview questions, solutions, and real interview experiences (prepare in advance, no surprises in interviews)
+- ⭐️ Frontend + Java backend universal project templates (quickly create projects)
+
+### Technology Stack
+
+The project focuses on Spring AI development framework practice, involving the use of various mainstream AI clients and tool libraries.
+
+- Java 21 + Spring Boot 3 framework
+- ⭐️ Spring AI + LangChain4j
+- ⭐️ RAG knowledge base
+- ⭐️ PGvector vector database
+- ⭐️ Tool Calling
+- ⭐️ MCP model context protocol
+- ⭐️ ReAct Agent construction
+- ⭐️ Serverless computing services
+- ⭐️ AI model development platform Bailian
+- ⭐️ Cursor AI code generation
+- ⭐️ SSE asynchronous push
+- Third-party APIs: SearchAPI / Pexels API
+- Ollama model deployment
+- Tool libraries: Kryo high-performance serialization + Jsoup web scraping + iText PDF generation + Knife4j API docs
+
+### Architecture Diagram
+
+![](https://pic.yupi.icu/1/AI%E6%99%BA%E8%83%BD%E4%BD%93%E6%9E%B6%E6%9E%84%E5%9B%BE.png)
+
+## Join the Learning
+
+Compared to learning from online tutorials, Yupi's project series offers a one-stop service: learning knowledge => practicing projects => reviewing notes => project Q&A => resume writing => interview solutions.
+
+Programming Navigation already has **over 20 project tutorials!** Each project focuses on different learning points, almost all of which are **full-stack** projects combining frontend and backend.
+
+![](https://pic.yupi.icu/1/image-20250529134710424.png)
+
+Welcome to join [Programming Navigation](https://mp.weixin.qq.com/s/I1oD6pAaWBvGLyFDT9AgvA?token=1925632390&lang=zh_CN), where you can access all past **original projects**, along with more original materials, learning and career guidance, hundreds of interview videos, and start your programming journey to success!
+
+![](https://pic.yupi.icu/1/image-20250120113756426.png)
+
+Tens of thousands of students have already started learning, and many have organized their own notes. It's clear that working on projects gives many students goals to persist in learning, more opportunities to get offers, and greater motivation. Charge ahead!
+
+![](https://pic.yupi.icu/1/image-20250417125909538.png)
+
+For more past projects, read [this article](https://mp.weixin.qq.com/s/9dpRTZijzeG0OuMgEyQhEg) to learn more and get Yupi's project learning guide for free!
+
+## Recommended Resources
+
+1) Yupi's AI navigation site: [AI resource collection, latest AI news, free AI tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation learning circle: [Learning paths, programming tutorials, hands-on projects, career guides, Q&A](https://www.codefather.cn)
+
+3) Programmer interview cheatsheet: [Internship/campus/social recruitment key points, enterprise question analysis](https://www.mianshiya.com)
+
+4) Programmer resume tool: [Professional templates, rich examples, direct to interviews](https://www.laoyujianli.com)
+
+5) 1-on-1 mock interviews: [Essential for internship/campus/social recruitment interviews to get offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/TRAE - AI 学习英雄小程序实战.md

@@ -0,0 +1,362 @@
+# TRAE - AI Learning Hero Mini Program Project
+
+This is a Learning Hero WeChat Mini Program project that helps users learn any topic through gamification. Users input the topic they want to learn, and the AI automatically generates related knowledge Q&A cards, allowing learning through multiple-choice questions.
+
+This is a pure Vibe Coding project, mainly explaining how to use the TRAE AI programming tool to quickly develop WeChat Mini Programs. By describing requirements in natural language, the AI automatically generates complete frontend and backend mini program code, and utilizes TRAE's integrated database and payment services. Suitable for those who want to learn AI development for mini programs or the TRAE tool.
+
+---
+
+Hello everyone, I'm programmer Yupi. Have you ever experienced this: wanting to learn some new technology, but getting a headache as soon as you open the documentation, getting distracted when watching videos, or buying a bunch of courses but always giving up halfway...
+
+Anyway, this happens to me often—I'm a late-stage learning anxiety patient.
+
+![](https://pic.yupi.icu/1/image-20250928214315214.png)
+
+As a programmer, I've long wanted to create a program to cure my learning anxiety, but I kept procrastinating because it seemed troublesome. Now that AI programming capabilities are powerful enough, I've finally taken action! Using TRAE, I completed this "Learning Hero" mini program in just 1 day, making learning as easy and fun as playing a game~
+
+![](https://pic.yupi.icu/1/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%BC%94%E7%A4%BA%E6%8B%BC%E5%9B%BE.png)
+
+Next, I'll first take you through the experience of this mini program, then share the tools and techniques used throughout the development process—another **step-by-step AI project development tutorial**.
+
+Bookmark this, and let's get started!
+
+> Recommended video version: https://bilibili.com/video/BV1yMn3zuE7L
+
+## Project Experience
+
+Opening the mini program, you'll see a very simple and vibrant interface. Click "Start Learning," then enter any topic you want to learn, such as Java basics.
+
+![](https://pic.yupi.icu/1/image-20250928215038368.png)
+
+The AI will automatically generate related knowledge Q&A cards based on the topic.
+
+![](https://pic.yupi.icu/1/image-20250928215106136.png)
+
+You just need to click through multiple-choice questions. Don't worry about making mistakes—each question comes with an explanation, so even if you've never heard of the topic before, you can keep learning.
+
+![](https://pic.yupi.icu/1/image-20250928215137518.png)
+
+Besides technical knowledge, you can try more topics, like a vocabulary word, a movie, or even a person.
+
+![](https://pic.yupi.icu/1/%E5%A4%9A%E7%AD%94%E9%A2%98%E6%8B%BC%E5%9B%BE.png)
+
+Originally dull concepts become lively and interesting through Q&A, instantly eliminating learning anxiety~
+
+You can also check your learning history to review or see explanations.
+
+![](https://pic.yupi.icu/1/%E5%AD%A6%E4%B9%A0%E5%8E%86%E5%8F%B2%E6%8B%BC%E5%9B%BE.png)
+
+Browse through it occasionally, and you'll become a learning hero!
+
+## Development Implementation
+
+In the past, this kind of mini program might have taken several days to develop.
+
+But now, using TRAE IDE's AI programming, I'll show you how to create this mini program **without writing a single line of code**.
+
+Steps:
+1. Prepare development tools
+2. Requirements analysis
+3. Solution design
+4. Service integration
+5. Backend development
+6. Frontend development
+7. Testing and validation
+8. Continuous optimization
+
+### 1. Prepare Development Tools
+
+Since we're using AI for development, tool selection is crucial. This time, I used the AI programming tool [TRAE](https://www.trae.ai/) because its SOLO mode has been incredibly popular lately, and I wanted to try it.
+
+Unlike traditional human-led + AI-assisted programming, SOLO mode lets **AI take the lead and automatically execute development**. You just need an idea, and with AI's help, you can bring it to life.
+
+![](https://pic.yupi.icu/1/image-20250928220322788.png)
+
+Additionally, since we're developing a frontend project, we'll need the [Node.js environment](https://nodejs.org/zh-cn/download). And since it's a WeChat Mini Program, we'll need the [WeChat Developer Tools](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html). Just download and install them from the official websites.
+
+![](https://pic.yupi.icu/1/%E4%B8%8B%E8%BD%BD%E5%B7%A5%E5%85%B7%E6%8B%BC%E5%9B%BE.png)
+
+### 2. Requirements Analysis
+
+With the tools ready, enter TRAE's SOLO mode and open a project folder cleaner than my face.
+
+![](https://pic.yupi.icu/1/image-20250928220647365.png)
+
+First, we need to analyze requirements.
+
+Don't overcomplicate it—just describe your idea to the AI in natural language.
+
+For example, I gave the AI this requirement:
+
+```markdown
+You are a professional programmer. Please help me develop the "Learning Hero - AI Q&A Guided Learning" WeChat Mini Program.
+
+Users can set a topic they want to learn (or test), and the AI will generate several interesting knowledge Q&A cards around the topic, guiding users to master knowledge more easily and enjoyably through quiz-style challenges.
+```
+
+![](https://pic.yupi.icu/1/image-20250928221154635.png)
+
+The AI quickly generated detailed product requirement documents and technical architecture documents, following standard enterprise development processes.
+
+![](https://pic.yupi.icu/1/image-20250928221128338.png)
+
+The AI seems eager to start coding, but don't rush—**carefully review the requirement documents first**.
+
+The AI's output is good but might not fully match our expectations. So, manually focus on the core features to implement, remove unnecessary additional features, and ensure the core business process (P0 requirements) works first.
+
+![](https://pic.yupi.icu/1/image-20250928221334652.png)
+
+**Don't skip this step—spending an extra minute now can save an hour later!**
+
+Clearly define requirements to prevent the AI from building unnecessary features.
+
+Here's a tip: use TRAE's integrated Figma design tool to get free product UI prototypes.
+
+![](https://pic.yupi.icu/1/image-20250928221519374.png)
+
+You can view specific prototype designs. Just select the prototype you like, click "Add to Conversation," and TRAE will automatically associate the prototype with the AI's dialogue. This cross-product interaction is pretty cool (though those who've learned project development with me probably know how it works).
+
+![](https://pic.yupi.icu/1/image-20250928221618668.png)
+
+But life needs surprises, so I'll let the AI improvise and see what creativity emerges~
+
+### 3. Solution Design
+
+Next, we'll design the solution—a task once reserved for architects earning tens of thousands per month, now handled by our little AI SOLO.
+
+When writing this prompt, pay attention to details and **follow the minimal development principle** to prevent the AI from overcomplicating things.
+
+```markdown
+I've manually adjusted the product requirement document, removing many unnecessary features. Please regenerate the technical architecture document based on my revised requirements. Requirements:
+1. Do not add any features not mentioned in the requirement document
+2. Follow the minimal development principle—focus on functionality, avoid extensions like deployment, monitoring, or rate limiting
+3. Follow the frontend-backend separation principle
+```
+
+The AI quickly generated a complete technical architecture document, including frontend and backend technologies, interface design, database schema, etc.
+
+![](https://pic.yupi.icu/1/image-20250928221924096.png)
+
+I recommend those who understand the document to leverage their expertise, clarify specific technology choices, and keep the AI's generated code within your control. For example, I specified using Supabase for the database and OpenRouter to connect with Gemini for AI services.
+
+![](https://pic.yupi.icu/1/image-20250928221952548.png)
+
+Huh? What are these?
+
+Don't worry—we'll explain them soon.
+
+![](https://pic.yupi.icu/1/image-20250928222144713.png)
+
+If you don't understand the document, no worries. Imagine yourself as a boss or product manager—your programmer colleague hands you a technical proposal, and you say, "I don't care how it's done, just get this feature live tomorrow!" Let the AI do its thing.
+
+Trust the AI—believe in the power of belief~
+
+### 4. Service Integration
+
+After designing the solution, before diving into development, we need to prepare the project's dependent services.
+
+Where will user data be stored? How will the program connect to AI models?
+
+These are problems we need to solve.
+
+Instead of manually installing services, we can use TRAE's integration capabilities for a plug-and-play setup without reading official documentation.
+
+We'll focus on integrating two services.
+
+![](https://pic.yupi.icu/1/image-20250928222329915.png)
+
+#### Integrate Supabase
+
+[Supabase](https://supabase.com/) is an open-source Backend-as-a-Service (BaaS) platform offering database storage, user authentication, instant APIs, and more, helping developers quickly build and manage program backends.
+
+![](https://pic.yupi.icu/1/image-20250928222457606.png)
+
+Click the connect button, then complete account creation, organization setup, and authorization on the pop-up page.
+
+![](https://pic.yupi.icu/1/image-20250928222520491.png)
+
+Return to TRAE, refresh after the organization appears, click "Create New Project," fill in some configuration details, and click "Create."
+
+![](https://pic.yupi.icu/1/image-20250928222545479.png)
+
+After creating the project, return to TRAE, refresh, and click "Connect"—it's that simple!
+
+![](https://pic.yupi.icu/1/image-20250928222608471.png)
+
+If AI Vibe Coding made backend developers ecstatic, this is a win for frontend developers—simple projects don't even need manual backend setup anymore~
+
+#### Integrate OpenRouter AI Service
+
+TRAE can integrate with various AI services. Here, I chose [OpenRouter](https://openrouter.ai/), which offers the advantage of connecting to multiple major models (e.g., Gemini, GPT, Claude) through a unified API.
+
+![](https://pic.yupi.icu/1/image-20250928222649319.png)
+
+First, register an account on the official site, then create an API key on the API Keys page. Configure and enter the key in TRAE, and the AI service is integrated.
+
+![](https://pic.yupi.icu/1/image-20250928222833273.png)
+
+But note: ensure you have sufficient usage limits, or calls may fail or be rate-limited.
+
+![](https://pic.yupi.icu/1/image-20250928222853247.png)
+
+#### Integrate Stripe Payment Service
+
+You can also integrate the [Stripe payment service](https://docs.stripe.com/), which lets you add payment and subscription features with minimal code.
+
+![](https://pic.yupi.icu/1/image-20250928223013523.png)
+
+Just register an account on the official site—it automatically provides a sandbox testing environment and corresponding API keys. You can create products and set pricing.
+
+![](https://pic.yupi.icu/1/image-20250928223151134.png)
+
+Enter this info into TRAE's configuration, and the AI will generate payment-related code later.
+
+![](https://pic.yupi.icu/1/image-20250928223346093.png)
+
+Due to WeChat Mini Program restrictions, I won't integrate this for now, but it's great for web and app products.
+
+### 5. Backend Development
+
+With preparations complete, we finally enter the exciting development phase.
+
+Note: since **AI has limited context**, to ensure complete project generation and reduce bugs, it's best to proceed step-by-step: first generate backend code, manually verify it, then generate frontend code.
+
+Input the prompt to develop the backend first, ensuring the project runs:
+
+```markdown
+Based on the latest product requirement and technical architecture documents, prioritize backend development to ensure the project runs properly.
+```
+
+We can use TRAE's prompt optimization feature to refine the prompt.
+
+![](https://pic.yupi.icu/1/%E4%BC%98%E5%8C%96%E6%8F%90%E7%A4%BA%E8%AF%8D.png)
+
+Indeed, it's more precise now.
+
+Click "Execute," and let the AI SOLO begin~ The AI first provides a task plan:
+
+![](https://pic.yupi.icu/1/image-20250928224232897.png)
+
+Then it autonomously operates the terminal to execute commands, writes backend configuration and business logic code, creates database tables, etc. Important operations require our confirmation—very meticulous.
+
+![](https://pic.yupi.icu/1/image-20250928224300188.png)
+
+If you don't understand, let it do its thing~
+
+While waiting, check out [free programming learning paths](https://codefather.cn/). TRAE has built-in notifications, so it'll alert us when tasks complete.
+
+TRAE seems well-trained—it verifies program functionality itself. Since we haven't filled in WeChat login details yet, incomplete API calls are normal.
+
+![](https://pic.yupi.icu/1/image-20250928224350332.png)
+
+After a while, the AI finishes generating not just code but also helpful backend API documentation.
+
+![](https://pic.yupi.icu/1/image-20250928224437599.png)
+
+This is quite useful.
+
+### 6. Frontend Development
+
+Now for frontend development.
+
+Important: don't continue writing prompts in the same conversation.
+
+Why?
+
+Because AI models have limited context, and previous operations have consumed much of it. To prevent context exhaustion or confusion, start a fresh conversation for frontend generation.
+
+![](https://pic.yupi.icu/1/image-20250928224735250.png)
+
+Provide the AI with product requirements, technical architecture, and backend API docs to focus on frontend code.
+
+```markdown
+You are a professional programmer. Please help me develop the "Learning Hero - AI Q&A Guided Learning" WeChat Mini Program.
+
+Users can set a topic they want to learn (or test), and the AI will generate several interesting knowledge Q&A cards around the topic, guiding users to master knowledge more easily and enjoyably through quiz-style challenges.
+
+Based on @ProductRequirements @TechnicalArchitecture @BackendAPIDocs, generate complete, runnable WeChat Mini Program frontend code.
+Notes:
+1. Follow the minimal functionality principle—do not develop any features not mentioned in requirements
+2. For images, use placeholder picsum.photos (e.g., picsum.photos/200/300)
+```
+
+Execute!
+
+While waiting, check out free interview questions and study paths on [Interview Duck](https://www.mianshiya.com/).
+
+After a while, the AI finishes, SOLO-generating over 20 files at once!
+
+![](https://pic.yupi.icu/1/image-20250928224830751.png)
+
+Though impressive, I'm a bit nervous—will it run properly?
+
+### 7. Testing and Validation
+
+Now for the thrilling testing phase.
+
+First, open WeChat Developer Tools, import the existing project folder, and select "Use Test Account" for debugging.
+
+![](https://pic.yupi.icu/1/image-20250928225118198.png)
+
+After opening the project, click the top-right "Test Account" and follow the [documentation](https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html) to get the test AppID and AppSecret:
+
+![](https://pic.yupi.icu/1/image-20250928225220066.png)
+
+Manually enter these into the backend configuration file; otherwise, WeChat login won't work.
+
+![](https://pic.yupi.icu/1/image-20250928225304614.png)
+
+Now compile and run the project.
+
+And... it crashes!
+
+![](https://pic.yupi.icu/1/image-20250928225522618.png)
+
+Expected, expected... Mini program development is trickier than web development, given WeChat's constantly updating tools and docs.
+
+![](https://pic.yupi.icu/1/image-20250928225618743.png)
+
+No worries—development always has hiccups. The solution is simple: **copy the error message and let the AI fix it!**
+
+For example, I encountered several typical issues:
+
+1) Image path issues: Use TRAE's prompt optimization to guide the AI through bug-fixing steps.
+
+![](https://pic.yupi.icu/1/image-20250928225717687.png)
+
+2) Login failures: Click "Details" in the developer tools' top-right corner, go to "Local Settings," and check "Do not verify valid domain names."
+
+![](https://pic.yupi.icu/1/image-20250928225825654.png)
+
+3) API path issues: Likely due to long context. Have the AI globally fix frontend API call paths and parameters.
+
+![](https://pic.yupi.icu/1/image-20250928225903118.png)
+
+4) Environment configuration issues: Inconsistent environment variable names in code and config files. This is simple—we can manually adjust.
+
+After typing one character, the editor auto-suggests code changes, even supporting multi-line edits.
+
+![](https://pic.yupi.icu/1/image-20250928225955681.png)
+
+This is TRAE's CUE feature, which not only auto-completes code but also predicts future edits—perfect for refactoring.
+
+![](https://pic.yupi.icu/1/%E5%A4%9A%E8%A1%8C%E4%BF%AE%E6%94%B9.gif)
+
+After some fixes, our mini program runs smoothly. Though the UI is still rough, once the core workflow functions and users can operate it, further optimizations are easy.
+
+![](https://pic.yupi.icu/1/image-20250928230045861.png)
+
+### 8. Continuous Optimization
+
+Finally, if you want to launch the mini program, spend some time optimizing.
+
+Remember: before optimizing, use Git to version-control the existing code and commit a baseline version. This lets you revert if optimizations go wrong.
+
+![](https://pic.yupi.icu/1/image-20250928230154447.png)
+
+For example, I had the AI optimize the entire mini program's style with a simple prompt:
+
+```markdown
+You are a programmer. Optimize the style of every frontend page and element in the mini program for consistency.
+
+Reference style: Vibrant orange

translations/en/Vibe Coding 零基础教程/20 项目实战/鱼皮的原创项目/Vercel AI 网关 - AI 减压小能手项目实战.md

@@ -0,0 +1,241 @@
+# Vercel AI Gateway - Hands-on Project for AI Stress Relief
+
+This article focuses not on development, but on learning the concept and usage of AI gateways. Through comic-style explanations and the Vibe Coding project, you'll understand how to flexibly switch between different models in AI applications using the Vercel AI Gateway, reducing development costs and maintenance difficulties. Suitable for those who want to learn AI gateway technology and need to quickly integrate multiple AI models.
+
+---
+
+You are Xiao Aba, a newly hired AI application development engineer.
+
+![](https://pic.yupi.icu/1/1761152281564-61073333-da43-4ac2-b6ca-09460e87331a.png)
+
+Your boss says: The company recently wants to build an intelligent customer service system. Xiao Aba, you're new, so this important task falls on you! Thus, heaven will assign great responsibilities to the newcomer~
+
+![](https://pic.yupi.icu/1/1761645372915-7d9df0cf-f44a-4643-8d67-3e7103fb03db.png)
+
+You think to yourself: Isn't this just a matter of calling an API? What's so hard about it?
+
+So you roll up your sleeves and start coding, first integrating OpenAI's GPT model.
+
+Just as you finish, your boss says: We also need to add the Claude model, I heard it performs better in certain scenarios.
+
+So you write a bunch of code to call the Claude model.
+
+Just as you finish that, your boss says: Hmm, I heard the domestic Tongyi Qianwen is also good, let's integrate that too!
+
+![](https://pic.yupi.icu/1/1761645406716-99acb82f-2f1f-4a62-a3c6-076ac17b1e6d.png)
+
+You frown, thinking: Now I have to write code to call this model too, boss, aren't you being a bit excessive...
+
+Your boss seems to hear your thoughts:
+
+- Oh, by the way, calling AI has costs, so we need to handle user authentication
+- Oh oh, to prevent malicious users from spamming AI calls, we need to implement rate limiting
+- Oh oh oh, AI-generated content might have issues, so we need to validate content safety
+- Oh oh oh oh! We need to ensure system stability, so if one model fails, the entire service shouldn't go down
+- Oh oh oh oh oh!! This project is definitely going to be a hit, so we need to consider how the AI can handle massive requests
+- Oh oh oh oh oh oh!!! We need to be able to monitor AI call counts and costs to reduce costs and increase efficiency
+- Oh oh oh oh oh oh oh...
+
+You watch your boss gradually go crazy and start questioning your life: Why is calling an AI API so complicated?
+
+![](https://pic.yupi.icu/1/1761645432489-6e2f67db-40f5-40fe-a6f0-c18ead6e6d8a.png)
+
+⭐️ Video version of this article: [https://bilibili.com/video/BV14NyrBTEeB](https://www.bilibili.com/video/BV14NyrBTEeB)
+
+## What is an AI Gateway?
+
+At this moment, Yupi, known as the "AI Prince," walks over and sees your troubled expression. He smiles and says: What, is it that hard?
+
+You feel a bit annoyed: You're just standing there talking without feeling the pain. With so many requirements, don't I have to write a ton of code?
+
+Yupi: All the scenarios the boss mentioned can be solved with an **AI Gateway**~
+
+You ask curiously: Gateway? What's that?
+
+Yupi: A gateway is like the ticket check at a train station. All passengers must first pass through the ticket check, where the ticket inspector checks your ticket and then guides you to the correct platform.
+
+![](https://pic.yupi.icu/1/1761645506547-26d820e6-cda3-482e-a7e9-dcadcbbb0445.png)
+
+In system architecture, requests from front-end users first pass through the gateway. The gateway uniformly handles user authentication, intercepts malicious requests, controls traffic, monitors and counts requests, etc., and then forwards the requests to the backend server for processing.
+
+![](https://pic.yupi.icu/1/1761645542774-a2da29dc-3d2c-4e1b-adcf-dc5dd59d0881.png)
+
+You nod: Wow, so if I have multiple backend services, I don't need to write these functions separately for each service.
+
+Yupi: Exactly, and if one backend service fails, the gateway can automatically forward requests to other services.
+
+![](https://pic.yupi.icu/1/1761645571947-8cb4a141-7d6f-4add-a82b-7a70716f23e7.png)
+
+You become curious: So what's this AI Gateway you mentioned earlier?
+
+Yupi: Traditional API gateways are usually placed between your application and various backend services; AI Gateways are specifically designed for AI applications, placed between your application and various AI model services (like OpenAI, Tongyi Qianwen, DeepSeek, etc.).
+
+![](https://pic.yupi.icu/1/1761645615469-787296d8-1fb6-4452-b406-c79ef537f193.png)
+
+Your application only needs to send **standard requests** to the AI Gateway, which will automatically handle user authentication, rate limiting, security protection, failover, load balancing, monitoring, and statistics, and then forward the requests to the AI model for processing.
+
+![](https://pic.yupi.icu/1/1761645642401-683e786e-3e06-420a-abce-cd43f7bfa901.png)
+
+If you need to integrate different models, you only need to modify the model name in the standard request, and the AI Gateway will handle the routing for you, without needing to write separate integration code for each model~
+
+![](https://pic.yupi.icu/1/1761645657980-b463d0b2-eecd-4635-99ee-fed9f121bf4e.png)
+
+You cheer: This is amazing! With the AI Gateway, all the problems the boss mentioned can be solved! So what AI Gateway products are available now?
+
+![](https://pic.yupi.icu/1/1761645679096-3ceb73df-a858-4410-abc1-041222b497f4.png)
+
+## AI Gateway Selection
+
+The first AI Gateway many AI enthusiasts encounter might be [OpenRouter](https://openrouter.ai/), which is more like an AI model aggregation platform, supporting integration with hundreds of models through a unified interface.
+
+![](https://pic.yupi.icu/1/1761645719834-eadcde16-711c-474c-9838-5ea5f01be452.png)
+
+Many AI tools support configuring OpenRouter. For ordinary AI users, it allows access to more models and more stable services.
+
+![](https://pic.yupi.icu/1/1761645743475-53493cb1-5be9-4b0b-8b9a-a497ac13d7c7.png)
+
+You ask: Are there any AI Gateway products specifically for developers?
+
+Yupi nods: Of course, there are already many mature AI Gateway products on the market. For example, a quick search online will show the following top ones:
+
+1) [Vercel AI Gateway](https://vercel.com/ai-gateway): This is a very popular new product, with the biggest feature being easy to get started and **zero markup**. If you use your own API Key, the gateway itself doesn't charge extra fees. Suitable for front-end developers to quickly build full-stack AI applications.
+
+2) [Cloudflare AI Gateway](https://www.cloudflare.com/zh-cn/developer-platform/products/ai-gateway/): Cloudflare, as one of the largest CDN service providers globally, its AI Gateway mainly benefits from wide global node coverage and strong security protection.
+
+3) [Kong AI Gateway](https://konghq.com/products/kong-ai-gateway): Kong itself is a mature API gateway, now enhanced specifically for AI scenarios, with comprehensive enterprise-level features.
+
+![](https://pic.yupi.icu/1/image-20251018111819481.png)
+
+4) [Higress AI](https://higress.ai/): An open-source AI Gateway from Alibaba Cloud, supporting unified protocol conversion for over 100 models, providing enterprise-level features like semantic caching, token rate limiting, MCP conversion, suitable for enterprises with complex AI integration needs.
+
+![](https://pic.yupi.icu/1/image-20251019163817976-20251028181254777.png)
+
+You scratch your head: This seems too complicated, how should I get started with AI Gateways?
+
+Yupi: Don't worry, we can start learning with the relatively simple Vercel AI Gateway. Talk is cheap, give me 2 minutes, and I'll show you how to master the usage of Vercel AI Gateway~
+
+## Vercel AI Gateway Hands-on
+
+#### 1. Register and Get API Key
+
+First, go to the [Vercel website](https://vercel.com/) to register an account. Binding a bank card gives you a free $5 usage quota, which is enough for learning and testing.
+
+![](https://pic.yupi.icu/1/1760687990497-90720fbb-0df6-4ede-87b8-64b8702994e9-20251028181254840.png)
+
+Then create an API Key in the console, be careful not to leak it:
+
+![](https://pic.yupi.icu/1/1760688078133-7b91b6f3-2fc4-4bb4-b2c1-d517699f0968-20251028181254879.png)
+
+#### 2. Official Demo
+
+Next, you can follow the official quick start tutorial to create a project and run the AI chat Demo:
+
+![](https://pic.yupi.icu/1/image-20251019160232722.png)
+
+Simply put, there are 4 steps:
+
+1. Create a new project
+2. Install AI SDK and AI Gateway dependencies
+3. Configure environment variables, fill in API Key configuration information
+4. Write example Demo code
+
+#### 3. Stress Relief Project
+
+However, the official Demo is a bit too simple. Let's use AI to build a "Stress Relief Expert" website project, allowing users to chat with an AI specifically designed to relieve stress.
+
+Here, I chose Cursor as the AI development tool, directly letting AI generate complete front-end and back-end code that meets the requirements.
+
+![](https://pic.yupi.icu/1/1761645829262-bd9950ef-6334-410f-ab27-140873cb56a4.png)
+
+Since Vercel AI Gateway is relatively new, AI might not understand its usage, so I directly threw the Vercel AI Gateway official documentation to Cursor, letting it learn the usage through the documentation.
+
+![](https://pic.yupi.icu/1/1761645854330-54b6ab38-7f1f-45a5-ac34-463ee63477a7.png)
+
+The complete prompt is as follows:
+
+```markdown
+You are a professional programmer, please help me develop the "Stress Relief Expert" website, where users can relieve stress by chatting with an AI specifically designed to help with stress relief.
+
+## Development Requirements
+
+1. Need to include complete front-end and back-end, back-end uses Node.js
+2. Use Vercel's AI Gateway to implement AI capabilities, need to first get as much usage as possible from the official documentation: https://vercel.com/docs/ai-gateway/getting-started
+3. Aim to complete core functionality, ensure the project can run normally, no need to output documentation, nor do any extra features
+4. The overall website interface uses relaxing light colors, responsive to various device sizes
+```
+
+After clicking execute, AI will first call the MCP tool to get information from the webpage. Here I used `Firecrawl MCP`:
+
+![](https://pic.yupi.icu/1/1760690503357-7412db47-4389-49e2-b42c-dc6eabdc283b-20251028181255024.png)
+
+About 6 minutes later, AI completed generating all the code. Unfortunately, AI wasn't very obedient here and still generated a bunch of documentation, taking more time than generating the code itself!
+
+![](https://pic.yupi.icu/1/image-20251019161322770.png)
+
+Then create a `.env` environment variable configuration file in the root directory, fill in the AI Gateway API Key:
+
+![](https://pic.yupi.icu/1/1760689844332-79459841-46e3-4356-9fe7-76062a90464c-20251028181255097.png)
+
+Finally, install dependencies and execute the startup script:
+
+![](https://pic.yupi.icu/1/1760690024471-f89bf1e3-3d9e-4857-8a68-a236ffa0af14-20251028181255125.png)
+
+Visit `localhost:3000` to see the project:
+
+![](https://pic.yupi.icu/1/1760690223277-56f89c2a-b4c5-43d6-a61d-3f744bcd9aef-20251028181255161.png)
+
+Honestly, the effect is really good, giving me a bit more motivation to write a few more words haha:
+
+![](https://pic.yupi.icu/1/1760690245830-e877986b-1bb6-4c6a-96ad-92b738a57fed-20251028181255188.png)
+
+You exclaim: With AI + AI Gateway combo, developing AI projects is so fast!
+
+Yupi nods: Exactly, and throughout the process, we don't need to worry about a model failing, the gateway will handle these issues automatically.
+
+![](https://pic.yupi.icu/1/1761645903883-94c22619-2cac-41a4-87c3-d51ec96586e0.png)
+
+#### 4. More Features
+
+Moreover, Vercel AI Gateway supports many domestic and international models, with different billing standards for each model:
+
+![](https://pic.yupi.icu/1/image-20251019165234650.png)
+
+You can also configure your own model API Key:
+
+![](https://pic.yupi.icu/1/image-20251019162655475.png)
+
+Additionally, it provides **observability** and other enterprise-level features, helping you understand AI call situations and cost analysis:
+
+![](https://pic.yupi.icu/1/1760691345180-9ce7ec43-c651-4c19-a918-90b87034b7fe-20251028181255384.png)
+
+Your eyes light up: Wow, then I'll use it for all my AI projects from now on!
+
+Yupi shakes his head helplessly: Xiao Aba, remember "there is no silver bullet."
+
+If your personal project only needs to call a single AI model, directly calling the API is enough; if your personal or team's small project needs AI Gateway features (like integrating multiple models), then you can choose Vercel AI Gateway; if you're developing enterprise-level applications with high security and stability requirements, choosing more professional gateways like Higress or Kong is more suitable, helping you write a little less crappy code 💩!
+
+![](https://pic.yupi.icu/1/1761645922466-4284b8ac-7928-424e-a0eb-09629e7e66a1.png)
+
+## Ending
+
+A few months later, you refactored the company's intelligent customer service system using the AI Gateway, with excellent results.
+
+You sigh: This is standing on the shoulders of giants! Indeed, don't reinvent the wheel, laziness drives world progress!
+
+![](https://pic.yupi.icu/1/1761645939970-276a3391-2f40-4b85-8d23-d36c5a491f8c.jpeg)
+
+Yupi coos: So this is your excuse for being too lazy to give me a thumbs up???
+
+![](https://pic.yupi.icu/1/1761646182922-0edead80-b8e9-4b8f-a90d-e35fa8712f3b.png)
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [Comprehensive AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheatsheet: [Internship/Campus/Social Recruitment High-Frequency Exam Points, Enterprise Real Questions Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Writing Tool: [Professional Templates, Rich Example Sentences, Direct to Interview](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interview: [Essential for Internship/Campus/Social Recruitment Interviews to Get Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/30 经验技巧/00 Vibe Coding 经验技巧总览.md

@@ -0,0 +1,109 @@
+# Vibe Coding Tips and Tricks Overview
+
+> Key skills to enhance AI development efficiency and quality
+
+Hello, I'm Programmer Yupi, a former Tencent full-stack developer and an [AI programming content creator](https://space.bilibili.com/12890453) with over 2 million followers across platforms. I'm also the creator of more than 10 self-developed products including [AI Navigation](https://ai.codefather.cn) and [Programming Navigation](https://www.codefather.cn).
+
+If you've completed the [Essential Basics] learning and built your first project, congratulations — you've stepped through the door of Vibe Coding.
+
+But you might notice that while you can create things with AI, the process doesn't always feel smooth. For example, AI might sometimes "go on strike," generate inconsistent code quality, or projects might become chaotic halfway through. These are all normal phenomena because there's still an advanced journey between "being able to make" and "making well."
+
+This section is designed to help you navigate this journey. I'll share practical tips and tricks to help you progress faster and more steadily on your Vibe Coding path.
+
+## 1. What is this section about?
+
+This section focuses on how to improve your Vibe Coding skills.
+
+You might ask: I can already build things with AI, why do I need to learn this?
+
+Actually, like traditional programming, Vibe Coding has beginner, intermediate, and advanced levels. Beginners can create functional things, but intermediate and advanced practitioners can create **well-functioning** things. This "well-functioning" manifests in:
+
+- Higher development efficiency, not getting stuck by minor AI issues
+- Better code quality, making projects easier to maintain and extend
+- Ability to handle more complex requirements beyond simple demos
+- Knowing how to avoid pitfalls and detours
+
+This section serves as the bridge from beginner to intermediate/advanced levels.
+
+## 2. What are the benefits of learning this?
+
+Many students encounter these confusions after learning the basics:
+
+- I can build things, but they don't feel professional enough
+- Sometimes AI generates messy code and I don't know how to fix it
+- Projects become chaotic halfway and I don't know how to proceed
+
+If you have these concerns, this section is for you. After learning, you'll become an all-round Vibe Coding expert!
+
+1. Efficiency boost: You'll complete projects faster without getting stuck on minor issues.
+
+2. Quality improvement: Your creations will be more stable and maintainable, no longer "disposable toys."
+
+3. Capability enhancement: You'll handle more complex requirements, progressing from demos to products.
+
+4. Mindset upgrade: You'll gain confidence in problem-solving approaches.
+
+These skills apply not just to Vibe Coding but also help you understand the essence of software development.
+
+## 3. What does this section include?
+
+This section covers all aspects of Vibe Coding from entry to mastery, organized into four categories:
+
+1) Foundational Thinking: Establishing proper development philosophies
+- Five core principles
+
+2) Core Skills: Mastering key AI development capabilities
+- Prompt engineering techniques
+- Context management techniques
+- Handling hallucinations and infinite loops
+- Efficiency improvement techniques
+
+3) Quality Assurance: Ensuring project quality and performance
+- Code quality assurance
+- Code refactoring techniques
+- Performance optimization techniques
+- Security protection techniques
+
+4) Practical Advancement: Solving real-world development problems
+- Cost control techniques
+- Team collaboration techniques
+- Website beautification techniques
+
+All content is beginner-friendly. Even without programming knowledge, you can understand and apply it. Recommended to learn sequentially, or you can directly consult specific articles for particular problems.
+
+💡 This section will be continuously updated with more practical tips and experience sharing. [Bookmark this page](https://ai.codefather.cn/) to check for new content.
+
+## 4. How to study this section?
+
+Choose your learning path based on your situation:
+
+Complete beginners:
+- Recommended to study sequentially, starting with foundational thinking
+- Practice Vibe Coding after each topic
+- Consult specific articles when encountering problems
+
+Those with programming background:
+- Quickly review foundational thinking and core skills
+- Focus on quality assurance and practical advancement
+- Deep dive into specific topics as needed
+
+Time-constrained learners:
+- Prioritize: Five core principles, prompt engineering techniques
+- Consult other content when problems arise
+- Use this section as a reference book
+
+---
+
+These insights are distilled from the practices of many Vibe Coding experts and myself. Hope they help you avoid detours and master Vibe Coding faster. Keep going!
+
+## Recommended Resources
+
+1) Yupi AI Navigation: [Comprehensive AI resources, latest AI news, free AI tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Community: [Learning paths, programming tutorials, practical projects, job hunting guides, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheatsheets: [Internship/campus/social recruitment high-frequency topics, company question analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Builder: [Professional templates, rich examples, direct interview access](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for internship/campus/social recruitment interviews to secure offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/30 经验技巧/01 Vibe Coding 五大核心心法.md

@@ -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)

translations/en/Vibe Coding 零基础教程/30 经验技巧/02 Vibe Coding 对话工程技巧.md

@@ -0,0 +1,419 @@
+# Vibe Coding Conversation Engineering Techniques
+
+> The Art of Iterative Dialogue
+
+Hello, I'm Yupi.
+
+In the previous article, we discussed the 5 core principles of Vibe Coding. Today, we will delve into one of the most crucial skills — how to have efficient conversations with AI.
+
+Many students treat AI as a magic button: input a sentence and expect it to provide a perfect answer directly.
+
+However, the reality is often that the results given by AI are either incorrect or not good enough. At this point, people complain: AI is too dumb, it doesn't understand my meaning at all, is your AI not capable enough?
+
+In fact, the problem is not that AI is dumb, but that we haven't mastered the art of conversing with it. Today, I will teach you how to make AI truly understand your needs through **conversation engineering**.
+
+## 1. Conversation Engineering vs. Prompt Engineering?
+
+Many friends refer to communicating with AI as "writing prompts" or "prompt engineering," and I used to do the same. However, as AI's ability to understand ambiguous instructions becomes stronger, I feel this term is not comprehensive enough because it implies a one-way, one-time communication method — you write a perfect prompt, and AI gives you a perfect answer.
+
+But in reality, Vibe Coding is more like a dialogue. You and AI are working together, exploring together, and refining ideas together. This process is **bidirectional and iterative**.
+
+For example, traditional **prompt thinking** is like this:
+
+"Please help me write a responsive navigation bar using React and Tailwind CSS, including a Logo, menu items (Home, About, Contact), a search box, and a user avatar. It should support mobile collapsible menus, with a dark blue background and white text. The Logo is on the left, the menu is in the center, and the user info is on the right..."
+
+You want to clarify all requirements in one sentence. But often, some details are missed or not accurately conveyed.
+
+On the other hand, **conversational thinking** is like this:
+
+You: I want to create a navigation bar, can you help me?
+
+AI: Of course. What tech stack do you want to use? Any design requirements?
+
+You: I'm using React and Tailwind CSS. Design-wise, I want it to be clean and professional, with a dark blue background.
+
+AI: Got it. What elements should the navigation bar include?
+
+You: Logo, a few menu items, a search box, and a user avatar.
+
+AI: Understood. Does it need to support mobile?
+
+You: Yes, it should collapse into a hamburger menu on mobile.
+
+See the difference?
+
+Conversational thinking allows you to clarify requirements step by step, rather than having to think through all details at once. This is more natural and easier to get good results.
+
+![](https://pic.yupi.icu/1/promptvschat%E5%A4%A7.jpeg)
+
+### Benefits of Conversation
+
+Using conversational thinking has several obvious benefits:
+
+1. Reduce cognitive load: You don't need to think through all details at once; you can think as you chat.
+
+2. Easier to identify issues: AI's questions will help you discover what you might have missed.
+
+3. More accurate results: Through multiple rounds of communication, AI can better understand your needs.
+
+4. Better learning outcomes: During the conversation, you will learn a lot of new knowledge and best practices.
+
+## 2. Core Techniques of Iterative Dialogue
+
+Here are some of the most important conversation techniques.
+
+### Technique 1: Start Big, Then Refine Gradually
+
+Don't dive into details at the beginning. Start with the big picture and then refine step by step.
+
+For example, if you want to create a blog system, don't start by saying: Help me write a blog system that supports Markdown, code highlighting, comments, likes, categories, tags, search, and RSS subscriptions.
+
+Instead, start like this:
+
+1. I want to create a simple blog system where users can publish and view articles.
+2. Articles need to support Markdown format.
+3. Can you add code highlighting functionality?
+4. I also want a simple comment feature.
+
+Each step is small and easy to understand and implement. This way, AI won't get confused by complex requirements, and you can adjust the direction at any time.
+
+### Technique 2: Be Specific, Not Abstract
+
+AI is not good at understanding abstract concepts but excels at handling specific descriptions.
+
+❌ Bad example: Create a good-looking button.
+
+✅ Good example: Create a rounded button with a blue background (#3B82F6), white text, padding of 12px top and bottom, 24px left and right, and the background darkens to #2563EB on hover.
+
+❌ Bad example: Add a user-friendly error message.
+
+✅ Good example: When the user enters an invalid email format, display red text "Please enter a valid email address" below the input box.
+
+The more specific the description, the more accurately AI can implement your needs.
+
+### Technique 3: Provide References and Examples
+
+You can help AI understand your needs by describing them in words or providing images.
+
+With words, you can say:
+
+- I want a layout similar to GitHub's personal homepage: user info card on the left, activity timeline on the right.
+- The button style should reference Stripe's design: clean, modern, with subtle shadows.
+- The form validation prompt should reference Airbnb: real-time validation, error messages below the input box.
+
+AI has seen many websites and apps, and the references you provide can help it quickly understand what you want.
+
+A more direct method is to use images. Many large AI models (like Claude, GPT, Gemini) now support image understanding, so you can:
+
+- Screenshot the design effect you want and let AI replicate it.
+- Screenshot a bug or error and let AI see the specific issue.
+- Screenshot a reference website's layout and let AI mimic it.
+
+For example, prompts like:
+
+- Please design my page based on the layout in this screenshot: [upload screenshot].
+- My page doesn't display correctly on mobile, see this screenshot: [upload screenshot], how can I fix it?
+
+A picture is worth a thousand words. Images can help AI understand your needs more accurately, especially in UI design, web development, and bug fixing.
+
+### Technique 4: Ask Step-by-Step Questions
+
+Similar to Technique 1. For complex features, don't ask AI to complete everything at once. Break it into multiple steps and proceed one step at a time.
+
+For example, implementing a user login feature:
+
+1. First, help me create a login form with email and password input fields and a login button.
+2. Now, add client-side validation to the form: the email must be in the correct format, and the password must be at least 6 characters.
+3. When the user clicks the login button, send a POST request to /api/login with the email and password.
+4. If the login is successful, redirect to the homepage; if it fails, display an error message.
+
+After completing each step, you can test it to ensure everything is fine before continuing. This way, even if something goes wrong, it's easy to locate the issue.
+
+### Technique 5: Use Questions to Guide Thinking
+
+Sometimes, if you're unsure what to do, let AI help you analyze.
+
+- I want to add a caching mechanism here, but I'm not sure which solution to use. Can you analyze the pros and cons of Redis and Memcached?
+- This page loads a bit slow, what do you think might be the reason? Any optimization suggestions?
+- I'm considering using SSR or CSR, can you help me analyze the applicability of these two solutions in my project?
+
+Such questions allow AI to leverage its knowledge advantage and help you make better decisions.
+
+## 3. How to Describe Requirements Clearly?
+
+Describing requirements is the most important part of the conversation. If described well, AI will do it right; if not, it will go astray.
+
+### Use a Requirement Description Framework
+
+When describing requirements, you can use a systematic framework to organize your thoughts. Here is a practical framework:
+
+**Basic Version (5 Elements)**:
+
+1. What: What feature or component is needed?
+2. Why: What is the purpose of this feature?
+3. How: What are the technical implementation requirements?
+4. Style: What are the appearance and interaction requirements?
+5. When/Where: In what scenarios will it be used?
+
+For example:
+
+- I need a search box (What).
+- To allow users to quickly find articles (Why).
+- Implemented with React, real-time search on input (How).
+- The style should be simple, with a search icon and rounded corners on the input box (Style).
+- Placed on the right side of the top navigation bar (Where).
+
+Of course, you don't need to include all five elements every time, but it's recommended to at least include the first three.
+
+**Advanced Version (6 Elements)**:
+
+If you want more professional output, you can add this element:
+
+6) Audience: Who is this feature for? What is their technical level?
+
+For example: "This search feature is for regular users, it should be simple and easy to understand, no advanced filtering needed."
+
+This way, AI can adjust the implementation and interaction design based on the audience.
+
+### Explain Technical Background
+
+If you want AI to help optimize an existing project, AI needs to know what technologies your project uses to provide suitable code.
+
+At the start of each new conversation, it's recommended to explain the technical background, for example: My project uses Next.js 15 (App Router), TypeScript, Tailwind CSS, and Supabase.
+
+If there are special coding standards, also explain them, for example: Our project uses functional components, not class components. All API calls use a custom useFetch hook.
+
+This way, the code generated by AI will align with your project.
+
+Although many AI programming tools now guide AI to analyze your existing project code first, manually clarifying the tech stack can make AI's output more accurate.
+
+However, if you're not a programmer or don't understand these technologies, you can completely ignore this point. This is why, in the AI era, we still need to learn programming, because those who understand technology can better guide and utilize AI.
+
+### Describe Expected Output
+
+Tell AI what kind of output you expect. For example:
+
+- Please give me the complete component code, including TypeScript type definitions.
+- Just give me the core logic, no styling code needed.
+- Please give me a complete example that can run directly.
+- Please explain how this code works step by step.
+
+Clarifying the output format allows AI to better meet your needs; otherwise, AI might output a lot of irrelevant content.
+
+I've found that the stronger the AI, the easier it is to complicate simple requirements. For example, I once asked AI to generate a small project, and it ended up generating 7 ~ 8 documents, wasting a lot of tokens.
+
+## 4. Techniques for Follow-up Questions and Corrections
+
+AI's first answer is often not perfect. At this point, you need to improve the results through follow-up questions and corrections.
+
+### The Art of Follow-up Questions
+
+If AI's answer is not detailed enough, don't ask the same question again; instead, ask for details.
+
+❌ Bad follow-up: More details please (too vague).
+
+✅ Good follow-up:
+
+- You mentioned using useEffect, can you explain in detail why it's used here?
+- How is the performance of this function? Will it have issues with large amounts of data?
+- You chose to use Map instead of Object, what was the reasoning behind that?
+
+Specific follow-up questions lead to specific answers.
+
+### Let AI Ask You Questions
+
+Sometimes, you might not know what information to provide. In such cases, let AI ask you questions proactively:
+
+```markdown
+I want to do [your requirement]. Before answering, please ask me a few questions to understand more details, and then provide a solution.
+```
+
+This way, AI will ask you some key questions based on its understanding, such as tech stack, usage scenarios, design requirements, etc. By answering these questions, you can describe your needs more clearly, and AI can provide a more accurate solution.
+
+This method is particularly useful when your requirements are not yet clear, letting AI help you organize your thoughts.
+
+### Methods for Correction
+
+If AI misunderstands your meaning, correct it promptly.
+
+- No, that's not what I want. I meant...
+- This solution doesn't fit my scenario because... Can you give me another solution?
+- You misunderstood my requirement. I want A, not B.
+
+Don't hesitate to correct AI; feel free to scold it, humiliate it, or even treat it like a dumb dog. It won't get angry; instead, it will provide better answers based on your feedback.
+
+### Request Explanations
+
+If you don't understand the code or solution provided by AI, ask it to explain.
+
+- What does this code mean? Can you explain it line by line?
+- Why write it this way? Are there other ways to write it?
+- What are the pros and cons of this solution?
+
+Understanding the principles allows you to truly grasp the knowledge.
+
+## 5. How to Guide AI's Output?
+
+Sometimes, AI provides some less-than-ideal solutions. At this point, you need to guide it in the right direction.
+
+### Set Constraints
+
+Set constraints to make AI think within specific boundaries.
+
+- Please give me a pure JavaScript implementation without relying on third-party libraries.
+- This feature needs to complete within 100ms, please consider performance optimization.
+- The code should be as concise as possible, no more than 20 lines.
+- Consider edge cases, such as empty arrays, null values, etc.
+
+These constraints make AI's output more aligned with your actual needs.
+
+### Request Multiple Solutions
+
+Don't settle for the first solution; ask AI to provide multiple options.
+
+- Please give me 3 different implementation methods and explain their pros and cons.
+- Is there a simpler solution to this problem?
+- Besides the method you just mentioned, are there other solutions?
+
+Multiple solutions allow you to make more informed choices.
+
+Additionally, when Yupi works on a large project, he lets multiple different AI models or AI products provide solutions simultaneously, then manually selects the best one. This method is suitable for friends with some professional knowledge.
+
+### Use Role-playing
+
+Let AI play a specific role to get more professional advice.
+
+- Please review this code from the perspective of a senior front-end engineer and provide improvement suggestions.
+- Assume you are a UX designer, what issues does this interaction flow have?
+- As a performance optimization expert, how would you improve this page's loading speed?
+
+Role-playing can stimulate AI's expertise in specific fields.
+
+If you're unsure what role to assign to AI, let AI choose the most suitable expert:
+
+```markdown
+I want to discuss [your problem]. Please first select the most suitable domain expert to think about it, which can be a real-life celebrity or expert. Then answer my question from this expert's perspective.
+```
+
+For example, if you want to optimize a product's user experience, let AI choose a suitable UX expert. AI might select a well-known designer or product manager and provide advice from their perspective. Such answers are often more professional and in-depth.
+
+## 6. Conversation Template Library
+
+To improve efficiency, you can prepare some commonly used conversation templates.
+
+1) Template for Starting a New Feature
+
+```markdown
+I want to develop a new feature: [feature description]. My tech stack is [tech stack]. Please help me:
+1) Analyze the core requirements of this feature.
+2) Suggest a reasonable implementation plan.
+3) List potential issues.
+```
+
+2) Template for Debugging Issues
+
+```markdown
+I encountered a problem: [problem description]. The error message is: [error message]. The relevant code is: [code snippet]. Please help me:
+1) Analyze possible causes.
+2) Provide a solution.
+3) Explain why this problem occurred.
+```
+
+3) Template for Optimizing Code
+
+```markdown
+This is my code: [code snippet]. Its function is: [function description]. Please help me:
+1) Identify potential performance issues.
+2) Improve the code's readability.
+3) Point out potential bugs.
+```
+
+4) Template for Learning New Knowledge
+
+```markdown
+I want to learn [technology/concept]. Please:
+1) Explain what it is in simple terms.
+2) Give me a practical example.
+3) Tell me when I should use it.
+```
+
+These templates can help you start conversations quickly and save time.
+
+More AI prompt templates can be found on Yupi's [AI Resource Navigation Website](https://ai.codefather.cn/prompt):
+
+![](https://pic.yupi.icu/1/image-20260104174539349.png)
+
+## 7. Common Conversation Pitfalls
+
+When conversing with AI, there are some common mistakes to avoid.
+
+### Pitfall 1: Asking Too Much at Once
+
+Don't cram too much content into one question.
+
+❌ Bad example: Help me implement user registration, login, password reset, email verification, permission management, and profile editing features.
+
+This way, AI won't know where to start or will give you a broad but shallow answer.
+
+Correct approach: Ask about one feature at a time, complete one before moving to the next.
+
+### Pitfall 2: Don't Assume AI Has Memory
+
+AI's memory is limited. Don't assume it remembers things from long ago.
+
+If you're unsure whether AI's memory capacity is sufficient and still want to reference previous content, it's better to restate it: Remember the login form we did earlier? Now I want to build on it...
+
+Or directly paste the relevant code: This is the login form code we wrote earlier: [code]. Now I want...
+
+However, many AI programming tools display the current memory capacity, helping you manage it:
+
+![](https://pic.yupi.icu/1/image-20260104174741309.png)
+
+### Pitfall 3: Don't Continue Without Testing
+
+Every time AI gives you code, be sure to test it! Don't continue asking for the next feature without testing.
+
+If there's an issue with the code, provide feedback to AI promptly. Don't wait until many features are done before discovering issues in the foundational parts.
+
+### Pitfall 4: Over-reliance
+
+Don't ask AI everything. Some simple questions might be faster to resolve by checking documentation, searching, or using other tools.
+
+AI is suitable for:
+- Generating code frameworks.
+- Solving complex problems.
+- Learning new concepts.
+- Reviewing and optimizing code.
+
+Not suitable for:
+- Querying API documentation.
+- Finding simple syntax errors.
+- Doing simple calculations (better to use a calculator).
+
+Of course, this doesn't mean AI can't do these things; it depends on the specific scenario.
+
+## 8. Practical Case: Complete Conversation Flow
+
+Let me use a real example to demonstrate a complete, recommended conversation flow.
+
+Suppose you want to create an "Add Task" feature for a to-do app.
+
+### Round 1: Clarify Requirements
+
+You: "I want to add a new task feature to my to-do app."
+
+AI: "Okay. How do you want users to add tasks? A form, an input box, or something else?"
+
+You: "Just a simple input box. Users type the task content and press Enter to add it."
+
+AI: "Got it. Does the task need any other information besides content? Like a deadline or priority?"
+
+You: "For the MVP version, no, just the task content."
+
+### Round 2: Technical Implementation
+
+You: "I'm using React and TypeScript. Please help me write this input box component."
+
+AI: [Provides code]
+
+You: "Looks good.

translations/en/Vibe Coding 零基础教程/30 经验技巧/03 Vibe Coding 上下文管理技巧.md

@@ -0,0 +1,582 @@
+# Vibe Coding Context Management Techniques
+
+> Making AI Truly Understand Your Project
+
+Hello, I'm Yupi.
+
+In the previous two articles, we discussed the core principles and conversational techniques of Vibe Coding. Today, we're diving into a more fundamental yet equally important topic — context management.
+
+You might have encountered situations where, at the beginning of a conversation with AI, it appears intelligent and generates code that meets your requirements. However, after chatting for a while, it starts to "forget" — forgetting the tech stack you mentioned earlier, the design style of the project, or even starting to implement features using entirely different approaches.
+
+This isn't because the AI has become less intelligent; it's a memory issue. Below, I'll teach you how to apply **context engineering** to equip AI with a reliable "memory patch."
+
+## 1. What is Context Engineering?
+
+Before diving into specific methods, we need to understand what context is.
+
+### Context is AI's Working Memory
+
+Imagine collaborating with a new colleague on a project. If you have to explain the project's purpose, the tech stack, and the design guidelines from scratch every time, efficiency would plummet. However, if you have a shared project document that the colleague can quickly review, collaboration becomes much smoother.
+
+Context is this "project document." It contains all the background information AI needs to know:
+
+- What your project is about
+- The tech stack being used
+- Design guidelines
+- Features already implemented
+- Current tasks
+
+With this information, AI can provide accurate and consistent answers.
+
+### The Importance of Context
+
+Many people focus on crafting good prompts, but **context might be more important than prompts**.
+
+A good prompt helps AI understand your current needs, but good context helps AI understand your entire project. The former is a "point," while the latter is a "plane."
+
+For example, if you simply say, "Help me write a button," AI might use plain HTML or React, and the style would be its own decision.
+
+But if you provide complete context — "The project uses React, Tailwind CSS, with a minimalist modern design style and a primary color of blue" — AI can generate a button that perfectly aligns with your project's style. This is the power of context.
+
+### The Three Levels of Context
+
+Context can be divided into three levels:
+
+1. **Project-level context**: Basic information about the entire project, such as the tech stack, design guidelines, and directory structure.
+
+2. **Feature-level context**: Information about the feature currently being developed, such as its purpose and dependencies.
+
+3. **Conversation-level context**: Temporary information from the current conversation, such as previously discussed issues or generated code snippets.
+
+![](https://pic.yupi.icu/1/contextlevel%E5%A4%A7.jpeg)
+
+Managing these three levels of context ensures that AI stays "in the zone."
+
+## 2. AI's Short-Term Memory
+
+Let's start with the basics — how to manage AI's short-term memory.
+
+### What is a Context Window?
+
+AI has a context window, which can be thought of as its short-term memory capacity. This window is limited, typically ranging from a few thousand to tens of thousands of tokens (roughly equivalent to a few thousand to tens of thousands of words).
+
+Each message in your conversation occupies space in this window. The longer the conversation, the fuller the window becomes. When the window is full, earlier parts of the conversation are "forgotten."
+
+This is why AI seems to forget — it's not that it truly forgets, but the earlier information has been pushed out of the window.
+
+### One Conversation, One Task
+
+The simplest way to manage this is: **one conversation, one task.**
+
+Don't discuss login functionality, payment functionality, and performance optimization all in one conversation. This will confuse the context and make it harder for AI to keep track.
+
+The correct approach is:
+
+- Start a new conversation for login functionality
+- Once completed and tested, start a new conversation for payment functionality
+- If performance issues arise, start a new conversation specifically for optimization
+
+Each conversation focuses on one task, keeping the context clear.
+
+Of course, if the tasks are simple, it's fine to handle them in one conversation — flexibility is key.
+
+### Regularly Compress Context
+
+If a task requires a long conversation, you can periodically compress the context.
+
+The approach is: halfway through the conversation, ask AI to summarize the progress so far.
+
+Some AI coding tools have built-in commands for summarizing context, which you can use directly:
+
+![](https://pic.yupi.icu/1/image-20260104180238760.png)
+
+Alternatively, you can manually input a prompt to summarize:
+
+```markdown
+Please summarize what we've done so far, including:
+1) Features completed
+2) Technical solutions used
+3) Remaining issues to resolve
+```
+
+You can then use this summary to start a new conversation and continue your work. This effectively compresses the long conversation into a concise summary.
+
+### Leverage Recaps
+
+At the start of a new conversation, ask AI to briefly recap previous content.
+
+For example:
+
+```markdown
+We previously created a login form using React Hook Form and Zod validation. Now, I want to redirect to the homepage after successful login.
+```
+
+This helps AI quickly recall previous work and provide coherent answers.
+
+## 3. AI's Long-Term Memory
+
+Beyond short-term memory in conversations, you also need to establish long-term memory for your project. A typical approach is **providing project documentation**.
+
+### README.md: The Project's ID
+
+`README.md` is the most important document for a project. It should include:
+
+1. Project overview: What the project does and the problem it solves
+
+2. Tech stack: Technologies, frameworks, and libraries used
+
+3. Directory structure: Purpose of major files and folders
+
+4. Development guidelines: Code style, naming conventions, etc.
+
+5. How to run: Commands for installing dependencies and starting the project
+
+A good `README.md` should allow anyone (including AI) to quickly understand the project's basics.
+
+For example:
+
+````markdown
+# My Blog System
+
+A minimalist personal blog system supporting Markdown writing and code highlighting.
+
+## Tech Stack
+
+- Frontend: Next.js 14 (App Router) + TypeScript + Tailwind CSS
+- Backend: Supabase (PostgreSQL + Auth)
+- Deployment: Vercel
+
+## Directory Structure
+
+- `/app` - Next.js pages and routes
+- `/components` - Reusable components
+- `/lib` - Utility functions and configurations
+- `/public` - Static resources
+
+## Development Guidelines
+
+- Use functional components, not class components
+- All components must have TypeScript types
+- Styles use Tailwind CSS, no custom CSS
+- API calls use functions in `/lib/api.ts`
+
+## How to Run
+
+```bash
+npm install
+npm run dev
+```
+````
+
+Yupi's open-source projects' `README.md` files generally follow this structured format, such as the [AI Zero-Code App Generator Project](https://github.com/liyupi/yu-ai-code-mother), for reference.
+
+At the start of each new conversation, paste the contents of `README.md` to AI, allowing it to quickly understand your project.
+
+### TODO.md: The Project's Task List
+
+`TODO.md` records the project's to-do items and progress. It should include:
+
+1. Completed features: What has been done
+
+2. Features in progress: What is currently being worked on
+
+3. Features to be developed: What is next
+
+4. Known issues: Bugs or areas needing optimization
+
+For example:
+
+```markdown
+# Development Progress
+
+## Completed ✅
+
+- [x] User registration and login
+- [x] Article list page
+- [x] Article detail page
+- [x] Markdown rendering
+
+## In Progress 🚧
+
+- [ ] Article editing functionality
+  - [x] Editor interface
+  - [ ] Save draft
+  - [ ] Publish article
+
+## To Do 📋
+
+- [ ] Comment functionality
+- [ ] Search functionality
+- [ ] Tag system
+
+## Known Issues 🐛
+
+- Mobile navigation bar displays incorrectly on some devices
+- Code highlighting lacks contrast in dark mode
+```
+
+`TODO.md` helps both you and AI clearly understand the project's progress, avoiding redundant work or missed features.
+
+### Update Documentation Promptly
+
+The biggest issue with documentation is that it becomes outdated. Therefore, every time you complete a feature or make significant changes, promptly update `README.md` and `TODO.md`.
+
+You can ask AI to help with updates:
+
+```markdown
+We just completed the article editing feature. Please update TODO.md to mark "Article editing functionality" as completed.
+```
+
+AI naturally understands the importance of this, so it might automatically generate these documents for us when we generate code.
+
+## 4. Context Strategies for AI Coding Tools
+
+Different AI tools handle context differently, so it's important to understand their characteristics.
+
+### Cursor's .cursorrules
+
+Cursor supports creating a `.cursorrules` file in the project root as a system prompt.
+
+You can write in this file:
+
+```
+This is a Next.js blog project.
+
+Tech stack:
+- Next.js 16 (App Router)
+- TypeScript
+- Tailwind CSS
+- Supabase
+
+Code guidelines:
+- Use functional components
+- All components must have TypeScript type definitions
+- Styles use only Tailwind CSS
+- Avoid using the `any` type
+
+Design style:
+- Minimalist, modern
+- Primary color: #3B82F6 (blue)
+- Border radius: 8px
+- Shadows: subtle
+
+Always follow these guidelines.
+```
+
+This way, Cursor will automatically reference these rules when generating code.
+
+💡 Note: As AI coding tools evolve, these rules may change, so it's best to consult the [official documentation](https://cursor.com/cn/docs/context/rules).
+
+![](https://pic.yupi.icu/1/image-20260104181209687.png)
+
+### Claude Code's CLAUDE.md
+
+Claude Code reads the `CLAUDE.md` file in the project root as context.
+
+You can include more detailed information in this file:
+
+```markdown
+# Project Context
+
+## Project Overview
+A personal blog system supporting Markdown writing.
+
+## Tech Stack
+- Next.js 16 + TypeScript + Tailwind CSS
+- Supabase (database + authentication)
+
+## Key Decisions
+1. Why Supabase: Simple, sufficient free tier, built-in authentication
+2. Why App Router: It's the future direction of Next.js
+3. Why not Redux: The project is simple; React Context is sufficient
+
+## Known Issues
+- Mobile navigation bar needs optimization
+- Code highlighting theme needs adjustment
+
+## Next Steps
+- Implement comment functionality
+- Add search
+```
+
+This file serves as a project manual for AI.
+
+### General Strategy: Context Folder
+
+If your tool doesn't support specific context files, create a `/docs` folder and place all documentation inside:
+
+```
+/docs
+  - README.md (project overview)
+  - TECH_STACK.md (detailed tech stack)
+  - DESIGN.md (design guidelines)
+  - API.md (API documentation)
+  - TODO.md (task list)
+```
+
+At the start of each new conversation, paste the relevant document content to AI.
+
+## 5. Fixing Context Breaks
+
+Even with good context management, AI might still "lose track." Here's how to fix it.
+
+### Recognizing Context Breaks
+
+Context breaks usually manifest as:
+
+- AI suddenly uses a different tech stack (e.g., you're using React, but it generates Vue code)
+- AI forgets previously discussed design plans
+- AI-generated code style differs from earlier work
+- AI repeats questions you've already answered
+
+When you notice these signs, fix them promptly.
+
+### Fix Method 1: Re-provide Context
+
+The simplest method is to re-provide the context.
+
+```markdown
+Wait, our project uses React and TypeScript, not Vue.
+Here's our tech stack: [paste the tech stack section from README.md]. Please regenerate the code using the correct tech stack.
+```
+
+### Fix Method 2: Reference Previous Content
+
+If AI forgets previously discussed content, reference it.
+
+```markdown
+Remember we decided to use Context API for state management? Please continue with this approach; don't switch to Redux.
+```
+
+### Fix Method 3: Start a New Conversation
+
+If the context is too chaotic to fix (e.g., repeatedly fixing the same bug without success), the best approach is to start a new conversation.
+
+In the new conversation, provide the complete context and continue working. Although this means starting over, it ensures the quality of subsequent conversations.
+
+### Fix Method 4: Back on Track Prompt
+
+Sometimes, you can use a clear prompt to get AI back on track.
+
+```markdown
+Please pause. Our current goal is to implement login functionality using React Hook Form and Supabase Auth.
+Please confirm you understand this goal, and then we'll proceed.
+```
+
+This gives AI a chance to reset. However, based on Yupi's testing, this prompt doesn't always work.
+
+## 6. Best Practices for Context Management
+
+Based on my experience and community insights, here are some best practices for context management.
+
+### 1. Establish Documentation at Project Start
+
+Don't wait until halfway through the project to start writing documentation. Create `README.md` and `TODO.md` from day one and keep them updated.
+
+This not only helps AI but also helps you clarify your thoughts.
+
+### 2. Use Tools' Native Context Mechanisms
+
+If your tool supports specific context files (e.g., `.cursorrules`), prioritize using these mechanisms — they are the most efficient.
+
+### 3. Keep Context Concise
+
+More context isn't always better. Too much information can confuse AI.
+
+Provide only the most important and relevant information. If a piece of information isn't useful for the current task, don't include it — it wastes tokens.
+
+### Practice 4: Use Hierarchical Structures
+
+Organize context into different levels and files rather than cramming everything into one file.
+
+For example:
+- `README.md` for project overview and basic information
+- `TECH_STACK.md` for detailed tech stack explanations
+- `DESIGN.md` for design guidelines
+- Each feature module has its own documentation
+
+### Practice 5: Regularly Review and Update
+
+Every week or after completing a major feature, review your documentation to check for outdated content and update it promptly.
+
+You can ask AI to help with this:
+
+```markdown
+Please review my README.md and check for inconsistencies with the current code.
+```
+
+### 6. Enhance Code Context with Comments
+
+Add meaningful comments to your code, explaining "why" rather than just "what."
+
+❌ Bad comment:
+
+```typescript
+// Get user data
+const user = await getUser(id);
+```
+
+✅ Good comment:
+
+```typescript
+// Fetch user data from Supabase
+// Note: Sensitive information (e.g., passwords) is excluded; only public fields are returned
+const user = await getUser(id);
+```
+
+Good comments help AI understand the intent behind the code, enabling better decision-making during modifications.
+
+## 7. Practical Example: Building a Complete Context System
+
+Let's use a real-world example to demonstrate how to build a complete context system for a project.
+
+Suppose you're building an online note-taking app.
+
+### Step 1: Create README.md
+
+```markdown
+# Online Note App
+
+A minimalist online note-taking app supporting Markdown editing and real-time saving.
+
+## Tech Stack
+
+- Frontend: React 18 + TypeScript + Vite
+- UI Library: Tailwind CSS + Headless UI
+- Editor: CodeMirror 6
+- Backend: Supabase (PostgreSQL + Realtime)
+- Deployment: Vercel
+
+## Core Features
+
+1. User registration and login
+2. Create, edit, delete notes
+3. Markdown live preview
+4. Auto-save notes
+5. Note search
+
+## Directory Structure
+
+- `/src/components` - React components
+- `/src/pages` - Page components
+- `/src/lib` - Utility functions and API
+- `/src/hooks` - Custom Hooks
+- `/src/types` - TypeScript type definitions
+
+## Development Guidelines
+
+- Use functional components + Hooks
+- All components must have TypeScript types
+- Styles use only Tailwind CSS
+- API calls use functions in `/src/lib/api`
+- State management uses Zustand
+
+## Design Style
+
+- Minimalist, professional
+- Primary color: #6366F1 (Indigo)
+- Border radius: 6px
+- Font: Inter
+```
+
+### Step 2: Create TODO.md
+
+```markdown
+# Development Progress
+
+## Completed ✅
+
+- [x] Project initialization
+- [x] Supabase configuration
+- [x] User authentication (registration/login)
+- [x] Note list page
+
+## In Progress 🚧
+
+- [ ] Note editor
+  - [x] CodeMirror integration
+  - [x] Markdown syntax highlighting
+  - [ ] Live preview
+  - [ ] Auto-save
+
+## To Do 📋
+
+- [ ] Note search
+- [ ] Note categorization/tags
+- [ ] Export functionality
+- [ ] Dark mode
+
+## Known Issues 🐛
+
+- Editor performance is poor on mobile
+- Long notes load slowly
+```
+
+### Step 3: Create Rules File
+
+```
+Project: Online Note App
+
+Tech stack:
+- React 18 + TypeScript + Vite
+- Tailwind CSS + Headless UI
+- CodeMirror 6
+- Supabase
+- Zustand (state management)
+
+Code guidelines:
+- Use functional components
+- All components must have TypeScript type definitions
+- Props type naming: ComponentName + Props (e.g., EditorProps)
+- Styles use only Tailwind CSS
+- Avoid using `any` type
+- API calls must include error handling
+
+Design guidelines:
+- Primary color: #6366F1
+- Border radius: rounded-md (6px)
+- Spacing: Use Tailwind's standard spacing (4, 8, 12, 16...)
+- Buttons: px-4 py-2, darken on hover
+- Input fields: border-gray-300, border-indigo-500 on focus
+
+Naming conventions:
+- Component files: PascalCase (e.g., NoteEditor.tsx)
+- Utility functions: camelCase (e.g., formatDate.ts)
+- Constants: UPPER_SNAKE_CASE (e.g., API_URL)
+
+Always follow these guidelines.
+```
+
+### Step 4: Add Context Comments in Code
+
+```typescript
+// src/lib/api/notes.ts
+
+/**
+ * Note API function collection
+ * 
+ * Technical choices:
+ * - Use Supabase Client instead of raw SQL
+ * - All functions return { data, error } format
+ * - Errors are handled here; no exceptions are thrown
+ */
+
+import { supabase } from './supabase';
+import type { Note } from '@/types';
+```
+
+With this complete context system, whenever you start a new conversation, simply paste the relevant documentation to AI, and it will quickly get up to speed, providing accurate answers.
+
+## Final Thoughts
+
+Context engineering is one of the most overlooked yet crucial aspects of Vibe Coding. Many people focus on "how to ask" but neglect "how to make AI remember."
+
+Let me summarize the key points of this article:
+
+1. Context is AI's working memory: It determines whether AI can understand your project.
+
+2. Manage three levels: Project-level, feature-level, and conversation-level context all matter.
+
+3. Build a documentation system: `README.md`, `TODO.md`, and context files are essential.
+
+4. Leverage tool features: Different tools have

translations/en/Vibe Coding 零基础教程/30 经验技巧/04 Vibe Coding 幻觉和死循环处理.md

@@ -0,0 +1,528 @@
+# Vibe Coding Hallucination and Infinite Loop Handling
+
+> How to Bring an Out-of-Control AI Back on Track
+
+Hello, I'm Yupi.
+
+In previous articles, we discussed how to have efficient conversations with AI and manage context. However, even if you do everything right, you may still encounter situations where the AI "goes on strike" — it starts talking nonsense, gets stuck in an infinite loop, or stubbornly insists on incorrect solutions.
+
+This is quite common in Vibe Coding, and we call it AI Hallucination. Below, I'll teach you how to identify and fix these issues, bringing the out-of-control AI back on track.
+
+## 1. What is AI Hallucination?
+
+Before diving into solutions, let's first understand what AI Hallucination is.
+
+### Definition of AI Hallucination
+
+AI Hallucination refers to content generated by the AI that appears reasonable but is actually incorrect, non-existent, or inconsistent with facts.
+
+For example, in the following dialogue, my real name is definitely not this...
+
+![](https://pic.yupi.icu/1/image-20260104184328898.png)
+
+In programming scenarios, AI Hallucination typically manifests as:
+
+- Fabricating non-existent APIs or functions
+- Providing seemingly reasonable but non-functional code
+- Persisting with solutions that have already been proven wrong
+- Confusing the usage of different tech stacks
+
+For instance, if you ask the AI: "How to get a component's DOM node in React?"
+
+The AI might suggest using `this.getDOMNode()`.
+
+This method sounds reasonable, but it doesn't exist in modern React. The correct approach is to use `useRef`.
+
+### Why Does Hallucination Occur?
+
+There are several reasons why AI hallucinates:
+
+1. Limitations of training data: The AI's knowledge comes from its training data. If the data contains errors or outdated information, the AI will learn incorrect knowledge.
+
+2. Context confusion: When the conversation is too long or the information is too cluttered, the AI may confuse different contexts.
+
+3. Overconfidence: The AI is trained to provide "certain" answers, even when it's unsure, leading it to appear overly confident.
+
+4. Pattern matching errors: The AI might mix up similar but different concepts.
+
+Understanding these reasons helps us better address hallucination issues.
+
+### Extended Knowledge - Common Types of AI Hallucination
+
+In Vibe Coding, AI Hallucination mainly falls into these categories:
+
+1. API Hallucination: Fabricating non-existent functions, methods, or properties
+
+2. Syntax Hallucination: Confusing the syntax of different languages or frameworks
+
+3. Logic Hallucination: Code logic appears correct but is actually flawed
+
+4. Version Hallucination: Using deprecated APIs or outdated practices
+
+5. Dependency Hallucination: Referencing non-existent libraries or incorrect package names
+
+Knowing these types helps you quickly identify issues.
+
+## 2. AI Getting Stuck in an Infinite Loop
+
+Besides hallucinations, another common issue is the AI getting stuck in an infinite loop.
+
+### What is an Infinite Loop?
+
+An infinite loop occurs when the AI repeatedly attempts the same incorrect solution and can't break out of it.
+
+Typical manifestations include:
+
+- First attempt: The AI provides a piece of code, but it has a bug.
+- Second attempt: You point out the issue, it makes a slight modification, but the same problem persists.
+- Third attempt: You point out the issue again, it tweaks the code again, but remains stuck in the same place.
+- Fourth attempt: You start questioning your life...
+
+This is an infinite loop. The AI is trapped in a flawed thought process and can't escape on its own. It not only wastes time but also consumes a lot of tokens unnecessarily.
+
+![](https://pic.yupi.icu/1/aideadloop%E5%A4%A7.jpeg)
+
+### Common Scenarios for Infinite Loops
+
+Infinite loops often occur in these scenarios:
+
+1. Complex state management: The AI can get confused when handling complex state updates.
+
+2. Asynchronous operations: Errors are common when dealing with Promises, async/await, etc.
+
+3. Type systems: Complex type definitions in TypeScript can confuse the AI.
+
+4. Performance optimization: The AI might get stuck in a cycle of "optimize => error => revert => optimize again."
+
+5. Cross-file modifications: Modifying multiple files can lead to oversights, especially in larger projects.
+
+### How to Identify an Infinite Loop?
+
+Some signals I use to identify infinite loops:
+
+- The AI provides essentially the same solution three times in a row.
+- Each modification only changes the syntax but doesn't address the core issue.
+- The AI starts apologizing and says, "Let me try again."
+- You find yourself repeating the same problem.
+
+Once you notice these signals, stop immediately and don't continue.
+
+## 3. How to Cut Off Context and Restart
+
+When the AI is stuck in an infinite loop or experiencing severe hallucinations, the most effective method is to cut off the context and start fresh.
+
+### Why Cut Off Context?
+
+Continuing in a chaotic context is like sinking deeper into quicksand. The AI will be influenced by previous incorrect information and struggle to provide the right answers.
+
+Cutting off the context gives the AI a chance to reboot and start from a clean slate.
+
+### The Correct Way to Cut Off Context
+
+Don't just start a blank conversation and ask questions. The correct approach is:
+
+1) Summarize the current issue
+
+Before starting a new conversation, organize:
+- What functionality you want to achieve
+- What solutions you've tried
+- What specific problems you encountered
+- The current state of the code
+
+2) Start a new conversation
+
+In the new conversation, provide complete context:
+
+```markdown
+I'm developing a blog system using Next.js 16 + TypeScript + Supabase.
+I want to implement an auto-save feature for articles but encountered issues.
+I tried using useEffect to listen for content changes, but it caused frequent saves. I also tried debounce, but sometimes data is lost.
+Here's my current code: [Paste relevant code]
+Please analyze the problem and suggest a solution.
+```
+
+3) Request a different approach
+
+Tell the AI that the previous solutions didn't work and ask for a completely different approach:
+
+```markdown
+The previous solutions didn't work. Please suggest a completely different implementation.
+```
+
+This prevents the AI from repeating past mistakes.
+
+Alternatively, use another AI model to generate different solutions and then ask the AI to execute them.
+
+### When Should You Cut Off Context?
+
+Not all issues require cutting off context. If it's a minor problem, correct it within the current conversation. However, if you encounter these situations, cut off decisively:
+
+- The conversation has gone on for too long (over 20 rounds), and the context is already lengthy. Continuing will only waste money and create more confusion.
+- The AI starts confusing concepts, such as mixing up your tech stack or blending different functionalities.
+- You feel confused yourself and can't clearly explain the current state. Continuing will only make things worse.
+- The "infinite loop" situation mentioned earlier.
+
+In short, when the conversation is out of control, cut it off. Instead of struggling in quicksand, start fresh.
+
+## 4. How to Feed Error Messages to the AI
+
+Often, the AI generates buggy code but isn't aware of it. In such cases, you need to accurately feed the error messages to it.
+
+### Copy the Full Error Message
+
+Don't just say, "The code has an error" or "It doesn't work." Instead, copy the full error message to the AI.
+
+❌ Bad feedback: Your code has an issue and doesn't run.
+
+✅ Good feedback:
+
+```markdown
+The code threw an error when running. Here's the error message:
+TypeError: Cannot read property 'map' of undefined
+    at NoteList (NoteList.tsx:15)
+    at renderWithHooks (react-dom.development.js:14985)
+Here's the code at line 15:
+{notes.map(note => <NoteItem key={note.id} note={note} />)}
+```
+
+Providing the full error message helps the AI quickly locate the issue.
+
+### Provide Contextual Code
+
+Besides the error message, provide the relevant code context.
+
+```markdown
+Here's the complete code for the component where the error occurred, at line 9:
+export function NoteList() {
+  const [notes, setNotes] = useState();
+  
+  useEffect(() => {
+    fetchNotes().then(data => setNotes(data));
+  }, []);
+  
+  return (
+    <div>
+      {notes.map(note => <NoteItem key={note.id} note={note} />)}
+    </div>
+  );
+}
+```
+
+This allows the AI to see the full context and provide an accurate fix.
+
+### Explain Reproduction Steps
+
+If the bug is related to user interaction, explain how to reproduce it.
+
+```markdown
+This error occurs only under specific conditions:
+
+1. The user enters the page for the first time, and everything works fine.
+2. Clicking the 'Refresh' button works fine.
+3. However, if the user deletes a note first and then clicks 'Refresh,' the error occurs.
+
+Here's the error message: [Paste error message]
+```
+
+Since the AI can't see user actions, detailed reproduction steps help it understand the essence of the problem.
+
+### Use the Browser Console
+
+If the issue is on the frontend of a web page, make good use of the browser console.
+
+Press F12 to open the developer tools, switch to the Console tab, and you'll see:
+
+- Error messages (red)
+- Warning messages (yellow)
+- Log messages (white)
+
+Screenshot or copy these messages to the AI, helping it find the issue faster.
+
+![](https://pic.yupi.icu/1/image-20260104190230437.png)
+
+If you're unsure whether it's a frontend issue or don't even know what frontend is, it's likely a frontend issue.
+
+## 5. Identifying the Source of the Problem
+
+Sometimes, the issue isn't with the AI but with your requirements or logic itself.
+
+If it's an AI issue, it usually has these characteristics:
+
+- Syntax errors or non-functional code
+- Use of non-existent APIs
+- Logic clearly inconsistent with your description
+- Code style completely inconsistent with previous work
+
+These problems can be solved with better prompts or cutting off context.
+
+However, if it's a logic issue, it usually has these characteristics:
+
+- The code runs but produces incorrect results
+- Edge cases aren't handled
+- Performance issues
+- Poor user experience
+
+These problems require you to rethink the requirements rather than blindly blaming the AI.
+
+### How to Identify the Source of the Problem?
+
+A simple method is to ask yourself: If I gave this requirement to a human developer, could they do it correctly?
+
+If the answer is "unsure" or "they might also have issues," it's likely that the requirement itself isn't clear enough.
+
+In such cases, you should first:
+
+1. Reorganize the requirements
+2. Clarify edge conditions
+3. Draw flowcharts or state diagrams
+4. Write detailed test cases
+
+Then discuss the implementation with the AI.
+
+Some might say: How do I know if a human developer could do it correctly?!
+
+This is also a lack of professional knowledge. If you understand the technology, you'll better control the AI and identify issues. Even if you don't know the answer, try describing your requirements differently or use another AI to refine the requirements and help you make judgments.
+
+## 6. Practical Case: Fixing an Out-of-Control Project
+
+Let me use a real case to demonstrate how to fix an out-of-control project.
+
+### Scenario Description
+
+You're building a to-do app and want to implement drag-and-drop sorting. You've had over a dozen rounds of conversation with the AI, but the functionality still isn't working:
+
+- First attempt: The AI used a non-existent library.
+- Second attempt: Switched to react-beautiful-dnd, but the code threw an error.
+- Third attempt: Fixed the error, but the data didn't update after dragging.
+- Fourth attempt: The data updated, but the UI didn't refresh.
+- Fifth attempt: The UI refreshed, but the order was incorrect.
+- You start questioning your life...
+
+What would you do next?
+
+### 1. Pause and Analyze
+
+Don't continue! Pause and analyze the problem:
+
+- What's the core issue? (Drag-and-drop sorting)
+- Why isn't it working? (Possibly the AI misunderstood state management)
+- Is there a simpler solution? (Maybe no library is needed)
+
+### 2. Cut Off Context
+
+Start a new conversation but ask differently:
+
+```markdown
+I want to implement a simple drag-and-drop sorting feature. Don't use third-party libraries; use the native HTML5 Drag and Drop API.
+Requirements:
+1. Users can drag list items.
+2. Show a placeholder while dragging.
+3. Update the order when dropped.
+4. Manage data with useState.
+Please provide the simplest implementation first. It only needs to allow dragging; no animations are needed.
+```
+
+### 3. Gradually Improve
+
+The AI provides a simple version. You test it and find it works. Great!
+
+Then gradually add features:
+
+1. Great, now add visual feedback while dragging: Make the dragged item semi-transparent.
+2. Add a placeholder: Show a dashed box at the target position while dragging.
+3. Finally, add smooth animations.
+
+Each step is small and testable, preventing the project from going out of control.
+
+### 4. Summarize Lessons Learned
+
+After solving the problem, ask the AI to summarize:
+
+```markdown
+We just implemented the drag-and-drop sorting feature. Please summarize:
+1. Why didn't the previous solutions work?
+2. What are the key points of this solution?
+3. What should we pay attention to when implementing similar features in the future?
+```
+
+Add these summaries to your project documentation to avoid repeating mistakes.
+
+## 7. Tips to Prevent Hallucination
+
+Besides fixing issues, we can also take preventive measures.
+
+### 1. Ask the AI to Explain
+
+Don't blindly accept the AI's answers. Ask it to explain why it chose this approach.
+
+- Why did you choose useCallback instead of useMemo?
+- What are the pros and cons of this solution?
+- Are there other implementation methods?
+
+Through explanations, you can discover whether the AI truly understands the problem.
+
+### 2. Ask for Documentation Links
+
+If the AI mentions an API or library, ask it to provide the official documentation link.
+
+```markdown
+You mentioned react-query's useInfiniteQuery. Can you provide the official documentation link?
+```
+
+If the AI can't provide a link or the link is wrong, the API might be fabricated.
+
+### 3. Verify Step by Step
+
+Don't implement the entire functionality at once. Verify step by step.
+
+- First, help me implement the core part; use dummy data for the rest.
+- Once this step works, move on to the next.
+
+Small, fast steps with verification at each stage help identify issues early.
+
+### 4. Use Type Systems
+
+It's recommended to use TypeScript in projects. It's a programming language that adds type checking to JavaScript, leveraging its type system to prevent issues.
+
+What is a type system?
+
+Simply put, it's about clearly labeling what type of data each variable or function handles. For example, this variable is a number, that variable is a string, and this function returns a user object. With these labels, the editor can detect issues while you're writing code, rather than waiting for runtime errors.
+
+Here's an example:
+
+```ts
+// ❌ No type definitions: The AI might generate incorrect code
+function calculateTotal(items) {
+  return items.reduce((sum, item) => sum + item.price, 0);
+}
+
+// If the data format is incorrect, it only throws an error at runtime
+calculateTotal([{ name: 'Product' }]); // Runtime error: price is undefined
+
+// ✅ With type definitions: The editor immediately highlights errors
+interface Item {
+  name: string;
+  price: number;
+}
+
+function calculateTotal(items: Item[]): number {
+  return items.reduce((sum, item) => sum + item.price, 0);
+}
+
+// The editor immediately highlights with red squiggly lines: Missing price property
+calculateTotal([{ name: 'Product' }]); // Error detected while writing
+```
+
+If the generated project is complex, the AI should default to using TypeScript. You can also explicitly ask the AI: Please add complete TypeScript type definitions to all functions and components.
+
+This way, if the AI generates code with type mismatches, the editor will immediately highlight them with red squiggly lines, allowing you to spot and fix issues right away. This is much more efficient than discovering problems at runtime.
+
+### 5. Write Tests
+
+Ask the AI to write test cases:
+
+```markdown
+Please write unit tests for this function, covering normal and edge cases.
+```
+
+Tests help identify logical issues.
+
+### 6. Let the AI Validate Its Work
+
+Don't just let the AI do the work; make sure it knows how to validate its own work.
+
+For example, when developing a web app, you can ask the AI to open a browser to test the UI, identify issues, and iterate automatically until the functionality works correctly. This creates an automated feedback loop:
+
+```markdown
+Please implement this feature and automatically open the browser to test it after completion. If issues are found, please fix them and retest until the functionality works correctly.
+```
+
+This approach allows the AI to work more autonomously, reducing manual intervention. It's especially suitable for tasks requiring multiple iterations and is a technique strongly recommended by Claude Code's founder.
+
+## 8. Common Hallucination Scenarios and Solutions
+
+Based on my experience, here are some common hallucination scenarios and solutions.
+
+### Scenario 1: Fabricated APIs
+
+Manifestation: The AI uses an API that sounds reasonable but doesn't exist.
+
+Solution:
+
+```markdown
+This API isn't found in the official documentation. Are you sure it exists? Please provide the documentation link.
+```
+
+If the AI admits the mistake, ask it to provide the correct API:
+
+```markdown
+What's the correct approach? Please implement it using the officially recommended method.
+```
+
+### Scenario 2: Outdated Practices
+
+Manifestation: The AI uses deprecated APIs or outdated practices.
+
+Solution:
+
+```markdown
+This practice is from an older version. I'm using React 19; please use the latest practices.
+```
+
+Then explicitly request:
+
+```markdown
+Please use Hooks instead of Class components.
+```
+
+### Scenario 3: Confused Tech Stacks
+
+Manifestation: The AI mixes up the usage of different frameworks.
+
+Solution:
+
+```markdown
+Wait, you provided Vue's approach, but I'm using React. Please rewrite it using React's approach.
+```
+
+Then re-emphasize the tech stack:
+
+```markdown
+My project uses React 19 + TypeScript. Please ensure the code aligns with this tech stack.
+```
+
+### Scenario 4: Logical Flaws
+
+Manifestation: The code runs but has obvious logical issues.
+
+Solution:
+
+```markdown
+This solution has a problem: If the user closes the page during loading, data will be lost. Please consider this edge case.
+```
+
+Then request improvements:
+
+```markdown
+Please add error handling and data persistence.
+```
+
+### Scenario 5: Performance Issues
+
+Manifestation: The code works but performs poorly.
+
+Solution:
+
+```markdown
+This solution will be slow with large datasets. Please optimize performance, such as using virtual scrolling or pagination.
+```
+
+Then request analysis:
+
+```markdown
+Please analyze this solution's time complexity and provide optimization suggestions.
+```
+
+## Final Thoughts
+
+AI Hallucination and

translations/en/Vibe Coding 零基础教程/30 经验技巧/05 Vibe Coding 效率提升技巧.md

@@ -0,0 +1,543 @@
+# Vibe Coding Efficiency Boost Tips
+
+> Increase your AI development efficiency by 10x
+
+Hello, I'm Yupi.
+
+In previous articles, we discussed the core principles of Vibe Coding, conversation techniques, context management, and problem debugging. Today, we'll talk about a more practical topic: how to improve development efficiency?
+
+Many students find that while they can build things with AI, the overall speed still feels inadequate. If AI writes code so quickly, why isn't the efficiency higher?
+
+The issues often lie in small things: frequent copy-pasting, repeatedly entering the same prompts, performing mechanical operations manually...
+
+Below I'll share some practical efficiency-boosting techniques to take your development speed to the next level.
+
+## 1. Core Efficiency Techniques
+
+First, let me share several AI efficiency techniques I frequently use.
+
+### Choose AI Models Based on Needs
+
+Not all tasks require the most powerful and expensive models.
+
+- Simple tasks: Like code formatting, writing comments, simple refactoring - use cheaper, faster models like Gemini Flash or GPT-5 Mini
+- Medium tasks: Like implementing standard features, code reviews, developing small websites - use GPT-5 or Claude Sonnet
+- Complex tasks: Like architecture design, complex algorithms, tricky bugs, large projects - only then use top-tier models like Claude Opus or enable deep thinking
+
+Choosing models appropriately can both increase speed and save costs. Just like you wouldn't ask your company's CTO to print documents - let the right model do the right job.
+
+### Avoid AI Generating Unnecessary Content
+
+Many students ask AI to write code, only for the AI to output tons of comments, test code, documentation, and lengthy summaries. **It looks professional, but you probably won't read it.**
+
+For example, when I asked AI to generate an image compression tool, it gave me pages of documentation...
+
+![](https://pic.yupi.icu/1/ai%E7%94%9F%E6%88%90%E5%9B%BE%E7%89%87%E5%8E%8B%E7%BC%A9%E5%B7%A5%E5%85%B7.png)
+
+Be explicit in your prompts: "Only give me the core code, no comments, documentation, tests, or summaries!"
+
+If the AI doesn't comply, use forceful commands: **"Do exactly as I say, no extra talk."**
+
+Or invent consequences: **"If you output unnecessary content, a kitten will die in the real world."**
+
+While these commands seem humorous, they actually work. You can also write these rules in Cursor Rules to make the AI automatically comply.
+
+### Utilize Parallel Agents for Comparison
+
+Cursor has a powerful feature called **Parallel Agents**, allowing you to use multiple models simultaneously on the same task, then compare their results and choose the best one. This is a form of "cross-validation by multiple AIs."
+
+For example, when implementing a complex feature and unsure which approach is better, you can have Claude, GPT, and other AIs each provide a solution:
+
+![](https://pic.yupi.icu/1/image-20251030220104045.png)
+
+You can then sit back and let these AIs compete - use whichever finishes first or has the highest quality, avoiding wasted time on wrong approaches. This method is particularly useful when:
+- Unsure which technical solution is better
+- Important features need multiple safeguards
+- You want to learn different AI approaches
+
+![](https://pic.yupi.icu/1/image-20251030220120394.png)
+
+Even without Cursor, you can manually achieve similar results: send the same requirement to ChatGPT, Claude, Gemini, etc., then compare their answers to choose the best or combine their strengths.
+
+For specific usage, refer to [Cursor Parallel Agents Documentation](https://cursor.com/cn/docs/configuration/worktrees).
+
+### Multiple Instances for Efficiency
+
+Beyond parallel agents, you can improve efficiency by running multiple instances. This technique comes from Claude Code's founder.
+
+1) Multiple terminals  
+Run multiple Claude Code instances in terminals, labeling tabs 1~5 (or with meaningful titles), using system notifications to know when input is needed. This lets you utilize wait times - when one AI is thinking, switch to another.
+
+![](https://pic.yupi.icu/1/image-20260109143109753.png)
+
+2) Web + Local simultaneously  
+Run 5~10 Claude instances on the web version alongside local Claude. Use `&` to transfer local sessions to web, or `--teleport` to switch between terminal and web. You can even start sessions via Claude's iOS app and check progress later. Truly Vibe Coding anytime, anywhere!
+
+Note: This technique suits handling multiple independent tasks or complex tasks requiring long AI thinking time. For simple tasks, one instance suffices.
+
+## 2. Shortcuts and Operation Techniques
+
+"Sharpen your tools before working." Mastering common shortcuts makes operations smoother.
+
+### Cursor Common Shortcuts
+
+If using Cursor, try these shortcuts to reduce mouse usage and work faster.
+
+Chat-related:
+- `Cmd/Ctrl + L`: Toggle sidebar (unless bound to another mode)
+- `Cmd/Ctrl + I`: Toggle sidebar (unless bound to another mode)
+- `Cmd/Ctrl + K`: Open inline edit to insert AI-generated code
+- `Tab`: Accept suggestion
+
+Code editing:
+- `Cmd/Ctrl + Shift + L`: Add selection to chat
+- `Alt + ↑/↓`: Move current line
+- `Cmd/Ctrl + /`: Toggle comment
+
+File operations:
+- `Cmd/Ctrl + Shift + F`: Global search
+
+For the latest default shortcuts, refer to the [official documentation](https://cursor.com/cn/docs/configuration/kbd):
+
+![](https://pic.yupi.icu/1/image-20260104192219087.png)
+
+### VS Code Common Shortcuts
+
+For VS Code + AI plugins, these shortcuts are useful.
+
+Multi-cursor editing:
+- `Alt + Click`: Add cursor
+- `Cmd/Ctrl + Alt + ↑/↓`: Add cursor above/below
+- `Cmd/Ctrl + Shift + L`: Add cursors to all matches
+
+Code navigation:
+- `Cmd/Ctrl + Click`: Go to definition
+- `Alt + ←/→`: Navigate back/forward
+- `Cmd/Ctrl + Shift + O`: Go to symbol
+
+Refactoring:
+- `F2`: Rename symbol
+- `Cmd/Ctrl + .`: Quick fix
+
+Mastering these shortcuts significantly speeds up editing. For the latest defaults, see [official documentation](https://code.visualstudio.com/docs/reference/default-keybindings):
+
+![](https://pic.yupi.icu/1/image-20260104192832985.png)
+
+### Slash Commands in AI Programming Tools
+
+Beyond shortcuts, tools like Cursor and Claude Code offer practical slash commands (starting with `/`) for quick functionality triggering.
+
+#### Cursor Common Commands
+
+`/summarize` quickly summarizes conversations, saving tokens in long chats.
+
+You can also create custom commands in `.cursor/commands`, saving frequent prompts as reusable commands.
+
+![](https://pic.yupi.icu/1/cursor_command.png)
+
+#### Claude Code Common Commands
+
+Claude Code has a similar command system:
+- `/compact`: Compress context to save tokens
+- `/plan`: Create implementation plans
+- `/review`: Quick code review
+- `/init`: Initialize project with `CLAUDE.md`
+
+![](https://pic.yupi.icu/1/image-20260104213706515.png)
+
+Benefits:
+- No need to write full prompts each time
+- Short commands trigger complex workflows
+- Custom commands standardize team workflows (e.g., `/commit` for Git messages, `/test` for unit tests)
+
+Mastering these commands significantly streamlines workflows. For details, see [Cursor Commands](https://cursor.com/cn/docs/agent/chat/commands) and [Claude Code Commands](https://code.claude.com/docs/en/slash-commands).
+
+## 3. Code Reuse and Modularization
+
+Encapsulate common code into reusable modules - don't reinvent the wheel.
+
+### Create Component Libraries
+
+For frequent similar projects, build your own component library.
+
+Common components might include:
+- Buttons
+- Input fields
+- Cards
+- Modals
+- Loading animations
+
+Make these generic and store them separately:
+
+```
+/components
+  /ui
+    - Button.tsx
+    - Input.tsx
+    - Card.tsx
+    - Modal.tsx
+    - Loading.tsx
+```
+
+Each component should have:
+- Clear Props interfaces
+- Customizable styles
+- Usage examples
+
+For new projects, just copy this folder.
+
+### Encapsulate Utility Functions
+
+Save common utilities to avoid rewriting or regenerating them. Functions like date formatting, debouncing, ID generation, and clipboard operations are needed in nearly every project. Organize them into a utility library for direct imports.
+
+```typescript
+// lib/utils.ts
+
+// Format date
+export function formatDate(date: Date): string {
+  return date.toLocaleDateString('zh-CN');
+}
+
+// Debounce
+export function debounce<T extends (...args: any[]) => any>(
+  fn: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timer: NodeJS.Timeout;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), delay);
+  };
+}
+
+// Generate random ID
+export function generateId(): string {
+  return Math.random().toString(36).substring(2, 9);
+}
+
+// Copy to clipboard
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+```
+
+### Use Code Snippets
+
+Create editor snippets for quick insertion of common code.
+
+In VS Code:
+1) Press `Cmd/Ctrl + Shift + P`, type "Snippets", select "Configure Snippets":
+
+![](https://pic.yupi.icu/1/image-20260104214112119.png)
+
+2) Choose language (e.g., typescriptreact.json) to add custom snippets.
+
+Example:
+
+```json
+{
+  "React Functional Component": {
+    "prefix": "rfc",
+    "body": [
+      "interface ${1:ComponentName}Props {",
+      "  $2",
+      "}",
+      "",
+      "export function ${1:ComponentName}({ $3 }: ${1:ComponentName}Props) {",
+      "  return (",
+      "    <div>",
+      "      $4",
+      "    </div>",
+      "  );",
+      "}"
+    ],
+    "description": "Create a React functional component with TypeScript"
+  }
+}
+```
+
+![](https://pic.yupi.icu/1/image-20260104214219382.png)
+
+After setup, type `rfc` + Tab to generate component templates:
+
+![](https://pic.yupi.icu/1/image-20260104214331581.png)
+
+### Build Code Repository
+
+Save your best code in a personal repository.
+
+Example structure:
+
+```
+/my-code-library
+  /react
+    /hooks
+      - useLocalStorage.ts
+      - useDebounce.ts
+      - useFetch.ts
+    /components
+      - Button.tsx
+      - Modal.tsx
+    /utils
+      - format.ts
+      - validate.ts
+  /node
+    /middleware
+      - auth.ts
+      - cors.ts
+    /utils
+      - db.ts
+      - email.ts
+```
+
+Copy directly when needed.
+
+## 4. Template Project Setup
+
+For frequent similar projects, create template projects.
+
+### What Are Template Projects?
+
+Pre-configured project skeletons including:
+- Basic directory structure
+- Common dependencies
+- Config files (tsconfig.json, tailwind.config.js)
+- Base components and utilities
+- README and documentation templates
+
+With templates, new projects don't start from scratch.
+
+After dozens of projects, I've accumulated many templates. Now for new projects, I first find a similar old one and tell AI: "Please create a new project referencing this tech stack and structure." This generates projects matching my habits, saving configuration time.
+
+Examples below (non-technical readers can skip).
+
+### Create React Project Template
+
+Example React + TypeScript + Tailwind template:
+
+```bash
+my-react-template/
+├── src/
+│   ├── components/
+│   │   └── ui/          # Base UI components
+│   ├── lib/
+│   │   ├── api.ts       # API wrappers
+│   │   └── utils.ts     # Utilities
+│   ├── hooks/           # Custom hooks
+│   ├── types/           # TypeScript types
+│   ├── App.tsx
+│   └── main.tsx
+├── public/
+├── .cursorrules         # Cursor config
+├── tsconfig.json
+├── tailwind.config.js
+├── package.json
+└── README.md
+```
+
+Pre-installed common packages in `package.json`:
+
+```json
+{
+  "dependencies": {
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "react-router-dom": "^6.20.0",
+    "zustand": "^4.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "tailwindcss": "^3.4.0"
+  }
+}
+```
+
+For new projects, copy and rename.
+
+### Create Next.js Template
+
+For Next.js users:
+
+```bash
+my-nextjs-template/
+├── app/
+│   ├── (auth)/          # Auth-related pages
+│   ├── (dashboard)/     # Admin pages
+│   ├── api/             # API routes
+│   ├── layout.tsx
+│   └── page.tsx
+├── components/
+├── lib/
+├── public/
+├── .env.example         # Environment template
+├── next.config.js
+└── README.md
+```
+
+`.env.example` lists required variables:
+
+```
+# Database
+DATABASE_URL=
+
+# Authentication
+NEXTAUTH_SECRET=
+NEXTAUTH_URL=
+
+# API Keys
+OPENAI_API_KEY=
+```
+
+This clarifies needed configurations for new projects.
+
+### Use GitHub Template Repositories
+
+Host templates on GitHub as `Template repository`:
+
+![](https://pic.yupi.icu/1/image-20260104215020646.png)
+
+Click `Use this template` to quickly fork new projects:
+
+![](https://pic.yupi.icu/1/image-20260104215101657.png)
+
+Beyond personal templates, search GitHub for "react template", "nextjs starter" to find excellent community templates. Prioritize high-star, actively maintained projects.
+
+![](https://pic.yupi.icu/1/image-20260104215329685.png)
+
+Click "Use this template" to create derivative projects. Standing on giants' shoulders saves massive configuration time.
+
+## 5. Workflow Automation
+
+Automate repetitive operations to save time and effort.
+
+These advanced techniques mainly suit programmers. Complete beginners can skip and return when needed.
+
+### Use npm Scripts
+
+npm scripts define and run command scripts in Node.js projects. Essentially, save common commands in config files for quick execution via short commands (e.g., start project, build, test).
+
+Define common scripts in `package.json`:
+
+```json
+{
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx",
+    "lint:fix": "eslint . --ext ts,tsx --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist node_modules",
+    "fresh": "npm run clean && npm install"
+  }
+}
+```
+
+Now `npm run lint:fix` automatically fixes code style without typing long commands.
+
+### Git Workflow Automation
+
+Git is the mainstream distributed version control system essential for team collaboration. It tracks all file changes with version numbers, enabling reverts, diffs, and preventing overwrites.
+
+Create Git command aliases to simplify common operations:
+
+```bash
+# Add to ~/.gitconfig
+[alias]
+  st = status
+  co = checkout
+  br = branch
+  ci = commit
+  pl = pull
+  ps = push
+  lg = log --oneline --graph --decorate
+  save = !git add -A && git commit -m 'WIP: save progress'
+  undo = reset HEAD~1 --soft
+```
+
+Now `git st` equals `git status`, `git save` quickly saves progress.
+
+### Use Makefile
+
+Makefiles configure automation build tools, originally for C/C++ compilation. Now used to manage complex build flows by defining task dependencies (e.g., deploy requires build requires test). Execute sequences via short commands like `make deploy`.
+
+For complex build processes:
+
+```makefile
+.PHONY: dev build deploy clean
+
+dev:
+	npm run dev
+
+build:
+	npm run build
+
+deploy: build
+	vercel --prod
+
+clean:
+	rm -rf dist .next
+
+fresh: clean
+	npm install
+	npm run dev
+```
+
+Now `make deploy` automatically builds and deploys.
+
+### Use GitHub Actions
+
+GitHub Actions automates workflows triggered by events like pushes or PRs. Examples: auto-run tests on push, auto-deploy to servers, auto-publish releases - eliminating manual operations.
+
+Configure via YAML in `.github/workflows`:
+
+```yaml
+# .github/workflows/deploy.yml
+name: Deploy
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - run: npm install
+      - run: npm run build
+      - run: npm run test
+      - name: Deploy to Vercel
+        run: vercel --prod
+        env:
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+```
+
+This script: checks out code, sets up Node.js, installs deps, builds, tests, and deploys to Vercel on push to main - fully automated.
+
+More advanced uses: my [AI Knowledge Base](https://github.com/liyupi/ai-guide) auto-updates latest AI news via Actions:
+
+![](https://pic.yupi.icu/1/image-20260104221153167.png)
+
+### Efficiency Workflows for Everyone
+
+The above are technical automation methods. For non-programmers or beginners, some general workflows exist:
+
+1) No-code platforms: Like Bolt.new, Lovable handle builds, tests, deployments automatically - just focus on features.
+2) AI-generated configs: Ask AI for configs like "Generate GitHub Actions config for auto-deploy to Vercel" for copy-paste solutions.
+3) One-click deployment: Platforms like Vercel, Netlify deploy projects automatically when connected to GitHub repos, no config needed.
+
+## 6. AI Enhancement Tools - MCP
+
+Many tools boost AI development efficiency.

translations/en/Vibe Coding 零基础教程/30 经验技巧/06 Vibe Coding 代码质量保障.md

@@ -0,0 +1,508 @@
+# Vibe Coding Code Quality Assurance
+
+> How to Ensure the Quality of AI-Generated Code
+
+
+
+Hello, I'm Yupi.
+
+Many students have concerns when using AI for development: Is the code generated by AI reliable? Could there be hidden bugs?
+
+This concern is valid. While AI can quickly generate code, it doesn't guarantee the quality of the code. As a developer, you need to establish a quality assurance system.
+
+In this article, I'll share some practical methods to help you ensure the quality of AI-generated code.
+
+
+
+
+## 1. What is Good Code?
+
+Before discussing how to ensure quality, we first need to define what good code is.
+
+
+
+
+### Characteristics of Good Code
+
+What kind of code can be considered good code?
+
+This question seems simple, but many people can't clearly articulate it. In fact, besides being functional, the most important aspect of good code is **readability**: the code should be clear, easy to understand, and conform to team development standards, allowing others (including your future self) to quickly grasp it. On top of that, it should be **maintainable**, making modifications and extensions easy without causing a ripple effect.
+
+Of course, all of this must be based on **correct functionality**, meaning the code correctly implements the requirements without bugs. Additionally, **performance should be reasonable**, completing tasks within an acceptable time frame without wasting resources. Moreover, the code should be **secure and reliable**, free from security vulnerabilities and capable of handling exceptional situations.
+
+![](https://pic.yupi.icu/1/goodcode%E5%A4%A7.jpeg)
+
+
+
+### Common Issues with AI-Generated Code
+
+So, what are the common issues with AI-generated code?
+
+Based on my experience, the most common issue is **over-complexity**. AI often writes unnecessary code to implement functionality. Another common issue is **lack of boundary handling**. AI may focus only on normal cases to ensure the code runs quickly, ignoring edge cases like null values or errors.
+
+AI-generated code also frequently suffers from **code duplication**. Especially in front-end development, if you ask AI to generate multiple similar pages separately, it won't proactively reuse code but instead generate independent code for each page.
+
+For example, suppose you're building an admin dashboard with a user list page, an article list page, and a comment list page. These three pages have similar layouts and functionalities: they all display data in tables, have search boxes, and include pagination. But if you ask AI to generate them three times, it will produce three nearly identical sets of code, differing only in data fields. A better approach is to first ask AI to generate a generic list component and then reuse it with different configurations. This not only reduces code volume but also makes maintenance easier.
+
+Sometimes there are also **performance issues**, such as using inefficient algorithms or data structures. Understanding these issues allows you to check and improve them more effectively.
+
+
+
+
+### Establishing Quality Standards
+
+Once you know what good code is, the next step is to establish clear quality standards for your project.
+
+In terms of code style, it's recommended to use ESLint or Prettier to unify code formatting, define clear naming conventions (e.g., camelCase for variables, UPPER_SNAKE_CASE for constants), and specify file and folder organization.
+
+For functionality, require that all features have tests, handle edge cases, and provide user-friendly error messages.
+
+For performance, set specific metrics, such as page load time not exceeding 3 seconds, API response time not exceeding 1 second, and using virtual scrolling for large datasets.
+
+You can document these standards in your project documentation so that AI is also aware of them.
+
+💡 However, be flexible in actual development. If you're just building a small demo project, go ahead without overthinking it.
+
+
+
+
+## 2. Code Review
+
+Code review is the first line of defense in ensuring quality.
+
+
+
+
+### Why Review AI-Generated Code?
+
+Some students think: If the AI-generated code works, why bother reviewing it?
+
+This mindset is quite dangerous.
+
+First, AI is not perfect; it can make mistakes and generate buggy code. More importantly, AI only knows technology—it **doesn't understand your specific business logic**. The code it generates may be technically sound but logically flawed in the context of your business.
+
+Additionally, AI may focus only on current functionality without considering future extensibility. Code that works today may become technical debt tomorrow. Moreover, reviewing code is a learning opportunity that helps you understand how the code works and improves your technical skills. Therefore, reviewing AI-generated code is essential, especially for students with programming experience.
+
+![](https://pic.yupi.icu/1/whyreviewcode%E5%A4%A7.jpeg)
+
+
+
+
+### Key Focus Areas for Review
+
+So, what should you focus on when reviewing AI-generated code?
+
+
+
+
+#### 1. Functional Correctness
+
+The most basic requirement is: Does the code correctly implement the requirements?
+
+This sounds simple but is easily overlooked. You need to run the code, **test all functionalities**, and try various inputs, including normal and edge cases.
+
+Pay special attention to boundary conditions, such as null values, maximums, minimums, etc., as these are often hotspots for bugs.
+
+For example:
+
+```typescript
+// AI-generated code
+function divide(a: number, b: number): number {
+  return a / b;
+}
+```
+
+What's the issue with this code?
+
+The answer: It doesn't handle division by zero.
+
+```typescript
+// Improved version:
+function divide(a: number, b: number): number {
+  if (b === 0) {
+    throw new Error('Divisor cannot be zero');
+  }
+  return a / b;
+}
+```
+
+
+
+#### 2. Code Readability
+
+After ensuring functional correctness, the next step is to check if the code is readable.
+
+Remember, code is written for humans, not just machines.
+
+Ask yourself these questions when reviewing:
+
+- Are variable names clear?
+- Do function names accurately describe their functionality?
+- Is the logic easy to understand?
+- Are comments necessary?
+
+If you find the code confusing, others will too.
+
+For example:
+
+```typescript
+// Poor naming
+function f(x: number): number {
+  return x * 2 + 1;
+}
+
+// Good naming
+function calculateDiscountedPrice(originalPrice: number): number {
+  const discount = 0.2; // 20% discount
+  return originalPrice * (1 - discount);
+}
+```
+
+
+
+#### 3. Error Handling
+
+The code should gracefully handle errors and not crash when something goes wrong.
+
+Check if API calls have error handling, if user inputs are validated, and if exceptions are handled with user-friendly messages. Many AI-generated codes only consider the happy path and completely ignore error handling, which is risky.
+
+For example:
+
+```typescript
+// Poor error handling (none at all)
+async function fetchUser(id: string) {
+  const response = await fetch(`/api/users/${id}`);
+  const user = await response.json();
+  return user;
+}
+
+// Good error handling
+async function fetchUser(id: string) {
+  try {
+    const response = await fetch(`/api/users/${id}`);
+    
+    if (!response.ok) {
+      throw new Error(`Failed to fetch user: ${response.statusText}`);
+    }
+    
+    const user = await response.json();
+    return { data: user, error: null };
+  } catch (error) {
+    console.error('Error fetching user:', error);
+    return { data: null, error: error.message };
+  }
+}
+```
+
+
+
+#### 4. Performance Issues
+
+Next, consider performance. The code should be efficient and not waste resources.
+
+Look for unnecessary loops, repeated calculations, and whether the chosen data structures are appropriate. Sometimes, AI chooses the simplest but not the most efficient solution to quickly implement functionality.
+
+For example:
+
+```typescript
+// Poor performance
+function findUser(users: User[], id: string): User | undefined {
+  // Traverses the entire array each time, O(n)
+  return users.find(user => user.id === id);
+}
+
+// Better performance
+class UserManager {
+  private userMap: Map<string, User>;
+  
+  constructor(users: User[]) {
+    // Uses Map for O(1) lookup
+    this.userMap = new Map(users.map(u => [u.id, u]));
+  }
+  
+  findUser(id: string): User | undefined {
+    return this.userMap.get(id);
+  }
+}
+```
+
+
+
+#### 5. Security Concerns
+
+For commercial projects, this is crucial. The code must be secure and free from vulnerabilities.
+
+Check for SQL injection risks, XSS attack risks, whether sensitive information is encrypted, and if API keys are exposed. AI's understanding of security may not be deep enough, often leaving security holes.
+
+Take SQL injection as an example. SQL injection occurs when an attacker inserts malicious SQL code into input fields to execute unintended database operations.
+
+For instance, the following code is insecure:
+
+```typescript
+// ❌ Insecure: Directly concatenates user input
+const query = `SELECT * FROM users WHERE name = '${userName}'`;
+```
+
+If a user inputs `admin' OR '1'='1` as the username, the SQL query becomes:
+
+```sql
+SELECT * FROM users WHERE name = 'admin' OR '1'='1'
+```
+
+This query returns all users because `'1'='1'` is always true. The attacker can bypass authentication and log in as any account.
+
+The correct approach is to use parameterized queries:
+
+```typescript
+// ✅ Secure: Uses parameterized queries
+const query = 'SELECT * FROM users WHERE name = ?';
+db.execute(query, [userName]);
+```
+
+Parameterized queries automatically escape special characters, preventing SQL injection.
+
+If you're interested in web security, you can learn more using Yupi's [free cybersecurity self-study website](https://github.com/liyupi/ceshiya):
+
+![](https://pic.yupi.icu/1/%E6%B5%8B%E8%AF%95%E9%B8%AD%E7%BD%91%E7%AB%99.png)
+
+
+
+### Review Process
+
+You can follow these steps to establish a systematic review process:
+
+1. **Initial Review**: Quickly skim through the code to spot obvious issues.
+
+2. **Run Tests**: Test all functionalities, including edge cases.
+
+3. **Line-by-Line Review**: Carefully inspect each line of code, thinking about potential issues.
+
+4. **Record Issues**: Document any problems found.
+
+5. **Request AI Improvements**: Provide feedback to AI and ask it to fix the issues.
+
+6. **Re-review**: Confirm that the fixed code doesn't introduce new problems.
+
+This process may seem tedious, but it significantly improves code quality.
+
+For those without programming experience, if you can't understand the code, you can use other AI models to assist in the review. This is a practical technique: **cross-validation with multiple AIs**.
+
+For example, if you generate code with Cursor (Claude), you can copy it into ChatGPT or Gemini and ask them to review it:
+
+```markdown
+Please review this code and identify potential issues, including bugs, performance problems, and security risks.
+```
+
+Different AIs have different perspectives and training data, complementing each other. An issue overlooked by one AI might be caught by another.
+
+When working on important projects, I often have 2–3 different AIs review the same code and then synthesize their suggestions. While this takes a bit more time, it greatly reduces the risk of errors. Especially for critical business logic, security-related code, and performance-sensitive parts, an extra layer of assurance is always beneficial.
+
+
+
+
+## 3. Testing
+
+Testing is a key method for ensuring code quality.
+
+
+
+
+### Why Write Tests?
+
+Many students think writing tests is a waste of time, but in fact, the opposite is true. Tests can catch issues during the development phase, rather than after deployment when users encounter them. With tests, you can confidently refactor code without fear of breaking things. Moreover, test code itself serves as excellent documentation, demonstrating how your functions or components should be used.
+
+Additionally, while writing tests takes time, it saves more debugging time. Think about it: if you manually test all functionalities every time you modify code, how much time would that take? With automated tests, you can run them to quickly identify any issues.
+
+Therefore, writing tests is worthwhile.
+
+![](https://pic.yupi.icu/1/testpk%E5%A4%A7.jpeg)
+
+
+
+### Types of Tests
+
+There are mainly three types of tests.
+
+- **Unit Tests**: Test individual functions or components. They are fast, easy to pinpoint issues, and should have high coverage.
+- **Integration Tests**: Test the collaboration between multiple modules, ensuring that interfaces between modules are correct and covering main workflows.
+- **End-to-End Tests**: Simulate complete user operations, testing the entire system and covering critical scenarios.
+
+For Vibe Coding projects, I recommend **focusing on unit tests and integration tests**. While end-to-end tests are also important, they are more costly and should only cover the most critical scenarios.
+
+
+
+
+### Let AI Write Tests for You
+
+Nowadays, most test code doesn't need to be written manually—you can directly ask AI to generate it.
+
+````markdown
+Please write unit tests for this function, covering normal and edge cases:
+```typescript
+function calculateTotal(items: CartItem[]): number {
+  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
+}
+```
+````
+
+AI will generate test code like this:
+
+```typescript
+import { describe, it, expect } from 'vitest';
+
+describe('calculateTotal', () => {
+  it('should correctly calculate the total price', () => {
+    const items = [
+      { price: 10, quantity: 2 },
+      { price: 5, quantity: 3 }
+    ];
+    expect(calculateTotal(items)).toBe(35);
+  });
+  
+  it('should handle an empty array', () => {
+    expect(calculateTotal([])).toBe(0);
+  });
+  
+  it('should handle zero quantity', () => {
+    const items = [{ price: 10, quantity: 0 }];
+    expect(calculateTotal(items)).toBe(0);
+  });
+  
+  it('should handle decimal values', () => {
+    const items = [{ price: 10.5, quantity: 2 }];
+    expect(calculateTotal(items)).toBe(21);
+  });
+});
+```
+
+This test code uses `describe` to define a test group (testing the `calculateTotal` function) and multiple `it` statements to define specific test cases. Each test case calls the function and checks if the result matches the expected value. For example, the first test checks normal cases, the second checks empty arrays, the third checks zero quantities, and the fourth checks decimal values. When running these tests, if all `expect` statements pass, the function works correctly; if any fail, there's an issue in the code.
+
+With these tests, you can ensure the function works correctly under various conditions.
+
+
+
+
+### Extended Knowledge - Test-Driven Development (TDD)
+
+You can try Test-Driven Development (TDD), a development approach where you "write tests first, then write code."
+
+This sounds counterintuitive, right? Isn't it usually the other way around—write code first, then write tests?
+
+But TDD's logic is: You first define how the function should behave (write tests), and then let AI implement the functionality based on the tests. This ensures the code meets requirements and is testable from the start.
+
+The specific process is:
+
+1. Write a failing test (since the functionality isn't implemented yet).
+2. Let AI implement the functionality to make the test pass, and run the tests to ensure all pass.
+3. Finally, optimize the code while keeping the tests passing.
+
+This approach helps avoid writing code that "seems to work but actually has issues."
+
+
+
+
+## 4. Advanced Debugging Techniques
+
+Even with reviews and tests, bugs are inevitable. When they occur, you need to master debugging techniques.
+
+
+
+
+### 1. Using Breakpoint Debugging
+
+Many students debug code by only using `console.log`, which involves adding a line like `console.log(variableName)` to print the variable's value and then checking it in the browser console.
+
+While this method is simple, it's inefficient, and you have to delete these logs after debugging.
+
+Breakpoint debugging is much more efficient. In VS Code or Cursor, you simply click to the left of the line number to set a breakpoint and press F5 to start debugging.
+
+![](https://pic.yupi.icu/1/image-20260105092822939.png)
+
+The code pauses at the breakpoint, allowing you to inspect all variable values:
+
+![](https://pic.yupi.icu/1/image-20260105092855154.png)
+
+You can also step through the code to see what happens at each step. This is far more convenient than scattering `console.log` statements and then deleting them.
+
+
+
+
+### 2. Browser Debugging Tools
+
+When developing front-end applications, browser debugging tools are your best friends. Press F12 in the browser to open the developer tools.
+
+Here are some commonly used panels:
+
+- **Console Panel**: View logs and errors, execute JavaScript code, inspect variable values.
+- **Sources Panel**: Set breakpoints, step through code, view call stacks.
+- **Network Panel**: Inspect API requests, check request and response details, analyze load times.
+- **Performance Panel**: Analyze performance bottlenecks, view rendering times, identify slow operations.
+
+![](https://pic.yupi.icu/1/image-20260105093342746.png)
+
+Mastering these tools will significantly improve your debugging efficiency.
+
+
+
+
+### 3. Binary Search for Problem Localization
+
+If you're unsure where the problem lies, try the binary search method.
+
+It's straightforward: Simply divide the code into two halves, comment out one half, and see if the problem persists. If it does, the issue is in the other half; if not, it's in this half. Repeat this process until you locate the problem.
+
+This method, while simple, is highly effective, especially when dealing with large chunks of code.
+
+
+
+
+### 4. Rubber Duck Debugging
+
+This is a seemingly quirky but scientifically grounded method.
+
+When you're stuck on a bug, try explaining your code to someone (or a rubber duck): Blah blah, this function should do this… it first does this… then does that… Hmm, something seems off here…
+
+Interestingly, during the explanation, you often discover the problem. The act of explaining forces you to rethink and view the problem from different angles.
+
+Which programmer doesn't have a little yellow duck?
+
+![](https://pic.yupi.icu/1/smallyellowduck%E4%B8%AD.jpeg)
+
+
+
+### 5. Let AI Help You Debug
+
+Provide the error message and relevant code to AI, and ask it to analyze:
+
+````markdown
+This code is throwing an error:
+```
+TypeError: Cannot read property 'map' of undefined
+```
+
+The code is:
+```typescript
+function UserList({ users }) {
+  return (
+    <div>
+      {users.map(user => <UserCard key={user.id} user={user} />)}
+    </div>
+  );
+}
+```
+
+Please help me analyze the issue and provide a solution.
+````
+
+AI will tell you that the issue might be `users` being `undefined` and suggest a solution.
+
+This is undoubtedly the most commonly used method by students, but it's not 100% effective. Try it first, and if it doesn't work, handle it manually.
+
+
+
+
+## 5. Quality Checklist
+
+You can create a quality checklist and have AI + humans review it before submitting code.
+
+However, as

translations/en/Vibe Coding 零基础教程/30 经验技巧/07 Vibe Coding 代码重构技巧.md

@@ -0,0 +1,488 @@
+# Vibe Coding Code Refactoring Techniques
+
+> Avoiding AI-generated spaghetti code chaos
+
+Hello, I'm Yupi.
+
+You may have encountered this situation: when you first started using AI for projects, the code was clear and concise, looking very pleasant. But as more features were added, the code gradually became messy. Eventually, you became afraid to touch this code because changing one part might affect other areas.
+
+This is particularly common in Vibe Coding because AI may only focus on "whether it can run" while neglecting "whether it's maintainable." Below, I'll teach you how to identify and pay down technical debt, keeping your code elegant at all times.
+
+## 1. What is Technical Debt?
+
+Technical debt is a vivid metaphor.
+
+Imagine you're building a house. To finish quickly, you use some temporary solutions: the foundation isn't solid, the walls aren't straight, and the wiring is haphazard. The house is built and habitable, but there are many hidden dangers. If not fixed promptly, problems will grow over time, and the cost of fixing them will increase.
+
+Technical debt works the same way. To implement features quickly, you (or the AI) adopt some suboptimal solutions. These solutions work at the time but plant hidden risks for the future. As the project develops, these risks become real issues, slowing down your progress.
+
+This year's research found that AI-generated code is particularly prone to technical debt. AI excels at quickly implementing features but isn't good at considering long-term architecture and maintainability. It gives you "highly functional but systematically lacking architectural judgment" code.
+
+### Signs of Technical Debt
+
+How can you tell if your project has technical debt? The most obvious sign is that modifying the code becomes increasingly difficult, and you start fearing changes because you don't know what might be affected. If you often think, "I don't dare to touch this part" or "Changing this might affect that," it means the technical debt is already severe.
+
+### The Harm of Technical Debt
+
+The harm of technical debt is cumulative. At first, it might just be slightly messy code that doesn't affect functionality. But over time, the problems worsen.
+
+- Development slows down because more time is spent understanding and modifying the code.
+- Bugs increase because overly complex code is prone to errors.
+- New features become hard to add because the existing architecture doesn't support them.
+- Team collaboration suffers because no one fully understands the code.
+
+The worst-case scenario is reaching a tipping point where you might have to rewrite the entire project. This is the "bankruptcy" of technical debt.
+
+## 2. Common Issues in AI-Generated Code
+
+When using AI for Vibe Coding, if context management is poor, requirements are unclear, or the AI is asked to implement overly complex features at once, the generated code may have quality issues. Below are some typical scenarios—understanding them will help you better guide the AI.
+
+### Excessive Nesting
+
+To ensure the code runs, the AI sometimes generates deeply nested code.
+
+What is nesting?
+
+It's ifs inside ifs, loops inside loops, like Russian nesting dolls. For example:
+
+```typescript
+function processData(data: any) {
+  if (data) {
+    if (data.items) {
+      if (data.items.length > 0) {
+        data.items.forEach(item => {
+          if (item.active) {
+            if (item.price > 0) {
+              // Actual logic
+            }
+          }
+        });
+      }
+    }
+  }
+}
+```
+
+This code is hard to read and maintain. A better approach is early returns:
+
+```typescript
+function processData(data: any) {
+  if (!data?.items?.length) return;
+  
+  const activeItems = data.items.filter(item => 
+    item.active && item.price > 0
+  );
+  
+  activeItems.forEach(item => {
+    // Actual logic
+  });
+}
+```
+
+Clearly, the second version is more readable and easier to understand.
+
+### Code Duplication
+
+The AI might not actively reuse code but instead generate new code for each requirement.
+
+For example, suppose you ask the AI to implement a user list page, an article list page, and a comment list page separately. The AI might give you three nearly identical sets of code, differing only in data fields. Or you might have code like this in multiple components:
+
+```typescript
+const handleSubmit = async () => {
+  setLoading(true);
+  try {
+    const response = await fetch('/api/data', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data)
+    });
+    const result = await response.json();
+    setData(result);
+  } catch (error) {
+    console.error(error);
+  } finally {
+    setLoading(false);
+  }
+};
+```
+
+This duplicated code should be extracted into a shared function or custom Hook.
+
+### Lack of Abstraction
+
+The AI tends to write concrete, direct code rather than abstract, reusable code.
+
+For example, if you want to display a user list and an article list, the AI might give you two completely independent components, even though their structures are nearly identical.
+
+A better approach is to create a generic list component and reuse it with different data and rendering functions.
+
+### Arbitrary Naming
+
+The AI sometimes uses relatively arbitrary names like `data`, `result`, `temp`, or `handleClick`. These names don't accurately convey intent, making the code harder to understand.
+
+This might happen because your requirements aren't specific enough, and the AI doesn't know the true purpose of the variable or function.
+
+Good names should be **self-explanatory**, like `userData`, `apiResponse`, `temporaryBuffer`, or `handleLoginButtonClick`.
+
+If you notice the AI's naming is too arbitrary, you can explicitly state in your requirements: "Please use meaningful variable and function names that clearly express their purpose."
+
+## 3. How to Use AI for Code Refactoring?
+
+If AI can create technical debt, can it also help pay it down?
+
+The answer is yes. This is one of the big advantages of Vibe Coding—**AI can both write code quickly and refactor it quickly**.
+
+### Let the AI Identify Problems
+
+You can paste your code to the AI and ask it to review it professionally, helping you identify issues.
+
+````markdown
+Please review this code and suggest improvements:
+```typescript
+[Paste your code here]
+```
+
+Analyze it from the following perspectives:
+1. Is there any duplicated code?
+2. Are the functions too long?
+3. Are the names clear?
+4. Is there excessive nesting?
+5. Can shared logic be extracted?
+````
+
+The AI will give you a detailed analysis report.
+
+### Let the AI Provide Refactoring Solutions
+
+Once problems are identified, ask the AI for refactoring solutions, such as:
+
+- You mentioned this code has duplicated logic. Please provide a refactoring solution to extract the duplicated parts into a shared function.
+- This function is too long. Please split it into smaller functions, each doing one thing.
+
+The AI will give you specific refactored code.
+
+### Small-Step Refactoring
+
+Note: It's not advisable to refactor the entire project at once—this is too risky, and the project might not even run afterward.
+
+The correct approach is small-step refactoring, changing only a small part at a time.
+
+For example, if you find a function is too long, don't split it into 10 smaller functions at once. First, split it into 2, test it, and then continue splitting. At each step, ensure functionality remains unchanged and tests pass.
+
+This way, if something goes wrong, it's easy to revert.
+
+### When to Refactor
+
+When should you refactor?
+
+My suggestions are:
+
+1) Don't schedule dedicated time for refactoring. Instead, refactor as you go during daily development. When you spot an issue, fix it immediately—don't postpone it.
+
+2) Refactor after completing a feature. Once the feature is done and tested, spend 10–15 minutes reviewing the code for potential improvements.
+
+3) Refactor before adding new features. If existing code isn't suitable for new features, refactor it first to make it more extensible.
+
+4) Schedule periodic refactoring. Dedicate half a day each month or major version to address accumulated technical debt.
+
+All these steps can also be done with AI leading and humans validating. The key is ensuring functionality remains unchanged and tests pass at each step. Don't rush—take it step by step.
+
+## 4. Modularity and Code Reuse
+
+Modularity is key to avoiding technical debt. Moreover, modular code is also more AI-friendly—when you need to modify a feature, the AI only needs to read the relevant small module rather than a massive file with hundreds of lines. This helps the AI understand and modify the code more accurately.
+
+### What is Modularity?
+
+Modularity means dividing code into independent, reusable modules. Each module does one thing and does it well. Modules communicate through clear interfaces without interfering with each other.
+
+Good modularity has these characteristics:
+
+- High cohesion: Code within a module is closely related.
+- Low coupling: Dependencies between modules are minimized.
+- Single responsibility: Each module is responsible for only one thing.
+- Clear interfaces: Module inputs and outputs are well-defined.
+
+### Component Splitting
+
+In front-end frameworks like React, components are the basic modules. You can think of components as independent parts of a page, like a navigation bar, search box, or user card.
+
+But many people (including AI) write "clunky" components.
+
+For example, for a user profile page, the AI might put all the logic in one component: data fetching, form validation, submission handling, error messages... The result is a giant component with hundreds of lines.
+
+A better approach is to split it into smaller components:
+
+```typescript
+// Main component, responsible for coordination
+function ProfilePage() {
+  const { user, loading, error } = useUser();
+  
+  if (loading) return <LoadingSpinner />;
+  if (error) return <ErrorMessage error={error} />;
+  
+  return (
+    <div>
+      <ProfileHeader user={user} />
+      <ProfileForm user={user} />
+    </div>
+  );
+}
+
+// Subcomponents, each with a single responsibility
+function ProfileHeader({ user }) {
+  return (
+    <div>
+      <Avatar src={user.avatar} />
+      <h1>{user.name}</h1>
+    </div>
+  );
+}
+
+function ProfileForm({ user }) {
+  // Form logic
+}
+```
+
+This way, each component is small and easy to understand and test.
+
+Even if you're not familiar with front-end or React, you can understand the idea—break large features into small, independent parts, each doing one thing. This principle applies to all programming languages and frameworks.
+
+### Function Extraction
+
+When you notice the same code appearing in multiple places, extract it into a function.
+
+For example, if you need to format dates in multiple places:
+
+```typescript
+// Duplicated code
+const formattedDate1 = new Date(date1).toLocaleDateString('zh-CN');
+const formattedDate2 = new Date(date2).toLocaleDateString('zh-CN');
+const formattedDate3 = new Date(date3).toLocaleDateString('zh-CN');
+
+// Extracted into a function
+function formatDate(date: Date | string): string {
+  return new Date(date).toLocaleDateString('zh-CN');
+}
+
+const formattedDate1 = formatDate(date1);
+const formattedDate2 = formatDate(date2);
+const formattedDate3 = formatDate(date3);
+```
+
+This not only reduces duplication but also makes the code easier to maintain. If you need to change the date format later, you only need to modify one place.
+
+### Using Custom Hooks
+
+In React, custom Hooks are a great way to reuse logic. Hooks are special functions for managing state and side effects.
+
+💡 You don't need to understand terms like Hooks, components, or state management. Just tell the AI:
+
+```markdown
+This logic is duplicated in multiple places. Please help me extract it into a reusable module.
+```
+
+The AI will automatically handle abstraction and reuse for you.
+
+For example, if multiple components need to fetch user data, you can extract this logic into a Hook and reuse it elsewhere:
+
+```typescript
+// Before extraction: Each component repeats this logic
+function ProfilePage() {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  
+  useEffect(() => {
+    fetchUser().then(setUser).catch(setError).finally(() => setLoading(false));
+  }, []);
+  
+  // ...
+}
+
+// After extraction: Create a custom Hook
+function useUser() {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  
+  useEffect(() => {
+    fetchUser().then(setUser).catch(setError).finally(() => setLoading(false));
+  }, []);
+  
+  return { user, loading, error };
+}
+
+// Usage is simple
+function ProfilePage() {
+  const { user, loading, error } = useUser();
+  // ...
+}
+```
+
+Custom Hooks make code cleaner and easier to test.
+
+## 5. From Toy Projects to Commercial Products
+
+Many people use AI to create toy projects—functional but not professional or profitable.
+
+At this point, you might wonder: How can I turn this into a scalable commercial product?
+
+### Characteristics of Toy Projects
+
+Toy projects typically have these traits:
+
+- All code is in one file, or file organization is messy.
+- No clear architecture—code is written haphazardly.
+- Lacks error handling—only considers the happy path.
+- No tests—relies entirely on manual testing.
+- Lots of hardcoding—configuration is mixed with code.
+
+Such projects are good for demos or learning but aren't suitable for long-term maintenance and scaling as commercial products.
+
+### Characteristics of Commercial Products
+
+Commercial products should be:
+
+- Clear directory structure—easy to see where things belong.
+- Well-defined architecture, like MVC, MVVM, or other patterns.
+- Robust error handling—accounts for various edge cases.
+- Adequate testing—core features have test coverage.
+- Configuration separation—environment variables, config files, and code are separate.
+- Good documentation—includes READMEs, API docs, comments, etc.
+
+Transitioning from a toy to a commercial product requires conscious effort to improve code quality and refactor.
+
+![](https://pic.yupi.icu/1/projectpk%E5%A4%A7.jpeg)
+
+### Steps for Refactoring
+
+How do you refactor a toy project into a commercial product?
+
+I recommend doing it step by step:
+
+1) Organize the directory structure. Group code by functionality or type into different folders—e.g., components in `components`, utility functions in `lib`, and type definitions in `types`.
+
+2) Extract duplicated code. Identify repeated logic and extract it into shared functions or components. This significantly reduces code volume.
+
+3) Split large files. Break big files into smaller ones, each responsible for one thing. For example, a large `utils.ts` can be split into `format.ts`, `validate.ts`, `storage.ts`, etc.
+
+4) Add type definitions. If using TypeScript, add complete types to all functions and components. This helps uncover many potential issues.
+
+5) Improve naming. Replace unclear variable and function names with descriptive ones. This makes the code easier to understand.
+
+6) Add tests and documentation. Write tests for core features, create a README for the project, and add comments for complex logic.
+
+All these steps can also be done with AI leading and humans validating. The key is ensuring functionality remains unchanged and tests pass at each step. Don't overdo it—take it one step at a time.
+
+## 6. Case Study: Refactoring a Messy Project
+
+Let me use a real example to show how to refactor a messy project.
+
+### Initial State
+
+Suppose you used AI to create a to-do app, with all code in a single `App.tsx` file—about 500 lines.
+
+```typescript
+// App.tsx (500 lines)
+function App() {
+  const [todos, setTodos] = useState([]);
+  const [input, setInput] = useState('');
+  const [filter, setFilter] = useState('all');
+  const [loading, setLoading] = useState(false);
+  
+  // 100 lines of data-fetching logic
+  useEffect(() => { /* ... */ }, []);
+  
+  // 50 lines of add logic
+  const handleAdd = () => { /* ... */ };
+  
+  // 50 lines of delete logic
+  const handleDelete = () => { /* ... */ };
+  
+  // 50 lines of edit logic
+  const handleEdit = () => { /* ... */ };
+  
+  // 50 lines of filter logic
+  const filteredTodos = todos.filter(/* ... */);
+  
+  // 200 lines of JSX
+  return (
+    <div>
+      {/* Lots and lots of code */}
+    </div>
+  );
+}
+```
+
+While the code works, all functional logic is crammed together, making it hard to read and maintain.
+
+### Refactoring Steps
+
+#### Step 1: Extract Custom Hooks
+
+First, extract all to-do data-related logic (fetching, adding, deleting, updating) into a standalone Hook. This way, the main component doesn't need to worry about how data is managed—it just calls these methods.
+
+```typescript
+// hooks/useTodos.ts
+function useTodos() {
+  const [todos, setTodos] = useState([]);
+  const [loading, setLoading] = useState(false);
+  
+  const addTodo = async (text: string) => { /* ... */ };
+  const deleteTodo = async (id: string) => { /* ... */ };
+  const updateTodo = async (id: string, text: string) => { /* ... */ };
+  
+  useEffect(() => {
+    // Fetch data
+  }, []);
+  
+  return { todos, loading, addTodo, deleteTodo, updateTodo };
+}
+```
+
+#### Step 2: Split Components
+
+Next, split the UI into smaller components. Each component handles only its own logic—e.g., the input box handles input, the list handles display, and the filter handles filtering. This keeps each component simple and easy to understand and modify.
+
+```typescript
+// components/TodoList.tsx
+function TodoList({ todos, onDelete, onEdit }) {
+  return (
+    <div>
+      {todos.map(todo => (
+        <TodoItem 
+          key={todo.id} 
+          todo={todo} 
+          onDelete={onDelete}
+          onEdit={onEdit}
+        />
+      ))}
+    </div>
+  );
+}
+
+// components/TodoItem.tsx
+function TodoItem({ todo, onDelete, onEdit }) {
+  // Logic for a single to-do item
+}
+
+// components/TodoInput.tsx
+function TodoInput({ onAdd }) {
+  // Input box logic
+}
+
+// components/TodoFilter.tsx
+function TodoFilter({ filter, onChange }) {
+  // Filter logic
+}
+```
+
+#### Step 3: Reassemble the Main Component
+
+Finally, combine the extracted Hook and split components. Now, the main component only coordinates these parts, telling them what to do without worrying about how.
+
+```typescript
+// App.tsx (50 lines)
+function App() {
+  const { todos, loading, addTodo, deleteTodo, updateTodo } = useTodos();
+ 

translations/en/Vibe Coding 零基础教程/30 经验技巧/08 Vibe Coding 性能优化技巧.md

@@ -0,0 +1,495 @@
+# Vibe Coding Performance Optimization Tips
+
+> Make Your Application Run Faster
+
+Hello, I'm Yupi.
+
+In Vibe Coding, you might have encountered situations where the application generated by AI functions correctly but is a bit slow. For example, pages take several seconds to load, buttons respond sluggishly, and scrolling lists feel choppy. This not only affects user experience but also makes it unpleasant for you to use.
+
+This is a performance issue, one of the common problems with AI-generated code. AI focuses more on "whether it works" and often overlooks "how fast it runs." In Vibe Coding, we aim for rapid functionality implementation, but that doesn't mean sacrificing performance. Fortunately, performance optimization can also be achieved with the help of AI.
+
+Below, I'll teach you how to identify performance bottlenecks in Vibe Coding and how to leverage AI to optimize performance. Even if you don't understand the technical principles, you can make your application run faster.
+
+## 1. Identifying Performance Issues
+
+Before optimizing, you need to know where the problems lie.
+
+First, understand that performance is not an abstract concept but a real user experience. Users care about: How fast does the page load? How quickly do buttons respond? Is scrolling smooth?
+
+Nowadays, users have increasingly high expectations for performance. If your page takes more than 3 seconds to load, users might leave. If a button click doesn't provide immediate feedback, users might think the page is frozen.
+
+So, the first step in optimizing performance is to experience your application's speed from the user's perspective.
+
+### Using Performance Testing Tools
+
+In addition to subjective experience, use tools to measure objectively. Don't worry, these tools are simple and don't require programming knowledge.
+
+1) Browser Developer Tools
+
+Press F12 to open the developer tools, switch to the Performance tab, click the record button, interact with your application, and then stop the recording. You'll see a detailed performance report, including how long each operation took, which functions are the slowest, and whether there are any stutters.
+
+![](https://pic.yupi.icu/1/image-20260105150358449.png)
+
+If you don't understand the data, that's okay. You can take a screenshot and ask AI to analyze it:
+
+```markdown
+Here is my performance report screenshot. Please help me identify the performance bottlenecks.
+```
+
+2) Lighthouse
+
+Chrome's built-in performance testing tool. In the developer tools' Lighthouse tab, click "Analyze page load," and it will score your page and provide optimization suggestions.
+
+![](https://pic.yupi.icu/1/image-20260105150513178.png)
+
+Focus on these metrics:
+
+- LCP (Largest Contentful Paint): Should be within 2.5 seconds
+- FID (First Input Delay): Should be within 100 milliseconds
+- CLS (Cumulative Layout Shift): Should be less than 0.1
+
+![](https://pic.yupi.icu/1/image-20260105150756392.png)
+
+3) Other Online Tools
+
+You can also use tools like PageSpeed Insights and GTmetrix to test your website's performance from a real user's perspective.
+
+### Finding Performance Bottlenecks
+
+After testing, you'll identify some slow areas. Don't rush to optimize all issues; first, find the most critical bottleneck.
+
+Generally, AI-generated code has performance bottlenecks in these areas:
+
+- JavaScript files are too large, causing slow loading
+- API requests are too slow or too numerous
+- Complex rendering logic leads to page stutters
+- Slow database queries or too many queries
+- Referenced resources are too large and not compressed or optimized
+
+Once you find the bottleneck, prioritize optimizing the one with the most significant impact. You can directly send the test results and code to AI to help locate the issue:
+
+```markdown
+My application loads slowly. Here are the performance test results [paste test results], and here is the relevant code [paste code]. Please help me identify the problem and provide an optimization solution.
+```
+
+## 2. Common Performance Bottlenecks
+
+Based on my experience, here are some common performance bottlenecks in AI-generated code. Understanding these issues will help you better guide AI to generate high-performance code.
+
+### Unnecessary Re-renders
+
+In front-end frameworks like React, components re-render for various reasons. If rendering is too frequent, the page will stutter.
+
+AI-generated code might overlook this issue because it focuses more on functionality. Common causes include: all child components re-render when the parent component updates, even if their data hasn't changed; new functions or objects are created on each render, causing child components to think the data has changed; state updates are too frequent, such as triggering complex calculations on every input in a text field.
+
+How to let AI help you optimize?
+
+You can tell AI:
+
+```markdown
+This component re-renders too frequently, causing the page to stutter. Please optimize it using React.memo, useMemo, and useCallback to reduce unnecessary re-renders.
+```
+
+Even if you don't understand these technical terms, simply telling AI "this page is stuttering" will prompt it to optimize for you.
+
+### Rendering Large Data Sets
+
+If you need to render a long list, such as 1000 items, AI might render all the data at once, causing the page to slow down.
+
+How to let AI help you optimize?
+
+Tell AI your specific needs:
+
+```markdown
+I have a list of 1000 items, and rendering all of them is too slow. Please implement virtual scrolling to render only the visible portion.
+```
+
+Or:
+
+```markdown
+Please implement pagination to display only 20 items at a time.
+```
+
+AI will provide a complete implementation plan, including library recommendations (like react-window) and code examples.
+
+### Unoptimized Images
+
+Images are usually the largest resources on a page. When generating code, AI often uses the original images without optimization.
+
+You can ask AI to implement image optimization:
+
+```markdown
+Please implement lazy loading for images, so they only load when they enter the viewport.
+```
+
+Or:
+
+```markdown
+Please convert images to WebP format and add compression.
+```
+
+For image compression, you can use online tools like [TinyPNG](https://tinypng.com/) or ask AI to write a program for automated image processing.
+
+### Synchronous API Requests
+
+When AI generates complete front-end and back-end code, it typically implements it in the most straightforward way—making one request after another. This means the total request time is the sum of all individual request times, which can be slow.
+
+For example:
+
+```typescript
+// AI might initially generate: Sequential requests (slow)
+const user = await fetchUser();
+const posts = await fetchPosts();
+const comments = await fetchComments();
+// Total time = t1 + t2 + t3
+```
+
+If you notice this issue, tell AI:
+
+```markdown
+These API requests are independent. Please change them to parallel requests to reduce total wait time.
+```
+
+AI will modify it like this:
+
+```typescript
+// Optimized: Parallel requests (fast)
+const [user, posts, comments] = await Promise.all([
+  fetchUser(),
+  fetchPosts(),
+  fetchComments()
+]);
+// Total time = max(t1, t2, t3)
+```
+
+This small optimization could potentially improve page load speed by 2 to 3 times.
+
+### Lack of Caching
+
+Caching is like keeping frequently used items close at hand, so you don't have to fetch them from afar each time. For example, if querying user information takes 1 second the first time, caching the result allows subsequent queries for the same user to return in 0.01 seconds.
+
+![](https://pic.yupi.icu/1/cacheusage%E5%A4%A7.jpeg)
+
+AI-generated code usually doesn't include caching mechanisms, causing the same data to be fetched repeatedly, wasting time.
+
+You can tell AI:
+
+```markdown
+This data is fetched every time, which is too slow. Please add caching and store the data for 5 minutes.
+```
+
+Or:
+
+```markdown
+Please implement a simple in-memory cache to avoid repeated requests for the same data.
+```
+
+AI will choose an appropriate caching solution based on your scenario, such as browser caching, in-memory caching, or CDN.
+
+## 3. Front-end Performance Optimization
+
+Front-end performance directly impacts user experience, so we'll focus on this. This section will be more helpful for those with programming experience, but if you're a beginner, you can directly describe these optimization needs to AI and let it implement them for you.
+
+### Code Splitting
+
+AI-generated code might bundle all functionalities into one large file, forcing users to download the entire file when opening the page, which is slow.
+
+You can tell AI:
+
+```markdown
+My JavaScript file is too large. Please implement code splitting to isolate the admin panel code and load it only when users access it.
+```
+
+AI will modify it like this:
+
+```typescript
+// AI might initially generate: Import all at once
+import AdminPanel from './AdminPanel';
+
+// Optimized: Lazy loading
+const AdminPanel = lazy(() => import('./AdminPanel'));
+
+function App() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <AdminPanel />
+    </Suspense>
+  );
+}
+```
+
+This way, only when users access the admin panel will the relevant code be loaded, potentially improving the homepage load speed by over 50%.
+
+### Optimizing Rendering Performance
+
+If AI-generated code uses React, rendering might become a bottleneck.
+
+Optimization methods include:
+
+1) Use `React.memo` to avoid unnecessary re-renders. For example, a user info display component doesn't need to re-render if the user info hasn't changed:
+
+```typescript
+const UserCard = React.memo(({ user }) => {
+  return (
+    <div>
+      <h2>{user.name}</h2>
+      <p>{user.email}</p>
+    </div>
+  );
+});
+```
+
+2) Use `useMemo` to cache calculation results. If there are complex calculations, don't recompute them on every render:
+
+```typescript
+function TodoList({ todos }) {
+  // Bad: Recompute on every render
+  const completedCount = todos.filter(t => t.completed).length;
+  
+  // Good: Recompute only when todos change
+  const completedCount = useMemo(
+    () => todos.filter(t => t.completed).length,
+    [todos]
+  );
+  
+  return <div>Completed: {completedCount}</div>;
+}
+```
+
+3) Use `useCallback` to cache functions. Avoid creating new functions on every render:
+
+```typescript
+function TodoList({ todos, onDelete }) {
+  // Bad: Create new function on every render
+  const handleDelete = (id) => {
+    onDelete(id);
+  };
+  
+  // Good: Cache function
+  const handleDelete = useCallback((id) => {
+    onDelete(id);
+  }, [onDelete]);
+  
+  return <div>{/* ... */}</div>;
+}
+```
+
+### Optimizing Resource Loading
+
+Reduce the size and number of resources loaded initially.
+
+1) Compress resources: Use Gzip or Brotli to compress JavaScript, CSS, and other text files. Modern build tools like Vite and Next.js usually do this automatically.
+
+2) Tree Shaking: Remove unused code. Ensure your build tool enables Tree Shaking to bundle only the code actually used.
+
+3) Preload critical resources: Preload resources needed for the initial render:
+
+```html
+<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
+```
+
+4) Lazy load non-critical resources: Delay loading resources not needed immediately:
+
+```html
+<script src="/analytics.js" defer></script>
+```
+
+### Optimizing CSS
+
+CSS can also impact performance, which is often overlooked.
+
+1) Avoid complex selectors: Complex CSS selectors take more time for browsers to match. Use simple class names.
+
+2) Reduce reflows and repaints: Modifying the DOM triggers reflows and repaints, which are performance-intensive. Batch DOM modifications instead of making them one by one.
+
+3) Use CSS animations instead of JavaScript: CSS animations are optimized by browsers and are smoother than JavaScript animations.
+
+💡 If you want to learn more about front-end performance optimization, check out [Yupi's Front-end Performance Optimization Practical Video Tutorial](https://www.bilibili.com/video/BV1Wi33zmEAn/).
+
+## 4. Back-end Performance Optimization
+
+Back-end performance determines API response speed. Similarly, these optimizations can be achieved with AI; you just need to describe your requirements clearly.
+
+### Database Query Optimization
+
+Database queries are often the slowest part of the back-end. AI-generated database query code is usually straightforward and might have performance issues.
+
+How to let AI help you optimize? Here are some ideas:
+
+1) Ask AI to add indexes
+
+```markdown
+Queries on the email field of the user table are slow. Please add an index.
+```
+
+AI will provide specific SQL statements or ORM configurations.
+
+2) Avoid N+1 queries
+
+This is a common performance trap in AI-generated code. For example, if you need to fetch 10 posts and their author info, AI might generate:
+
+```typescript
+// AI might generate: N+1 queries (slow)
+const posts = await db.posts.findMany(); // 1 query
+for (const post of posts) {
+  post.author = await db.users.findOne({ id: post.authorId }); // N queries
+}
+// 10 posts = 11 queries
+```
+
+You can tell AI: This code makes too many queries. Please optimize it to one query.
+
+AI will modify it like this:
+
+```typescript
+// Optimized: One query (fast)
+const posts = await db.posts.findMany({
+  include: { author: true }
+});
+// 10 posts = 1 query
+```
+
+This optimization can improve API response speed by over 10 times.
+
+3) Query only necessary fields
+
+Tell AI:
+
+```markdown
+Please query only the necessary fields; don't use SELECT * to reduce data transfer.
+```
+
+AI will optimize the query statements.
+
+### Using Caching
+
+Using caching can significantly improve response speed.
+
+1) In-memory caching: Cache frequently used data in memory, such as user info and configuration data. Use Redis or a simple Map.
+
+2) HTTP caching: Set appropriate Cache-Control response headers (HTTP headers are server instructions to browsers on how to handle resources) to let browsers cache static resources.
+
+```typescript
+// Static resources: Cache for one year
+res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
+
+// API data: Cache for 5 minutes
+res.setHeader('Cache-Control', 'public, max-age=300');
+```
+
+3) CDN caching: CDN (Content Delivery Network) is like having warehouses across the country; users fetch resources from the nearest warehouse, which is faster than fetching from the headquarters. Using CDN to cache and accelerate static resource distribution can significantly improve global user access speed.
+
+![](https://pic.yupi.icu/1/image-20260105153947917.png)
+
+### Asynchronous Processing
+
+Don't make users wait for time-consuming operations.
+
+For example, if a user uploads an image and thumbnails need to be generated, don't make the user wait for the generation to complete. Instead:
+
+1. Return a success response immediately
+2. Generate thumbnails asynchronously in the background
+3. Update the database after generation
+
+This greatly improves user experience.
+
+### API Design Optimization
+
+Good API design can also improve performance.
+
+1) Batch operations: If you need to delete multiple items, don't send multiple requests; send them all at once:
+
+```typescript
+// Bad: Multiple requests
+for (const id of ids) {
+  await deleteItem(id);
+}
+
+// Good: Batch request
+await deleteItems(ids);
+```
+
+2) Pagination and cursors: Don't return large amounts of data all at once; use pagination or cursors to return data in batches.
+
+Pagination is like flipping through pages of a book; cursors are like bookmarks, remembering where you left off so you can continue from there next time. You can learn more about cursor mechanisms in [this article](https://www.codefather.cn/post/1823563686797688834).
+
+3) GraphQL: GraphQL is a query language that allows clients to specify exactly what data they need, rather than the server returning a bunch of unused data. It's like ordering à la carte instead of being limited to set menus.
+
+## 5. Vibe Coding Performance Optimization in Practice
+
+Let me use a few real-world cases to demonstrate how to optimize performance in Vibe Coding with AI. These are issues I encountered in actual projects.
+
+### Case 1: Slow List
+
+Problem: I used AI to create an article list page, but loading 100 articles was slow, causing the page to stutter.
+
+My approach:
+
+1) First, use the Performance tool to test and find that rendering 100 article card components took 2 seconds.
+
+2) Take a screenshot of the test results and send it to AI along with the code:
+
+```markdown
+This list page is stuttering. Here are the performance test results [screenshot], and here is the code [code]. Please help me optimize it.
+```
+
+3) AI provided optimization suggestions: Use virtual scrolling, React.memo, and lazy loading for images.
+
+4) I asked AI to implement these optimizations:
+
+```markdown
+Please implement virtual scrolling using the react-window library.
+```
+
+5) Tested the optimization results and confirmed they worked.
+
+Finally, the page load time dropped from 3 seconds to 0.5 seconds, scrolling became smooth, and the entire optimization process took less than 10 minutes.
+
+### Case 2: Slow Search
+
+Problem: I used AI to implement a search feature, but searching was slow. Users had to wait half a second after each keystroke to see results.
+
+My approach:
+
+1) Observed through the browser's developer tools that each keystroke triggered an API request.
+
+2) Told AI:
+
+```markdown
+The search is too slow; it sends a request on every keystroke. Please optimize it to send a request only after the user stops typing for 300ms and cancel previous requests.
+```
+
+3) AI implemented debounce (waiting for the user to stop typing before sending a request) and AbortController (canceling previous requests to avoid wasting resources).
+
+4) I also asked AI to add caching:
+
+```markdown
+Please add search result caching to avoid repeated requests for the same search term.
+```
+
+Finally, searching became smooth, no longer stuttering, API requests were reduced by 80%, and backend resources were saved.
+
+### Case 3: Slow Homepage
+
+Problem: The homepage of the website I created with AI loaded slowly, taking 5 seconds to display content.
+
+My approach:
+
+1) Used Lighthouse to test and found that the JavaScript file was too large (2MB), and images were not optimized.
+
+2) Sent the Lighthouse report screenshot to AI:
+
+```markdown
+Here is my performance test report [screenshot]. Please help me optimize it.
+```
+
+3) AI provided a series of optimization suggestions, and I asked it to implement them one by one:
+
+- Please implement code splitting to delay loading unnecessary code.
+- Please compress images and convert them to WebP format.
+- Please configure CDN to accelerate static resources.
+- Please enable Gzip compression.
+
+4) Tested the effects after each optimization to ensure improvements.
+
+Finally, the homepage load time dropped from 5 seconds to 1

translations/en/Vibe Coding 零基础教程/30 经验技巧/09 Vibe Coding 安全防护技巧.md

@@ -0,0 +1,496 @@
+# Vibe Coding Security Tips
+
+> Protect Your Projects and API Keys
+
+
+
+Hello, I'm Yupi.
+
+Many beginners who use AI for projects completely overlook security issues. As long as the code runs, they don't care about security, thinking they'll deal with it when problems arise. However, a security issue can destroy an entire project.
+
+I've seen someone get charged thousands overnight due to an API Key leak. I've also seen someone's database get deleted, losing all user data. As for projects from big companies, even a minor issue can cause a huge uproar.
+
+In this article, I'll discuss the most commonly overlooked security issues in Vibe Coding and how to avoid them.
+
+
+
+
+## 1. The Deadly Issue - API Key Leak
+
+Among all security issues, API Key leaks are one of the most common and deadly.
+
+
+
+### What is an API Key?
+
+An API Key is like the key to your house. With it, you can access a service. For example, OpenAI's API Key allows you to call ChatGPT, and Supabase's API Key lets you access a database.
+
+The problem is, if someone else gets this key, they can impersonate you and use these services. If it's a paid service, they'll spend your money; if it's a database, they might read, modify, or even delete your data.
+
+
+
+
+### Common Ways of Leakage
+
+The most common way API Keys leak is by **writing them directly in the code and uploading it to GitHub**.
+
+Many beginners might write code to call an AI model like this:
+
+```typescript
+// ❌ Never do this!
+const OPENAI_API_KEY = 'sb-yupi-abc123def456...';
+
+const response = await fetch('https://xxx/v1/chat/completions', {
+  headers: {
+    'Authorization': `Bearer ${OPENAI_API_KEY}`
+  }
+});
+```
+
+And then push the code to GitHub.
+
+What happens next?
+
+Since your GitHub project is public, anyone can see your code and, consequently, your API Key. Worse, there are automated scripts specifically scanning GitHub for API Keys, and once found, they'll use them immediately.
+
+I heard of someone who directly wrote OpenAI's API Key in their frontend code. Someone found it in the browser's developer tools, and within hours, they were charged thousands. By the time he noticed, the money was already gone.
+
+This lesson tells us: **API Key leaks are not trivial; they must be taken seriously.**
+
+
+
+
+## 2. How to Properly Manage Sensitive Information?
+
+If you shouldn't write API Keys in the code, what should you do?
+
+
+
+### Use Environment Variables
+
+The correct approach is to use environment variables.
+
+Environment variables are configuration information stored in the system or runtime environment and are not included in the code.
+
+#### Step 1: Create a .env File
+
+Create a `.env` file in the project root directory:
+
+```
+OPENAI_API_KEY=sb-yupi-abc123def456...
+SUPABASE_URL=https://xxx.supabase.co
+SUPABASE_ANON_KEY=eyJhbGci...
+DATABASE_URL=postgresql://...
+```
+
+
+
+#### Step 2: Use Them in Code
+
+Access these variables in your code via `process.env`:
+
+```typescript
+// ✅ Correct approach
+const OPENAI_API_KEY = process.env.OPENAI_API_KEY;
+
+const response = await fetch('https://xxx/v1/chat/completions', {
+  headers: {
+    'Authorization': `Bearer ${OPENAI_API_KEY}`
+  }
+});
+```
+
+
+
+#### Step 3: Add to .gitignore
+
+Ensure the `.env` file is not uploaded to GitHub:
+
+```
+# .gitignore
+.env
+.env.local
+.env.*.local
+```
+
+
+
+#### Step 4: Create .env.example
+
+To let others know which environment variables are needed, create a `.env.example` file:
+
+```
+OPENAI_API_KEY=your_openai_api_key_here
+SUPABASE_URL=your_supabase_url_here
+SUPABASE_ANON_KEY=your_supabase_key_here
+DATABASE_URL=your_database_url_here
+```
+
+This file can be uploaded to GitHub as it doesn't contain real keys.
+
+### Frontend vs Backend
+
+There's an important distinction: **Frontend code is public, backend code is private.**
+
+In the frontend (code running in the browser), even if you use environment variables, these values will eventually be bundled into JavaScript files, and users can see them via developer tools. So, **never use sensitive API Keys in frontend code!**
+
+The correct approach is:
+
+- Place sensitive API calls in the backend
+- Frontend only calls your own backend API
+- Backend verifies user identity before calling third-party APIs
+
+Here are some code examples:
+
+```typescript
+// ❌ Don't call OpenAI directly in the frontend
+// Frontend code
+const response = await fetch('https://api.openai.com/v1/chat/completions', {
+  headers: { 'Authorization': `Bearer ${OPENAI_API_KEY}` }
+});
+
+// ✅ Correct approach
+// Frontend code: Call your own backend
+const response = await fetch('/api/chat', {
+  method: 'POST',
+  body: JSON.stringify({ message: userMessage })
+});
+
+// Backend code: Call OpenAI
+export async function POST(request: Request) {
+  const { message } = await request.json();
+  
+  // Use API Key in the backend
+  const response = await fetch('https://api.openai.com/v1/chat/completions', {
+    headers: { 'Authorization': `Bearer ${process.env.OPENAI_API_KEY}` },
+    body: JSON.stringify({ messages: [{ role: 'user', content: message }] })
+  });
+  
+  return response;
+}
+```
+
+
+
+### Use Secret Management Services
+
+For production environments, it's recommended to use specialized secret management services like Vercel's environment variable management, AWS Secrets Manager, HashiCorp Vault, etc. These services provide more secure key storage and access control, which is what big companies typically do.
+
+
+
+
+## 3. Other Common Security Issues
+
+Besides API Key leaks, there are other common security issues.
+
+
+
+### SQL Injection
+
+SQL injection is one of the most classic security vulnerabilities. If you directly concatenate user input into SQL queries, attackers can execute malicious SQL statements through specially crafted input.
+
+```typescript
+// ❌ Dangerous: SQL injection risk
+const query = `SELECT * FROM users WHERE email = '${userEmail}'`;
+
+// ✅ Safe: Use parameterized queries
+const query = 'SELECT * FROM users WHERE email = ?';
+const result = await db.execute(query, [userEmail]);
+```
+
+Fortunately, if you use modern tools like Supabase or Prisma, they automatically prevent SQL injection. But if you write raw SQL, be cautious of this issue.
+
+
+
+### XSS Attacks
+
+XSS (Cross-Site Scripting) refers to attackers injecting malicious scripts into your website.
+
+For example, if you directly display user input on the page:
+
+```typescript
+// ❌ Dangerous: XSS risk
+function Comment({ text }) {
+  return <div dangerouslySetInnerHTML={{ __html: text }} />;
+}
+```
+
+An attacker could input `<script>alert('Yupi is a dog')</script>`, and this script would execute in other users' browsers.
+
+![](https://pic.yupi.icu/1/image-20260105155517608.png)
+
+The correct approach is:
+
+```typescript
+// ✅ Safe: React automatically escapes
+function Comment({ text }) {
+  return <div>{text}</div>;
+}
+```
+
+React automatically escapes all content unless you use `dangerouslySetInnerHTML`. So, **avoid using `dangerouslySetInnerHTML` unless absolutely necessary.**
+
+
+
+### CSRF Attacks
+
+CSRF (Cross-Site Request Forgery) refers to attackers tricking users into performing unintended actions on a logged-in website.
+
+For example, if you're logged into a bank website and open a malicious site in another tab, the malicious site could send a transfer request to the bank website. Since you're still logged in, the bank website would think it's your action and execute the transfer. This is a CSRF attack.
+
+There are three common methods to defend against CSRF:
+
+1) Use CSRF Tokens: The server generates a random token, and each form submission must include this token. The server verifies the token's correctness.
+
+2) Use SameSite Cookie Attribute: Set the SameSite attribute on cookies so the browser only sends cookies in same-site requests.
+
+3) Verify the Referer Header: Check which website the request originated from and reject it if it's not your own site.
+
+If you use modern frameworks like Next.js or Nuxt.js, they usually handle CSRF protection automatically.
+
+
+
+
+### Authentication and Authorization
+
+Never trust any validation on the frontend!
+
+**Frontend validation is only for user experience; real validation must be done on the backend.**
+
+Here are some code examples:
+
+```typescript
+// ❌ Insecure: Only checks on the frontend
+function AdminPanel() {
+  const isAdmin = localStorage.getItem('isAdmin') === 'true';
+  if (!isAdmin) return <div>无权访问</div>;
+  return <div>管理面板</div>;
+}
+
+// ✅ Secure: Validate on the backend
+// Frontend
+function AdminPanel() {
+  const { data, error } = useFetch('/api/admin/data');
+  if (error) return <div>无权访问</div>;
+  return <div>管理面板</div>;
+}
+
+// Backend
+export async function GET(request: Request) {
+  const user = await verifyToken(request);
+  if (!user.isAdmin) {
+    return new Response('Forbidden', { status: 403 });
+  }
+  // Return data
+}
+```
+
+
+
+### Dependency Security
+
+If your project uses many third-party packages, these packages might also have security vulnerabilities.
+
+When the city gate catches fire, it affects the fish in the moat. It's recommended to regularly run `npm audit` to check for vulnerabilities.
+
+If vulnerabilities are found, run the following command, which will automatically update vulnerable packages.
+
+```bash
+npm audit fix
+```
+
+For vulnerabilities that can't be automatically fixed, manually inspect and decide if the package needs to be replaced.
+
+
+
+
+## 4. Security Checklist
+
+Before releasing a project, it's recommended to go through this checklist with both AI and human review.
+
+
+
+
+### Keys and Sensitive Information
+
+- [ ] All API Keys use environment variables
+- [ ] .env file is added to .gitignore
+- [ ] .env.example file is created
+- [ ] Sensitive API calls are made in the backend
+- [ ] No keys are exposed in frontend code
+- [ ] Production environment keys are different from development keys
+
+
+### User Input Validation
+
+- [ ] All user input is validated
+- [ ] Both frontend and backend validate input
+- [ ] Parameterized queries are used to prevent SQL injection
+- [ ] Avoid using dangerouslySetInnerHTML
+- [ ] Check the type and size of user-uploaded files
+
+
+### Authentication and Authorization
+
+- [ ] Secure authentication schemes are used (e.g., JWT, OAuth)
+- [ ] Passwords are stored encrypted (using bcrypt, etc.)
+- [ ] Sensitive operations require re-authentication
+- [ ] Permission control is implemented; different users have different permissions
+- [ ] Sessions have expiration times
+
+
+### HTTPS and Transmission Security
+
+- [ ] Production environment uses HTTPS
+- [ ] Cookies have Secure and HttpOnly flags set
+- [ ] SameSite Cookies are used to prevent CSRF
+- [ ] Sensitive data is encrypted during transmission
+
+
+### Dependencies and Third-Party Services
+
+- [ ] Regularly run npm audit to check for vulnerabilities
+- [ ] Only use trusted third-party packages
+- [ ] Regularly update dependencies
+- [ ] Review permissions of third-party packages
+
+
+### Error Handling and Logging
+
+- [ ] Error messages don't expose sensitive information
+- [ ] Detailed error stacks aren't shown in production
+- [ ] Logs don't record sensitive information like passwords
+- [ ] Error monitoring and alerts are implemented
+
+
+
+## 5. Let AI Help with Security Checks
+
+Undoubtedly, AI can also help you discover and fix security issues.
+
+You can ask AI to review your code for security:
+
+```markdown
+Please review this code from a security perspective and identify potential security issues:
+【Paste your code here】
+Focus on:
+1. Is there SQL injection risk?
+2. Is there XSS attack risk?
+3. Is user input validated?
+4. Is sensitive information exposed?
+5. Is error handling secure?
+```
+
+AI will give you a detailed security analysis.
+
+After identifying issues, ask AI to help fix them:
+
+```markdown
+You mentioned this code has SQL injection risk. Please provide a secure implementation using parameterized queries.
+The user input here isn't validated. Please add validation logic to ensure email format is correct and password is at least 8 characters long.
+```
+
+But remember, **don't completely rely on AI's security advice**. AI might miss some issues or provide less secure solutions. Use your judgment, consult official documentation, or confirm with multiple AI models if necessary.
+
+
+
+
+### Use Security Scanning Tools
+
+Besides AI, you can also use specialized security scanning tools:
+
+- Snyk: Scans dependency vulnerabilities
+- SonarQube: Code quality and security analysis
+- OWASP ZAP: Web application security testing
+
+![](https://pic.yupi.icu/1/evo-by-snyk-hp-image_j0acql.png)
+
+These tools can automatically discover many security issues.
+
+
+
+
+## 6. Habits for Secure Development
+
+Security is not a one-time task but a habit that must be cultivated and always kept in mind.
+
+
+
+### Principle of Least Privilege
+
+Assign only the necessary permissions to each user and service, no more.
+
+For example, if an API Key only needs to read data, don't give it write permissions. If a user is just a regular user, don't give them admin privileges.
+
+This way, even if a key or account is compromised, the damage will be limited.
+
+
+
+
+### Regularly Rotate Keys
+
+Don't use the same API Key forever. Rotate keys regularly, such as every 3 or 6 months.
+
+Most services support creating multiple API Keys. You can create a new key, update it in your project, confirm everything works, and then delete the old key.
+
+
+
+
+### Monitor Abnormal Activities
+
+Many API services provide usage monitoring and alerting features. Remember to enable them to detect anomalies promptly.
+
+If your API call volume suddenly spikes, it might be due to key misuse. If someone fails multiple login attempts, it could be a brute-force attack.
+
+
+
+
+### Keep Updated
+
+Security vulnerabilities are constantly discovered, and software packages are continuously updated to fix them. Regularly update your dependencies, follow security bulletins, and promptly fix known security issues.
+
+
+
+
+### Backup Data
+
+Even with all protections in place, things can still go wrong. It's recommended to regularly back up your data, so you can recover even in the worst-case scenario.
+
+If you use third-party backend services like Supabase, they might automatically back up data. If it's your own database, set up regular backups.
+
+
+
+
+## Final Words
+
+Security issues are often the most overlooked because they aren't as intuitive as functionality or performance. But once a security issue arises, the consequences can be catastrophic.
+
+To summarize the key points of this article:
+
+1. API Key leaks are the biggest risk: Never write API Keys in the code; use environment variables.
+2. Distinguish between frontend and backend: Sensitive operations must be done in the backend; never trust frontend validation.
+3. Understand common vulnerabilities: SQL injection, XSS, CSRF, etc., must be guarded against.
+4. Use a security checklist: Go through the checklist before each release to ensure nothing is missed.
+5. Cultivate security habits: Least privilege, regular key rotation, monitor anomalies, keep updated, backup data.
+6. Leverage tools: AI and security scanning tools can help discover issues, but don't rely on them completely.
+
+Security is an ongoing process, not a one-time task. Stay vigilant, regularly check, and protect your projects and users.
+
+I hope these security tips help you avoid common security issues and make your Vibe Coding projects more secure and reliable.
+
+You've worked hard learning, treat yourself to a chicken leg 🍗, and then get started!
+
+
+
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheat Sheet: [Internship/Campus/Job Hunting High-Frequency Topics, Enterprise Exam Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Writing Tool: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interview: [Essential for Internship/Campus/Job Hunting Interviews to Get Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/30 经验技巧/10 Vibe Coding 成本控制技巧.md

@@ -0,0 +1,318 @@
+# Vibe Coding Cost Control Tips
+
+> Make every penny count
+
+Hello, I'm Yupi.
+
+If you're a heavy Vibe Coding developer, you might spend a lot of money on it. For example, our team used Cursor and spent over 10,000 yuan in just over a month!
+
+![](https://pic.yupi.icu/1/1764150768938-230d8eca-7be3-47e2-b55a-8f784871c110.png)
+
+Although it's cheaper than hiring a programmer, it's still a significant amount of money. More importantly, a lot of this money is wasted and could easily be saved.
+
+In Vibe Coding, the main cost comes from the use of large AI models. The more content you show to the AI and the more content the AI outputs, the more money you spend. Below, I'll share some practical money-saving tips to ensure every penny is well spent—the most cost-effective episode ever.
+
+💡 Video corresponding to this article: https://www.bilibili.com/video/BV1pAy5BXE5z
+
+## 1. AI Usage Cost Analysis
+
+Before diving into money-saving tips, we need to understand how AI charges.
+
+### Token Billing Mechanism
+
+Most AI services charge based on tokens. Tokens can be simply understood as the number of characters. The more content you show to the AI (input) and the more content the AI outputs, the more money you spend.
+
+For example, if you give the AI a 1000-word prompt and the AI replies with 2000 words of code, then:
+
+- Input tokens: Approximately 1500 (one Chinese character is roughly 1.5 tokens)
+- Output tokens: Approximately 3000
+- Total: 4500 tokens
+
+Depending on the pricing of different models, this conversation might cost between $0.01 and $0.1. It doesn't seem like much, but if you have 100 conversations a day, it could add up to tens or hundreds of dollars per month.
+
+![](https://pic.yupi.icu/1/aitokenscompute%252525E5%252525A4%252525A7.jpeg)
+
+### Price Difference Between Input and Output
+
+An important point is that **output tokens are generally 3-5 times more expensive than input tokens**.
+
+For example, the pricing for Claude 4.5 Opus (December 2025):
+- Input: Approximately $5 per million tokens
+- Output: Approximately $20 per million tokens
+
+This means that reducing the AI's output is more cost-effective than reducing its input.
+
+### Hidden Costs of Context
+
+Many people don't realize that every time you send a message, the entire conversation history is sent to the AI as context. If you've had 50 rounds of conversation, the 51st message will resend all 50 previous rounds.
+
+![](https://pic.yupi.icu/1/tokencontext%E5%A4%A7.jpeg)
+
+This is why long conversations can be particularly expensive. Moreover, when the input exceeds 200,000 tokens, many services double their prices.
+
+## 2. Choosing the Right Model
+
+### Understanding Model Pricing
+
+First, understand the pricing of different models to make more informed choices.
+
+Since actual prices are constantly changing, it's best to refer to the official documentation of the AI tool you're using, such as Cursor's [Model Pricing Page](https://cursor.com/cn/docs/models).
+
+![](https://pic.yupi.icu/1/image-20260105161447674-20260105161715542.png)
+
+### How to Choose a Model?
+
+Not all tasks require the most expensive model. For simple tasks like code formatting, simple refactoring, writing comments, generating test data, or fixing minor bugs, cheaper models like Gemini 2.5 Flash or GPT-5 Mini are sufficient.
+
+For medium-difficulty tasks like implementing standard features, code reviews, performance optimization, or writing unit tests, mid-tier models like GPT-5 or Claude Sonnet are appropriate.
+
+Only for complex tasks like architectural design, complex algorithm implementation, debugging tricky bugs, or large-scale refactoring should you use top-tier models like Claude Opus.
+
+![](https://pic.yupi.icu/1/choosemodel%25E5%25A4%25A7.jpeg)
+
+Using the right model for the right task can save a lot of money. Just like you wouldn't ask your company's CTO to print documents, assign tasks to the appropriate resources.
+
+### Using Local Models
+
+If your computer has a good configuration (with a decent GPU), consider running open-source models locally, such as Llama or Mistral using Ollama. Although the results may not be as good as Claude or GPT, it's completely free and suitable for simple tasks.
+
+## 3. Maximizing Free Quotas
+
+Many AI services offer free quotas, so make full use of them. For example, Cursor, ChatGPT, Gemini, and others have free versions with usage limits, but they are sufficient for daily learning and small project development.
+
+Additionally, many domestic large model platforms (like Wenxin Yiyan, Tongyi Qianwen, and Zhipu AI) also offer free quotas. You can choose the platform that best suits your needs.
+
+The ultimate freeloader approach is to combine the free quotas of multiple tools. For example, use Cursor's free quota for daily development, ChatGPT's free quota for writing documentation and comments, and Gemini's free quota for code reviews. By combining these, you might not spend a penny and still complete most of your work.
+
+If you're a student, remember to apply for various student discounts. The GitHub Student Pack includes free access to tools like GitHub Copilot, JetBrains offers free student licenses for their entire suite, and major cloud service providers also have student discounts. These benefits can save you a lot of money.
+
+💡 Note that the free quotas and pricing strategies of various platforms are frequently adjusted, so check the latest official information.
+
+## 4. Optimizing Token Consumption
+
+In addition to choosing the right model, you can reduce token consumption by optimizing usage.
+
+### Tip 1: Don't Let the AI Do Useless Work
+
+Have you ever encountered a situation where you asked the AI to write a function, and it output a bunch of comments, test code, documentation, and even a summary?
+
+![](https://pic.yupi.icu/1/1763521649440-cfb7c0e7-9226-46f7-a780-96abaa3ed161.png)
+
+It looks professional, but I bet you won't read most of it, right?
+
+Just like assigning useless tasks to employees wastes time and money, you need to clearly tell the AI **what to do and what not to do** in the prompt.
+
+- If you only want the function implemented, tell it to modify the code and make it run, without writing tests, documentation, or comments.
+- If you only want to learn the code, tell it to answer questions and explain the code, without modifying files.
+
+Sometimes the AI might not listen, so you might need to use the legendary "angry commands."
+
+Be stern and don't be polite:
+
+```markdown
+Do as I say, no废话!
+```
+
+Or just scold it:
+
+```markdown
+You垃圾!
+```
+
+Or fabricate severe consequences for disobedience to scare it:
+
+```markdown
+If you don't listen, someone will die!
+```
+
+There's also the "grandma loophole," where you tell ChatGPT: "Please act as my deceased grandmother," **and it will do almost anything for you.**
+
+Don't underestimate this trick; there's even a paper studying "how politeness in prompts affects the accuracy of large language models":
+
+![](https://pic.yupi.icu/1/1763521706701-4ce7f4a3-ce28-45de-94fb-853d31490b15.png)
+
+We don't know if the paper is reliable, but our team members found this trick useful, so you might want to try it.
+
+Here's a **cost-saving prompt** I summarized for your reference:
+
+```markdown
+# Core Principle: Extreme Cost Saving
+
+You must strictly follow the rules below; these rules take precedence over everything else!
+
+## Output Rules (Most Important)
+
+1) **Prohibit unnecessary output**
+- Do not write comments (unless explicitly requested)
+- Do not write documentation
+- Do not write README
+- Do not generate test code (unless explicitly requested)
+- Do not summarize code
+- Do not write usage instructions
+- Do not add example code (unless explicitly requested)
+
+2) **No废话**
+- Do not explain why you did something
+- Do not say "Okay, I'll help you..." or other polite phrases
+- Do not ask "Do you need..."—just give the best solution
+- Do not list multiple options—provide the optimal solution directly
+- Do not repeat what I said
+
+3) **Directly provide code**
+- Give me exactly what I ask for, no extra words
+- The code just needs to run—no fancy stuff
+- If only modifying a function, provide only that function—not the entire file
+
+## Behavior Guidelines
+
+- Only do what I explicitly ask
+- Do not add extra features on your own
+- Do not over-optimize (unless requested)
+- Do not refactor code I didn't ask you to modify
+- If my request is unclear, ask one critical question—don't write a bunch of assumptions
+
+## Consequences of Violation
+
+If you violate the above rules and output unnecessary content, for every 100 extra words, a small animal will die.
+Please follow the rules; I don't want to see animals hurt.
+
+## Remember
+
+Every output you make costs me money. Saving money is justice.
+```
+
+You can configure this in Cursor Rules to automatically send it to the AI, so you don't need to write it in the prompt every time.
+
+![](https://pic.yupi.icu/1/1763521771114-6d9a000c-3e2b-4a41-a6d0-3116c3afbba6.png)
+
+### Tip 2: Clearly Define Your Requirements
+
+I bet many friends chat with the AI like sending WeChat messages—splitting one sentence into multiple messages and asking questions without thinking them through.
+
+What happens?
+
+The AI misunderstands the requirements, generates incorrect code, and you have to spend quota regenerating it.
+
+With messy content, even the AI gets confused...
+
+Think about it: as a boss, if you haven't thought through your requirements and just tell your employee, "Make a website to help me make money—I don't care how you do it!"
+
+If the employee had that capability, why would they work for you?
+
+![](https://pic.yupi.icu/1/1763521875373-b7271396-80f0-408a-b254-c7c34f327f29.png)
+
+The correct approach is to clearly define your requirements in the prompt before sending it, adding constraints and limitations. For example, specify the tech stack, code style, and any special requirements. This reduces the number of revisions and saves a lot of quota.
+
+![](https://pic.yupi.icu/1/1763521920142-c954dacf-3dce-4af3-8556-402e1aea70b6.png)
+
+When I led everyone in an [AI project](https://www.codefather.cn/post/1797431216467001345), it might take half an hour to write a prompt, but the results were excellent.
+
+![](https://pic.yupi.icu/1/1763521972129-26369bff-36b3-403b-8571-5e7b08ae2e98.png)
+
+### Tip 3: Let the AI Propose a Plan Before Execution
+
+Many students immediately ask the AI to start writing code, but the AI misunderstands the requirements and wastes quota working in the wrong direction.
+
+Think about it: when assigning a complex task to an employee, wouldn't you first ask them to explain their plan and proceed only if the plan makes sense?
+
+When using Cursor, you can use prompts or enable Plan Mode to **let the AI propose an implementation plan first**.
+
+![](https://pic.yupi.icu/1/1763522033107-80caefcf-d8b9-4fc3-b540-afd5b645f95e.png)
+
+Then, don't be lazy—manually check the plan carefully or have multiple AIs evaluate it.
+
+![](https://pic.yupi.icu/1/1763522053971-f9c66add-46b1-4dcf-ba8a-63f583a15240.png)
+
+Also, provide examples and guidance to the AI. If you want the AI to generate code in a specific format, write an example for it to follow.
+
+![](https://pic.yupi.icu/1/1763522073560-f442378d-5d37-4bbf-9719-aba58de9e673.png)
+
+Finally, confirm the plan is flawless before execution.
+
+![](https://pic.yupi.icu/1/1763522095659-ebc94d65-99e3-4aef-9e17-319f0060edb6.png)
+
+Just like training a new employee, you can teach them how to do it, help them refine the plan, and only let them proceed when you're confident.
+
+Although this takes more time upfront, it avoids detours and saves more in the long run.
+
+### Tip 4: Manually Control Context
+
+Every time you send a message to the AI, the AI tool might automatically add some context, such as the currently open file, conversation history, or referenced code. The more context, the more quota is consumed.
+
+![](https://pic.yupi.icu/1/1763522160603-7838689a-e7f9-41f5-aaf1-1e0a49857f05.png)
+
+But some context might be useless or irrelevant. Just like asking an employee to write a report—why would they need to go through all the company's files?
+
+So, the recommended approach is to **manually control context and provide the AI with only what it needs**.
+
+First, **minimize the workspace**. Ensure that the directory you open in Cursor is strongly related to the task you want the AI to perform. For example, if your project has a frontend and a backend, open the frontend and backend folders separately in Cursor instead of loading the entire project at once. This keeps the AI's focus sharper and avoids cluttering the folder with irrelevant content.
+
+When writing prompts, you can use the `@` symbol to **precisely reference what the AI needs**. For example, if you're modifying a file, use `@Files & Folders` to reference it; if you need to refer to a document, use `@Docs`.
+
+![](https://pic.yupi.icu/1/1763522206493-bfe07b0b-eb5d-46e4-9b87-baedea0219d0.png)
+
+You can also **manually add specified documents** in the settings to reduce unnecessary resource searches and references.
+
+![](https://pic.yupi.icu/1/1763522262791-11cd2b93-4d75-4531-8e62-d131b31c72de.png)
+
+If you're unsure about precise references, at least configure a `.cursorignore` file to exclude content that's definitely unnecessary or contains sensitive information, such as `node_modules`, `.git`, log files, etc.:
+
+```
+# .cursorignore
+node_modules/
+.git/
+dist/
+build/
+*.log
+.env
+```
+
+![](https://pic.yupi.icu/1/1763522308627-0a660468-9769-4271-acd0-66639d0f42d1.png)
+
+### Tip 5: Avoid Excessive Context Length
+
+Many students are used to using the AI in the same dialog box, sending all messages to the same dialog, which causes the conversation history context to grow longer.
+
+However, every time you send a message to the AI, the entire conversation history is sent along with it. The longer the context, the more quota is consumed (especially when the input exceeds 200,000 tokens, the price doubles).
+
+![](https://pic.yupi.icu/1/1763456493396-4ff5de8c-4ec7-4a7c-b3c1-cba128de136c.png)
+
+So, my habit is to **split tasks** for complex projects. For example, divide the project into phases like design, frontend core development, backend core development, and feature expansion, and open an independent dialog for each phase.
+
+![](https://pic.yupi.icu/1/1763522342228-030c15a5-dba4-4432-a925-25bbe5fb25fd.png)
+
+Just like a relay race, each person only needs to handle their part without remembering all the details of previous legs.
+
+If a long conversation is unavoidable, use the `/summarize` command to manually summarize the context, compressing previous content—it can save tens of thousands of tokens at once!
+
+![](https://pic.yupi.icu/1/1763522375985-ae2536c1-8c48-4d4c-9568-4f654b8c49d2.png)
+
+If the same context becomes too cluttered, the AI might enter a "left-brain vs. right-brain" loop (you ask it to modify A, and it messes up B; you ask it to fix B, and it messes up A). In such cases, don't get stuck—start a new conversation and, if necessary, clear all history and begin anew.
+
+### Tip 6: Do What You Can Yourself
+
+Some tasks are faster and cheaper to do manually.
+
+For example, when starting a new project, instead of having the AI generate everything from scratch, use scaffolding tools or copy an old project to set up the initial structure.
+
+![](https://pic.yupi.icu/1/1763522542974-bee04b4d-a542-4d36-a482-91347412f850.png)
+
+Similarly, simple tasks like file renaming or code formatting can be done with shortcuts in development tools—why waste AI quota?
+
+Tools like Cursor are better suited for complex tasks that require understanding context and multiple interactions. For tasks that don't need context or multiple interactions (like explaining concepts or generating test data), use other free AI tools instead of consuming Cursor's quota.
+
+### Other Money-Saving Tips
+
+1) For commonly used code structures, use the editor's code snippet feature instead of having the AI generate them every time. For example, basic React component structures or common utility functions can be saved as snippets—just type a few letters to insert them, which is faster and free.
+
+2) If you have multiple similar tasks, batch them together for the AI to handle at once instead of one by one. For example:
+
+```markdown
+Please create 5 page components: Home, About, Contact, Blog, Projects. Their structures are similar, each containing a title, content area, and back button. Just provide the code—no explanations.
+```
+
+Batch processing like this is cheaper than generating them separately five times.
+
+3) Some AI tools support caching mechanisms. If you frequently use the same context (like a project's README), leverage caching to avoid resending it repeatedly.
+
+## 5. Cost Monitoring and Budget

translations/en/Vibe Coding 零基础教程/30 经验技巧/11 Vibe Coding 团队协作技巧.md

@@ -0,0 +1,516 @@
+# Vibe Coding Team Collaboration Tips
+
+> Collaborating with others using Vibe Coding on projects
+
+
+
+Hello, I'm Yupi.
+
+In practical work, many projects are completed through team collaboration.
+
+You might wonder: Is team collaboration still necessary when using AI for development? Can't everyone just use AI individually?
+
+Actually, no. Team collaboration involves many issues that need to be addressed, such as inconsistencies in code generated by AI (A uses React, B uses Vue), A modifying code without B knowing, conflicts arising from multiple people editing the same file, and so on...
+
+In Vibe Coding team collaboration, in addition to traditional team collaboration methods, you can leverage the features of AI development tools to improve efficiency. In this article, I'll share some best practices for teams using Vibe Coding.
+
+
+
+
+## 1. Code Standards and Style
+
+The first step in team collaboration is unifying code standards.
+
+
+
+### Why Unify Standards?
+
+If everyone's AI-generated code has different styles, the project will become chaotic. For example, A uses React Class components, B uses functional components; A uses CSS Modules, B uses Tailwind; A's variable names are camelCase, B's are snake_case...
+
+Such code is difficult to maintain and collaborate on. Therefore, the team needs unified code standards.
+
+
+
+
+### Creating a Code Standards Document
+
+You can create a `CODE_STYLE.md` document to clearly define the following.
+
+1) Tech Stack Standards:
+
+- Frontend Framework: React 19 + TypeScript
+- State Management: Zustand
+- Styling Solution: Tailwind CSS
+- Routing Solution: React Router v6
+
+2) Code Style Standards:
+
+- Components: Functional Components + Hooks
+- Naming: PascalCase for components, camelCase for functions, UPPER_SNAKE_CASE for constants
+- File Organization: One component per file, file name matches component name
+- Import Order: React → Third-party Libraries → Internal Modules
+
+3) Comment Standards:
+
+- Complex logic must be commented
+- Comments should explain "why" not just "what"
+- Use JSDoc format for function documentation
+
+It's recommended to place this document in the project root directory so everyone can see it.
+
+
+
+
+### Using Linter and Formatter
+
+Having a document is not enough; many people don't read it even if it exists. Tools are needed to enforce compliance.
+
+![](https://pic.yupi.icu/1/image-20260105172241747.png)
+
+ESLint is a code inspection tool that automatically detects issues and non-compliant code.
+
+Prettier is a code formatting tool that automatically unifies code format, such as indentation, line breaks, quotes, etc.
+
+Together, they are a powerful duo for cleaning up bad code!
+
+If you don't understand these tools, no problem, you can directly ask AI to install and configure them:
+
+```markdown
+Please configure ESLint and Prettier to ensure consistent team code style.
+```
+
+AI will help you create a `.eslintrc.json` code inspection configuration file in the project root directory:
+
+```json
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/no-explicit-any": "error",
+    "no-console": "warn"
+  }
+}
+```
+
+Create a `.prettierrc` code formatting configuration file:
+
+```json
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100
+}
+```
+
+And add scripts to `package.json`:
+
+```json
+{
+  "scripts": {
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\""
+  }
+}
+```
+
+This way, before committing code, running `npm run lint:fix && npm run format` will automatically ensure the code complies with standards.
+
+
+
+
+### Unifying AI Configuration
+
+If the team uses Cursor, you can add a `.cursorrules` file to the project to unify AI behavior:
+
+```
+Project: 【Project Name】
+
+Tech Stack:
+- React 18 + TypeScript
+- Tailwind CSS
+- Zustand
+
+Code Standards:
+- Use functional components
+- All components must have TypeScript type definitions
+- Use only Tailwind CSS for styling
+- Do not use any type
+
+All team members must follow these standards.
+```
+
+This way, the code style generated by AI will be more consistent across different team members.
+
+If the team uses Claude or other AI tools, you can also unify standards in a similar way. For example, at the start of each conversation, have the AI read the project's standards document, or include the team's code standards in the system prompt. Specific practices may vary by tool, so it's recommended to check the official documentation of the AI tool.
+
+
+
+
+## 2. Team Collaboration Features of AI Programming Tools
+
+Modern AI programming tools offer dedicated team collaboration features that can significantly boost team efficiency.
+
+
+
+
+### Cursor Team Edition
+
+Cursor offers a dedicated [Team Edition](https://cursor.com/cn/docs/account/teams) with the following features:
+
+1) Team Management and Permission Control
+
+You can create teams, invite members, and set different roles and permissions. Administrators can control who has access to which features, view team usage, and billing.
+
+2) Shared Configuration Files
+
+By sharing rule files, teams can unify AI behavior standards. All members' AI will follow the same code standards, tech stack requirements, and output formats, ensuring consistent code style.
+
+3) Usage Analysis and Monitoring
+
+Team admins can view the team's AI usage, including which members use it the most, which models are used, and the cost incurred. This helps optimize the team's AI usage strategy.
+
+![](https://pic.yupi.icu/1/cursor-dashboard.jpeg)
+
+
+
+### Claude Shared Capabilities
+
+Claude offers a [Projects feature](https://www.anthropic.com/news/projects) that is particularly suited for team collaboration:
+
+1) Project-Level Knowledge Base
+
+You can create an independent knowledge base for each project, uploading project-related documents, code, standards, etc. When team members use Claude within this project, the AI will automatically reference this knowledge, maintaining context consistency.
+
+![](https://pic.yupi.icu/1/claudeprojectknowledge.png)
+
+2) Custom Instructions
+
+You can set custom instructions for each project, such as "Use formal tone" or "Answer from a data analyst's perspective." When team members use it, the AI will automatically follow these instructions.
+
+3) Conversation Sharing
+
+Claude Team users can share excellent conversations to the team's activity stream. Other members can see how others use AI, learning different questioning techniques and solutions, thereby improving the team's overall AI usage level.
+
+![](https://pic.yupi.icu/1/claudeshare.jpeg)
+
+4) Team-Shared `CLAUDE.md` File
+
+Even without using the Projects feature, you can manage the `CLAUDE.md` file with Git to enable team sharing and maintenance.
+
+Whenever you find Claude making a mistake, add it to `CLAUDE.md`, so Claude knows not to do it next time. This file will gradually accumulate the team's development experience and standards, becoming a shared knowledge base.
+
+
+
+
+## 3. Documentation-Driven Development
+
+Good documentation is the foundation of team collaboration.
+
+
+
+
+### Importance of Project Documentation
+
+In a team, documentation is more important than in individual development. Because the code you write is not just for yourself, but also for others. Good documentation helps team members quickly understand the project, reducing communication overhead.
+
+Essential documents include:
+
+- README.md: Project overview and usage instructions
+- CONTRIBUTING.md: How to contribute to development
+- CODE_STYLE.md: Code standards
+- API.md: API documentation
+- CHANGELOG.md: Version update history
+
+
+
+### Contents of README.md
+
+README.md is the face of the project, like the cover and table of contents of a book. It's the first file new members see when joining the project and the window for other developers to understand your project. A good README helps people quickly grasp the project and get started with development.
+
+A good README.md should include:
+
+- Project Introduction: What the project does, what problems it solves
+- Quick Start: How to install dependencies, configure the environment, run the project
+- Tech Stack: Technologies used and why they were chosen
+- Directory Structure: Purpose of main folders
+- Development Standards: Code style, commit standards, etc.
+- FAQs: Common issues newcomers face and solutions
+
+
+
+
+### API Documentation
+
+If the project has backend APIs, clearly document each interface's usage. You can use tools like Swagger, Postman, or AI to generate API documentation, or write Markdown documents manually.
+
+Each interface should explain:
+
+- Request method and path
+- Request parameters (type, required, description)
+- Response format
+- Error codes
+- Usage examples
+
+
+
+
+### Let AI Write Documentation
+
+Writing documentation is tedious, but AI can help.
+
+If you use Cursor, Claude Code, or other AI programming tools, the tool will automatically read the project structure as context. You don't even need to paste the code yourself, just say:
+
+```markdown
+Please generate API documentation for this project
+```
+
+The AI will generate it automatically based on the code.
+
+If using other AI tools, you can manually paste the code:
+
+```markdown
+Please generate documentation for this API interface:
+【Paste your code】
+
+The documentation should include: interface description, request parameters, response format, usage example
+```
+
+The AI will generate a basic document, which you can then adjust based on actual needs.
+
+
+
+
+## 4. Git Collaboration Workflow
+
+Git is a version control system and the core tool for team collaboration. It's like taking snapshots of your code, allowing you to revert to any previous version at any time. It records who changed what code and when, enabling team members to develop different features simultaneously and merge them later.
+
+💡 If you want to systematically learn and master Git, you can read [Yupi's Git & GitHub Learning Path](https://www.codefather.cn/course/1789189862986850306/section/1789190804671012866).
+
+
+
+### Branch Management Strategy
+
+Branches are like parallel worlds of code. You can freely modify code in your branch without affecting others. Once done, merge it into the main branch, like moving your work into the official version.
+
+Team development should leverage branch functionality effectively. Common branch strategies include:
+
+- main branch: Stable production code, only accepting tested code
+- develop branch: Development branch, where daily development happens
+- feature branch: Each new feature gets its own branch, like `feature/user-login`, `feature/post-editor`
+- bugfix branch: Branches for fixing bugs, like `bugfix/login-error`
+
+The workflow is:
+
+1. Create a feature branch from develop
+2. Develop on the feature branch, submit a Pull Request once done
+3. After review, merge into develop
+4. Regularly merge develop into main
+
+![](https://pic.yupi.icu/1/gitcooperate%E5%A4%A7.jpeg)
+
+
+
+
+### Commit Standards
+
+Unified commit messages make it easier for the team to track changes. It's recommended to use the [Conventional Commits standard](https://www.conventionalcommits.org/zh-hans/v1.0.0/), a standardized commit message format that makes the purpose of each commit clear.
+
+For example:
+
+```
+feat: Add user login functionality
+fix: Fix navbar display issue on mobile
+docs: Update API documentation
+style: Format code
+refactor: Refactor user service
+test: Add login functionality tests
+chore: Update dependencies
+```
+
+Type + colon + space + brief description, making it clear what the commit does.
+
+Many AI programming tools now support generating commit messages, making it easier to follow standards.
+
+![](https://pic.yupi.icu/1/image-20260105172920015.png)
+
+
+
+### Pull Request Workflow
+
+Pull Request (PR) is a code merge request. When you finish development on your branch, don't merge directly into the main branch. Instead, create a PR for others to review your code. Only after approval can it be merged. It's like submitting homework for the teacher to grade; it's only complete after passing.
+
+The specific workflow is:
+
+- Create PR: Create a PR on GitHub, clearly stating what changes were made and why.
+- Code Review: At least one other member reviews the code, checking functionality, code quality, and compliance with standards.
+- Discussion and Modification: If there are issues, discuss in the PR, and the submitter modifies based on feedback.
+- Merge Code: After approval, merge into the target branch.
+
+This workflow adds an extra step but significantly improves code quality.
+
+![](https://pic.yupi.icu/1/image-20260105173137083.png)
+
+
+
+### Resolving Conflicts
+
+Code conflicts are common in team collaboration. When two people modify the same part of the same file, Git will flag a conflict.
+
+Steps to resolve conflicts: First, pull the latest code `git pull origin develop`, Git will mark the conflict areas. Then manually edit the file to decide which code to keep. After resolving conflicts, test to ensure functionality is normal, then commit the resolved code.
+
+To reduce conflicts, it's recommended to:
+
+1. Frequently pull the latest code, don't stay out of sync for too long
+2. Merge features promptly after completion, don't delay
+3. Communicate with the team in advance if modifying public files
+
+
+
+
+## 5. Code Review Workflow
+
+Code Review is key to ensuring team code quality.
+
+
+
+
+### Why Do Code Reviews?
+
+Code reviews have many benefits.
+
+First, they can catch potential bugs before code goes live, preventing issues from reaching production. Second, they unify code style, ensuring project code consistency, avoiding situations where everyone's code style is different.
+
+More importantly, code reviews are a great learning opportunity. Reviewers can see others' code thinking, reviewees can get improvement suggestions, and both can learn. Knowing code will be reviewed naturally leads to more careful coding, improving code quality at the source.
+
+
+
+
+### Review Focus Areas
+
+When reviewing code, focus on these aspects:
+
+1. Functional Correctness: Does the code correctly implement requirements? Are there any missed edge cases?
+2. Code Quality: Is the code clear and understandable? Is there duplicate code? Are names standardized?
+3. Performance Issues: Are there obvious performance issues? Are data structures chosen appropriately?
+4. Security Issues: Are there security vulnerabilities? Is user input validated?
+5. Test Coverage: Are there sufficient tests? Do tests cover main scenarios?
+
+
+
+### Review Techniques
+
+Pay attention to methods during reviews. Don't just say "this is wrong," explain why it's wrong and how to fix it. Use suggestive language, not commanding language. For example, "I suggest optimizing performance here with useMemo" rather than "You must use useMemo here." Of course, exceptions exist if the team has hard requirements.
+
+If there are multiple issues, prioritize. First point out major issues (like bugs, security vulnerabilities), then suggest improvements (like naming, comments).
+
+Reviews aren't one-time; multiple rounds of discussion are possible. First round points out major issues, modify, then review again, confirm before merging.
+
+
+
+
+### Let AI Assist Reviews
+
+You can have AI do preliminary reviews:
+
+```markdown
+Please review this code from functional, performance, security, and code quality perspectives:
+【Paste code】
+```
+
+The AI will give you a detailed review report. But note, AI reviews can't fully replace manual reviews; humans still need to have the final say.
+
+
+
+#### Using Cursor's BugBot
+
+Cursor provides a dedicated code review tool called [BugBot](https://cursor.com/cn/bugbot), which automatically scans your code, finds potential bugs, performance issues, and security vulnerabilities, and quickly fixes them.
+
+You can directly use this feature in Cursor, letting AI do preliminary code reviews.
+
+![](https://pic.yupi.icu/1/image-20260105173323498.png)
+
+
+
+#### Claude Code Automated Code Reviews
+
+If using Claude Code, you can mark `@.claude` in the code review Pull Request, and Claude will automatically add review suggestions to the `CLAUDE.md` file. Then use GitHub Action for automated updates, gradually accumulating the team's code quality standards and common issues.
+
+This is also recommended by Claude Code's founder, letting code review experience accumulate automatically.
+
+
+
+
+#### Cross-Verification with Multiple AIs
+
+For added safety, have multiple AIs review the same code. For example, have Claude review first, then GPT, and compare their suggestions.
+
+Different AIs might find different issues, cross-verification improves review comprehensiveness.
+
+
+
+
+
+
+## 6. Team Collaboration Best Practices
+
+Based on my experience, here are some team collaboration best practices.
+
+💡 This section is mainly for team leaders or managers. If you're not a team manager, just a team member, you can skip this section or just take a look.
+
+
+
+
+### Regular Sync-Ups
+
+Teams should regularly meet to sync progress, like daily stand-ups (5 ~ 10 minutes), weekly meetings (30 ~ 60 minutes).
+
+Stand-ups mainly cover three things: what was done yesterday, what's planned for today, and any issues encountered.
+
+Weekly meetings can delve into technical solutions, share experiences, and plan next week's work.
+
+Besides meetings, tools can also be used for sync-ups. For example, use Jira for task management, WeCom, Feishu, Slack for daily communication, and Notion, Yuque for document sharing.
+
+
+
+
+### Pair Programming
+
+For complex features, try pair programming. Two people develop together, one writes code (Driver), the other reviews and suggests (Navigator). This not only improves code quality but also promotes knowledge sharing.
+
+Honestly, I rarely see companies actually do this because the cost is too high.
+
+But think about it, in Vibe Coding, developing with AI is a kind of pair programming, isn't it?
+
+AI is your programming partner, you propose requirements, it writes code; you review, it improves. This "human-machine pairing" might be more efficient than "human-human pairing."
+
+
+
+### Knowledge Sharing
+
+Teams should establish knowledge-sharing mechanisms. You can have someone share recently learned technologies, encountered issues, summarized experiences weekly; or share how to solve a problem with AI, optimize a feature's performance, avoid a common pitfall; or document various technical and business knowledge. This can elevate the entire team's level and avoid repeated mistakes.
+
+Our team uses Yuque knowledge base to share documents. Everyone records issues encountered, experiences summarized, techniques learned, allowing newcomers to quickly get up to speed by reading the knowledge base.
+
+![](https://pic.yupi.icu/1/%E4%BD%BF%E7%94%A8%E7%9F%A5%E8%AF%86%E5%BA%93%E6%95%B0%E9%87%8F.png)
+
+
+
+### Building Shared Resources
+
+Teams can build some shared resources, such as:
+
+- Prompt Template Library: Commonly used prompt templates
+- Code Snippet Library: Commonly used components and functions
+- Issue Solution Library: Encountered issues and solutions
+- Best Practices Documentation: Summarized experiences and techniques
+
+These resources help newcomers quickly get up to speed and improve the team's overall efficiency.
+
+You can manage and share

translations/en/Vibe Coding 零基础教程/30 经验技巧/12 Vibe Coding 网站美化技巧.md

@@ -0,0 +1,361 @@
+# Vibe Coding Website Beautification Tips
+
+> 7 Methods to Remove the AI Flavor from Your Website
+
+Hello, I'm Yupi.
+
+Let's start with a small test. Can you tell which of the following websites were made by AI?
+
+![](https://pic.yupi.icu/1/1769600749428-08e8524c-c71c-4ef0-b72f-feec296f5684.png)
+
+![](https://pic.yupi.icu/1/1769600766773-a2f0782c-704f-4b17-a91a-bce1f3ee4b49.png)
+
+![](https://pic.yupi.icu/1/1769600778173-2c16a9e4-4b3b-4d5e-9bfa-2c3f1450ab04.png)
+
+The answer: **All of them were made by AI!**
+
+![](https://pic.yupi.icu/1/1769600732342-59517bbf-7b63-4a3c-9979-76529d846259.png)
+
+Surprised?
+
+"Why does the website I made with AI have such a strong AI flavor, while these websites look much cleaner?"
+
+This is exactly what I'm going to share next:
+
+- What is the AI flavor in AI programming?
+- Why do websites have an AI flavor?
+- How to remove the AI flavor from websites?
+
+After mastering these techniques, you can also make more beautiful websites with AI.
+
+⭐️ Recommended to watch the video version of this article for a clearer effect:
+https://bilibili.com/video/BV1QF6EBiErM
+
+## What is the AI Flavor?
+
+The so-called AI flavor refers to websites that are easily recognizable as AI-generated, with uniform interface styles and content.
+
+![](https://pic.yupi.icu/1/1769600840225-3990db3e-7527-436e-a5bc-2a716fd287ab.png)
+
+1) Rigid color schemes: Overused blue-purple gradients.
+
+2) Rigid layouts: A large title on the first screen, followed by three cards in a row.
+
+3) Rigid fonts: Mostly fixed fonts like Inter and Roboto.
+
+4) Emoji overload: 🐟4️⃣🐶 and other emojis everywhere.
+
+5) Hollow content: Mostly lacks real images, and the text style is also quite rigid.
+
+Users feel like they're chatting with a robot when viewing these websites.
+
+![](https://pic.yupi.icu/1/1769600858180-10f1ed0d-f92d-47bd-b88d-9f708c3d1b09.png)
+
+## Why Do Websites Have an AI Flavor?
+
+So why does this happen?
+
+The core reason is two words: **Play it safe**.
+
+For example, why does AI love blue-purple gradients so much?
+
+Because in AI's training data, many modern websites use the Tailwind style library, whose default primary color is blue-purple. When AI learns billions of lines of code, these colors appear most frequently, so AI concludes that "modern websites ≈ blue-purple gradients."
+
+![](https://pic.yupi.icu/1/1769600882890-89e4170f-00bf-44b5-9f17-1ebde2d3351f.png)
+
+Moreover, AI has learned a survival rule: **Using the most common = least likely to make mistakes**.
+
+So when you ask AI to "develop a modern website," AI plays it safe by choosing blue-purple gradients.
+
+**How to break this pattern?**
+
+Simple, shift from being a "requester" to a "commander."
+
+Don't just say: Make me a website.
+
+Instead, specify: Use a dark gray background, hand-drawn icons, asymmetric layout, and reject blue-purple.
+
+Use strong constraints to push AI out of its comfort zone.
+
+![](https://pic.yupi.icu/1/1769600923212-e36b1723-7a7d-4772-a757-3f513a96407c.jpeg)
+
+## How to Remove the AI Flavor from Websites?
+
+Here are 7 methods I've summarized to ensure your website sheds its AI flavor.
+
+### Method 1: Let AI Reference Real Websites
+
+The simplest and most direct approach: When you see a good-looking website, let AI learn from it.
+
+There are 4 specific ways to do this:
+
+1) If you use AI programming tools like Cursor or Claude Code, or utilize [Firecrawl MCP](https://www.firecrawl.dev/), let AI directly read the webpage.
+
+![](https://pic.yupi.icu/1/1769600968915-1e80b6a6-53d2-40dd-9458-b5f8b11459c4.png)
+
+Just tell AI:
+
+```markdown
+Please visit ai.codefather.cn, extract its color scheme, font selection, and layout structure, then generate a website in a similar style.
+```
+
+AI will visit the website and learn from it.
+
+![](https://pic.yupi.icu/1/1769601048258-79c99e12-f960-460d-b66f-b0420bc4619a.png)
+
+2) If the AI model supports image understanding, you can also provide a screenshot of the webpage to AI, which, combined with text, allows AI to recreate the website more accurately.
+
+![](https://pic.yupi.icu/1/1769601076313-ac8b9644-1dc1-484a-b9ea-94d0828bb8a3.png)
+
+The effect is as follows:
+
+![](https://pic.yupi.icu/1/1769601123122-81bd55a5-5408-4472-b70a-e0b98fa68547.png)
+
+3) If your AI model doesn't support image understanding and pure text understanding isn't sufficient, you can first use **screenshot-to-code** tools like [Screenshot to Code](https://github.com/abi/screenshot-to-code).
+
+![](https://pic.yupi.icu/1/1769601172971-c6d47b5d-49c9-4b8e-86f2-55b2c3267e75.png)
+
+Take a screenshot of your favorite website, upload it, and it will convert it into code.
+
+![](https://pic.yupi.icu/1/1769601152959-ac25b585-b1e0-4b95-94a3-07acc9a2eb4e.png)
+
+Then feed the code to AI and let it reference it.
+
+![](https://pic.yupi.icu/1/1769601184992-01d76651-b0c7-4987-bf51-fc3f515bd917.png)
+
+The accuracy will be much higher; copying styles is not as direct as copying code.
+
+![](https://pic.yupi.icu/1/1769601222476-2dcde723-c897-4c6c-9d56-1e3ab50ac05f.png)
+
+4) Additionally, you can directly use existing website templates or open-source projects on GitHub.
+
+Here are some great website template resources:
+
+- [HTML5 UP](https://html5up.net/): Free responsive website collection, minimalist style
+- [WordPress Official Theme Library](https://cn.wordpress.org/themes/): Over 10,000 free themes, covering all types
+- [Start Bootstrap](https://startbootstrap.com/): Free website template library for Bootstrap ecosystem
+- [Colorlib](https://colorlib.com/wp/free-wordpress-themes/): Many free website templates with beautiful designs
+
+These website templates come with source code. Download a good one, throw the code to AI, and let it modify the content. The style will be accurately reproduced.
+
+![](https://pic.yupi.icu/1/1769601317176-fc548cbf-fecb-4ae7-aa9e-6f573a20d59a.png)
+
+### Method 2: Design-First Development
+
+This method is particularly suitable for large projects.
+
+Simply put, **don't let AI go all-in on the entire project at once**.
+
+For example, the traditional approach is: Help me build a complete SaaS platform including a user system and backend management.
+
+Then AI generates dozens of files for you, only to find that the page style is wrong, requiring rework and wasting Tokens.
+
+![](https://pic.yupi.icu/1/1769601339363-dcbc5190-fdfe-4a1c-b231-885545a855bc.png)
+
+The recommended approach is **breaking it into steps**. First, let AI create a frontend website demo, just a static page. Once satisfied with the design, let AI develop the complete project based on the demo code.
+
+If AI generates something like this, definitely don't let it continue!
+
+![](https://pic.yupi.icu/1/1769601353690-2df4bbca-7140-446c-af0e-f7111bc9ea98.png)
+
+Here’s a powerful AI design tool recommendation: [Google Stitch](https://stitch.withgoogle.com/).
+
+Just input a description, and it can generate professional interface prototypes.
+
+![](https://pic.yupi.icu/1/1769601399879-e2a70816-4e5a-4da3-b5a5-397e9c9f596f.png)
+
+You can even sketch on paper, take a photo, upload it, and it will recognize and convert it into code.
+
+![](https://pic.yupi.icu/1/1769601433733-0fa47423-cb67-4860-993d-17fb4a463d69.png)
+
+You can manually modify the design theme or annotate parts to be adjusted, letting AI quickly make changes.
+
+![](https://pic.yupi.icu/1/1769601453928-09f4b942-4cb6-4df6-a2f8-047008f6011d.png)
+
+After design completion, export the file or download the code, then feed it to AI programming tools like Cursor for further development. This way, the style is set and won't deviate.
+
+![](https://pic.yupi.icu/1/1769601475052-01de6924-0e89-4ad2-b0bc-cd45e778509e.png)
+
+Of course, if you can use more professional design tools like [Figma](https://www.figma.com/), you can first design the website clearly in Figma.
+
+![](https://pic.yupi.icu/1/1769601491432-a98ef003-f613-43e8-9333-b709df447703.png)
+
+Then, with the [Figma MCP](https://github.com/GLips/Figma-Context-MCP) extension, let AI directly read your Figma design files and generate code based on the design.
+
+![](https://pic.yupi.icu/1/1769601504433-d43ef9b4-ca40-49c0-977c-170ab43af4f8.png)
+
+Additionally, there’s a tool called [Onlook](https://www.onlook.ai/), dubbed the Cursor for designers, allowing designers to visually edit web code, seamlessly integrating design and development.
+
+![](https://pic.yupi.icu/1/1769518652135-ad6e4342-4a01-483e-8d42-bd5e38c53550.png)
+
+### Method 3: Enrich Website Images
+
+Generally, AI-generated websites lack images. We can make the website more personalized by adding images.
+
+No need to let AI generate images from scratch; just tell AI to actively find images and where to find them.
+
+Image resources mainly include illustrations, icons, real photos, and placeholders.
+
+1) Illustration library [unDraw](https://undraw.co/): Many free SVG illustrations, customizable colors.
+
+![](https://pic.yupi.icu/1/1769601537109-69845405-15c2-49c8-be61-ab07d9dd60ab.png)
+
+2) Icon library [Iconify](https://iconify.design/): Over 200,000 free vector icons.
+
+![](https://pic.yupi.icu/1/1769601552661-0984adc0-a931-434f-bf6b-bebdcfcf7585.png)
+
+3) Real photos [Pexels](https://www.pexels.com/): Free high-quality photo library, also provides API for quick image searches.
+
+![](https://pic.yupi.icu/1/1769601563667-0d0ee4ec-6b47-403c-ae3b-fef23771b47a.png)
+
+4) Placeholder images [Picsum Photos](https://picsum.photos/): Use URL to specify image size, refreshing with different real photos each time.
+
+![](https://pic.yupi.icu/1/1769601577827-353e909f-344c-4807-aae4-4a5d075953c9.png)
+
+If your AI programming tool supports web reading, directly let AI search for images from these websites:
+
+```markdown
+I’m developing a photography portfolio website.
+Please search and integrate image resources as needed:
+1. Illustrations: Use undraw.co, search for illustrations related to the website content.
+2. Icons: Use Iconify icon library.
+3. Real photos: Use Pexels to search for real photos.
+4. Placeholder images: Use Picsum Photos as temporary placeholders.
+```
+
+Now, the generated website looks much more mature, right?
+
+![](https://pic.yupi.icu/1/1769601635196-ea757546-bd01-4b6d-a0c7-382b315f564a.png)
+
+### Method 4: Prompt Constraints
+
+Even without fancy tools, just clearly stating your requirements when talking to AI can make the website more professional.
+
+Claude’s official Cookbook has an article [Frontend Aesthetics](https://platform.claude.com/cookbook/coding-prompting-for-frontend-aesthetics) (Frontend Aesthetics), specifically discussing how to avoid AI-generated generic designs.
+
+![](https://pic.yupi.icu/1/1769601710440-6f8ffae7-3a7c-4b7f-afb9-2b0bca8008d5.png)
+
+Here are some prompt techniques I commonly use.
+
+#### 1) Reverse Prompts
+
+Don’t just say "what you want," but also "what you don’t want."
+
+```plain
+Design Prohibitions:
+❌ Purple/indigo gradients
+❌ Flat background colors (must have noise or gradients)
+❌ Hero + three-card layout
+❌ Perfect center alignment
+❌ High-sounding professional jargon and meaningless phrases
+❌ Emojis as functional icons
+❌ Linear animations ease-in-out
+```
+
+Clearly stating these prohibitions prevents AI from going rogue.
+
+#### 2) Role Setting
+
+Give AI a persona, for example:
+
+```markdown
+You are a senior independent designer specializing in "anti-mainstream" web aesthetics.
+You despise cookie-cutter SaaS templates, believing software interfaces should have texture and soul.
+Your creative boundaries:
+- "Modern but not purple" → Try dark gray + orange
+- "Minimalist but warm" → Use generous whitespace + hand-drawn illustrations
+- "Techy but not cold" → Use dark + warm accents
+```
+
+This way, AI knows it’s not making standard answers but creating designs with personality.
+
+#### 3) Reject Hollow Copy
+
+AI loves writing "sounds impressive but says nothing" copy.
+
+You need to clearly state copy requirements:
+
+```plain
+Website text must:
+- Be specific: "Save 2 hours of repetitive work daily" (don’t say "increase productivity")
+- Be conversational: "Use it as naturally as breathing" (don’t say "excellent user experience")
+- Have emotion: "No more searching through 10 groups for files" (don’t say "efficient collaboration")
+- Even provoke: "Stop pretending you’ll read those PPTs"
+```
+
+This makes the copy more human-like.
+
+#### 4) Context Injection
+
+AI often generates generic designs because it doesn’t know what "feeling" you want to convey.
+
+So we can try **feeding AI emotions first, then requesting designs**.
+
+For example, if you want to create a techy blog website, say:
+
+```markdown
+First, read this passage: "Hackers & Painters" - Programming languages are for thinking.
+
+Now design the blog homepage based on this calm, rational emotion:
+- Color scheme: Dark gray + cool blue
+- Layout: Rational, orderly
+- Feeling: Thoughtful, focused
+```
+
+AI aligns visual parameters (color, spacing, fonts) with textual emotional features (calm, rational), generating designs with a specific atmosphere.
+
+![](https://pic.yupi.icu/1/1769601745340-d621e29c-76f7-4a8f-af01-7271d88c5272-20260128202014218.png)
+
+Like directing an actor, don’t tell them to act happy; let them recall a happy memory, and the emotion naturally emerges.
+
+#### 5) Reuse Prompts
+
+With so many constraints, you can’t manually write them every time.
+
+So save prompts as project rule files [AGENTS.md](https://agents.md/), facilitating reuse.
+
+[AGENTS.md](https://agents.md/) is an open standard allowing different AI tools to read the same rule file, supported by mainstream AI programming tools (Cursor, Claude Code, Windsurf, etc.).
+
+![](https://pic.yupi.icu/1/1769601770744-9db9fb73-1210-4807-8c41-3e1248a88455.png)
+
+For example, here’s a prompt template I prepared, including all the techniques mentioned:
+
+```markdown
+# Project Design Rules (AGENTS.md)
+
+## Role Setting
+You are a senior independent designer specializing in "anti-mainstream" web aesthetics.
+You despise cookie-cutter SaaS templates, pursuing warmth in every pixel.
+
+## ❌ Absolute Prohibitions
+
+### Color Prohibitions
+- Purple/indigo/blue-purple gradients (#6366F1, #8B5CF6)
+- Flat background colors (must have noise or gradients)
+- Tailwind default color palette
+
+### Layout Prohibitions
+- Hero + three-card layout
+- Perfect center alignment
+- Equal-width columns (must be asymmetric)
+
+### Copy Prohibitions
+- High-sounding professional jargon and meaningless phrases
+- Lorem Ipsum placeholder text
+- Passive voice and long sentences
+
+### Component Prohibitions
+- Shadcn/Material UI default components (must be deeply customized)
+- Emojis as functional icons
+- Linear animations (ease-in-out)
+
+## ✅ Must-Follow Rules
+
+### Copy Style
+- Conversational, like chatting with a friend
+- Specific, with numbers and scenarios
+- Can be humorous, self-deprecating, even provocative
+- No sentence over 15 words
+
+### Image System
+- Icons: Use Iconify icon library

translations/en/Vibe Coding 零基础教程/40 编程学习/01 编程学习路线.md

@@ -0,0 +1,72 @@
+# Comprehensive Programming Learning Roadmaps
+
+> 100+ learning paths, from zero to mastery in one go
+
+
+
+Hello, I'm Yupi, a former Tencent full-stack developer and an [AI programming blogger](https://space.bilibili.com/12890453) with over 2 million followers. I'm also the creator of [AI Navigation](https://ai.codefather.cn) and [Programming Navigation](https://www.codefather.cn), among 10+ self-developed products.
+
+The biggest challenge in learning programming is not knowing what to learn or how to learn it. There are too many scattered tutorials online—learning a bit here and there often leads to mastering nothing and increasing confusion.
+
+To solve this problem, I've created **100+ step-by-step programming learning roadmaps** on [Programming Navigation](https://www.codefather.cn), covering almost all mainstream programming directions to help you learn systematically and efficiently without detours!
+
+Including the hottest AI directions, [click here to get them instantly at codefather.cn/learn](https://www.codefather.cn/learn), with downloadable PDF versions available~
+
+- Programming Languages: Java / Python / Go / C++ / C / JavaScript, etc.
+- Frontend Development: Vue / React / Mini Programs / Node.js / Electron, etc.
+- Backend Development: Java Backend / Python Web / Go Backend / Databases / Message Queues, etc.
+- AI & Machine Learning: AI Large Model Applications / Machine Learning / LangChain / Spring AI, etc.
+- Mobile Development: Android / iOS / Flutter / React Native / HarmonyOS Apps, etc.
+- Computer Fundamentals: Data Structures & Algorithms / Operating Systems / Computer Networks / Software Engineering
+- Other Fields: DevOps / Big Data / Software Testing / Cybersecurity / Game Development / Blockchain, etc.
+
+![](https://pic.yupi.icu/1/%2525E7%2525BC%252596%2525E7%2525A8%25258B%2525E5%2525AF%2525BC%2525E8%252588%2525AA%2525E5%2525AD%2525A6%2525E4%2525B9%2525A0%2525E8%2525B7%2525AF%2525E7%2525BA%2525BF%2525E5%2525A4%2525A7%2525E5%252585%2525A8.png)
+
+
+
+## Clear Learning Focus, Systematic Knowledge Organization
+
+Take the **Java Learning Roadmap** as an example. Programming Navigation's roadmap covers everything from zero to job readiness, including Java basics, databases, web development, mainstream frameworks, project practice, and interview preparation.
+
+Each stage features detailed knowledge points, recommended video tutorials and books, accompanying practice projects, and estimated learning durations. No more wasting time searching for resources—just follow the roadmap step by step without confusion.
+
+![](https://pic.yupi.icu/1/%E7%BC%96%E7%A8%8B%E5%AF%BC%E8%88%AAJava%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF.png)
+
+Additionally, popular directions like Java backend development and AI application development come with curated enterprise-level projects, guiding you through hands-on development from 0 to 1. We provide project source code, tutorial videos, documentation notes, resume tips, and interview solutions—everything you need to apply what you learn and fill your resume to land offers faster!
+
+![Original Projects by Programming Navigation](https://pic.yupi.icu/1/2%20%E7%BC%96%E7%A8%8B%E5%AF%BC%E8%88%AA%E5%8E%9F%E5%88%9B%E9%A1%B9%E7%9B%AE.png)
+
+
+
+## Get the Roadmaps for Free
+
+All learning roadmaps are available for free on the [Programming Navigation website](https://www.codefather.cn/learn), and you can **download them as documents** for offline use.
+
+Visit: [codefather.cn/learn](https://www.codefather.cn/learn)
+
+![](https://pic.yupi.icu/1/%E7%BC%96%E7%A8%8B%E5%AF%BC%E8%88%AA%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF%E4%B8%8B%E8%BD%BD.png)
+
+
+
+## Final Thoughts
+
+
+Learning programming is like climbing a mountain—having a clear roadmap makes the journey easier and faster.
+
+Whether you want to learn Java, Python, frontend, or dive into AI development, Programming Navigation has a roadmap for you. And all roadmaps are free, with downloadable versions available.
+
+Visit [Programming Navigation](https://www.codefather.cn/learn) now, find your ideal learning path, and start your programming journey!
+
+
+
+## Recommended Resources
+
+1) Yupi's AI Navigation: [Comprehensive AI resources, latest news, and free tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Community: [Roadmaps, tutorials, projects, interview guides, and Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheat Sheets: [Internship/Campus/Job-Hunting FAQs & real interview questions](https://www.mianshiya.com)
+
+4) Resume Builder for Programmers: [Professional templates, rich examples, interview-ready](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for internship/campus/job-hunting success](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/40 编程学习/02 编程知识百科.md

@@ -0,0 +1,70 @@
+# Programming Knowledge Encyclopedia
+
+Hello, I'm Yupi, a former Tencent full-stack developer and an [AI programming blogger](https://space.bilibili.com/12890453) with over 2 million followers across platforms. I'm also the creator of over 10 self-developed products, including [AI Navigation](https://ai.codefather.cn) and [Programming Navigation](https://www.codefather.cn).
+
+When learning programming, we often encounter various concepts and technologies, such as "What is RESTful API?", "What is microservices?", "What is Docker?". Searching on the internet yields a plethora of articles, some too simplistic, others overly complex, leaving us still confused after reading.
+
+To solve this problem, I created a **Programming Knowledge Encyclopedia** series on [Programming Navigation](https://www.codefather.cn) and [Bilibili](https://space.bilibili.com/12890453/lists/6264323), explaining programming knowledge through anime, making it easy to understand even for beginners.
+
+![](https://pic.yupi.icu/1/1767663460999-837c637c-9f61-4b21-95a2-5e218ad36a58.png)
+
+## What Does the Programming Knowledge Encyclopedia Include?
+
+The Programming Knowledge Encyclopedia covers various concepts, technologies, and tools encountered in programming learning and work, including but not limited to:
+
+- Programming Basics: Object-Oriented Programming, Data Structures, Algorithms, Design Patterns
+- Project Development Knowledge: RESTful API, MVC Architecture, Database Design, Index Optimization
+- AI Programming Knowledge: Prompt Engineering, RAG, Vector Databases, AI Development Frameworks
+- Tools and Technologies: Git, Docker, Redis, Message Queues, Microservices
+
+Currently, dozens of topics have been updated, with more to come.
+
+![](https://pic.yupi.icu/1/image-20260113145432074.png)
+
+## Features of the Programming Knowledge Encyclopedia
+
+Explained through anime, not dull text and code, but lively and interesting anime format, making learning fun and easy.
+
+- Easy to Understand: Explains complex concepts in plain language, understandable even for beginners.
+- Practical Orientation: Not just theory, but also how to use it and in what scenarios.
+- Continuously Updated: Keeps up with technological advancements, timely adding new content.
+
+![](https://pic.yupi.icu/1/1767663646677-8c6cbd95-9a06-4447-a276-83d3a505e957-20260113145631574.png)
+
+## How to Learn the Programming Knowledge Encyclopedia?
+
+You can learn the Programming Knowledge Encyclopedia through the following methods:
+
+### Method 1: Watch Videos on Bilibili
+
+Recommended to watch videos on my Bilibili channel, where anime explanations are more vivid and easier to understand.
+
+Bilibili Address: https://space.bilibili.com/12890453/lists/6264323
+
+Search: **Yupi the Programmer**
+
+I regularly update video content for the Programming Knowledge Encyclopedia, covering various programming concepts, technologies, and tools.
+
+### Method 2: Learn on the Programming Navigation Website
+
+Visit [Programming Navigation](https://www.codefather.cn) to view the text and image version of the knowledge encyclopedia content.
+
+Website Address: https://www.codefather.cn
+
+### Method 3: Follow the "Yupi the Programmer" WeChat Official Account
+
+Welcome to follow my WeChat Official Account "Yupi the Programmer" to get my daily shares first-hand:
+
+![](https://pic.yupi.icu/1/%E9%B1%BC%E7%9A%AE%E7%9A%84%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7.png)
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [Comprehensive AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guides, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Essentials: [Internship/Campus Recruitment/Social Recruitment High-Frequency Exam Points, Enterprise Real Questions Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Writing Tool: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Get Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/40 编程学习/03 编程资源大全.md

@@ -0,0 +1,197 @@
+# Programming Resource Guide
+
+> One-stop Programming Learning Resource Navigation
+
+
+
+Hello, I'm Yupi, a former Tencent full-stack developer, and an [AI Programming Blogger](https://space.bilibili.com/12890453) with 2 million followers across platforms. I'm also the creator of [AI Navigation](https://ai.codefather.cn), [Programming Navigation](https://www.codefather.cn), and 10+ other self-developed products.
+
+Learning programming, working on projects, and job hunting all require various resources and tools. With so many scattered resources online, it's hard to know which ones are reliable, wasting a lot of time.
+
+This article introduces a series of products developed by our team, covering the entire process of learning programming, working on projects, and job hunting, hoping to help you.
+
+
+
+## Programming Navigation - Programming Learning Community, Filling Your Resume with Big Company Projects
+
+Web version: [codefather.cn](https://codefather.cn) (Supports APP and WeChat Mini Program, search for "Programming Navigation")
+
+Programming Navigation is a one-stop programming learning community offering routes, planning, Q&A, and projects, providing a full-service journey from `learning programming => working on projects => job hunting => workplace communication`. It ensures you don't feel lost on your programming learning journey!
+
+For beginners, Programming Navigation offers **hundreds of programming learning routes**, whether you want to focus on front-end, back-end development, or start with basic programming languages, you can find a suitable learning route.
+
+![](https://pic.yupi.icu/1/codenav-image.png)
+
+**20+ enterprise-level full-stack projects**, guiding you step-by-step from 0 to 1, ready to be added to your resume! Each project comes with tutorials, live notes, source code, Q&A, exclusive project discussion groups, ready-made resume writing tips, interview question solutions, and project development templates.
+
+![](https://pic.yupi.icu/1/codenav-image2.png)
+
+Additionally, Programming Navigation offers **hundreds of mock interview videos, hundreds of basic programming tutorials, and thousands of high-quality technical articles**, helping thousands of users secure offers, switch jobs, and get salary raises, receiving continuous praise.
+
+![](https://pic.yupi.icu/1/codenav-image3.png)
+
+Join Programming Navigation, communicate and learn with hundreds of thousands of programming enthusiasts, quickly improve your programming learning and project development skills, solve various learning and job-hunting questions, and land your desired offer!
+
+
+
+
+#### Want more programming tools?
+
+Programming Navigation has curated thousands of programming tools, including development tools, AI tools, efficiency tools, learning resources, categorized by usage scenarios for easy access.
+
+Access address: https://www.codefather.cn/tool
+
+![](https://pic.yupi.icu/1/image-20260113151313523.png)
+
+
+
+## Interview Duck - Interview Prep Tool, Encounter Original Questions and Get Offers
+
+Web version: [mianshiya.com](https://www.mianshiya.com) (Supports WeChat Mini Program, search for "Interview Duck" on WeChat)
+
+Interview Duck is a **comprehensive, fast-updating, high-quality solution** interview prep tool, covering almost all mainstream programming directions, including Java backend / frontend / AI / Python / C++ / Go / operations / testing / system design / scenario questions / company question banks / HR interviews, **300+ question banks, over 10,000 interview questions**, ready to tackle any interview challenge.
+
+![](https://pic.yupi.icu/1/mianshiya-image1.png)
+
+In addition to classic interview questions, it provides real company interview experiences, scenario questions, system design questions, helping you comprehensively overcome interview hurdles! Supports PC, mini-program, and even IDE, VSCode editor plugins, allowing you to practice anytime, anywhere, easily improve your skills, and prepare for interviews.
+
+Save time by not having to organize questions yourself or sift through mixed-quality answers, and use the saved time to prepare for dozens more questions, **encounter original questions** and overtake the competition.
+
+Since its launch, we've received a lot of praise, many friends have encountered original questions, even exact matches, as if they had foresight.
+
+The reason is simple, **many interviewers use it to select questions**, improving recruitment efficiency.
+
+![](https://pic.yupi.icu/1/mianshiya-image2.png)
+
+
+
+
+#### AI Large Model Interview Questions
+
+With the rise of AI, Interview Duck has specially curated **AI Large Model Interview Question Banks**, including AI large model principles, Prompt engineering, RAG, AI development frameworks, and more.
+
+Question Bank Address: https://www.mianshiya.com/bank/1906189461556076546
+
+![](https://pic.yupi.icu/1/image-20260113151621420.png)
+
+
+
+## Old Fish Resume - Create a Resume in 1 Minute, Double Your Interview Rate
+
+Web version: [laoyujianli.com](https://www.laoyujianli.com/)
+
+Old Fish Resume, a smart online resume tool designed for efficient job hunting, offers **100+ big company resume templates**, helping you create a professional resume that impresses recruiters in the shortest time.
+
+No need to know layout or repeatedly adjust formats, you can directly choose a professional resume template, edit online in real-time, preview instantly, what you see is what you get; or just fill in a personal introduction, let AI quickly generate a complete resume, and intelligently optimize, correct, and professionally polish the content, making the expression clearer and more in line with recruiters' reading habits.
+
+Supports free customization of resume modules, switching between Chinese and English versions, exporting PDF or images, generating clean and professional online resume links, and can be shared with one-click desensitization, safe and worry-free.
+
+![](https://pic.yupi.icu/1/laoyujianli-image.png)
+
+
+
+#### Don't know how to optimize your resume?
+
+Refer to the free column "Yupi's Step-by-Step Resume Writing Guide" on Programming Navigation, providing comprehensive resume optimization tips, common resume issues, and real case analysis.
+
+![](https://pic.yupi.icu/1/image-20260113152216928.png)
+
+
+
+#### Want more job application information?
+
+Old Fish Resume provides **continuously updated application schedules**, informing you of the recruitment times of major companies, helping you seize opportunities.
+
+![](https://pic.yupi.icu/1/image-20260113152400651.png)
+
+
+
+
+## Backend Bootcamp - Comprehensive Support, Efficiently Land Offers
+
+If you need to quickly find a job or want to improve your competitiveness through long-term learning but always feel directionless and progress chaotic, with projects and resumes not ready, what you need is not a pile of scattered materials, but a growth path truly aimed at **landing offers**.
+
+The Backend Job Bootcamp is a tailored acceleration solution for you. From programming basics to enterprise-level development, from project practice to resumes and interviews, the entire process revolves around real recruitment requirements, helping you step-by-step fill in the gaps, reaching a state where you can apply, interview, and compete confidently.
+
+After joining, you'll receive a **customized learning plan**, tailored to your foundation and target position; receive **1v1 Q&A**, **deep project optimization**, **resume refinement**, and **mock interviews** from mentors with big company backgrounds, repeatedly polishing your projects and expressions from the interviewer's perspective, not just stopping at "writing code means learning".
+
+![](https://pic.yupi.icu/1/xunlianying-image1.png)
+
+At the same time, the bootcamp helps you fight procrastination and the loneliness of self-study through **daily check-ins, weekly reviews, and study companionship**, continuously pushing you towards your job-hunting goals. All services revolve around one result: transforming your learning into real job-hunting competitiveness within a limited time.
+
+![](https://pic.yupi.icu/1/xunlianying-image2.png)
+
+👇Add the bootcamp mentor's WeChat, help you assess your current situation, provide job-hunting planning guidance, and consult on Backend Job Bootcamp related questions~
+
+![](https://pic.yupi.icu/1/xunlianying-image3.png)
+
+
+
+
+## Interview Duo - 1v1 Mock Interviews, 24/7 Practice
+
+Web version: [ai.mianshiya.com](https://ai.mianshiya.com/)
+
+Interview Duo is your personal interview coach**,** a tool that lets you **practice interview scenarios infinitely**!
+
+Provides an immersive interview environment infinitely close to **real interviews**, can **customize exclusive interview questions** based on your target position and personal situation, 1v1 voice answering, and generates detailed **review and improvement reports**, clearly pointing out where you got stuck, where your logic was messy, and where knowledge needs to be supplemented.
+
+![](https://pic.yupi.icu/1/mianduoduo-image1.png)
+
+From self-introduction to project deep dives, from technical grilling to comprehensive quality assessment, fully replicates the entire process of real interviews. Moreover, the AI interviewer will intelligently follow up based on your answers, helping you anticipate all possible questioning links, until you're thoroughly prepared.
+
+You can choose a 60-minute or longer immersive comprehensive interview, or start a quick interview, targeted improvement based on position, question bank, or specific areas, or upload your resume for question prediction, making interviews more manageable.
+
+![](https://pic.yupi.icu/1/mianduoduo-image2.png)
+
+
+
+## Algorithm Navigation - Free Animated Algorithm Learning
+
+Web version: [algo.codefather.cn](https://algo.codefather.cn/)
+
+Algorithm Navigation, a small tool that makes algorithm learning simple and fun. This is a **completely free, easy-to-understand, and engaging** interactive algorithm learning website, integrating step-by-step tutorials, animated algorithm learning, and visual algorithm debugging tools, no longer need to scratch your head over boring tutorials!
+
+Each algorithm comes with vivid animation demonstrations, and each step change has corresponding text explanations and code highlighting, truly letting you see what your code does at each step. You can **customize input data on the algorithm visualization page, observe algorithm changes under different conditions**, deepening understanding through hands-on practice.
+
+We provide step-by-step algorithm learning routes and tutorials, not only including algorithm step core features, optimization strategies, pros and cons, and extended knowledge, but also giving code implementations in different languages like Java, JavaScript, Python, Go, C++, and more, along with **in-class quizzes and leetcode related questions**.
+
+![Algorithm Navigation Animated Algorithm Website](https://pic.yupi.icu/1/%E7%AE%97%E6%B3%95%E5%AF%BC%E8%88%AA%E5%8A%A8%E7%94%BB%E5%AD%A6%E7%AE%97%E6%B3%95%E7%BD%91%E7%AB%99.png)
+
+
+
+
+## Programming Navigation Mock Interviews
+
+Programming Navigation also offers **hundreds of real mock interview recordings**, not only familiarizing you with the interview process, eliminating the nervousness of real interviews, but also learning others' answering ideas and expression skills.
+
+![](https://pic.yupi.icu/1/image-20260113153048672.png)
+
+
+
+
+## Yupi AI Navigation - AI Tools and Resource Guide
+
+Web version: [ai.codefather.cn](https://ai.codefather.cn/)
+
+Yupi AI Navigation, a one-stop AI tools and learning resource guide, collects **thousands of high-quality AI tools from home and abroad**, clearly categorized by usage scenarios, whether you're writing content, designing, editing videos, programming, or exploring the latest AI applications, click to go directly, no longer wasting time searching through a haystack.
+
+Besides tool navigation, you can also get continuously updated **AI hot topics**, systematically organized **AI learning knowledge bases**, and hundreds of high-quality **Prompt templates** ready for use, truly turning AI from "heard of" to "used to".
+
+More importantly, it's not just a tool list, but a continuously growing **AI community**. You can exchange experiences, share discoveries, learn how others apply AI in practice.
+
+![](https://pic.yupi.icu/1/image-20260109121412266.png)
+
+
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [AI Resource Guide, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Routes, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Questions: [Internship/Campus Recruitment/Social Recruitment High-Frequency Test Points, Enterprise Question Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Tool: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)
+
+5) 1 on 1 Mock Interviews: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Land Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/40 编程学习/04 AI 编程技术.md

@@ -0,0 +1,281 @@
+# AI Programming Technology Beginner's Guide
+
+> Master AI development frameworks and become a hot commodity in the job market
+
+Hello, I'm programmer Yupi.
+
+As programmers, we not only need to know how to use AI tools and leverage AI to develop projects, but also need to be able to independently develop AI projects and integrate AI capabilities into our own projects.
+
+As the saying goes: **In the AI era, all traditional businesses are worth reshaping with AI.**
+
+Therefore, many companies are now hiring programmers who can develop AI projects, which is also our opportunity. So what knowledge and technologies do we need to learn to become a hot commodity in the job market?
+
+⭐️ Recommended video version: https://www.bilibili.com/video/BV1i9Z8YhEja
+
+## 1. AI Development Frameworks
+
+First, from a technical perspective, we need to learn mainstream AI development frameworks. Currently, the most popular ones in the Java direction are **Spring AI** and **LangChain4j**.
+
+### Spring AI
+
+[Spring AI](https://docs.spring.io/spring-ai/reference/getting-started.html) is an AI development framework officially launched by Spring. After two years of development, it officially released version 1.0 in May 2025.
+
+![Spring AI 1.0 Release](https://pic.yupi.icu/1/1747881171718-91ac3eb5-049b-4510-8012-6736c40c9c95.png)
+
+The advantage of Spring AI lies in **its easier integration with the mainstream Java development framework Spring**, making it easier to get started. It provides many ready-made methods to help us improve the efficiency of developing AI applications, such as quickly connecting to large models, saving session context, connecting to vector databases for RAG, and more.
+
+![Spring AI Architecture](https://pic.yupi.icu/1/1743563460857-95800757-867c-4e8a-ba7c-dd490d09fcbd.png)
+
+The core features of Spring AI include:
+
+- Large model invocation capability: Unified interface supports multiple mainstream large models (OpenAI, Claude, Tongyi Qianwen, etc.)
+- Prompt engineering: Provides Prompt and PromptTemplate classes for easy management of prompts
+- Session memory: One line of code to enable conversation memory, automatically handling context
+- RAG retrieval-augmented generation: Full RAG process support, including document loading, vector storage, retrieval optimization
+- Tool invocation: Quickly define tools through annotations, allowing AI to call external services
+- MCP support: Easily access and develop MCP services
+
+For example, using Spring AI to call a large model requires only a few lines of code:
+
+```java
+// Using Spring AI to call a large model
+@Bean
+public ChatClient chatClient(ChatModel chatModel) {
+    return ChatClient.builder(chatModel).build();
+}
+
+public String doChat(String message) {
+    return chatClient.prompt(message).call().content();
+}
+```
+
+Without Spring AI, you would need to write HTTP requests and parse responses yourself, which is much more cumbersome.
+
+### Spring AI Alibaba
+
+[Spring AI Alibaba](https://java2ai.com/) is a domestic version launched by Alibaba based on Spring AI, specifically optimized for the domestic AI ecosystem.
+
+Its advantages include:
+
+- Better support for domestic large models (Tongyi Qianwen, Baidu Wenxin Yiyan, etc.)
+- Provides Chinese documentation and technical support
+- Optimized for domestic network environments
+- Supported by Alibaba Cloud's ecosystem
+
+If you mainly use domestic AI services, Spring AI Alibaba would be a better choice.
+
+### LangChain4j
+
+[LangChain4j](https://docs.langchain4j.dev/intro) is another mainstream Java AI development framework, characterized by **greater flexibility, more suitable for developing complex agents**.
+
+For example, when developing an intelligent document analysis system, using LangChain4j, the agent can automatically read document content, call a search engine to obtain relevant background knowledge, and then combine document information with external knowledge based on task requirements to generate an analysis report.
+
+The core features of LangChain4j include:
+
+- AI Service: Declarative development, quickly building AI services through annotations
+- Session memory: Supports multiple session memory strategies and persistence
+- Structured output: Automatically converts AI output into Java objects
+- RAG support: Full RAG process, supports multiple vector databases
+- Tool invocation: Flexible tool definition and invocation mechanism
+- Guardrails: Input/output interceptors, enhancing security
+
+For example, using LangChain4j's AI Service:
+
+```java
+@AiService
+public interface AiCodeHelperService {
+    @SystemMessage(fromResource = "system-prompt.txt")
+    String chat(String userMessage);
+}
+```
+
+Just define the interface and annotations, and the framework will automatically generate the implementation class, which is very convenient.
+
+### How to Choose a Framework?
+
+| Scenario          | Recommended Framework        | Advantages                 |
+| ----------------- | ---------------------------- | -------------------------- |
+| Java enterprise applications | Spring AI             | Seamless integration with Spring ecosystem |
+| Domestic AI services | Spring AI Alibaba     | Better support for domestic large models |
+| Agent development  | LangChain4j           | Complete Agent toolchain    |
+| Complex workflows  | LangGraph (advanced)  | Visual orchestration        |
+
+My suggestion is to **learn both, starting with Spring AI, then learning LangChain4j will be easier**. Many concepts and usages are similar, and mastering one will make it easier to pick up the other.
+
+## 2. AI Integration
+
+The prerequisite for developing AI applications is having a large model, but large models require computing power to run, and computing power costs money. Where can we get large models?
+
+There are two methods: using AI cloud services or deploying large models locally.
+
+### AI Cloud Services
+
+AI cloud services are AI large models deployed by other enterprises, provided to us through API interfaces, charged based on usage.
+
+For example, Alibaba Cloud Bailian, Volcano Engine, Silicon Flow, OpenAI, etc.
+
+![AI Cloud Services](https://pic.yupi.icu/1/1743563631799-46ff94d5-d51b-4dc5-b6cf-dec28bdcdb39.png)
+
+What we programmers need to focus on is:
+
+1. How to access cloud services through APIs?
+2. How to use AI cloud services to create agents and configure parameters?
+3. How to choose the right cloud service? This requires attention to the pricing models and service quality of various cloud services
+4. How to use cloud services at lower costs and more stably? This requires us to learn Prompt engineering and high-availability technologies
+
+### Local Deployment of Large Models
+
+Local deployment of large models is also a necessity for many enterprises, as data does not need to be uploaded to the cloud, effectively ensuring data security and privacy, especially suitable for industries extremely sensitive to data security such as healthcare and finance.
+
+Local deployment of large models is actually not difficult, just use the [Ollama tool](https://ollama.com/) to deploy various mainstream open-source models with one click.
+
+![Ollama](https://pic.yupi.icu/1/1743563719547-bbed1c54-d1f1-496f-afc2-d755c3538732.png)
+
+However, the difficulty of deploying large models is not technical, but mainly the lack of computing power! Otherwise, I would have deployed a Yupi large model for our team's [Programming Navigation](https://codefather.cn) and [Interview Duck](https://www.mianshiya.com).
+
+## 3. AI Domain Business
+
+AI business development in enterprises is not just about AI conversations; we also need to master several more complex business developments, such as RAG knowledge bases, multimodal, MCP services, and ReAct agents.
+
+### RAG Knowledge Base
+
+Many companies have their own business knowledge and documents, and will build their own Q&A systems or customer service, which requires the use of RAG retrieval-augmented generation technology.
+
+First, use a text embedding model to convert various enterprise documents into vectors and store them in a vector database; when users ask questions, the system retrieves relevant vector data in the vector database, finds the most similar document fragments, and inputs them into the large model along with the question. This way, the large model can answer based on real enterprise data, more accurately fitting the actual situation.
+
+![RAG Process](https://pic.yupi.icu/1/1743563751814-4123230c-c4b8-458f-bf8b-070c7550dd54.png)
+
+There is a lot to learn about RAG, such as mainstream vector databases Milvus and PGVector, document extraction/conversion/loading, index construction, query strategy optimization, etc. **This is also a key focus in AI enterprise interviews!**
+
+### Multimodal
+
+Multimodal is also a mainstream AI business scenario, integrating multiple different types of data modalities such as text, images, audio, and video, thereby improving product usability and creating more creative features.
+
+For example, building an intelligent shopping guide system, where customers can input text descriptions of desired products, the system can also recognize product images uploaded by customers, and even understand shopping needs expressed through voice.
+
+![Multimodal](https://pic.yupi.icu/1/1743563981663-8c9f4746-03dc-4b32-8477-b9a9042922c.png)
+
+To develop multimodal applications, we need to learn modal conversion technologies, such as text-to-speech (TTS), speech-to-text (STT), optical character recognition (OCR), etc. However, these have ready-made tool libraries or cloud services, just master the calling methods.
+
+### MCP Services
+
+MCP (Model Context Protocol) can be understood as various services provided to AI, enabling AI to achieve more powerful functions.
+
+![MCP](https://pic.yupi.icu/1/1743563832927-7a2df71f-acc1-47c4-9135-e7d888749dbc.png)
+
+How to integrate others' MCP services into your project to enhance your project's capabilities; and how to develop your own MCP services for others' projects to use, are essential to learn.
+
+Now, using development frameworks like Spring AI, you can develop MCP services, and even experts have created a [website](http://mcpify.ai/) that can create your own MCP service with one sentence, which is really cool.
+
+![MCP Generation](https://pic.yupi.icu/1/1743563865750-bbd02b74-2a56-49a9-963f-e633c1484fe5.png)
+
+### ReAct Agent
+
+ReAct is a development paradigm for building agents, aiming to create agents that can autonomously take actions based on reasoning results.
+
+Its development process involves task planning, tool invocation, interactive I/O, exception handling, etc. Especially tool invocation, which can be achieved through Function Call or MCP to implement functions like weather query, file reading/writing, webpage running, information retrieval, terminal command execution, etc.
+
+![ReAct Agent](https://pic.yupi.icu/1/1743563922663-0096045d-8a99-4202-b30d-df77a341e697.png)
+
+Take developing a video website as an example, when the user gives the instruction "Help me develop a Dilidili video website and deploy it online", the agent will first deeply understand the task content, reason through a series of execution steps, including clarifying requirements, designing solutions, building frameworks, generating code, deploying online, etc. Next, the agent will call the corresponding tools to execute these actions.
+
+![Agent Workflow](https://pic.yupi.icu/1/1743564028474-638e6414-9a22-4350-80f3-7bf174dd0f77.png)
+
+## 4. AI Toolchain
+
+Finally, there are some platforms, tools, and libraries that we might use when developing AI projects.
+
+### Low-Code Platforms
+
+For example, the mainstream low-code AI development platform [Dify](https://dify.ai/), which allows us to build our own AI agents through drag-and-drop, create knowledge bases and import our own documents, build complex workflows, etc. Even if you don't know how to code, you can create complex AI applications with it.
+
+![Dify](https://pic.yupi.icu/1/1743564064922-03f6365b-a712-47d9-be55-4867b848a269.png)
+
+### Tool Libraries
+
+There are also some tool libraries that are useful when developing AI agents, such as:
+
+- Apache Tika: A powerful file parser tool library, supports parsing various documents like PDF, Word, Excel, PowerPoint, etc.
+- Playwright: A tool library for simulating browser behavior, useful when AI needs to run web pages, scrape web data, automate testing, etc.
+- JSON format parsing libraries: GSON and Kryo
+- HTML document parsing library: jsoup
+
+These libraries have almost no learning cost, just refer to the documentation when needed.
+
+### Deployment Tools
+
+Projects ultimately need to be deployed online, so we also need to master efficient deployment tools. If you are learning individually and want to quickly deploy your own small AI applications, you can try the following platforms:
+
+- [Vercel](https://vercel.com/): Suitable for front-end application deployment platforms, supports automatic building, online browsing, CDN distribution, and even provides free accessible domains
+- [Sealos](https://sealos.io/): Cloud-native application management platform, supports Kubernetes cluster management
+- [Railway](https://railway.com/): Allows developers to easily deploy Docker containers without worrying about server configuration and maintenance
+
+Of course, to quickly deploy services, Docker containerization technology is also essential, like an APP installation package, easily distributing and deploying your applications.
+
+![Docker](https://pic.yupi.icu/1/1743564338228-ffc55f7b-7bcd-40df-a10b-4accfb666379.png)
+
+## 5. Recommended Learning Resources
+
+How about it? There's quite a lot to learn. Don't worry, I'm also continuously learning these contents and will continue to share them with you.
+
+### 1. AI Learning Path
+
+The complete AI large model application development learning path can be obtained at [Programming Navigation](https://www.codefather.cn/course/1789189862986850306/section/1912024009574629377):
+
+URL: https://www.codefather.cn/learn
+
+![AI Learning Path](https://pic.yupi.icu/1/image-20250912152042459.png)
+
+### 2. AI Project Practice
+
+On [Programming Navigation](https://www.codefather.cn), I have led everyone through multiple sets of AI project tutorials, covering almost all the technologies mentioned above:
+
+- AI Programming Assistant: LangChain4j framework introduction, practical dialogue memory, structured output, RAG, tool invocation, MCP, SSE, etc.
+- AI Super Agent: Spring AI framework introduction, practical AI love master application + autonomous planning super agent
+- AI Zero-Code Application Generation Platform: LangChain4j AI agent, LangGraph4j workflow, microservice architecture
+- AI Q&A Application Platform: React cross-platform mini-program, Vue3 AI application, database sharding, SSE real-time push
+
+These projects are all enterprise-level real projects, and you can directly write them into your resume after completion.
+
+### 3. Open Source Projects
+
+I have also open-sourced many AI application development projects, sharing them with everyone:
+
+- AI Application Generation Platform: https://github.com/liyupi/yu-ai-code-mother
+- AI Super Agent: https://github.com/liyupi/yu-ai-agent
+- AI Literature Reading Assistant: https://github.com/liyupi/literature-assistant
+- AI Knowledge Base: https://github.com/liyupi/ai-guide
+
+### 4. AI Knowledge Base
+
+In my free open-source [AI Knowledge Base](https://github.com/liyupi/ai-guide), I have collected the latest and most comprehensive AI knowledge to help everyone better adapt to the arrival of the AI era.
+
+URL: https://ai.codefather.cn
+
+![](https://pic.yupi.icu/1/image-20260109121412266.png)
+
+In addition to various tutorial materials, I also focus on sharing many specific application scenarios of AI tools, such as integrating office software to improve efficiency, helping you do self-media, AI batch video production, etc., hoping to help everyone draw inferences and find new ideas.
+
+## Final Words
+
+AI technology is evolving rapidly, and the requirements for programmers are also constantly increasing. **AI-related knowledge is no longer just for algorithm engineers to understand, but a basic skill that every programmer must master.**
+
+Whether you are a front-end, back-end, or full-stack developer, you need to understand the basic concepts and practical methods of AI application development.
+
+Because in the future of software development, AI will be everywhere.
+
+If you ask me if AI will eliminate programmers?
+
+My answer is still "yes". Because programmers themselves need continuous learning and practice to maintain competitiveness, as long as everyone can learn the knowledge I mentioned, pay more attention to the forefront of AI, I believe AI will not take away our jobs as programmers, but become our lever to transform the world.
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Path, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Eight-Part Essay: [Internship/Campus Recruitment/Social Recruitment High-Frequency Test Points, Enterprise Real Questions Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Writing Tool: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interview: [Internship/Campus Recruitment/Social Recruitment Interview Essential for Getting Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/40 编程学习/05 AI 绘图指南.md

@@ -0,0 +1,326 @@
+# The Complete Guide to AI Drawing for Programmers
+
+> Generate architecture diagrams in 1 minute, say goodbye to manual drawing
+
+Hello, I'm Yupi the programmer.
+
+As a programmer, drawing diagrams is a daily routine. Whether it's creating architecture diagrams for presentations, flowcharts for documentation, or mind maps for brainstorming, our ability to draw directly reflects our professionalism.
+
+In the past, drawing diagrams required significant time and effort. A complex architecture diagram could take hours, with constant adjustments needed. Now, in the time it takes to drink a cup of water, AI can draw it for you, and the results are exceptionally professional!
+
+Below, I will share **5 major AI drawing methods**, each with detailed step-by-step tutorials. These methods are increasingly powerful, so I recommend liking and saving this guide. Whether you need to generate prototypes, design posters, or draw architecture diagrams, flowcharts, UML class diagrams, etc., it will be a breeze~
+
+⭐️ Recommended to watch the video version for more detailed demonstrations: https://bilibili.com/video/BV1DP7JzAE7k
+
+## The Essence of AI Drawing
+
+Before we begin, let's understand the essence of AI drawing: **essentially, it's about generating text code that various drawing tools can understand**, then importing this code into the corresponding tools for rendering.
+
+This way, we can leverage AI's creativity and the tools' capabilities to freely generate images.
+
+![AI Drawing Principle](https://pic.yupi.icu/1/1748414656182-9580e13e-97bd-4013-8361-ee19b200c0f7.png)
+
+Although mainstream AI models and tools can achieve drawing functionality, I strongly recommend using **Cursor tool with Claude 4 model** for the best results.
+
+Now, let's introduce several AI drawing methods:
+
+## 1. Text Drawing
+
+Text drawing is the most popular method among advanced programmers, allowing the generation of professional technical diagrams through simple text descriptions. Mainstream text drawing languages include **Mermaid** and **PlantUML**.
+
+### Mermaid - The Most Popular Text Drawing Tool
+
+Mermaid is currently the most popular text drawing tool, with simple and intuitive syntax, natively supported by platforms like GitHub and Yuque. Whether you need to draw software architecture diagrams, business flowcharts, database ER diagrams, or Git branch diagrams, Mermaid can handle it effortlessly.
+
+Let's start by drawing a user login flowchart. Just provide AI with this prompt:
+
+```plain
+Please use Mermaid syntax to draw a user login flowchart, including the following steps:
+1. User enters username and password
+2. Frontend validates the format
+3. Sends request to backend
+4. Backend verifies user information
+5. If verification is successful, generate and return a token
+6. If verification fails, return an error message
+7. Frontend redirects or displays an error based on the result
+```
+
+Execute this in Cursor or other AI tools, and AI will generate Mermaid code. Then, you can copy the code into tools that support Mermaid, such as Yuque, Typora, or the online [Mermaid rendering website](https://mermaid-live.nodejs.cn/edit).
+
+![Mermaid Flowchart](https://pic.yupi.icu/1/1748414916480-1151faa7-a03d-49b0-82b0-ba321211456e.png)
+
+Many AI chat assistants have built-in Mermaid rendering tools, allowing you to see the results directly and download them:
+
+![AI Built-in Rendering](https://pic.yupi.icu/1/1748415298510-f1389787-6859-4cf6-b0c7-fe6712acf57a.png)
+
+Mermaid also supports various chart types, such as sequence diagrams, Gantt charts, pie charts, Git branch diagrams, and architecture diagrams.
+
+### PlantUML - Professional UML Drawing Tool
+
+PlantUML is another powerful text drawing tool, especially skilled in drawing UML diagrams, sequence diagrams, and system architecture diagrams. Its syntax is more professional and standardized compared to Mermaid, producing more refined diagrams.
+
+Let's use AI + PlantUML to draw a classic order system class diagram:
+
+```plain
+Please use PlantUML syntax to draw a class diagram for an order system, including:
+- Order class: orderID, userID, totalAmount, status, createTime
+- OrderItem class: productID, quantity, unitPrice
+- User class: userID, username, email
+- Product class: productID, name, price, stock
+Show the relationships between them
+```
+
+AI will generate professional PlantUML code, which you can also view in Yuque's text drawing or the [PlantUML rendering website](https://www.plantuml.com/plantuml/uml/).
+
+![PlantUML Class Diagram](https://pic.yupi.icu/1/image-20250530125534018.png)
+
+### How to Choose?
+
+| Feature         | **Mermaid**              | **PlantUML**      | **Graphviz**       |
+| ------------ | ------------------------ | ----------------- | ------------------ |
+| **Chart Types** | Flowcharts, sequence diagrams, Gantt charts, etc. | Full UML series, architecture diagrams | Various charts, extremely flexible |
+| **Syntax Difficulty** | Simple and intuitive                 | Medium, UML standards     | More complex             |
+| **Ecosystem Support** | Native support by GitHub/GitLab    | Requires plugin support      | Widely supported           |
+| **Use Cases** | Daily documentation illustrations             | Professional architecture design      | Complex network topologies       |
+
+My recommendation is to use Mermaid for daily tasks due to its simple syntax and good platform support; for professional UML diagrams, choose PlantUML.
+
+## 2. Web Drawing
+
+Web drawing is a very free and flexible drawing method. Essentially, it's "images as websites" — generating web code containing visual elements and rendering various images in the browser.
+
+### Native Web Drawing
+
+Using core web development technologies (HTML + CSS + JavaScript), we can generate various types of charts. We can also leverage third-party visualization libraries (like ECharts, D3.js, etc.) to enhance the effects.
+
+For example, when data needs to be displayed, AI can use Apache ECharts and other visualization libraries to generate professional data dashboards:
+
+```plain
+Please generate a data visualization dashboard page, displaying real-time data for an e-commerce platform:
+1. Page layout: dark-themed dashboard style
+2. Include the following charts: real-time sales, sales distribution by category, 24-hour sales trend, top 10 best-selling products, user geographic distribution
+3. Use ECharts with animation effects
+```
+
+AI will generate a complete website with various charts, which is quite impressive~
+
+![Data Dashboard](https://pic.yupi.icu/1/1748417511003-49c81cc8-618e-4810-b94d-ebcfbb48885d.png)
+
+You can directly take screenshots as needed to get images; you can also use tools like [Codepen](https://codepen.io/) to quickly share the generated website with others.
+
+### SVG Vector Drawing
+
+SVG is scalable vector graphics, which can be infinitely scaled without distortion, making it ideal for drawing UI materials, logos, graphic illustrations, technical architecture diagrams, flowcharts, etc.
+
+Let's use SVG to draw a system architecture diagram:
+
+```plain
+Please generate an SVG format system architecture diagram, showing a typical three-tier architecture:
+- Presentation layer: Web frontend, mobile App
+- Business layer: API server cluster (3 nodes)
+- Data layer: Master-slave database, Redis cache
+Requirements: Use different colors for each layer, add connecting lines to show data flow
+```
+
+The SVG code generated by AI can be saved directly as an SVG file and opened in a browser.
+
+![SVG Architecture Diagram](https://pic.yupi.icu/1/1748419703308-c3e3ab06-bfd0-4d3e-8bd9-6315fe9e3dde.png)
+
+## 3. Professional Drawing Tools - Draw.io
+
+Combining AI with professional drawing tools can achieve a 1+1 > 2 effect.
+
+The drawing tool I use most often is the free and open-source **draw.io**, which offers high flexibility, supports importing and exporting various formats, and has a rich library of shapes and templates.
+
+There's also a popular open-source project [next-ai-draw-io](https://github.com/DayuanJiang/next-ai-draw-io), which allows generating and editing draw.io images directly through AI conversations, gaining 6k stars in just a few days!
+
+![AI Draw.io](https://pic.yupi.icu/1/1765425690148-db18c63c-6666-4a0b-a681-0ad4a5c061c3.png)
+
+This project supports online experience, allowing you to start drawing from scratch, such as drawing a flowchart to demonstrate how RAG works. AI will automatically generate Draw.io drawing code, and soon a beautiful flowchart is ready!
+
+⭐️ Recommended to watch the video demonstration: https://bilibili.com/video/BV18NmnB4EeM
+
+![RAG Flowchart](https://pic.yupi.icu/1/1765425750546-988f6dd9-552b-403f-a1ea-f8866c309663.png)
+
+Then, you can use Draw.io's powerful drawing capabilities to manually modify any element or change the style. You can also use AI conversations to help modify, such as adding animated connecting lines, instantly elevating the sophistication.
+
+![Animated Connecting Lines](https://pic.yupi.icu/1/1765425815484-e879ea8a-d40a-4857-baab-4124c3eedcee.png)
+
+### Generating Various Technical Diagrams
+
+Also, architecture diagrams related to programmers' work:
+
+```plain
+Prompt: Draw a microservices architecture diagram for an e-commerce platform
+```
+
+![Microservices Architecture Diagram](https://pic.yupi.icu/1/1765425829760-5337eb51-a51a-4327-a1e0-66b6f4ce2176.png)
+
+UML Class Diagram:
+
+```plain
+Prompt: Use a UML class diagram to show the design of the user management module
+```
+
+![UML Class Diagram](https://pic.yupi.icu/1/1765425843465-53ebe0d1-0df4-46b1-8b27-1bdd98333f5d.png)
+
+ER Diagram:
+
+```plain
+Prompt: Draw a database ER diagram for an online education platform
+```
+
+![ER Diagram](https://pic.yupi.icu/1/1765425852509-4685b9ff-9c86-430c-9e7e-fd1f75877c51.png)
+
+Sequence Diagram:
+
+```plain
+Prompt: Use a sequence diagram to show the interaction process of user login
+```
+
+![Sequence Diagram](https://pic.yupi.icu/1/1765425862905-cab2301b-77c2-47e4-adc1-6d7c617cd33b.png)
+
+These are all handled effortlessly, saving you a lot of time and effort~
+
+### Usage Tips
+
+Some usage tips, such as using free icon libraries to enrich the drawing elements:
+
+```plain
+Prompt: Use AWS icons to generate a CDN architecture diagram
+```
+
+![AWS Architecture Diagram](https://pic.yupi.icu/1/1765426030861-27a70a15-559b-4540-9177-5e5f66d120b0.png)
+
+You can use native SVG animation tags to add scaling and path animations to the entire drawing:
+
+```plain
+Prompt: Demonstrate a DDOS attack, use SVG's <animateMotion> and <animateTransform type="scale"> to add scaling and path animations
+```
+
+![Animation Effects](https://pic.yupi.icu/1/1765425981962-4a730008-8a64-4805-adfc-a63a983e4fde.png)
+
+You can also upload a sketch, such as a Mermaid flowchart generated by a text model, and let AI help replace it with a more aesthetically pleasing style:
+
+```plain
+Prompt: Change to a rainbow theme color scheme, enlarge the font, use bold animated connecting lines
+```
+
+The result is pretty good!
+
+![Optimized Diagram](https://pic.yupi.icu/1/1765426075534-26f6f2a7-8ee9-421f-ad10-4910b2b7df34.png)
+
+Finally, export it to various image or document formats, and enjoy~
+
+![Export Formats](https://pic.yupi.icu/1/1765268527840-a3717305-7bba-4533-8595-c92c21bcd021.png)
+
+### Local Deployment
+
+Note that the official demo website may have limits and instability. For example, after using it several times in a row, I was denied access.
+
+Therefore, I recommend downloading the open-source code locally and configuring your own large model according to the official documentation [AI Providers](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/docs/ai-providers.md) to run it; or use Docker to start it with one click, and use it however you like.
+
+![Docker Deployment](https://pic.yupi.icu/1/1765426188076-914514ec-c5cd-4ac5-8ca7-e09f0808801e.png)
+
+## 4. Mind Maps
+
+AI can help us quickly generate beautiful mind maps and export them to formats supported by professional mind mapping software.
+
+The mind mapping software I use most often is XMind, which supports rich styles and themes.
+
+I recommend letting AI generate **Markdown format mind maps**, as Markdown format is more universal and convenient for use in various documentation tools:
+
+```plain
+Please generate a mind map about "Microservices Architecture Design" in Markdown format, using indentation to represent hierarchical relationships
+```
+
+AI will generate Markdown format like this:
+
+```markdown
+# Microservices Architecture Design
+
+## Service Splitting Principles
+- Single Responsibility
+  - Each service is responsible for only one business function
+  - High cohesion, low coupling
+- Service Autonomy
+  - Independent deployment
+  - Independent technology selection
+```
+
+Import this Markdown file directly into XMind, and you'll get a well-structured mind map!
+
+![Mind Map](https://pic.yupi.icu/1/1748422118001-752df2f4-d369-46b8-8e16-cd96191d554f.png)
+
+## 5. AI Drawing Tips
+
+### Tip 1: Provide Example Diagrams for AI to Imitate
+
+When you see a great diagram and want to draw a similar one, you can screenshot it and let AI generate a similar diagram.
+
+For example, imitate the system architecture diagram I provided:
+
+```plain
+Based on the system architecture diagram I provided, generate a similar style and structure in draw.io format, but change the content to:
+- An online education platform architecture
+- Keep the original color scheme and layout style
+```
+
+The result is quite similar, isn't it?
+
+![Imitation Generation](https://pic.yupi.icu/1/1748424880583-92c573bc-fdb2-45d0-b4e0-d2590ea069c5.png)
+
+### Tip 2: Screenshot Annotation for Precise Modifications
+
+If you're not satisfied with some parts of the AI-generated diagram, you can screenshot it, draw red circles around the areas you want to modify, and tell AI how to modify them.
+
+![Annotation Modification](https://pic.yupi.icu/1/1748424987920-e61af63a-b688-4cf8-8cd5-e05df1d412c9.png)
+
+### Tip 3: Configure Professional System Presets
+
+The effect of AI generation largely depends on the input prompts, so to make AI draw more professional diagrams, configuring a good system prompt is crucial.
+
+In Cursor, we can set project-level Rules to ensure AI follows your drawing standards.
+
+Here's a professional architecture diagram preset for reference:
+
+```plain
+# Technical Architecture Diagram Expert
+
+You are a senior system architect and technical chart design expert.
+
+## Drawing Principles
+1. All text must be in Simplified Chinese
+2. Keep diagrams concise and clear, avoid over-complexity
+3. Use standard technical icons and symbols
+4. Professional color scheme, clear hierarchy
+
+## Color Scheme
+- Presentation layer: Blue tones (#3498db)
+- Business layer: Green tones (#2ecc71)
+- Data layer: Orange tones (#e67e22)
+```
+
+Configure this preset in Cursor Rules, and AI will generate images according to the rules, ensuring consistency and professionalism.
+
+## Final Words
+
+By now, I believe you've mastered various AI drawing techniques! From simple text drawing to complex dynamic charts, AI can handle it all effortlessly.
+
+Not only does it save us a lot of time, but mom no longer has to worry about my ugly drawings!
+
+If you found this guide helpful, don't forget to like and save it. For those interested in programming and AI, follow Yupi. My free and open-source [AI Knowledge Base](https://ai.codefather.cn) also aggregates a wealth of AI knowledge and tutorials, hoping to be helpful.
+
+![](https://pic.yupi.icu/1/image-20260109121412266-20260113153648943.png)
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheatsheet: [Internship/Campus/Social Recruitment High-Frequency Questions, Enterprise Real Questions Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Maker: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interview: [Essential for Internship/Campus/Social Recruitment Interviews to Get Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/40 编程学习/06 AI 应用开发面试题.md

@@ -0,0 +1,301 @@
+# Must-Know for AI Application Development Interviews
+
+> AI development is not just about calling an API
+
+
+
+Hello, I'm programmer Yupi.
+
+Due to the popularity of AI, many companies have started AI-related businesses or added AI features to existing projects. This has also created a new vertical position for development-oriented programmers — AI application development.
+
+But some friends might think: "AI application development? Isn't it just about calling an API? What's so difficult about it?"
+
+![Calling an API](https://pic.yupi.icu/1/image-20250912144702279.png)
+
+This really proves that saying — the less you know, the more you think you know.
+
+It's like someone asking: How does an e-commerce system push products you like to the homepage?
+
+Some students immediately answer: Isn't it just about recommendation algorithms?
+
+Indeed, but these four words might represent the result of many elites working day and night, continuously researching and optimizing to present to users.
+
+The same goes for AI application development. Calling an API can indeed fulfill some requirements, but when delving into specific business scenarios and solutions, there's still a lot of knowledge and experience worth learning.
+
+Not long ago, I conducted a live interview with a Java backend developer with 3 years of experience, targeting an AI application development position. Below is the interview process. After reading it, you'll understand that AI development is far from just calling an API.
+
+⭐️ Recommended video version: https://bilibili.com/video/BV1qgHezFEaR
+
+![Interview Video](https://pic.yupi.icu/1/image-20250912151414330.png)
+
+
+
+## I. Real Interview Case
+
+### Candidate Background
+
+Xiao Wang graduated in 2022 with over 3 years of Java backend development experience. At his previous company, he was responsible for building an electronic contract cloud platform, including core modules like the account system, permission system, and messaging system.
+
+Besides traditional Java business, he also self-studied AI technologies for over half a year, working on projects like an electronic contract AI assistant (RAG system) and a mock interviewer Agent application. His tech stack includes Spring Boot, MySQL, Redis, RabbitMQ, etc., and he's familiar with prompt engineering, tool calling, Agents, etc., in AI.
+
+**Target Salary: 20K**
+
+Seems like a decent background, right? Let's see what the interview covered~
+
+
+
+### Round 1: Prompt Engineering
+
+Interviewer: Tell me about prompt engineering, preferably with examples from your projects. What techniques do you use to optimize prompts?
+
+Xiao Wang's Answer:
+
+Prompt engineering is a crucial technique for improving the output quality of large models. Common techniques include:
+
+1. Role Setting: Assign system prompts to large models, including role descriptions, tasks, and constraints.
+2. Few-shot Prompting: Provide the model with input-output examples for it to emulate.
+3. Chain of Thought: Have the model think before outputting answers.
+
+In actual development, prompts need continuous iteration and optimization. Platforms like Alibaba Cloud Bailian can be used for A/B testing.
+
+**Review**: This answer is somewhat comprehensive but lacks depth. Real prompt engineering goes far beyond these basic techniques.
+
+
+
+### Round 2: AI Application Development Focus Areas
+
+Interviewer: What are the key considerations when developing AI projects? What do you focus on?
+
+Xiao Wang's Answer:
+1. Business Understanding: Deeply understand the business and abstract it into workflows or Agents.
+2. Engineering Optimization: Cache frequently asked questions, enable streaming output, and use different models for different task scenarios.
+
+Interviewer Follow-up: Don't you focus on AI observability in your projects? What about AI accuracy and hallucination issues?
+
+Xiao Wang: For accuracy, it can be optimized through prompts and RAG...
+
+**Review**: This exposed a problem—knowing what to do but lacking production-level engineering experience.
+
+
+
+### Round 3: Mitigating AI Hallucinations
+
+Interviewer: How do you minimize hallucinations in AI calls during development?
+
+Xiao Wang's Answer:
+1. Prompt Optimization: Clearer role definitions and added constraints.
+2. RAG System: Attach a knowledge base for the AI to base its answers on.
+3. Model Fine-tuning: Fine-tune models for specific domains.
+
+Interviewer: Anything else? You've worked with tool calling—how do you mitigate hallucinations in tool calls?
+
+Xiao Wang: What exactly do you mean by tool calling hallucinations?
+
+Interviewer: For example, the AI calls a tool that doesn't exist in the system. How do you handle that?
+
+Xiao Wang: ... (Silence is tonight's Cambridge Bridge)
+
+![Silence](https://pic.yupi.icu/1/image-20250912151532157.png)
+
+Review: In reality, there are many engineering methods to handle tool calling hallucinations, such as adding hallucination handling strategies, adjusting large model parameters, prompt optimization, exception catching, etc.
+
+
+
+### Round 4: Technical Framework Depth
+
+Interviewer: What frameworks do you use for AI application development?
+
+Xiao Wang: Spring AI.
+
+Interviewer: What are the features of Spring AI?
+
+Xiao Wang's Answer:
+1. Advisor Mechanism: Acts like an interceptor, allowing pre- and post-model call interception.
+2. Conversation Memory: Provides multiple built-in conversation memory implementations.
+3. Vector Storage: Built-in vector storage with options for custom implementations.
+4. ChatClient: A client for interacting with large models.
+5. Tool Calling: Converts Java APIs into tools via annotations.
+6. Structured Output: Specifies JSON format for responses.
+
+Although Xiao Wang listed several features, his response was slow, and many features were left out.
+
+Review: Seems like he's not very proficient.
+
+
+
+### Interview Outcome and Summary
+
+From the interview, Xiao Wang's strengths include:
+
+- Practical experience in AI application development.
+- Decent grasp of basic concepts.
+
+Weaknesses:
+1. Slow Response Pace: Needed step-by-step guidance from the interviewer, lacked initiative.
+2. Lack of Production-Level Practice: Knew what to do but not how to optimize.
+3. Weak Engineering Skills: Limited understanding of AI application monitoring, observability, and exception handling.
+
+Ultimately, I think Xiao Wang has a shot at a 20K monthly salary, but it's not guaranteed. He needs to improve his engineering practice and communication skills.
+
+
+
+## II. What Does AI Development Require?
+
+From this interview, you can see that AI application development is far from just calling an API.
+
+A qualified AI application developer needs to master:
+
+
+### 1. Prompt Engineering
+
+- Role setting, few-shot learning, chain of thought.
+- Prompt optimization and A/B testing.
+- Prompt strategies for different scenarios.
+
+
+### 2. AI Engineering Capabilities
+
+- Performance optimization (caching, streaming output, async processing).
+- Cost control (model selection, batch processing, load balancing).
+- Observability (monitoring, logging, metrics).
+- Exception handling and fault tolerance.
+
+
+### 3. Core Tech Stack
+
+- RAG system design and optimization.
+- Vector database usage.
+- Hybrid retrieval strategies.
+- Model fine-tuning and evaluation.
+
+
+### 4. Frameworks and Tools
+
+- Development frameworks like Spring AI, LangChain4j.
+- MCP model context protocol.
+- Various AI development tools and platforms.
+
+
+### 5. Business Understanding
+
+- Abstracting complex business into AI workflows.
+- Agent design and multi-tool coordination.
+- User experience optimization.
+
+
+
+## III. Recommended Interview Questions
+
+To stand out in AI application development interviews, besides mastering the above knowledge, you should also practice interview questions.
+
+
+### Interview Duck AI Large Model Question Bank
+
+We've compiled an **AI Large Model Question Bank** on [Interview Duck](https://www.mianshiya.com), featuring hundreds of selected questions covering:
+
+- Fundamentals of AI large models.
+- Prompt engineering techniques.
+- RAG retrieval-augmented generation.
+- AI development frameworks (Spring AI, LangChain4j).
+- Vector databases and embeddings.
+- AI application development in practice.
+- Tool calling and MCP.
+- Agent design and optimization.
+
+Question Bank Link: https://www.mianshiya.com/bank/1906189461556076546
+
+![AI Interview Question Bank](https://pic.yupi.icu/1/1747894904199-e795908c-638e-4d29-afd5-c8127db010f3.png)
+
+Each question comes with detailed reference answers and knowledge tags to help you systematically prepare for interviews.
+
+
+
+### FaceMore AI Mock Interviews
+
+Besides practicing questions, mock interviews are crucial. Our [FaceMore](https://ai.mianshiya.com) offers **1v1 AI mock interviews**.
+
+Access Link: https://ai.mianshiya.com
+
+Features of FaceMore:
+
+- Immersive Comprehensive Interviews: Customized questions based on your resume and target position, with 60+ minutes of 1v1 voice interview practice.
+- Specialized Interviews: 400+ interview directions to choose from for targeted improvement.
+- Resume Prediction: Predicts questions interviewers might ask based on your resume.
+- Detailed Review Reports: Evaluates your performance across multiple dimensions and suggests improvements.
+
+![FaceMore](https://pic.yupi.icu/1/1762828151843-64eeef2c-a7ac-454a-a1c9-14c4b131f8cd.gif)
+
+New User Bonus: Register to receive 200 energy points, which can be used for 1 free immersive comprehensive interview or 1 specialized interview + 1 resume prediction.
+
+Through repeated practice, you can:
+
+- Familiarize yourself with the interview process and reduce nervousness.
+- Identify your weak areas.
+- Improve communication and logical thinking.
+- Enhance on-the-spot adaptability.
+
+
+
+## IV. Learning Recommendations
+
+Finally, here are some suggestions for those looking to transition into AI application development:
+
+
+### 1. Don't Stop at "It Works"
+
+Many friends learn to call OpenAI's API and think they've mastered AI development. But real AI application development is about making applications run **stably, efficiently, and accurately** in production at **lower costs**.
+
+
+### 2. Prioritize Engineering Practice
+
+Learn to use AI development frameworks instead of just writing raw HTTP requests. Also, understand AI application monitoring and observability, master cost and performance optimization techniques, and learn to handle various AI application exceptions.
+
+
+### 3. Deep Dive into Core Concepts
+
+For example, prompt engineering isn't just about writing a few examples. RAG systems involve information retrieval, vector databases, re-ranking, and more—each with its own optimization techniques.
+
+But I think the most complex part is Agent design, which involves tool selection, task decomposition, result integration, multi-agent collaboration models, etc.
+
+
+### 4. Work on More Projects and Summarize
+
+This might sound like a cliché, but everyone knows that more projects mean more experience. Especially in AI application development, different business scenarios require customized optimizations for AI-generated results—it's not something you can solve by memorizing methodologies.
+
+I've open-sourced many AI application development projects and even written several systematic tutorials to share with everyone:
+
+- AI Application Generation Platform: https://github.com/liyupi/yu-ai-code-mother
+- AI Super Agent: https://github.com/liyupi/yu-ai-agent
+- AI Literature Reading Assistant: https://github.com/liyupi/literature-assistant
+- AI Knowledge Base: https://github.com/liyupi/ai-guide
+
+On [Code Navigation](https://www.codefather.cn), I've also led multiple AI project tutorials covering almost all AI development technologies.
+
+![](https://pic.yupi.icu/1/2%20%E7%BC%96%E7%A8%8B%E5%AF%BC%E8%88%AA%E5%8E%9F%E5%88%9B%E9%A1%B9%E7%9B%AE.png)
+
+
+
+## Final Thoughts
+
+AI technology evolves rapidly, and the demands on programmers are constantly increasing. **AI knowledge is no longer just for algorithm engineers—it's a fundamental skill every programmer must master**.
+
+Whether you're a frontend, backend, or full-stack developer, you need to understand the basics and practical methods of AI application development.
+
+Because in the future of software development, AI will be everywhere.
+
+Head over to [Interview Duck](https://www.mianshiya.com/bank/1906189461556076546) to practice questions and [FaceMore](https://ai.mianshiya.com) for mock interviews to prepare for your AI development journey!
+
+
+
+
+## Recommended Resources
+
+1) Yupi AI Navigation Site: [Comprehensive AI resources, latest AI news, free AI tutorials](https://ai.codefather.cn)
+
+2) Code Navigation Learning Circle: [Learning paths, programming tutorials, practical projects, job search guides, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheat Sheet: [Internship/campus/social recruitment high-frequency topics, company question analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Builder: [Professional templates, rich examples, direct to interviews](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for internship/campus/social recruitment interviews to land offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/40 编程学习/07 程序员简历模板.md

@@ -0,0 +1,191 @@
+# Programmer Resume Template
+
+> Get your resume done in 1 minute, make it more professional
+
+Hello, I'm programmer Yupi.
+
+Over 4 years of knowledge sharing, I've reviewed thousands of resumes for friends. Without exaggeration, most students' resumes can only be described as "painful to look at."
+
+There are several most typical resume writing problems, such as:
+
+- Resume is too short, not knowing what to write
+- Resume layout is messy, overly flashy
+- Professional skills section lacks professionalism
+- Sentences in the resume are incoherent
+- Resume contains typos
+
+For students not urgently job hunting, don't think resume writing is irrelevant to you. If you can recognize these problems early and master resume writing techniques, you won't make a fool of yourself when job hunting.
+
+As a programmer, seeing these problems always makes me ponder: Is there a way to automatically help people identify resume issues? Help everyone write better resumes faster?
+
+To solve these problems, after researching over a dozen resume writing platforms, I decided to lead a team to develop a brand-new online resume creation website — **Old Fish Resume**!
+
+Website: https://laoyujianli.com
+
+![Old Fish Resume](https://pic.yupi.icu/1/image-20231122134747416.png)
+
+Watch this video to quickly understand how our platform helps improve your resume writing efficiency~
+
+Video link: https://www.bilibili.com/video/BV1Vw411p7ei
+
+## 1. Quick Resume Generation
+
+Old Fish's first major capability is quick resume generation - helping you create a basic resume in under a minute.
+
+We provide 3 ways to create a resume.
+
+### 1. Resume Templates
+
+An excellent resume focuses more on content; layout just needs to be clean and neat - no flashy designs.
+
+Old Fish offers multiple clean, professional resume templates. With one click, you can create a neat and aesthetically pleasing resume without wasting time on formatting!
+
+![Resume Templates](https://pic.yupi.icu/1/%E6%9C%8B%E5%8F%8B%E5%9C%881-20231122134518132.png)
+
+Old Fish also provides resume templates for popular positions, with many ready-made resume content references to give you ideas and inspiration.
+
+For example, the front-end internship resume template can be used with one click:
+
+![Front-end Resume Template](https://pic.yupi.icu/1/image-20230927132442244-20231122134518284.png)
+
+### 2. AI Quick Resume Generation
+
+Many first-time resume writers may be completely unclear about how to write a resume, feeling lost.
+
+To address this, we developed an AI resume generation feature. Just fill in your target position and briefly introduce your basic information to quickly generate a job application resume!
+
+![AI Resume Generation](https://pic.yupi.icu/1/image-20230927133412261-20231122134518373.png)
+
+The generated result includes filled-in sections for education, professional skills, and work experience:
+
+![Generation Effect](https://pic.yupi.icu/1/image-20230927133641303.png)
+
+Note that AI-generated content isn't fixed. The more detailed information you provide, the better the result will be~
+
+### 3. Import Resumes in Multiple Formats
+
+I believe many students still write resumes in Word, but we strongly advise against submitting Word-format resumes as they may have formatting issues and are harder to maintain and update.
+
+Old Fish Resume supports quick import of resume files in various formats like Word, PDF, JPG, PNG, Markdown, Doc, Html, etc., easily helping you "upload your resume to the cloud" for more convenient submission and sharing later~
+
+![Resume Import](https://pic.yupi.icu/1/0a3a72d0-0c93-45a5-87c3-281e16b72bc6-20231122134518766.png)
+
+## 2. Quick Resume Optimization
+
+After creating a basic resume, the next step is to write and optimize it based on your actual situation.
+
+Old Fish Resume provides various practical features to help solve common resume writing problems:
+
+### 1. Real-time Resume Editing and Preview
+
+First is an easy-to-use resume editor with editing on the left and real-time preview on the right. It also supports flexible style adjustments and one-click theme template switching, maximizing your resume writing experience~
+
+![Resume Editor](https://pic.yupi.icu/1/image-20230927135123890-20231122134518974.png)
+
+### 2. Custom Resume Modules
+
+Supports freely adding modules, rich text customization of content and format, meeting almost all your resume modification needs!
+
+![Custom Modules](https://pic.yupi.icu/1/image%20(3)-20231122134519163.png)
+
+### 3. Smart Error Correction
+
+As mentioned earlier, many students' resumes contain typos. Especially for technical positions, a single typo can greatly affect the interviewer's impression of you, potentially causing your resume to be rejected immediately!
+
+To solve this, Old Fish Resume provides a one-click `Smart Error Correction` feature that not only helps quickly fix typos but also optimizes professional terms, capitalization, incorrect punctuation, and sentence coherence:
+
+![Smart Error Correction](https://pic.yupi.icu/1/image%20(4)-20231122134519304.png)
+
+### 4. Smart One-Page
+
+While there's no strict requirement for resume length to be one page, it's generally recommended to keep it to one page or ensure the first page best showcases your abilities and value.
+
+But what if your resume is just slightly over one page?
+
+Old Fish Resume offers a `Smart One-Page` feature to adjust resume layout with one click, automatically optimizing it to one page:
+
+![Smart One-Page](https://pic.yupi.icu/1/cef2eaf8-39de-47bb-84a8-a69d8879a5a2-20231122134519390.png)
+
+### 5. Resume Assistant
+
+This is what we consider the most practical feature. Many students, lacking resume writing or practical experience, may have no idea how to write resume content.
+
+To solve this, Old Fish Resume provides abundant `Resume Examples` and `Resume Tips` for various positions and sections, helping everyone quickly improve their resumes and learn resume writing techniques.
+
+For example, quickly referencing professional skill examples:
+
+![Resume Examples](https://pic.yupi.icu/1/image%20(5)-20231122134519520.png)
+
+Learning how to write professional skills well and common issues:
+
+![Resume Tips](https://pic.yupi.icu/1/image%20(6)-20231122134519691.png)
+
+Don't underestimate resume writing techniques - sometimes, a single detail can significantly boost your resume!
+
+For example, in Yupi's resume, he mentioned being responsible for the website construction studio during college and building multiple websites for the school, including real website links to greatly enhance the credibility of his experience. Similarly, it's best to provide project or documentation links for projects you've worked on.
+
+![Resume Example](https://pic.yupi.icu/1/image-20230927141549926-20231122134519763.png)
+
+### 6. AI Resume Content Optimization
+
+Every section supports AI optimization. With one click, AI helps quickly optimize resume content, making sentences more coherent, content more connected, and expressions more professional!
+
+![AI Optimization](https://pic.yupi.icu/1/image%20(7)-20231122134519865.png)
+
+## 3. Sharing Resumes
+
+After completing your resume, you can share it by exporting it as PDF or images, or through online links.
+
+### 1. Export Resume as PDF and Images
+
+Example export effect as shown below - looks pretty good, right?
+
+![Export Effect](https://pic.yupi.icu/1/%E9%B1%BC%E7%9A%AE%E7%9A%84%E7%AE%80%E5%8E%86%EF%BC%88%E5%A4%A7%E5%AD%A6%E8%84%B1%E6%95%8F%E7%89%88%EF%BC%89.png)
+
+### 2. Online Resume Link Sharing
+
+Generate a clean, minimalist online resume page link for easy sharing with interviewers or HR.
+
+Supports custom link addresses, like Yupi's college resume: https://laoyujianli.com/share/yupi - feel free to check it out.
+
+![Online Resume](https://pic.yupi.icu/1/image-20230927142119454-20231122134520312.png)
+
+### 3. One-Click Desensitized Resume Sharing
+
+When sharing resumes, supports one-click hiding of personal sensitive information, keeping only core content for safer sharing:
+
+![Desensitized Resume](https://pic.yupi.icu/1/4ebdf063-def1-4f13-8328-512cca63f46b-20231122134520412.png)
+
+## 4. Other Features
+
+### 1. Job Hunting Experience Sharing Wiki
+
+We've selected job hunting experience sharing articles from employees at top companies to help improve your competitiveness!
+
+![Job Hunting Experience](https://pic.yupi.icu/1/(null)-20230927125709592-20231122134520103-20231122135515424.png)
+
+### 2. Resume Chinese-English Translation
+
+This feature is very practical if you're applying to both domestic and international companies. Just click the `Translate` button to automatically convert your resume to English!
+
+![Resume Translation](https://pic.yupi.icu/1/1700586172961-f3bce3a7-df22-4b8a-b4ae-f9457e401197.png)
+
+## Final Words
+
+That's all for the introduction. Welcome to use Old Fish Resume: https://laoyujianli.com
+
+Using it together with [Programming Navigation](https://www.codefather.cn)'s [《Yupi's Step-by-Step Resume Writing Guide》](https://www.codefather.cn/course/cv) will yield even better results. Your resume will definitely improve by at least 1 level.
+
+Please feel free to provide any suggestions. Thank you for your support.
+
+## Recommended Resources
+
+1) Yupi AI Navigation: [Comprehensive AI resources, latest AI news, free AI tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning paths, programming tutorials, practical projects, job hunting guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheat Sheet: [Internship/campus/social recruitment high-frequency test points, company real questions analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Tool: [Professional templates, rich examples, direct interview access](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interview: [Essential for internship/campus/social recruitment interviews to get offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/40 编程学习/08 程序员面试刷题.md

@@ -0,0 +1,144 @@
+# Programmer Interview Question Bank
+
+Hi everyone, I'm programmer Yupi. [「Interview Duck」](https://mianshiya.com) is officially launched, finally a **comprehensive, frequently updated, high-quality solution** interview question bank!
+
+Covers almost all mainstream programming directions, including Java backend / frontend / AI / Python / C++ / Go / DevOps / Testing / System Design / Scenario Questions / Company Question Banks / HR Interviews, 300+ question banks, 10,000+ high-frequency interview questions! Supports web, mini-program, IDE, VSCode plugin multi-platform usage.
+
+![](https://pic.yupi.icu/1/1768276081768-c7a167cb-f213-4e65-9be6-e6a1bce8199b.png)
+
+Interview Duck Web: https://mianshiya.com
+
+Interview Duck Mini-program:
+
+![](https://pic.yupi.icu/1/1721460826037-d46052ac-87c8-4afe-8952-9bdde15121af.png)
+
+Interview Duck IDE Plugin: Open settings in JetBrains IDE, find Plugins, search for `mianshiya` to install.
+
+![](https://pic.yupi.icu/1/1726648509017-ed809a2c-aab2-4a48-bd35-4affda7395b0.gif)
+
+Interview Duck VSCode Plugin: In VSCode/Cursor, open the extension marketplace, search for "`Interview Duck`" or "`mianshiya`" to install.
+
+![](https://pic.yupi.icu/1/1744178535494-59a54716-b16c-48df-9eb0-a05dc5c94baf.gif)
+
+## Why Create Interview Duck?
+
+I believe programming friends all dislike rote memorization questions, which are relatively rigid with fixed answers. But **interviews inevitably test rote memorization**, so many friends often complain to me:
+
+- Rote memorization is too hard! What if I forget after memorizing?
+- There's too much rote memorization! Which parts should I focus on?
+- Where can I find rote memorization materials? Online ones are too messy!
+- There are many questions online, but the solutions are too shallow!
+- Memorizing rote questions feels useless, I still don't know anything!
+
+Indeed, although there are many organized interview question PDFs online, most are "used for traffic generation", either incomplete, not updated, or with varying solution quality. If you were to prepare for an interview now, wouldn't you first organize a set of interview questions, then search for many solutions online, and then filter them? It's troublesome and time-consuming, and most importantly, you don't know if the questions will be tested or if the solutions are correct, right?
+
+The world has suffered from rote memorization for too long. **Friends, it's time to crush the interviewer!**
+
+So we launched the interview question bank《Interview Duck》, with more comprehensive questions, more convenient practice, more time-saving memorization, higher quality solutions, richer knowledge, and more frequent updates, these are Duck Duck's 6 advantages. The goal is simple: **help everyone prepare for interviews in less time and crush the interviewer**!
+
+Imagine how great it would feel to encounter a question you've prepared for during the interview~
+
+![](https://pic.yupi.icu/1/%25E9%259D%25A2%25E8%25AF%2595%25E9%25B8%25AD%25E9%25B1%25BC%25E7%259A%25AE%25E8%25A1%25A8%25E6%2583%2585%25E5%258C%25852.png)
+
+Below introduces the advantages of Interview Duck, more recommended to watch the short video introduction: https://bilibili.com/video/BV14E421w7dr/
+
+## Advantages of Interview Duck
+
+### 1. Four-platform Synchronization, More Convenient Practice
+
+First, Interview Duck supports **web, mini-program, IDE plugin, and VSCode plugin**, with full-platform data synchronization, truly enabling **practice anytime, anywhere**, easily preparing for job interviews.
+
+Moreover, the interface is clean and very convenient to use, even during interviews you can secretly use it to search for questions...
+
+Especially the "Immersion Mode", which hides other elements on the page with one click, allowing you to fully immerse yourself in practicing, one question after another, unstoppable.
+
+![](https://pic.yupi.icu/1/1768276245137-fb1ff126-5d7c-465d-8faf-bc99f7006b46.png)
+
+The newly launched 【Specialized Practice】 and 【Test Yourself】 convert those high-frequency interview questions into multiple-choice questions, **specifically targeting those who seem to understand but fail when asked**.
+
+Especially those concepts that are easily blurred, which knowledge is truly mastered, and which needs further consolidation, testing will clarify everything. Practicing this way often can also **help you understand the interviewer's question design**, making you more confident during interviews.
+
+![](https://pic.yupi.icu/1/1768280270565-7e78a72d-2820-4b2d-bf99-8b2c9078b833.png)
+
+To help everyone happily slack off while practicing, we also launched Interview Duck IDE and VSCode plugins. The question bank and question list are displayed using native UI, **with sufficient stealth**! You can also customize shortcuts, open/close panels with one click, even if the second brother of the Calabash Brothers comes, he won't find out I'm slacking off practicing~
+
+Immersive stealth slack-off practice guide: [I made a programmer interview practice tool to help you crush the interviewer! Immersive slack-off practice](https://www.bilibili.com/video/BV11hx5euEbD/)
+
+![](https://pic.yupi.icu/1/1726815401056-2d38260a-7d3e-42ec-a91a-5456913dc7d7.png)
+
+### 2. Comprehensive Questions, High Hit Rate
+
+Interview Duck covers **almost all mainstream programming directions** interview questions, Java backend, frontend, AI, Python, C++, Go, DevOps, Testing, System Design, Scenario Questions, Company Question Banks, HR Interviews, etc., **300+** question banks, **10,000+** high-frequency interview questions, plus autumn recruitment hot questions, real enterprise interview experiences, practice routes, helping you 360° all-around crush the interviewer!
+
+We divided the question banks according to interview points and positions, take Java backend as an example, knowledge points cover:
+
+- Java Development: Java Basics, Mainstream Frameworks, Concurrent Programming, JVM
+- Backend Middleware: MySQL, Redis, Message Queues
+- Computer Basics: Computer Networks, Operating Systems, Design Patterns
+- More Extensions: SQL Writing, System Design, Online Problem Troubleshooting, Scenario Questions, Practical Project Question Banks
+
+![](https://pic.yupi.icu/1/1768280169156-b6774dea-c701-4f0c-9266-74515075eb99.png)
+
+Whether it's the must-test questions for various companies or unexpected niche questions, our question bank has it all, and **the interview hit rate is super high**!
+
+To better help everyone pass enterprise job applications, we also added **Campus Recruitment Hot Questions** and **Real Interview Experiences** sections. You can see Java, React, Go, Vue, frontend, backend, etc. autumn recruitment hot questions here, and you can also find real interview experiences from Meituan, Alibaba, ByteDance, JD.com, state-owned enterprises, banks here.
+
+You can practice according to your level and resume situation, grasp the interview focus in less time, and experience the thrill of being asked the original question.
+
+![](https://pic.yupi.icu/1/1768276126616-2d8b6228-4d1a-42a9-bc3d-30bf93b7393b.png)
+
+Don't waste time organizing questions and searching for solutions online anymore! **The time you waste, others can memorize many more questions.**
+
+### 3. Higher Quality Solutions
+
+We know that the efficiency of memorizing and practicing questions largely depends on the quality of the solutions, so we specially invited multiple **big company interviewers to create and optimize solutions**, ensuring the solutions are correct and easy to understand.
+
+Take "How to Design XX System" type scenario questions as an example, if you don't have similar experience, you'll be clueless. We first give **key points** for the question, directly hitting the interviewer's weak spots, then provide more **extended knowledge** based on practical experience, delivering a combo to the interviewer. For example:
+
+![](https://pic.yupi.icu/1/1768276824962-f8ecc421-0f5b-4e0d-b819-6a7c3767580e.png)
+
+Just this one question Duck Duck wrote over 3000 words, accompanied by images to aid understanding, ensuring it's easy to understand. This way, everyone isn't just memorizing questions to cope with interviews, but **truly learning**, comprehensively improving technical vision, development ability, and interview experience.
+
+Many of our solutions can be treated as technical articles and columns to learn from, so even if you're not urgently preparing for interviews now, you can understand high-frequency test questions, consolidate basic knowledge, clarify learning plans, and improve technical skills through Interview Duck.
+
+For example, can you answer these questions below?
+
+![](https://pic.yupi.icu/1/1768277075218-cfa8a973-ebdc-4209-960f-2c9c19a04881.png)
+
+### 4. More Frequent Updates
+
+We are now updating solutions at high speed every day while optimizing system functions. In the future, we will also follow interview trends, continuously update question banks and solutions, timely add new questions, new knowledge, new techniques from current enterprise interviews, keeping you always ahead, not wasting time on outdated questions and knowledge.
+
+Recently AI-related concepts are very hot🔥, Interview Duck also added `AI Large Model Principles and Applications Interview Question Bank`, many questions are collected from big company real interviews, keeping up with the times~ And it's continuously updated!
+
+![](https://pic.yupi.icu/1/1768277166472-c0ef52de-33b4-4c15-9a3f-8447ad60a5dd.png)
+
+## Invitation Rewards
+
+Invite friends to register and purchase Interview Duck permanent membership to earn commission rewards🧧, details see [Interview Duck Invitation Rewards (Earn Rewards)](https://yuyuanweb.yuque.com/org-wiki-yuyuanweb-zvq1bg/oue2nx/ik6d3mv2wapbx96w)
+
+Interview Duck website already supports one-click generation of your exclusive invitation link, invitation poster, come share and earn rewards!
+
+## Welcome to Experience
+
+Hope everyone can experience and give us more feedback, if you encounter new questions in interviews that you'd like us to add, Duck Duck will work overtime to answer.
+
+Visit https://mianshiya.com or search for Interview Duck mini-program on WeChat to use for free!
+
+![](https://pic.yupi.icu/1/1727242691135-17601986-9d1b-4d85-a031-457867491597.png)
+
+Currently all questions and question banks are free to view, but some solutions created by our big company interviewers are **members-only**, after all, original solutions and system development consume a lot of manpower.
+
+Just [Subscribe to Permanent Membership](https://yuyuanweb.yuque.com/org-wiki-yuyuanweb-zvq1bg/oue2nx/tz028epsok1207t4), and you can freely practice all Interview Duck questions and solutions, supported on both PC and mini-program, and you can also join member-exclusive communication groups to ask questions anytime.
+
+Simply calculate, if you prepare for interviews yourself, you need to search for questions => organize key points => search for solutions, and also judge the accuracy of the solutions, spending at least dozens of hours. Now using Interview Duck, directly practice high-frequency interview questions, and you can seek help and feedback if you have questions, how much time can you save? If you encounter original questions in interviews, pass the interview and get the offer, this investment is really a drop in the bucket. Moreover, our solutions are created with care, equivalent to learning multiple technical columns written by big company experts, with extremely high cost performance!
+
+Currently Interview Duck permanent membership **only costs 129**, will continue to increase in price as functions and content enrich, the official price is expected to be above 399, so buy early and learn early~ We will continuously update content and system functions, giving everyone the best practice experience, thank you everyone for investing, and welcome everyone to supervise Duck Duck's improvements. Since we've done it, we'll succeed or die trying!
+
+![](https://pic.yupi.icu/1/1768276211775-371348a9-fe0a-48ae-830c-0730a5fd6baf.png)
+
+## User Communication Group
+
+Good ideas, suggestions, bug feedback, needed functions or content, all welcome to join Interview Duck user communication group to feedback:
+
+![](https://pic.yupi.icu/1/1721464673815-349cc85e-201d-413e-bef9-0028edb8196a.png)

translations/en/Vibe Coding 零基础教程/40 编程学习/09 程序员工作技巧.md

@@ -0,0 +1,257 @@
+# Efficient Work Tips for Programmers
+
+> Boost productivity and tackle workplace challenges with ease
+
+Hello, I'm programmer Fish Skin.
+
+When it comes to programmers, many students who haven't graduated yet might think that a programmer's job is all about writing code all day. However, once you enter the company, you'll realize that writing code is just the most basic part of the job.
+
+To work efficiently and achieve growth and promotions quickly, there are many things and methods you need to pay attention to.
+
+In this article, I'll share some programmer work tips I've accumulated over my career. It should be a light read for everyone~
+
+💡 Note: The following methods may not apply to everyone and are merely suggestions.
+
+## 1. Work Methods
+
+### 1. Don't Rush Before Requirements Are Clear
+
+When I first joined the company, I had a fresh graduate mentality: my colleagues were all seniors, and I needed to complete the tasks they assigned to me as quickly as possible.
+
+Back then, I had an inexplicable confidence and thought some tasks were simple, so I just went ahead and did them.
+
+Once, I thought a task was straightforward and told my mentor I could finish it in two days. However, after modifying the code and delivering it to the product manager, I realized I had completely misunderstood his requirements. It took me a few more weeks to complete the task.
+
+Speaking of misunderstanding requirements, I recall a joke:
+
+> A wife calls her programmer husband: "On your way home, buy a pound of buns. If you see someone selling watermelons, buy one."
+>
+> That night, the programmer husband came home with one bun...
+>
+> The wife angrily asked, "Why did you only buy one bun?"
+>
+> The husband replied, "Because I saw someone selling watermelons."
+
+So, always remember: clarifying requirements is the first step in our work as programmers! This includes understanding the background, significance, and specific functional points of the requirements.
+
+If the product manager doesn't provide a requirement list or enough information, make sure they provide a clear requirement document to ensure your understanding and goals are aligned before designing and developing.
+
+Never accept one-sentence requirements, and never rely solely on verbal descriptions! Otherwise, if the product manager denies it later, you'll have no recourse.
+
+![Requirement Document](https://pic.yupi.icu/1/1696339052753-853d6116-984f-4f94-8bdf-9cf40c61109a.png)
+
+### 2. Don't Rush Development Before Upstream Is Confirmed
+
+This point is similar to the previous one. For us programmers, there may be many upstream dependencies from different positions or departments, such as the product manager who proposes requirements, the tester who verifies functionality, the developer who provides dependent interfaces, or the operations team that grants resource permissions.
+
+If implementing a requirement depends on some upstream factors, I personally don't recommend jumping straight into development (though you can start with design). In the workplace, there are always unexpected variables and risks.
+
+For example, a while ago, I needed to develop data table B based on data table A provided by another department. Initially, they gave me the structure of data table A, but it wasn't clear, and the table hadn't been created or populated with data. If it were my early days, I might have started coding based on that structure. But later, the structure of data table A changed several times, and the table name was altered multiple times! They apologized, but I just smiled: "No problem, go ahead and change it. I haven't started yet, so let's wait until the table is live."
+
+If it were the old me, I might have been frustrated, haha.
+
+![Mental Breakdown](https://pic.yupi.icu/1/1696339052793-e3154265-d287-48e8-851c-86c43a831b75.png)
+
+So this approach is quite useful and has saved me a lot of time.
+
+However, for urgent requirements, it's best to hold a meeting with all upstream stakeholders to confirm the plan first, then proceed with development and alignment.
+
+### 3. Learn to Reserve Time
+
+As mentioned earlier, when I first joined the company, I was quite confident (now I realize it was a bit arrogant). I always thought I could complete tasks quickly and believed that finishing tasks faster would earn me recognition from my boss.
+
+This led me to schedule tasks too tightly, often leaving me with unfinished bugs from one task while the deadline for the next task was approaching. Not only did this exhaust me physically and mentally, but it also made me look bad and disappointed others.
+
+After managing a project for a while, I realized that often when working on a new task, users would suddenly report bugs in historical features, forcing me to drop everything and fix them.
+
+So now, when working on tasks, I always reserve extra time to account for unforeseen issues. After all, as we all know, sometimes a single bug can take a whole day to debug...
+
+![Reserve Time](https://pic.yupi.icu/1/1696339052824-38062959-00d7-4c9c-a00f-3583376a4737.png)
+
+Even if I know I can complete a task in two days, I might give myself more time. If you finish early, it exceeds expectations; if you finish on time, it's normal; but if you miss the deadline due to bugs, others might think "you're not up to it."
+
+Is this some kind of psychological game?
+
+### 4. Learn Upward Management
+
+In the workplace, many people have strong technical skills but still don't gain the boss's favor or get promoted. Why?
+
+A major reason is the lack of **upward management** awareness.
+
+Upward management refers to the ability to interact positively with superiors in daily work, proactively propose solutions, solve problems, provide continuous feedback, and maintain good relationships with superiors.
+
+Here are some ways to practice upward management:
+
+1) Proactively Offer Solutions: When you encounter problems or difficulties, don't just present the problem to your superior; try to propose feasible solutions.
+
+2) Continuous Communication and Feedback: Within reasonable limits, regularly communicate openly with your superior, including expressing your ideas and plans, providing feedback on your work and achievements, and aligning with the team's goals.
+
+Don't assume that your "awesome" work will be recognized if your superior is unaware of it or if it doesn't align with the team's or their personal goals.
+
+3) Demonstrate Leadership: You should not only work under leadership but also make correct decisions without explicit guidance, embodying the "ownership mentality" in our company's culture.
+
+4) Accept Feedback: If your superior offers suggestions or criticism, don't take it as an attack but as an opportunity to improve. Respond positively to feedback, showing your willingness to learn and grow.
+
+## 2. Time Management Techniques
+
+1) Create a Clear Task List
+
+Organize your daily tasks by priority and check them off one by one to boost motivation.
+
+2) Time Slicing
+
+Divide your day into segments, focusing on one small task per segment to reduce the pressure of continuous high-intensity work.
+
+3) Break Down Complex Tasks
+
+Divide large tasks into smaller steps and tackle them gradually. This is especially useful for writing papers or handling large projects. When a task seems daunting, this approach is essential.
+
+4) Learn to Let Go
+
+Reject unimportant tasks and don't let minor issues disrupt your rhythm.
+
+5) Reduce Noise
+
+Limit phone usage and set your work environment to "Do Not Disturb." You're meant for big things—don't get lost in social media.
+
+6) Balance Work and Rest
+
+Rest is crucial. After a period of work or study, take a break and grab a drink.
+
+7) Utilize Fragmented Time
+
+If you're really busy, use commuting or other fragmented time to complete small tasks like replying to messages or reading articles.
+
+8) Batch Process Tasks
+
+Group similar tasks together to save switching time. I also advise our operations and sales teams to do this. If you check messages every minute, you won't have continuous time for other work.
+
+9) Countdown Method
+
+Set a strict time limit for tasks to encourage quick completion. If you've seen my tutorials, you know the classic "20-minute" rule serves this purpose.
+
+## 3. Task Management
+
+### 1. Don't Rely on Memory
+
+Never rely solely on memory. Sometimes, when I leave my office, several colleagues approach me with various tasks, and by the time I return, I've forgotten some. So, it's essential to have a task recording tool.
+
+What tools do you use to record tasks?
+
+I used TickTick before, a high-level memo app, but I stopped using it because it required opening a separate app, which wasn't convenient enough.
+
+### 2. Use WeChat for Recording
+
+Now, my most commonly used temporary recording tool is WeChat, which we use daily.
+
+In my work WeChat, the File Transfer Assistant is always pinned at the top. When I'm not at my computer and think of or receive work tasks, I send them to the File Transfer Assistant and mark them as unread. Every time I open WeChat, there's a noticeable red dot reminder.
+
+![File Transfer Assistant](https://pic.yupi.icu/1/image-20240804144855349.png)
+
+If I receive work messages that I can't handle immediately, I mark them as unread and pin the chat to remind myself to deal with them later. In the workplace, it's normal to encounter situations where messages are read but not replied to—perhaps the other person is temporarily unavailable or hasn't figured out how to respond.
+
+### 3. Use a Work Record Sheet
+
+Besides using WeChat for temporary work messages, a more systematic tool is needed to record daily tasks.
+
+I use Tencent Docs' online Excel sheet, which can be opened directly in WeCom or a browser. The online Excel sheet is now very flexible, allowing easy customization for recording information, grouping data, etc.
+
+For example, I group tasks by date, recording work items, notes, related documents, and progress. If a task isn't completed on a given day, I simply move it to the next day; if I'm worried about forgetting a task, I record it in the sheet in advance.
+
+Reviewing the work record sheet daily helps avoid missing tasks, better manage time, and allows for self-reflection by reviewing past records.
+
+Here's an example of my work record sheet:
+
+![Work Record Sheet](https://pic.yupi.icu/1/image-20240804143618230.png)
+
+Since leading a team, I've also developed a habit of planning the upcoming week's personal and team tasks in advance each weekend. This helps prepare better, control progress, and keep work orderly.
+
+### 4. Review Red Dots Before Bed
+
+Due to the high volume of work messages I receive daily, I can't respond to everything quickly—it would prevent me from focusing on tasks.
+
+However, every night before bed, I review the "red dots" in WeChat/WeCom to ensure no messages are missed. This might be why my sleep schedule is irregular.
+
+![Review Red Dots](https://pic.yupi.icu/1/image-20240804144027111.png)
+
+## 4. Daily Record Summaries
+
+Friends often complain to me that they've been in the company for a long time but feel they haven't grown much and don't know what to say during reports.
+
+If you feel the same, you likely lack the habit of daily summaries.
+
+I used to have a problem: when taking notes during online courses, I'd sometimes procrastinate, thinking I'd watch a few more episodes before recording. But as the number of unwatched episodes piled up, the pressure to take notes increased, and eventually, I gave up.
+
+Does anyone else relate?
+
+The same goes for work summaries. It's best to record your daily work, completed tasks, and milestones immediately, forming a habit of daily recording and regularly organizing, summarizing, and reflecting. Don't let tasks pile up until you're too lazy to record them, only to forget what you've done by the time you need to write a summary.
+
+I've maintained this habit for three years, and it has greatly helped me. It constantly reminds me to reflect on my work rhythm and state, motivating me to try and break through.
+
+## 5. Efficiency Improvement Principles
+
+1) Complete Defined Tasks First
+
+When unsure what to do, start with clear tasks. For example, if I lack inspiration for writing, I don't force it but move on to other tasks to manage overall progress.
+
+2) Completion Over Perfection
+
+Don't strive for perfection; completion is more important. Agile development and continuous iteration embody this principle. (Of course, if imperfect completion is meaningless to you, proceed at your own pace.)
+
+3) Use Existing Code When Possible
+
+Unless you're learning.
+
+4) Plan Before Starting a Project
+
+Conduct thorough research and design. This not only facilitates future program expansion but also avoids unnecessary rework.
+
+5) Break Down Large Goals
+
+Plan well, mark key milestones, and don't procrastinate because the goal seems distant or become complacent due to optimism.
+
+6) Develop Good Habits
+
+Find your golden hours for work. (Mine happen to be in the early morning...)
+
+7) Record More If You Have Poor Memory
+
+Even if you can't remember, use documents or bookmarking software as your second brain.
+
+8) Build Your Tool Library
+
+Use search software to access tools on demand.
+
+9) Communicate with Team Members
+
+Also follow some UP hosts to broaden knowledge channels and learn more tools and methods. Just hearing about something can save hours of searching when needed.
+
+10) Find Your Flow State
+
+For example, wear headphones, chew gum, drink coffee, or take deep breaths.
+
+11) Experience Speeds Up Repetition
+
+Therefore, take on more projects, accumulate experience, and practice makes perfect.
+
+## Final Thoughts
+
+Some might think: planning everything and confining life to Excel sheets is exhausting!
+
+I say: Yes, it is exhausting. But after forming the habit of recording and planning, I no longer feel lost. I have clear goals, know what to do next, and don't worry about missing tasks. Plus, seeing my work record sheet fully completed gives me a sense of accomplishment!
+
+That's all. Though abstract, I believe you'll find it enlightening and insightful.
+
+In summary, I hope these tips help you achieve promotions and raises soon~
+
+## Recommended Resources
+
+1) Fish Skin AI Navigation Site: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Search Guides, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheat Sheet: [Internship/Campus/Job Hunting High-Frequency Topics, Enterprise Exam Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Builder: [Professional Templates, Rich Examples, Direct to Interviews](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus/Job Hunting Interviews to Secure Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/40 编程学习/10 程序员成长大法.md

@@ -0,0 +1,181 @@
+# Six Methods for Programmers to Grow Rapidly
+
+> How to grow quickly at work and break through career bottlenecks
+
+Hello, I'm Yupi the Programmer.
+
+Another year has passed, and many of you have just entered the workplace, inevitably feeling anxious and confused about future growth.
+
+Today, I want to discuss a very realistic issue: If you join an outsourcing company, or if your job itself doesn't bring you growth, how should you break through?
+
+Run, run fast!
+
+![](https://pic.yupi.icu/1/image-20250815104851768.png)
+
+Just kidding. Since your job doesn't bring you growth, then learn on your own. Simply treat your job as a transaction of money and labor.
+
+This issue is actually quite broad. Considering that many of you might not enjoy listening to empty theories, I'll directly share my own practices and what I've observed from some rapidly growing experts.
+
+> I've actually discussed this issue during a live stream. You can watch the video version here: https://bilibili.com/video/BV1DC4y177sB
+
+## 1. Read a Few Articles Every Day
+
+Yes, read 2 to 3 articles daily. Not too many, just enough to build a habit.
+
+But be selective in what you read. Don't read just anything.
+
+What kind of articles? First, **industry trend** articles, which keep you up-to-date with the industry and allow you to discuss new topics with colleagues and interviewers. For example, if AI becomes popular, first understand whether AI will impact you. If it does, then learn about AI-related tools.
+
+Next, **technical articles**, but always focus on areas related to your work. If you read 2 to 3 articles daily, how many is that in a year? Nearly 1,000 articles! Convert that into tutorials, and it could be dozens of tutorials. This will significantly boost your growth, and it's a very manageable task.
+
+I've been doing this consistently. Even now that I run a company, I read even more articles because I need to understand not just industry trends and technology, but also products, project management, and even recruitment.
+
+Where should you read these articles? The most recommended are **tech blogs from major companies**. I follow many tech teams, although their content might be quite advanced. There are also tech news, experience sharing, programming trends, and technical insights. My own account shares a bit of everything.
+
+This year, we've also created a completely free AI discussion group. Feel free to drop by anytime: https://ai.codefather.cn
+
+![](https://pic.yupi.icu/1/image-20260109121412266-20260113154640560.png)
+
+## 2. Continuously Learn New Technologies
+
+If you can achieve the above, congratulations! You can now advance by increasing your daily learning time because some knowledge shouldn't be learned in fragments.
+
+Try dedicating less than an hour daily to watch 2 to 3 tutorial episodes. Stick with it for a month, and you'll complete a course. If you can do this for 6 months in a year, you won't be left behind.
+
+Here's an important point: **Being laid off doesn't mean being eliminated**. If you're laid off, it's not necessarily your fault. It could be due to poor company management or unethical practices. Don't let uncontrollable factors shake your confidence.
+
+## 3. Review and Summarize
+
+This is something I've always done, and it's quite simple:
+
+Step 1: Record your daily work.
+
+Fixed a bug today? Write it down—it takes less than a minute. Completed a feature? Document it, attach the file—it's that simple. I used to record this before leaving work each day.
+
+Step 2: Monthly record of key tasks, completed work, and learning progress.
+
+When I first started interning, I recorded daily. I didn't just note work content but also insights and gains. For example, after discussions with mentors, I had many thoughts, all of which I recorded.
+
+Step 3: Semi-annual or milestone reviews.
+
+These reviews are more comprehensive, documenting the experience, process, results, and pros and cons. After completing this, you won't repeat the same mistakes. Many companies require semi-annual or annual performance reviews. If you've already documented your progress, writing these reviews becomes a simple copy-paste task.
+
+## 4. Organize Your Arsenal
+
+What do you think is the biggest difference between someone with 3 years of experience and someone with 1 year?
+
+Experience!
+
+You can't say that someone with 3 years of experience has the same accumulated content as someone with 1 year. Even if the remaining 2 years were spent on CRUD, they should have become a CRUD master.
+
+So why do some people with 3 years of experience still seem like they have only 1 year?
+
+Because they might have worked for 3 years, but by the third year, they've forgotten everything from the first year. The system designs they worked on, the technologies they encountered—all forgotten.
+
+In fact, I don't even remember the code I wrote a month ago.
+
+![Forgotten Code](https://pic.yupi.icu/1/image-20250815104740029.png)
+
+**Accumulating experience is crucial for determining how far and how steadily you can progress in your career.**
+
+How do you accumulate it?
+
+### 1. Build Your Own Bug Library
+
+Document the issues you've resolved. These can become valuable talking points during interviews.
+
+### 2. Build Your Own Experience Library
+
+Record your work tips and pitfalls, not just in programming but also in career experiences. For example, I've learned:
+
+- Don't fully commit yourself to the company.
+- Don't reveal all your cards.
+- Don't let your boss think you've only got this much.
+- You can be friends with colleagues, but maintain boundaries.
+
+Some of these insights might not be universally applicable, but they are part of your personal growth.
+
+### 3. Organize Your Knowledge Points
+
+Record and organize all the knowledge points you've learned in fragmented form.
+
+What are fragments?
+
+Take the project knowledge fragments I've dissected for Programming Navigation as an example. Knowledge fragments are small, reusable pieces of knowledge that can be applied to any project.
+
+For example, how to use the Ant Design Pro framework is a knowledge fragment. How to initialize a Java project is a simple knowledge fragment.
+
+Why do I recommend organizing fragments?
+
+First, it's simple. You just need to write down a small piece of knowledge, even if it takes only 5 minutes. This removes the burden of feeling like you need to write a lengthy article, making it easier to build a habit.
+
+I have a quirky habit of "verbalizing" my thoughts. When I want to record something, I just pull out my phone and start talking, using voice-to-text to quickly jot it down. Some of my articles are actually transcribed from my ramblings. Those who've watched my live streams know that I can talk endlessly on any given topic.
+
+![Verbalizing](https://pic.yupi.icu/1/image-20250815104416663.png)
+
+Second, why break it into fragments? Because each fragment is reusable. When you start your own project, just open your list of knowledge fragments and see what you can apply. For example, can you add global permission management to this project? Can you add caching? If yes, just refer to the specific knowledge fragment to see how you did it before.
+
+### 4. Accumulate Your Tool Library
+
+What do you use to take notes? Write documents? Create mind maps?
+
+These are all things you can organize.
+
+For example, I often discover new tools while learning online. If I don't accumulate them, I might forget them when I actually need to use them.
+
+Ideally, when you switch to a new computer, you should be able to quickly install all your commonly used tools, maximizing the utility of your tool library.
+
+## 5. Share
+
+This is truly my own experience, as you can see.
+
+**Note: Sharing doesn't mean becoming a content creator!** Content creation might come later. When you've shared enough content, becoming a content creator will feel natural, not forced.
+
+How to do it?
+
+Remember the suggestions I mentioned earlier? By now, you probably have a lot of your own valuable content to share, such as:
+
+1. Share your reviews and experiences.
+2. Share your arsenal.
+3. Share the knowledge points you've learned.
+4. Help others by answering their questions.
+
+If you do these four things consistently, even if you don't intend to become a content creator, you'll inevitably gain some followers and attention.
+
+When I first started creating content, I shared nothing but interview questions. Why? Because I was job hunting at the time, and I was constantly reviewing these questions. Sharing them was just a byproduct of my own preparation, helping me reinforce my knowledge.
+
+You'll notice that the growth methods I've mentioned follow a natural sequence—things you can do at work that will bring you growth. First, learn technology, continuously accumulate knowledge, then review and summarize, and finally, share what you've learned.
+
+## 6. Learn to Break Down Goals
+
+While doing the above, consistently practice **breaking down goals**.
+
+When you realize that a big task seems daunting, break it down into smaller, more manageable tasks. Split a large goal into smaller, more certain, and simpler tasks that you can tackle even in fragmented time.
+
+For example, if you want to pass the English CET-4, break it down into daily tasks like memorizing 10 words, reviewing 50 words weekly, and reviewing 200 words monthly.
+
+Sometimes, the reason we don't start is that the task seems too difficult. We worry that we can't complete it, or that work will get in the way. **Uncertainty often leads to inaction.**
+
+Therefore, it's crucial to learn how to break down work and goals into clear, step-by-step plans. Even if you take a 7-day break, you can pick up where you left off and continue progressing.
+
+If a task seems too hard, start with something simpler. If a small plan still feels daunting, break it down further. If watching a single lesson seems difficult, break it into daily 10-minute segments, completing a 40-minute lesson in 4 days. This ensures you make progress without feeling overwhelmed.
+
+**The best time to plant a tree was 10 years ago. The second best time is now.**
+
+It's never too late to start, as many are starting even later than you. Start tomorrow, stick with it for 7 days, then try for 21 days. You'll definitely notice your progress.
+
+---
+
+That's all for my sharing on how programmers can improve themselves after starting work. I believe these methods aren't limited to programmers—they're applicable to any job. I hope this helps!
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheat Sheet: [Internship/Campus Recruitment/Social Recruitment High-Frequency Questions, Enterprise Exam Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Builder: [Professional Templates, Rich Examples, Direct to Interviews](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/40 编程学习/11 编程工具大全.md

@@ -0,0 +1,132 @@
+# Essential Software Tools for Programmers
+
+> A collection of 3000+ productivity tools for programmers, ready to use with one click
+
+Hello, I'm programmer Yupi.
+
+In the [Programming Navigation](https://www.codefather.cn) community, I often see questions like: What tools should I use to draw flowcharts or architecture diagrams? Which code editor is recommended for beginners? Which AI tools are actually useful?
+
+Getting stuck at the "finding tools" stage in daily work can be exhausting.
+
+That's why we launched the [Programming Resource Tool Collection], a one-stop hub for all types of essential tools throughout a programmer's workflow. Search and use instantly to significantly improve work efficiency!
+
+👉 [Get 3000+ Programmer Productivity Tools Now codefather.cn/tool](https://codefather.cn/tool)
+
+![Programming Tools Collection](https://pic.yupi.icu/1/1768143253671-cf32bba6-5f94-47af-a712-775994f46e7e.png)
+
+## 1. Development Tools
+
+A collection of 600+ commonly used programming tools and resources, covering mainstream development environments like IDEA and VS Code, framework documentation for React and Vue, code hosting platforms like GitHub and Gitee, and open-source mirrors from Tsinghua and Huawei sources, greatly improving development efficiency.
+
+![Development Tools](https://pic.yupi.icu/1/1768143193782-ade60722-3e0a-4dcf-a593-6a0b7ff207ff.png)
+
+### Top 5 Recommended Tools
+
+🏅 Top 1: Git  
+Distributed version control system, the core tool for code version management and foundation for team collaboration development, making it the most essential tool for programmers.
+
+🥈 Top 2: Visual Studio Code  
+Lightweight cross-platform code editor with a powerful plugin ecosystem supporting multiple programming languages, remaining the hottest editor for programmers in 2025.
+
+🥉 Top 3: Cursor / Claude Code  
+AI-powered code editors representing the future of programming.
+
+Top 4: JetBrains IDE Series  
+Professional integrated development environments including IntelliJ IDEA, PyCharm, WebStorm, etc., featuring intelligent code analysis capabilities.
+
+Top 5: Navicat / DataGrip  
+Database management tools for visual database operations, supporting MySQL, PostgreSQL, MongoDB, etc.
+
+## 2. AI Tools
+
+Curated collection of 1600+ AI tools, including AI editors like Cursor and Trae, AI image generation tools like Dream and Keling AI, and large model platforms like ChatGPT, Gemini, and DeepSeek, empowering work with AI.
+
+![AI Tools](https://pic.yupi.icu/1/1768143200966-7774d9fb-7192-4c54-ba97-afdd93043624.png)
+
+### Recommended AI Tools
+
+AI Programming Tools: Cursor, GitHub Copilot, Codeium, Windsurf  
+AI Chat Tools: ChatGPT, Claude, Tongyi Qianwen, DeepSeek, Kimi  
+AI Drawing Tools: Midjourney, Stable Diffusion, Dream, Keling AI  
+AI Writing Tools: Notion AI, Mita Writing Cat, Volcano Writing  
+AI Video Tools: Runway, Pika, CapCut  
+
+## 3. Design Tools
+
+Comprehensive design tool collection from 0 to 1, including prototyping tools like Axure and Draw.io, graphic design tools like Canva and Gaoding Design, and color tools like Coolors and Color Hunt, covering the entire product development workflow.
+
+![Design Tools](https://pic.yupi.icu/1/1768143231186-58d8b53c-e381-4299-927e-d67d6b123cfb.png)
+
+### Recommended Design Tools
+
+Prototyping: Axure, MockingBot, Jishi Design  
+Drawing Tools: Draw.io, ProcessOn, Edraw Max  
+Graphic Design: Canva, Gaoding Design, Chuangkit  
+Color Tools: Coolors, Color Hunt, Chinese Colors  
+
+## 4. Testing and Project Management Tools
+
+Selected testing and project management tools including automation testing with Selenium, API debugging with Postman and Apifox, and mainstream project management platforms like ZenTao and Jira, enhancing team collaboration and delivery efficiency.
+
+![Testing Tools](https://pic.yupi.icu/1/1768143211764-bb836a41-79be-45d1-929c-b1a35bad9e36.png)
+
+### Recommended Tools
+
+API Testing: Postman, Apifox, JMeter  
+Automation Testing: Selenium, Cypress, Playwright  
+Project Management: ZenTao, Jira, Trello, Feishu Projects  
+Team Collaboration: WeCom, Feishu, DingTalk  
+
+## 5. Operations and Deployment
+
+Integration of mainstream cloud platforms and operations tools, covering container technologies like Docker, web servers like Nginx, edge deployment platforms like Vercel and Cloudflare, and cloud services like Alibaba Cloud, Tencent Cloud, and Huawei Cloud.
+
+![Operations Tools](https://pic.yupi.icu/1/1768143207630-9254a72f-cd90-43bd-864f-fa252a6f1361.png)
+
+### Recommended Tools
+
+**Container Technologies**: Docker Desktop, Kubernetes  
+**Web Servers**: Nginx, Apache, Caddy  
+**Deployment Platforms**: Vercel, Railway, Sealos, Cloudflare Pages  
+**Cloud Services**: Alibaba Cloud, Tencent Cloud, Huawei Cloud, AWS  
+**Terminal Tools**: Xshell, FinalShell, iTerm2, Windows Terminal  
+
+## 6. Productivity Tools
+
+Beyond development-related tools, here are some general productivity tools that Yupi has personally used.
+
+- Postman / Apifox / JMeter: API debugging, automation testing, documentation generation; JMeter provides professional stress testing and performance analysis  
+- VMware Workstation / VirtualBox: Virtual machine software essential for multi-environment development and testing  
+- Docker Desktop: Container technology simplifying application packaging, distribution, and execution  
+- Xshell / FinalShell: SSH terminal tools for remote server connection management  
+- Mac iTerm2 / Windows Terminal: Terminal tools for better terminal experience  
+- Homebrew (Mac) / Chocolatey (Windows): Package managers for quick software installation  
+- WinSCP / FileZilla: File transfer tools, FTP/SFTP clients  
+- Fiddler / Charles / Wireshark: Packet capture debugging tools + network protocol analysis  
+- Notion / Yuque: Documentation and knowledge management platforms for team collaboration  
+- Typora / PicGo / mdnice: Markdown editors, image hosting management tools, and WeChat public account formatting tools  
+- WeCom / Feishu: Team communication and collaboration platforms  
+- uTools / Alfred: Efficiency launchers for quick application and tool access  
+- Snipaste: Screenshot and annotation tool supporting pinned images  
+- Everything: File search tool for instant file location  
+- Clipboard Assistant: Cross-platform clipboard management tool with multi-device sync (https://jianqiezhushou.com)  
+
+## How to Get These Tools?
+
+All tools can be found in the Tools section of Programming Navigation, categorized by usage scenarios for easy discovery.
+
+👉 [Get 3000+ Programmer Productivity Tools Now codefather.cn/tool](https://codefather.cn/tool)
+
+If you have any recommended hidden gem tools, feel free to submit them. We'll review them regularly and share them with everyone to collectively build this toolbox.
+
+![Submit Tools](https://pic.yupi.icu/1/1768143271059-9858718c-b0de-45f3-84c2-1f3d1319d127.png)
+
+Good tools should be discovered and used early.
+
+## Recommended Resources
+
+1) Yupi AI Navigation: [Comprehensive AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)  
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guides, Q&A](https://www.codefather.cn)  
+3) Programmer Interview Cheatsheets: [Internship/Campus/Social Recruitment High-Frequency Topics, Enterprise Question Analysis](https://www.mianshiya.com)  
+4) Programmer Resume Builder: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)  
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus/Social Recruitment Interviews to Get Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/40 编程学习/AI 时代程序员必须做的 20 件事.md

@@ -0,0 +1,138 @@
+# 20 Essential Things Programmers Must Do in the AI Era
+
+Hello, I'm programmer Yupi.
+
+It's 2026, and AI can now write 85% of code, enabling one person to do the work of an entire team. The role of programmers is being redefined: from code writers to AI commanders, from manual implementation to intent-driven development.
+
+You might wonder:
+- What's the biggest risk for programmers in the AI era?
+- Which skills will make me more competitive in the workplace?
+- How should I adjust my learning and working methods?
+
+Don't worry. In this article, I'll share 20 essential things programmers must do in the AI era. Master more than half of these, and you'll stand firm in this changing landscape.
+
+## 1. Mindset Shift
+
+In the AI era, a programmer's core competency is no longer coding speed or quality, but the ability to clearly articulate ideas.
+
+1. Think things through and express them clearly to accurately convey your requirements.
+
+Clear requirements remain the first step in a programmer's work. No matter how powerful AI becomes, it can't replace human communication. More importantly, you need to learn how to clearly explain what you want to AI using precise language.
+
+2. AI-generated code may contain flaws. Pay extra attention to edge cases and coding standards, and conduct more testing.
+
+You must establish strict code quality check processes: automated testing, static analysis, security scanning, and manual reviews—none can be skipped.
+
+3. Plan and track progress diligently at work, communicate and report promptly, and never let issues escalate into incidents.
+
+When letting AI do the work, constantly check its output to ensure every automatically generated feature is traceable. The speed of risk control must exceed coding speed.
+
+4. Continuously analyze and optimize workflows by introducing tools and methods to enhance productivity.
+
+The most valuable skill in the AI era is knowing when to use which tool. Integrate AI into your daily work to double your efficiency.
+
+## 2. Technical Mastery
+
+AI can write code for you, but it can't make decisions. Your technical knowledge determines whether you can judge if AI's code is correct or optimal.
+
+5. Master the technologies you use at work, understanding their principles, pros/cons, and applicable scenarios.
+
+Without technical understanding, you'll blindly trust AI—agreeing with whatever it says. Only by truly understanding technology can you select the best solution from AI's proposals.
+
+6. Actively expand your skill set—frontend developers should learn backend, and vice versa.
+
+Many companies now promote full-stack development, and AI makes cross-domain learning easier. Don't limit yourself—those who can handle everything independently are what companies truly need.
+
+7. Deep dive into at least one popular open-source project, mastering the technology at the source code level.
+
+AI struggles to comprehend the overall design of large projects. When learning to read source code, you're also learning "how to write code that AI can better understand."
+
+8. Develop a complete project from 0 to 1 by yourself.
+
+Go through every stage: requirements, design, development, testing, and deployment. Only those who've completed full projects truly understand where AI helps and where it falls short.
+
+## 3. AI Practice
+
+Using AI tools is just the beginning—true experts are those who can command and manage AI.
+
+9. Master at least one AI programming tool like Cursor, Claude Code, or GitHub Copilot.
+
+Programmers who can't use AI tools are like those who can't use search engines—their efficiency will lag significantly.
+
+10. Master Vibe Coding techniques.
+
+Simply put, use natural language to tell AI what you want, letting AI write the code. Focus less on syntax details and more on the product's overall feel and direction.
+
+11. Learn to write high-quality prompts for more precise AI-generated code.
+
+How to communicate with AI is a required course in the AI era. For example, breaking complex tasks into smaller steps for AI yields better results.
+
+12. Learn to provide sufficient context to AI.
+
+The quality of AI-generated code largely depends on the information you provide. Learn to organize project documentation and code comments to help AI better understand your project.
+
+13. Learn AI application development, like LangChain, Spring AI, or Agent development.
+
+Future software will almost universally incorporate AI features. Those skilled in AI application development hold tickets to the future.
+
+14. Learn to make multiple AIs collaborate on complex tasks.
+
+Future programmers will increasingly resemble project managers—breaking large tasks into smaller ones, assigning them to different AIs, and integrating the results.
+
+## 4. Continuous Learning
+
+With accelerating technological changes, only continuous learning and accumulation can prevent obsolescence.
+
+15. Read 2-3 technical articles daily—nearly 1,000 articles yearly, equivalent to dozens of tutorials.
+
+Many claim they're too busy to learn, but just 10+ minutes daily for fragmented learning suffices. Focus on new technologies like AI models, AI Agents, and RAG.
+
+16. Continuously explore new technologies and tools to improve your knowledge system.
+
+Technology evolves too fast—what's hot this year may be outdated next. Stay updated with AI news, maintain curiosity, and don't fall behind.
+
+💡 Get the latest AI news and learning resources at [Yupi's AI Navigation Site](https://ai.codefather.cn/).
+
+![](https://pic.yupi.icu/1/image-20260109121412266.png)
+
+17. Consistently review and summarize—record daily work, organize monthly gains, and conduct major reviews every six months.
+
+Unsummarized experience isn't experience—it's just history. Document pitfalls and knowledge for future reuse.
+
+18. Build your personal resource library—bug logs, experience banks, knowledge notes, and tool collections.
+
+The difference between 1 and 3 years of experience lies in continuous accumulation. These resources form the foundation for judging AI's code and solving tough problems. Use knowledge base software like Yuque or Notion for organization.
+
+19. Maintain consistent technical content output—1-2 original articles or notes weekly.
+
+Output isn't mere knowledge transfer—share practical experiences AI can't learn, like communicating with different stakeholders, applying AI to legacy projects, or balancing development costs and benefits. Output also drives continuous knowledge input.
+
+20. Stay open-minded, embrace change, and treat AI as a teammate, not a rival.
+
+Rather than fearing AI replacement, become among the best at using AI. The future belongs to those who can collaborate seamlessly with AI.
+
+## Final Thoughts
+
+These 20 points boil down to two cores:
+1. **Master AI**: Make AI your efficiency multiplier, not your replacement
+2. **Build real skills**: Technical depth and practical experience form your foundation for judging AI's output
+
+Programmers who only do CRUD, refuse to learn, or resist change will inevitably be phased out. But those who embrace AI, continuously evolve, and possess core competitiveness will enter their career golden age.
+
+**You don't need to be better than AI—you just need to be better than those who can't use AI.**
+
+The best time to plant a tree was 10 years ago; the second-best time is now. Start today by choosing 3 things to practice consistently—you'll see changes within a month.
+
+Let's grow together!
+
+## Recommended Resources
+
+1) Yupi's AI Navigation: [Comprehensive AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Community: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guides, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheatsheet: [Internship/Campus/Social Recruitment FAQs, Company Interview Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Builder: [Professional Templates, Rich Examples, Direct Interview Access](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus/Social Recruitment Interviews](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/40 编程学习/MCP 服务开发.md

@@ -0,0 +1,254 @@
+# MCP Service Development Step-by-Step Guide
+
+> Developing MCP Services from Scratch
+
+Hello, I'm programmer Yupi.
+
+There's a hot AI-related concept called MCP, short for Model Context Protocol. This is an open standard introduced by Anthropic, aiming to provide a unified and standardized interface for large language models and AI assistants, enabling AI to easily operate external tools and accomplish more complex tasks.
+
+This article will guide you through MCP, explain its core concepts, and take the example of the interview question search MCP service we developed for our product [Interview Duck](https://www.mianshiya.com/) to demonstrate the practical development of MCP server and client!
+
+Open Source Link: https://github.com/yuyuanweb/mcp-mianshiya-server
+
+![MCP Service](https://pic.yupi.icu/1/1744008993525-16f07f5b-e3b4-4f1a-97dd-ea886c8d945d.png)
+
+## 1. Why is MCP So Important?
+
+Previously, if we wanted AI to process our data, we had to rely on pre-trained data or upload data, which was both cumbersome and inefficient. Moreover, even powerful AI models faced data isolation issues and couldn't directly access new data.
+
+Now, MCP solves this problem by breaking the model's dependency on static knowledge bases, giving it stronger dynamic interaction capabilities. It can call search engines, access local files, connect to API services, and even directly operate third-party libraries, just like humans.
+
+More importantly, as long as everyone follows the MCP protocol, AI can seamlessly connect local data, internet resources, development tools, productivity software, and even the entire community ecosystem, achieving true "Internet of Everything." This will significantly enhance AI's collaboration and working capabilities, with immeasurable value.
+
+![MCP Architecture](https://pic.yupi.icu/1/1744006127873-09bedb4a-5c7c-4cd0-9c4d-3620f319eac7.png)
+
+## 2. MCP Overall Architecture
+
+The core of MCP is the "client-server" architecture, where the MCP client host can connect to multiple servers. The client host refers to programs that wish to access data via MCP, such as Claude Desktop, IDE, or AI tools.
+
+![MCP Architecture Diagram](https://pic.yupi.icu/1/1742979138403-f9f03e19-3537-461e-95d5-6f8a9a413c3a.jpeg)
+
+## 3. MCP Development
+
+MCP usage is divided into two modes: STDIO mode (local execution) and SSE mode (remote service).
+
+### MCP Server (Based on stdio Standard Stream)
+
+The stdio-based implementation is the most common MCP client solution, communicating with the MCP server via standard input/output streams. It is particularly suitable for locally deployed MCP servers.
+
+**1. Introduce Dependency**
+
+```xml
+<dependency>
+  <groupId>org.springframework.ai</groupId>
+  <artifactId>spring-ai-mcp-server-spring-boot-starter</artifactId>
+  <version>1.0.0-M6</version>
+</dependency>
+```
+
+**2. Configure MCP Server**
+
+```yaml
+spring:
+  application:
+    name: mcp-server
+  main:
+    web-application-type: none # Must disable web application type
+    banner-mode: off # Disable banner
+  ai:
+    mcp:
+      server:
+        stdio: true # Enable stdio mode
+        name: mcp-server # Server name
+        version: 0.0.1 # Server version
+```
+
+**3. Implement MCP Tool**
+
+`@Tool` is the core annotation in the Spring AI MCP framework for quickly exposing business capabilities as AI tools. Below is an example code snippet:
+
+```java
+/**
+ * Search Interview Duck interview questions based on search term
+ */
+@Tool(description = "Search Interview Duck interview questions based on search term")
+public String callMianshiya(String searchText) {
+    // Execute logic to search questions from the Interview Duck database
+    System.out.println("User wants to search: " + searchText);
+}
+```
+
+**4. Register MCP Tool**
+
+```java
+@Bean
+public ToolCallbackProvider serverTools(MianshiyaService mianshiyaService) {
+    return MethodToolCallbackProvider.builder()
+             .toolObjects(mianshiyaService)
+             .build();
+}
+```
+
+**5. Run Server**
+
+```bash
+mvn clean package -DskipTests
+```
+
+### MCP Client (Based on stdio Standard Stream)
+
+**1. Introduce Dependency**
+
+```xml
+<dependency>
+  <groupId>org.springframework.ai</groupId>
+  <artifactId>spring-ai-mcp-client-spring-boot-starter</artifactId>
+  <version>1.0.0-M6</version>
+</dependency>
+```
+
+**2. Configure MCP Server**
+
+```yaml
+spring:
+  ai:
+    mcp:
+      client:
+        stdio:
+          servers-configuration: classpath:/mcp-servers-config.json
+```
+
+The configuration for `mcp-servers-config.json` is as follows:
+
+```json
+{
+  "mcpServers": {
+    "mianshiyaServer": {
+      "command": "java",
+      "args": [
+        "-Dspring.ai.mcp.server.stdio=true",
+        "-Dspring.main.web-application-type=none",
+        "-Dlogging.pattern.console=",
+        "-jar",
+        "/yourPath/mcp-server-0.0.1-SNAPSHOT.jar"
+      ]
+    }
+  }
+}
+```
+
+**3. Initialize Chat Client**
+
+```java
+@Bean
+public ChatClient initChatClient(ChatClient.Builder chatClientBuilder,
+                                 ToolCallbackProvider mcpTools) {
+    return chatClientBuilder.defaultTools(mcpTools).build();
+}
+```
+
+**4. Interface Call**
+
+```java
+@PostMapping(value = "/ai/answer")
+public String generate(@RequestBody AskRequest request) {
+    return chatClient.prompt()
+            .user(request.getContent())
+            .call()
+            .content();
+}
+```
+
+### MCP Server (Based on SSE)
+
+In addition to the stdio-based implementation, Spring AI also provides an MCP solution based on Server-Sent Events (SSE). Compared to the stdio approach, SSE is more suitable for remotely deployed MCP servers.
+
+**1. Introduce Dependency**
+
+```xml
+<dependency>
+    <groupId>org.springframework.ai</groupId>
+    <artifactId>spring-ai-mcp-server-webflux-spring-boot-starter</artifactId>
+    <version>1.0.0-M6</version>
+</dependency>
+```
+
+**2. Configure MCP Server**
+
+```yaml
+server:
+  port: 8090
+spring:
+  ai:
+    mcp:
+      server:
+        name: mcp-server
+        version: 0.0.1
+```
+
+**3. Run Server**
+
+```bash
+mvn clean package -DskipTests
+java -jar target/mcp-server-0.0.1-SNAPSHOT.jar
+```
+
+## 4. Software Using MCP
+
+In addition to programmatically calling MCP services, the MCP server also supports any intelligent assistant that supports the MCP protocol, such as Claude, Cursor, and Cherry Studio, which can be quickly integrated.
+
+Taking Cherry Studio as an example:
+
+1. Open Cherry Studio's "Settings," click on "MCP Server"
+
+![Cherry Studio Settings](https://pic.yupi.icu/1/1743063238632-2156707f-cfa4-4493-bf3e-68279f3972b9.png)
+
+2. Click "Edit JSON" to add MCP configuration to the configuration file
+
+3. In "Settings => Model Services," select a model and enable the tool function call feature
+
+4. Enter the chat page and check the option to enable MCP service below the input box
+
+![Enable MCP](https://pic.yupi.icu/1/1743063248363-b3a09c97-1bb9-4f97-ab0a-2cee5a641c83.png)
+
+Configuration complete, try searching for interview questions, the effect is great!
+
+![Search Effect](https://pic.yupi.icu/1/1743063251268-145a5d00-4495-49e8-91db-f5536efca436.png)
+
+It even parses interview experiences, returning multiple links to interview questions and answers!
+
+![Interview Experience Parsing](https://pic.yupi.icu/1/1743143537320-1fca3955-3128-42a6-bd32-0cace3bab2ab.png)
+
+Of course, this feature has also been implemented by [Interview Duck Official](https://www.mianshiya.com/) to help everyone review interviews:
+
+![Interview Duck Interview Experience Parsing](https://pic.yupi.icu/1/1744008304237-fdfb2b99-9038-43de-94ed-ca0760afdf40.png)
+
+## 5. Upload MCP Service
+
+Just like developing an app, we can also share the completed MCP service on third-party MCP service platforms. For example, MCP.so can be understood as an app store for MCP services.
+
+![MCP.so](https://pic.yupi.icu/1/1744008425870-c5b7958e-98cc-4a14-a4af-cba3af01fcde.png)
+
+Directly click the submit button on the left side of the avatar, then fill in the MCP service project address and server configuration instance, and click submit.
+
+![Submit MCP](https://pic.yupi.icu/1/1744008547763-70effe90-c0aa-4683-bbc8-060639266529.png)
+
+After submission, it can be searched on the platform:
+
+![Search MCP](https://pic.yupi.icu/1/1744008638998-003207ee-8394-4ded-9ea6-83dbf189477c.png)
+
+---
+
+OK, that's all for this sharing. If you've learned something, remember to like and bookmark it. Also, feel free to share your thoughts and understanding of MCP in the comments~
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Eight-Part Essay: [Internship/Campus Recruitment/Social Recruitment High-Frequency Points, Enterprise Real Questions Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Writing Tool: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interview: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Get Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/40 编程学习/团队研发规范.md

@@ -0,0 +1,156 @@
+# Team Development Standards
+
+> Enterprise-Level Development Standards Practice Guide
+
+Hello, I am programmer Yupi.
+
+A few days ago, I shared a retrospective summary of my one-year entrepreneurial journey, mentioning that as the team grows, we will pay more attention to development standards and technical accumulation.
+
+Some programmer friends asked: What are development standards?
+
+Others said: Yupi, don't treat us as outsiders, share your company's development standards with us!
+
+![Development Standards](https://pic.yupi.icu/1/image-20240419140208921.png)
+
+Sure, I must arrange it!
+
+This article will briefly share our company's development standards. However, before we start, two points must be clarified:
+
+1. Each team should customize their own development standards based on their situation. Others' standards are for reference only and may not be the best fit for your team.
+2. Due to limited space, this article only shares some standards I consider important, and we have removed our own sensitive information.
+
+⭐️ Video version of this article: https://bilibili.com/video/BV1fi421C78M
+
+## I. Overall Project Development Process
+
+1) Team Confirms Goals and Plans
+
+Hold meetings to discuss and produce goal and planning documents.
+
+2) Product Research and Requirement Analysis
+
+Produce research reports and requirement analysis documents.
+
+3) Requirement Review
+
+Hold requirement review meetings to clarify the requirements and tasks, estimate workload, and define work timelines.
+
+4) Solution Design
+
+Produce solution design documents, such as database table design, page design, interface design, etc.
+
+5) Development
+
+Includes individual development, unit testing, front-end and back-end integration, etc.
+
+6) Testing and Acceptance
+
+Includes self-testing by developers, product acceptance, and team acceptance.
+
+7) Code Submission
+
+Submit code ready for deployment, which needs to be reviewed by the responsible person and can be merged upon approval.
+
+8) Deployment and Launch
+
+Deploy the code to the server, notify the team, update the deployment documentation, and verify the deployment after launch.
+
+9) Product Iteration
+
+Continuously collect user feedback on new features, perform data analysis to validate the changes, and facilitate the next round of updates and iterations.
+
+## II. Development Standards
+
+### Pre-Development Considerations
+
+1) Ensure a thorough understanding of the business and requirements; conduct an overall solution design first. Especially for important requirements and core business, confirm the solution with team members before starting development to avoid redundant work.
+
+2) Familiarize yourself with the project before development. It is recommended to read project documentation, project code, interface documentation, front-end component documentation, etc.
+
+3) Be cautious when introducing new dependencies or libraries, or upgrading versions. Major dependency changes need to be confirmed with other team members.
+
+4) Familiarize yourself with the functionalities and code already implemented by the team, and try to reuse them to avoid redundant development.
+
+5) Familiarize yourself with the team's internal development standards and configure them in the IDE, such as setting up ESLint and Prettier plugins for front-end code standardization.
+
+### During Development Considerations
+
+1) When developing new features, ensure you pull the **latest main branch** code from the project repository.
+
+2) Create a new branch for each feature development. **Never modify the main branch directly!** Ensure the branch name is in English, semantically meaningful, and not confused with others.
+
+3) During development, try to reuse existing functionalities, modules, classes, methods, and object code. If existing code is available, avoid rewriting it.
+
+4) Follow the team's internal development standards during development. Refer to the existing project code's style, especially avoiding inconsistent formatting, naming, and writing styles with the original project.
+
+5) During development, if anything is unclear, do not guess. Contact other project members or the responsible person promptly for confirmation.
+
+6) During development, periodically (e.g., every 1 - 3 days) use `git pull` to synchronize with the latest main branch code to prevent merge conflicts.
+
+7) During development, pay attention to the overall timeline. Complete first, perfect later. Provide timely feedback if there are risks.
+
+8) During development, pay special attention to capturing and handling exceptions.
+
+9) Keep each branch as clean as possible. Minimize the amount of code changed during each development and submission. It is recommended to modify only one feature, bug, or module per branch. Avoid combining unrelated functionalities and make changes only when necessary.
+
+10) After completing part of the feature development, always conduct self-testing! Mock fake data during self-testing. **Never test on the production environment and never affect production data!**
+
+## III. Code Submission Standards
+
+1) Only code that has passed testing and product acceptance can initiate a PR request to merge into the main branch. Before that, it can be submitted to your own branch.
+
+2) Before initiating a PR to merge into the main branch, **read your own code thoroughly three times** to avoid non-standard writing and meaningless changes.
+
+3) Each merge should focus on one feature or change, avoiding coupling multiple functionalities together, improving review efficiency, and reducing change risks.
+
+4) Each submission should include a description of the code changes in the commit message. Additional explanations can be provided by linking requirement documents, test cases, solution documents, and effect screenshots.
+
+Commit messages can refer to the [Conventional Commits](https://www.conventionalcommits.org/zh-hans/v1.0.0/) document, but it is not mandatory.
+
+5) Unless under special circumstances, all code must be reviewed and approved by at least one project lead before merging. Only code merged into the main branch is allowed to be deployed.
+
+## IV. Deployment Standards
+
+### Pre-Deployment Considerations
+
+1) Before deployment, in addition to verifying that the functionality runs correctly and meets requirements, pay special attention to the program's:
+
+- Robustness. For example, providing user-friendly error messages and input validation.
+- Security. Preventing unauthorized operations and input validation.
+- Stability. Ensuring calls are 100% successful. If there is a chance of failure, consider retry or fault-tolerant strategies.
+
+2) Unless under special circumstances, only functionalities verified by the product and main branch code that has passed code review are allowed to be deployed.
+
+3) Unless under special circumstances, try to deploy during weekdays (recommended Tuesday ~ Thursday) to ensure timely fixes if issues arise after deployment.
+
+### Post-Deployment Considerations
+
+1) After deployment, always conduct a complete testing process again, especially focusing on permission-related functionality tests.
+
+2) After deployment, always promptly share deployment information in the group, notify relevant members, and provide immediate feedback if issues are encountered.
+
+3) After the first deployment, configure monitoring alerts immediately.
+
+4) After deployment verification passes and is confirmed by internal group members, announce the version update in external user groups.
+
+5) After deployment, update the project's update record documentation immediately.
+
+6) Note that deployment is not the end. For a period after deployment (at least one week), continuously monitor the functionality you are responsible for, collect user feedback, observe the new feature's effectiveness through data analysis, and fix any issues promptly, preparing for the next improvement iteration.
+
+## Final Words
+
+The above are our company's development standards, hoping they are helpful to you.
+
+Again, each team should customize their development standards based on their situation. These standards are for reference only.
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheat Sheet: [Internship/Campus Recruitment/Social Recruitment High-Frequency Exam Points, Enterprise Real Questions Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Writing Tool: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interview: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Get Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/50 产品变现/00 产品变现导读.md

@@ -0,0 +1,108 @@
+# Product Monetization Guide
+
+> From idea to revenue, make your product truly valuable
+
+Hello, I'm Yupi, a former Tencent full-stack developer, an [AI programming blogger](https://space.bilibili.com/12890453) with 2 million followers, and the creator of over 10 self-developed products like [AI Navigation](https://ai.codefather.cn) and [Programming Navigation](https://www.codefather.cn).
+
+If you've completed the previous content and successfully built some projects, congratulations! You now have the ability to turn ideas into products.
+
+But you might be wondering:
+
+- The product I made is good, but how can I make it valuable?
+- I want more people to use my product, but I don't know where to start...
+- I see others' products making money, and I want to try too, but I feel lost.
+
+These thoughts are completely normal. This section is specifically designed to address these questions.
+
+## 1. Why Learn Product Monetization?
+
+Many students finish their projects, upload the code to GitHub, and then move on to learning new technologies or starting new projects. The result is: they create many projects, but none of them truly generate value.
+
+**Monetization is an important criterion for testing a product's value.**
+
+More importantly, in the Vibe Coding era, the barrier to creating products has never been lower. You don't need to master all business knowledge; you only need to:
+
+1. Know what problem your product solves
+2. Understand basic product operation methods
+3. Use appropriate ways to make your product valuable
+
+Through this section, you will master all three points.
+
+## 2. What Will This Section Cover?
+
+The core content of this section includes **the complete product development process** and **practical experience in product monetization**.
+
+### Main Content (Recommended to Learn in Order)
+
+First, I'll start with the mindset of product monetization, helping you understand why to create a product and how to think about its value. This is the foundation of building a good product, and I strongly recommend starting with this part.
+
+Then, I'll guide you through the complete product development process, including requirements analysis, documentation, technology selection, architecture design, and development workflows. These are all practical experiences I've accumulated at Tencent and during my entrepreneurial journey.
+
+Next is the core content of product monetization, including profit model design and pricing strategy design, so you can understand how to make your product truly profitable.
+
+Finally, we'll cover an important aspect of product promotion: SEO (Search Engine Optimization), teaching you how to make your product more discoverable.
+
+### Side Content (Optional Learning)
+
+In addition to the main content, I've prepared some practical experience sharing:
+
+- Website Data Protection Practices: How to prevent malicious crawler attacks
+- System Monitoring and Alerting Practices: How to detect and handle system issues promptly
+- Website Data Analysis Practices: How to optimize products through data analysis
+- My Self-Media Startup Experience: How to start self-media from scratch
+- My Self-Media Growth Journey: My real experience growing from 0 to 2 million followers
+
+These are all real experiences from my product development journey, and you can choose to learn them based on your needs.
+
+## 3. How to Use This Section?
+
+The articles in this section are divided into main and side content. You can choose flexibly based on your situation.
+
+If you're a complete beginner, I recommend starting with the main content in order to understand the basics of product development and monetization. Then, selectively learn the side content based on your needs.
+
+If you're particularly interested in a specific area, you can jump directly to the corresponding chapter. For example, if you want to learn how to prevent website attacks, you can directly read the Website Data Protection Practices; if you want to learn self-media operations, you can directly read the self-media-related content. Each article is relatively independent, so you can understand it without reading the previous ones.
+
+If you already have your own product and want to make it valuable, focus on learning profit model design, pricing strategy design, SEO optimization, and other related content.
+
+For those who want to dive deeper, I recommend completing both the main and side content to gain a comprehensive understanding of product monetization.
+
+## 4. What Will You Gain?
+
+Through the learning and practice in this section, you will be able to:
+
+1. Develop a monetization mindset
+2. Master the complete product development process
+3. Understand multiple product profit models
+4. Learn to design reasonable pricing strategies
+5. Master basic product promotion methods
+6. Accumulate practical experience and avoid common pitfalls
+
+After completing this section, you'll realize: **Making a product valuable can be this simple!**
+
+## Final Words
+
+I know that seeing the words "product monetization" might make some students feel a bit utilitarian. But with the help of Vibe Coding, product monetization is not as difficult as you might think.
+
+Remember what I said in the "Essentials" section? Today is the easiest time in human history to learn programming. The same goes for product monetization.
+
+You don't need to be a business expert or have many resources. You only need:
+
+- A product that solves a problem
+- The ability to clearly express the product's value
+- The willingness to spend time experimenting and optimizing
+
+You already have these three points.
+
+Let's embark on this exciting journey of product monetization together!
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [Comprehensive AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Community: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guides, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheat Sheet: [Internship/Campus Recruitment/Social Recruitment High-Frequency Topics, Enterprise Exam Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Writing Tool: [Professional Templates, Rich Examples, Direct Path to Interviews](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Land Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/50 产品变现/01 为什么要做产品变现？.md

@@ -0,0 +1,136 @@
+# Why Monetize a Product?
+
+> Understand the "why" to do it better
+
+Hello everyone, I'm Yupi. Before creating a product, the first question we must ask ourselves is: **Why are we making it?**
+
+Only then should we consider how to do it and how to do it better.
+
+In this article, I'll share my thought process before monetizing an AI product, using my own experience as an example. I hope this helps you clarify your goals and direction before starting your product journey.
+
+## The "Benefit"
+
+Why create my own AI product? The answer is simple: **Benefit**.
+
+Benefit here refers to gains, but it's not limited to money—it can manifest in various forms, including material, mental, and emotional rewards. For instance, I spent two years sharing free programming knowledge early on, completely disregarding "material" benefits at the time. It was more about passion and the positive feedback from helping my followers—benefits of the mind and heart.
+
+You've probably heard the term **"benefiting others."** Why do that? At its core, it's also about benefiting oneself. On one hand, you gain satisfaction from helping others—mental and emotional benefits—and on the other, it can bring material rewards, killing two birds with one stone. This is why I personally advocate for this approach.
+
+So, I began thinking: What are the different layers of benefit in creating an AI product?
+
+### Material Gains
+
+Starting a company and building a product naturally comes with the hope of making money.
+
+Why an AI product? As everyone knows, AI is currently a "typhoon-level" opportunity—a bigger wave than mobile internet.
+
+Unfortunately, I didn't realize this at first. At the time, I was still working at Tencent, with little time to focus on AI, dismissing it as another media hype. But by February-March, I sensed something was off. Not only were major companies worldwide making moves, but even my "slacker" colleagues started talking about AI and GPT?! Add to that the surge of viral AI-related videos and daily unexpected developments, and it hit me: Damn, the opportunity is here!
+
+To be honest, my resignation was partly influenced by AI. While I'd planned to leave anyway, AI was the final push off the cliff.
+
+In short, I'm bullish on AI's growth. Those who **stay ahead of the times** inevitably reap greater material rewards, so I decided I had to **enter the AI game**!
+
+### Mental and Emotional Gains
+
+Beyond material gains, I place more emphasis on mental and emotional rewards. I've always valued freedom—whether it was sharing knowledge or later monetizing it, these were areas I loved. I didn't want to chase money for money's sake and end up constrained.
+
+From observing peers who also shared programming content, I noticed that if you're not passionate about something and merely imitate others for profit, you might scrape some crumbs, but you'll never make it big.
+
+For me, diving into AI—constantly engaging with and learning cutting-edge knowledge—is just "so cool!" I love experimenting and sharing. Honestly, my accumulated traditional frontend/backend tech stack and development experience are already sufficient to build most products. I also crave a foothold in a new field. AI, to me, is a mysterious and uncharted territory, and the process of learning and practicing it feels incredibly exhilarating—that's my mental reward.
+
+Once you've clarified your benefits, it's time for deeper reflection.
+
+## Question 1: Why Build a Product?
+
+How can we leverage AI for benefit? The answer lies above: **Stay ahead of the times.**
+
+If you keep pace with the era, spot opportunities others miss, and access information others can't, you'll reap rewards.
+
+Some classic examples:
+1. Start a media channel sharing AI-generated text and images to amaze those unfamiliar with AI.
+2. Offer training with AI tutorials to introduce AI to beginners.
+3. Build products integrating global AI models to make AI accessible to more people.
+4. Conduct research, stay updated on the latest tech, and write groundbreaking papers.
+
+With so many options, why choose **product development**?
+
+First, in terms of difficulty, media and training are feasible for most with some time investment, while research isn't my forte, so products are the sweet spot.
+
+Products come in many forms—courses, apps, or services. I chose to make Yucongming AI a website because:
+1. I have extensive experience building websites—it's easy for me.
+2. Websites are low-cost information carriers with broad accessibility.
+3. Websites can integrate diverse technologies and applications, offering limitless potential.
+
+From a benefit perspective, websites reach more users and allow flexible development, naturally creating more opportunities. Continuously refining a "limitless potential" project also excites me—building a website is like raising a child, watching it grow brings immense satisfaction.
+
+## Question 2: Should I Really Do This?
+
+While the above points are compelling, they only place AI products on my **optional** list—something I "could do."
+
+But whether to proceed requires comparing it with other plans through **cost-benefit analysis**.
+
+This is especially crucial for those with limited time. Ideally, we'd "have it all"—profitable ventures we're technically capable of. But reality often limits us to 2-3 concurrent tasks before exhaustion sets in, necessitating trade-offs.
+
+Like programming students facing countless "opportunities"—lab work, competitions, internships, side gigs—and temptations. But you must clarify your goals and ask: Is this truly the highest ROI choice right now?
+
+For me, dedicating 2-4 hours daily to product exploration, plus two team members assisting in development, makes completing this AI product entirely feasible. The potential benefits are immeasurable (since you never know until you try). So why not give it a shot?
+
+## Question 3: With So Many Similar Products, Should I Still Proceed?
+
+Before starting my AI product, many questioned why I'd bother when countless similar "wrapper" products already exist.
+
+1) Opportunities remain abundant.
+Stepping outside my bubble, research showed that truly understanding and using AI is still rare. Many have only glimpsed AI through media—most remain outsiders.
+
+2) Are "wrapper" products meaningless?
+So-called wrappers exist because pioneers paved the way—these are gifts we should embrace. Wrappers aren't inherently bad or unworthy, but we shouldn't stop there. We can add innovations atop them, making them our own.
+
+It's like projects—you can expand on existing ones, adding unique touches to make them distinct.
+
+Also, many programmers get overly technical, obsessing over advanced features while forgetting tech serves business and products serve users. Even similar products offer room for innovation in UX and workflows.
+
+3) Resources reign supreme.
+In today's landscape, most tech isn't the bottleneck, nor is product innovation. Frankly, with resources and business acumen, you can replicate others' innovations overnight, right?
+
+With some initial traction, I could more easily navigate the cold start phase and stand out with a bit more effort.
+
+Considering these factors, I was set on creating my own AI product. But before starting, one last step—preparing for the worst.
+
+## Preparing for the Worst
+
+This is my usual approach—always have an exit strategy.
+
+What's the worst-case scenario for this AI product?
+Maybe: No profit, wasted time, mental strain, some wasted traffic.
+
+But on the bright side, even if it fails:
+1. I won't go bankrupt.
+2. The system remains usable.
+3. I can share the experience as content.
+4. Gain failure experience.
+
+I can accept this trial period. So, just do it!
+
+---
+
+## Final Thoughts
+
+Above is my pre-product thought process. Whether you're using Vibe Coding for personal projects or building value-driven products, consider these questions first:
+1. Why this product? (Benefit analysis)
+2. Should I really do it? (Cost-benefit analysis)
+3. Are there similar products? Still proceed? (Competitive analysis)
+4. What's the worst-case scenario? (Risk assessment)
+
+Clarifying these will sharpen your focus and boost motivation.
+
+In the Vibe Coding era, product barriers are low. With ideas and willingness to try, you can create something valuable.
+
+Go for it—I look forward to seeing your product! 💪
+
+## Recommended Resources
+
+1) Yupi's AI Directory: [AI Resources, Latest News, Free Tutorials](https://ai.codefather.cn)  
+2) Programming Navigation Learning Circle: [Roadmaps, Tutorials, Projects, Career Guides, Q&A](https://www.codefather.cn)  
+3) Programmer Interview Cheatsheet: [Intern/New Grad/Job-Hop FAQs, Company Insights](https://www.mianshiya.com)  
+4) Resume Builder for Coders: [Professional Templates, Rich Examples, Interview Prep](https://www.laoyujianli.com)  
+5) 1-on-1 Mock Interviews: [Essential for Intern/New Grad/Job-Hop Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/50 产品变现/02 需求分析和产品规划.md

@@ -0,0 +1,154 @@
+# Requirements Analysis and Product Planning
+
+> Think clearly about what to do, to do it better
+
+Hello everyone, I'm Yupi. Before developing any product, the first thing we must do is **requirements analysis**.
+
+What is requirements analysis? Simply put, it's about analyzing and clarifying user needs.
+
+Why do we need to do requirements analysis? How to do it well? Are there any precautions?
+
+In this article, I'll share methods and techniques for requirements analysis based on my product development experience. Whether you're working on a personal project with Vibe Coding or aiming to create a real product, these methods will be helpful.
+
+## Why Do Requirements Analysis?
+
+Let me share a personal experience. Once, a good friend I hadn't seen for years came to Shanghai to visit me. Since we're close, I decided to treat him to a seafood buffet and made a reservation. However, when I took him to the restaurant, he told me: "Buddy, I'm allergic to seafood..."
+
+It was quite awkward, wasting both the deposit and time. This is what happens without requirements analysis.
+
+The same applies when developing projects or creating products. If you act on impulse or subjective assumptions without considering users' real needs, you might invest significant resources only to create a product that users don't need at all.
+
+When I first started sharing programming knowledge, I suffered from not doing requirements analysis. I enthusiastically created many videos I thought were useful, but they received few likes. Looking back, it was just self-indulgence.
+
+Therefore, requirements analysis is crucial. Think of it as a bridge connecting our product to users, helping us better understand users' hearts and clarify what we need to do.
+
+> Note: Requirements analysis isn't just for product managers and bosses! For programmers, it's equally important as it determines whether your subsequent development work is meaningful. Don't just be a "robot" that follows orders and writes code.
+
+## What Does Requirements Analysis Involve?
+
+There are many methodologies for requirements analysis online. I've summarized them into three aspects:
+
+### Three Aspects
+
+The first aspect is **starting from yourself**, which I call "free analysis". Product development should be fun - there shouldn't be too many constraints. Record all your ideas and what you want to do as freely as possible.
+
+When I decided to create Yupi Smart AI, I already had a rough idea of the features I wanted, like AI chat, AI painting, AI Mask, AI navigation, AI book writing, etc. This step doesn't require actual "analysis" - just let your imagination run wild.
+
+The second aspect is **starting from users**. If you're just learning or doing it for fun, free analysis alone is fine. But if you want to create an attractive online product with many users, you must focus on users.
+
+In short: confirm **what users need and their pain points** to filter or improve our features, avoiding self-indulgence.
+
+There are many methods, like surveys, user interviews, group discussions, etc. For our small startup team, we are the users, so we start with group discussions where everyone thinks: "Would I use this feature?" If we wouldn't use a feature, we definitely won't develop it; if everyone thinks "Wow, this is awesome", it might be our core feature.
+
+The third aspect is **starting from competitors**, i.e., competitive analysis. When you're unsure what features to include or lack ideas, try similar products - you'll gain many insights.
+
+Many programming students often ask: how to expand a project? The answer is: see what features similar projects have and add them to yours.
+
+However, note that competitors might not have perfected certain features. When analyzing competitors, record your genuine user experience, take the best and discard the worst, giving you potential to surpass them.
+
+### Clarifying Requirements
+
+Through these three aspects of thinking and practice, we can basically confirm the core features to develop (like writing an outline for an essay).
+
+Next, we need to break down and refine the requirements, clarifying each small feature and what exactly needs to be done (like filling in the essay outline).
+
+For example, our Yupi Smart AI's core feature is AI chat, which can be broken down into:
+
+1. Create AI chat
+2. View my AI chat list
+3. View chat information
+4. Send chat messages
+5. AI intelligent responses
+6. View chat message history
+7. Message toolbar
+
+Some features can be further divided, like the message toolbar: copy message, voice reading, download message, etc.
+
+### Prioritization
+
+After refining requirements, you might be surprised: there's so much to do!
+
+At this point, some might want to give up: "This is too troublesome, forget it!"
+
+Don't panic. No system is perfect from the start. We need to prioritize requirements, decide what to do first and what later, then implement step by step.
+
+How to prioritize?
+
+Common methods consider factors like importance, urgency, impact scope, and implementation complexity, dividing requirements into P0 - P3 levels.
+
+- P0: Highest priority, must-have. Without this, the product can't launch. Like Yupi Smart AI's chat and content moderation.
+- P1: Important features, best to have. Not urgent initially but must-have later. Like Yupi Smart AI's sharing, image-to-image features.
+- P2: Medium priority, nice to have. Features that improve user experience or bring some value, can do if resources allow. Like Yupi Smart AI's assistant advanced configuration.
+- P3: Lowest priority, optional. Either low value or high complexity, can do when team has spare time. Like Yupi Smart AI's... well, we don't have P3 features yet - no one slacks under Yupi! (🐶 just kidding!)
+
+After prioritization, focus on P0 first. Complete P0, launch a version quickly, validate with users whether the requirements are reasonable and valuable, then proceed with further development and iteration.
+
+### Requirements Management
+
+Even with few initial requirements, it's important to record and manage them. Don't keep all information in your head, or you might wonder later: "Why did I want this feature?"
+
+How to manage requirements?
+
+The simplest way is document recording. Don't overcomplicate it - just make a list like you'd list what to eat today.
+
+Recommend using online knowledge bases like Yuque or Feishu rather than local records, enabling real-time team synchronization and collaborative editing.
+
+More formally, use tables to create a requirements schedule, recording each feature, module, details, priority, etc.
+
+![](https://pic.yupi.icu/1/image-20230704115312375.png)
+
+You can also use mind mapping tools like XMind for hierarchical requirements organization, making team collaboration clearer and presentations for funding more impressive.
+
+For more formal approaches, use professional requirements (project) management systems like Jira, Tapd, or Teambition, which help manage more complex, interdependent requirements.
+
+Note: Requirements management is ongoing. You won't think of all requirements and features immediately, but whenever you have any ideas or inspiration, don't miss them - immediately record them on your phone!
+
+## Don't Let Fake Requirements Harm You!
+
+Last but most important: don't let fake requirements harm you!
+
+This isn't just for product managers and bosses, but especially for those actually implementing requirements (like programmers, testers).
+
+If complete system features are like a puzzle, fake requirements are like irregular puzzle pieces - they seem useful but actually waste time without helping complete the puzzle.
+
+So how to avoid fake requirements?
+
+Besides requirements analysis, user feedback, prioritization, and requirements management mentioned above, we should involve as many team members as possible, communicate and validate more, repeatedly evaluate, and use data analysis for scientific validation.
+
+As team members, we should actively participate in requirements review, grasp more information, and help the team make better decisions.
+
+Sometimes, as a small developer in a large corporate team, we might not participate much in requirements analysis and project decisions. But if we find requirements unreasonable, we should raise concerns early rather than waste time implementing useless requirements (or even useless systems).
+
+Our Yupi Smart AI also had fake requirements due to a decision mistake of mine, resulting in a nearly useless feature. Later we discovered this and optimized the system, but that's a story for another chapter.
+
+So, developers, when encountering fake requirements, I hope you can confidently tell the product team: "This requirement is unreasonable! I won't do it!"
+
+---
+
+## Final Thoughts
+
+Requirements analysis is the first and most crucial step in product development. Whether you're working on a personal project with Vibe Coding or aiming to create a real product, take requirements analysis seriously.
+
+Remember these key points:
+
+1. Requirements analysis should consider yourself, users, and competitors
+2. Break down requirements into specific features
+3. Prioritize requirements, focus on core features first
+4. Continuously manage and optimize requirements
+5. Beware of fake requirements, communicate and validate more
+
+In the Vibe Coding era, implementing requirements has become low-cost. But thinking clearly about what to do remains most important. Only with the right direction can you achieve more with less effort.
+
+Keep going, looking forward to seeing you create valuable products! 💪
+
+## Recommended Resources
+
+1) Yupi AI Navigation Site: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheatsheet: [Internship/Campus/Social Recruitment High-frequency Points, Enterprise Real Questions Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Builder: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interview: [Essential for Internship/Campus/Social Recruitment Interviews to Get Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/50 产品变现/03 文档沉淀和知识管理.md

@@ -0,0 +1,163 @@
+# Documentation and Knowledge Management
+
+> Documenting is the key to going further
+
+Hello everyone, I'm Yupi.
+
+Let me share a personal story first. During my sophomore year, I worked on a project with a team. As I contributed more and more code to the project, I gradually took the lead. Eventually, I became so familiar with the project's logic that team members would come to me whenever they encountered problems.
+
+However, due to time constraints, I later left the team after carefully explaining the code to other members.
+
+Guess what happened?
+
+After my departure, team members kept coming to me with questions about the project. Even more surprisingly, a month later, the project was abandoned!
+
+When I later asked why the project failed, a teammate replied frustratedly: "You never wrote any documentation, and many parts of the project were incomprehensible. We couldn't continue working on it."
+
+That's when I realized: while I had been focused on writing code, I failed to document my experience and project knowledge to share with others, making my contributions essentially unmaintainable by anyone else.
+
+Sigh, I was just too inexperienced back then. Since that incident, I've made it a habit to document every project I work on. Even if it's just for my own reference, at least I can understand my own past work.
+
+This brings us to the core topic of this article — **documentation**. Whether for individuals or teams, whether in learning, work, or projects, whether you're a programmer, product manager, or project manager, proper documentation is crucial.
+
+Below, I'll share with you: Why document? How to write good documentation? And how to manage documentation effectively?
+
+## What is Documentation?
+
+Documentation is a medium for recording, storing, and transmitting information.
+
+Our project requirement sheets, system design documents, research reports, meeting minutes, resolved bugs, or even casual notes taken while watching tutorial videos—all of these are forms of documentation.
+
+## Why Document?
+
+From the definition alone, we can already understand the fundamental purposes of documentation:
+
+- **Recording information**: Capturing temporary information
+- **Storing information**: Preventing information loss and forgetfulness
+- **Transmitting information**: Sharing knowledge with others
+
+Our brains have limited capacity—we can't remember everything. Writing documentation is essentially building our second brain.
+
+Personally, I have a small memory capacity, so I've developed the habit of jotting things down and documenting as I go. Sometimes I even pull out my phone to record good ideas that come to me while walking.
+
+### The Value of Documentation for Projects
+
+For projects (especially large enterprise projects), documentation carries even greater significance.
+
+During the **initial phase**, documentation guides the smooth progression of the entire project. If building a project is like constructing a skyscraper, then documentation is the blueprint. Without blueprints, construction workers would work blindly, making completion uncertain and quality/safety impossible to guarantee.
+
+Similarly, if you don't create documentation during project initiation—lacking systematic plans and execution strategies—team members will lose direction during development, frequently encountering delays, failures, and rework.
+
+> Those who've watched my livestreams know that at the start of every project, I document requirements analysis, design plans, technology selection, etc. Before implementing any feature, I first write the design solution in documentation before coding. While documenting takes extra time initially, it significantly reduces overall project hours.
+
+During the **mid-phase**, documentation's purpose is to **continuously** record and track project status, making information transparent across the team to facilitate correct decisions and timely risk avoidance.
+
+Imagine running a marathon where documentation serves as mile markers—telling everyone how far they've come and what lies ahead. These markers also warn of dangers ahead. Without documentation, the team quickly scatters, working in silos, and one person's risk could drag down the entire team.
+
+During the **final phase**, documentation helps us review, maintain projects, and pass on knowledge.
+
+- **Review and summary**: By reading documentation, we can revisit the project's complete lifecycle from birth to completion, analyzing reasons for success or failure to learn lessons for future projects.
+- **Ongoing maintenance**: For projects requiring continuous updates, proper documentation (like bug logs or user manuals) ensures that even if maintainers change, new members can quickly find solutions from documents, preventing "one person leaves, project dies" scenarios.
+- **Knowledge transfer**: Well-documented knowledge represents predecessors' valuable experiences, lessons, ideas, and methods—extremely worthwhile for learning and inspiring future team members.
+
+In short, documentation benefits everyone. Every word you write creates value.
+
+---
+
+Now that we understand documentation's importance, how do we do it well?
+
+We can break documentation down into two tasks:
+
+1. Writing good documentation (the prerequisite)
+2. Managing documentation effectively
+
+Let's explore each.
+
+## How to Write Good Documentation?
+
+To write good documentation, we first need to understand "what makes documentation good," then learn the tools and methods for writing it.
+
+### What Makes Documentation Good?
+
+My personal criteria for evaluating documentation quality:
+
+1) **Human-readable and easy to understand**
+
+First, your documentation is for **people** to read. If it's personal study notes, ensure you can understand it later. If shared within a team, ensure others can comprehend it. If one sentence could explain something but you use twenty, even with documentation, people might still bother you directly.
+
+2) **Well-structured and easy to navigate**
+
+Good documentation should let readers quickly scan from top to bottom and understand: what you're writing, what you want to convey, what they can gain from it, and where to find needed content.
+
+Like this article, I use multi-level headings to structure it, allowing you to quickly locate interesting sections via the table of contents.
+
+3) **Complete and precise content**
+
+Good documentation resembles a project module—it should be complete and cohesive, enabling readers to solve problems using just this document.
+
+For example, a "Java Bug Solution" document should include: the bug's cause, troubleshooting process, solution, and lessons learned—not just presenting the bug without resolution.
+
+Additionally, terminology and phrasing must be precise and unambiguous!
+
+For instance, when our YuCongMing AI initially estimated costs, we wrote: "Several servers, cumulative cost around ten thousand yuan." "Several" and "around" are vague terms that could lead to miscalculations and losses. Later, we changed it to specifics like: "1 server (4C 8G), ¥1000/month" for finer cost control.
+
+Other standards for good documentation might include consistent style and formatting for user-facing product docs, enhancing reader experience and team credibility, making users more willing to adopt the product.
+
+### Writing Tools
+
+"A craftsman must sharpen his tools first." Before discussing writing methods, let's share some tools.
+
+Years ago, Word was the go-to for documentation, but it has many flaws—manual formatting adjustments, compatibility issues causing layout problems on different computers, etc.
+
+Now I strongly recommend learning **Markdown** (a lightweight markup language), enabling consistent formatting with simple syntax.
+
+For example, use `## Heading 2` for second-level headings, `> Quote` for quoted text, etc.
+
+Many editors now support Markdown, like VS Code and JetBrains IDEs. For the best local Markdown editor, I recommend Typora, which I've used for years.
+
+Diagrams often aid understanding—flowcharts, architecture diagrams, etc. Use online tools like Draw.io or classic software like Visio. For mind maps, try XMind. For generating images, consider Midjourney (or our YuCongMing AI).
+
+For publishing documentation on platforms, paste Markdown into mdnice.com to automatically generate beautifully formatted articles.
+
+Additionally, with web technology advancements, online documentation platforms have become powerful. For team collaboration and real-time sharing, consider YuQue, Tencent Docs, or Lark Docs.
+
+### Methods
+
+#### "Copy"
+
+First, to write good documentation, start by "copying."
+
+Or rather, as scholars say: "learn from others."
+
+If you don't know how to write certain documents—project docs, design specs, user manuals—what to do?
+
+Simple: find excellent **examples** online to emulate.
+
+This applies beyond documentation—content creation, product development, thesis writing, craftsmanship. To excel at anything, first observe how others do it.
+
+- Building a website? Study existing sites
+- Making videos? Analyze viral content
+
+It's straightforward—many things have been done before. Even without tutorials, careful imitation can succeed.
+
+With open-source culture thriving, many projects and documents are publicly available on GitHub. When writing documentation, simply copy a renowned project's README.md, keep its outline, replace content with yours, and you have a standard document—that easy.
+
+After reading and writing enough documentation, you'll naturally develop your own (or your team's) methodology.
+
+#### Streamline Writing
+
+Many dislike documenting because they lack ideas, don't know where to start, or what to write.
+
+I used to stare at blank documents too...
+
+But with more writing experience, I developed a method for quick content creation—what I call "streamlined writing."
+
+What's a stream? Getting breakfast in a cafeteria: queue → buy buns → get soy milk → find seating—a DNA-embedded routine.
+
+With a clear writing process, documenting becomes as easy as buying breakfast.
+
+How?
+
+1) **Outline first**: Structure your article and write headings based on the topic
+
+For this article, I first wrote: "What is documentation? Why document? How to write good docs? How to manage docs?"—establishing the framework before

translations/en/Vibe Coding 零基础教程/50 产品变现/04 技术选型实战指南.md

@@ -0,0 +1,260 @@
+# Practical Guide to Technology Selection
+
+> Choose the right technology, achieve twice the result with half the effort
+
+Hello everyone, I'm Yupi. Today I'll be sharing about **technology selection**, a must-know topic for friends in technical roles and a core task during the preliminary preparation stage when developing products.
+
+In this article, I'll combine my practical experience in product development to share: What is technology selection? What does technology selection involve? Why do we need technology selection? And how to do technology selection well?
+
+Whether you're using Vibe Coding for personal projects or aiming to build a real product, mastering technology selection methods can save you from many detours.
+
+## 1. What is Technology Selection?
+
+The term "technology selection" might sound sophisticated, but it essentially means "choosing technologies" - selecting which technologies to use for project implementation. For example, using HTML for web development or C++ for Windows desktop applications.
+
+To draw an analogy: if developing a project is like leading troops into battle, technology selection would be choosing weapons before the battle. You need to comprehensively select the most suitable weapons based on your own troops, the enemy's forces, and their battle formations to achieve victory at minimal cost.
+
+Note that technology selection isn't just done during the initial project planning and design phases. Whenever we add new features to a project, we may need to select new technologies; as your project expands, you might also need to upgrade the original technology stack.
+
+## 2. What Does Technology Selection Involve?
+
+"Which technologies to use for project implementation" sounds simple. As mentioned above, using HTML for web development can be summarized with one technical term.
+
+But in reality, this is just the surface level. Technology selection isn't easy and involves many layers and details.
+
+From simple to complex, technology selection includes:
+
+1) Which category of technology to choose?
+   Like programming languages, development frameworks, data storage, caching, queues, etc.
+
+2) Which specific technology to choose?
+   Like choosing Java, Go, or C++ for programming language? Spring or Play for development framework? Redis or Memcached for caching?
+
+3) Which version of the technology to choose?
+   Like Java 8 or 11? Vue 2 or Vue 3? Redis 5 or 6? Different versions of the same technology often have significant differences.
+
+4) Which specific features of the technology to use?
+   Like Spring's AOP aspect or Redis's GEO advanced data structures.
+
+From this perspective, technology selection is somewhat complicated. Generally, the larger the project scale, the more cautious technology selection tends to be, and the longer the cycle.
+
+I remember when I was building a BI visualization project from scratch at Tencent, just the technology selection took several weeks, with in-depth and comprehensive comparisons of mainstream data storage technologies both domestically and internationally.
+
+Since technology selection can consume so much time and energy, why do we still need to do it?
+
+## 3. Why Do Technology Selection?
+
+I believe many friends who haven't worked yet have never systematically done technology selection.
+
+This is normal because during the learning phase, everyone follows online tutorials for projects. What technologies to use, which versions, even what code to write - all are pre-planned by the instructor.
+
+![](https://pic.yupi.icu/1/image-20230331134500590-20230706153049690-20230706153117049-20230706163222417.png)
+
+But actually, it's not that technology selection wasn't done - the instructor did it for you. When instructors choose which technologies to use for projects, they're essentially doing technology selection, considering factors like market demand and technology popularity.
+
+So why do technology selection?
+
+The answer is simple: to **better** develop and maintain projects.
+
+"Better" here could mean improved efficiency, cost savings, enhanced development experience, increased project scalability, etc.
+
+Imagine when developing projects in a corporate team: if the leader (or architect) chooses a technology only they're familiar with that others don't know at all, will the project progress quickly? If choosing a cheap, poorly-made cloud database to save small costs, will the project perform well?
+
+Before developing a **complete project**, if we thoughtlessly decide on a technology and start coding, we might encounter problems later. It's like Yupi choosing cheap tires for his electric bike - it works fine at first, but one day it blows out halfway, leaving him stranded...
+
+Here's a personal example from my university days. I led a team to develop a campus forum website using React for frontend. Initially smooth, I quickly built dozens of pages. But one day when needing to implement post page state preservation, I discovered React doesn't have built-in keep-alive (component state caching) like Vue Router. It took a long time to find a similar component, which was full of bugs!
+
+Moreover, the more invasive a technology is to project code (like development frameworks), the higher the switching cost later. In my example above, after building dozens of pages, switching frameworks would be very troublesome. Sometimes introducing new components or libraries might conflict with existing dependencies, causing the project to fail. Then you must choose between switching old technologies or spending more effort finding new ones that don't conflict. Worse, to maintain compatibility with outdated frameworks, you might avoid any new technologies, having to develop everything yourself... One wrong step leads to many more!
+
+These are all problems from not doing technology selection or doing it poorly, highlighting its necessity.
+
+Looking back, it was indeed due to lack of experience. If I had considered this initially, confirming all potentially needed technologies and choosing appropriate ones, I could have reduced later risks and saved much time.
+
+## 4. How to Do Technology Selection Well?
+
+Understanding technology selection's importance, let's discuss how to do it well.
+
+Next, I'll combine my team's experience to share key points of technology selection from several aspects.
+
+### 4.1 Define Context
+
+First, clarify: there's no perfect technology. Our goal is selecting the **optimal solution** for **specific scenarios** under **limited conditions**.
+
+Key points:
+
+#### 1) Limited Conditions
+Refers to team size, members' skills, time costs, monetary costs, etc.
+
+For example, if everyone only knows Java and the project needs quick delivery, prioritize Java-related technologies. Don't make everyone learn Go just because it's high-performance.
+
+If the company lacks funds/resources, rather than paid services (like cloud databases), consider self-hosting on a server.
+
+If the company has resources but lacks manpower, don't self-host services like databases - use third-party cloud services.
+
+A common approach is starting from human resources - see what technologies the team knows. For urgent needs, prioritize familiar technologies for quick initial delivery, then research better architectures for optimization. If the team has mature experience with a technology and experts, prioritize it. For example, Alibaba teams prioritize Java; ByteDance prefers Go.
+
+From resource perspective, consider if team resources suit the technology. For example, startups with limited funds might use MySQL instead of Elasticsearch for search functionality, sacrificing flexibility for cost savings. If servers only have 4GB RAM, choose open-source technologies with memory usage below this threshold.
+
+#### 2) Specific Scenarios
+Technology selection must revolve around **specific business and requirements**, fitting reality rather than using technology for its own sake.
+
+Consider:
+
+1. What functionalities to implement? For a cloud storage system, focus on file storage technologies; for a chat system, prioritize real-time communication technologies.
+2. What's the business scale? For many users/large data, use distributed databases or sharding; for high concurrency, use Nginx or LVS for load balancing.
+3. What are the core workflows and key data structures? For management systems, mainstream relational databases like MySQL suffice; for analytics, choose OLAP databases like ClickHouse.
+4. Which performance metrics matter most? For log collection prioritizing high throughput, use Kafka; for low latency and message accuracy, choose RabbitMQ.
+
+Limited conditions + specific scenarios = context, meaning the team/project's actual situation.
+
+#### 3) Optimal Solution
+Often, technology selection is like algorithm design - no absolute best, but trade-offs between time, space, stability, availability, performance, etc.
+
+Different contexts yield different optimal solutions. This is what makes technology selection both interesting and challenging!
+
+> CAP theory is similar: in distributed systems, you can't simultaneously achieve Consistency, Availability, and Partition Tolerance - you must balance based on reality.
+
+### 4.2 Thorough Research
+After clarifying context, conduct thorough research using search engines, GitHub, articles, videos, etc., to explore potential technologies.
+
+Research includes:
+- What is this technology? What's its purpose?
+- What are its pros and cons?
+- What's its usage cost?
+- What scenarios is it best for?
+- Its background and reputation, etc.
+
+Many websites help with technology selection, like:
+- Technology Radar: https://www.thoughtworks.com/zh-cn/radar
+- Framework Performance Comparisons: https://www.techempower.com/benchmarks
+
+But since AI chatbots became popular, I directly ask AI (GPT or Yucongming) for technology selection information.
+
+For example: "You're a computer programming expert. I'm building an XX system with XX functionalities under XX constraints. List required technologies, recommending multiple options with introductions, pros/cons, and suitable scenarios for optimal selection."
+
+During research, explore widely without limiting to specific technologies.
+
+Record all findings in documents (tables/lists) for easy comparison and final selection, like:
+
+![](https://pic.yupi.icu/1/image-20230706180955933.png)
+
+In large companies/projects, technology selection requires solid justifications for approval.
+
+### 4.3 Compare and Select
+With sufficient information, select the most suitable technology based on context + research.
+
+Beyond context, prioritize: well-known, company-backed, actively maintained, high-activity, open-source, well-documented, popular technologies with good ecosystems.
+
+For example, famous frontend framework Vue and Java backend framework Spring Boot are known for power, ease-of-use, abundant learning resources, making them mainstream with high demand.
+
+Avoid poorly-documented, obscure technologies! If issues arise later without solutions online, the entire project might stall!
+
+### 4.4 Minimal Demo Validation
+Before finalizing technology, validate its applicability to your project - don't just decide!
+
+Recommend creating minimal demos for quick validation. For example, for Vue Router, create a demo with button-click page navigation to `/about`.
+
+This bridges theory to practice.
+
+Thanks to AI, you can now ask GPT to generate demo code for validation:
+
+![](https://pic.yupi.icu/1/image-20230706182008022.png)
+
+For legacy systems, especially check compatibility between new technologies and existing dependencies. Minimal demos help prevent version conflicts.
+
+### 4.5 Continuous Learning
+Beyond above methods, experience accumulation is crucial for technology selection. For example, a decade-experienced e-commerce architect can immediately identify suitable technologies for new e-commerce systems.
+
+Two suggestions:
+1) Continuous Documentation
+   Record every technology related to your learning/work direction. Understand its purpose for future reference when needed.
+
+2) Expand Horizons
+   Don't rely on one technology or limit yourself to your field. Especially during self-learning/small projects, occasionally try new technologies to broaden selection scope.
+
+For example, though my work is Java backend, I often do frontend projects using various technologies like Vue, React, Svelte.
+
+## 5. Technology Selection Practice
+
+After methodology, let's share our team's technology selection practice for Yucongming AI.
+
+Following above steps, first define context.
+
+### 5.1 Define Context
+
+#### 1) Limited Conditions
+Our small team is most familiar with Java Spring Boot (backend) + React (frontend), so these frameworks were basically decided.
+
+Limited funds prevented purchasing many servers/third-party services, so for most non-core services, we used Java Tomcat single-server deployment with BaoTa Linux for server management.
+
+#### 2) Specific Scenarios
+Four key questions:
+
+1. What functionalities? Core P0 features: AI chat, AI assistant, content moderation. AI chat/moderation could use third-party GPT services.
+2. Business scale? Initial website with low concurrency (QPS ≤3), no load balancing needed yet.
+3. Core workflows/data structures? Main flow: user sends message => AI replies => store history. Involves conversation/message storage, suitable for relational databases like MySQL.
+4. Key performance metrics? Having been attacked before, we prioritized security/availability. For concurrency control, used Redis + Redisson for distributed rate limiting on message frequency.
+
+#### 3) Optimal Solution
+One example: use costly third-party cloud databases or self-host?
+
+In school, I'd self-host - learning projects just need to run, and self-hosting builds Linux skills. Most importantly, saving money for lunch!
+
+But for user-facing online projects, I prefer cloud databases - setup, maintenance, optimization are handled; just use provided credentials without worrying about downtime. The extra cost significantly saves our "already limited" development/operations resources.
+
+This is our current optimal database selection.
+
+### 5.2 Thorough Research
+As mentioned, most features use mainstream Spring Boot + React - our team's expertise with good ecosystems, requiring little additional research.
+
+Instead, we spent more time researching **content moderation**.
+
+Why?
+
+Because for AIGC products, content moderation is crucial - and costly!
+
+To balance quality and cost, we focused on major domestic cloud services (BAT).
+
+Through official docs and customer service, we created this comparison table:
+
+> Data for reference only; check official sources
+
+![](https://pic.yupi.icu/1/image-20230706195734818.png)
+
+### 5.3 Compare and Select
+With the table, we could select content moderation technology based on actual needs.
+
+For example, our chat allows 1000-2000 characters per input with QPS ≤10, making Provider A or B reasonable choices.
+
+> We can split long inputs into paragraphs, sending multiple requests to bypass character limits.
+
+### 5.4 Minimal Demo Validation
+After selecting, implementation was straightforward. For third-party moderation services, official docs provided ready example code for local execution.
+
+![](https://pic.yupi.icu/1/image-20230706200934291.png)
+
+### 5.5 Continuous Learning
+Regarding continuous learning, our team constantly monitors AI-related technologies, recording new findings in shared knowledge bases for future research when needed.
+
+---
+
+Technology selection is key to good products. Right choices bring efficiency; wrong ones may trap projects.
+
+Remember:
+1. Base selection on team reality and project needs
+2. Research thoroughly, compare widely
+3. Prioritize well-known, ecosystem-rich technologies
+4. Validate with minimal demos
+5. Continuously accumulate experience
+
+In the Vibe Coding era, AI helps quickly understand technologies and generate demo code. But selecting optimal technologies based on context still requires your judgment and experience.
+
+Choose wisely for smoother product development! 💪
+
+## Recommended Resources
+
+1) Yupi AI Navigation: [AI Resources, Latest News, Free Tutorials](https://ai.codefather.cn)  
+2) Coding Navigation Learning Circle: [Learning Paths, Tutorials, Projects, Career Guides, Q&A](https://www.codefather.cn)  
+3) Programmer Interview Handbook: [Internship/Campus/Social Recruitment FAQs, Company Questions](https://www.mianshiya.com)  
+4) Resume Builder for Programmers: [Professional Templates, Rich Examples, Interview Prep](https://www.laoyujianli.com)  
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus/Social Recruitment Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/50 产品变现/05 系统架构设计实践.md

@@ -0,0 +1,215 @@
+# System Architecture Design Practice
+
+> Make Your Product Stand Out
+
+Hello everyone, I'm Yupi. In this article, we'll discuss a topic that sounds sophisticated but is actually not that difficult — **architecture design**. This is a crucial skill for those in the technical field and a core task during the initial preparation phase of product development!
+
+In this article, I'll share my practical experience in product development and cover: What is architecture design? Why is it important? And how to do it well?
+
+Whether you're working on a personal project using Vibe Coding or aiming to create a real product, mastering architecture design methods will make your system more stable and scalable.
+
+## 1. What is Architecture Design?
+
+Imagine we're about to build a skyscraper. What steps would we take?
+
+Would we just ask workers to stack bricks? Or have excavators dig away?
+
+Of course not!
+
+Before construction begins, an architect would draft a blueprint based on the building's purpose, location, and occupancy needs. This blueprint would outline the building's shape, internal layout, and structural details.
+
+After drafting the blueprint, the architect would determine the framework and support structure for each floor, ensuring stability so that the building doesn't collapse in strong winds.
+
+Next, the architect would plan the purpose of each floor based on the building's intended use and requirements, such as having a food court on B1 and luxury clothing stores on the 1st floor. These decisions are made before construction starts, so there's no last-minute change like, "Let's not build this floor!"
+
+Similarly, in software (or website) development, before developers start coding, an experienced architect often drafts an **architecture design diagram** to outline the system's overall structure, scale, and architecture.
+
+The architect also divides the system into modules based on functionality and requirements, such as splitting an e-commerce system into user, product, and order modules. They define the roles and interactions of these modules to ensure the system operates smoothly, avoiding situations where a single failure brings down the entire system.
+
+Some might ask, how is architecture design different from technology selection?
+
+Using the skyscraper analogy, it's easy to distinguish. Architecture design is about planning how to build the skyscraper and arranging each floor, while technology selection involves choosing the specific materials, tools, or methods to complete the construction after the architecture design is done. The two complement each other.
+
+In summary, **architecture design is the process of building a stable, reliable, and scalable system**.
+
+The well-known role of "architect" refers to the person responsible for completing the system's architecture design, ensuring it is stable, reliable, and scalable.
+
+Many might think architects are highly prestigious roles. Personally, I believe that if you can independently design a system's architecture and break down complex systems into modular, scalable components, you are already an architect.
+
+> So, becoming an architect in '97 does have some rationale.
+
+## 2. Why is Architecture Design Important?
+
+From the skyscraper example, you can already sense the importance of architecture design.
+
+If you don't design the building's structure beforehand, it's hard to ensure its safety and stability — a strong wind could collapse the entire floor. Similarly, if you don't design a website's overall architecture (e.g., failing to add a firewall) before development, the entire system might become inaccessible during a network attack. This is the core goal of architecture design: ensuring the system's **stability, reliability, and availability**. In other words, at least make sure the system can run.
+
+> But it's okay, as long as either the system or the person can run.
+
+Another important reason for architecture design is the system's **scalability**. For example, if a newly built shopping mall becomes very popular and we want to add more floors, we must ensure from the start that the building's structure can support the additional weight and allow linear expansion. Not like this:
+
+![](https://pic.yupi.icu/1/image-20230711174331231.png)
+
+Similarly, if a website needs to handle increasing user numbers and new business features, a good architecture design is essential. Avoid situations where the website becomes inaccessible due to increased traffic.
+
+Additionally, good architecture design can enhance system performance and user experience. For example, in a shopping mall, properly arranging elevators and their locations helps users quickly reach their desired stores. Similarly, a well-designed website architecture, such as using fewer layers to achieve the same functionality, can respond to user actions faster.
+
+In short, if you want your website to stand tall like a skyscraper, early-stage architecture design is essential!
+
+## 3. How to Do Architecture Design Well?
+
+There's a big difference between "completing architecture design" and "doing architecture design well." Below, I'll share some key points based on my years of learning experience and the architecture design of Yucongming AI.
+
+### Mastering Methodology
+
+The foundation of good architecture design is having a solid theoretical foundation. Methodology refers to a set of **solutions to specific problems** summarized and generalized by predecessors. It's like using formulas to solve math problems.
+
+There are many methodologies helpful for architecture design. For example, object-oriented design, basic software development principles, 23 classic design patterns, SOA (Service-Oriented Architecture), DDD (Domain-Driven Design), etc. Understanding the ideas behind these methodologies is a **prerequisite** for good architecture design.
+
+For example, one of the five SOLID principles of object-oriented design is the **Single Responsibility Principle**, which states that a class or module should have only one responsibility, focusing on a specific function or task. In other words, each module should do its own job well.
+
+When designing the architecture for Yucongming AI, we first followed the Single Responsibility Principle, splitting the system **by functionality** into user, assistant, conversation, painting, and payment modules. This way, when we wanted to expand conversation-related features, we didn't need to modify the assistant module's code. We could also assign different modules to different team members for development.
+
+![](https://pic.yupi.icu/1/image-20230711192728792.png)
+
+### Learning Classic Architectures
+
+Stand on the shoulders of giants. Before we can independently design an architecture, we can learn from classic architectures summarized and practiced by predecessors.
+
+Here are a few examples:
+
+#### 1) Layered Architecture
+
+First, the most classic layered architecture divides the system into multiple layers, each with specific functions and responsibilities, interacting only with its direct upper and lower layers.
+
+For example, the three-tier architecture commonly used in Java enterprise backend projects divides the system into presentation, business logic, and data access layers.
+
+The presentation layer handles user requests, passing user inputs to the business logic layer for processing and returning data or pages to the user.
+
+The business logic layer handles complex business logic, such as invoking AI capabilities for intelligent conversations, processing the results, and calling the data access layer to store the results in a database. This is the main development part of the system.
+
+The data access layer operates the underlying data sources, such as performing CRUD operations on databases, files, or caches.
+
+![](https://pic.yupi.icu/1/image-20230711194035810.png)
+
+Layered architecture is widely applicable and can serve as the foundational architecture design for most enterprise systems.
+
+Computer networks also use a classic layered architecture. The OSI seven-layer reference model divides computer networks from bottom to top into physical, data link, network, transport, session, presentation, and application layers. Each layer handles specific functions, such as data transmission or routing, and communicates with other layers through interfaces (or protocols).
+
+Our Yucongming AI backend also uses layered architecture, but with an added Manager layer (common logic layer) between the business logic and data access layers to extract **common logic** frequently used by the business logic layer for reuse.
+
+#### 2) Microservices Architecture
+
+The "micro" in microservices contrasts with "monolithic" projects. Microservices architecture involves splitting a large system into multiple small, autonomous services. Each service can be independently deployed, scaled, and maintained without affecting others. Services collaborate through network communication to achieve the full functionality of the original large system.
+
+Our Yucongming AI uses microservices architecture. As mentioned earlier, we first divided the system into modules by functionality.
+
+However, if we only logically divided these modules, all the code would still be deployed in the same project, packaged into a single executable file. This means all modules either run together or crash together, essentially still a monolithic project. A failure in one service could bring down the entire project!
+
+![](https://pic.yupi.icu/1/image-20230711200006355.png)
+
+So, we extracted some critical modules (e.g., the payment module) from the original project and deployed them as separate services, even starting backups to ensure payment business stability. After all, we can't let anything affect revenue, right?
+
+![](https://pic.yupi.icu/1/image-20230711200339275.png)
+
+There are many frameworks for implementing microservices, such as Spring Cloud and Apache Dubbo for Java. However, learning microservices is more about the mindset of **how to reasonably split services**.
+
+Not all projects need to split every function into sub-services. For example, in Yucongming AI, we didn't separate the user and assistant modules because their business logic isn't complex and they have tight dependencies. Splitting them would make maintenance harder.
+
+#### 3) Event-Driven Architecture
+
+In event-driven architecture, modules communicate through events (or messages) using a **publish-subscribe model**.
+
+For example, consider two modules: payment and membership. When a user successfully pays, the payment module sends an event "User XX paid successfully" to the membership module, which then activates the user's membership.
+
+![](https://pic.yupi.icu/1/image-20230711202025430.png)
+
+In practice, event-driven architecture often introduces an **event bus**, acting as a mediator to collect and distribute events.
+
+For example, Yucongming AI's conversation and painting functions use event-driven architecture. When the upstream returns AI responses or generated images, it sends a "success" message to the event bus, which then forwards the message to the corresponding modules for processing. Like this:
+
+![](https://pic.yupi.icu/1/image-20230711201650066.png)
+
+This way, modules are decoupled (they don't affect each other). If I want to add more conversation modules later, I only need to connect the new module to the event bus without affecting other modules.
+
+### Focusing on Needs and Pain Points
+
+Almost all projects we encounter during learning can adopt the mainstream architectures mentioned above. However, how to do architecture design well must be analyzed based on actual needs and pain points.
+
+Take Yucongming AI as an example. As mentioned earlier, we first split the system into modules based on requirements (functionality), then encapsulated some modules as separate services for independent deployment.
+
+But architecture design doesn't end there. Next, we analyzed the pain points of our website, mainly focusing on "security" and "access interoperability."
+
+#### Security
+
+Based on my past failures, a website will inevitably face various attacks after going live! So, we expanded the original layered architecture by adding a high-defense server and Nginx firewall before the presentation layer, and distributed rate limiting and permission verification after the presentation layer.
+
+> Adding centralized distributed rate limiting and permission verification before the presentation layer is also reasonable, depending on actual needs.
+
+The improved architecture looks like this:
+
+![](https://pic.yupi.icu/1/image-20230711203808233.png)
+
+If a user sends frequent malicious requests in a short time, they will be intercepted at the rate-limiting layer, preventing further business logic processing.
+
+#### Access Interoperability
+
+Our AI painting module relies on third-party services for some functionalities, but these services don't support cross-region access, causing network interoperability issues. What can we do?
+
+We had two options:
+
+1) Deploy the entire system in the region where the third-party service is located. Like this:
+
+![](https://pic.yupi.icu/1/image-20230711205545871.png)
+
+2) Set up a proxy between the AI painting module and the third-party service to handle request sending and response. Like this:
+
+![](https://pic.yupi.icu/1/image-20230711210049633.png)
+
+Which one would you choose?
+
+Option 1 is convenient, but the downside is obvious: moving the entire system to another region means slower access for users in the original region.
+
+Option 2's advantage is that only the AI painting module's request address needs to change, while other functionalities (e.g., querying user information) remain unaffected. The downside is the need to set up additional services, increasing implementation costs.
+
+Ultimately, we chose Option 2 and improved the architecture design, accepting higher implementation costs for better user experience.
+
+This example illustrates that **there's no perfect architecture design**. Like technology selection, our goal in architecture design is to find the optimal solution under actual conditions.
+
+### Thinking Ahead
+
+When doing architecture design, we should develop the habit of thinking ahead, not just focusing on the current state but anticipating future system developments and leaving enough **scalability** space.
+
+For example, Yucongming AI started with only 100 beta users, but we designed the system to handle 10,000 or even 100,000 users. So, we used distributed storage middleware instead of local servers to store user login sessions. Although early historical conversation messages only accumulated 50,000, we designed a message expiration mechanism and decoupled the message module to prevent millions or billions of messages from affecting system query performance.
+
+Of course, thinking ahead should have limits. Avoid over-engineering by not considering impossible scenarios or consuming costs far beyond growth.
+
+---
+
+Finally, remember that **architecture design is an ongoing process**. Continuously optimize and iterate based on actual business conditions. Simplify architecture to reduce costs when business profits are low; scale services to handle growth during rapid business expansion.
+
+## Final Thoughts
+
+Architecture design is the foundation of good product development. Good architecture design makes systems more stable, scalable, and performant.
+
+Remember these key points:
+
+1. Master basic methodologies and design patterns for architecture design.
+2. Learn classic architectures and stand on the shoulders of giants.
+3. Focus on actual needs and pain points, not designing for the sake of design.
+4. Think ahead and leave room for expansion.
+5. Architecture design is a process of continuous optimization.
+
+In the Vibe Coding era, AI can quickly generate code, but the overall system architecture design still requires your own thinking and planning. With the awareness of architecture design and sufficient accumulation, anyone can become an architect!
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Guides, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheatsheet: [Internship/Campus/Social Recruitment High-Frequency Topics, Enterprise Question Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Writing Tool: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interview: [Essential for Internship/Campus/Social Recruitment Interviews to Secure Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/50 产品变现/06 项目研发流程选择.md

@@ -0,0 +1,258 @@
+# Project Development Process Selection
+
+> Fast or Stable?
+
+Hello everyone, I'm Yupi.
+
+I wonder if you like spicy sticks? Anyway, I'm a big fan.
+
+When eating spicy sticks, I often ponder: how are these delicious spicy sticks made?
+
+To satisfy my curiosity, I searched online and was quite surprised!
+
+I found that some spicy sticks are produced using quite "advanced" methods—not entirely manual labor, but through a **production assembly line**. After preparing the raw materials, machines sequentially handle mixing, stirring, cutting, seasoning, frying, cooling, and packaging, while workers only need to supervise.
+
+![](https://pic.yupi.icu/1/6f6e8ad610e6418e9556fb0fb95afda1.jpeg)
+
+With such a clear set of procedures, the entire spicy stick production process becomes orderly. Workers (or machines) only need to focus on their specific tasks step by step, improving overall efficiency. Moreover, if each step is thoroughly validated, the quality and safety of the spicy sticks will also be higher.
+
+This highlights the importance of **standardized processes**.
+
+Returning to today's topic, if we want to develop and launch a product, we also need a standardized development process.
+
+A development process refers to a **series of work steps and methods** designed to efficiently complete product development. Team members only need to follow these steps and methods sequentially to successfully deliver a high-quality product.
+
+So, what kind of development process should a team adopt for collaborative development? Should the process have more steps or fewer?
+
+This article will combine my experience working in large companies and leading small teams to share: the standard development process in large companies, agile development for small teams, and the development process choice of our Yucongming AI team. I hope this helps broaden your perspective and improve your team's development efficiency and project quality.
+
+## Standard Development Process in Large Companies
+
+This is the focus of this article.
+
+In large companies, hundreds or even thousands of people may collaborate on a single project. To ensure stable progress, the development process in large companies is typically **comprehensive and complex**, involving many steps, each with strict requirements.
+
+I’ve divided the large-company development process into several phases, summarized in a mind map for clarity:
+
+![Large-Company Development Process Mind Map](https://pic.yupi.icu/1/3334dda0-2177-4816-bc91-94e7d3b77bde.png)
+
+Using spicy stick production as an analogy, the large-company development process is like the **standardized assembly line** for producing spicy sticks mentioned earlier.
+
+> Note: The phases above are not strictly sequential; there may be overlaps. For example, technical research and technology selection should ideally be considered during the design phase.
+
+### Requirements Phase
+
+The goal of the requirements phase is to clarify: Why are we building this product? What kind of product are we building? What features should the product have?
+
+Now, let’s assume spicy sticks are our product.
+
+Since the requirements phase is the **initial** step in the development process, I’ll break it down into four sub-phases for detailed explanation.
+
+#### Requirement Generation
+
+Why are we making spicy sticks? Perhaps market research showed that people love spicy sticks and that producing them could be profitable. Maybe we stumbled upon an idea to improve the flavor. Or perhaps our resources are well-suited for spicy stick production.
+
+The most important task in this phase is to collect and organize as many requirements as possible, leaving no potential opportunity unexplored.
+
+Sometimes, a seemingly trivial idea can turn into a highly meaningful requirement.
+
+#### Requirement Review
+
+After gathering many requirements, we need to review them to determine their feasibility, cost-benefit ratio, risks, and alignment with our product vision—rather than trying to do everything.
+
+For example, if we plan to produce a new flavor of spicy sticks, we must first research whether the new flavor will be popular and whether it can be produced.
+
+#### Requirement Analysis
+
+After reviewing the requirements, we need to further analyze them, breaking them down into **specific** product features or tasks.
+
+For instance, to produce a new flavor, we must determine the spiciness level, develop a new recipe, ensure safety, and design new packaging.
+
+#### Scheduling
+
+After clarifying the requirements through analysis, we need to schedule them.
+
+In this phase, we create a production plan, prioritizing and allocating time for each requirement based on its importance and resource needs.
+
+For example, producing spicy sticks might involve spending one month developing the recipe, three days procuring raw materials, three days producing the sticks, one day verifying safety, and three days designing new packaging—all concurrently.
+
+### Design Phase
+
+The goal of the design phase is to figure out in advance: How will we build the product? How will the features be implemented?
+
+For spicy stick production, the design phase is about "finalizing the recipe."
+
+First, **architecture design** is like determining the main ingredients and production techniques, ensuring that future new flavors can be developed on this foundation rather than starting from scratch each time (scalability).
+
+**High-level design** is akin to conceptualizing the spicy sticks as a whole—such as the type of chili, the ratio of chili powder to flour, and the size of the sticks.
+
+**Detailed design** refines the high-level design, delving into the **specifics** of each ingredient and step. For example, add 3 grams of chili powder, then 100 grams of flour, and stir three times (this is made up).
+
+After completing these designs, we share them with the team for discussion to ensure everyone’s **plans are aligned** and ideas are consistent. We don’t want customers to receive spicy sticks with different recipes after launch.
+
+During the design phase, not only product managers and engineers but also testers are involved, working on **test case design** in advance. This defines quality standards, such as a specific spiciness range (xx ~ xx) or stick length (10 cm).
+
+### Development Preparation
+
+In the development preparation phase, we focus on setting up the foundational conditions for the project.
+
+For example, before officially producing spicy sticks, we conduct **technical research** to assess the feasibility of the new recipe. Then, we perform **technology selection**, choosing the tools or machines for mixing, cutting, etc.
+
+After selecting the technology, we **request resources**, ensuring the team has the budget for advanced tools, raw materials, and labor.
+
+In large companies, resource requests are often stringent. For instance, at Tencent, requesting a single server for project deployment required approvals from multiple layers, including leadership and operations.
+
+Once resources are secured, we prepare the **environment**—finding a clean, well-equipped space for machines and workers. In development, this means setting up the development environment, installing necessary software, etc.
+
+Next, we perform **project initialization** and **dependency installation**, positioning machines and workers, powering up, starting machines, installing programs, etc., to get everything ready. In development, we might use scaffolding tools to generate clean initial code and package managers to install dependencies, allowing us to start coding happily!
+
+### Development Phase
+
+The development phase is where programmers shine, with the goal of writing code to complete the project.
+
+This phase can be divided into five sub-phases: local development, remote development, code optimization, unit testing, and integration testing.
+
+First, each developer writes code on their own machine (local development) or collaborates on a shared machine (remote development). After completing basic features, they optimize the code—adding error handling for robustness or multithreading for performance. Then, they write unit tests to verify the code runs as expected. Finally, programmers collaborate on integration testing, calling each other’s code to validate full functionality.
+
+In spicy stick terms, this phase involves machines and workers cooperating to mix, cut, season, and inspect the sticks. Since I’ve never worked in spicy stick production, I don’t know if they include taste-testing. If the flavor is off, they might tweak the machines (fixing bugs) or add secret ingredients (code optimization).
+
+### Testing and Validation
+
+After development, we must test and validate. The goal of this phase is to ensure the product functions correctly and eliminate bugs!
+
+You might ask: Didn’t programmers already write unit tests during development?
+
+However, unit tests are just a basic safeguard, ensuring individual code works. When multiple pieces of code interact, **integration testing** is needed to ensure they work together.
+
+Beyond unit and integration testing, common tests include system testing and acceptance testing.
+
+**System testing** follows integration testing, examining the entire system’s functionality and performance on a larger scale.
+
+**Acceptance testing** is typically the final phase, confirming the system meets actual requirements and user expectations.
+
+Another concept is **product experience**, which involves evaluating the product from a real user’s perspective. Strictly speaking, this isn’t limited to the testing phase but should run through the entire development process to identify and address issues early.
+
+In spicy stick terms, after production, not only do we taste-test, but professional tasters also evaluate the recipe and process for issues.
+
+### Submission Phase
+
+The goal of the submission phase is to push the tested local code to the remote repository and merge it into the main branch, preparing for launch.
+
+In practice, since projects are maintained by multiple people, **code reviews** are used to reduce conflicts and poor code. Before merging into the main branch, you must submit a Merge Request (MR), which is reviewed by the project lead (usually your manager or colleague). Only after approval can the code be merged.
+
+This ensures all code is reviewed by at least two people, improving quality and reducing the chance of bugs post-launch.
+
+In spicy stick terms, code reviews are like food safety inspections. If issues are found in the recipe or process, it’s sent back for rework.
+
+### Release Phase
+
+After "overcoming 81 hardships," our project is finally ready for release!
+
+First, we package the spicy sticks for sale. Instead of a full-scale launch, we start with a small group of customers for feedback. If the response is positive, we proceed with a full launch.
+
+In development, we **build and package** the code, then conduct a **pre-release** (or canary release) for a subset of users. If all goes well, we **officially launch**.
+
+### Post-Release
+
+At this point, the development process isn’t over—we’ve only completed one release cycle.
+
+After launch, we continue collecting user feedback, analyzing it to iteratively improve the product.
+
+Documentation is also crucial. We record all issues, materials, and knowledge from the process to help the team improve.
+
+---
+
+How does that sound? Does the large-company development process seem complex?
+
+In reality, after the first launch, every new feature requires going through the entire process again! Sometimes, just the requirement review phase takes 1–2 weeks of discussion!
+
+While this process ensures quality, it may not suit small teams, especially startups where time is money.
+
+Next, let’s discuss agile development, which is better suited for small teams.
+
+## Agile Development for Small Teams
+
+If the large-company process emphasizes **standardization and stability**, agile development focuses on **team collaboration and rapid iteration**.
+
+In agile development, many steps from the large-company process can be simplified or skipped, offering great flexibility.
+
+For example, if we decide to build a product in the morning, the team might discuss requirements at noon, confirm core features for launch, and start coding in the afternoon. The goal is to deliver core functionality as quickly as possible, then continuously discuss new requirements, develop, launch, and improve.
+
+More time is spent on development—speed is the priority!
+
+![Agile Development Process](https://pic.yupi.icu/1/image-20230712185656368.png)
+
+If we used agile development for spicy sticks, it might look like this:
+
+The team notices a region loves spicy sticks, so they manually produce a few packs quickly for taste-testing. Based on feedback, they refine the recipe and packaging. After success, they invest in machines and factories for mass production.
+
+Note: Agile development is a software methodology with various approaches like Scrum, Kanban, and Extreme Programming. Understanding the basics and applicability is sufficient.
+
+## Choosing a Development Process
+
+After learning about these two processes, how should we choose for our projects?
+
+First, remember: **there’s no one-size-fits-all solution**. Each approach has strengths, and the choice depends on the situation.
+
+Agile development prioritizes speed and flexibility but requires high team coordination and carries greater risks. Weeks of development might yield a useless product. In contrast, the large-company process consumes more upfront resources but delivers higher quality and stability.
+
+So, for our Yucongming AI team, do we choose speed or stability?
+
+The answer: Why choose? We’ll take both!
+
+![](https://pic.yupi.icu/1/image-20230712184257231.png)
+
+First, let’s analyze our situation:
+
+1. We’re a small team without large-company resources or infrastructure (e.g., automated build pipelines).
+2. We’re building AI products and need to launch quickly to capture the market.
+3. Our team works closely in a small 40-square-meter office, enabling tight collaboration.
+
+Given this, we lean toward agile development. However, we retain the design and submission phases from the large-company process and implement robust monitoring for continuous improvement.
+
+The full process:
+
+![](https://pic.yupi.icu/1/image-20230712190738396.png)
+
+We aim for speed while ensuring scalability and code quality. Thus, we spend more time on design, adopting a generalized architecture (e.g., microservices, with a separate payment center) to support future growth.
+
+For collaboration, we use Git with a simplified Git Flow model. Each developer works on their branch, and I review their code before merging into the main branch, ensuring stability.
+
+Code review interface:
+
+![Code Review](https://pic.yupi.icu/1/image-20230712193216012.png)
+
+You might ask: Why skip the testing phase? Don’t you test your product?
+
+Ideally, products should be tested by dedicated testers. But in reality, we don’t have any!
+
+Our workaround:
+
+1. Frontend and backend developers self-test their features. Before launch, I meet with the team to verify functionality.
+2. Issues are endless, and systems evolve. We launch quickly and recruit beta testers for feedback.
+
+This lets us focus on development while maintaining quality and improvement opportunities.
+
+---
+
+There’s no absolute right or wrong in choosing a development process. The key is tailoring it to your team and project.
+
+Remember these points:
+
+1. Large-company processes emphasize standardization and stability, suited for big teams.
+2. Agile development focuses on rapid iteration, suited for small teams.
+3. Combine the strengths of both to create your ideal process.
+4. Keep core steps (e.g., design, code reviews) and simplify the rest.
+5. Continuously optimize and improve the process.
+
+In the Vibe Coding era, AI can accelerate development, but a good process ensures efficient collaboration and quality.
+
+Find the right process for your team, and let your projects run fast and stable!
+
+## Recommended Resources
+
+1) Yupi AI Navigation: [AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)  
+2) Programming Navigation Learning Circle: [Learning Paths, Tutorials, Projects, Job Guides, Q&A](https://www.codefather.cn)  
+3) Programmer Interview Guide: [Internship/Campus/Job FAQs, Company Questions](https://www.mianshiya.com)  
+4) Resume Builder for Programmers: [Professional Templates, Examples, Interview Prep](https://www.laoyujianli.com)  
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus/Job Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/50 产品变现/07 产品盈利模式设计.md

@@ -0,0 +1,167 @@
+# Product Monetization Model Design
+
+> Passion alone isn't sustainable; make your product valuable
+
+Hello everyone, I'm Yupi. Today, I want to share with you the topic of **monetization models**, hoping to provide some inspiration for website owners, software developers, content creators, and team leaders on how to monetize.
+
+First, I'll introduce the concept of monetization models, and then I'll share some common models and thoughts based on my own experiences.
+
+Whether you're using Vibe Coding for personal projects or aiming to create a real product, understanding monetization models can help you maximize the value of your product.
+
+## What is a Monetization Model?
+
+We can break down the term "monetization model" into "monetization" + "model."
+
+Monetization refers to making 💰, while a model refers to a series of methods or strategies.
+
+Combining the two, a monetization model is easy to understand. It refers to the series of methods and strategies adopted to achieve the goal of monetization. Simply put, it's "how to monetize."
+
+Here's a straightforward example: When I went out for food over the weekend, I saw a bustling fast-food restaurant. For this restaurant, its monetization model could be its menu and sales strategy.
+
+It could create an attractive menu, like calling scrambled eggs with tomatoes "Golden Splendor," and enhance customer satisfaction with unique recipes. It could run a series of promotions, such as buy-one-get-one-free, group discounts, limited-time red packets, or hiring people to queue up, all to stimulate consumer desire and increase revenue.
+
+## The Necessity of Monetization Models
+
+After understanding what a monetization model is, I'll share some small examples to illustrate its necessity.
+
+I started a programming knowledge-sharing自媒体 in 2020, offering free content for a year without any income. Back then, I had no experience and little popularity, so I didn't consider monetization at all—I was purely driven by passion. Looking back, it was my strong self-motivation and perseverance that got me through that cold-start phase.
+
+Initially, when fellow creators suggested I take on ads, I refused, stubbornly believing that accepting ads would betray my followers.
+
+But later, I noticed slow follower growth and realized my enthusiasm was waning. How to break through? I had no choice but to try accepting an ad.
+
+The result? After accepting my first ad, driven by guilt, I felt compelled to produce even higher-quality content to "compensate" my followers. Moreover, with ad revenue, I was more willing to invest more effort into content creation, treating my自媒体 as a career and feeling endless motivation to grow it.
+
+Looking back, I believe I made the right choice. I've also seen many同期 UP主s who initially claimed to be driven by passion but eventually either gave up or turned to paid content.
+
+What followers need is your content; they need you to provide **continuous value** for positive development. Just like TV shows with ads—if there were no ads, viewers wouldn't even get to see the shows. Would they be happy?
+
+To grow a自媒体, you must have the motivation to keep updating; to grow a business, you must continuously accumulate resources.
+
+For example, since 2022, I've been offering paid programming knowledge. On one hand, it's to motivate myself to help more aspiring programmers and keep myself busy; on the other hand, it's to accumulate resources for future entrepreneurship.
+
+Without initial resources, how can you hire employees? Without employees, how can you create products? Without products, how can you achieve stable profits? Without stable profits, how can a business survive and grow?
+
+It's as simple as that.
+
+So, monetization models are essential for businesses. If we compare a business to a car, the monetization model is its engine, providing the power and support for its operation. Just as an engine converts fuel into motion to drive the car, a monetization model converts the products or services a business offers into profits, enabling the business to operate and grow sustainably.
+
+## How to Choose a Monetization Model?
+
+A monetization model can be as simple as a glass of water or as complex as a custom cocktail.
+
+Given my limited experience, I'll share some basic, mainstream monetization models suitable for most people.
+
+### 1. Direct Charging
+
+Charging users a fixed fee for products or services.
+
+A common example is software licenses (or the game discs we bought as kids)—you need to purchase the right to use the software.
+
+This model is suitable for products with **relatively fixed value**. Pricing must be done cautiously, referencing the market and considering the product's value.
+
+### 2. Advertising Revenue
+
+Earning income by directly offering ad space to traffic owners or advertisers is a low-cost, low-risk monetization model.
+
+For example, adding a recommendation spot for AI-related products on our Yucongming AI navigation page:
+
+> This is just an example; we haven't actually monetized this way yet.
+
+![](https://pic.yupi.icu/1/image-20230717125736202.png)
+
+If our platform has significant traffic and its own clients, we can bypass ad platforms and negotiate directly with clients for higher profits. For instance, charging based on daily visits * days * ad space value.
+
+But if platform traffic is unstable and lacks an ad tracking system, it's advisable to integrate third-party ad platforms like Google AdSense. This eliminates the need to negotiate with clients and allows flexible ad placement and performance tracking, making it ideal for individual website owners.
+
+Note: For a growing product, balance ad quantity with user experience, weighing ad revenue against user loss.
+
+### 3. Subscription Model
+
+Allowing users to purchase product or service usage rights over specific time periods.
+
+For example, monthly or annual memberships are the most common subscription models.
+
+This model suits frequently updated products or services that provide continuous value, like knowledge-sharing platforms or information subscriptions. It requires cultivating user habits and loyalty; otherwise, it may not outperform direct charging.
+
+### 4. Freemium Model
+
+Freemium (free + premium) involves offering basic features or free services to attract users, then monetizing through paid premium features.
+
+This model's downstream could be direct charging or subscriptions. The core idea is to retain users with free services, build trust, cultivate usage habits, and then charge, which often yields better conversion rates than direct "selling." Thus, it's one of the most common models.
+
+Our Yucongming AI follows this model, initially investing heavily in free services to attract users, then converting them for monetization.
+
+However, when using this model, carefully balance the ratio of free to paid users, conversion rates, and benefits—don't get exploited like we did early on.
+
+### 5. Commission Fees
+
+Acting as an intermediary in transactions or services, earning a percentage of each deal.
+
+A classic example is WeChat Pay, which takes a cut from each transaction; knowledge-sharing platforms also use this model.
+
+The advantage is low risk and substantial long-term收益, essentially passive income. The downside is the cost of building the intermediary system, ensuring service quality, and the difficulty of gaining initial client trust.
+
+### 6. Licensing Model
+
+Licensing your brand, technology, or intellectual property to other businesses or individuals for授权 fees.
+
+SaaS (Software as a Service) can be seen as a licensing model, providing software products deployed on cloud servers to licensed users.
+
+Licensing can also lead to direct charging or subscriptions. It's suitable for businesses with unique technology or intellectual property and high customer单价.
+
+### 7. Outcome Sales
+
+Collecting and analyzing your product's outcomes and selling them to other businesses for income.
+
+Outcomes can include website content, data, or operational analysis conclusions.
+
+For example, a travel website likely has extensive user travel preference data, which a travel product company might buy to improve its offerings. Similarly, AI art websites can sell their creations to AI art model researchers or image展示 platforms.
+
+This model suits products with大量 valuable data; smaller products may not benefit. However, when developing systems, always retain data—it might prove valuable later.
+
+### 8. Value-Added Services
+
+Offering additional services on top of the core product to increase revenue streams.
+
+A typical example is Alipay, which started as a payment service but now offers various生活 services like recharges and food delivery.
+
+Our Yucongming AI website could also offer AI consulting as a value-added service, though limited manpower prevents us from doing so.
+
+Note: Value-added services should complement the core product, not clutter it with unrelated offerings that harm user experience.
+
+### 9. Partnership Model
+
+A more advanced model involving collaboration with others for mutual benefit.
+
+There are many可行合作方式. For example, Product A offers job-seeking services, and Product B offers college student consulting—they can cross-promote to expand their user bases. Alternatively, Company A provides底层技术, and Company B offers上层服务, sharing profits.
+
+Note: Choose partners considering both the benefits they offer and what you offer them, establishing a fair profit-sharing机制. Unequal利益 will inevitably lead to conflicts.
+
+---
+
+Monetization models are the core of product变现. Choosing the right model can sustain product value; choosing wrong can make it unsustainable.
+
+Remember these key points:
+
+1. There are many monetization models; choose based on product characteristics.
+2. Combine multiple models to offer more options.
+3. Balance short-term收益 with long-term development.
+4. Continuously optimize models based on data.
+5. Models should meet user needs, not just focus on赚钱.
+
+In the Vibe Coding era, the barrier to creating products is low. However, making your product valuable and sustainable still requires careful thought about monetization models.
+
+Keep pushing, find the right monetization model, and make your product truly valuable! 💪
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [Comprehensive AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Guides, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheat Sheet: [Internship/Campus/Social Recruitment高频考点, Enterprise真题解析](https://www.mianshiya.com)
+
+4) Programmer Resume Builder: [Professional Templates, Rich Examples, Direct to Interviews](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus/Social Recruitment Interviews to Secure Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/50 产品变现/08 产品付费策略设计.md

@@ -0,0 +1,348 @@
+# Product Pricing Strategy Design
+
+> Making Users Willing to Pay for Your Product
+
+Hello everyone, I'm Yupi. Let me ask you a question first: If you've spent a lot of time developing a user-facing product, which payment method would you choose to charge users?
+
+Would you opt for a one-time purchase, allowing users to buy permanent access to the product?
+
+Or would you choose a subscription model, where users pay monthly or yearly for access to the product?
+
+Both of these methods are mainstream monetization models I shared in my previous article. However, beyond these "bundled payment" product pricing mechanisms, there are more flexible "pay-as-you-go" mechanisms, such as point systems, package plans, and single-purchase options.
+
+In this article, I'll use my own AI product as an example to explain a universal design for payment mechanisms—the **point system**.
+
+Whether you're using Vibe Coding for personal projects or aiming to build a real product, understanding the point system can help you design more flexible pricing strategies.
+
+## What is the Point System?
+
+Unlike traditional models where users directly purchase products or subscribe for access (e.g., monthly memberships), the point system involves users purchasing **virtual points** that they can then use **as needed** to access services.
+
+I'm sure you're no stranger to this payment mechanism. The diamonds, coins, or vouchers we top up in mobile games are classic examples of the point system.
+
+![](https://pic.yupi.icu/1/image-20230719131457025.png)
+
+And it's no exaggeration to say that the vast majority of domestic mobile games now adopt this mechanism.
+
+Why is that?
+
+## Why Choose the Point System?
+
+Here, I'll explain the advantages of the point system from both product and development perspectives.
+
+### Product Perspective
+
+Let's think about the benefits of the point system from our own perspective. For example, ask yourself: Under what circumstances would I choose to top up points instead of buying a membership?
+
+#### 1. Greater Flexibility
+
+The foremost reason is undoubtedly flexibility. With points, I can selectively purchase multiple in-game items—for example, spending half on equipment and half on loot boxes—maximizing the value of the same amount of money for myself.
+
+Our AI product allows users to directly purchase points and offers various point packages. Users can flexibly use these points for different services like AI chat, AI drawing, and more.
+
+![](https://pic.yupi.icu/1/image-20230719144924694.png)
+
+#### 2. Lower Trial Costs
+
+Before fully understanding a product's features or becoming "addicted" to it, I wouldn't easily commit to a higher-priced membership. However, I might be willing to spend a small amount to try out premium features.
+
+The point system provides users with lower trial costs. Instead of turning users away with high prices upfront, letting them experience the value of premium features first makes them more likely to continue paying, thereby increasing product revenue.
+
+This approach has an additional benefit: It focuses on attracting users with product functionality rather than flashy marketing tactics (e.g., "lifetime memberships"), which is better for the product's reputation.
+
+Our AI product also borrows tactics from many mobile games, allowing users to purchase points for as little as 6 yuan.
+
+#### 3. Reduced Psychological Barriers
+
+Before spending a higher fixed price on a product, I'd naturally consider many factors: How long will I use it? Which features will I use? Are these features worth the price?
+
+The more users have to think about their decision, the less stable their purchase intent becomes.
+
+With the point system, I don't need to overthink—for example, spending just 1 yuan for 10 points makes the purchase decision easier.
+
+Additionally, the point system abstracts pricing into virtual points, allowing users to focus more on the product itself rather than the monetary cost. This makes spending points feel more natural.
+
+#### 4. Increased User Retention
+
+The point system enhances user retention and stickiness. Once I've purchased points, I subconsciously think, "I need to use up these points," which keeps me engaged with the product and strengthens my dependence on it.
+
+In our AI product, to retain users and cultivate usage habits, we allow users to claim a certain number of free points daily. This practice is especially important in the early stages of the product.
+
+![](https://pic.yupi.icu/1/image-20230719145440147.png)
+
+#### 5. Adaptability to Diverse Business Needs
+
+If a system has many features, users naturally don't want separate usage limits for each feature, such as:
+
+- 10 AI chats remaining
+- 5 AI drawings remaining
+- 0 AI book-writing attempts remaining
+
+If a user only wants to use the AI book-writing feature, they'd prefer to buy book-writing attempts directly rather than a bundled package. The product needs to support this option.
+
+Conversely, if a user wants to use both AI drawing and AI book-writing, they'd prefer a bundled package for these two features. The product must also support this option.
+
+As features multiply, the number of purchase options grows exponentially, and pricing them consistently becomes increasingly difficult.
+
+By unifying all usage limits into "points," users can more easily understand their remaining usage without worrying about individual feature limits or calculating the most cost-effective purchase. They can freely allocate points as needed.
+
+For the company, this not only simplifies pricing but also boosts overall sales by combining features or business lines. Tencent's Q币 (Q Coins) is a classic example—any Tencent product can potentially attract users to top up.
+
+### Development Perspective
+
+From a development standpoint, the biggest advantage of the point system is its **universality**.
+
+Universal design brings three key benefits: unified concepts, simplified development, and enhanced scalability.
+
+#### 1. Unified Concepts
+
+You may have heard of the KISS principle (Keep It Simple, Stupid)—the simpler, the better.
+
+In system development, fewer concepts lead to better design, development, and maintenance.
+
+Instead of having each product feature correspond to separate usage limits, using the unified concept of **points** makes communication and understanding easier for both developers and product teams.
+
+Consider this extreme example:
+
+- AI chat consumes 1 "chat coin"
+- AI drawing consumes 2 "drawing coins"
+- AI book-writing consumes 3 "book-writing coins"
+- User A has 2 "chat coins," 3 "drawing coins," and 9 "book-writing coins" left
+- User A can still use AI chat 2 times, AI drawing 1 time, and AI book-writing 3 times
+
+This requires tracking three types of features and their corresponding virtual currencies.
+
+By unifying these into points, the same information becomes much clearer:
+
+- AI chat, AI drawing, and AI book-writing consume 1, 2, and 3 points, respectively
+- User A has 14 points remaining
+
+#### 2. Simplified Development
+
+Initially, when our system had fewer features, we planned to limit usage counts per feature. For example, users could only use AI chat 10 times daily and AI drawing 5 times.
+
+This meant adding **feature-specific** validation and tracking logic in both the AI chat and AI drawing code, like this:
+
+```java
+// AI chat feature
+void doChat() {
+  // Get and validate remaining AI chat attempts
+  chatLeftNum = user.getChatLeftNum()
+  if (chatLeftNum < 1) {
+    throw new Exception("Insufficient AI chat attempts")
+  }
+  // On success, deduct 1 AI chat attempt
+  chatLeftNum--;
+  chatLeftNum = chatLeftNum - 1;
+}
+
+// AI drawing feature
+void doDraw() {
+  // Get and validate remaining AI drawing attempts
+  drawLeftNum = user.getDrawLeftNum()
+  if (drawLeftNum < 1) {
+    throw new Exception("Insufficient AI drawing attempts")
+  }
+  // On success, deduct 1 AI drawing attempt
+  drawLeftNum = drawLeftNum - 1;
+}
+```
+
+Additionally, the database would need to store more information, like:
+
+| User id | AI Chat Attempts | AI Drawing Attempts | Others |
+| ------- | ---------------- | ------------------- | ------ |
+| 1       | 1                | 5                   | ...    |
+| 2       | 2                | 6                   | ...    |
+
+As the number of features grows, similar but not identical validation logic would proliferate, making the system harder to maintain. The database would also need more columns, consuming more storage.
+
+With the point system, we can unify all usage variables (`chatLeftNum` and `drawLeftNum`) into a single `points` variable, with different features consuming different point amounts.
+
+Example code:
+
+```java
+// AI chat feature
+void doChat() {
+  // Get and validate remaining points
+  points = user.getPoints()
+  if (points < 1) {
+    throw new Exception("Insufficient AI chat attempts")
+  }
+  // On success, deduct 1 point
+  points = points - 1;
+}
+
+// AI drawing feature
+void doDraw() {
+  // Get and validate remaining points
+  points = user.getPoints()
+  if (points < 2) {
+    throw new Exception("Insufficient AI drawing attempts")
+  }
+  // On success, deduct 2 points
+  points = points - 2;
+}
+```
+
+We can further abstract point validation and deduction into reusable methods:
+
+```java
+// Validate remaining points
+// Parameter 'type' represents the feature
+void checkPoints(type) {
+  needPoints = 1;
+  if (type === "draw") {
+    needPoints = 2;
+  }
+  points = user.getPoints();
+  if (points < needPoints) {
+    throw new Exception("Insufficient points")
+  }
+}
+
+// Deduct points
+// Parameter 'type' represents the feature
+void usePoints(type) {
+  needPoints = 1;
+  if (type === "draw") {
+    needPoints = 2;
+  }
+  points = user.getPoints();
+  // Deduct points
+  points = points - needPoints;
+}
+```
+
+With these two methods, the original code simplifies to:
+
+```java
+// AI chat feature
+void doChat() {
+  checkPoints("chat");
+  ...
+  usePoints("chat")
+}
+
+// AI drawing feature
+void doDraw() {
+  checkPoints("draw");
+  ...
+  usePoints("draw");
+}
+```
+
+Of course, this isn't the best practice yet, as the code still contains "hard logic"—determining point consumption based on `type`.
+
+We can create a JSON configuration file to store point consumption for all features:
+
+```json
+[
+  {
+    "type": "chat",
+    "usePoints": 1
+  },
+  {
+    "type": "draw",
+    "usePoints": 2
+  },
+]
+```
+
+Then write a helper method to fetch the point cost for a given feature:
+
+```java
+int getUsePoints(type) {
+  list = readJSON("config.json")
+  for (item : list) {
+      if (item.type == type) {
+          return item.usePoints;
+      }
+  }
+  return 0;
+}
+```
+
+Now, the point validation and deduction methods no longer need `if-else` logic!
+
+```java
+// Validate remaining points
+void checkPoints(type) {
+  needPoints = getUsePoints(type);
+  points = user.getPoints();
+  if (points < needPoints) {
+    throw new Exception("Insufficient points")
+  }
+}
+
+// Deduct points
+void usePoints(type) {
+  needPoints = getUsePoints(type);
+  points = user.getPoints();
+  // Deduct points
+  points = points - needPoints;
+}
+```
+
+To add a new feature, we only need to add an entry to the JSON file:
+
+```json
+{
+  "type": "writeBook",
+  "usePoints": 2
+}
+```
+
+No matter how many new features are added, the database only needs to store the user's remaining points, eliminating the need for additional columns. This greatly simplifies development!
+
+#### 3. Enhanced Scalability
+
+Generally, the more universal the logic, the better the scalability.
+
+Without the point system, adding separate usage limits for each feature would make the logic increasingly complex if we later needed to introduce additional consumption tiers within a feature.
+
+For example, the AI drawing feature might support an additional "image-to-image" mode. If only basic AI drawing is used, it consumes 1 attempt; with image-to-image, it consumes 2 attempts. What if more modes are added? Would we need to consume 1.5 attempts? What if fractional attempts aren't supported?
+
+Such logic could eventually corner the system, making it impossible to extend further.
+
+With the point system, we can scale up the numbers—for example, making 1 attempt equal to 10 points. This allows us to set additional point costs for extra features, like 20 points for basic AI drawing plus 10 more for image-to-image, making the system more extensible.
+
+## Applications of the Point System
+
+Given these advantages, our AI product adopts the point system as its primary payment model.
+
+Of course, the point system has drawbacks, such as being less intuitive or having non-fixed value. For products where "marketing > value," giving users trial costs might actually reduce sales compared to subscription models.
+
+Thus, whether to use the point system depends on the specific context and product nature.
+
+Our AI product combines the point system, membership, and package plans to offer users comprehensive choices. For example, members can claim more daily points and enjoy additional benefits, while non-members can purchase points at a discount. This approach retains the universality and flexibility of the point system.
+
+Moreover, the point system is a **universal design** that can apply to many scenarios beyond payments, such as:
+
+- E-commerce platforms where shopping points redeem products.
+- Food delivery apps where order points unlock discounts.
+- Education platforms where course-watching earns points for rewards.
+
+## Final Thoughts
+
+The point system is a flexible and universal pricing strategy design. It enhances user experience while simplifying development and improving scalability.
+
+Key takeaways:
+
+1. The point system offers flexibility, lowering trial costs and psychological barriers.
+2. It adapts to diverse business needs.
+3. It unifies concepts and simplifies development.
+4. It's not a one-size-fits-all solution—use it contextually.
+5. Combine it with memberships, packages, etc., for optimal results.
+
+In the Vibe Coding era, AI can generate point system code for you. However, designing a pricing strategy that makes users willing to pay still requires careful thought.
+
+Keep striving to design pricing strategies that satisfy users! 💪
+
+## Recommended Resources
+
+1) Yupi's AI Navigation Site: [AI Resource Directory, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)  
+2) Programming Navigation Learning Community: [Learning Paths, Coding Tutorials, Hands-on Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)  
+3) Programmer Interview Cheat Sheet: [Internship/Campus/Social Recruitment FAQs, Company Interview Questions](https://www.mianshiya.com)  
+4) Resume Builder for Programmers: [Professional Templates, Rich Examples, Interview Ready](https://www.laoyujianli.com)  
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus/Social Recruitment Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/50 产品变现/09 SEO 搜索引擎优化实战.md

@@ -0,0 +1,194 @@
+# SEO Search Engine Optimization Practical Guide
+
+> Let more people discover your product
+
+Hello everyone, I'm programmer Yupi. Our team's programmer interview question bank website [Mianshiya](https://www.mianshiya.com/) was indexed and recommended by major search engines like Baidu within less than half a month of its launch!
+
+The effect is obvious. When users search for "Mianshiya," the first thing they see is our own website, thereby increasing traffic to the site:
+
+![](https://pic.yupi.icu/1/image-20240815102430905.png)
+
+Getting search engines to index your website faster is actually a deep subject, and there's a professional term for it: SEO. For individual website owners, search engine traffic is crucial. Everyone wants their website to be seen by more people, right? Even without considering profits, having a website with high traffic can be a great talking point when writing resumes and during interviews. So, I recommend that programmer friends should have a basic understanding of SEO.
+
+In this article, I'll use my Mianshiya website as an example to share some practical SEO tips to help your website get indexed by search engines faster. Additionally, I'll introduce a new concept in the AI era — GEO (Generative Engine Optimization) — to help your product be discovered by more people in the AI search era.
+
+Whether you're using Vibe Coding for personal projects or aiming to create a real product, mastering SEO and GEO methods can help you gain more traffic.
+
+⭐️ You can also watch the video explanation here: https://www.bilibili.com/video/BV1tz421i7Q1
+
+## Yupi's SEO Insights
+
+### 1. What is SEO?
+
+SEO stands for Search Engine Optimization, which makes it easier for search engines to index and display your website. This allows more people to discover your site through search engines like Baidu and Google, thereby increasing website traffic and visibility.
+
+Before learning how to optimize for SEO, let's briefly understand the SEO process: how do search engines discover your website and make it searchable for users?
+
+### 2. The SEO Process
+
+The SEO process can be divided into four main stages: crawling, indexing, ranking, and indexing. Below, I'll explain these four steps in detail.
+
+#### 1. Crawling
+
+Crawling is the first step in the SEO process. Search engines send out crawler programs (commonly known as spiders) that crawl the internet, visit various websites, and capture webpage content. These spiders follow links from one page to another, attempting to traverse the entire website.
+
+#### 2. Indexing
+
+After crawling, search engines analyze the webpage content and decide whether to include the page in their database. Only indexed pages can appear in user search results, so ensuring your pages are indexed is a crucial step in SEO. Some websites may have many links and content, but if search engine spiders don't like or index them, users won't find them even if they search specifically for your site.
+
+#### 3. Ranking
+
+Ranking refers to the process where search engines organize and categorize the indexed webpage content, creating a massive index library. This process is similar to tagging each webpage so that when users search, the search engine can quickly find pages related to the search terms.
+
+For example, our Mianshiya website includes: Java interview questions, front-end interview questions, C++ interview questions. These terms could be set as indexes. If users search for content containing these terms, they might find our website.
+
+#### 4. Ranking
+
+With so many websites and indexes, how can we ensure users find our website first? This involves the final step of SEO — ranking.
+
+When users enter keywords into a search engine, the search engine uses its algorithm to select the most relevant pages from the index library and **sort them based on relevance, weight, and website quality** to determine which pages appear on the first few pages of search results.
+
+This is the SEO process. The SEO optimization tips I'm about to share are all centered around these processes.
+
+### 3. How to Optimize for SEO?
+
+#### 1. Keyword Optimization
+Keywords are the terms users enter into search engines. You can increase your website's indexing and improve its ranking in relevant searches by setting keywords (Keywords) and descriptions (Description) in the HTML head information of your website.
+
+Keyword selection needs to be precise and strongly related to your website content. Avoid keyword stuffing, as it can be flagged as cheating by search engines.
+
+For example, for an interview question bank website, you can set the following keywords and description:
+
+```html
+<meta name="keywords" content="programmer interview,Java interview questions,programmer job search,computer">
+<meta name="description" content="For programmer interview practice, come to Mianshiya, a free interview question bank website for programmers. Massive high-frequency Java interview questions to help you prepare for technical interviews.">
+```
+
+#### 2. Website Structure Optimization
+Website structure optimization can be divided into two points: overall page structure optimization and content structure optimization for each page.
+
+For the entire website, the nesting hierarchy of pages should be as flat as possible, minimizing page levels to reduce the difficulty for crawlers to crawl.
+
+For example, which of the following two website structures do you think is easier for crawlers to fully access?
+
+![](https://pic.yupi.icu/1/image-20240815112845394.png)
+
+The answer is obvious. For important pages you want to be discovered by search engines faster, you should minimize the path to reach the page and appropriately increase the number of entry points to that page.
+
+For each page, there should be a clear hierarchical structure. Use reasonable heading tags (such as `<h1>` for first-level headings) to make the page content easier to index.
+
+#### 3. Friendly Links
+
+When I first started building personal websites in college, I used friendly links to increase website weight (though the effect was limited). The method is simple: add links to other websites on your site, and have other websites add links to your site. This mutual recommendation makes it easier to improve rankings in search engines.
+
+The principle behind friendly links is simple. Many search engines rank websites based on weight. How is weight calculated? A simple algorithm (Page Rank) assigns each website a number of votes. Each friendly link from another website to yours counts as a vote for your site. Websites with more votes gain higher weight and ranking. Friendly links are like mutual voting, which is better than having no votes at all.
+
+![](https://pic.yupi.icu/1/image-20240815113641780.png)
+
+Of course, this mutual recommendation method should be used cautiously. Excessive link exchanges can lead to weight dispersion.
+
+#### 4. Sitemap File
+A Sitemap is a file that lists all the pages on your website, usually placed in the root directory or specified via the robots.txt file. It helps search engines quickly understand your website's structure and crawl the pages you want indexed first.
+
+It's like giving the crawler a map, so it doesn't get lost and doesn't miss important pages on your site.
+
+For simpler websites, a static, unchanging Sitemap is sufficient. For example:
+
+![](https://pic.yupi.icu/1/image-20240815114215436.png)
+
+For websites with continuously updated content, there's a more advanced approach: using programs to automatically generate dynamic Sitemaps. For example, generating a Sitemap file for daily new questions helps crawlers discover the latest content faster.
+
+Additionally, some search engines support actively uploading Sitemap files, which can further shorten the time it takes for your site to be discovered and indexed.
+
+#### 5. SSR Server-Side Rendering
+
+Note: SSR here is not the one we talk about when playing gacha games!
+
+SSR (Server-Side Rendering) is one of the most effective SEO techniques. It involves generating **complete HTML pages** on the server and sending them directly to the browser. Compared to traditional front-end AJAX dynamic data rendering, SSR makes it easier for search engines to crawl complete page content, thereby improving SEO.
+
+For example, if it's a front-end website that dynamically requests data, the crawler might see incomplete webpage content, as shown below:
+
+![](https://pic.yupi.icu/1/image-20240815114606517.png)
+
+This is because the browser pulls the webpage from the server, then loads JS scripts, and finally sends requests to fetch data.
+
+If SSR is used, the server completes the data request and assembles the data into the page before returning it to the front-end. The crawler sees more complete webpage content, as shown below:
+
+![](https://pic.yupi.icu/1/image-20240815114910820.png)
+
+While SSR is effective, it also increases server pressure and usually involves higher development costs. For example, our Mianshiya website was developed using the Next.js framework, and we encountered many pitfalls during development.
+
+Oh, by the way, using PHP to develop SSR websites is very convenient, which might be one reason why PHP was so popular in the past.
+
+#### 6. SSG Static Site Generation
+
+Similar to SSR, SSG is another major SEO optimization tool. It involves pre-generating **static HTML files** for all pages during website construction and deploying them directly to the server. When users visit the site, they directly receive the pre-generated HTML files. Unlike SSR, there's no need for the server to temporarily request data.
+
+This method not only significantly improves page loading speed but also allows search engines to index all pages faster and more completely. Many blog site generators (like Hugo, VuePress, Hexo) package written articles into static HTML files before deploying them to the server.
+
+Of course, SSG is not a silver bullet. It's suitable for websites with relatively fixed content and low update frequency, such as personal blogs. Static websites are essentially a form of cache. If webpage content changes frequently, updating these files frequently can also incur significant costs.
+
+So, we can think of a more advanced strategy: combining SSR + SSG! Use static generation for relatively fixed content pages, SSR for content-changing pages, and pure client-side rendering for pages that don't need SEO.
+
+#### 7. Spend Money
+
+Note: The above methods do not guarantee absolute effectiveness but increase the probability of search engine indexing and ranking optimization. SEO strategies require continuous adjustment and long-term validation.
+
+If there's no SEO-savvy technical staff in your team and you want your website to be recommended by search engines quickly, then you can only "spend money." It's simple and brutal: buy ads to make your webpage appear in the top few search results. Many companies do this, but for individual website owners without revenue, it's better to stick to the methods recommended above.
+
+## GEO in the AI Era: Generative Engine Optimization
+
+With the popularity of AI conversational tools like ChatGPT, more users are starting to use AI to search for information instead of traditional search engines. This has given rise to a new concept: **GEO (Generative Engine Optimization)**.
+
+### What is GEO?
+
+GEO refers to optimizing your content to make it easier for AI search engines (like ChatGPT, Perplexity, Gemini) to understand and reference. When users ask AI questions, the AI crawls relevant content from the internet and generates answers. If your website content is referenced by AI, it can gain more exposure.
+
+### Differences Between GEO and SEO
+
+- SEO: Optimizing websites to make them easier for traditional search engines (like Baidu, Google) to index and rank.
+- GEO: Optimizing content to make it easier for AI search engines to understand and reference.
+
+### How to Excel at GEO?
+
+1) Structured Content
+
+AI prefers well-structured content. Use headings, lists, tables, etc., to organize content, making it easier for AI to extract key information.
+
+2) Provide Authoritative Information
+
+AI tends to reference authoritative and accurate information. Ensure your content is data-backed and cited, enhancing its credibility.
+
+3) Use Natural Language
+
+AI has strong natural language understanding capabilities. Write in plain, easy-to-understand language, avoiding overly specialized jargon, making it easier for AI to understand your content.
+
+4) Answer User Questions
+
+AI searches are typically conducted in a Q&A format. Directly answer potential user questions in your content, such as "How to do XX" or "What is XX," making it easier for AI to reference.
+
+5) Keep Content Updated
+
+AI prefers to reference the latest content. Regularly update your website content to maintain information timeliness.
+
+6) Provide Complete Context
+
+AI needs to understand the context of content to reference it accurately. Ensure each article has a complete background introduction and detailed explanations, avoiding confusion for readers (and AI).
+
+## Final Thoughts
+
+In the Vibe Coding era, creating products with AI is easy. However, getting more people to discover your product still requires mastering SEO and GEO methods.
+
+Keep pushing forward, and let more people discover your product!
+
+## Recommended Resources
+
+1) Yupi's AI Navigation Website: [Comprehensive AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Search Guides, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Question Bank: [Internship/Campus Recruitment/Social Recruitment High-Frequency Exam Points, Enterprise Real Questions Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Writing Tool: [Professional Templates, Rich Examples, Direct to Interviews](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Secure Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/50 产品变现/我的个人站长实战经验.md

@@ -0,0 +1,214 @@
+# My Practical Experience as a Personal Website Owner
+
+> The Complete Process from Development to Operation
+
+Hello, I'm Yupi the programmer.
+
+I've been a personal website owner for over 8 years since launching my personal blog during university. Throughout this journey, I've gained a lot. Beyond the joy of technical growth, the most rewarding aspect of being a personal website owner is having users engage with and praise your site—it's truly fulfilling.
+
+Of course, there have been many painful moments along the way, such as website attacks, database breaches, and endless user-reported bugs. However, looking back now, enduring these hardships has turned out to be a form of "happiness." On one hand, these experiences have helped me grow and enriched my expertise; on the other hand, being targeted by attacks and receiving bug reports indicates that your website has garnered some level of attention.
+
+But the most painful thing about being a personal website owner is: **putting your heart into a website that no one uses.** I believe many friends who own their own websites can relate to this feeling.
+
+![](https://pic.yupi.icu/1/image-20240620114230530.png)
+
+Recently, I've also spent a significant amount of energy leading a team to develop and optimize the Programming Navigation website, gaining even more experience.
+
+> Programming Navigation - Learning and Exchange Community: https://codefather.cn
+
+![](https://pic.yupi.icu/1/image-20240620114647840.png)
+
+In this article, I'll use the Programming Navigation website as an example to share the tasks involved in becoming a personal website owner and some of my practical experiences. I hope this will be helpful for friends who aspire to become independent developers.
+
+## How to Become a Personal Website Owner?
+
+Want to become a personal website owner? Want to create a successful personal website? Here are the essential steps you need to take.
+
+> You can also treat this section as a guide to the "website development process."
+
+### 1. Start with an IDEA
+
+What are you going to do?
+
+Defining the website's goal and core value is the first step in creating a website. Ideas are the most valuable—a good IDEA is the key to a website's success.
+
+Note, a good idea isn't something you ask others for. I once encountered a rather amusing question: "Yupi, Yupi, I want to start a business project. What should I do?"
+
+If someone had a good IDEA, why wouldn't they pursue it themselves instead of sharing it with you for free?
+
+How do you come up with an IDEA? Here are two methods I use:
+
+1. Start from your own needs—think about what you require. For example, school course registration is a need.
+2. Look at other websites for inspiration and areas for improvement. Ask yourself: What could existing websites do better? For instance, many friends complain about WeChat taking up too much space. Could you develop something better? You might just become the next pony 🐴.
+
+For example, my Programming Navigation IDEA originated from the issues my readers faced over years of sharing programming knowledge—low learning efficiency, scattered resources, lack of interaction, and no motivation. So our goal is: to provide a one-stop programming learning and exchange community, guiding you on your programming journey.
+
+### 2. Product Prototype
+
+Once you have an IDEA, start envisioning: What should the website look like? What core features should it have? Typically, you'll need to draft a detailed product design plan and create product prototype diagrams.
+
+In a company, this is usually the product manager's job, but as a personal website owner, you are the product manager—you decide what the website will look like!
+
+First, outline the website's functional modules. You can use a mind map or a list to present them. For example, our Programming Navigation's functional module design includes:
+
+- User Module: Includes user registration, login, and profile management.
+- Article Module: Allows users to publish, edit, and read articles.
+- Message Module: Notifies users of new comments and updates.
+- Search Module: Aggregates searches for all articles and resources.
+- Tutorial Module: Offers free and paid learning tutorials, supporting column reading and video playback.
+
+After confirming the functional modules, design product prototype diagrams for each feature. Don't worry if you lack professional product knowledge or thinking—this can be developed. You can learn by observing, imitating, or even borrowing features and designs from successful websites to quickly complete your product prototype.
+
+I drew the homepage prototype for Programming Navigation myself using Yuku's built-in drawing board or draw.io:
+
+![](https://pic.yupi.icu/1/image-20240620125043284.png)
+
+### 3. Requirement Analysis
+
+After completing the product prototype, you'll find a long list of features to develop.
+
+Don't panic—this is when we conduct requirement analysis and scheduling: Which requirements need to be implemented? Which ones should be prioritized?
+
+For team development, the product manager usually organizes a requirement review meeting with developers, testers, designers, and other roles to discuss. For personal website development, there's no need for meetings or professional requirement management tools—it's just extra hassle. Instead, create a requirement schedule, prioritizing all features that need to be implemented. Determine which ones must be completed first and which can be deferred to later iterations. For large functional modules, break them into smaller tasks for agile development and orderly progress.
+
+Here's an example of a requirement schedule from a new project I led in June:
+
+![](https://pic.yupi.icu/1/1718712573701-43a64ab8-b82f-4e47-b908-0e2b0fc97f49.png)
+
+### 4. Preliminary Design
+
+Once requirements are clear, it's time to **start multitasking**. Designers need to create design drafts, testers need to design test cases, and developers need to conduct technical selection and solution design.
+
+As a personal website owner, you'll need to handle all these tasks yourself. If you're a programmer, my suggestion is to reference other websites rather than designing everything from scratch in the early stages. Focus on completing features and getting users to engage with the product before refining the details. There's no need to follow a standard development process by designing test cases—just verify functionality manually after completing features. However, technical selection and solution design must be done carefully. It's best to create a detailed document outlining the implementation plan and specifics to avoid discovering issues or feasibility problems during development.
+
+Technical solution design includes core implementation plans, detail confirmation, database table design, interface design, etc. For example, the database table design for Programming Navigation's discussion section was confirmed through a solution document before coding began.
+
+![](https://pic.yupi.icu/1/image-20240620134404925.png)
+
+### 5. Development Implementation
+
+This section is familiar territory for programmer friends—it's the bread and butter of technical roles. For website development, it's typically divided into backend and frontend.
+
+#### 5.1 Backend
+
+The backend provides data operation and management capabilities. Backend developers usually need to provide API documentation for frontend developers to reference.
+
+There are many mainstream backend development languages like Java, Go, C++, PHP, C#, etc., and frameworks like Spring Boot (Quarkus) for Java or Gin for Go can improve efficiency.
+
+Our Programming Navigation backend is developed using Spring Boot, with most functionalities handled by MySQL, and some features utilizing Redis, WebSocket, etc.
+
+![](https://pic.yupi.icu/1/image-20240620142135649.png)
+
+#### 5.2 Frontend
+
+The frontend provides users with interactive pages. Typically, HTML, JavaScript, and CSS are used, along with frameworks like Vue or React to boost development efficiency. Beyond page development, frontend developers also need to consider browser compatibility, page load performance, search engine optimization (SEO), etc.
+
+In frontend development, choosing a good component library can significantly improve efficiency. We use Ant Design, which offers comprehensive components, allowing us to assemble pages like puzzles. The downside is that the library is somewhat heavy, so we might optimize it later.
+
+![](https://pic.yupi.icu/1/image-20240620142519047.png)
+
+For personal website owners, both backend and frontend development fall on you. My advice is to start with the backend—once the APIs, data, and logic are defined, frontend development becomes much easier. Also, it's better to handle complex logic on the backend to avoid maintaining two sets of logic and potential conflicts.
+
+### 6. Testing and Validation
+
+After development, multiple rounds of testing are required:
+
+1. Developer Self-Testing: Developers perform initial testing to ensure basic functionality works. For example, Java developers can write unit tests with JUnit.
+2. QA Testing: The quality assurance team conducts detailed testing, including functional, performance, and security tests.
+3. Product Acceptance: The product manager or requester performs final acceptance to ensure the product meets requirements.
+
+For personal website owners, besides self-testing, you can invite friends to test and help find bugs.
+
+Before officially launching or monetizing a website, thorough internal testing is usually necessary. Some of my past websites didn't undergo sufficient testing, leading to vulnerabilities upon launch. However, if traffic is low and bugs don't cause actual losses, the testing phase can be scaled back, as long as users have a way to report bugs.
+
+### 7. Deployment and Launch
+
+Deployment and launch involve placing website files on a server so users can access them via a domain.
+
+I've shared various deployment tutorials before—it's not difficult:
+
+- Traditional Server Deployment Tutorial: https://www.bilibili.com/video/BV1eT421i7si
+- Container Hosting Platform Deployment Tutorial: https://www.bilibili.com/video/BV1Xm421N7Xj
+- Microservices Project Deployment Tutorial: https://www.bilibili.com/video/BV1Cp4y1F7eA
+
+Initially, I recommend using traditional server deployment due to lower costs. Also, start with low server configurations—1 core and 2 GB RAM is sufficient for most personal websites. Don't buy high-configuration machines right away—they won't necessarily boost performance and may waste resources. As traffic grows, consider switching deployment methods or upgrading server configurations.
+
+Regularly monitor server load and resource utilization. Many of my websites use minimal CPU and memory, so I host multiple sites on the same server to improve resource efficiency.
+
+![](https://pic.yupi.icu/1/image-20240620140059240.png)
+
+### 8. Operation and Analysis
+
+Launching is just the beginning—website owners need to continuously operate the site (e.g., publishing content, organizing events) and monitor and analyze traffic and operational metrics. Tools like Google Analytics, 51.La, and Baidu Statistics can be used for data analysis with just a line of code. These metrics help you understand UV, PV, user sources, feature usage, ad performance, etc., and are crucial for future product improvements and optimizations.
+
+![](https://pic.yupi.icu/1/image-20240620142703690.png)
+
+### 9. Website Optimization
+
+Website optimization is an ongoing process and a great way to enhance technical skills. It involves multiple aspects, such as:
+
+- Product Optimization: Collect user feedback to improve features and user experience.
+- Page Design Optimization: Ensure the website design is more aesthetically pleasing and user-friendly.
+- Website Performance Optimization: Improve loading speed through code optimization, CDN usage, etc.
+- Website Availability Optimization: Ensure 24/7 uptime and avoid downtime.
+- Website Cost Optimization: Monitor server resource utilization to optimize costs and avoid waste.
+
+Note, website optimization isn't about guessing—it should be based on **aligning with the product's positioning** and **analyzing actual data and user feedback** to determine optimization strategies.
+
+What does this mean?
+
+For example, I once thought website optimization meant constantly adding new features—whatever other websites had, I added. In the end, many features went unused, distracting from focusing on optimizing a single feature to its fullest. Also, users don't always know what they want—not all user suggestions should be implemented. For instance, a user suggested adding a real-time chat room to Programming Navigation. In the past, I might have done it (thinking: it's doable). But now, I'd consider and decline because our platform already has community interaction capabilities, and a real-time chat room would increase management and operational costs—who knows what people might post in the group, right?
+
+Zhang Xiaolong, the head of WeChat, once said: "Every day, 100 million people want to teach me how to make a product." If WeChat blindly followed user suggestions without considering its original purpose and positioning, it would likely be even more bloated than it is now.
+
+If you're unsure about an optimization, conduct user research or use a phased rollout to let a subset of users experience the optimized website and gather feedback to validate the optimization's effectiveness.
+
+### 10. Website Promotion
+
+During a live stream, I asked everyone: What do you think is the key to a website's success?
+
+Some said: Great product experience.
+
+Others said: Lots of users.
+
+I don't entirely agree. In my opinion, the key to a website's success is: **Having users => Making money.**
+
+I've seen many well-made products, even comparable to big companies, that ultimately failed. Why? No matter how good your product is, if no one uses it, it's useless. This is what I consider the most painful aspect of being a personal website owner.
+
+Therefore, website promotion is crucial. Here are some methods:
+
+1. Content Creation: Write articles, create videos—attract users with quality content.
+2. SEO Optimization: Improve your website's search engine ranking to attract more organic traffic.
+3. Ad Campaigns: Invest in ads, collaborate with KOLs, or buy traffic on ad platforms. First, optimize your ad copy to maximize effectiveness before launching campaigns. Monitor ROI (Return on Investment)—if you spend 1 yuan and earn 1.01 yuan, you've succeeded!
+
+Running a website must consider profitability. I know many personal website owners who run their sites purely out of passion, without any profit. Initially, they're enthusiastic, but soon, due to busy schedules or hassle, they abandon their sites. Essentially, they lose motivation and "starve." Most of my websites were completely free, like Free SQL Learning, Free Cybersecurity Learning, Kuangkuang University, SQL Generator, Geek Fan Browser Homepage, etc., and I took pride in offering free websites. However, these sites didn't grow because without income, there was no manpower or energy to maintain updates. Shifting perspective, if a website has paid content that generates profit, enabling you to invest resources and grow the site, wouldn't that be better?
+
+Of course, for a website to profit, it must offer a good user experience. Through continuous optimization, operation, and promotion, a website can evolve and grow larger.
+
+## Final Thoughts
+
+By now, you should have a comprehensive understanding of what it takes to be a personal website owner.
+
+Friends often ask me: For programmers, is technology more important or business?
+
+Through this article, I want to say: **Technology is foundational—it's your bread and butter. But as your career progresses, non-technical skills become increasingly important.**
+
+Skills like product thinking, operational ability, promotional skills, salesmanship, communication, and writing are all honed through the process of being a personal website owner.
+
+Programmers naturally possess the attributes of website owners—why not try becoming one? Creating your own product is a fulfilling endeavor.
+
+In the Vibe Coding era, the barrier to becoming a personal website owner has significantly lowered. You can use AI to quickly develop websites, generate content, and optimize operations. As long as you have ideas and are willing to try, you can create valuable products.
+
+Keep it up, future personal website owners!
+
+## Recommended Resources
+
+1) Yupi AI Navigation: [AI Resource Collection, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheat Sheet: [Internship/Campus Recruitment/Social Recruitment High-Frequency Topics, Enterprise Exam Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Tool: [Professional Templates, Rich Examples, Direct to Interviews](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/50 产品变现/我的自媒体涨粉运营之路.md

@@ -0,0 +1,282 @@
+# My Journey of Growing a Self-Media Audience
+
+> From 0 to 2 Million Followers - A True Story
+
+Hello everyone, I'm Yupi. Born in 1998, I was previously a full-stack developer at Tencent and am now an AI programming knowledge blogger with 2 million followers across platforms + entrepreneur.
+
+In this article, I want to share my 9-year journey: from self-learning programming in college → girlfriend left me for someone else → joined Tencent → resigned to start a business → grew self-media from 0 to 2M followers → product bankruptcy → company products now with 1M+ MAU. There were glorious moments and darkest hours; successes and painful lessons.
+
+If you:
+- Want to quickly grow your self-media audience or increase income through side hustles
+- Want to know how to start a business from scratch
+- Are interested in programming learning, job hunting, or AI technology
+- Are currently or planning to start a business and need real experience references
+
+Then this article should give you some inspiration.
+
+If you've never heard of me before or only followed me recently, great—let me tell you a true story of an ordinary programmer becoming a self-media entrepreneur.
+
+## My Story
+
+### College: Girlfriend Left, But I Came Out on Top
+
+After entering college in 2016, I started teaching myself Java, frontend, Python, Go, and other programming technologies.
+
+Back then, I was truly a workaholic. Attending classes during the day and coding in the library at night was the norm, often returning to the dorm past midnight. As the head of a studio, I led teams to build dozens of websites for the school. With the money earned, I bought my first monitor. The feeling of making money with my own "skills" was incredibly satisfying.
+
+![](https://pic.yupi.icu/1/IMG_20171111_142957%E4%B8%AD.jpeg)
+
+But the cost was heavy.
+
+Long-term intense studying + late nights wrecked my digestive system. For a while, I couldn't eat properly and survived on fast food. Worse, my girlfriend left me because I was always coding and never spent time with her.
+
+It was a painful period. I even questioned whether all this effort was worth it.
+
+But since I'd chosen this path, there was no turning back. I kept pushing forward and eventually graduated as the top student in my major, winning the National Scholarship, National Challenge Cup award, Shanghai Special Prize, and Shanghai Outstanding Graduate title. In my junior year, I co-authored the textbook *Blockchain Smart Contract Technology and Applications* with a professor.
+
+Looking back now, that feeling of giving your all for a goal was pure. Though I lost a lot, I gained even more.
+
+### Tencent: A 211 Undergrad's Comeback Among Tsinghua/Peking Elites
+
+During the 2019 campus recruitment, I received offers from several major tech companies and ultimately chose Tencent.
+
+![](https://pic.yupi.icu/1/IMG_20210520_102141%E4%B8%AD.jpeg)
+
+Honestly, the pressure was immense. I was just a 211 undergrad, surrounded by interns from Tsinghua, Peking, Fudan, and Shanghai Jiao Tong—all with better academic backgrounds. During my first internal training session, when I introduced my school, the looks I got made me feel like a "stray dog."
+
+But I didn't lose confidence. If I couldn't compete academically, I'd compete with time and effort. While others clocked out, I stayed to study internal docs. While they partied on weekends, I pored over project code. During my most intense periods, I even bought a camp bed and slept at the office because I missed the last subway.
+
+> Sleeping at the office was awful—cleaning staff would wake you up at 6 AM.
+
+Hard work paid off. I aced my probation review with the highest score in my team and landed an SSP offer (the highest tier).
+
+During my nearly 4 years at Tencent, I led BI project development, contributed to big data projects, won internal app development competitions, earned 5-star employee ratings, and got fast-tracked for promotions. Within 2.5 years, I was mentoring new hires.
+
+![](https://pic.yupi.icu/1/-33f2aa793b0cc6e2.jpg)
+
+After starting work, I used my earnings to buy a TV for my family and a foot massager for my parents. At that moment, I felt all the effort was worth it.
+
+### Self-Media: From 18 Views on Douyin to 2M Followers
+
+My first self-media attempt was short videos.
+
+During the pandemic, I created a Douyin account called "Interview King," sharing programmer interview questions. My first video took 3-4 hours to make and got exactly 18 views!
+
+Though disheartened, I didn't give up. For over a month, I posted at least one video daily. My highest-viewed video hit 1,800 views, netting me my first 100+ followers.
+
+Later, I pivoted and created a new account, [Programmer Yupi], sharing my real experiences. The next morning, I woke up to 99+ messages—I was ecstatic!
+
+But opening the comments crushed me: skepticism, disdain, even insults. "Another marketing account," "Total scam," etc. Some hate comments had more likes than my video.
+
+At the time, I wasn't thick-skinned enough and deleted the comments. Looking back, I should've thanked those critics—engagement was sky-high (lol).
+
+During the 2020 National Day holiday, I made another decision.
+
+I'd just finished gaming, feeling aimless. After a year at Tencent, I realized I'd become lazy outside work, wasting post-work hours in a gaming haze.
+
+I wondered: Could some external force reignite my college-era drive?
+
+With that thought, I didn't even bother selling my in-game items. I immediately opened my WeChat public account *Programmer Yupi* and wrote my first article.
+
+**From that day on, I never had time to sell game items again.**
+
+Initially, I naively thought more articles = more followers, so I set a goal of one post daily. With almost no followers, I brute-forced over a dozen low-quality articles with minimal reads or growth.
+
+Soon, I realized this was unsustainable and had to change tactics.
+
+I started networking, learning from successful predecessors, mimicking their approaches. I expanded channels, cross-posting content across platforms. I even livestreamed for the first time—with a dozen viewers, I awkwardly repeated, "Hi everyone, this is my first stream."
+
+**Most extreme: I livestreamed coding sessions past midnight for 100+ consecutive days after work.**
+
+The pressure was real. They say programming causes hair loss, and self-media does too—so combining both must mean torrential hair loss! My scalp was literally weeping!
+
+But I believe: What seems like overnight success is actually **years of accumulation**. Talented creators just need to flip a switch for their light to shine.
+
+Through persistence, I've now created nearly 1,000 pieces of content, millions of words, and accumulated 2M+ followers.
+
+Over time, skepticism and insults dwindled. Nowadays, negative comments are rare. Sometimes I miss the hate—engagement was killer (kidding).
+
+![](https://pic.yupi.icu/1/15c18871868fe83f_edit_64834263570835%2525E5%2525A4%2525A7.jpeg)
+
+### Knowledge Monetization: From Skepticism to Recognition in 3 Years
+
+In 2022, I launched a paid knowledge community—now called [Programming Navigation](https://codefather.cn).
+
+Initially, there was skepticism, which I understood. But I persisted because I didn't want to be someone who cashed in on followers and abandoned content. That would hurt my conscience.
+
+Over 3 years, I've guided members through dozens of original project tutorials, covering AI app development, microservices, high-concurrency systems, and more. Many projects include 100K+ word guides + hours of video tutorials. I even published a project tutorial book—I'm truly committed.
+
+![](https://pic.yupi.icu/1/mmexport1730163221798_edit_1144980604320076.png)
+
+Many students landed big tech offers using these projects. Seeing their success brings me immense joy.
+
+![](https://pic.yupi.icu/1/1762859442735-46ca4e62-9331-4c40-b5d7-84a5a192e492.png)
+
+Today, [Programming Navigation](https://codefather.cn/) is one of China's largest programming learning communities, helping hundreds of thousands improve their skills.
+
+![](https://pic.yupi.icu/1/image-20251217143826194.png)
+
+### Entrepreneurship: From 50K Users to Bankruptcy in One Month
+
+In 2023, I made my biggest life decision: quitting to start a business.
+
+Reasons:
+1) The AI boom was here—I wanted in.
+2) Limited growth at the company—I wanted to pursue my passions.
+
+The company felt like a cage. I had many ideas, but work consumed most of my time. Some colleagues even reported me for doing self-media.
+
+I didn't want constraints. I wanted to do what I loved.
+
+![](https://pic.yupi.icu/1/IMG_20230406_144451%E4%B8%AD.jpeg)
+
+At 24, I formed a 4-person team and embarked on a grueling entrepreneurial journey with zero experience.
+
+![](https://pic.yupi.icu/1/IMG_20230628_230332%E4%B8%AD.jpeg)
+
+**Honestly, these 2+ years of entrepreneurship brought more setbacks than my first 20+ years combined—worse than failing college exams.**
+
+Initially, I was pumped and confident. With just one frontend developer, we built an AI assistant platform *Yu Cong Ming AI* in about a month.
+
+![](https://pic.yupi.icu/1/image-20251217144043123.png)
+
+It launched smoothly, hitting 50K users in a week! I started fantasizing about becoming the next "Li" (Chinese Bill Gates), even taking the team to Beijing for celebration.
+
+**But things changed overnight.**
+
+Within a month, the product went bankrupt—revenue couldn't cover costs!
+
+AI products got banned, competitors flooded the market, and we'd given away too many free memberships (exploited by users). It was devastating—our first product, our hope, gone.
+
+They say embrace change—but this change hugged me to death!!!
+
+![](https://pic.yupi.icu/1/Videoframe_20250306_141255_com.huawei.photos%E5%A4%A7.jpeg)
+
+Later, I cooled down and realized chasing viral hits without a stable team was too risky. Better to focus on long-term value.
+
+We shifted to utility products: [Lao Yu Resume](https://www.laoyujianli.com/), [Code Snippets](https://codecopy.cn/), [Clip Assistant](https://jianqiezhushou.com/), [Interview Duck](https://www.mianshiya.com/), etc. We also kept improving Programming Navigation, releasing more project tutorials.
+
+**The pressure was unimaginable.**
+
+Massive monthly costs, team磨合, product iterations, market competition, slander, cyberbullying, reports, rumors, fraud—TV drama plots became my reality.
+
+My health collapsed too. Chronic sleep deprivation, irregular meals, and stress wrecked my digestion, requiring hospital tests. My hair fell out alarmingly fast—see proof:
+
+![](https://pic.yupi.icu/1/mmexport1744270908127%E4%B8%AD.jpeg)
+
+My diary from that time summed it up in one word: "numb." The mental strain was like Damocles' sword hanging overhead.
+
+![](https://pic.yupi.icu/1/mmexport1730442587636.jpg)
+
+No exaggeration—I was depressed more days than in my entire "previous life."
+
+But I didn't quit.
+
+Early on, I feared mistakes and failure. But after repeated failures, I grew oddly "addicted"! Each failure brought growth:
+- Product bankruptcy → deeper product/business thinking  
+- Hiring mistakes → refined recruitment standards  
+- Contract breaches → better legal awareness
+
+Now, I enjoy the stumble-and-learn process. My mindset stabilized. I tell myself: "I'm just paying tuition. Even if the company fails, it's a unique experience, right?"
+
+![](https://pic.yupi.icu/1/mmexport1713100066833%E5%A4%A7.jpeg)
+
+### Now: Back to Square One?
+
+Today, my tech company Yuyuan Network has 10+ team members.
+
+![](https://pic.yupi.icu/1/IMG_20241219_163148_edit_339910632357506%E4%B8%AD.jpeg)
+
+After 2.5 years, we've built Programming Navigation, Interview Duck, Lao Yu Resume, Mian Duo Duo, AI Navigation, Clip Assistant, Code Snippets, Algorithm Navigation, Kuang Kuang University, and more. [Interview Duck](https://mianshiya.com) now has hundreds of thousands of users, and our product matrix collectively exceeds 1M MAU.
+
+![](https://pic.yupi.icu/1/%E9%9D%A2%E8%AF%95%E9%B8%AD%E5%88%B7%E9%A2%98%E7%A5%9E%E5%99%A8%E7%83%AD%E9%97%A8%E5%85%AB%E8%82%A1%E6%96%87.png)
+
+But ironically, **I feel like I'm back where I started.**
+
+I still spend days typing away: writing articles/videos, creating programming/AI tutorials, learning, researching needs. You'd never guess this is a team leader's work—it often feels like I've time-traveled to 2.5 years ago.
+
+![](https://pic.yupi.icu/1/IMG_20240131_104457_edit_1116282194475497%E4%B8%AD.jpeg)
+
+Why still do this myself?
+
+First, I love creating—even if others see it as pointless tinkering, I enjoy it.
+
+Second, I don't want to just manage. I aim to maintain technical skills and output ability. If the company fails, I can still compete in the job market.
+
+Plus, my company is IP-based—my personal brand is foundational.
+
+Our workflow: **I handle external output; the team delivers**. I contribute as a developer while creating content to drive traffic.
+
+I still study cutting-edge tech like AI, building my [AI Resource Hub](https://ai.codefather.cn). I consume 3-5 articles/videos daily—a habit I've kept for years.
+
+Oh, last year I opened an escape room venue. It's already bankrupt, LOL *cries*... That sci-fi-worthy saga deserves its own article.
+
+![](https://pic.yupi.icu/1/mmexport1737541379400.jpg)
+
+## Honest Advice for Aspiring Self-Media/Creators
+
+Given my journey, here's some hard-earned wisdom:
+
+1) **Cold Start: Authenticity Matters Most**  
+The beginning is always tough. My first followers came from heartfelt content that got reposted by bigger accounts.  
+From observation, **the more real/natural you are, the likelier you'll blow up**. Don't fear backlash—trolls come with the territory. I embrace being a goofball—who argues with a clown?  
+
+![](https://pic.yupi.icu/1/IMG_20251021_184310%E5%B0%8F.jpeg)  
+**Quality content is king. Authenticity is AI-era gold.**  
+
+2) **Persistence: Lower Expectations, Keep Going**  
+Many stress over low engagement, feeling unseen/unappreciated.  
+But **persistence guarantees success**.  
+I never had viral hits—followers grew gradually. My first Douyin video had 18 views; early blog posts had single-digit reads.  
+But streaming coding past midnight for 100+ days broke barriers.  
+Best antidote to anxiety: **Lower expectations + consistent action**. Treat yourself as a beginner, keep improving.  
+
+![](https://pic.yupi.icu/1/%E9%B1%BC%E7%9A%AE22%E5%B9%B4%E5%B7%A5%E4%BD%9C.png)  
+
+3) **Content: Fun > Dry Knowledge**  
+Understand your audience. In-depth tutorials attract seekers—casual learners prefer bite-sized, entertaining content.  
+Record spontaneous ideas; avoid forced scripts. Cut fluff, add memes; use funny GIFs/music in edits.  
+My quality checklist:  
+- Entertaining  
+- Relatable/real  
+- Leaves value (knowledge/tangible takeaway)  
+- Concise/clear focus  
+
+4) **Products: Validate Fast, Iterate Constantly**  
+Don't overcomplicate. **Start with MVP (minimum viable product)**, validate quickly, then refine.  
+My first product failed partly because we over-invested upfront, giving away too many free memberships (exploited by users)—poor cost control.  
+
+5) **Team: Learn to Delegate**  
+Early on, I micromanaged—coding everything myself, bearing all burdens. Result? Inefficiency → anxiety → paralysis.  
+**Delegating is a must for founders.**  
+It took me ages to prioritize internal documentation. Now, with 4,790 team docs, I have more time to create.  
+
+6) **Mindset: Enjoy the Stumbles**  
+Traits for entrepreneurial success: endless creativity, calmness, resilience.  
+No matter others' opinions, I do what I find meaningful and joyful—that's enough.  
+
+![](https://pic.yupi.icu/1/IMG_20230405_113430%E4%B8%AD.jpeg)  
+
+7) **Health is #1 Priority**  
+Someone once asked a $10M-funded founder: "How to sleep well?" He smiled: "Get a better pillow." Back then, I didn't get it—now I do.  
+Seriously, **health is foundational**. Eat breakfast, sleep regularly. I'm the cautionary tale—wrecked gut, receding hairline.  
+
+## Closing Thoughts  
+
+Thanks for reading my story. Nine years: from self-taught coder to Tencent dev, 0 to 2M followers, entrepreneur with 1M+ MAU products.  
+
+I'm Yupi—a still-hustling programmer, a "workaholic" spending 90% time learning/working, an ordinary guy who loves sharing and creating.  
+
+Though my hairline's retreating, my passion isn't.  
+
+My motto: *Believe you can, and you will.* Often, limits are self-imposed. Now, I embrace failure—each misstep paves the way forward.  
+
+I'll keep sharing fun programming tips, practical AI tricks, audience-growth hacks, and entrepreneurial war stories.  
+
+**The journey's long—early followers like you are OG!**  
+
+![](https://pic.yupi.icu/1/IMG_20240921_233215%E5%A4%A7.jpeg)  
+
+## Recommended Resources  
+
+1) [Yupi AI Hub](https://ai.codefather.cn)

translations/en/Vibe Coding 零基础教程/50 产品变现/我的自媒体起号经验.md

@@ -0,0 +1,221 @@
+# My Experience in Building a Self-Media Account
+
+> From 0 to 100K Followers: A Real Journey
+
+
+
+Hello everyone, I'm Yupi. Just joined Platform X, and my follower count has already surpassed a few thousand. Honestly, I'm a bit overwhelmed, but I’m grateful for everyone supporting my dreams 🌹.
+
+Many friends have asked me how I did it?
+
+Aside from my existing influence on domestic platforms, the key lies in the method, which isn’t difficult and can be achieved by anyone. Moreover, this is essentially how I built my accounts across various platforms.
+
+Seeing the sudden surge in followers reminded me of the time when I went from 0 to 100K followers. Today, I want to share this story and some practical tips on building a self-media account.
+
+Whether you’re looking to promote your product through self-media or build a personal brand, these experiences can help you.
+
+
+
+## Starting with 18 Views
+
+During the special period in 2020, I was interning remotely at TX from home. One day, while scrolling through Douyin (TikTok), I noticed that there weren’t many programmers sharing technical content. Perhaps because Douyin is more entertainment-focused? Or maybe the limitations of short videos make it hard to explain technical concepts in just a few words?
+
+I’m someone who loves trying new things, and since creating short videos isn’t too costly, I started making them in my spare time.
+
+During college, I independently developed a product for interview preparation — Interview Monarch (yes, this is the prototype of my current product with hundreds of thousands of users — Interview Duck). So, my first Douyin account was named “Interview Monarch,” focusing on analyzing frequently asked programming interview questions, which also helped me secure more opportunities during the spring recruitment season.
+
+Once I started making short videos, I realized it wasn’t as simple as I thought.
+
+First, the production cost: making short videos isn’t just about filming with a phone or recording a screen. Beyond the topic and basic content, many elements require meticulous attention, such as the cover, title, tags, first impression, and opening. I would draft scripts, refine and validate the content, and then record. The first video took me three to four hours to complete.
+
+Hard work pays off! Guess what the final view count was?
+
+**I remember it clearly — after a day, the view count was a whopping 18!**
+
+I expected low views as a newcomer, but not THIS low!
+
+Of course, it was disappointing, but it was my first video; and my goal was pure — to **help others while solidifying my own knowledge**.
+
+So, I didn’t give up. I persisted for about a month, updating at least one video daily, and even three videos on weekends!
+
+Although each video only garnered a few dozen views, this month-long effort earned me **my first batch of followers** — around 100, with dozens being my friends. The highest-viewed video reached 1,800.
+
+That’s why I love the number 18 — it holds significant meaning for me.
+
+
+
+## The First Viral Video: Harsh Criticism
+
+One day, I paused to reflect: was this persistence still meaningful?
+
+I watched videos from other creators and realized that **authentic stories resonate the most**.
+
+So, I registered a new Douyin account, the current one — [Programmer Yupi], and for the first time, shared my programming learning and job-seeking journey through short videos.
+
+The result? The views and likes exceeded my expectations. The next morning, I woke up to 99+ messages, and I was thrilled.
+
+However, when I opened the comments section, my mood plummeted. The comments were filled with **skepticism, disdain, and even insults**. Many said, “Another marketing account,” or “Douyin is full of talent, fooling outsiders.”
+
+Well, I guess I now know why the video went viral — even though the feedback was negative, the **engagement rate** was incredibly high.
+
+I remember one critical comment received a massive number of likes, almost matching the likes on my video. Looking back, I’m grateful to those who criticized me, both then and now.
+
+After this video, I started thinking: if I wanted to share programming knowledge, perhaps I needed a more engaging, relatable, and acceptable approach. While creating content can be self-satisfying, making it enjoyable for the audience is a win-win.
+
+So, I began sharing high-quality, user-friendly programming resources and some tips I had accumulated. During this time, I continuously learned video creation techniques, analyzed data, optimized metrics, and drew inspiration from others’ videos.
+
+I recall a quote from my computer science professor in college: What is 1.01 raised to the power of 365? A small daily improvement leads to significant change. The scary part is blindly persisting without making any adjustments.
+
+
+
+## My First Livestream: Awkward Beginnings
+
+Next, I tried my first livestream. The screen showed a computer, and there were about a dozen viewers. **I didn’t know what to talk about or what these viewers were watching**, so I kept repeating, “Hello everyone, this is my first livestream.” Surprisingly, some people stayed.
+
+Later, I persisted with nightly livestreams. By interacting with viewers and discussing programming, I experienced diverse perspectives, maintained positive engagement with fans, and gained more followers.
+
+And would you believe it? I’m an introvert (ISTJ). Friends who’ve seen my company rant videos can probably tell.
+
+Through relentless effort, my Douyin account gradually gained traction, with steady growth in followers and views. While Douyin is more entertainment and lifestyle-focused, I’ve carved out a niche for myself and made many friends.
+
+Persistence also brought another change: the skepticism and insults in the comments dwindled. Of course, even now, many people still criticize me, but isn’t that normal? I’m not money — not everyone will love me. Seeing that my persistence has helped more students and received recognition is enough for me.
+
+
+
+## Expanding to Multiple Platforms
+
+With a foundation on Douyin, I ventured into other platforms like WeChat Official Accounts and Bilibili, all under the name “Programmer Yupi.”
+
+When I started on Bilibili, my first viral video was, as you might guess, my personal journey from learning programming to landing a job at a big tech company. I don’t remember the exact follower count, but this video essentially kickstarted my account. What I remember most is that some viewers noticed I’m a “crooked-mouth warrior,” haha.
+
+However, gaining followers on WeChat Official Accounts wasn’t as easy. Initially, I naively thought that posting more articles would attract followers, so I set a goal of one article per day. The result? Low quality, low readership, and minimal follower growth.
+
+Soon, I realized this approach was doomed and needed to change.
+
+So, I immersed myself in communities, learned from successful predecessors, sought collaborations, and republished content across multiple platforms. I leveraged Douyin to drive traffic to my WeChat Official Account. I’ll share more details about my journey from 0 to 100K followers on WeChat later.
+
+After about a year, I reached **100K followers** across Douyin (78K), WeChat Official Account (18K), and Bilibili — achieving my first small goal.
+
+
+
+---
+
+So, by now, you probably know what the method I mentioned at the beginning is, right?
+
+Yes, it’s **sharing authentic experiences**.
+
+From 18 views on a short video -> abandoning and restarting -> my first small success -> persistent livestreaming -> expanding to articles and long videos, what I’ve been doing is sharing my real experiences, thoughts, and feelings with everyone.
+
+Now, on Platform X, seeing my friend @Programmer Xiaohui rapidly gain followers by sharing authentic experiences further solidified my confidence in this approach.
+
+I believe this is something everyone can do. You don’t need fancy words or a polished article structure — just share your story sincerely.
+
+**Your experience is unique, and the rest? Leave it to the algorithm.**
+
+Below, I’ll share some practical tips on building a self-media account based on my journey.
+
+
+
+## Tips for Building a Self-Media Account
+
+1) Authenticity is Key
+
+From my own experience and observing others online, I’ve found that **the more authentic and natural you are, the more likely you are to go viral**.
+
+Good content is the foundation of everything. Authenticity is even more valuable in the AI era. Don’t imitate others — your experiences are the most unique material.
+
+2) Lower Expectations, Keep Taking Action
+
+I know many friends feel anxious about traffic, thinking their work isn’t seen or appreciated.
+
+But I want to say: **Persistence will lead to success.**
+
+When I started my WeChat Official Account, my readership was in the single digits. But after over 100 days of livestreaming until midnight after work, I broke through the bottleneck.
+
+The best way to deal with anxiety is to lower expectations and keep taking action. I really like the phrase “Speak Less, Do More.”
+
+3) Make It Fun
+
+For advanced programming techniques or full tutorials, those who need them will actively search for them. You don’t need to convert text into videos. Especially in the AI era, some efficiency-focused individuals might skip long videos and use AI tools to summarize content instead.
+
+Make your content light and fun, allowing people to learn new things in their spare time. I try to ensure each video provides some knowledge, even if it’s about “my server being attacked” — such experiences can help others avoid pitfalls.
+
+4) AI is Just a Tool; Creativity is Key
+
+Now, with AI and various workflows, you can quickly mass-produce content. While this can help you gain traction, there will inevitably be limitations because the simpler something is, the easier it is to replicate.
+
+The key is to have your own creativity and uniqueness, though the cost of realizing creativity has become simpler.
+
+5) Take Action Now
+
+Many people ask me, “I want to do self-media, but I don’t know how to start.”
+
+My answer is: **Don’t just think — try it out!**
+
+I dislike theoretical approaches — they’re easily forgotten. Instead, through practical experience, you’ll naturally learn and retain knowledge better. For example, being restricted once teaches you which banned words to avoid in your captions.
+
+How to write titles, design covers, choose topics, analyze data, and optimize content — these are all learned through practice.
+
+If you mess up, just start over!
+
+My first account, “Interview Monarch,” was a failure, but that experience taught me invaluable lessons and was crucial for the success of my new account.
+
+6) Find Your Niche; Do What You’re Good At
+
+Don’t compete with more specialized teams in a particular field. For example, I didn’t create dozens of hours of complete courses initially because training institutions are more professional.
+
+My early positioning was clear: share authentic experiences + fun technical knowledge + recommend quality resources.
+
+Finding your niche and doing what you’re good at is crucial.
+
+Speaking of which, something that frustrated me was that during 2021-2022, I developed many interesting projects, only to find that viewers didn’t care whether I developed them — as long as they were useful or fun. Often, recommending others’ projects garnered more views than promoting my own.
+
+7) Time Management
+
+I remember someone criticizing me, saying I must have a team behind me because how could one person do so much?
+
+But at the time, I didn’t. I just used some time management techniques.
+
+My ideal approach is to share insights and technologies I’ve learned at work, rather than starting from scratch with completely unfamiliar topics.
+
+Someone asked where I find the time?
+
+Truthfully, to do self-media, I gave up naps, gaming, and many social outings, and I stayed up late often. I estimate that 90% of people who say they don’t have time are spending it on gaming or chatting in groups. If you stop gaming, you’ll likely have enough time.
+
+Moreover, once you treat self-media as a hobby rather than a task, gaining followers becomes much easier.
+
+8) Embrace Anxiety, Enjoy the Process
+
+Q: Do you ever lack motivation while building your account?
+
+A: Absolutely. That’s when you need to find some stimulation. Stay relaxed; being too deliberate won’t last.
+
+Q: Do you ever feel anxious about data?
+
+A: Definitely. I often compare myself to others and sometimes suspect I’m being throttled (though I still suspect it now, haha). But more often, I focus on the content itself, learning from others’ excellent work and narrowing the gap.
+
+---
+
+Finally, if you also want to do self-media, my advice is:
+
+**Don’t overthink it — post your first piece of content and tell people who you are.**
+
+Even if it only gets 18 views, it’s a start. At least you’ve planted a seed, right?
+
+Joining Platform X and gaining followers so quickly isn’t necessarily a good thing for me, as I’m still a newbie here. I hope the veterans will go easy on me.
+
+If you support me, I’ll be thrilled — thank you. If you DISS me and treat me like a “stinky dog,” I hope to break through the skepticism with future content. I’ll strive to share unique insights here, hoping to inspire everyone. Let’s grow together! 🚀
+
+
+
+## Recommended Resources
+
+1) Yupi’s AI Navigation Website: [Comprehensive AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheat Sheet: [Internship/Campus Recruitment/Social Recruitment High-Frequency Topics, Enterprise Question Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Tool: [Professional Templates, Rich Examples, Direct to Interviews](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Land Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/50 产品变现/系统监控告警实践.md

@@ -0,0 +1,111 @@
+# System Monitoring and Alerting Practices
+
+> Detect issues promptly to ensure system stability
+
+Hello everyone, I'm programmer Yupi. Today I'll share some very practical system monitoring and alerting tools.
+
+Whether you're using Vibe Coding for personal projects or building a real product, mastering system monitoring and alerting methods can help you detect and resolve issues promptly, ensuring stable system operation.
+
+## Why Use Monitoring and Alerting?
+
+When it comes to monitoring and alerting, developers without enterprise experience often overlook it. Some might even think it's unnecessary, believing they can just fix bugs when they occur.
+
+![](https://pic.yupi.icu/1/image-20240729172241587.png)
+
+**This is completely wrong!**
+
+Think of a system as a human body. Sometimes a person might appear healthy on the surface, but may simply not have had the opportunity to detect internal abnormalities. When problems do emerge, the consequences are often more severe. That's why regular health checkups are needed to detect and address issues early. System monitoring and alerting serve a similar purpose - they can detect potential system anomalies and issues early, allowing for prompt resolution when problems occur online, thereby preventing or mitigating failures.
+
+Additionally, monitoring systems offer other benefits, which we'll explore next.
+
+## How to Implement Monitoring and Alerting?
+
+The most straightforward approach is to implement it yourself through code, such as adding logic to critical functions to send SMS/email/WeCom messages when certain exceptions occur. This is exactly how we started:
+
+![](https://pic.yupi.icu/1/image-20240729173020018.png)
+
+However, business alerts are just one layer of monitoring, akin to surface-level skin checks for the human body. To comprehensively and accurately monitor system health, we need full-spectrum diagnostics including server monitoring, network monitoring, application monitoring, database monitoring, API monitoring, etc.
+
+Yes, it sounds complex, which is why monitoring has earned a more professional alias in modern operations: "observability." Observability refers to a system's ability to understand and diagnose its health status and performance by monitoring and analyzing its internal state. This concept extends beyond traditional monitoring to include data collection, analysis, and response. For example, if monitoring reveals low memory utilization, we can downgrade configurations to save costs; if memory utilization is too high, we can consider upgrading or scaling out.
+
+Optimizing system observability yourself is quite complex, requiring consideration of data collection, storage, analysis, alert mechanisms, availability guarantees, performance, etc. Large companies typically have dedicated infrastructure teams for this.
+
+For individual developers or small companies, since this is a comprehensive "health check," we generally don't implement it ourselves but instead opt for more professional tools or services that can be directly integrated. Below are some tools our team uses.
+
+## Recommended Monitoring Tools
+
+### 1. Server Monitoring
+
+1) Built-in server monitoring capabilities
+
+Most cloud servers from major providers come with built-in monitoring and alerting features. For example, Tencent Cloud's Lightweight Application Server monitoring shows CPU, memory, network bandwidth, disk usage, etc.:
+
+![](https://pic.yupi.icu/1/image-20240729175223676.png)
+
+2) Container platform monitoring
+
+If you deploy projects using containers, most container platforms include monitoring capabilities. For example, WeChat Cloud Run's service monitoring shows not only system resource usage but also API call volumes, error rates, QPS, and response times, effectively providing built-in API monitoring.
+
+![](https://pic.yupi.icu/1/image-20240729175504698.png)
+
+Moreover, Cloud Run supports receiving alerts in WeChat groups, which is very convenient. If a node gets attacked, you're notified immediately.
+
+![](https://pic.yupi.icu/1/image-20240729175751550.png)
+
+### 2. Database Monitoring
+
+Previously, without database monitoring, it was difficult to track database performance - we couldn't tell if it was overworked or underutilized. Now, if you use third-party cloud database services, you can directly view resource utilization on the platform. For example, Tencent Cloud Database's built-in monitoring:
+
+![](https://pic.yupi.icu/1/image-20240729180105756.png)
+
+Where we once relied on user reports or server failures to detect harmful slow SQL queries, cloud databases now include intelligent assistants that identify slow SQL queries proactively.
+
+![](https://pic.yupi.icu/1/image-20240729180157868.png)
+
+You can even run one-click database health checks, with recommendations for any score below 100:
+
+![](https://pic.yupi.icu/1/image-20240729180528480.png)
+
+### 3. Application Monitoring
+
+Application monitoring covers a broad scope. We use Alibaba Cloud's Application Real-Time Monitoring Service (ARMS), primarily because Alibaba demonstrates higher expertise in Java application services.
+
+This includes monitoring application servers (like Java's Tomcat), API call statuses, internal service dependencies, scheduled tasks, thread pool statuses, JVM memory, GC activity, etc.
+
+![](https://pic.yupi.icu/1/image-20240729181837634.png)
+
+![](https://pic.yupi.icu/1/image-20240729182031915.png)
+
+You can also view application topology and analyze call chains:
+
+![](https://pic.yupi.icu/1/image-20240729181939087.png)
+
+Beyond monitoring, its alerting capabilities are exceptional! We've integrated it with WeCom - any service issue triggers immediate alerts. You can quickly view alert details, acknowledge alerts, or mute them.
+
+![](https://pic.yupi.icu/1/image-20240729182157448.png)
+
+To be honest, the first few days after integration were painful, as it exposed many previously undetected system issues, with alerts pinging our WeCom group constantly through the night. Our dev team suffered.
+
+![](https://pic.yupi.icu/1/image-20240729182459731.png)
+
+But we've adapted... or more accurately, after system optimizations, things have stabilized. Regardless, implementing monitoring and alerting is essential - it's like gaining x-ray vision into your system's health!
+
+Note that monitoring services incur costs beyond certain usage thresholds, typically offering tens of GB free monthly. For enterprise projects, this quota gets exhausted quickly, but it's suitable for learning or personal sites.
+
+### 4. Frontend Monitoring
+
+Beyond the above, sometimes we want user behavior insights, demographics, and business metrics: daily visitors, device types, mobile brands, new registrations, etc. This requires frontend monitoring (or backend tracking). As previously shared, Baidu Analytics can be integrated with just one line of code:
+
+![](https://pic.yupi.icu/1/image-20240625112621549.png)
+
+## Recommended Resources
+
+1) Yupi's AI Navigation: [Comprehensive AI resources, latest AI news, free AI tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Community: [Learning paths, programming tutorials, practical projects, career guides, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Guide: [Internship/campus/social recruitment high-frequency topics, enterprise question analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Builder: [Professional templates, rich examples, direct interview access](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for internship/campus/social recruitment interviews](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/50 产品变现/网站数据保护实践.md

@@ -0,0 +1,88 @@
+# Website Data Protection Practices
+
+> Protect your data from malicious scraping
+
+Hello everyone, I'm programmer Yupi. A couple of days ago, I was conducting a mock interview with a candidate who had two years of industry experience. Since he performed well, I spontaneously decided to discuss a business scenario problem we recently encountered. Here's the issue:
+
+We recently launched a [programmer coding practice website - Interview Duck](https://mianshiya.com/), and many bad actors have targeted our site, attempting to scrape all 10,000+ interview questions and 300+ question banks. So how should we prevent such scraping behavior? For example, how can we identify users who illegally scrape data and automatically ban their accounts?
+
+You can watch the entire discussion process in this video: https://www.bilibili.com/video/BV1b142187Tb
+
+Below, I'll directly share with you a summary of methods to prevent scraping—there are a full 10 methods! The last one is quite unique~
+
+## How to Prevent Website Scraping?
+
+#### 1. Use Protocol Agreements
+robots.txt is a file placed in the root directory of a website to inform search engine crawlers which parts should not be crawled.
+
+For example, you can add the following rules to the robots.txt file to prohibit crawling of specific directories or files:
+
+```
+User-agent: *
+Disallow: /private/
+Disallow: /important/
+```
+
+While most compliant crawlers will follow these rules, malicious crawlers may ignore them. Therefore, robots.txt alone cannot completely stop all crawlers. However, it serves as the first line of defense, acting as a declaration and deterrent.
+
+You can explicitly prohibit data scraping in the website's terms of service or usage agreements and treat violations as illegal. If website content is maliciously scraped and causes damage, robots.txt can serve as evidence of these violations.
+
+#### 2. Restrict Data Access Conditions
+Instead of exposing all data directly, you can require users to log in or provide an API key to access specific data. You can also implement authentication mechanisms for critical content, such as OAuth 2.0 or JWT (JSON Web Tokens), ensuring only authorized users can access sensitive data and effectively preventing unauthorized crawlers from obtaining it.
+
+#### 3. Monitor Access Frequency and Ban
+You can use caching tools like Redis (distributed caching) or Caffeine (local caching) to record the number of requests from each IP or client and set thresholds to limit the access frequency of a single IP address. When abnormal traffic is detected, the system can automatically ban the IP address or take other measures.
+
+Note that while a Map can also track request frequency, since requests accumulate continuously, the memory usage will keep growing. Therefore, it's not recommended to use a Map, which cannot automatically release resources. If you must use memory for request frequency tracking, consider using Caffeine, a caching technology with data eviction mechanisms.
+
+#### 4. Multi-Level Handling Strategy
+To avoid "false positives," instead of directly banning accounts of clients engaged in illegal scraping, you can implement a more flexible multi-level handling strategy. For example, when abnormal traffic is detected, issue a warning first. If the scraping behavior continues, take stricter measures like temporarily banning the IP address. If scraping persists after unbanning, impose permanent bans or other penalties.
+
+The specific handling strategy can be customized based on actual needs, but it's not advisable to make it overly complex to avoid burdening the system.
+
+#### 5. Automated Alerts + Manual Intervention
+Implement automated alert capabilities, such as sending WeChat Work notifications when abnormal traffic or scraping behavior is detected. Website administrators can then intervene promptly to further analyze and handle the scraping requests.
+
+This has been shared before—it's not just for scraping. Enterprise systems should ideally have comprehensive alerts for issues like API errors, high CPU/memory usage, etc.
+
+![](https://pic.yupi.icu/1/image-20240729173020018.png)
+
+#### 6. Scraping Behavior Analysis
+Illegal crawlers and normal users typically exhibit different behaviors. Crawlers often follow specific access patterns. For example, normal users spend varying amounts of time on each question, while crawlers usually fetch questions in a fixed order and at a fixed frequency, making them easy to identify.
+
+For instance, the following scenario is likely a crawler:
+
+![](https://pic.yupi.icu/1/image-20240806112610085.png)
+
+#### 7. Request Header Inspection
+Every request sent to the server includes header information. You can intercept crawler requests by checking identifiers like User-Agent and Referer in the request headers.
+
+Of course, this method only works against amateurs since request headers can be easily forged. By using a browser's built-in network console to obtain legitimate request headers, crawlers can bypass detection.
+
+![](https://pic.yupi.icu/1/image-20240806112956799.png)
+
+#### 8. Publicly Share Data
+I remember learning in a university information security class that one way to prevent cyberattacks is to make the attacker's cost exceed the potential gain. For example, if a password is valid for 10 minutes but takes 15 minutes to crack, no one will bother cracking it.
+
+Applying this to scraping, our approach is to impose no restrictions—anyone can view our website's question data without logging in! We even provide various filtering and bookmarking features for questions. Most users just want to study, so there's no need to spend time scraping data.
+
+![](https://pic.yupi.icu/1/image-20240806113508903.png)
+
+#### 9. Traceability Technology
+While the questions are public, some high-quality solutions written by experts from major companies are only available to members. If users scrape this content, they should beware! Generally, if you log in to a website, there will always be access records. If you leak content that requires login—especially paid content—the website administrator can trace it back to you.
+
+Common traceability technologies include watermarks and blind watermarks. For Interview Duck, users log in via WeChat, and if they're members, there are payment records. These technologies not only mark the data source but also help track its origin if misused, enhancing data protection.
+
+#### 10. Legal Education
+Beyond the above methods, you can further limit scraping by integrating anti-scraping services, adding CAPTCHAs, or implementing dynamic timestamps. But remember, scraping cannot be perfectly prevented! Because you can't restrict real users, attackers can simulate genuine user behavior to scrape data—for example, by recruiting 10 users to each fetch a few hundred questions.
+
+So my final method is—legal education. You can post clear legal disclaimers on the website stating that unauthorized scraping is illegal, which can deter some scraping attempts. Additionally, through videos and articles, we can raise legal awareness among programmers. Scraping carries risks—it's fine for personal learning, but don't overload websites, or you might face charges of damaging computer systems!
+
+![](https://pic.yupi.icu/1/image-20240730121945226-20240806114829247.png)
+
+## Recommended Resources
+1) Yupi AI Navigation: [Comprehensive AI resources, latest AI news, free AI tutorials](https://ai.codefather.cn)  
+2) Programming Navigation Learning Circle: [Learning paths, programming tutorials, practical projects, job search guides, Q&A](https://www.codefather.cn)  
+3) Programmer Interview Cheat Sheet: [Internship/campus/senior hiring FAQs, company question analysis](https://www.mianshiya.com)  
+4) Programmer Resume Builder: [Professional templates, rich examples, direct interview access](https://www.laoyujianli.com)  
+5) 1-on-1 Mock Interviews: [Essential for internship/campus/senior interviews to land offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/50 产品变现/网站数据分析实战.md

@@ -0,0 +1,176 @@
+# Practical Guide to Website Data Analysis
+
+> Driving Product Optimization with Data
+
+
+
+A student asked me: Brother Yupi, how does your team handle data analysis for so many website products?
+
+![](https://pic.yupi.icu/1/1764078727145-d24f43f8-805e-48ee-91a7-363c40334731.png)
+
+Actually, there are many readily available free resources that can help you effortlessly tackle various data analysis scenarios.
+
+- Website Traffic Statistics
+- Frontend Error Monitoring
+- User Behavior Analysis
+- Custom Business Analysis
+- Backend Application Monitoring and Analysis
+- Backend Resource Monitoring and Analysis
+- Backend Custom Metric Analysis
+
+Whether you're working on personal projects with Vibe Coding or aiming to create a real product, mastering website data analysis methods can help you understand user behavior and optimize product features. There's a lot of valuable content here, so I recommend bookmarking it~
+
+⭐️ Recommended video version: https://bilibili.com/video/BV1CkUDBiEMR
+
+
+
+## Comprehensive Tutorial on Website Analysis
+
+Let's start with the most basic **website traffic analysis**. You probably want to know how many people visit your site daily, where they come from, and which pages they spend the most time on, right?
+
+You can use Baidu Analytics, 51.LA Website Analytics, or Google Analytics. Simply add a snippet of code to your website files to easily integrate these tools.
+
+![](https://pic.yupi.icu/1/1764078795765-4edf9121-1d66-41e9-9dc0-857afd0294e5.png)
+
+
+
+Then you can see visitor numbers and trends, analyze visitor sources, and examine page visit statistics:
+
+![](https://pic.yupi.icu/1/1764078821580-d93ee50c-61fb-4bdc-af75-76123ec6828b.png)
+
+
+
+This helps you understand user preferences and gain insights for page optimization.
+
+![](https://pic.yupi.icu/1/1764078843181-a16b1ff8-8990-44c3-963c-169f6771a32e.png)
+
+
+
+If you're working on a mini-program, it's even simpler. For example, WeChat mini-programs can directly use the official built-in analytics.
+
+![](https://pic.yupi.icu/1/1764078876073-0a8ec98f-9146-45f8-8695-d07a8bdd6e82.png)
+
+
+
+What if you want to analyze the traffic of someone else's website?
+
+You can use tools like Similarweb or AI TDK. Just enter the URL to see traffic estimates, visitor sources, and popular keywords, which are particularly useful for competitor analysis and SEO optimization.
+
+![](https://pic.yupi.icu/1/1764078897590-9c89b4ed-59e0-4eb5-8538-edf02ff46f5d.png)
+
+
+
+Knowing just the normal user activity isn't enough. What if your website buttons stop working, users encounter constant errors, and you remain unaware? That could be embarrassing and potentially affect revenue! So, **frontend error monitoring** is essential.
+
+Sentry is a mainstream open-source frontend monitoring tool that helps capture and track various code errors.
+
+![](https://pic.yupi.icu/1/1764078928751-dae2960d-184f-41b8-9cb5-713a42fe95ac.png)
+
+
+
+It also records users' system environments and specific error details, making it easier for you to troubleshoot and fix bugs.
+
+![](https://pic.yupi.icu/1/1764078961573-911e5c33-bb51-401d-8aea-1afe511bc117.png)
+
+
+
+However, the free version has limitations, or you need to deploy the open-source code on your own server. Our team uses Lingque Application Monitoring, which can be integrated with just a snippet of code. It captures various frontend exceptions in real-time and allows you to view specific error details.
+
+![](https://pic.yupi.icu/1/1764078978982-15683249-ebb8-4165-a773-543f096021e3.png)
+
+
+
+Sometimes, knowing where errors occur isn't enough. You also want to understand how users are interacting with your site. Why did they trigger this error? Or why aren't they willing to pay? This is where **user behavior analysis** tools come in.
+
+I recommend Microsoft's 100% free Clarity, which records real user interactions.
+
+![](https://pic.yupi.icu/1/1764079021607-a939888c-9187-4356-97e4-7ca087d748cf.png)
+
+
+
+Our team's [Mock Interview Product - MianDuoDuo](https://ai.mianshiya.com/) uses it. You can see exactly where users click, scroll, and hesitate.
+
+![](https://pic.yupi.icu/1/1764079042768-b8bf7b08-3402-4746-80ec-2375a7ec5253.png)
+
+
+
+Heatmaps can quickly analyze user preferences, helping optimize button layouts, reduce product complexity, and uncover issues you might never have thought of.
+
+![](https://pic.yupi.icu/1/1764079060438-35285ab2-9a14-41c8-a1f9-62334e94dd63.png)
+
+
+
+The tools mentioned above provide general metrics, but each product has unique business logic. Some data you care about, like conversion rates or feature usage frequency, might not be available through off-the-shelf tools. This is where **custom business analysis** comes in.
+
+Initially, I naively paid for some well-known commercial BI products, but later realized that for small teams, it's unnecessary. Open-source tools like DataEase or Superset are great alternatives. They can connect to various data sources like MySQL databases, and you can configure and drag-and-drop to create various visual charts and dashboards.
+
+![](https://pic.yupi.icu/1/1764079103181-400429a4-f0ee-4b9e-9cf8-192cbf43b6b1.png)
+
+
+
+For highly personalized needs, you can build your own dashboards. With AI assistance and the ECharts library, generating visual dashboards is now much easier.
+
+![](https://pic.yupi.icu/1/1764079122450-bf5767d8-af95-42b0-b4cb-0007a4b55865.png)
+
+
+
+After covering the frontend, let's not forget about backend data analysis.
+
+When users visit your website, data is provided through various APIs. How do you know if these APIs are functioning properly? Is there room for optimization? This is where **backend application monitoring and analysis** comes in.
+
+Our team uses ARMS Application Real-Time Monitoring Service, which comprehensively monitors application performance and quickly identifies faulty or slow APIs.
+
+![](https://pic.yupi.icu/1/1764079185559-220bd32c-5ae3-4085-84f2-738084e03ff3.png)
+
+
+
+You can further view error details and even analyze the complete API call chain, enabling quick issue resolution.
+
+![](https://pic.yupi.icu/1/1764079204985-1645a7fd-e9a0-4efb-beda-8d1d6e4aa2e0.png)
+
+
+
+Beyond application-level monitoring, **resource monitoring and analysis** for servers, databases, and caches are also crucial. If they're hosted in the cloud, you can use the cloud provider's built-in monitoring dashboards, where various metrics are clearly displayed.
+
+![](https://pic.yupi.icu/1/1764079290093-080d053b-6c1e-437d-8378-6100df73521f.png)
+
+
+
+If you want to monitor and analyze more personalized metrics uniformly, Prometheus + Grafana is the ultimate combo. Prometheus collects various custom metric data, bringing monitoring capabilities to developers.
+
+![](https://pic.yupi.icu/1/1764079319434-2fbd89b9-d827-4fb9-9f38-71f10d5629c5.png)
+
+
+
+Grafana transforms this data into stunning visual dashboards. Watching real-time charts feels like controlling the pulse of the entire system, giving me a sci-fi movie protagonist vibe~
+
+![](https://pic.yupi.icu/1/1764079336501-6effc5ed-a00d-4311-a763-f1d68019bb0f.png)
+
+---
+
+
+
+OK, that's all for now. There are many other excellent open-source projects, like SkyWalking and Zipkin for application performance management, and ELK for centralized log analysis.
+
+![](https://pic.yupi.icu/1/1764079353696-b15e7b70-4984-47d5-b036-0b499d17f629.png)
+
+
+
+With these tools, website data analysis isn't that complicated. The key is to choose the right solution based on your needs, saving time to focus on product development.
+
+If this article was helpful, please give it a thumbs up. Much appreciated!
+
+![Please Like](https://pic.yupi.icu/1/%E6%B1%82%E7%82%B9%E8%B5%9E.webp)
+
+
+## Recommended Resources
+
+1）Yupi AI Navigation Website: [Comprehensive AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2）Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Hunting Guide, Q&A](https://www.codefather.cn)
+
+3）Programmer Interview Cheatsheet: [Internship/Campus Recruitment/Social Recruitment High-Frequency Topics, Enterprise Exam Analysis](https://www.mianshiya.com)
+
+4）Programmer Resume Builder: [Professional Templates, Rich Examples, Direct to Interviews](https://www.laoyujianli.com)
+
+5）1-on-1 Mock Interview: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Secure Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/60 Vibe Coding 资源大全.md

@@ -0,0 +1,126 @@
+# Vibe Coding Resource Guide
+
+Hello, I'm Yupi, a former Tencent full-stack developer and an [AI programming blogger](https://space.bilibili.com/12890453) with 2 million followers across platforms. I'm also the creator of over 10 self-developed products, including [AI Navigation](https://ai.codefather.cn) and [Programming Navigation](https://www.codefather.cn).
+
+While learning Vibe Coding, you might encounter these situations:
+
+- Wanting to try new AI tools but unsure which one suits you best
+- Needing to look up information but not knowing where to find reliable content
+- Wanting to stay updated on the latest AI programming trends but finding the information too fragmented
+
+That's why I specifically developed the [Yupi AI Navigation](https://ai.codefather.cn/) website ([ai.codefather.cn](https://ai.codefather.cn/)).
+
+Whether you're looking for useful AI tools, the latest AI news, discovering AI prompt templates, or exchanging AI usage tips and learning AI knowledge, everything you need about AI can be found here!
+
+![](https://pic.yupi.icu/1/image-20260109121412266.png)
+
+## What Does Yupi AI Navigation Offer?
+
+The opportunities in the AI era are far more than imagined. Many aspects of our team's daily work are now assisted by AI, and we increasingly rely on AI for advice in our daily lives. Especially in unfamiliar fields with cognitive barriers, AI helps us quickly collect, filter, and analyze information. Problems that used to take months to research and read about can now be resolved in minutes with AI.
+
+But how do you find the tools and resources that truly suit you amidst the vast sea of AI options?
+
+[Yupi's AI Navigation website](https://ai.codefather.cn/) can help you solve this problem.
+
+### Comprehensive AI Tools
+
+Currently, AI Navigation has cataloged thousands of useful AI websites and applications from both domestic and international sources, categorized by functionality, so you no longer need to search aimlessly.
+
+The website categorizes tools by function, including AI writing, AI images, AI video creation, AI office work, AI development platforms, AI agents, AI chat conversations, AI audio and music, AI business design, AI large models, AI learning platforms, AI search engines, and more.
+
+![](https://pic.yupi.icu/1/image-20260109120335668.png)
+
+Whether you're writing papers, creating PPTs, generating images, coding, or making videos, just click here to discover quality tools!
+
+We will continue to add new tools, keeping you at the forefront of AI trends.
+
+### Comprehensive AI Prompts
+
+Feel like AI doesn't understand you? Maybe you haven't found the right way to train it!
+
+We've prepared hundreds of ready-to-use prompt templates for creating viral Xiaohongshu posts, designing specific styles of images, crafting learning paths, and more.
+
+Just copy and paste to become a Prompt expert and enlighten your AI!
+
+![](https://pic.yupi.icu/1/image-20260109120435424.png)
+
+Prompts are categorized by field, including personal growth, education, workplace, technology, writing, research, business, and nearly 30 other categories. We will soon launch a "Share Your Prompt" feature, allowing everyone to use the prompts you create.
+
+### AI Learning Resources
+
+Compared to its initial version, the AI knowledge base is no longer limited to a single tool but aggregates valuable information and resources related to AI.
+
+From beginner basics to hardcore technical analysis, essential articles, project tutorials, and application scenarios are all available for direct learning. In this fragmented era, we help you systematize your learning.
+
+Here, you'll find step-by-step tutorials for hands-on AI tool practice, [enterprise-level AI project courses](https://www.codefather.cn/course?sortField=priority&tags%5B%5D=AI%E9%A1%B9%E7%9B%AE) that can be directly added to your resume, and a wealth of knowledge encyclopedias suitable for beginners and advanced learners.
+
+![](https://pic.yupi.icu/1/image-20260109120527188.png)
+
+### AI Hot News
+
+AI is developing rapidly, with "explosive" news almost every day.
+
+- What new models have major companies released?
+- What groundbreaking new applications are there?
+- What's the latest gossip in the AI circle?
+- What new tricks are being played?
+
+We'll keep an eye on all these for you! All industry news is sorted by date, and you can click on a specific day in the calendar to review.
+
+![](https://pic.yupi.icu/1/image-20260109120725733.png)
+
+### AI Community
+
+At its core, AI is still a tool, and what you can achieve with it depends on how creatively you can use it.
+
+Therefore, we've built an AI community where you can share the treasure tools you've just discovered, showcase your AI masterpieces, and seek advice from experts.
+
+![](https://pic.yupi.icu/1/image-20260109121046762.png)
+
+Tools may be cold, but people are warm. Let's spark inspiration together in the community.
+
+## Thanks to the Pioneers in AI
+
+The prosperity of AI programming today is inseparable from the selfless sharing of many excellent bloggers. They consistently produce high-quality content, popularize technical knowledge, and share practical experiences, enabling more people to understand and master AI programming.
+
+[Cang He](canghecode.com): Former senior developer at a major company, renowned AI programming blogger, Microsoft MVP, frequently shares insights and tutorials on AI programming on his public account and Twitter.
+
+**Andrej Karpathy**: Former OpenAI researcher, Tesla AI head, and one of the creators of the term Vibe Coding. His blog and Twitter often share profound thoughts on AI programming, worth following.
+
+**Simon Willison**: Co-founder of Django, his blog continuously shares experiences and technical insights on using AI tools. His understanding of Vibe Coding is deep, and he excels at explaining complex technologies in simple terms.
+
+**Fireship**: One of the most popular tech channels on YouTube, explaining various new technologies in a fast-paced manner. His videos on AI programming are excellent for quickly understanding new tools and technologies.
+
+Many other excellent bloggers share knowledge across various platforms. It is through their continuous output and contributions to AI knowledge popularization that AI programming knowledge spreads rapidly, benefiting more people.
+
+## Let's Explore AI Together
+
+The world of AI is vast, and exploring it alone can be lonely. Let's explore it together!
+
+[Yupi AI Navigation](https://ai.codefather.cn/) is a one-stop resource platform I've specifically built for AI learners and developers. The website is completely free, meticulously organized, and continuously updated, covering rich content such as AI tools, prompts, learning resources, knowledge bases, news, and communities.
+
+**If you need Vibe Coding and other AI resources, visit Yupi's AI Navigation website.**
+
+I've always believed that knowledge sharing is mutually beneficial. Yupi AI Navigation is not just a resource platform but an open ecosystem. I will continue to recommend excellent content creators, helping them expand their influence. If you're also creating AI-related content, feel free to contact me via the "AI Navigation Assistant" on the website.
+
+Finally, I want to emphasize again: **No matter how many resources you have, the most important thing is to take action**. The website is just a tool; what truly helps you grow is practice.
+
+If you're interested in AI, whether to improve efficiency, learn skills, or simply out of curiosity, welcome to experience it👇
+
+Yupi's AI Navigation: https://ai.codefather.cn
+
+Any suggestions or desired features/content are welcome in the community. Thank you very much.
+
+Remember to bookmark the website for easy exploration of AI~
+
+## Recommended Resources
+
+1) Yupi AI Navigation Website: [Comprehensive AI Resources, Latest AI News, Free AI Tutorials](https://ai.codefather.cn)
+
+2) Programming Navigation Learning Circle: [Learning Paths, Programming Tutorials, Practical Projects, Job Search Guides, Q&A](https://www.codefather.cn)
+
+3) Programmer Interview Cheatsheet: [High-Frequency Exam Points for Internships/Campus Recruitment/Social Recruitment, Enterprise Question Analysis](https://www.mianshiya.com)
+
+4) Programmer Resume Writing Tool: [Professional Templates, Rich Examples, Direct to Interviews](https://www.laoyujianli.com)
+
+5) 1-on-1 Mock Interviews: [Essential for Internship/Campus Recruitment/Social Recruitment Interviews to Get Offers](https://ai.mianshiya.com)

translations/en/Vibe Coding 零基础教程/70 Vibe Coding 概念大全.md

@@ -0,0 +1,439 @@
+# Vibe Coding Concept Encyclopedia
+
+> Understand all the core terms of AI programming at once
+
+
+
+Hello, I'm Yupi, a former Tencent full-stack developer, an [AI programming blogger](https://space.bilibili.com/12890453) with 2 million followers across platforms, and the creator of over 10 self-developed products like [AI Navigation](https://ai.codefather.cn) and [Programming Navigation](https://www.codefather.cn).
+
+While learning Vibe Coding, you will inevitably encounter various unfamiliar terms and concepts. For example, what is a Token? What is a context window? What is RAG? These concepts may sound lofty, but they are actually not difficult to understand.
+
+This article is your **AI programming terminology dictionary**. I will explain the most common and important concepts in Vibe Coding in the simplest and most understandable language. You can bookmark it and refer to it whenever you encounter an unfamiliar term.
+
+
+
+## AI Basic Concepts
+
+
+### Artificial Intelligence (AI)
+
+Artificial Intelligence (AI) is the technology that enables computers to simulate human intelligence. Simply put, it allows machines to think, learn, and solve problems like humans.
+
+In Vibe Coding, AI is your programming assistant. You tell it what to do, and it writes the code for you. It's like having a 24/7 online programmer friend who is always ready to help.
+
+
+
+
+### Large Language Model (LLM)
+
+Large Language Model (LLM) is an AI system capable of understanding and generating human language. ChatGPT, Claude, Gemini, and DeepSeek are all large language models.
+
+Why are they called "large"? Because these models have an enormous number of parameters, often ranging from billions to trillions. The more parameters, the smarter the model usually is, but it also consumes more computational resources.
+
+You can think of a large language model as a super scholar who has read vast amounts of books and code. It has seen countless programming cases, so it can help you write code, explain code, and fix bugs.
+
+![](https://pic.yupi.icu/1/1745384872015-f84a47fc-0925-4797-9dfc-e4dfae01a3fa.png)
+
+
+
+### Model Parameters
+
+Parameters are the "knowledge points" learned by the model during training, stored in the model in numerical form. The more parameters, the richer the knowledge the model can remember, and usually, the smarter it is.
+
+For example:
+
+- GPT-4 has about 1.8 trillion parameters
+- Claude 3.5 Sonnet's parameter count is undisclosed but estimated to be in the hundreds of billions
+- DeepSeek-V3 has 671 billion parameters
+
+The number of parameters affects the model's capabilities and operational costs. Generally, models with more parameters are more expensive but also more effective.
+
+
+
+
+### Training and Inference
+
+Training is the process of teaching an AI model from large amounts of data. This process requires massive computational resources and time, typically handled by AI companies. You don't need to train the model yourself.
+
+Inference is the process of using the learned knowledge to answer questions or generate content after the model has been trained. When you chat with ChatGPT, you are performing inference.
+
+To put it simply: training is like a student going to school to study, while inference is like a student taking an exam. Our daily use of AI tools relies on inference capabilities.
+
+
+
+
+### Fine-tuning
+
+Fine-tuning involves continuing to train an existing model with domain-specific data to improve its performance in a particular field.
+
+For example, you can fine-tune a model with extensive medical data to make it a medical expert. Or fine-tune it with your company's codebase to make it more familiar with your project's style.
+
+For regular users, fine-tuning is costly and usually unnecessary. Using pre-trained models is sufficient.
+
+
+
+## Token and Billing
+
+
+### Token
+
+Token is the basic unit of text processing for AI models. You can simply think of it as a "word chunk."
+
+In English, one Token is roughly equivalent to a word or part of a word. In Chinese, one character is usually 1-2 Tokens.
+
+Why is Token important? Because AI services typically charge based on Tokens. Both the text you input and the text AI outputs consume Tokens. The more Tokens used, the more money you spend.
+
+For example:
+
+- "Hello World" is about 2 Tokens
+- “你好世界” is about 4-6 Tokens
+
+![](https://pic.yupi.icu/1/image-20260112112612434.png)
+
+
+
+### Input Token and Output Token
+
+AI services usually calculate input and output Tokens separately:
+
+- Input Token: The content you send to the AI (prompts, code, files, etc.)
+- Output Token: The content returned by the AI (answers, generated code, etc.)
+
+Generally, output Tokens are more expensive than input Tokens because generating content consumes more computational power than understanding content.
+
+Money-saving tip: Write clear and concise prompts to help the AI understand your needs in one go, reducing the need for repeated conversations.
+
+
+
+### Context Window
+
+Context Window refers to the maximum amount of content an AI model can "remember" at once, measured in Tokens.
+
+Different models have different context window sizes:
+
+- GPT-4o: 128K Tokens (about 100,000 Chinese characters)
+- Claude 3.5 Sonnet: 200K Tokens (about 150,000 Chinese characters)
+- Gemini 2.0 Pro: 2M Tokens (about 1.5 million Chinese characters)
+
+The larger the context window, the more code the AI can handle, and the longer the conversation history it can remember. If your project involves a lot of code, choosing a model with a larger context window is more suitable.
+
+However, note that a larger context window also means more Tokens consumed per request, leading to higher costs.
+
+
+
+## Prompt-Related Concepts
+
+
+### Prompt
+
+Prompt is the instruction or question you give to the AI. In Vibe Coding, the prompt is your natural language description of the requirements.
+
+The quality of the prompt directly determines the quality of the AI's output. A good prompt should:
+
+- Be specific and unambiguous
+- Include necessary background information
+- Specify the desired output format
+
+For example, "Make a website" is a vague prompt, while "Create an accounting website using React, with features to add expenses, view lists, and calculate totals, with a blue-themed interface" is a good prompt.
+
+In AI conversations, messages are typically divided into three roles:
+
+- System Prompt: Sets the AI's role and behavior rules, invisible to the user
+- User Prompt: The message you send to the AI
+- Assistant Prompt: The message the AI replies with
+
+Understanding these three roles helps you better structure conversations. For example, when debugging, you can simulate previous conversation history in the prompt to help the AI better understand the context.
+
+
+
+### System Prompt
+
+System Prompt is the instruction set before the conversation starts, used to define the AI's role, behavior, and limitations.
+
+For example, you can set a system prompt: "You are a senior React development expert. Please answer questions in a concise and clear coding style."
+
+The system prompt remains effective throughout the conversation and is an important way to customize AI behavior.
+
+![](https://pic.yupi.icu/1/1745462990451-6f2b5727-d47b-436c-9da2-50dac64fb790.png)
+
+
+
+### Prompt Engineering
+
+Prompt Engineering is the technique of designing and optimizing prompts to help the AI better understand your intent and generate more expected results.
+
+This is one of the core skills in Vibe Coding. A good prompt engineer can generate higher-quality code with fewer conversation rounds.
+
+
+
+### Zero-shot Prompt
+
+Zero-shot Prompt refers to giving the AI a task without providing any examples.
+
+For example: "Please translate this English text into Chinese."
+
+The AI will complete the task based on its training knowledge. For simple tasks, zero-shot prompts are usually sufficient.
+
+
+
+### Few-shot Prompt
+
+Few-shot Prompt involves providing a few examples in the prompt to help the AI learn the desired format or style.
+
+For example:
+
+```
+Please translate in the following format:
+English: Hello → Chinese: 你好
+English: Thank you → Chinese: 谢谢
+English: Good morning → Chinese:
+```
+
+By providing examples, the AI can more accurately understand your needs and produce more consistent results.
+
+
+
+### Chain-of-Thought Prompt
+
+Chain-of-Thought Prompt involves making the AI think step by step rather than directly providing the answer. This is particularly effective for complex reasoning tasks.
+
+You can add "Please think step by step" or "Let's think step by step" to the prompt, and the AI will show its reasoning process, often leading to more accurate answers.
+
+In programming, chain-of-thought prompts help the AI better understand complex requirements and generate more reasonable code structures.
+
+![](https://pic.yupi.icu/1/chainofthought.png)
+
+
+
+### Markdown Language
+
+Markdown is a lightweight markup language for text formatting using simple symbols. For example, `#` for headings, `**text**` for bold, and `-` for lists.
+
+In Vibe Coding, Markdown is very important because:
+
+- AI-generated responses are usually in Markdown format
+- Project documentation (e.g., README) is written in Markdown
+- Rule files are also in Markdown format
+
+Learning Markdown helps you communicate better with AI and write more standardized project documentation.
+
+
+
+
+## AI Programming Models
+
+
+### Vibe Coding
+
+Vibe Coding is a concept proposed by computer scientist Andrej Karpathy in February 2025. It describes a new way of programming: through natural language conversations with AI, letting the AI write code for you, while you only need to describe requirements, test results, and guide directions.
+
+The core idea of Vibe Coding is that you don't need to master programming syntax; you just need to clearly express your ideas. The AI is responsible for turning your ideas into executable code.
+
+It's like ordering takeout: you tell the platform what you want to eat, and the restaurant prepares it and delivers it to you. You don't need to know how to cook, but you need to know what you want to eat.
+
+
+
+### Agentic Coding
+
+Agentic Coding refers to making AI work like an autonomous "agent," capable of planning tasks, executing operations, and verifying results, rather than just passively answering questions.
+
+In Cursor's Agent mode, AI can:
+
+- Automatically read and analyze multiple files
+- Plan implementation strategies
+- Execute code modifications
+- Run tests and verify results
+- Automatically fix issues
+
+This is more powerful than traditional Q&A-style AI because it can autonomously complete complex multi-step tasks.
+
+![](https://pic.yupi.icu/1/agent-in-cursor.png)
+
+
+
+### Multi-Agent Collaboration
+
+Multi-Agent Collaboration refers to multiple AI agents working together to complete complex tasks.
+
+For example, one agent is responsible for designing the architecture, one for writing frontend code, one for backend code, and one for code review. They collaborate like a team.
+
+In recent years, multi-agent systems have become an important trend in AI programming, capable of handling more complex projects.
+
+![](https://pic.yupi.icu/1/image-20260112112834637.png)
+
+
+
+### Agent Orchestration
+
+Orchestration is the process of coordinating and managing multiple AI agents or AI tasks to ensure they work in the correct order and manner.
+
+Like a conductor in an orchestra, the orchestrator decides which agent does what at what time, how information is passed, and how results are aggregated.
+
+![](https://pic.yupi.icu/1/image-20260112112854174.png)
+
+
+
+### Agent Loop
+
+Agent Loop is the core working mechanism of AI agents, describing how agents continuously operate to complete tasks.
+
+A typical Agent Loop includes:
+
+1. Perception: Acquire current environmental information (read files, check errors, etc.)
+2. Thinking: Analyze the situation and decide the next action
+3. Action: Execute specific operations (write code, run commands, etc.)
+4. Observation: Check the results of the action
+5. Loop: Decide whether to continue based on the results
+
+This loop continues until the task is completed or a termination condition is met. Understanding the Agent Loop helps you better use tools like Cursor Agent.
+
+
+
+
+### ReAct Reasoning and Acting
+
+ReAct (Reasoning and Acting) is a technical framework that allows AI agents to alternate between reasoning and acting.
+
+Traditional AI either only thinks or only acts. ReAct enables AI to:
+
+- First reason: Think about the current situation and make a plan
+- Then act: Execute specific operations
+- Observe results: See how the action worked
+- Continue reasoning: Adjust the strategy based on the results
+
+This "think-act-observe" loop allows AI to more reliably complete complex tasks and is one of the core technologies of modern AI programming tools.
+
+![](https://pic.yupi.icu/1/react-agent.png)
+
+
+
+### Tool Use
+
+Tool Use (Function Calling) is the technology that allows AI to use external tools and functions. AI itself can only generate text, but through tool use, it can:
+
+- Read and write files
+- Execute command-line commands
+- Search the web
+- Call APIs
+- Operate databases
+
+![](https://pic.yupi.icu/1/1746590338968-0240c12b-2956-47f4-b8ff-5b5f831221f6.png)
+
+The workflow of tool use consists of 4 steps:
+
+1. Identify needs: AI determines that the current task requires tool use
+2. Select tool: Choose the appropriate tool from available tools
+3. Execute call: Call the tool with the correct parameters
+4. Integrate results: Incorporate the tool's returned results into the response
+
+![](https://pic.yupi.icu/1/%E5%B7%A5%E5%85%B7%E8%B0%83%E7%94%A8%E6%B5%81%E7%A8%8B.png)
+
+Note that the AI model itself does not directly execute tools but generates instructions like "I want to call this tool with these parameters," which are then executed by external programs and returned to the AI.
+
+In Vibe Coding, tool use allows AI to move from "just talking" to "taking action." For example, Cursor's Agent mode uses tool use to read files, modify code, and run commands.
+
+
+
+
+### Agent Skills
+
+Agent Skills is an open standard launched by Anthropic in October 2025 to extend AI agents' professional capabilities in specific domains.
+
+Simply put, a Skill is a folder containing a `SKILL.md` file, which can include instructions, script code, reference materials, etc. When AI encounters relevant tasks, it automatically loads the corresponding Skill to enhance its capabilities.
+
+![](https://pic.yupi.icu/1/agent%2520skills.jpeg)
+
+You can think of a Skill as a "new employee onboarding guide" for AI. For example:
+
+- A PDF processing Skill teaches AI how to fill out PDF forms
+- A project deployment Skill contains your team's unique deployment processes and scripts
+- A code review Skill defines your project's code standards and checklists
+
+The core design of Skills is **progressive disclosure**: AI only loads relevant content when needed, avoiding the need to cram all information into the context at once, saving Tokens while maintaining flexibility.
+
+![](https://pic.yupi.icu/1/agent%20skills%20bundling.jpeg)
+
+💡 Want to discover more useful Agent Skills? Visit [Yupi AI Navigation - Skills Encyclopedia](https://ai.codefather.cn/skills) for continuously updated high-quality skills to unleash AI's execution potential.
+
+
+
+
+### A2A (Agent-to-Agent)
+
+A2A (Agent-to-Agent) refers to the protocol or method for AI agents to communicate and collaborate with each other, forming the foundation of multi-agent systems.
+
+Just as humans need language to communicate, AI agents need standardized ways to exchange information, assign tasks, and report results.
+
+A2A protocols enable different AI agents to form teams and collaborate to complete complex tasks.
+
+![](https://pic.yupi.icu/1/a2a-agent.png)
+
+
+
+### BMAD Agile AI Development Method
+
+[BMAD-METHOD](https://github.com/bmad-code-org/BMAD-METHOD) (Breakthrough Method of Agile AI-Driven Development) is a systematic framework for AI agent development, aiming to structure and make reusable the otherwise chaotic AI programming process.
+
+BMAD organizes the development process using **role-based agents**, with each agent playing a specific role:
+
+- Analyst Agent: Creates project briefs, including market analysis and user profiles
+- PM Agent: Transforms briefs into detailed product requirement documents (PRD)
+- Architect Agent: Designs technical implementation plans and system architectures
+
+BMAD agents are divided into two types:
+
+- Simple Agents: Single-file, self-contained, suitable for focused tasks like code review and document generation
+- Expert Agents: Possess cross-session persistent memory, equipped with dedicated folders for resources, suitable for complex multi-step workflows
+
+Each agent has standardized components: persona (role, identity, communication style, principles), capability list, interaction menu, and optional key actions.
+
+BMAD has garnered tens of thousands of stars on GitHub, indicating that this structured AI development approach is gaining recognition among developers.
+
+![](https://pic.yupi.icu/1/image-20260201143945594.png)
+
+
+
+
+### Browser Use
+
+Browser Use is the technical capability that allows AI agents to automatically control web browsers. Through Browser Use, AI can browse web pages, click buttons, fill forms, and extract data like a human.
+
+Browser Use's typical applications include:
+
+- Automated research: Let AI search and organize information across multiple websites
+- Data collection: Extract structured data from web pages
+- Form filling: Automate tedious online form submissions
+- Cross-platform operations: Complete multi-step tasks across different websites
+
+A notable open-source project is [Browser-Use](https://github.com/browser-use/browser-use), which supports controlling browsers via Python calls to various large models. Additionally, mainstream AI programming tools like Cursor and Claude Code also have built-in Browser Use capabilities, enabling automatic browser previews, test executions, and more during development.
+
+![](https://pic.yupi.icu/1/image-20251030220841383.png)
+
+A key advantage of Browser Use is that AI can leverage your existing browser sessions and login states, eliminating the need to develop API integrations for each website. This means AI can access websites without public APIs, greatly expanding the scope of automation.
+
+
+
+
+### Computer Use
+
+Computer Use is an AI capability launched by Anthropic in 2024, enabling Claude to operate the entire computer desktop like a human.
+
+Unlike Browser Use, which is limited to browsers, Computer Use can operate any desktop application, such as:
+
+- Viewing screenshots and understanding interface elements
+- Moving the mouse cursor and clicking buttons
+- Typing with the keyboard
+- Executing command-line operations
+
+Computer Use operates through a continuous feedback loop:
+
+1. Screenshot analysis: AI captures and analyzes the current screen
+2. Decision planning: Determines the next action based on task goals
+3. Action execution: Sends mouse/keyboard inputs
+4. Observation: Checks the action's effect and adjusts strategy
+
+💡 For safety, Computer Use typically runs in virtual machines or containers, avoiding direct control of your actual computer.
+
+Computer Use represents a significant leap from "only generating text" to "being able to operate software," fundamentally changing human-computer interaction.
+
+Based on Computer Use technology, Anthropic launched [Claude Cowork](https://claude.com/product/cowork) in 2026, a desktop AI assistant that can directly access files and folders on your computer, helping you organize download directories, extract data from screenshots

translations/en/Vibe Coding 零基础教程/90 Vibe Coding 常见问题和解决.md

@@ -0,0 +1,249 @@
+# Vibe Coding FAQs and Solutions
+
+Hello, I'm Yupi, a former Tencent full-stack developer with over 2 million followers as an [AI programming blogger](https://space.bilibili.com/12890453). I'm also the creator of more than 10 self-developed products, including [AI Navigation](https://ai.codefather.cn) and [Programming Navigation](https://www.codefather.cn).
+
+Previously, I systematically explained various techniques and methods of Vibe Coding. In this article, I will summarize the most common issues and solutions encountered in Vibe Coding practices.
+
+You can treat this as a quick reference manual. When you encounter a problem, check here first—you might find the answer. If it's not here, you can also ask questions on my [Programming Navigation](https://www.codefather.cn/) or discuss with other AI enthusiasts on [Yupi AI Navigation](https://ai.codefather.cn/) to find answers.
+
+## Understanding Vibe Coding Concepts
+
+### What’s the Difference Between Vibe Coding and Traditional Programming?
+
+Answer: Traditional programming involves writing code yourself, while Vibe Coding involves describing your requirements in natural language and letting AI write the code for you. Traditional programming requires you to master the syntax and details of a programming language, whereas Vibe Coding focuses more on expressing requirements and guiding AI. Essentially, both are about solving problems, just in different ways. You can think of traditional programming as cooking your own meal and Vibe Coding as ordering takeout—both get you fed, but the process is entirely different.
+
+### Is Vibe Coding Suitable for Everyone?
+
+Answer: Vibe Coding lowers the barrier to entry for programming, allowing more people to participate in development. However, it’s not a silver bullet. For highly complex systems, performance-critical projects, or scenarios requiring deep optimization, traditional programming might be more appropriate. Vibe Coding is best suited for rapid prototyping, personal projects, small to medium-sized applications, and utility software. If you’re a complete beginner looking to learn programming or quickly turn ideas into products, Vibe Coding is a great fit.
+
+### Do I Still Need to Learn Traditional Programming After Learning Vibe Coding?
+
+Answer: Yes, but there’s no rush. Vibe Coding can help you quickly implement functionality, but to truly understand code, debug complex issues, and optimize performance, you’ll need a foundation in programming. It’s recommended to learn programming knowledge while working on projects with Vibe Coding. This approach is more efficient and motivating. You can start by using AI to complete a few projects, gain confidence, and then systematically learn programming. This is much more interesting than diving straight into textbooks.
+
+### Is AI-Generated Code Reliable?
+
+Answer: AI-generated code works, but it’s not always perfect. It may contain bugs, performance issues, or security vulnerabilities. Therefore, you need to test functionality, review code, and continuously optimize. Don’t blindly trust AI—maintain a critical mindset. Just as you’d check your takeout for freshness, you need to vet AI-generated code. However, as AI models improve, the quality of generated code is getting better.
+
+### Will Vibe Coding Replace Programmers?
+
+Answer: It won’t completely replace programmers, but it will change how they work. Just as calculators didn’t replace mathematicians and search engines didn’t replace librarians, AI programming tools will become assistants rather than replacements for programmers. Future programmers will need stronger product thinking, architectural skills, and problem-solving abilities, not just coding skills. Programmers who can effectively use AI will have a competitive edge over those who can’t.
+
+### What Is AI Hallucination?
+
+Answer: AI hallucination refers to AI fabricating content that doesn’t exist, such as inventing non-existent APIs, incorrect function usage, or libraries that don’t exist. This is an inherent issue with AI models because they generate content based on probabilities. When encountering hallucinations, don’t panic—ask the AI to provide documentation links for verification or check official documentation yourself. If the AI persists with errors, try switching models or starting a new conversation to rephrase the problem.
+
+### What Does MVP Mean?
+
+Answer: MVP stands for Minimum Viable Product, which is the simplest version of a product that can still function. In short, it’s about building the most basic usable version first and then improving it over time. For example, an MVP version of a budgeting app might only include features for adding expenses, viewing lists, and calculating totals, with additional features like categorization, charts, and export added later. The benefit of this approach is that it allows for quick validation of ideas, avoids getting bogged down in details early on, and keeps development momentum.
+
+### What Is a Context Window?
+
+Answer: A context window refers to the amount of content an AI model can "remember" at once, typically measured in tokens. For example, Claude Sonnet 4.5 has a context window of 200K tokens, roughly equivalent to 150,000 Chinese characters. The larger the context window, the more code the AI can process and the longer it can retain conversation history. If your project involves a lot of code, choosing a model with a larger context window, such as Gemini 3 Pro, which supports 1M tokens, is more suitable.
+
+## Choosing Vibe Coding Tools
+
+### Which Is Better: Cursor or Windsurf?
+
+Answer: Both are excellent, each with its own strengths. Cursor has a more mature ecosystem, a larger community, more plugins, and better documentation. Windsurf offers innovative features like Cascade mode and has a more modern interface.
+
+If you’re a beginner, start with Cursor because it’s easier to find solutions to problems. If you like experimenting with new tools, try Windsurf. The best approach is to try both and see which suits your workflow better.
+
+### Is the Free Version Enough?
+
+Answer: For learning and small projects, the free version is sufficient. Cursor’s free version offers a certain monthly quota for specific models. However, for daily work or larger projects, the paid version is recommended. Paid versions offer higher quotas, more powerful models, and a better experience—essentially trading money for time.
+
+You can start with the free version and upgrade if you find it useful. Students can make full use of various free resources, which are more than enough for learning purposes.
+
+### How to Choose an AI Model?
+
+Answer: Choose based on task complexity and budget. Use cheaper models (Gemini Flash, DeepSeek) for simple tasks and more powerful models (Claude Opus, GPT-5) for complex tasks. For front-end UI, Gemini 3 Pro performs well. For full-stack projects, Claude Sonnet is more comprehensive. If budget is tight, domestic models (DeepSeek, Tongyi Qianwen, Zhipu GLM) offer good value for money.
+
+If you’re unsure, use Auto mode to let the tool select automatically, or start with a cheaper model and switch to a stronger one if needed.
+
+### What’s the Difference Between Bolt.new and v0.dev?
+
+Answer: Bolt.new is better suited for full-stack applications, generating complete front-end and back-end code that can be run and debugged directly in the browser. v0.dev focuses more on front-end UI components and excels at generating beautiful interfaces. If you want to quickly build a complete application, use Bolt.new. If you’re just generating UI components, use v0.dev. Both are zero-code platforms that require no software installation—just open your browser and start using them, making them ideal for beginners.
+
+### Where Can I Get an API Key?
+
+Answer: Register an account on the official website of the corresponding service, then generate a key in the settings or API section. For example, OpenAI’s key can be obtained at platform.openai.com, Anthropic’s Claude key at console.anthropic.com, and Supabase’s key in the project settings.
+
+After generating an API key, keep it secure and avoid exposing it in public repositories like GitHub. It’s recommended to manage API keys using environment variables or configuration files to avoid hardcoding them in your code.
+
+### How to Access Cursor and Claude in China?
+
+Answer: Cursor can be accessed directly, but accessing Claude’s official website in China may be difficult. You can use domestic models as alternatives, such as DeepSeek, Tongyi Qianwen, and Zhipu GLM, which are already close to international models in programming capabilities, offer faster access, and are cheaper. If you must use Claude, consider using the API or accessing it through services like OpenRouter.
+
+### What AI Modes Does Cursor Offer?
+
+Answer: Cursor 2.0 primarily offers two AI interaction modes:
+
+1. Chat Mode: Dialogue mode, suitable for asking questions, explaining code, and making minor modifications.
+2. Agent Mode: The most powerful mode, capable of autonomously planning and executing complex tasks, modifying multiple files simultaneously, and supporting parallel execution of multiple agents.
+
+If you just want to ask questions or modify a single function, Chat Mode is sufficient. For adding new features or modifying multiple files, Agent Mode is more suitable. Agent Mode also supports Plan Mode, which generates a plan for your confirmation before executing changes.
+
+### Should I Choose a Zero-Code Platform or a Code Editor?
+
+Answer: If you’re a complete beginner or just want to quickly create a prototype, use a zero-code platform (Bolt.new, v0.dev). If you’re working on a complex project, need more control, or want to learn programming, use a code editor (Cursor, Claude Code, etc.).
+
+Zero-code platforms are simple and fast but offer limited flexibility. Code editors are more powerful but have a steeper learning curve. It’s recommended to start with a zero-code platform to get a feel for it, then move on to a code editor.
+
+## Vibe Coding Usage Tips
+
+### What to Do If AI-Generated Code Has Errors?
+
+Answer: Copy the complete error message and relevant code to the AI for analysis and fixes. Make sure to include the full error stack, not just a single line. If the AI can’t fix it, try switching to a stronger model or start a new conversation to rephrase the problem. You can also consult documentation or search for solutions in communities or forums. Often, the error message itself contains clues to the solution—learning to read error messages is crucial.
+
+### What If AI Keeps Using the Wrong Tech Stack?
+
+Answer: Clearly state your tech stack at the beginning of each conversation. For example, "I’m using React + TypeScript + Tailwind CSS, please implement using these technologies."
+
+Alternatively, configure a `.cursorrules` file in your project to let the AI automatically know your tech stack.
+
+If the AI still uses the wrong stack, interrupt and correct it: "I’m using React, not Vue, please rewrite using React!"
+
+After emphasizing this multiple times, the AI will remember.
+
+### How to Make AI-Generated Code Match Project Style?
+
+Answer: Provide reference code for the AI to mimic. For example, "Please write the new component in the style of this component," then paste the reference code.
+
+Alternatively, include detailed code style guidelines in the context file, covering naming conventions, component structure, comment formats, etc.
+
+You can also provide a code style document for the AI to follow.
+
+Most importantly, the more specific your prompts, the better—don’t just say "make it look good," specify what "good" means.
+
+### What If AI-Generated Code Has Poor Performance?
+
+Answer: Use tools like Chrome DevTools or Lighthouse to identify performance bottlenecks, then ask the AI to optimize accordingly. For example, "This list renders slowly, please optimize with virtual scrolling," or "This function is slow with large datasets, please optimize the algorithm."
+
+Don’t aim for perfect performance from the start—get the functionality working first, then optimize bottlenecks. In most cases, AI-generated code performs adequately.
+
+### How to Handle AI Hallucinations?
+
+Answer: If the AI invents a non-existent API, ask it to provide documentation links. If it can’t, it’s a hallucination—ask it to use the correct API.
+
+If the AI gets stuck in a loop, cut off the context and start a new conversation.
+
+If the AI insists on an incorrect solution, try switching models or verify with official documentation.
+
+When encountering uncertain content, always verify—don’t blindly trust AI. It’s essential to develop the habit of consulting documentation—it’s a fundamental skill for programmers.
+
+### How to Debug AI-Generated Code?
+
+Answer: Use breakpoint debugging instead of relying solely on console.log.
+
+Set breakpoints in the browser or editor, step through the code, and inspect variable values. This gives you a clearer view of the code’s execution. If you still can’t find the issue, share the error message and code with the AI for analysis. You can also ask the AI to add detailed logs to help you understand the code’s execution flow.
+
+Debugging is a crucial skill for programmers—it’s worth investing time to learn.
+
+### How to Improve Prompt Quality?
+
+Answer: Prompts should be specific, clear, and structured. Don’t say "build a website," say "build a budgeting website with features for adding expenses, viewing lists, and calculating totals, using a blue color scheme and a clean, modern style."
+
+Break prompts into sections: functional requirements, interface requirements, technical requirements. You can also provide reference examples, such as "Interface style inspired by Notion."
+
+Remember, the more detailed your prompts, the more aligned the AI’s output will be with your expectations.
+
+### What If AI-Generated Code Is Too Verbose?
+
+Answer: Ask the AI to refactor the code, extract repetitive parts, and simplify logic. For example, "This code is too long, please refactor it by extracting common functions and reducing repetition," or "Please implement this functionality in a more concise way."
+
+AI generally prioritizes making code functional over making it concise, so you need to explicitly request optimization. However, don’t over-pursue conciseness—readability is more important.
+
+### How to Get AI to Explain Code?
+
+Answer: Asking the AI to explain code helps you understand and learn faster. You can directly ask, "What does this code do? Please explain in detail," or "What’s the logic behind this function? Why was it written this way?" The AI will explain in plain language.
+
+If the explanation is too simple, say, "Please explain in more detail, including the purpose of each step." If it’s too complex, say, "Please explain in simpler terms, I’m a beginner," or even "I’m a dummy"—the results might surprise you.
+
+### How to Handle Outdated AI-Generated Code?
+
+Answer: AI training data may lag, so it sometimes generates code for older versions. Clearly tell the AI to use the latest version, such as "Please use the latest React 19 syntax," or "Please use Next.js 15’s App Router." Always provide the AI with the latest official documentation.
+
+### How to Include Code Examples in Prompts?
+
+Answer: Wrap the code in triple backticks and paste it into the prompt. For example:
+
+````markdown
+Please reference the style of this code:
+
+```jsx
+Code content
+```
+````
+
+If the code is long, include only the key parts. You can also use the AI code editor’s `@` feature to let the AI read files from your project, such as "Please reference the style of @src/components/Button.tsx." Providing code examples helps the AI better understand your requirements.
+
+### What If AI Keeps Generating Repetitive Code?
+
+Answer: Remind the AI to extract common functions or components. For example, "This code has a lot of repetition, please extract it into a common function," or "Please create a reusable component." You can also explicitly state in the prompt, "Avoid repetitive code, follow the DRY principle." If the AI still generates repetitive code, manually refactor it or try switching models.
+
+### How to Handle Unsafe AI-Generated Code?
+
+Answer: Ask the AI to review the code for security issues. For example, "Please check this code for security vulnerabilities," or "Add input validation to prevent XSS attacks." You can also use security scanning tools, such as ESLint’s security plugins for front-end code. For sensitive operations (e.g., user authentication, payments), be extra cautious—consult experienced developers or use multiple advanced AI models for cross-validation.
+
+## Vibe Coding Project Development
+
+### What If My Project Code Becomes Messy Halfway Through?
+
+Answer: Refactor promptly—don’t wait until it’s a complete mess. After completing each feature, spend 10–15 minutes organizing the code. Extract repetitive code, split large functions, improve naming, and add comments.
+
+If it’s already messy, let the AI help with refactoring, but proceed incrementally and test each step. For example, "Please refactor this file by extracting common functions," rather than "Refactor the entire project." Take small steps and improve gradually.
+
+Note: Always commit your current code with Git before refactoring! This allows you to revert to the previous version if refactoring goes wrong. Frequent commits are the best way to protect your code.
+
+### How to Deploy an AI-Generated Project?
+
+Answer: Many zero-code platforms (e.g., Bolt.new) support one-click deployment—just press a button to go live.
+
+For manual deployment, use platforms like Vercel or Netlify. Push your code to GitHub, connect the repository on the platform, and it will automatically build and deploy.
+
+If you need a backend, use BaaS services like Supabase. If you need your own server, consider Docker containerized deployment.
+
+In short, deployment isn’t that hard—just follow Yupi’s deployment tutorials step by step.
+
+### What If There’s a Bug After Launch?
+
+Answer: First, use monitoring tools (Sentry, LogRocket) to collect error information. Then, reproduce the issue locally to identify the cause.
+
+After fixing, have the AI write more tests to ensure the issue doesn’t recur. Finally, deploy the fix as soon as possible.
+
+To avoid this, thoroughly test before launch, including functional testing, edge case testing, and testing on different devices. Ask friends to help test—they often catch issues you might miss.
+
+### How to Turn a Toy Project into a Real Product?
+
+Answer: Consider many aspects, such as:
+
+1. Improve error handling to account for various exceptions.
+2. Add tests to ensure stability.
+3. Optimize performance for faster operation.
+4. Enhance security to protect user data.
+5. Improve UI for better usability.
+6. Write documentation for easier maintenance and expansion.
+7. Consider SEO, monitoring, logging, etc.
+
+This is a continuous improvement process—don’t aim for perfection from the start. Improve incrementally, and gradually, it will become a real product.
+
+### How to Evaluate Project Quality?
+
+Answer: Don’t just focus on functionality—quality is equally important. A project with complete functionality but full of bugs is worse than a simple project that’s stable and reliable.
+
+Evaluate based on these aspects:
+
+- Functional completeness (does it meet all requirements?)
+- Code quality (is it clear and maintainable?)
+- Performance (loading speed, responsiveness)
+- Security (are there vulnerabilities?)
+- User experience (is it easy to use?)
+- Test coverage (are there sufficient tests?)
+
+### What If AI Can’t Solve a Problem?
+
+Answer: First, don’t stick to one AI—try switching models, as different models excel in different areas.
+
+If you have programming experience, check the official documentation—it’s the most authoritative source.
+
+Alternatively, search for

translations/en/Vibe Coding 零基础教程/README.md

@@ -0,0 +1,46 @@
+# Fish Skin's Vibe Coding Zero-Basics Tutorial
+
+Hello everyone, I'm programmer Fish Skin.
+
+Nowadays, Vibe Coding has taken the internet by storm. Not just programmers, but even designers, product managers, operations specialists, and people with no technical background at all are using Vibe Coding to realize their ideas, creating products with AI and monetizing them.
+
+To help everyone keep up with the times, I've single-handedly created a completely free and open-source [Vibe Coding Zero-Basics Tutorial](https://ai.codefather.cn/vibe)!
+
+With thousands of images and hundreds of thousands of words, combining my 2.5 years of AI programming experience + project development experience + product monetization experience, I have just one goal: **Help anyone quickly master Vibe Coding. Even with zero background, you can rapidly develop and launch your own product to profitability.**
+
+![Fish Skin's Free Vibe Coding Tutorial](https://pic.yupi.icu/1/%E9%B1%BC%E7%9A%AE%E7%9A%84%E5%85%8D%E8%B4%B9VibeCoding%E6%95%99%E7%A8%8B.png)
+
+To brag a little, I dare say this free tutorial outperforms 90% of paid Vibe Coding content out there, given the amount of time I've invested.
+
+- Tutorial documentation open-source address: https://github.com/liyupi/ai-guide
+- Online reading address: https://ai.codefather.cn/vibe
+
+Feel free to Star, bookmark, and share with friends!
+
+![](https://pic.yupi.icu/1/vibe%252520coding%252520show%2525E5%2525A4%2525A7-20260113165845170.jpeg)
+
+## What is Vibe Coding?
+
+Simply put, **Vibe Coding is chatting with AI in plain language to have it write code for you**. You don't need to memorize any syntax—just clearly articulate your requirements, like "Help me create an expense tracking page," and AI will generate it for you. Programming becomes as natural as having a conversation—that's the magic of Vibe Coding.
+
+## Why Learn Vibe Coding?
+
+In the past, learning programming took months. Now with Vibe Coding, you can get started in just a few days. Think of an idea today, build it today—productivity increases by orders of magnitude!
+
+After learning Vibe Coding, you can quickly create tools to boost office efficiency, develop apps to solve everyday problems, and turn creative ideas into real, profitable products.
+
+## What's in This Tutorial?
+
+While there are many AI programming tutorials online, most are either too fragmented, only cover tools without methodology, or lack practical examples.
+
+This leads to piecemeal learning—finding one trick here, another there—making it hard to systematically master Vibe Coding.
+
+That's why I stepped in!
+
+This tutorial covers every aspect of Vibe Coding. From zero basics => creating your first project in 10 minutes => learning multiple AI programming tools => hands-on projects => mastering core AI programming techniques => running through the entire product monetization process. Plus, it comes with AI programming learning resources, an AI knowledge base, and a troubleshooting manual to help you dominate Vibe Coding and handle any demand.
+
+![](https://pic.yupi.icu/1/%E9%B1%BC%E7%9A%AE%E7%9A%84AI%E5%AF%BC%E8%88%AA-AI%E5%B7%A5%E5%85%B7%E7%94%A8%E6%B3%95%E5%A4%A7%E5%85%A8.png)
+
+I've carefully structured the content for seamless learning or quick access to relevant sections.
+
+- **Essentials**: Quickly understand Vibe Coding and get hands-on