Vibe Coding 的必备工程能力

我是空格，一个有6年经验的产品经理，早些年学过一些前端代码和设计理论，但很久没有使用代码，如果不是AI，我怎么也想不到自己能仅靠个人发布产品。

cursor 的出现完全弥补了我薄弱的代码能力，让我的产品和设计思维得以释放，工作上绘制各种原型图，私下我产出了两个产品。

undefined

在我看来，要使用Cursor快速开发产品，需要掌握以下几项基础技能：

工程能力：善于使用各种服务，将工程文件部署到云端，发布为网站或小程序等
代码能力：理解工程文件的整体运行逻辑，掌握基本的调试和问题定位能力
产品思维：善于分析用户需求，能将复杂功能拆解为可实现的小模块，并规划合理的迭代路径
设计思维：了解设计理论，用户界面设计原则，能够构建清晰直观的交互流程

vibe Coding 最大的误区：

很多在教授 Vibe Coding 的课程多围绕传统软件开发的技术栈------前端、后端、数据库，通过实践教学制作网站、APP和小程序。

他们试图传达这样一个观点：有了 AI，人人都可以成为全栈开发者。

但现阶段 Vibe Coding 仍处于发展初期，它对软件开发的影响尚未清晰。

对一个不懂编程的小白用户，仅依靠与 AI 对话，是无法完成一个包含前端、数据库和后端服务的复杂产品的。

下面是cursor对不同项目和团队的适用性分析：

一个复杂的产品涉及到的技术栈包括前端框架（React/Vue/Angular）、后端服务（Node.js/Java/Python）、数据库（MySQL/MongoDB）、DevOps工具链（Git/Docker/CI/CD）、云服务（AWS/Azure）等，需要常年累月的开发经验，掌握系统设计、性能优化、安全防护、代码重构、测试自动化等各种技能。没有扎实的功底，仅靠AI很难驾驭复杂项目的开发和维护。

面向初学者的 AI 编程课程应该明确指出：目前 AI 的能力仅限于帮助开发静态网页，工具型的小程序或APP，比如博客网站、计算器、笔记、待办清单等。

不过仅这些，也足够发挥个人的创造能力了。和创造能力最相关的技能的是设计和产品思维，而非代码能力，这也是很多课程忽略的重点。

所以，我想分几篇文章或视频来介绍下 Vibe coding 的入门，从一个产品经理的角度切入，如何让个人掌握 vibe coding 必备的产品、设计和开发的基础能力。

本篇介绍下工程能力------Coding 必备的周边技能.

1. 终端命令行

简介

终端命令行是与操作系统交互的文本界面，通过输入命令来执行各种操作，如文件管理、程序安装和系统配置等。不同操作系统有不同的命令行界面：Windows有PowerShell和CMD，Mac和Linux有Terminal（使用Bash、Zsh等shell）。

作用

通过命令行，可以快速执行批量操作和自动化任务，这比使用图形界面要高效得多。它还允许你通过SSH远程连接和管理服务器，这在开发和部署过程中非常重要。

许多现代开发工具，如Git、npm和Docker，都主要依赖命令行操作。

更重要的是，你可以编写脚本来自动化重复性任务，大大提高工作效率。

入门程度

掌握基本的导航命令（cd, ls, pwd）
文件操作命令（cp, mv, rm, mkdir）
查看文件内容（cat, less, head, tail）
了解环境变量和基本配置

深入学习

命令行的艺术[1] - GitHub上的中文教程
Linux命令大全[2] - 常用Linux命令参考
Codecademy的命令行课程[3]

2. Github的使用

简介

GitHub是基于Git的代码托管平台，为开发者提供代码存储、版本控制和团队协作等功能。它不仅是一个代码仓库，也是一个社交平台，允许开发者分享、讨论和贡献开源项目。

作用

GitHub作为全球最大的代码托管平台，为开发者提供了一个完整的协作环境。它不仅能安全地存储和管理代码，还支持多人协作开发，让团队成员能够轻松地管理分支和处理合并请求。通过内置的Issues系统，开发者可以有效地跟踪任务、bug和功能请求。作为一个开源社区，GitHub让开发者能够贡献和分享项目，促进技术交流。此外，它还提供了GitHub Actions用于自动化构建和部署，以及GitHub Pages功能用于发布项目文档和静态网站。

入门

创建和管理仓库
创建分支和Pull Request
使用Issues跟踪任务
处理基本的合并冲突
理解Fork和上游仓库的概念
使用GitHub Pages发布简单网站

深入学习

GitHub官方文档[4] - 提供中文版
B站有许多优质的中文教程视频

3. Git版本控制

简介

Git是一个分布式版本控制系统，它跟踪文件的变更历史，使多人可以同时处理同一项目的不同部分，然后将各自的修改合并。Git记录项目的完整历史，允许你在任何时候恢复到之前的版本。

入门

熟练掌握核心Git命令（clone, add, commit, push, pull, branch, merge, status, log）
理解常见的Git工作流，如Gitflow或GitHub Flow
能够处理简单的合并冲突
理解Pull Request/Merge Request的概念
能在GitHub/GitLab等平台上进行协作

深入学习

官方Git文档[5] - 有中文版
廖雪峰的Git教程[6] - 中文入门教程

4. 网络基础 (HTTP, APIs)

简介

网络基础知识是前后端开发者都必须掌握的技能。HTTP（超文本传输协议）是Web的基础，定义了客户端和服务器之间如何通信。API（应用程序接口）则定义了不同软件组件之间如何交互。

作用

在实际应用中，这些知识使得前端能够从后端获取数据并渲染页面，处理用户提交的表单数据，实现微服务之间的通信，以及集成第三方服务如支付系统和社交媒体登录。

入门

理解客户端-服务器模型和HTTP请求/响应的基本流程
熟悉常见的HTTP方法（GET, POST, PUT, DELETE）和状态码（200, 201, 400, 401, 403, 404, 500）
能够使用工具（如Postman）或代码（如fetch API）调用REST API
理解基本的API认证/授权机制（如API Key, Bearer Token）

深入学习

MDN Web Docs的HTTP指南[7]
RESTful API设计指南[8]
Postman学习中心[9]

5. 前端框架

前端框架是构建现代Web应用的基础，它们提供了组织代码、管理状态和优化性能的标准方法。从入门角度，推荐先掌握一个主流框架。

主流框架介绍

React

特点：组件化、虚拟DOM、单向数据流
生态：React Router（路由）、Redux/Context API（状态管理）、Material UI/Ant Design（UI库）
学习资源 ：React官方文档[10] （中文）

Vue

特点：易学易用、双向绑定、模板语法
生态：Vue Router、Vuex/Pinia、Element UI/Vuetify
学习资源 ：Vue.js官方文档[11] （中文）

Next.js (基于React的框架)

特点：服务器端渲染(SSR)、静态站点生成(SSG)、文件系统路由
适用场景：SEO友好的网站、大型Web应用
学习资源 ：Next.js官方文档[12]

Tailwind CSS

特点：无需编写自定义CSS、高度可定制、快速开发
学习资源 ：Tailwind CSS官方文档[13]

入门

理解所选框架的核心概念和工作原理
认识不同文件能力，能够创建和组合组件
掌握基本的状态管理和生命周期
使用常见的UI组件库

6. 后端框架

后端框架帮助开发者构建服务器端应用程序，处理HTTP请求、连接数据库、实现业务逻辑等。选择一个适合的后端框架可以大大提高开发效率。

主流框架介绍

Node.js生态

Express.js：轻量级、灵活、学习曲线低
NestJS：TypeScript优先、模块化、企业级
学习资源 ：Express官方文档[14] （中文）

Python生态

Django：全功能框架、内置管理后台
Flask：微框架、灵活轻量
学习资源 ：Django官方教程[15] （中文）

Java/Kotlin生态

Spring Boot：企业级应用、微服务架构
学习资源 ：Spring Boot中文索引[16]

Go生态

Gin：高性能、轻量级
学习资源 ：Go语言圣经[17] （中文版）

入门：

熟悉框架的基本结构和工作流程
能够处理HTTP请求和响应
实现基本的CRUD操作
连接和查询数据库

7. 云服务

互联网基础设施市场由几家主要云服务提供商主导。国内市场中，阿里云和腾讯云占据了主导地位，提供全面的云计算解决方案。

国际市场上，亚马逊AWS作为全球最大的云服务提供商，提供了最为全面的云计算服务。Microsoft Azure和Google Cloud Platform也是重要参与者。

域名服务

域名是网站的门牌号，也是品牌在互联网上的标识。阿里云和腾讯云提供了便捷的域名注册服务，价格一般在几十至几百元人民币/年不等，取决于域名后缀(.com、.cn、.net等)和名称稀缺性。

域名注册通常采用年付费模式，许多提供商会提供首年优惠。域名续费往往比首次注册更贵，所以建议选择多年期注册以锁定价格。域名注册后，还需在提供商的控制面板中进行DNS设置，将域名指向实际托管网站的服务器IP地址或其他服务。

服务器资源

云服务器（如阿里云ECS、腾讯云CVM或AWS EC2）是运行网站和应用程序的基础设施。这些服务按配置和使用量计费，主要考量因素包括CPU核心数、内存大小、存储空间、网络带宽和操作系统类型。

计费模式通常分为两种：按量付费（按小时或秒计费，适合流量波动大或短期项目）和包年包月（预付费，适合长期稳定运行的项目，通常有较大折扣）。

入门级配置（1核2G内存）月费大约在几十到一百多元人民币，企业级配置则可能达到数千元甚至更高。

应用部署

Vercel、Netlify和Heroku提供了简单的部署方案。

Vercel特别适合Next.js等React框架开发的项目，支持与GitHub仓库直接集成，实现代码推送后自动部署。
Netlify则专注于静态网站和JAMstack应用的托管，提供了包括表单处理和身份验证等额外功能。

使用这些平台极为简便：注册账号，连接代码仓库，配置构建命令，几分钟内即可完成部署。它们还提供了域名绑定、HTTPS加密、CDN分发等附加功能，大大简化了网站上线流程。

数据库服务选

现代应用几乎都需要数据库支持。云服务提供商提供了多种数据库服务，从传统的关系型数据库（MySQL、PostgreSQL）到NoSQL数据库（MongoDB、Redis）。

阿里云的RDS和腾讯云的TencentDB提供了全托管的数据库服务，用户无需关心底层维护，只需关注业务数据。AWS的DynamoDB和Azure Cosmos DB则提供了全球分布式数据库能力，适合跨区域部署的应用。

数据库服务通常按存储容量、读写性能和高可用性要求定价。基本配置每月从几十到几百元不等，企业级配置可能达到数千元。对于小项目，MongoDB Atlas和Firebase等平台提供免费层级。

一个典型的项目部署流程通常包括：

首先在阿里云或Namecheap等平台注册域名；
然后根据项目规模选择合适的部署方案------小型项目可选择Vercel
大型项目需要阿里云ECS或AWS EC2的服务器；
如需数据库，可选择阿里云RDS或MongoDB Atlas
最后设置域名解析，将域名指向已部署的应用

学习资料

1

命令行的艺术: github.com/jlevy/the-a...

2

Linux命令大全: www.linuxcool.com/

3

Codecademy的命令行课程: www.codecademy.com/learn/learn...

4

GitHub官方文档: docs.github.com/cn

5

官方Git文档: git-scm.com/book/zh/v2

6

廖雪峰的Git教程: www.liaoxuefeng.com/wiki/896043...

7

MDN Web Docs的HTTP指南: developer.mozilla.org/zh-CN/docs/...

8

RESTful API设计指南: restfulapi.net/

9

Postman学习中心: learning.postman.com/

10

React官方文档: zh-hans.react.dev/

11

Vue.js官方文档: cn.vuejs.org/

12

Next.js官方文档: nextjs.org/docs

13

Tailwind CSS官方文档: tailwindcss.com/docs

14

Express官方文档: expressjs.com/zh-cn/

15

Django官方教程: docs.djangoproject.com/zh-hans/

16

Spring Boot中文索引: springboot.io/

17

Go语言圣经: github.com/golang-chin...