AI时代的程序员如何利用AI|cheems的博客小屋

AI不会替代程序员，AI只会替代不会使用AI的程序员

能看到这篇博客的想必也一定是程序员，应该也都在23年初就遭受到AI的强大冲击，甚至可能有一段时间怀疑自己会不会被AI替代。

而在历史的发展规律中就可以得知，就像出行工具的变更。当马车出现的时候，不会驾驭马车的人力车夫会被大批量的替代；当汽车出现的时候，不会驾驶汽车的马车车夫会被大批量的替代。

我们前端的发展历程不也经历过？不会JQ的被替代，不会Vue/React的被替代，进一步到现在就是不会使用AI来加强自身能力的被替代。所以我们不应该去排斥AI，而是积极的去接受这个现实，尽快的使用AI来便利自己才是发展之道。

当我看到有的程序员网友号召程序员一起放弃AI、抵制AI，我内心belike:

而AI带给我们程序员的便利我也会列出心得，来帮助愿意观看同志们。

AI 降本增效

就像汽车代替马车一样，将本指的是的交通工具的维持成本，增效则指的是到达目的地的速度。如果你只使用AI来解答一些问答，甚至少量的代码提示，那么同志你以及落后大环境太多了

时间都去哪了？

前端开发耗时= 样式布局 + 接口对接 + 代码逻辑

后端开发耗时= 接口对接 + 代码逻辑

由于我只是专业前端，对后端没啥发言权，就仅阐述前端下的情况

后台管理系统等低样式，重逻辑、大多数的To B项目是这样的

如果公司业务是后台管理系统，这种系统CSS已经有了成熟的开发布局，可以直接直接通过编写HTML的代码(例如: element-UI)，甚至是使用一套JSON配置的组件渲染机制来控制页面(例如: antd-Pro)，而不用过多的考虑CSS问题。进而减少布局时间，着重于业务代码的实现。而因为前端业务代码是必然少于后端业务代码的，就有了1个前端可以顶住3后端开发的场景，有的公司后台管理系统甚至有低代码辅助，可以把其他员工直接引入到前端开发中快速上手，前端的代码量自然一降再降甚至可以裁掉多余的前端佬(前端人泪目了)。

前端佬的耗时就可以精简到：接口对接 + 代码逻辑

官网、APP，需要极其良好的用户体验，大多数的to C项目是这样的

而使用PS、蓝狐、及时设计这种绘制的开发平台，如果有基于组件库绘制的设计图(可以直接拿element与anrd来进行及时设计，可以减少很多前端开发时间，但是同样绘制出的页面效果自然不够开放)，而纯原绘制，这种的页面就很自然好看，前端自然也只能一个个DOM一行行CSS，慢慢绘制出页面的UI效果。于是就有产生了前端开发占用时常。

小程序的开发状态简直地狱

时隔3年，当我习惯了不再使用Hbuilder开发，再次回归Hbuilder开发感受到了巨大的习惯差距。

代码编辑器

基于vscode的AI开发工具>Idea>vscode>HbuilderX
如果不是小程序的刚需，使用Hbuilder开发会非常难受，如果是uniapp开发，建议使用基于vscode的AI开发工具+HbuilderX来开发，就会好很多。

我也曾经花时间使用vscode直接运行小程序，但是发现，这种操作，只能在V3小程序框架中可以，因为大部分运行依赖开源到NPM可以直接使用vscode开发，而V2小程序中大部分都有着uni_modules与node_modules俩依赖库，运行库又只在编辑器中，无法使用CLI运行。uniapp开发团队你要负全责

代码运行时

我们平常使用浏览器开发，享受着热更新热替换带来的便利，再加上极其快速的CSS相应与提示(chrome YYDS)，因为有插件与API的缘故，导致大部分的uniapp专属事件无法在浏览器中正常运行，因此如果要走一些流程稍稍复杂，就无法在浏览器中运行下去，这个代码只能运行模拟器来验证(依稀记得自己在第一家公司一直是运行到浏览器)。微信小程序开发团队，你也脱不了干系，写不明白就直接去抄chrome的开源内核得了，抄都懒得抄，服了。

AI的选型中，我们都有过哪些选择？

1.0 借用chatGPT进行代码提问，能帮我快速查询代码，生成代码

2.0 使用代码生成工具，使用vscode安装 GitHub Coplit或者通义千问大模型的AI来进行辅助开发

2.1 因为编辑器缘故，如果改为IDEA或者web Storm这种编辑器继承的AI，提示的会更准确，因为收集到的上下文代码要比vscode要多

3.0 使用诸如使用 cursor/Windsurf/Trae来进行开发

而我非常建议使用cursor来开发，这个AI编辑器的能力强的可怕

AI可以为我们前端助力到多少？(claude-3.7-深度思考)

样式布局

拿一个公司的开发案例来举例，我有一个重构UI的需求，效果在蓝狐如图

这个是在旧的UI基础上进行重绘，旧UI效果以及找不到了

我们这样提示AI

截图

要修改的代码文件
蓝狐生成的wxml
蓝狐生成的wxss

AI回答：

思考过程

给出代码修改

变更说明

刷新小程序，得到绘制效果：

确实还有很多间距色彩等等地方不足，但是如果我们在这个基础上重绘，可以说减少了大量的HTML CSS绘制成本。

甚至你可以不给源码，直接截图去复刻别人家的UI

我直接拿掘金来整活

提示语如下

这个是掘金的UI图

这个是AI还原的设计稿

因为我是只使用的截图生成的，效果会差很多，但是如果可以引入哪怕是压缩后的源码，生成效果又会再上一个档次我们只需再花很少的时间就可高精度还原UI效果。但是即便如此，已经非常NB了兄弟们。而且布局排布方式还很合理。

接口对接

我们都知道swigger与apiFox这种常见的API接口工具，我们后端引入swigger后可以直接生成JSON格式的接口文档。然后可以把最新的JSON格式文件直接放置到指定的文件夹中，然后给AI提示，AI就能按照旧的API 格式生成全部的接口。也是不用再累死累活的一个一个复制粘贴写接口了，还不用担心写错。

我们拿apifox举例

经过轮番测试，使用MD文件喂给AI，AI的效果最好，JSON格式与HTML格式还是略差了。

提示语如下

这是MD文件的输出效果

因为AI的算力限制，千行基本上就是这个AI的极限了，所以我们使用的时候一个目录一个目录的输出，一口气输出就会有图上的效果。反正多问几次，可以节省大量的时间，还带有极为丰富的代码注释。可以说非常舒服了。

然后我们就可以将AI生成的接口直接引入到写死的前端UI代码中。再往后就是下一小节，代码逻辑部分了。

代码逻辑

这块的内容我的实践并不多，因为实际业务常常过于复杂，若是简单的增删查改等等简单逻辑也还好，只要业务逻辑复杂，只能去一点一点的去让AI实现，一口气实现的效果常常不尽人意，亦或者AI发挥过度，算力又限制了，导致又得重新再问一遍，最好的就是提前组织好该页面逻辑与其他页面逻辑的关联性，然后跟我们平时写代码一样，写出基础代码后，一步一步的去完善逻辑，然后验证！一定要验证！AI的考虑常常出现漏网之鱼，与节外生枝(后面可以去更换模型试一下，deepseek在中文理解上是优于claude-3.7的)。相信重度使用AI的人也都知道，AI也有AI的局限性，不可能尽善尽美，仍然需要人力去修复，只不过在AI的加持下，我们有能力加倍加速的提高自己的开发效率，更快的完成自己的工作任务，达到按时完成任务不加班的目就知足了。

AI源码阅读

我们都使用过AI写代码，但是AI也可以帮你理解优秀框架的源码，当你使用AI对一行源码后面或者上一行打上 // ，就会如下：

createApp(App).mount('#app') // 创建Vue应用实例并挂载到DOM

你也可进入源码，对内部的细节打上 //


export declare const hydrate: RootHydrateFunction; // 服务端渲染
export declare const createApp: CreateAppFunction<Element>; // 创建Vue应用实例
export declare const createSSRApp: CreateAppFunction<Element>; // 创建SSR应用实例

真正的步步高学习机，哪里不会，注哪里。芜湖！

如果你的代码非常屎山的时候，再加上变量名完全不符合语义，而又是逻辑不严谨的代码的时候，我们读起来可能就是这样：