我会看很多英文文章，但是不认识的单词或词组的使用总在困扰我。
尤其是一个词放在句子中里，却有不同的意思。
我想可以做这样一个功能：在浏览网页时，当选中文本个单词/词组后，下边会出现一个按钮，点击之后，就把关于这个英语单词/词组的解释都发给我。
经过2个小时的AI Coding，效果如下：
选中单词后，出现了“DeepEE”按钮（插件的名字是DeepEE- Deep English Explain），当点击后，所有关于这个英文的解释就都呈现出来了：
项目源码我放到github了：https://github.com/astordu/deepee-chrome
思路和设计
词组 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呢，所以我直接把所有需求都给它描述好了，期望它一次就帮我搞定：
我要做一个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次对话
把“你好”这两个字换成一个大模型的function调用，需要出入参数是：当前选择的这个文本和所在的文本段落文本
这次对话我只加了function，调试完成之后，我下一步就开始增加真正的模型调用了。
第7次对话
我的调用方式是这样的，你把这个流式输出的方式集成进去：
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次对话
sk-3d7a9fxxx 这个DeepSeek的key需要在设置此插件的时候进行配置
功能都完成了，我要开始调试提示语了。
第9次对话
system的提示语替换成：
你是个英语老师，深入讲解选择部分的文本在上下文中的解释，从三个方面解释：
1.选择部分的内容是词组吗
2.它的原本含义是什么，在句子中我怎么理解它
3.这句话怎么翻译
输出格式为文本输出
第10次对话
user的提示语换成：
<select>
${selectedText}
</select>
<context>
${contextText}
</context>
我测试的时候发现：模型输出的格式没有显示。
第11次对话
弹出来的小窗口显示模型的输出时，你把我的文本格式弄没了，你改一下
同步一步步的调试与改进，咱们的代码写完了。
这里，每一次对话返回的代码我都直接进行应用确认，没有写一行前端代码。
写在最后的思考
AI Coding不是说让AI自动帮你编写程序，啥也不用你干了。而是更需要你学习了。
起码：你要看懂程序
对话中第3次对话：
点击“”deepEE“按钮的时间与”mouseup“冲突了
如果不知道程序设计中的“事件的监听器”，也就不会观察到这个问题现象了，也无法提出这个问题了。
对话中的第7次对话：
我的调用方式是这样的，你把这个流式输出的方式集成进去：
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）https://zhuanlan.zhihu.com/p/702581752
[2]# 啊！这就是为什么不要微调！:https://mp.weixin.qq.com/s/ekxd2VXoeCRbw2L-I7Ym6g