人工智能时代，前端开发何去何从？

人工智能时代，前端开发何去何从？

人工智能时代，前端开发会被马上取代吗？要学习 GPT 吗？做为一个做研发多年，从后端到前端都做过，同时也管理研发，做到过独角兽 CTO 的人来看。人工智能时代到来，如果我们用 ChatGPT来做为标志，那现在确实应该有了翻天覆地的变化了。因为 ChatGTP 其实已经开始改变我们的工作与生活了，尽管ChatGPT/GPT4并不能马上取代我们，但它能够在很多方面提高 我们的效率。如果不很快学会使用 GPT 类的工具来提升我们的工作，那可能在可见的将来失去我们的工作哦。

接下来，还是看一下前端的各种工作，如何配合 GPT 进行相关工作吧。可能这样分的 级别有点儿细，但是我觉得还是挺有意思 的，而参考下面的分类与工作指南，你应该会持续是一个合格以上水准的前端开发。

UI/UX 设计：

尽管 UI 与 UX 是经常被合在一起来谈论的，但是它们确实是不同的东西啊。

UI 设计（用户界面设计）：关注产品的外观和布局。UI 设计师确保每个页面或产品界面对用户来说都是视觉上吸引人的和一致的。也是过去它最开始被大家认可的价值。

UX 设计（用户体验设计）：关注用户与产品的互动。UX 设计师确保产品流程直观并满足用户的需求。这个是交互理论发展了好长时间后，才被大家认可的东西。

但是我建议无论是 UI还是 UX 都考虑用一下 Midjourney 或者 SD 一类的工具，尽可能的用它们去仿真一下相关的设计 ，这样的好处当然是拓展一下自己的思路了。毕竟日复一日的重复大部分类似的项目，你会失去灵魂的。但是 AI 不会，AI 没有灵魂；但是 AI 可以生成有灵魂的东西。

HTML/CSS 开发：

HTML 开发：使用 HTML（超文本标记语言）创建网页的结构。

CSS 开发：使用 CSS（层叠样式表）为网页添加样式，如颜色、字体和布局。

现在已经没有这种单纯的类似工作了吧。如果有，那你一定是穿越回去了，还是回到现在的好。不过这些我测试过，基本上都可以 非常完美的被GPT 完成。比如下面这样的 Prompts

用 HTML 与 CSS 完成一个 Login 页面， 按钮放在中间靠左。把按钮放到右边

差不多你能精确的描述，那你就能得到所有的 HTML/CSS的结果文件 。

JavaScript 开发：

原生 JavaScript：不依赖任何库或框架的纯 JavaScript 开发。这个相信只有开发框架和库的人才会用到。我们可能不需要讨论它，但是 GPT 是懂的。

框架和库：如 React、Vue、Angular 等，这些框架和库提供了更高级的功能和组件，使开发更加高效。如果你熟悉一个库，我建议选 React 或者 Vue。

在使用 GPT 这方面，我建议你直接了当的表达你的观点，一切的开发都用 GPT 开始，然后用它检查。下面是一些参考的 Prompts

完成一个 Login 页面，用 VUE2与 ElementUI增加一个 Home 页面，布局如下 最上面是一个导航页面

2.中间区域显示一些数据的分析。要求有一个表格，一个 Bar 图表，一个 Histgram 图表。

如果你熟练的使用它们，可以大大增加你的效率。

都看到这儿了，我先给个建议吧：你努力学习与应用人工智能。时代变革了，学习什么的，最重要的就是学 AI。工作什么的，最重要的就是用 AI。 而学习 AI，最好的方式应该是视频学习，类似 “知学堂推出的《程序员的AI大模型进阶之旅》”， 其实就是一份非常有意思的 AI 大模型的介绍性入门课程，简单看看，你可能马上就对大模型了解了，而不是要大量阅读。这也是个非常有效的学习方法。还有哦，加小助手的微信，好像有惊喜呢。

你要不要试一下

响应式和移动前端开发：

这可能是前端工作里最麻烦，也最让你感觉花时间 的。主要使用技术如 CSS 媒体查询、Bootstrap 或其他框架来确保网站在各种设备和屏幕尺寸上都能正常工作。

同时还要保证性能优化，提高网页的加载速度和运行效率，这可能包括减少代码、优化图像或使用特定的工具和技术来提高性能。

如果你不是一个非常有经验的前端开发工程师，那我更建议你使用 GPT。

Prompts

下面这段代码如何适配到显示分辨率为 1920*1080， 1440*768， 2K，4K 的显示屏幕？下面这段代码如何适合 PC 浏览器与手机浏览器？

前端工具和构建工具：

在前端开发中，你可能会经常用 npm 等类似的工具创建一个项目，但是你有时间去了解这些项目文件的功能吗？如果出了问题后，你知道 怎么修改它们吗？

像 Webpack、Gulp、Babel 等，这些工具帮助开发者自动化前端开发的各种任务，如编译、压缩和优化代码。但是它们的文件都是干嘛的呢？

我们来看看：

前端项目里的 package.json, package-lock.json 文件 是干什么的？ build 文件夹是做什么的？前端 项目里的 build 文件夹里的文件都有什么功能 ？

你看，这样简单的你就把自己的知识完善了吧。

前端测试：

这是一个对于前端来讲很重要的工作，但是很遗憾，能认真执行它的人、项目、公司并不多。因为太难操作了。大量的非业务代码，大量的琐碎的工作都让人很难执行。使用工具和框架（如 Jest、Mocha、Chai 等）来测试前端代码，确保其在各种浏览器和设备上都能正常工作，这是个理论问题。而有了 GPT，它就变成了实际的工作了。

以下面的代码 增加用 Jest、Mocha 完成的单元测试。用。。。写出下面代码的测试用例。

前端安全：

专注于前端的安全性，如防止跨站脚本攻击（XSS）和其他前端相关的安全威胁。这个是每个前端都特别要注意的。但是又真的能注意吗？

Prompts

检查一下下面的代码是否存在安全性的问题。这个代码的安全性问题怎么解决？

你看，尽管 GPT 类的 AI 还没办法马上完成老板的期望：“给我一个自己的谷歌，让我搞死那个百什么的”。但是你能让自己的加班时间从 996，变成 995，是不是这样呢？

用好 GPT，到那开发都不怕。