文章介绍了 AI 代码编辑器 Windsurf 及其功能，包括安装步骤、任务完成方式、模型选择、编写/聊天模式、生成 2048 小游戏、图片上传、直接访问工具和终端、实时协作、回退等，强调其功能强大，能快速生成应用，作者还计划下篇介绍代码提交和部署方式。

关联问题: Windsurf能生成游戏吗 Cascade回退有次数吗 Windsurf如何上传图片

前言

Cursor 作为 AI 编程的得力助手已经是家喻户晓，本文介绍它的竞品。新的 AI 代码编辑器——Windsurf ！它和 Cursor 一样可以：

  • 让 AI 帮你写代码
  • 可以上传 UI 稿，生成指定 UI 代码
  • 一键继承 VS Code 配置
  • 免费试用 2 周的 AI 付费模型（Claude 3.5 Sonnet、GPT 4o）

而且它有：

  • 无限的 Claude 3.5 Sonnet
  • 完整的上下文范围
  • continue 智能修改代码
  • 一个月💲10（ Cursor 是 💲20）

显然，这些功能已经远超 Cursor 了……

官方赠送的 2 周免费使用.png

欢迎加入技术交流群。

之前笔者在群里提到 Cursor 时，很多朋友也尝试起来，而且真的有朋友分享了自己全用 AI 做出的应用，真的很 nice。也有朋友遇到安装问题，索性以这篇文章带大家过一遍，并且使用它一键生成 Web 应用。

2048.gif

如何安装？

进入官网：docs.codeium.com/windsurf/ge…

1️⃣  在官网的 Set Up 部分根据自己的系统来选择合适的安装包（安装的过程略）：

Set Up.png

2️⃣  双击应用图标打开编辑器，看到如下界面：

编辑器 Get started.png

3️⃣  点击「Get Started」按钮，进入初始化页面，在这里就能一键从 VS Code 中引入配置：

  • Import from VS Code（从 VS Code 中引入，这是我们想要的！）
  • Import from Cursor（从 Cursor 中引入）
  • Start fresh（重新开始）

Choose setup flow.png

4️⃣  点击「Import from VS Code」后，是一系列的设置：

5️⃣  最后一步是注册并登录，一开始我们没有账号，这里点击「Sign up」注册帐号：

注册登录.png

点击后会自动使用 Chrome 帐号进行登录，然后显示已经注册成功：

登录成功.png

然后重定向回 Windsurf 编辑器（如果编辑器没有响应，那么关掉重开即可），可以看到整个编辑器和 VS Code 几乎是一模一样的：

Windsurf 编辑器布局.png

  • 左侧是 VS Code 的侧边栏，与 Cursor 相比更加符合 VS Code 的风格
  • 中间是代码编辑区域，有两个任务需要完成
  • 右侧的 Cascade 是和 Cursor 类似的 AI 助手，在这个面板中，我们可以与之对话并指挥它干活。

完成两个任务

在代码编辑区域，Windsurf 给出了两个任务：

初始任务.png

1️⃣  使用 Cascade 编码（command + L）

打开右侧 AI 面板其实就是第一个任务，先把右侧 AI 面板关闭再按下组合键「command + L」完成任务。

完成第一个任务.png

2️⃣  打开命令面板（shift + command + P）

完成第二个任务.png

和 VS Code 一样，在这个命令面板中可以输入相关命令执行，不同的第一行就是 Windsurf 提供的打开 Cascade AI 面板。这样第二个任务也完成了。

有什么功能？

打开 Cascade 面板：

Cascade 面板.png

模型选择

如图，默认情况下，Windsurf 使用「Claude 3.5 Sonnet」模型：

默认情况为「Claude 3.5 Sonnet」模型.png

也可以切换成别的，如 GPT 4o 或 Cascade Base：

可选的模型.png

编写/聊天模式

编写模式

代码辅助方式有两种，一种是编写模式，这也是默认方式：

默认编写模式.png

在这种方式下，Cascade 可以直接修改我们的代码，快捷键为「command + .」。

划重点：make changes across your entire codebase，这意味着它可以对整个代码库进行改动。

然而，这种模式的切换在 Cursor 中需要每次手动进行：

Cursor 中针对代码库的优化按钮.png

聊天模式

另一种为聊天模式，同样点击右下角按钮切换：

切换为聊天模式.png

这种模式将会围绕我们的代码库或一般编码原则的问题进行优化，比如：提出问题或寻求建议。

划重点：for your codebase，即使是聊天模式，也可以对整个代码库进行优化。而 Cursor 在聊天模式下只是针对一般的代码片段或是某些代码文件提出建议。

不写一行代码生成一个 2048

这里笔者尝试使用它的测试用例来生成一个 2048 小游戏。

切换到编写模式，然后点击：Try it out with a test workspace：

切换为编写模式.png

这里选择项目创建的位置，然后点击下面创建一个 2048 app，而且动画要丝滑：

选择项目，创建 2048.png

之后代码就会自动生成：创建 2048 目录 > 创建代码文件 > 写入代码，最后等待你的确认：

代码自动生成，等待确认.png

当然它除了写代码，在 Cascade 面板区域会给出本次生成代码的关键信息：

创建了若干文件.png

我们接受它的所有改动，点击右下角的「Accept all」：

接受所有改动.png

最后，在本地运行代码打开浏览器，笔者忍不住按照 README 提示试玩了一下：

2048.gif

图片上传

一旦我们拥有 UI 稿，只要一键上传图片给 Cascade，它就可以生成对应代码。比如我要生成一个 Vue3 app，并让它帮我生成一个登录页面。

通过点击「Add Images」将登录页面上传给 Cascade：

图片上传.png

直接访问工具和终端

因为需要使用终端，因此每一步会询问开发者是否要运行此命令：

在 Cascade 面板中运行命令.png

运行的输出内容也会出现在下方：

命令输出内容.png

由此可见，它可以直接访问工具和终端。

如此这般，随着整个项目文件的不断生成，需要我们手动审查代码，没问题后可以点击向右箭头进入到下一个改动的文件中：

接受当前修改以及进入下一个改动文件.png

最后，会要求我们启动项目，在 http://localhost:5173/ 可以看到效果：

运行项目.png

效果如图所示，有些瑕疵，但瑕不掩瑜：

登录页面.png

用户登录成功.png

实时协作 continue

Windsurf 和 Cascade 能够感知上下文的变化，比如对于上面的 Vue3 应用中的 LoginView.vue 文件，我想要将变量名 showPassword 改为 passwordVisible：

希望修改 showPassword 为 passwordVisible.png

修改 showPassword 为 passwordVisible.png

代码中使用了多次，在 Cascade 面板中输入 continue，AI 会帮助我们完成变量修改，这就免除了手动修改会出现的潜在 bug 问题。

使用 continue.png

回退到上一步

回退是编程中非常需要的一项功能，在鼠标悬浮在提示上就会出现回退按钮。

比方说我想撤回刚刚变量的修改，点击回退按钮：

悬浮提示出现回退按钮.png

它会出现提示（注意：这个操作是不可逆的！）：

回退操作确认.png

点击之后，刚刚 continue 的部分就消失了。代码编辑区域的感知也很灵敏，当我想把刚刚自己手动修改的 showPassword 改回去时，它直接出现了提示：

智能感知.png

重新运行项目，一切正常！

总结

掌握了 Windsurf 和 Cascade 这些功能，快速生成一个应用不在话下，如它的名字「帆板」一般，祝你写代码和冲浪一样一帆风顺！下一篇，笔者计划介绍如何将本地代码提交到远程，以及部署前端代码的几种常见方式（Github、Vercle、Netlify、Docker 等），欢迎各位跟进。