我会看很多英文文章，但是不认识的单词或词组的使用总在困扰我。 尤其是一个词放在句子中里，却有不同的意思。
我想可以做这样一个功能：在浏览网页时，当选中文本个单词/词组后，下边会出现一个按钮，点击之后，就把关于这个英语单词/词组的解释都发给我。
经过2个小时的AI Coding，效果如下：
选中单词后，出现了"DeepEE"按钮（插件的名字是DeepEE- Deep English Explain），当点击后，所有关于这个英文的解释就都呈现出来了：
项目源码我放到github了：github.com/astordu/dee...
思路和设计
词组 trun it over，我认为是"翻个面"的意思。 但是看到Sam Altman 和 MIT 校长访谈的记录[1]，校长这样说："Sam and Sally, thank you for being here. I'm going to turn it over to both of you." 我想为什么要把Sam"翻个面"呢，我就很蒙。
之前，我会使用AI的对话进行询问和学习，在英文方面，AI是一个很好的老师：
我想我能不能开发出一个Chrome插件，当选取句子中不清楚的词或者词组时，自动把当前选中的词和整段文章的上下文都给到模型，让它自动帮我把相关的解释呈现出来，这样我就不用在阅读的网页与模型对话页面来回切换了。
但是难题是：我不会前端开发技术也不会chrome插件开发呀。
这时候，我想应该使用AI来进行开发前端。 原因是这样的：
- 前端应用有个特点，它的结构化方式比较固定，比如页面布局就是html，function一般就是js中，而样式是css。
- 所见即所得的前端交互方式正好匹配了模型交互方式，可以通过模型不断进行反思调整和改进
- 我要做的项目不复杂，不需要考虑太多的前端设计模型
于是，我就开始选择AI模型和工具了。 编码模型调研： 要选择一个对代码进行充分训练的模型，而不是微调模型[2]，在这个文章《啊！这就是为什么不要微调》[2]中有充分介绍。 所以考虑模型为：GPT-4o 、Claude、Gemini AI开发工具调研：AI最好的工具是 vs code + copilot 和 cursor。
前端最好用的模型是Claude，这是第一个通过AI直接生成页面的大模型。 而cursor则是可以通过通读整个项目，进行多个文件分析，来全局去修改代码，非常使用于我这样不会前端代码，但需要写不复杂架构设计的人。
最终选择好了工具： cursor+claude-3.5-sonnet
实战
直接让它干完
我以为cursor相当牛x呢，所以我直接把所有需求都给它描述好了，期望它一次就帮我搞定：
javascript
我要做一个chrome插件，功能是这样的：
1.当选中网页中的某几个单词时候，弹出一个小窗口，像图里截图的那样，弹窗里边的字要写上DeepEE.
2.当我点击"DeepEE"按钮，弹出一个窗口，这个窗口用于显示文字。
3.点击按钮之后的处理流程：抓取网页当前词的段落以及当前的词，让后传入一个函数function(当前词，当前段落),这个函数的作用是调用大预言模型，大预言模型会给出当前词在当前段落的解释。
4.最终将大模型返回的内容以流式输出的方式显示在弹出的窗口中放大一些，是这样的：
它指导我说要创建几个文件： 这里多说一句，cursor生成的代码，在右边有一个"Apply"按钮，直接点它进行确认，代码修改就完成了。
然后都创建好了之后，我就直接能用了，它还指导我怎么把我的项目加载到chrome的插件中：
我照做了，确实插件加载起来了。
然后，只有"DeepEE"的按钮样式出来了，根本点不了，也出不来我们想要的小窗口。
小步迭代
我突然想到之前的一个使用AI的比喻：你要把AI当成一个什么都能干但不懂思考的小弟。要是一下子给它个任务，它确实能快速做完，但是不一定是你想要。 最好是把每一个都说的清清楚楚、明明白的。 于是，我开始小步迭代重新写这个项目：
第1次对话
你先做第一步：在网页选择文本后，显示按钮，其他步骤先删除掉
第2次对话
你现在写第二步：点击这个按钮出现一个小弹窗，里边写着："你好"
第1词和第2次对话我就是希望可以把基础的功能做出来，点个按钮然后能出现一个小弹窗，里边写着："你好"，但是还有一些小问题。所以我又让它改了改。
第3次对话
点击""deepEE"按钮的时间与"mouseup"冲突了
第4次对话
点击"DeepEE"按钮之后，这个按钮要消失呀
这次的现象是：以前那个DeepEE的按钮消失了，又出来个新的。
第5次对话
加一个判断，当我点击按钮"DeepEE"时候，mouseup得时候就不要在出来新的"DeepEE"按钮了
现在的现象是：当我点击了"DeepEE"按钮，当前的"Deep EE"按钮小时，但是又出来了一个"DeepEE"按钮
前端页面效果都完成了，我要增加模型模块了。
第6次对话
bash
把"你好"这两个字换成一个大模型的function调用，需要出入参数是：当前选择的这个文本和所在的文本段落文本这次对话我只加了function，调试完成之后，我下一步就开始增加真正的模型调用了。
第7次对话
vbnet
我的调用方式是这样的，你把这个流式输出的方式集成进去：
curl https://api.deepseek.com/chat/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer sk-3d7a9fxxx" \
-d '{
"model": "deepseek-chat",
"messages": [
{"role": "system", "content": "You are a helpful assistant."},
{"role": "user", "content": "Hello!"}
],
"stream": false
}'调试完成，我要把api的key做成可以配置的
第8次对话
vbnet
sk-3d7a9fxxx 这个DeepSeek的key需要在设置此插件的时候进行配置功能都完成了，我要开始调试提示语了。
第9次对话
perl
system的提示语替换成：
你是个英语老师，深入讲解选择部分的文本在上下文中的解释，从三个方面解释：
1.选择部分的内容是词组吗
2.它的原本含义是什么，在句子中我怎么理解它
3.这句话怎么翻译
输出格式为文本输出第10次对话
bash
user的提示语换成：
<select>
${selectedText}
</select>
<context>
${contextText}
</context>我测试的时候发现：模型输出的格式没有显示。
第11次对话
弹出来的小窗口显示模型的输出时，你把我的文本格式弄没了，你改一下
同步一步步的调试与改进，咱们的代码写完了。 这里，每一次对话返回的代码我都直接进行应用确认，没有写一行前端代码。
写在最后的思考
AI Coding不是说让AI自动帮你编写程序，啥也不用你干了。而是更需要你学习了。
起码：你要看懂程序
对话中第3次对话：
点击""deepEE"按钮的时间与"mouseup"冲突了
如果不知道程序设计中的"事件的监听器"，也就不会观察到这个问题现象了，也无法提出这个问题了。
对话中的第7次对话：
vbnet
我的调用方式是这样的，你把这个流式输出的方式集成进去：
curl https://api.deepseek.com/chat/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer sk-3d7a9fxxx" \
-d '{
"model": "deepseek-chat",
"messages": [
{"role": "system", "content": "You are a helpful assistant."},
{"role": "user", "content": "Hello!"}
],
"stream": false
}'如果不清楚curl调用协议与js的调用协议都是HTTP协议，就无法知道模型可以自动帮我们把curl转化成js的调用并且结成在程序中
代替程序员？
AI Coding会帮你写代码，但是写出的代码是你的认知高度。
你无法要求一个不懂设计模型的程序员写出一个可扩展的代码，也无法要求一个不懂TCP协议的程序员写一套符合TCP规范的网络协议。
也许AI真的能写出来可扩展的代码，但是你依然是不可能用上的，因为你的认知标准中就无法来确定它是对的还是错的。
所以未来的的AI可以帮你写程序，前提是你要先去学习。要知道如何解决问题、判断什么是对的什么是错的。
更具体的来讲就是：以后要会看代码，不用太会写代码了。
讲真：如果不好好学习，甚至都没有给cursor提问的机会了。
（文章都属于原创，来自"雷哥AI工程化"。 如果对你有帮助，帮我点赞、转发。这将是我最大的动力。万分感谢！！）
[1]# Sam Altman 和 MIT 校长的对话：The Future of AI（2024.5）zhuanlan.zhihu.com/p/702581752 [2]# 啊！这就是为什么不要微调！:mp.weixin.qq.com/s/ekxd2VXoe...