前端开发中的AI应用与实践

大家好，我是产研团队的前端开发付云峰，今天我想跟大家分享的话题是：前端开发中的AI应用与实践。

我们离AI有多近？

AI已经悄悄进入我们的日常开发，从VS Code Copilot的智能代码补全，到ChatGPT的各类问题解答，AI 工具已经成为我们每天都在使用的得力助手。

这些AI工具各有其独特的设计理念和应用场景。有的专注于对话和问题解答，有些已经深度集成到我们的代码编辑器中…

针对不同的需求场景，我们应该要如何选择最合适的工具？

常用AI工具

随着AI不断发展，逐渐有日益完善的智能工具生态。，这些是我常用的AI工具，从功能特性来看，主要可以划分为两大类：通用对话型和IDE增强型。这两种类型的工具各有侧重，首先是通用对话型AI，

通用对话型AI

这类AI工具一般都是在浏览器网页或者app中使用：

它们不仅能回答各种类型问题，能理解分析需求，编写代码，能帮我们查漏补缺，同时还能发散创新。它们像是一个很强大的知识库，能解答我们的任何问题，同时又富有创造力。

用的比较多的像是Chatgpt, Deepseek, Manus等 [网页Manus 切换演示]

Chatgpt, Deepseek大家应该用的都比较多，Manus原来最早上线测试的时候还需要内部邀请码才能用，大概用下来感觉它像文档总结，内容生成输出方面也很强。

  • ChatGPT：它不仅能回答技术疑问，编写代码，也能帮助我们梳理复杂逻辑需求、生成创意文案，或者在设计思考阶段提供多角度的启发。它是一个强大的知识库，同时又富有创造力，能解决各种问题。
  • DeepSeek：专注于深度思考和解决复杂场景问题。在面对算法优化、系统架构设计等高难度任务时，DeepSeek能提供更深层次的分析和解决方案，帮助我们洞察问题的本质。
  • Manus：作为一个多智能体协作平台，Manus超越了单一AI工具的范畴。它能够进行任务总结、智能输出，并自主编排和执行多项复杂任务。

IDE增强型AI

然后是第二种IDE增强型AI，这类AI工具与我们的开发环境集成，主要在编辑器，开发工具中使用：[桌面编辑器 查看]

一种是以插件形式集成到我们编辑器中，比如vscode中的copilot，通义灵码等…

另外一种是像Cursor、Trae、Windsurf，需要专门安装它们的客户端编辑器

然后是CodeBuddy，它也有自己的客户端，并且微信在它的微信开发者工具中也集成了CodeBuddy，后面会简单看一下

  • VS Code Copilot：作为代码补全领域的先驱，它不仅提供智能预测，还能在编写过程中实时发现潜在错误并建议修正。
  • Cursor · Trae · Windsurf：被誉为”AI First IDE”的代表，致力于将AI深度融入IDE的每一个环节。
  • CodeBuddy：专为微信小程序开发者量身打造，通过AI实现智能代码生成和对话式开发。

VS Code Copilot：代码补全与智能对话

首先是最常用的copilot，它具备以下核心功能：[vscode编辑器 切换演示]

1. 代码补全与智能预测

根据上下文自动补全代码，支持多行代码生成。通过注释或函数签名即可快速完成代码片段。

2. 报错修正与快速调试

识别报错信息，一键引用报错代码、终端，自动分析原因并提供一键修复建议，大大缩短调试时间。

3. 自然语言对话与需求理解

通过自然语言对话深入理解开发需求，结合当前代码上下文，自动完成需求编码，显著提升开发效率。

不光是写代码，需求文档，演讲稿任何文档都适用它自动补全和智能预测的功能。

Cursor · Trae：AI智能编辑器

由于copilot是以VS Code插件的方式引入运行，它只能访问：我们当前打开的工作区中的文件、你手动触发时提供的上下文（例如选中文本、光标上下几行等）。因为VS Code 的安全沙箱机制不允许插件随意扫描整个磁盘目录结构或读取未打开的文件内容，所以 Copilot 的“智能程度”取决于：你当前编辑文件 + 光标位置 + 我们对话临时缓存的上下文。

Copilot插件是对现有IDE的增强，Cursor则是基于开源的vscode二次开发的独立编辑器，它在本地有权限读取检索整个工程目录，当我们让它解释或完成某个需求功能时，它不光能查看当前工作区文件代码，

还有完整的项目工程引用关系，任何有关联的相关代码片段，所以它的表现感觉会更智能 [桌面cursor trae编辑器 切换演示]

它可以实现：

1. 从0到1：快速构建

只需用自然语言描述需求（如”创建一个Vue的待办应用”），Cursor就能自动生成完整的项目结构和代码，包括路由、状态管理、UI组件等。

2. 已有工程理解与深度集成

Cursor能够深度理解整个代码仓库的架构和逻辑，通过对话的方式进行跨文件重构和优化，大大提升开发效率。

3. 自然语言编程与对话式开发

通过对话式交互进行编程，AI会根据你的意图修改代码、添加功能、修复Bug。这种App Builder模式正在改变开发范式，让编程变得更像与AI进行一场创意对话。

CodeBuddy：微信小程序开发的智能助手

CodeBuddy主要是在微信小程序开发工具中使用，希望通过需求沟通、描述总结，最后实现项目工程的自动化生成： [微信开发者工具 切换演示]

1. Craft · 组件生成

通过craft_chat功能，只需描述需求，CodeBuddy就能自动生成符合微信小程序规范的组件代码，包括WXML、WXSS、JS和JSON配置文件。这大大简化了小程序组件开发的复杂性。

2. Chat · 对话式开发

支持通过对话的方式进行沟通需求，AI会理解你的意图总结概括，输出需求要点，再交由Craft智能体生成具体代码工程。这种多智能体协作的模式，让开发流程更加高效。

3. 需求沟通 · 自动生成项目

从需求描述开始，CodeBuddy能够自动生成完整的小程序项目工程，包括页面结构、路由配置、组件库等，极大降低项目初始化的时间成本。

claude code

另外还有一个claude code，[浏览器官网，终端交互，截图 切换演示]，它能够通过终端命令行（CLI）的方式进行交互。[截图或 官网终端]，
Claude Code 可以支持超长上下文，[浏览器官网 上下文窗口 演示]
windsurf中的 claude sonnet 4.5 thinking,[windsurf编辑器 模型 演示] 解决gpt-5未完成的问题，也可能之前踩坑的上下文提前告知，但它的响应速度相对更快，最终结果是符合需求的，自动创建readme文件规划

总结

总体来说，vscode就像是我们的微信app，copilot这种插件引入的方式就像是我们在微信小程序中打开美团小程序，Cursor就是我们手机上直接安装的的美团app，各自有对应的使用场景

AI解决实际需求场景

下面是AI实际中的应用，用的比较多的是前面有介绍过的代码补全，异常报错修复，还有一些通用或者很明确的工具类函数或者模块组件编写，

Cursor / ChatGPT · Flutter App

正好最近我们在做一个新的flutter的app， 本地开发环境，android studio编辑器模拟器配置，项目内的插件版本，资源依赖下载各种报错几乎都是在trae和cursor编辑器中解决的，然后实际对照设计稿去描述页面需求，上传设计稿图片、关键的样式布局说明、css代码，动态交互提示，AI根据条件自动修改文件代码，推荐社区组件，实现方案，边界条件、异常处理。

实践下来最大的感触就是AI改变了我们解决问题的方式，之前碰到问题或者异常报错，我们大多需要去百度、google搜索引擎关键字去查，最快的解决方案就是刚好别人也碰到相同的问题并且记录了下来，然后参照别人的解决方案尝试，有的时候为了找到解决方法也许需要查很多篇博客，或者很多来源才能找到，现在直接通过ai，它的答案知识来源或许也是网上、各种资源去检索到答案，但它的准确程度，响应速度，解决问题的效率相比要高的多。

Manus 平台：前端AI分享的智能助手

另外一个想说的就是manus，上面的工具更偏向于开发，编写代码，Manus在任务规划和文档内容创作，总结输出更强，像我现在分享ppt就是通过manus生成的，*[此时切换浏览器ai工具页面 manus]*

我先是自己列了一个大纲，然后告诉它我的角色，分享情境、大致要分享哪些点，让他帮我做总结优化，它完成后又给了我一些补充建议和其他可以分享的点和方向。我用chatgpt和deepseek也都试过，它们给出的总结和补充建议其实表现上都差不多，稍微有些差异，但只有manus它在完成总结后很友好的问了一句需不需要帮我总结生成文档，它还会先在线生成预览页面让你确认修改，后面自己下载下来后做了些改动后，让它帮我再做总结时需要配图，发现manus的文生图，图生图能力也不错，整体试下来感觉还可以。

AI使用的关键要点与最佳实践

下面是在ai使用过程中可能碰到的一些问题，很多时候会出现提问得不到期望的结果或者有出入，

比如在做一些技术方案选型时，更多的是只关注能否实现，可以让AI 从性能、可维护性、学习成本都给出对比分析,

代码重构或者基于历史代码扩展新功能时，明确约束，防止发散性的改动

实现复杂的逻辑需求时，按模块功能拆分，分步骤一步步实现，不然聊的太多太广，会比较混乱

尽量在单一会话中只处理一类任务，避免上下文污染，当需要处理一个新的、不相关任务时开启一个全新的会话，确保 AI 能聚焦于当前问题。

然后是常见的陷阱与避坑…

提供明确、具体的需求 => 好的prompt示例
…

未来展望：AI Agent时代

未来的 AI 不仅是副驾驶，更是能够自主思考、规划和执行任务的智能体。AI Agent 将能够理解复杂需求，自动拆解任务，调用工具，并完成从需求到部署的完整流程。

不仅是代码编程，还有实际生活中的应用 无人驾驶 自动可完成的工作等等

但无论如何发展，ai是副驾驶，还是需要我们作为船长的引导。

我今天的分享就到这里，谢谢大家！