浅谈 AI Coding 对前端的冲击,欢迎友好交流

131 阅读5分钟

AI 时代的幸存者们大家好,我是小森。

作为某 AI 领域初创公司的前端打工仔,每天都在感受着 AI 对程序员巨大的冲击。

“听说 XX 公司(某初创)没有前端,小森你怎么看?”
“Devin 好棒,我(PM)让他写后管,后端有点小问题但前端挺好,还不会怼我!”
"如果公司统一采购 Cursor,前端排期可以压缩一半吗?"

636bcfbe457a2DDn.gif

去年还主要用 GPT4o 写代码的时候,我还在跟老板诋毁 AI,“写的代码没法维护,稍微复杂点的都没法改,数据流更是写不出来”,一边诋毁一边偷偷付 GPT 订阅费,帮我写一些相对独立的代码模块和查阅资料,利用提升的生产力喘口气。

到了今年年初,随着 Claude 3.5 基础模型能力的提升以及 cursor,windsurf 的交互形式越来越好,不仅能很好的完成一些覆盖面相对较广的任务,代码写的也是又快又清晰,还总能提出新的思路。
但此时老板已经发现了AI的生产力,工期也同步被压缩,AI 成了我戒不掉的电子鸦片。

等到 Claude 3.7 以及 MCP 的“横空出世”,才意识到这把火已经是大势不可阻挡,AI 已经对程序员开启了末位淘汰,肉眼可见的未来会有大量程序员失业,这把刀已经悬在头顶,随时会以无法想象的速度掉落。赛博朋克的世界竟是无比的写实。

image.png

这是一场没有硝烟的战争,最初,我们欣喜于多了一个提高生产力的工具,可随着 AI 以指数级变得越发强大,我们开始逐渐畏惧。为了保住自己的饭碗,我们需要接入AI,但接入了AI,又会最终导致我们失去饭碗。程序员会自己革自己的命。

未来谁也无法预料,6年前刚入行的我,想过程序员的红利期在某一天终将结束,却也绝不会预料到短短几年已是沧海桑田。我们只能着眼当下,直面恐惧,了解“对手”。

言归正传,简单谈谈我目前对使用 cursor,windsurf 进行 AI Coding的感受。我挑选了官网这个独立的静态页面让 AI 去实现,官网也是

我使用 Cursor 的 Claude3.7 + Figma MCP 实现我们的新版官网。为什么选择官网呢?

  1. 从技术上来看,官网是一个相对独立的小型静态页面。还原设计稿是第一要务,几乎要实现的功能都在设计稿中,不用描述复杂的业务背景,也不需要特别关注抽象和复用。并且也具有响应式和动效等不算困难(整花活例外)但工作量大的功能。
  2. 从业务上来看,官网是最容易频繁发生改动的地方。且无论对于大小公司甚至个人开发者,官网都是必要且重要的业务,但容错率相对较高,更加适合 AI 开发。
  3. 从可替代性上来看,在大模型火起来之前就有很多生成官网的工具了,也是开发中最容易/方便被外包出去的部分。只是以往的工具生成的代码难以二次开发,并且也很难满足设计师的特殊需求,AI 写的代码更加适配。

综上,我认为官网是最适合 AI 工具进行开发的业务,实际使用的效果如何呢?

Claude3.7 几乎在几个问答的时间内,完成了80%的开发工作,甚至包括设计稿中所用图片图标的下载。文案内容,字体大小,颜色尺寸等信息都是正确的,写的代码也比较清晰易懂(不得不说,大模型的代码习惯确实好),甚至实现了一定程度的响应式和css变量提取。如果对细节要求不高,已经可以直接使用了。

接下来说说感受到的限制:

  1. AI 不会主动复用以及抽象组件,相比抽一个可复用的组件,AI 更愿意重复自己。
  2. 动效和响应式的实现效果一般。

先说第一点复用的问题,我觉得这并不一定是不好的模式。对人来说,抽公共组件和复用组件是节省时间的一种开发模式。但对AI来说,重复的成本非常低,重复或许就是对AI来说更方便更易理解和修改的模式。

再来看看第二点动效响应式的问题。AI 生成的动效和响应式符合常见的设计范式,但与设计稿中特定的要求就显得两模两样了。原因在我看来主要在于,这两点都是设计稿上没有充分表达的部分。

响应式上设计师通常只会给PC端和移动端两个尺寸的版本,边界条件和中间地带都是需要前端和设计根据经验自行适配且不断调试的部分,字体大小和局部布局都需要反复调试敲定。而动效也是类似,通常设计师只会给开头和结尾两个关键帧,怎么实现就“各凭本事”了(前端仔总有自己的“偷懒”方式)。

总的来说,目前饭碗还在,大模型在当前的阶段,主要的角色依旧是提效,可以作为一个很好的打底工具,快速搭出页面的基本框架。对于尺寸颜色这些确定但繁琐的工作,可以省去大量的时间。但是对动效/响应式/数据流等等诸如此类需要沟通成本和较高描述成本的事情(eg:画图才能讲清楚的事情),靠工程师丰富的经验则会做的更好。

image.png

但 AI 的发展速度一日千里,未来谁都无法预估。只能说在 AI 时代,我们要直面恐惧,有想法就立刻实现,持续学习。努力是我们普通人的唯一出路。

我是小森,欢迎大家在评论区友好交流~