完全使用GPT-4开发前端项目的体验

去年10月用gpt4写了一个小项目，第一次用GPT-4来写代码，过程还挺有趣的，记录一下。

• 项目包含：
• 一个浏览器扩展
• 一个landing page
• 一个函数计算的项目
• 项目主页：ChatShelf 插件已停止维护。
• 项目功能：将ChatGPT的中有用的对话，保存到Notion，并且支持比较完美的Notion Block格式。

这是其中工作最大的一个代码仓库的代码量统计：

added lines: 20155, removed lines: 8876, total lines: 11279 

同步到ChatGPT对话内容到Notion的插件的截图

95%的代码由GPT4生成

• 开发语言是Typescript，从来没有学过，没看过语法；
• 用tailwindcss写样式，第一次用，现在已经背下了很多样式不太需要GPT辅助了；
• 浏览器扩展开发部分，10年前写过，几乎全部是ChatGPT基于Plasmo框架来生成；
• 使用海外的一些新基础设施，大部分都是第一次用，比如supabase，大部分代码也是由ChatGPT来生成

最后大致统计了一下： GPT4帮我写了95%以上的代码。

去年10月那个时候的几个直观感觉

1. 暂时还无法取代有经验的程序员，即使是GPT4

但取代实习生水平是可以了。 它暂时还无法独立写完整个项目，但是我感觉是被chatgpt这种交互形式限制了。后来我又订阅了cursor、copilot 等类似AI IDE，这类IDE可以嵌入文档、读取整个代码仓库，效果好很多。但是依然需要一个有经验的程序员和产品经理来指挥。

2. Advanced Data Analysis的代码能力似乎比GPT4强一些

Advanced Data Analysis 就是之前的 Code Interpreter。我没有仔细测试，直觉上Advanced Data Analysis生成的代码似乎出错更少，我用来debug的时间也更少。

3. 如果不了解一门语言的语法，debug的时间是会超过直接写代码的时间

我就不了解Typescript的一些语法，甚至JS也忘的差不多了，但是能看懂代码结构和逻辑（我从高一开始学写代码，断断续续有接近20年的编码经验）。

从代码统计上也可以看出来，写了2万多行代码，删了8000行，这里面有很多，是后来我debug阶段仔细看代码逻辑时发现的问题，或者debug时GPT4自己删除的。 项目还没发布就产生了这么多废代码，直觉上认为如果是了解基本语法会在生成阶段就能发现很多问题。

4. Prompt中包含更多的上下文，生成的代码会更准

其中我经常放进去的上下文信息是package.json和 tree命令输出的目录结构，有时还会带上next的配置文件等等。 上下文足够的时候，GPT4会直接告诉我在什么位置创建什么文件，文件内的代码是什么。如果定义好函数签名，让它实现函数，也会很准确。

后来长期订阅cursor，它可以自动读取，方便很多。

5. 尽量使用一些很稳定很长期的包

ChatGPT因为预训练模型的原因，信息无法更新，一些包的更新它完全不知道，如果包的使用方式发生大改变，代码几乎没法用。这时候要么把最新的文档复制给ChatGPT，要么就得自己上手写。

前端代码更新太快了，写后端项目会更方便点。还有就是AI IDE现在可以自动嵌入官方文档，也可以弥补这个不足。

6. COT很有效

特别复杂的任务，不要把所有工作都塞到一个Prompt里，比如重构一个文件，可以分好几步，每一步只完成少量任务，写Prompt会容易很多。感觉主要还是复杂的任务很难一次性描述清楚。

现在的感受

AI IDE这半年发展挺快，可能是最快实用的AI Agent之一，现在的感受是：

• AI 取代程序员短期依然有难度，半年时间过去了，模型的能力是停滞的，现在大家都还是在流程、工具之类的次要环节努力。
• 但是可以很好的打配合，自动 debug 很好用，前端的大部分代码靠AI生成可以正常运行。
• 容易出错，复杂错误出错后 debug 很费时。比如 GPT-4 似乎对next.js中的客户端和服务端组件总是分不清楚，我刚好也不熟悉，这里总是会遇到问题
• cursor比 github copilot好用，准备长期订阅了。