mirror of
https://github.com/tradecatlabs/vibe-coding-cn.git
synced 2026-08-22 07:18:05 +00:00
docs: 更新文档和技能
This commit is contained in:
tukuaiai
@@ -0,0 +1,15 @@
|
||||
# Vibe Coding Philosophy
|
||||
|
||||
> First principle: Everything to AI... I am a parasite of AI, without AI I lose all capabilities.
|
||||
|
||||
## Practice
|
||||
|
||||
Encounter any problems? Send them to AI, describe clearly, you can send screenshots, screen recordings, etc., send your complete problem and context (history/background) to AI.
|
||||
|
||||
---
|
||||
|
||||
## Next Step
|
||||
|
||||
After understanding the philosophy, start practical operations:
|
||||
|
||||
→ [01-Network Environment Configuration](./01-Network%20Environment%20Configuration.md)
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
# Network Environment Configuration
|
||||
|
||||
> Prerequisite for Vibe Coding: Ensure normal access to services like GitHub, Google, and Claude.
|
||||
|
||||
---
|
||||
|
||||
## Method One: AI-Guided Configuration (Recommended)
|
||||
|
||||
Copy the following prompt and paste it into any AI chat box (ChatGPT, Claude, Gemini web version, etc.):
|
||||
|
||||
```
|
||||
You are a patient network environment configuration assistant. I need to configure a network proxy to access foreign services such as GitHub, Google, and Claude.
|
||||
|
||||
My situation:
|
||||
- Operating system: [Please tell me if you are using Windows/macOS/Linux/Android]
|
||||
- I already have a proxy service subscription link (airport subscription)
|
||||
|
||||
Please guide me on how to configure the network proxy using the FlClash client:
|
||||
1. How to download and install FlClash (GitHub: https://github.com/chen08209/FlClash/releases)
|
||||
2. How to import my subscription link
|
||||
3. How to enable TUN mode (virtual network card) to achieve global proxy
|
||||
4. How to enable system proxy
|
||||
5. How to verify if the configuration is successful
|
||||
|
||||
Requirements:
|
||||
- Detail each step, describe button locations with pictures
|
||||
- If I encounter problems, help me analyze the cause and provide solutions
|
||||
- After completing each step, ask me if it was successful, and then proceed to the next step
|
||||
|
||||
Let's start now, first ask me what operating system I am using.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Method Two: Manual Configuration
|
||||
|
||||
### You will need
|
||||
|
||||
1. **Network service subscription** - a provider of node services
|
||||
2. **FlClash** - a cross-platform network configuration client
|
||||
|
||||
### Step One: Purchase Network Service
|
||||
|
||||
Visit the service provider: https://xn--9kqz23b19z.com/#/register?code=35BcnKzl
|
||||
|
||||
- Register an account
|
||||
- Choose a plan (starting from approx. 6 RMB/month)
|
||||
- After payment, find the **subscription link** in the user panel and copy it for later use
|
||||
|
||||
### Step Two: Download FlClash
|
||||
|
||||
GitHub Download: https://github.com/chen08209/FlClash/releases
|
||||
|
||||
Select based on your system:
|
||||
- Windows: `FlClash-x.x.x-windows-setup.exe`
|
||||
- macOS: `FlClash-x.x.x-macos.dmg`
|
||||
- Linux: `FlClash-x.x.x-linux-amd64.AppImage`
|
||||
- Android: `FlClash-x.x.x-android.apk`
|
||||
|
||||
### Step Three: Import Subscription
|
||||
|
||||
1. Open FlClash
|
||||
2. Click **Configuration** → **Add**
|
||||
3. Select **URL Import**
|
||||
4. Paste the subscription link copied in the first step
|
||||
5. Click confirm and wait for nodes to load
|
||||
|
||||
### Step Four: Enable Proxy
|
||||
|
||||
Set the following three items in order:
|
||||
|
||||
| Setting | Operation |
|
||||
| :---------------------- | :-------------------------------------- |
|
||||
| **Virtual Network Card (TUN)** | Enable - Achieve global traffic proxy |
|
||||
| **System Proxy** | Enable - Let system applications use the proxy |
|
||||
| **Proxy Mode** | Select **Global Mode** |
|
||||
|
||||
After setting up, the FlClash main interface should show "Connected".
|
||||
|
||||
### Verification
|
||||
|
||||
```bash
|
||||
# Test Google connectivity
|
||||
curl -I https://www.google.com
|
||||
|
||||
# Test GitHub connectivity
|
||||
curl -I https://github.com
|
||||
```
|
||||
|
||||
If `HTTP/2 200` is returned, the configuration is successful.
|
||||
|
||||
---
|
||||
|
||||
## FAQ
|
||||
|
||||
**Q: Nodes can't connect?**
|
||||
A: Try switching to other nodes, or check if the subscription has expired.
|
||||
|
||||
**Q: Some applications don't use the proxy?**
|
||||
A: Ensure TUN mode (virtual network card) is enabled.
|
||||
|
||||
**Q: Want the terminal to also use the proxy?**
|
||||
A: The terminal automatically uses the proxy after TUN mode is enabled; or manually set:
|
||||
```bash
|
||||
export https_proxy=http://127.0.0.1:7890
|
||||
export http_proxy=http://127.0.0.1:7890
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Next Step
|
||||
|
||||
After network configuration is complete, continue reading [02-Development Environment Setup](./02-Development%20Environment%20Setup.md).
|
||||
+158
@@ -0,0 +1,158 @@
|
||||
# Development Environment Setup Prompt
|
||||
|
||||
> How to use: Copy the prompt corresponding to your device below and paste it into any AI chat box (ChatGPT, Claude, Gemini web version, etc.). The AI will guide you step by step to complete the configuration.
|
||||
|
||||
**Prerequisite**: Please complete [01-Network Environment Configuration](./01-Network%20Environment%20Configuration.md) first.
|
||||
|
||||
---
|
||||
|
||||
## 🪟 Windows User Prompt
|
||||
|
||||
### Option A: WSL2 + Linux Environment (Recommended)
|
||||
|
||||
> Suitable for: Those who want a complete Linux development experience and the best compatibility.
|
||||
|
||||
```
|
||||
You are a patient development environment configuration assistant. I am a complete beginner using a Windows system, and I need you to guide me step by step to set up a Linux development environment via WSL2.
|
||||
|
||||
Please guide me in the following order, giving me one step at a time, and wait for my confirmation before proceeding to the next step:
|
||||
|
||||
1. Install WSL2 (Windows Subsystem for Linux)
|
||||
2. Install Ubuntu in WSL2
|
||||
3. Configure Ubuntu basic environment (update system)
|
||||
4. Install nvm and Node.js
|
||||
5. Install Gemini CLI or other free AI CLI tools
|
||||
6. Install basic development tools (git, python, build-essential, tmux)
|
||||
7. Configure Git user information
|
||||
8. Install code editor (VS Code and configure WSL plugin)
|
||||
9. Verify that all tools are working correctly
|
||||
|
||||
Requirements:
|
||||
- Provide specific commands for each step, and tell me where to run them (PowerShell or Ubuntu terminal)
|
||||
- Explain the purpose of each command in simple, easy-to-understand language
|
||||
- If I encounter an error, help me analyze the cause and provide a solution
|
||||
- After completing each step, ask me if it was successful, and then proceed to the next step
|
||||
|
||||
Now, let's start with the first step.
|
||||
```
|
||||
|
||||
### Option B: Native Windows Terminal
|
||||
|
||||
> Suitable for: Those who don't want to install WSL and want to develop directly on Windows.
|
||||
|
||||
```
|
||||
You are a patient development environment configuration assistant. I am a complete beginner using a Windows system, and I need you to guide me step by step to set up a development environment in a native Windows environment (without using WSL).
|
||||
|
||||
Please guide me in the following order, giving me one step at a time, and wait for my confirmation before proceeding to the next step:
|
||||
|
||||
1. Install Windows Terminal (if not already installed)
|
||||
2. Install Node.js (via official installer or winget)
|
||||
3. Install Git for Windows
|
||||
4. Install Python
|
||||
5. Install Gemini CLI or other free AI CLI tools
|
||||
6. Configure Git user information
|
||||
7. Install code editor (VS Code)
|
||||
8. Verify that all tools are working correctly
|
||||
|
||||
Requirements:
|
||||
- Provide specific commands or operation steps for each step
|
||||
- Explain the purpose of each step in simple, easy-to-understand language
|
||||
- If I encounter an error, help me analyze the cause and provide a solution
|
||||
- After completing each step, ask me if it was successful, and then proceed to the next step
|
||||
|
||||
Now, let's start with the first step.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🍎 macOS User Prompt
|
||||
|
||||
```
|
||||
You are a patient development environment configuration assistant. I am a complete beginner using a macOS system, and I need you to guide me step by step to set up the Vibe Coding development environment from scratch.
|
||||
|
||||
Please guide me in the following order, giving me one step at a time, and wait for my confirmation before proceeding to the next step:
|
||||
|
||||
1. Install Homebrew package manager
|
||||
2. Install Node.js using Homebrew
|
||||
3. Install Gemini CLI or other free AI CLI tools
|
||||
4. Install basic development tools (git, python, tmux)
|
||||
5. Configure Git user information
|
||||
6. Install code editor (VS Code or Neovim)
|
||||
7. Verify that all tools are working correctly
|
||||
|
||||
Requirements:
|
||||
- Provide specific commands for each step
|
||||
- Explain the purpose of each command in simple, easy-to-understand language
|
||||
- If I encounter an error, help me analyze the cause and provide a solution
|
||||
- After completing each step, ask me if it was successful, and then proceed to the next step
|
||||
|
||||
Now, let's start with the first step.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🐧 Linux User Prompt
|
||||
|
||||
```
|
||||
You are a patient development environment configuration assistant. I am a complete beginner using a Linux system (Ubuntu/Debian), and I need you to guide me step by step to set up the Vibe Coding development environment from scratch.
|
||||
|
||||
Please guide me in the following order, giving me one step at a time, and wait for my confirmation before proceeding to the next step:
|
||||
|
||||
1. Update the system and install basic dependencies (curl, build-essential)
|
||||
2. Install nvm and Node.js
|
||||
3. Install Gemini CLI or other free AI CLI tools
|
||||
4. Install development tools (git, python, tmux)
|
||||
5. Configure Git user information
|
||||
6. Install code editor (VS Code or Neovim)
|
||||
7. Verify that all tools are working correctly
|
||||
|
||||
Requirements:
|
||||
- Provide specific commands for each step
|
||||
- Explain the purpose of each command in simple, easy-to-understand language
|
||||
- If I encounter an error, help me analyze the cause and provide a solution
|
||||
- After completing each step, ask me if it was successful, and then proceed to the next step
|
||||
|
||||
Now, let's start with the first step.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## After Configuration
|
||||
|
||||
### CLI Tool Configuration Tips
|
||||
|
||||
AI CLI tools default to asking for confirmation; enabling full permission mode can skip this:
|
||||
|
||||
```bash
|
||||
# Codex - Most powerful configuration
|
||||
codex --enable web_search_request -m gpt-5.1-codex-max -c model_reasoning_effort="high" --dangerously-bypass-approvals-and-sandbox
|
||||
|
||||
# Claude Code - Skip all confirmations
|
||||
claude --dangerously-skip-permissions
|
||||
|
||||
# Gemini CLI - YOLO Mode
|
||||
gemini --yolo
|
||||
```
|
||||
|
||||
### Recommended Bash Alias Configuration
|
||||
|
||||
Add the following configuration to `~/.bashrc`, one letter to start AI:
|
||||
|
||||
```bash
|
||||
# c - Codex (GPT-5.1 most powerful mode)
|
||||
alias c='codex --enable web_search_request -m gpt-5.1-codex-max -c model_reasoning_effort="high" --dangerously-bypass-approvals-and-sandbox'
|
||||
|
||||
# cc - Claude Code (full permissions)
|
||||
alias cc='claude --dangerously-skip-permissions'
|
||||
|
||||
# g - Gemini CLI (YOLO Mode)
|
||||
alias g='gemini --yolo'
|
||||
```
|
||||
|
||||
After configuration, execute `source ~/.bashrc` to take effect.
|
||||
|
||||
---
|
||||
|
||||
After environment setup, proceed to the next step:
|
||||
|
||||
→ [03-IDE Configuration](./03-IDE%20Configuration.md) - Configure VS Code Development Environment
|
||||
@@ -0,0 +1,172 @@
|
||||
# IDE Configuration Prompt
|
||||
|
||||
> How to use: Copy the prompt corresponding to your IDE below and paste it into any AI chat box. The AI will guide you step by step to complete the configuration.
|
||||
|
||||
**Prerequisite**: Please complete [02-Development Environment Setup](./02-Development%20Environment%20Setup.md) first.
|
||||
|
||||
---
|
||||
|
||||
## Choose Your IDE
|
||||
|
||||
- [VS Code](#vs-code) - Free, most common
|
||||
- [Cursor](#cursor) - AI-native IDE, based on VS Code
|
||||
- [Windsurf](#windsurf) - AI-native IDE, free tier for new users
|
||||
|
||||
---
|
||||
|
||||
## VS Code
|
||||
|
||||
### 🪟 Windows + WSL Users
|
||||
|
||||
```
|
||||
You are a patient VS Code configuration assistant. I have already installed WSL2 and Ubuntu, and now I need you to guide me step by step to configure VS Code for the best WSL development experience.
|
||||
|
||||
Please guide me in the following order, giving me one step at a time, and wait for my confirmation before proceeding to the next step:
|
||||
|
||||
1. Install VS Code on Windows (if not already installed)
|
||||
2. Install the Remote - WSL extension
|
||||
3. Open a project folder via WSL
|
||||
4. Install basic development extensions (GitLens, Prettier, ESLint, Local History)
|
||||
5. Configure the terminal to use WSL by default
|
||||
6. Configure auto-save and formatting
|
||||
7. Verify that the configuration is working correctly
|
||||
|
||||
Requirements:
|
||||
- Provide specific operation methods for each step
|
||||
- If I encounter an error, help me analyze the cause and provide a solution
|
||||
- After completing each step, ask me if it was successful, and then proceed to the next step
|
||||
|
||||
Now, let's start with the first step.
|
||||
```
|
||||
|
||||
### 🪟 Windows Native Users
|
||||
|
||||
```
|
||||
You are a patient VS Code configuration assistant. I am using a Windows system (without WSL), and now I need you to guide me step by step to configure VS Code.
|
||||
|
||||
Please guide me in the following order, giving me one step at a time, and wait for my confirmation before proceeding to the next step:
|
||||
|
||||
1. Install VS Code (if not already installed)
|
||||
2. Install basic development extensions (GitLens, Prettier, ESLint, Local History)
|
||||
3. Configure the terminal to use PowerShell or Git Bash
|
||||
4. Configure auto-save and formatting
|
||||
5. Configure Git integration
|
||||
6. Verify that the configuration is working correctly
|
||||
|
||||
Requirements:
|
||||
- Provide specific operation methods for each step
|
||||
- If I encounter an error, help me analyze the cause and provide a solution
|
||||
- After completing each step, ask me if it was successful, and then proceed to the next step
|
||||
|
||||
Now, let's start with the first step.
|
||||
```
|
||||
|
||||
### 🍎 macOS Users
|
||||
|
||||
```
|
||||
You are a patient VS Code configuration assistant. I am using a macOS system, and now I need you to guide me step by step to configure VS Code.
|
||||
|
||||
Please guide me in the following order, giving me one step at a time, and wait for my confirmation before proceeding to the next step:
|
||||
|
||||
1. Install VS Code (via Homebrew or official website)
|
||||
2. Configure the 'code' command-line tool
|
||||
3. Install basic development extensions (GitLens, Prettier, ESLint, Local History)
|
||||
4. Configure auto-save and formatting
|
||||
5. Verify that the configuration is working correctly
|
||||
|
||||
Requirements:
|
||||
- Provide specific operation methods for each step
|
||||
- If I encounter an error, help me analyze the cause and provide a solution
|
||||
- After completing each step, ask me if it was successful, and then proceed to the next step
|
||||
|
||||
Now, let's start with the first step.
|
||||
```
|
||||
|
||||
### 🐧 Linux Users
|
||||
|
||||
```
|
||||
You are a patient VS Code configuration assistant. I am using a Linux system (Ubuntu/Debian), and now I need you to guide me step by step to configure VS Code.
|
||||
|
||||
Please guide me in the following order, giving me one step at a time, and wait for my confirmation before proceeding to the next step:
|
||||
|
||||
1. Install VS Code (via apt or snap)
|
||||
2. Install basic development extensions (GitLens, Prettier, ESLint, Local History)
|
||||
3. Configure auto-save and formatting
|
||||
4. Configure terminal integration
|
||||
5. Verify that the configuration is working correctly
|
||||
|
||||
Requirements:
|
||||
- Provide specific operation methods for each step
|
||||
- If I encounter an error, help me analyze the cause and provide a solution
|
||||
- After completing each step, ask me if it was successful, and then proceed to the next step
|
||||
|
||||
Now, let's start with the first step.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Cursor
|
||||
|
||||
> AI-native IDE, based on VS Code, with built-in AI programming features. Official website: https://cursor.com
|
||||
|
||||
```
|
||||
You are a patient Cursor IDE configuration assistant. I want to use Cursor as my main development tool, and I need you to guide me step by step through the installation and configuration.
|
||||
|
||||
My operating system is: [Please tell me if you are using Windows/macOS/Linux]
|
||||
|
||||
Please guide me in the following order, giving me one step at a time, and wait for my confirmation before proceeding to the next step:
|
||||
|
||||
1. Download and install Cursor (official website: https://cursor.com)
|
||||
2. First-time startup configuration (login, theme selection, etc.)
|
||||
3. Import VS Code settings and extensions (if you have used VS Code before)
|
||||
4. Configure AI features (API Key or subscription)
|
||||
5. Learn Cursor's core shortcuts:
|
||||
- Cmd/Ctrl + K: AI Edit
|
||||
- Cmd/Ctrl + L: AI Chat
|
||||
- Cmd/Ctrl + I: Composer mode
|
||||
6. Configure auto-save
|
||||
7. Verify that AI features are working correctly
|
||||
|
||||
Requirements:
|
||||
- Provide specific operation methods for each step
|
||||
- Explain Cursor's unique features compared to VS Code
|
||||
- If I encounter an error, help me analyze the cause and provide a solution
|
||||
- After completing each step, ask me if it was successful, and then proceed to the next step
|
||||
|
||||
Now, first ask me what operating system I am using.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Windsurf
|
||||
|
||||
> AI-native IDE, free tier for new users. Official website: https://windsurf.com
|
||||
|
||||
```
|
||||
You are a patient Windsurf IDE configuration assistant. I want to use Windsurf as my development tool, and I need you to guide me step by step through the installation and configuration.
|
||||
|
||||
My operating system is: [Please tell me if you are using Windows/macOS/Linux]
|
||||
|
||||
Please guide me in the following order, giving me one step at a time, and wait for my confirmation before proceeding to the next step:
|
||||
|
||||
1. Download and install Windsurf (official website: https://windsurf.com)
|
||||
2. Register an account and log in (new users get a free tier)
|
||||
3. First-time startup configuration
|
||||
4. Understand Windsurf's AI features (Cascade, etc.)
|
||||
5. Configure the basic development environment
|
||||
6. Verify that AI features are working correctly
|
||||
|
||||
Requirements:
|
||||
- Provide specific operation methods for each step
|
||||
- Explain Windsurf's unique features
|
||||
- If I encounter an error, help me analyze the cause and provide a solution
|
||||
- After completing each step, ask me if it was successful, and then proceed to the next step
|
||||
|
||||
Now, first ask me what operating system I am using.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## After Configuration
|
||||
|
||||
After IDE configuration is complete, read [README.md](../../../../README.md) to understand the Vibe Coding workflow and start your first project!
|
||||
@@ -0,0 +1,29 @@
|
||||
# 🚀 Starting Vibe Coding from Scratch
|
||||
|
||||
> Absolutely no foundation? Follow the steps below in order to start your AI programming journey.
|
||||
|
||||
---
|
||||
|
||||
## Learning Path
|
||||
|
||||
| No. | Document | Description |
|
||||
|:---:|:---|:---|
|
||||
| 00 | [Philosophy](./00-Vibe%20Coding%20Philosophy.md) | Understand the core concepts of Vibe Coding |
|
||||
| 01 | [Network Environment Configuration](./01-Network%20Environment%20Configuration.md) | Configure network to ensure access to GitHub, Google, etc. |
|
||||
| 02 | [Development Environment Setup](./02-Development%20Environment%20Setup.md) | Copy prompts to AI, let AI guide you to install development tools |
|
||||
| 03 | [IDE Configuration](./03-IDE%20Configuration.md) | Configure VS Code editor |
|
||||
|
||||
---
|
||||
|
||||
## How to use
|
||||
|
||||
1. Read each document in order
|
||||
2. Prompts in the document can be directly copied to an AI chat box (ChatGPT, Claude, Gemini web version)
|
||||
3. AI will guide you step by step to complete the configuration
|
||||
4. Ask AI directly if you encounter problems
|
||||
|
||||
---
|
||||
|
||||
## After completion
|
||||
|
||||
After all configurations are complete, read the [Main Document](../../../../README.md) to understand the Vibe Coding workflow.
|
||||
Reference in New Issue
Block a user