一、背景
“种一棵树的最好时间是十年前，其次是现在。从现在开始学习编程。”
在准备发布一个关于 cursor 的初学者 AI 开发教程时，Windsurf 的出现让我决定暂停这一计划。Windsurf 的初次体验超出了我的预期。当我抱着试试的心态用 Windsurf 重构原本的 Cursor 项目时，整个过程显得异常顺畅。它就像一位深谙我心意的搭档，不仅使环境配置变得轻松自如，其在代码理解和上下文感知方面的能力更是令人赞叹。此外，Windsurf 也提供免费的 GPT-4o 和 Claude 3.5 Sonnet 模型，并且有免费的使用期。
卓越的上下文理解能力
- 项目结构识别：Windsurf 能够自动识别项目中的重要信息，包括目录结构和文件依赖关系。
- 跨文件上下文追踪：它不仅限于当前文件，还能在整个项目中追踪上下文，理解跨文件依赖和模块调用。
强大的功能特性
- AI 智能代理：Windsurf 的 AI 代理能够在特定任务中自动完成一些重复操作，如调试和重构代码。
- Cascade 模式：提供编辑和聊天两种模式，编辑模式用于生成和修改代码，聊天模式则专注于提供开发建议和解答代码问题。
广泛的应用支持
- 多语言支持：支持超过 70 种编程语言和框架，适用于前端、后端和数据科学等领域。
- 跨平台兼容性：支持 Windows、Mac 和 Linux 平台，能够无缝集成在常用开发环境中。
我在 30 分钟内用 Windsurf 快速开发的 Windsurf 学习网站如下：
二、操作步骤
2.1 准备工作
安装 Windsurf IDE
- 前往 codeium.com 下载安装包。
- 安装 Windsurf IDE 并进入初始化设置。
- 注册/登录账号，进入开发主界面。
熟悉界面
Cascade（Ctrl+L）
右侧的 Cascade 类似于 cursor 的 composer。即使你没有使用过 cursor，也没关系。我来为你解释一下。Cascade 允许你在项目中直接编辑代码文件。与 cursor 不同的是，Cascade 将功能分为两类：纯 Chat 模式和 Write 模式。
- Chat 模式：作为一个细心的助手，协助你处理问题，但不会直接在项目中写入代码。
- Write 模式：像得力的助手，直接将生成的代码放入项目中。
自然语言修改代码（Ctrl+i）
2.2 启动开发
开发目标：以“Windsurf 学习共创社区”为例，完整演示如何借助 AI 能力快速构建现代化 Web 应用。
- 技术选型：Vue + TypeScript（常用的前端框架，具体内容可以先不用了解）。
- 目标用户：零基础开发学习者。
- 参考项目：Cursor101。
开发流程如下：
接下来，我将分享与 Cascade 交互的关键步骤，按照提示操作，便可达到类似最终效果：
- 输入需求，让 Windsurf 生成代码。
- Windsurf 会详细讲解开发思路，并提供环境命令，你只需不断点击接受。
- 无需打开终端配置环境，直接写好代码。
- 若出现报错，将报错信息反馈给 Cascade。
- 经过自动检查后，找到 bug 所在，访问
http://localhost:5173，成功运行。 - 若需进一步优化，需逐步进行，以便及时校正 AI。Windsurf 的编码速度可能不及 cursor，每一步都可能出现报错，继续反馈给 AI。
- 网页初具雏形，接下来只需优化具体细节。
优化导航栏的细节以及首页（生成失败时，Windsurf 也会自我反思调整）
- 插入细节图片。
- 不断调整细节。
三、总结
功能演示
四、总结
一些小提示：
- 设计参考：让 AI 分析优秀页面设计并转化为实现方案。
- 渐进式开发：采用小步快跑策略，便于及时纠错。
- 精准控制：通过 @ 文件名 实现精确代码修改。
🏆
优势所在
- 超强的上下文追踪能力。
- 自动识别项目的重要文件。
- 强有力的对抗性思考助力程序开发，开发者更省心。
有待提升
- Cascade 的交互只能用文字，缺少一定的直观性，未来若能增加图片功能将更佳。
后续将有更多关于 AI 编程的理论篇和实战篇，敬请期待……
嗨，我是 Yeadon！作为一名人工智能专业的大三学生，正在努力成为 AI 时代的超级个体~
