Yeadon：30分钟！从0到1AI开发网站 - Windsurf零基础开发

Yeadon：30分钟！从0到1AI开发网站 Windsurf零基础开发 Yeadon：30分钟！从0到1AI开发网站 Windsurf零基础开发 Modified August 18, 2025 • 优化导航栏的细节以及首页（PS：生成失败他还会自我反思调整，太强了 ） • 插入细节图片 • 不断调整细节ing （PS想要更精准的控制要改的范围记得在cascade里@原来的文件） 三、总结 功能演示 No access 11月20日 00:00 四、总结 一点小tips： 设计参考：可让AI分析优秀页面设计并转化为实现方案 渐进式开发：采用小步快跑策略,便于及时纠错 精准控制：通过@文件名实现精确代码修改 🏆 优势所在 🙉 有待提升 • 超强的上下文追踪能力 • 自动识别项目重要文件 • 强有力的对抗性思考助力程序开发，开发者更省心 • Cascade的交互无法用图片，只能文字，这个比cursor的composer缺少一点感觉，以后如果能加上就更好了 • 优化导航栏的细节以及首页（PS：生成失败他还会自我反思调整，太强了 ） • 插入细节图片 • 不断调整细节ing （PS想要更精准的控制要改的范围记得在cascade里@原来的文件） 三、总结 功能演示 No access 11月20日 00:00 No access 11月20日 00:00 四、总结 一点小tips： 设计参考：可让AI分析优秀页面设计并转化为实现方案 渐进式开发：采用小步快跑策略,便于及时纠错 精准控制：通过@文件名实现精确代码修改 一点小tips： 设计参考：可让AI分析优秀页面设计并转化为实现方案 渐进式开发：采用小步快跑策略,便于及时纠错 精准控制：通过@文件名实现精确代码修改 🏆 优势所在 🙉 有待提升 🏆 优势所在 🏆 优势所在 优势所在 🙉 有待提升 🙉 有待提升 有待提升 • 超强的上下文追踪能力 • 自动识别项目重要文件 • 强有力的对抗性思考助力程序开发，开发者更省心 • Cascade的交互无法用图片，只能文字，这个比cursor的composer缺少一点感觉，以后如果能加上就更好了 • 超强的上下文追踪能力 • 自动识别项目重要文件 • 强有力的对抗性思考助力程序开发，开发者更省心 • 超强的上下文追踪能力 • 自动识别项目重要文件 • 强有力的对抗性思考助力程序开发，开发者更省心 • Cascade的交互无法用图片，只能文字，这个比cursor的composer缺少一点感觉，以后如果能加上就更好了 • Cascade的交互无法用图片，只能文字，这个比cursor的composer缺少一点感觉，以后如果能加上就更好了 一、背景 "种一棵树的最好时间是十年前,其次是现在。从现在开始AI学编程" 本来已经写了一个cursor的小白AI开发教程准备发布，Windsurf的横空出世让我忍不住按下了暂停键。 Windsurf初次体验,它带给我的惊喜远超预期，当我抱着试试看的心态用Windsurf重构原本的Cursor项目时,整个过程出乎意料的顺滑。不夸张地说,它就像一位深谙你心意的搭档,不仅让环境配置变得轻松自如,在代码理解和上下文感知上更是展现出令人惊叹的能力，同样他与cursor一样存在提供了免费的 GPT 4o 和 Claude 3.5 Sonnet 模型，并且有免费的使用期 卓越的上下文理解能力 ◦ 项目结构识别：Windsurf 能够自动识别项目的所有重要信息，包括目录结构、文件依赖关系等。 ◦ 跨文件上下文追踪：它不仅局限于当前文件，还能在整个项目中追踪上下文，理解跨文件依赖和模块间调用。 强大的功能特性 ◦ AI智能代理：Windsurf 的 AI 代理可以在特定任务中“自己动手”，如调试、重构代码等，自动完成一些重复性操作。 ◦ Cascade 模式：提供编辑和聊天两种模式，编辑模式可以生成和修改代码，聊天模式专注于提供开发建议、解答代码问题。 广泛的应用支持 ◦ 多语言支持：支持超过 70 种编程语言和框架，适用于前端、后端和数据科学等方向。 ◦ 跨平台兼容性：支持 Windows、Mac 和 Linux 平台，能够无缝集成在常用的开发环境中。 "种一棵树的最好时间是十年前,其次是现在。从现在开始AI学编程" 本来已经写了一个cursor的小白AI开发教程准备发布，Windsurf的横空出世让我忍不住按下了暂停键。 Windsurf初次体验,它带给我的惊喜远超预期，当我抱着试试看的心态用Windsurf重构原本的Cursor项目时,整个过程出乎意料的顺滑。不夸张地说,它就像一位深谙你心意的搭档,不仅让环境配置变得轻松自如,在代码理解和上下文感知上更是展现出令人惊叹的能力，同样他与cursor一样存在提供了免费的 GPT 4o 和 Claude 3.5 Sonnet 模型，并且有免费的使用期 卓越的上下文理解能力 ◦ 项目结构识别：Windsurf 能够自动识别项目的所有重要信息，包括目录结构、文件依赖关系等。 ◦ 跨文件上下文追踪：它不仅局限于当前文件，还能在整个项目中追踪上下文，理解跨文件依赖和模块间调用。 强大的功能特性 ◦ AI智能代理：Windsurf 的 AI 代理可以在特定任务中“自己动手”，如调试、重构代码等，自动完成一些重复性操作。 ◦ Cascade 模式：提供编辑和聊天两种模式，编辑模式可以生成和修改代码，聊天模式专注于提供开发建议、解答代码问题。 广泛的应用支持 ◦ 多语言支持：支持超过 70 种编程语言和框架，适用于前端、后端和数据科学等方向。 ◦ 跨平台兼容性：支持 Windows、Mac 和 Linux 平台，能够无缝集成在常用的开发环境中。 我30分钟用windsurf快速开发的windsurf学习网站 二、操作步骤 2.1 准备工作 安装Windsurf IDE • 官网codeium.com下载安装包（https://codeium.com/） codeium.com • 安装Windsurf IDE并进入初始化设置 • 账号注册/登录 • 进入开发主界面 熟悉界面 cascade（Ctrl+L） 右侧的Cascade像cursor的composer，如果你没用过cursor也没关系，我来给你解释一下， 这个是可以直接在项目里面编辑代码文件的功能， 与cursor比较不同的是，Cascade贴心的将功能分成了两类，一个是纯Chat模式，一个是Write模式 Chat模式 不会帮你往项目里写入代码，而是会做一个细心的助理，协助你处理问题 Write模式 像是得力的助手，直接将生成的代码放入项目中 自然语言修改代码（Ctrl+i） 2.2 启动开发 开发目标：以"Windsurf学习共创社区"为例,我们将完整演示如何借助AI能力快速构建现代化Web应用 技术选型：Vue + TypeScript（具体先不用直到啥意思） 目标用户：零基础开发学习者 参考项目：Cursor101 开发流程： 1. 需求分析与代码生成 2. 环境配置自动化 3. 问题诊断与修复 4. 界面优化与细节打磨 5. 功能迭代与完善 下面我贴上的与cascade交互的截图都是比较关键的步骤，跟着我的提示照做，就能达到类似最终的效果 • 输入需求，让windsurf进行code • windsurf会事无巨细的将开发的思路讲解出来，并且贴心的给你把环境命令打出来，你只需要不断accept点点鼠标就行 • 无需打开终端配置环境，我们就直接把代码写好了 • 但是很有可能，会出现报错，但是没关系，我们把报错信息返回给cascade • 经过自动检查后，给出bug所在，访问给的http://localhost:5173，成功run起来了 • 但是这远远不够，我们可以进一步让windsurf进行优化，但是要注意一步一步来，这样的好处可以验证每一步的成果，以便及时更正AI，这部可能要等一会儿，有点慢，windsurf的编码速度测试下来不如cursor，在每一步都有可能报错，继续返回给AI • 我们的网页已经初具雏形，接下来只需要优化具体细节