I really enjoyed the casual hackathon earlier this month. It gave me the opportunity to deeply explore AI tools, turn an idea I had been thinking about for a long time into a demo, and see a variety of creative ideas from others. Overall, I gained a lot from this hackathon! What made me even happier was that a few friends expressed interest in using the product afterward. So, over the past few weeks, I’ve been working on improving the basic functionality of the project and have now open-sourced it on GitHub (GitHub - Coooder-Crypto/web-assistant-frontend: Transform any webpage into an interactive knowledge base! Chat with your current page and get instant, intelligent responses about its content.). I warmly welcome everyone to try it out and share feedback, and I also look forward to advice from experienced frontend developers!
月初的休闲黑客松的我很喜欢,趁这个机会深度体验了 ai 工具,还把自己很久以来的想法落地 demo 了,也看到了大家各种各样的想法,总之是这次休闲黑客松的收获超级大。更开心的是事后几个小伙伴希望能用上这个产品,于是最近几周把项目基础功能完善之后开源在了 github(GitHub - Coooder-Crypto/web-assistant-frontend: Transform any webpage into an interactive knowledge base! Chat with your current page and get instant, intelligent responses about its content.),欢迎大家体验反馈,也欢迎各位前端大佬多多指教~
顺便记录一些 ai 开发工具的感悟 hhh,因为前几天和车书记讨论了相关的问题,感觉自己的一些经验也可以简单分享下,抛砖引玉,欢迎各位补充~
ai 开发工具感悟
开发前
- ai 工具选择:当前比较火的工具还挺多的,我接触的其实很少,cursor 用了一下感觉看着别扭,发现 windsurf 和 vscode 几乎一样之后,就转到了 windsurf。后来发现直接用 vscode + cline + deepseek api 也有不错的体验(重要是便宜),尤其是项目代码比较多了其实 cursor 和 windsurf 降智都会变严重,所以 vscode 的体验也变相提高了。
- 开发前确定技术栈:一定要在第一次对话的时候把技术栈确定好,包括项目框架以及 ui 框架,如果是有一定洁癖的开发者,也可以先把项目的目录确定下来。
开发中
- 版本管理:前段时间有个争议比较大的人一直在吹捧自己的所谓 ai 开发方法论,先不提是不是割韭菜,如果让我来设计课程,我会把 git 的使用放在第一课。因为 ai 工具会大范围地修改代码,经常会“悄悄”把已经实现的功能破坏(我的论文代码被 cursor 改了一行,模型直接不收敛了害我 debug 了好几天)。熟练使用 git 可以很方便地回溯每一行代码的改动,每次把做好的功能 commit,新功能出了问题也可以把所有的改动 discard,保证旧功能的可用。
- 划分模块开发:每次对话都要明确想要实现的功能,结合 git 版本控制,利用不同的工作流(Git Flow、Github Flow、Gitlab Flow)进行模块开发。功能模块的划分越细致越好,尽量让 ai 工具每次的改动小一些,避免引入不可控的 bug。
- debug:可以通过报错信息先初步确定 bug 所在,然后告诉 ai 工具大概去哪里改进。尽量给出一个确定的方向,不然有的奇怪的 bug 会让 ai 工具一直转圈圈,我在开发过程中遇到的就是浏览器插件构造文件相关的 bug 一直不能通过 ai 工具解决。
- 冗余代码:配合版本管理,记得把用不到的代码删掉,ai 工具经常会创建一些或许冗余的代码,虽然无用代码不会影响项目的功能,但是会影响 ai 工具的后续开发。比如同一个组件实现了两次,虽然一个用不到,但是 ai 可能会把新的改动写在冗余代码的部分。
开发后:
- README 文件:发现 ai 工具一个很好用的点就是写 README 哈哈哈哈,他能根据项目代码写出包含各种表情的 markdown 文件,对我这种不擅长文字表达的人简直是福音。
- Code refactor:重构代码的时候,ai 工具的作用相对很小,可以让他逐个文件检查冗余代码,删除一些多余的部分。冗余代码也是 ai 工具开发中很难避免的,最好是在开发过程中配合版本管理仔细检查每次提交。