Windsurf Tutorial for Beginners (AI Code Editor)

Windsurf 初学者教程（AI 代码编辑器）

2024•YouTube

摘要

Windsurf 是2024年底发布的"代理式 AI 代码编辑器"（agentic AI code editor），前身为 Codeium。这个长达19分钟的 YouTube 教程全面介绍了 Windsurf 的所有功能和实用技巧。

原文链接

Windsurf Tutorial for Beginners (AI Code Editor)

返回： 优质文章篇 > 开发者社区

反馈与建议：发现内容有误或想补充？欢迎在下方评论区留言，或到 GitHub 提 Issue

点我给个 Star 吧：

1.1 编程已死，编程永生：从 Coder 到 Commander

1.2 破除迷信：不懂英文、数学不好也能写代码吗？

1.3 工具初探：AI 编程工具选型指南

1.4 Vibe vs Spec：AI 编程的两种方式

1.5 Hello World：你的第一个 3 分钟 AI 网页

2.1 思维升级：从"我想做一个App"到"我要解决一个问题"

2.2 逆向思维：先想清楚什么会让项目失败

2.3 减法思维：MVP不是「最小功能」，而是「最小可验证价值」

2.4 故事思维：把用户当作故事的主角

2.5 灵魂三问：开发前必须回答的问题

2.6 场景应用：这些思维工具不只是用来「做产品」的

2.7 问题发现：如何找到值得解决的问题

2.8 本章总结：产品经理的思维工具箱

附录：心法篇补充材料

3.1 提示词工程基础：Context is King

3.2 结构化提示词框架

3.3 进阶提示技巧

3.4 编写你的第一份 PRD

3.5 迭代对话的艺术

3.6 当 AI 不听话时

3.7 本章总结与实战演练

附录：常用 Prompt 模板库

4.1 开始之前：整合你的准备工作

4.2 第一轮：搭建页面框架

4.3 第二轮：实现核心功能

4.4 第三轮：让数据活起来

4.5 Debug 实战：当 AI 代码报错时

4.6 收尾与回顾

5.1 后悔药：代码改崩了怎么办

5.2 见世面：把网页发到互联网上

5.3 护城河：AI 时代的安全意识

5.4 再进化：项目的持续迭代与优化

5.5 知边界：Vibe Coding 的能与不能

5.6 启程前：本章总结与进阶预告

0.0 进阶版要学什么——课程概念定义

0.1 计算机基础知识

0.2 命令行：与计算机的直接对话

0.3 前端基础：构建用户眼中的世界

0.3.5 你的电脑如何上网——网络基础：HTTP/HTTPS/域名/端口/API 概念

0.4 搭建你的编程工作室——开发环境配置：Node.js、包管理器与工具链

0.5 从随心所欲到规行矩步——JS → TS 思维转换

0.6 别让你的网站裸奔——开发安全底线

0.7 把程序装进集装箱——Docker 核心概念

1.1 先让 Hello World 跑起来——工具装配与最小项目验证：Node/VSCode/Cursor/Claude；跑通 Next.js

1.2 你不是一个人在战斗——Vibe Coding 心法：从"写代码"到"指挥 AI 写代码"

1.5 全副武装你的开发环境——工具链与环境：IDE/Git/Node.js/数据库/部署平台

2.1 为什么我们选这套装备——Next.js + TS + Prisma + OSS 架构全景

2.2 你的网页何时被创建——Next.js 渲染策略全景

2.3 用对新特性才不香——Next.js 核心概念深入：App Router/RSC/Server Actions 实战

2.4 前后端如何高效协作——接口契约/API Route；请求/响应、幂等、流式返回

2.5 代码为什么会越写越乱——架构分层详解：页面/路由、API/HTTP、服务层/业务、数据层/Prisma+SQL

2.6 全家桶服务好不好用——拓展：Supabase适用与取舍

3.1 你的文件目录就是网站地图——App Router：文件路由与数据获取

3.2 像搭乐高一样构建页面——前端构建块：组件/状态/路由/数据获取/错误与空态

3.4 告别选择困难症——Tailwind + shadcn/ui：统一设计体系与组件库

3.5 别靠猜来找 Bug——Debug 实战：断点/Network/日志/错误边界

3.6 别把厨房建在客厅——API Route 与服务层分离：输入/输出、幂等、鉴权、错误与重试

3.7 崩了和没数据时怎么办——可用性：错误/空态/加载骨架；Error Boundary

3.8 别让少数人用不了你的产品——可访问性/UX 原则/设计令牌/颜色与对比度/i18n

4.1 数据关系要先理清——数据建模与 ER 图：实体/关系/约束；面向变更与演进

4.2 数据库到底在忙什么——关系型数据库：CRUD/索引/事务

4.3 如何命令数据库干活——SQL 基础操作：表/行/列、主键/外键、索引、事务、JOIN、CRUD

4.4 告别手写 SQL——Prisma 实战应用

4.5 线上数据库动手术——数据库迁移策略：生产环境的变更管理

4.6 如何批量制造假数据——种子数据高级应用：多环境数据管理

4.7 数据打架了怎么办——数据同步：幂等/冲突处理

4.8 拓展：Supabase 为何如此强大——存储与认证联动

5.1 先把想做的说明白——AI 时代产品开发理念：从传统开发到 AI 协助全流程

5.2 为什么说先写文档再编码——PRD 基础

5.3 不会提需求怎么办——让 AI 帮你问对问题

5.4 你写的文档 AI 看得懂吗——AI 可读的 PRD 文档生成：结构化与机器友好

5.5 先讲故事再列清单——用户故事、问题陈述、范围与优先级矩阵

5.6 方案是用来减风险的——技术方案要点：接口/数据表/边界/风险；单人自评

5.7 别让文档烂尾——文档即代码：目录与 PR 同步更新

6.1 别再从零开始写登录注册——NextAuth 快速上手：Google/GitHub 登录实战

6.2 你是谁与你能做什么——认证与授权安全实践

6.3 守好程序的大门——API 安全防护实践

6.4 认识常见的网络小偷——常见 Web 安全威胁与防护

6.5 接入微信/QQ 登录——第三方登录集成深度：微信/QQ/钉钉/企业微信

7.1 接口是合同不是暗语——HTTP 与 API：方法、JSON、分页与过滤、幂等与重试

Windsurf Tutorial for Beginners (AI Code Editor)

摘要

原文链接