一键生成2048小游戏，Windsurf让开发轻松起来！

前言

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

让AI帮你写代码

可以上传UI稿，生成指定UI代码

一键继承VSCode配置

免费试用2周的AI付费模型（Claude3.5Sonnet、GPT4o）

而且它有：

无限的Claude3.5Sonnet

完整的上下文范围

continue智能修改代码

一个月💰10（Cursor是💰20）

欢迎加入技术交流群！之前我提到过Cursor，很多朋友也尝试起来。其实真的有朋友分享了自己全用AI做出的应用，真是太nice了。还有一些人遇到了安装的问题，因此我写了一篇文章，为大家讲解如何解决这些问题，并演示如何一键生成Web应用。

要安装，请访问官方网站：

- 登录网址为 docs.codeium.com/windsurf/ge…

2️⃣ 找到Set Up部分，根据不同操作系统选择对应版本的安装包。

3️⃣ 进行安装过程时，根据屏幕提示逐步操作。

4️⃣ 安装完成后，请按照官网指引完成后续配置步骤。

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

3️⃣ 点击“Get Started”按钮，将进入初始化页面。在这里，您可以一键从 VS Code 中导入配置：

- Import from VS Code（从 VS Code 中导入）

- Import from Cursor（从 Cursor 中导入）

- Start fresh（重新开始）

在点击"从VS Code导入"之后，会展示一系列的设置选项。这里可以选择迁移的范围，包括导入设置和插件。

选择编辑器主题：

最后一步是注册并登录，一开始我们没有账号。在这里，点击"Sign up"进行注册账户。

点击后，系统将自动使用 Chrome 登录账户，并确认已成功注册。

然后将重定向到 Windsurf 编辑器（如果该编辑器不响应，请关闭后重新打开）。可以看到整个编辑器与 Visual Studio Code 有着几乎相同的界面。

左侧是 VS Code 的侧边栏，更加符合该工具风格。

中间是代码编辑区域，需要完成两个任务。

右侧的 Cascade 是 AI 助手之一，在此面板中，可以和它对话并指挥它工作。

在使用 Cascade 编码时，首先请确保左侧的 AI 界面已经关闭。然后，只需按住「command」键并同时点击键盘上的字母「L」即可完成任务。

在桌面右侧的工具栏中，点击“命令面板”图标。

与 VS Code 类似，可以在命令面板内输入相应指令来运行操作。在这一行中，WindSurf 所提供的是开启 CascadAI 面板的第一步。第二个任务已经完成。

那么，Cascade AI 面板具有哪些功能呢？

要打开 Cascade 面板，请按照以下步骤进行：

1. **进入命令面板**：首先确保你已进入命令面板模式。在 VS Code 中，这通常意味着你在某个扩展或功能选项卡上。

2. **搜索指令**：使用键盘上的 `Ctrl + Shift + P`（Windows/Linux）或 `Cmd + Shift + P`（Mac）组合键来打开命令面板。

3. **输入指令**：在命令面板中，输入 `Cascade AI: Open Panel` 或相似的快捷指令。这将启动 Cascade 面板的界面。

4. **探索功能**：一旦面板开启，你就可以使用它提供的各种工具和选项来进行特定的工作任务或分析。例如，你可以选择不同的模块、查看数据摘要或是进行项目管理等操作。

通过这种方式，Cascade AI 提供了一个强大的接口来支持你的开发和工作流程，帮助你更高效地处理复杂的项目需求和技术问题。

模型选择

在默认设置下，使用了「Claude 3.5 Sonnet」模型。

当然可以切换其他模型，比如GPT-4或Cascade Base。

在编写模式下，你可以直接输入代码，系统会自动识别并处理。另外，我们还有另一种模式叫做聊天模式，在这种模式下，你只需要告诉我你需要实现的功能或者想要解决的问题，我会尽力帮助你。

例如，如果你需要完成一个特定的编程任务或解答一个技术问题，请详细描述你的需求，并提供相关的代码和背景信息。我会根据这些信息给出最合适的解决方案。

在这个框架中，Cascade可以直接修改我们的代码，并使用快捷键「command + .」来实现。这样做可以显著加快开发流程。

然而，在 Cursor 中，用户需要手动切换到 Cascade 模式，才能开始改动整个代码库。这可能在一定程度上影响用户体验，因为用户必须来回切换工作区以执行不同的操作。

聊天模式

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

这种优化模式主要针对我们的代码库或编码原则进行改进。例如，它可以提出问题并寻求建议。

对于整个代码库来说，即使是聊天模式，也可以对整个代码库进行优化。而在聊天模式下，Cursor仅仅针对一般的代码片段或是某些文件提供改进建议。

不写一行代码就能生成一个2048小游戏。这里我尝试用测试用例来实现这个功能，切换到编写模式后点击“Try it out with a test workspace”。

在选定项目位置后，请点击下方的“创建一个 2048 App”，并确保动画效果流畅无阻。

之后会自动生成代码。首先需要创建一个名为“2048”的目录，接着在该目录中创建一个代码文件，并将所需的代码内容写入其中。完成后，请确认这些操作是否正确完成。

当然，它不仅编写代码，还在Cascade面板区域提供关键信息以帮助你理解当前的生成过程。

我们同意所有的修改，请点击右下方的“接受全部”按钮。

在本地执行代码并打开浏览器后，我忍不住按照行 README 文件中的指示进行了尝试。

上传图片

当收到UI稿后，只需一键上传图片到Cascade，就能自动生成对应的代码。例如，我们想创建一个Vue 3应用并为其添加一个登录页面。

点击“添加图片”按钮，将登录页面上传到Cascade中：

为了方便直接访问工具和终端，

在进行操作时，通常会要求用户提供同意执行某些命令的确认。

步骤如下：首先询问是否同意运行相关命令。

如果同意，接下来执行相应的命令。反之，则不执行该命令。

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

这表明它可以无缝连接工具和终端。当项目的各个部分逐步生成时，我们需要定期检查代码，确认无误后才可点击右箭头继续到下一个修改的文件上：

首先，我们需要启动我们的项目。访问以下链接：http://localhost:5173/，你将会看到项目的运行结果。

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

实时协作进行中。

Windsurf 和 Cascade 可以检测上下文变化，例如在 Vue3 应用中对 `LoginView.vue` 文件进行修改时，想要将变量名 `showPassword` 更改为 `passwordVisible`。

在代码中频繁使用了一些函数。如果你在Cascade面板中键入 "continue"，人工智能将能够自动处理变量修改。这有效地避免了因手动更改而可能引发的bug。

回到之前的状态

在编程过程中，回退是一项不可或缺的功能。当鼠标悬停在提示区域时，会弹出一个回退按钮。例如，当我想要撤销对变量的最近一次更改时，只需点击这个回退按钮即可：

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

点击后，原本继续的部分不见了。代码编辑器反馈得很及时，当我想恢复之前手动更改过的 `showPassword` 时，它立刻提醒了我。

重新运行项目后一切正常。

掌握了Windsurf 和 Cascade 这些功能后，快速生成应用不再是问题了。就像它的名字「帆板」一样，祝你在写代码和冲浪时一帆风顺！下一篇，我将介绍如何将本地代码提交到远程，以及部署前端代码的几种常见方式（如Github、Vercel、Netlify和Docker等），欢迎大家关注我的后续内容。