chnjinlei/ai-guide
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

[GitHub Global] Translate Vibe Coding 零基础教程/10 编程工具/02 AI 零代码平台.md to en

Browse Source
This commit is contained in:
yupi-translate-app[bot]
2026-02-05 12:25:54 +00:00
committed by GitHub
parent bc3c3df0f4
commit 55a36a2590
1 changed files with 83 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
translations/en/Vibe Coding 零基础教程/10 编程工具/02 AI 零代码平台.md
+83 -83
View File
@@ -1,51 +1,51 @@
# AI Zero-Code Platform
# AI No-Code Platform
> Create applications directly in your browser, the simplest way of Vibe Coding
> Build applications by just opening your browser - the simplest Vibe Coding approach
Hi, I'm Yupi.
Hello, 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.
If you're a complete beginner or just want to quickly validate an idea, then a **no-code platform** is definitely your best choice.
Why is that?
Because zero-code platforms have three huge advantages:
Because no-code platforms have three major 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
1. No need to install any software: Just open your browser and start using it
2. No need to know any code: Describe your needs in natural language
3. What You See Is What You Get (WYSIWYG): See the changes immediately 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.
In this article, I'll introduce several mainstream no-code platforms in detail, focusing on Baidu Miaoda, and teach you how to choose and use them.
## 1. What is a Zero-Code Platform?
## 1. What is a No-Code Platform?
Before introducing specific tools, let's clarify: What is a zero-code platform?
Before diving into specific tools, let's first clarify: What is a no-code platform?
Simply put, **a zero-code platform is an AI programming tool that you can use directly in your browser.**
Simply put, **a no-code platform is an AI-powered 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.
You only 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:
Comparison with 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.
Isn't it much simpler? This is the charm of no-code platforms.
### Suitable Scenarios
### Suitable Scenarios?
Zero-code platforms are particularly suitable for:
No-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
- Learning experience: Want to experience Vibe Coding
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.
Of course, no-code platforms also have limitations. For particularly complex projects, you might still need a code editor. But for most scenarios, no-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.
Now that you understand the basic concept of no-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.
Bolt.new is currently one of the hottest no-code platforms, launched by StackBlitz. Its biggest feature is **speed**—from idea to seeing the result, it might only take 1 minute.
Core advantages of Bolt.new:
@@ -56,9 +56,9 @@ Core advantages of Bolt.new:
### 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.
> 💡 We've already covered Bolt.new usage in the【Basic Must-Read】Quick Start Guide, so you can skip this section.
Using Bolt.new is very simple. I'll demonstrate with a practical example, such as creating a simple Pomodoro timer.
Using Bolt.new is very simple. Let me demonstrate with a practical example: creating a simple Pomodoro timer.
Steps:
@@ -82,7 +82,7 @@ Please help me create a Pomodoro timer with the following features:
![](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~
4) If unsatisfied, continue adjusting through dialogue. Or use the visual editing feature—click where you want to change.
```
Change the background color to light blue and the buttons to rounded corners
@@ -90,7 +90,7 @@ 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.
5) Once satisfied, click the "Publish" button to deploy with one click and get a shareable link.
![](https://pic.yupi.icu/1/image-20260107111103207.png)
@@ -98,35 +98,35 @@ 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.
Bolt.new is great for quickly validating ideas or creating simple demos. It's very fast, has a low learning curve, and requires no coding knowledge—just speak your requirements. You can also view the generated code if you want to learn. Finally, deploying a website is straightforward—just click a button 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.
However, for particularly complex projects, such as those requiring complex backend logic or database operations, Bolt.new might not perform as well. While you can adjust the website through dialogue, for highly detailed customization, it might not be as flexible as writing code directly. Also, it must be used in a browser, 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
- Free version: Limited usage, suitable for trial and learning
- Paid version: Around $25/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.
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 upgrading to the paid version.
## 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!
Lovable is a powerful no-code platform that not only handles frontend but also full-stack applications: including frontend, backend, database, and even user authentication!
Core advantages of Lovable:
1. Full-stack capability: Can create complete web applications
1. Full-stack capability: Can build 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.
Let me demonstrate with a more complex example. Suppose I want to create a simple expense tracking app with login functionality.
Steps:
1) Open the [website](https://lovable.dev) and log in with GitHub or email
1) Open the [website](https://lovable.dev) and log in using GitHub or email
2) Enter your requirements in the dialog box:
@@ -152,11 +152,11 @@ During this process, you might need to manually confirm some operations, such as
![](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
4) After a few minutes, the AI completes the generation, and you can test the functionality 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
5) Continue optimizing details through dialogue and visual editing—the editing experience is quite good
![](https://pic.yupi.icu/1/image-20260107112259442.png)
@@ -166,9 +166,9 @@ During this process, you might need to manually confirm some operations, such as
### 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.
If your project requires backend, database, and user systems, Lovable is a great choice—it can handle 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.
The generated code is also well-organized, making it easier to export and maintain later. It directly integrates Supabase, a powerful backend service, allowing you to easily handle data storage, user authentication, and other complex functionalities.
![](https://pic.yupi.icu/1/image-20260107112431787.png)
@@ -177,19 +177,19 @@ Of course, because it's more powerful, it's also relatively more complex, and be
### Pricing
- Free version: Limited usage
- Paid version: Around $25 ~ $50 per month
- Paid version: Around $25 ~ $50/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.
If you're building a complete web application that requires a database and user system, Lovable is an excellent choice. But if you're just creating a simple showcase page, Bolt.new is sufficient.
## 4. Baidu Miaoda - Domestic Zero-Code Platform
## 4. Baidu Miaoda - Domestic No-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.
Baidu Miaoda is an AI-powered no-code application building platform launched by Baidu, and one of the most successful no-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.
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), which can be directly integrated without additional development. Moreover, 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:
Using Miaoda is very simple, just like other no-code platforms:
1) Visit the [Baidu Miaoda official website](https://www.miaoda.cn/), register an account, and log in
@@ -201,9 +201,9 @@ Create an online booking system where users can select a date and time, fill in
![](https://pic.yupi.icu/1/image-20260107112754177.png)
3) Next, enter the development phase, and the AI might confirm requirements through conversation.
3) Next, enter the development phase, and the AI might confirm your requirements through dialogue.
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.
If you want to create a commercial-grade project, communicate thoroughly with it; if you're just making a demo for fun, you can skip the dialogue.
![](https://pic.yupi.icu/1/image-20260107112932144.png)
@@ -211,13 +211,13 @@ 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.
You can manually edit the document or directly generate the application immediately.
After waiting a few minutes, the AI automatically generates a complete application, and you can preview the effect in real-time:
After waiting a few minutes, the AI automatically generates a complete application, and you can preview the results 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.
5) Like other platforms, you can modify the application. It supports visual editing, and the editing experience is quite good.
![](https://pic.yupi.icu/1/image-20260107113743213.png)
@@ -225,21 +225,21 @@ After waiting a few minutes, the AI automatically generates a complete applicati
![](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
7) If you need more capabilities, you can extend functionality using plugins, such as integrating WeChat Pay for charging fees
![](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.
Miaoda's biggest advantage is its Chinese-friendly interface—no need to know English. It also has strong commercialization capabilities, with built-in payment functionality, allowing 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, based on 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.
But for domestic users, especially those wanting to create Mini Programs or quickly commercialize in the Chinese market, Miaoda is a good choice.
## 4. Other Zero-Code Platforms Worth Noting
## 4. Other Notable No-Code Platforms
Besides the three mainstream platforms mentioned above, there are other zero-code platforms worth knowing about.
Besides the three mainstream platforms mentioned above, there are other no-code platforms worth knowing about.
### v0
@@ -253,9 +253,9 @@ Suitable scenarios: Need to generate beautiful interfaces, quickly build full-st
### 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.
[Replit](https://replit.com) is not just a no-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.
Features: Supports multiple languages, fully runs 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.
@@ -265,7 +265,7 @@ Suitable scenarios: Need backend development, want to learn multiple languages,
[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.
Features: Fully 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.
@@ -273,11 +273,11 @@ Suitable scenarios: Use Google ecosystem, need Firebase services, want AI-assist
## 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.
Besides the no-code platforms mentioned above, there are 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.
Their positioning is different from no-code platforms like Bolt.new. Bolt.new is mainly used to generate regular websites and applications, while AI application development platforms are primarily 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.
In short, if you're building a regular website or application (like a personal homepage or e-commerce site), Bolt.new or Baidu Miaoda is sufficient. If you're building an AI application (like a smart customer service, AI assistant, or knowledge base Q&A system), you can try Dify or Coze.
![Dify Developing AI Applications](https://pic.yupi.icu/1/1743561915955-ad27735a-c927-4207-b769-03fda32081b6.png)
@@ -285,59 +285,59 @@ These platforms provide visual configuration interfaces, allowing you to build A
![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?
## 6. How to Choose a No-Code Platform?
By now, you might be asking: With so many platforms each having their own strengths, which one should I choose?
By now, you might be asking: With so many platforms, each with its own strengths, which one should I choose?
Actually, the choice is simple, mainly depending on your needs and personal situation.
Actually, the choice is simple—it mainly depends 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're a domestic user and want to create Mini Programs or need commercialization, Baidu Miaoda is the first choice—it's Chinese-friendly and has built-in payment functionality, with hundreds of thousands of successful commercial 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.
If you need to quickly prototype or create simple pages, Bolt.new is fast and easy to use—you can see results in 1 ~ 2 minutes. If you need to build a complete web application with a database and user system, Lovable is a better choice—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.
If you're a complete beginner (never written code), start with Baidu Miaoda or Bolt.new—they're the simplest and easiest to get started with. If you have some basics (learned some programming), you can try Lovable—it's more powerful and can handle more complex tasks.
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
## 7. Practical Tips for Using No-Code Platforms
During my use of zero-code platforms, I've summarized some practical tips to share with you.
During my use of no-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.
Don't just say "build a website"—describe in detail, such as "build a personal portfolio website with a homepage (big title + introduction + avatar), project showcase (card layout), contact information, 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
2) Implement step by step
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.
Don't make too many requests at once—do it step by step. First, build the basic framework, then add features, and finally optimize details. This makes it easier to control progress and identify and fix issues.
3) If you have reference designs, you can upload images for the AI to reference, generating UI that better meets expectations.
3) If you have reference designs, upload images for the AI to reference—this can generate UI that better matches your 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.
4) After each AI code generation, always test in the preview area. For example, click all buttons to see if functionality works, check effects on different screen sizes, input test data to see if it displays correctly. If you find issues, immediately ask the AI to fix them—don't let 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.
5) Before making major changes, it's best to save the current version. Most platforms support version history, so you can 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.
6) Finally, even if you don't know code now, you can export the generated code and save it. Later, when you're learning, you can revisit and study how the code was written.
## Final Words
## Final Thoughts
By now, I believe you have a comprehensive understanding of zero-code platforms.
By now, I believe you have a comprehensive understanding of no-code platforms.
I think **zero-code platforms are the best starting point for learning Vibe Coding.**
I think **no-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.
After reading this tutorial, be sure to try it out immediately! 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.
Remember, the greatest charm of Vibe Coding is rapid iteration. Don't aim for perfection on the first try—quickly create something, then continuously improve it.
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.
In the next article, I'll explain how to use AI code editors in detail, taking you to experience a more professional and powerful Vibe Coding approach.
Keep it up!
@@ -347,7 +347,7 @@ Keep it up!
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)
3) Programmer Interview Cheatsheet: [Internship/Campus Recruitment/Social Recruitment High-Frequency Topics, Enterprise Real Questions Analysis](https://www.mianshiya.com)
4) Programmer Resume Writing Tool: [Professional Templates, Rich Examples, Direct to Interview](https://www.laoyujianli.com)