这篇文章来自于我的博客网站项目，因为我没有任何的前端代码基础，但是原博客的项目过于简单，于是想给网站增加一些 社媒链接以及其他的模块，于是就寻求ChatGPT的帮助，一开始是用ChatGPT3.5的帮助下，但是项目到了一些复杂且连续的场景下，就无法进行，于是升级成ChatGPT4让前端项目顺利推进，升级ChatGPT4相关教程在此：
保姆级开通OpenAI API和ChatGPT Plus教程（macOS版）
前期准备
需要准备ChatGPT4和三个插件（Browserop，Codeulator，AskTheCode），以及Visual Studio Code和项目文件，下面详细介绍一下三个插件的用途和安装
插件安装
点击GPT-4再点击Plugin store
搜索插件再安装即可，还有很多的其他插件可以用，按需即可
插件用途
Browserop
Browserop主要是用于浏览网页，因为ChatGPT4的能力虽然很强，但是有时候的解决方案不如网上有些大佬的解决方案，这个时候你如果不满意GPT4给出的结果，它可以进行联网搜索结果，整合结果，跟你的问题结合，给出一个比较好的解决方案
Codeulator
Codeulator主要是阅读本地项目文件以及获得对 Visual Studio 和VS Code 项目中文件的读/写访问权限。
但是由于未知原因，无法在本地进行修改。后续找到了另外的解决方案：
炸裂级的开源OpenAI代码解释器:Open Interpreter
AskYourCode
AskYourCode是可以直接访问GitHub上的项目文件并给出解决方案，可以在Codeulator和Browserop都没有更好的解决方案时，AskYourCode这个时候就能再给出不同的解决方案
在使用的过程中，三个插件的使用时由GPT4决定的，它会根据实际情况智能分析问题，并智能使用合适的插件去使用以便更好的帮助用户解决问题，插件和ChatGPT4都准备好，如果不知道怎么把代码安装到本地，可以看这篇文章：
如何部署一个基于Notion的博客网站AI辅助项目推进流程
确定一个目标
首先得知道前端项目的目标，我在刚建成这个网站的时候，左边有GitHub，Twitter，linkedin图标，但是我是面向国内的读者，所以就只留下了GitHub，需要增加其他的几个国内的社媒图标在如下图红圈所示，例如：知乎，抖音，哔哩哔哩。所以要增加其他几个社媒的图标。
这个时候我就去看项目文件，了解修改哪些代码文件能达到最终的目标，看代码文件对于我这个零基础的代码小白而言是比较难的，这个时候，GPT4就得出马了
与GPT4互动理解代码
聊天记录如下：
有几点沟通过程中需要注意
- 需求明确，用词要精准，不要模凌两可。
- 先给出明确的需求，再把过程拆解，一步步引导GPT4给出详细解决方案，如果不会拆解目标，先给出需求，让GPT4拆解目标，再引导。
- 太长的对话有时候会让GPT4偏离最初的需求，需要重新引导
- 不同的需求出现在GPT4的同一个对话框里，会使它迷惑，给出的答案会不明确到底哪个才是你的主要需求。最好的方法是新开一个对话框，保持目标的一致性。