【AI探索】站在前端开发角度看待AI大模型

目录

引言

近几年AI发展飞快，在这期间我陆陆续续使用了多款AI产品，试图将自己从繁杂的代码工作中解脱出来，成为类似于造物主的角色。可从实际体验上来看，这个想法的落实还需要一段略长的时间去等待。我不是一个AI领域的专业人员，我的一些看法仅仅是以一个用户的角度出发。

一、前端行业应用

1. 交互式APP开发

当前有个噱头很足的AI应用方向：用户跟AI通过聊天就把前端的活给干了。

如果你常关注一些开发类的公众号或是视频网站的博主，就会看到类似的标题：【震惊！某小学、初中生（或是别的什么一看就不会写代码的人），通过xxxAI发布了一款聊天、任务代办、照片墙等应用】。带着好奇，我也尝试了该AI应用，我甚至按照视频中的对话复刻了一遍，确实模模糊糊出现了个应用的雏形，但是还远没有达到可用状态。至此为止，我仍然认为可能只是个例问题，于是我又搜索了同类型的AI应用，同时参照视频网站上对该AI应用的教程复刻操作。最后我发现，AI确实可以做一部分的页面设计，但是很有限。

我总结了一下这些AI交互式生成APP的特点：

• 生成的页面，大多以平面设计为主，页面dom平铺直叙，嵌套定位很少。
• 页面代码会大量使用语义化标签，类似table、td、tr（我现在不怎么推荐用）还有其他html5新增的标签，这些标签大多带有自带样式，如果你对样式有些定制化需求，那么让AI帮你修改会非常麻烦。
• 在描述需求的时候，你需要非常详尽的表达你对某一个页面的需求，组织语言这点就非常痛苦。如果表达过于笼统，那写出来的页面就放飞自我了。非常适合你对这个页面没什么预期，希望AI以创意值更高的模式进行创作。
• 当遇到AI无法解决的bug，他会陷入一种困境，反复的提供刚才已经提供的错误代码，有一定概率会开始说一些不相干的内容。

这时候我就有了一个疑问，这类AI产品的用户主要是面向谁呢？

1. 前端开发人员？- 对于那些基础的页面，与其费劲整理描述的prompt，不如随手写了省事。- 对于复杂页面的开发，可能开发人员自己已经有了一套开发逻辑，AI提供的代码示例往往达不到预期，修改反而成了负担。- 当AI生成的页面出现了逻辑bug，此时排查bug也会是一件头痛的事情。
2. 没有开发经验的产品或是其他？- 或许这类人可以更专注于描述自己的需求，让AI帮忙编写代码。- 然而我只能通过操作运行后的成品去判断是否符合我的预期，如果不对，我仍需要继续对某一块内容换一个更清楚的方式进行描述，而不是直接告诉AI代码哪里有问题。- 如果出现了报错，那更是糟糕，完全不知道如何下手，只能重复的将产生的bug投喂给AI继续排查。

所以我认为，

交互式APP开发

或许是AI在前端领域的一个出力不讨好的方向。

2. 代码分析

目前有几款国内的AI编辑器集成插件，都有了项目代码分析能力。

当授予了AI插件一些权限后，AI将读取你整个项目的代码，自动梳理代码框架。我认为这个功能是十分有用的。

当接手一个老项目时：

• 老玩家一般都会有自己的一套方法论，可以快速的对项目有个大致的了解，但难免会出现一些疏忽的地方。
• 新手玩家一般这时候就已经死机了，只好去请教前项目成员。

当使用了AI来助力完成这件事后：

• AI可以对项目整体代码进行系统性分析，告诉你整个项目的框架，项目主要做了些什么，以及项目已经具备的能力有哪些等等。
• 当你对某一个功能模块产生疑惑时，AI可以单独针对某个模块进行设计逻辑的梳理，以及告诉你哪些函数的作用（没有注释的情况下）。

3. 代码提示

这个功能是我日常使用最多的。

生成测试数据

前端测试列表样式时经常会使用一些mock工具产生一些假数据。当使用AI插件后，我们只需要编写一个有意义的变量名例如

xxxlist

，一般情况下它就会根据你变量的含义产生一组数据。如果你对这个数据不是很满意，就在他提供数据的基础上做修改，修改后继续回车到下一行，它就会根据你修改后的数据，进行同类型拓展。这样我们就可以快速得到一组测试用例数据。

代码补全

AI插件可以根据当前文件上下文，以及引用文件的内容的上下文，分析所有的变量、函数、类等信息。当你编写代码时触发了某个变量名、函数名、类名的关键字信息，那么它会分析上下文内容，进行代码补全。当你的函数定义十分清晰，你的调用过程不存在混淆的情况下，甚至可以一键将代码完全补充完整。

4. 虽然没学过但是我想用

前端开发技术千千万，你不可能所有的东西都学一遍。

这也是我经常会遇到的问题，我的主要技术栈是vue，然而公司的项目你还能选？当一个项目就必须要用react你该怎么办？

其实这个问题很好解决，打开react官方网站，教程跟着练一遍就行了，少则一星期，多则半个月，你就差不多是个react半吊子选手，应付一些业务开发绰绰有余。

项目不等人怎么办？

前端的核心还是html、css、js没有变，变得只是框架。我们完全可以利用AI在完全不会一个框架的前提下，利用框架完成业务开发。前提是你得对某一个框架比较熟悉，有一定自己的心得在里边。

你可以针对一个功能，以你自己熟悉的框架逻辑介绍一遍，然后告诉AI（可以参考一下我的话术，感觉蛮有用的）：

我现在要使用xxx框架去实现这个功能，请一步一步通过代码指导我完成该功能，每一步都需要向我确认是否已经清楚，当我说下一步时再进行下一步的讲解，听明白请回答ok。

当你输入以上prompt后，随着AI回答

ok

，你根据AI回答的内容，依次输入

下一步

即可完成该功能的边学边用。

这个边学边用的过程需要依托于一个核心点：抛开框架本身不谈（因为你还不知道他说的对不对）仅从js的角度来判断，它回答的内容是否靠谱。

我就是按照这个模式，在不懂后端的情况下，靠AI一步步教，使用koa搭了一个后台，完成日常项目的接口工作。

二、推荐几个好玩的

现在国外的AI产品例如

GPT-4o

、

Claude 3.5 Sonnet

等都是非常好用的，但是想自由使用就得氪金。

国内的推荐几款用的多的吧，目前都免费。

• 代码方面比较推荐 通义千问 ，最近发布的 qwen2.5-coder-32b 还是相当不错的。
• 文本类的比较推荐 KIMI，主要是他做的一个浏览器插件蛮好用的，浏览器网页随时划词提问。
• 比较均衡的推荐 智谱清言 ，以上两个方向做的都还行，做个智能体还是挺好用。
• 一个综合类的平台 Coze ，分国内版和海外版，海外版已经开始氪金了，国内版目前就是整合了以上几种Ai大模型，也是通过创建智能体发布到其他软件上使用。

代码编辑器AI插件

• 通义灵码 ，使用通义千问账号登录就行。
• MarsCode AI: Coding Assistant ，豆包旗下助手插件，和通义灵码差不多。

三、总结

以上即为我对AI大模型在前端领域应用的浅薄理解。我比较倾向于把自己定位为AI的审查者，当你要用AI做某件事时，首先你得是这件事的相关领域从业者。你需要心里清楚它在说些什么，有没有胡说八道。当你满足这些条件后，你再使用AI时才是真正的放飞自我。脏活累活丢给AI去处理，聊着天就把活干了，自己做一个

code review

的角色。此时我才能说AI解放了生产力，在前端领域提供了莫大的助力。