AI背景下前端开发的未来：AI与人类在设计系统扮演的角色

编者按：ChatGPT的爆发让几乎所有的白领都高呼“狼来了”。《大西洋月刊》甚至喊出了 AI 将干掉所有白领工作这样危言耸听的口号。但面对技术变革，我们不应该当恐慌的勒得分子，而应该认真分析如何与狼共舞，利用好 AI 工具，把更多的关注放在高层次、创造性的工作上。唯有这样才不会被淘汰，反而能变得更加高效、更有创造力。本文分析了 AI 背景下前端开发的未来，所有其他白领工作也都应该好好思考一下自己的未来。文章来自编译。

近年来，编程世界一直在快速发展，把 AI 集成到开发过程中是其中最令人兴奋的进展之一。ChatGPT 等 AI 工具使得将编程工作外包出去比以往任何时候都容易，这对前端开发的未来具有重要意义。因此，探索 AI 会对编程领域，尤其是前端工程造成怎样的影响就显得至关重要。

我们最近深入研究了 AI 对工程的影响，并讨论了工程领域这一行的未来，我们尤其关注前端开发这一块。在这次讨论中，我将分享我对未来几年趋势的看法。其实我已经思考了很长一段时间，本文是相关想法的进一步扩展。

随着我们的编程在继续采用各种 AI 工具，我们必须考虑许多问题。比方说，这会如何影响我们的工作方式？它会改变前端开发的本质吗？这对企业、开发者以及最终用户有何影响？通过 AI 前端开发者的工作会如何发生转变？这些是我们在深入研究 AI 前端开发的未来时要探讨的一些关键问题。

AI 的 S 型曲线

在标题为“我试用了一下 AI。它吓到我了。”的那段视频里，Tom Scott 阐述了他对未来几年 AI 潜在影响的看法。他表示，我们可能正处在 AI 的 S 形曲线的起点，这可能会像 Napster 在 2000 年代初期颠覆音乐行业一样扰乱各个行业。它让 CD 变得过时，并为我们今天所熟知的音乐流媒体开辟了道路。人工智能的颠覆有可能会显著改变我们工作、生活以及与技术互动的方式。也许甚至还会导致部分工程工作变得过时。

随着人工智能工具变得越来越普遍，可以预期开发的自动化水平会越来越高。包括创建页面、组件开发等任务的自动化。不过，必须注意的是，在工程领域工作的每个人的角色都将是这些工具输出的看门人。工程师需要负责充分利用这些工具并充分发挥其潜力。

随着自动化程度的提高，工程师工作关注的重点可能会放到更具战略性的地方，会更加突出解决问题以及决策制定。因此，工程师需要开发新技能，从而有效地与 AI 工具协作，并将它们整合到自己的工作流程当中，以更快地创造价值。尽管要做出这种改变看起来令人望而生畏，但与 AI 工具携手工作的潜在好处十分巨大，并可能会让前端开发领域取得重大进展。

AI 是人工智能的意思，是指可以执行类似人类任务的计算机系统，比方说学习、解决问题、模式识别、决策制定以及语言理解等。

——感谢 ChatGPT 给 AI 做出的定义

人工智能的三个阶段

人工智能本身是多种工具和工作方法的统称。一般来说，人工智能大致分为三个阶段：

狭义人工智能 (Artificial Narrow Intelligence ，ANI)：国际象棋程序可以击败所有的人类智能，想想看 Siri以及Alexa——现在已经随时可用。

通用人工智能 (Artificial General Intelligence ，AGI)：这个阶段的AI ，其表现可与人类相媲美：它们能流利地交谈、泡咖啡、找到一份工作并做得很好。我们还没有走到那一步，科学家们认为我们还需要几十年的时间才能完全达到那个水平，也许是 2070 年。

人工超智能（Artificial Super Intelligence ，ASI）：到了这个阶段，人工智能已经学会自我学习，并会变得比人类更聪明，这是科幻小说的场景——在遥远的未来。

在之前做的关于 ChatGPT 以及 AI 工具的一集视频里，我和Peter、Vanessa 讨论出来 AI 工具的一个技术栈，这个技术栈有能力做到：

优化输入（重新上下文化）：这一层涉及到要根据模型以及对给定的上下文请求提示优化输入。比方说，如果用户提供了很长一段文本，则可以用 AI 工具对其进行总结并提取关键信息。另一个例子是将文本翻译成另一种语言或将业绩列表转换为文本。对于将重复和耗时的任务进行自动化来说，这一层很有用，它可以让工程师专注于更复杂的挑战。

背诵信息（研究）：这一层涉及到背诵模型受训的信息并将其放入到给定的上下文之中。比方说对历史事件的摘录，并将其与另一个事件进行比较。用更加技术话的话来说，这一层可以让 AI 工具从所学到的内容当中找到类似案例，并将它们放入上下文之中。比方说，人工智能工具可以帮助工程师根据给定的输入编写单元测试，方法是查找之前测试过的类似用例。另一个例子是通过搜索 AI 模型学习到的相似模式，来获得解析电子邮件地址的 RegEx（正则）表达式。

数据汇总（综合）：这一层涉及到将多个数据点汇聚起来并形成新的东西。比方说，根据图像的风格流派生成一首音乐歌曲——我们知道如何分析图像属于什么流派，创作出一首歌曲可能的，但至少目前把它们组合在一起是比较困难的。这一层对于生成创意输出特别有用， AI 可以通过提出新想法以及对想法进行组合来帮助增强人类创造力。不过，这一层的挑战性也是最大的，因为它需要对不同数据类型以及如何有效组合这些数据类型有很深的了解。

接下来，我们就看看如何将这三层应用到前端开发上。

从设计到实现到到用户

就目前而言，不管是网站还是应用，其基础几乎都是某种形式的设计系统，至少描述了一个主题以及可重用的组件。我们先把焦点放在用 AI 开发设计系统上。

从一个新的设计系统开始，通过检查现有的设计系统及其构造，可以获得优化这套系统的见解与建议。

通过利用综合层汇聚多个数据点并生成增强版，可以利用 AI 工具生成一套设计系统。可以给一个潜在的工具提供各种设计元素的数据，比方说配色方案、排版以及组件交互，以及现有设计系统的示例。然后，AI 工具可以利用该输入生成一个新的、一致的、符合特定要求与约束的设计系统。后面还会进一步讨论。

可以利用工具根据请求的提示重新设置输入的上下文，比方说根据不同的上下文生成按钮的变体，并确保输出是根据所用的特定上下文定制的。

因此，人工智能对于帮助运用设计系统以及参与设计系统资产创建来说有很大的潜力。但是在这条道路上可能会有不少的坑我们还不知道。

——Brad Frost，人工智能时代的设计系统

搭建一个设计系统

主题

搭建设计系统并不复杂。只需问一下 ChatGPT。 Florian 就试过 ChatGPT 来生成设计系统。我试过用这个简单的请求给一个跑鞋网站搭建一套设计系统，还让它给我提供调色板和字体建议。输出非常有用。

简单的提示即可让AI帮设计出一套设计系统

组件

把组件作为设计系统的基础，通过添加一些设计来创建初始的组件，或者更简单的话，可以用 Midjourney 之类的工具来生成这些组件，这一步没有太大的麻烦。

虽然我已经成功地给按钮组件生成了一个像样的输出，但这只是经验、设计正确的命令以及让机器获得正确数据输入的问题。不妨假设，在第一步里，你会基于一堆现有的设计系统（可以通过 Design Systems Repo 或类似的方式找到这些设计系统）来训练你的模型。

然后再根据 ChatGPT 用该工具生成的样式输入制作初始的组件，比方说按钮，一直完善到你想要的水平。现在，你就可以把这个按钮作为下一个请求，比方说卡片组件的输入了。这样一来，生成任何的后续组件始终都将符合你的设计风格。这些脏活、累活就可以交给人工智能来干了。

Uizard 这款工具可自动执行基于模型生成设计和组件的整个过程。Tony Beltramelli 曾经讨论过为 Uizard 提供支撑，并让这款工具能够将图像转换为可编辑设计的底层人工智能技术。

从设计到代码

为了进一步简化前端开发过程，工程师可以用 Fronty 等工具直接将设计生成代码。这个 AI 工具可以基于模型和代码创建网站，无不需要工程师手工编写每一行代码。

代码生成后，工程师可以把注意力放在将代码分成可管理的组件，确保每一块都针对性能进行了优化并满足项目的特定需求。通过用 AI 自动执行代码生成过程，工程师可以节省时间并聚焦在开发更复杂的事情上，最终实现更快、更高效的项目交付。

比方说，可以同时给多个平台生成代码。一个工具能够提供Swift UI 组件形式的输出，同时也能针对 React 或其他web库提供输出。

生成网页

在网页上，你希望展示一些匹配的数据。新的网页类型会根据数据自动生成，我们在今天的由推荐引擎完成的个性化体验就可以看到这一点，都是完全自动生成的。但这个还可以提升到新的水平，AI 可以根据你提供的输入数据，比方说用户信号（分析）以及你的业务 KPI，生成具有动态页面类型的页面，而且可以不受限制。

在人工智能辅助下工程师的角色

人机共舞的要点如下：

协作：与 AI 一起工作

判断：控制AI输出

批判性思维：专注于高层次的任务

定制解决方案：集成 AI

道德责任：确保人工智能的使用合乎道德

接下来我们仔细解释一下。

随着人工智能日益融入到前端开发之中，工程师这个角色关注的重点将转向协作与战略。工程师需要熟练地与 AI 写作，能够设计正确的提示，从而生成所需的输出。不过，必须注意的是，机器生成输出的好坏取决于它之前所消化的数据。因此，在控制这些工具的输出方面，工程师还将发挥关键作用，确保生成的输出适合其使用的环境，并有助于实现预期的结果。此外，作为一名工程师，你的角色将从了解特定的前端框架变成了解特定的机器学习工具。

比方说，不妨思考一下替设计系统生成的组件。工程师需要评估一个按钮的必要变体， AI 工具在生成的时候需要考虑到特定的上下文。工程师还需要评估生成的变体对于所处的上下文是否有用，并确保按钮触发的操作正确映射到与它们进行的交互。从本质上来说，工程师扮演的是AI 工具与最终产品之间的关键桥梁，利用 AI 的力量，同时运用他们的专业知识和判断力来确保最佳结果。

除了要与 AI 工具协作，并且要控制它们生成的输出以外，未来的工程师可能还要把更多的时间花在需要批判性思维与决策的更高层次任务上。随着那些枯燥繁重的重复性任务被自动化，工程师有机会专注于更复杂的挑战，并利用他们的技能和专业知识来解决更重要的问题。其结果将是用户体验设计师与前端工程师的角色关系会更加紧密。

这可能包括设计复杂系统、评估和选择最合适的工具和技术，以及优化性能和可扩展性等任务。工程师还需要了解如何将 AI 集成到这些系统之中，评估不同 AI 工具和技术的潜在影响和优势，并开发定制的解决方案，以满足特定需求。

此外，在确保以合乎道德和负责任的方式使用人工智能工具方面，工程师也将发挥重要作用。他们需要意识到人工智能工具可能会带来的潜在偏见，并努力减少这些偏见。他们还需要确保人工智能工具的使用方式符合道德标准和最佳实践。

总的来说，未来的工程师需要具备高技能，需要多才多艺，需要适应性强，能够与人工智能工具协同工作，同时呈现他们独特的专业知识和观点。唯有这样，才可以推动创新、提高生产力，同时建立起更加有效和高效的前端开发工作流。

为这个未来而奋斗的理由

为什么要为一个人工智能深入集成到前端开发的未来而努力？我们可以列举几个令人信服的理由。

首先，它可以显著提高生产力和效率。通过将枯燥重复的任务自动化，工程师就可以专注于更复杂的挑战，并利用他们的技能和专业知识来解决更重要的问题。这样开发周期可以更快、进入市场的时间可以更短，并最终形成更具竞争力和创新性的行业。

从主题生成到组件化再到代码乃至于多平台

我们再从前面的多平台那个例子说起：假设你想搭建一个可以跨多个平台使用的设计系统，比如可同时 web、iOS 和 Android。按照目前，你得针对每个平台多次编写代码。但是，利用人工智能工具的话，这些调整就可以自动完成。通过用一种语言搭建一套设计系统，工程师可以导出代码并让机器处理用不同语言将其移植到不同平台的任务。这可以节省大量时间和成本，让工程师能够专注于更复杂的挑战和创新。

其次，它可以帮助解决前端开发行业技能人才短缺的问题。借助人工智能工具来完成一些繁重的工作，工程师可以去接受培训，提高工作效率和效能，从而让他们能够应对更复杂的挑战，养成更广泛的技能。

第三，它可以帮助减少前端开发中出现错误和不一致的可能性。通过将生成代码和组件等任务这段话，人工智能工具可以减少人为错误的可能性，并确保开发工作的一致性和高质量。

最后，将 AI 集成到前端开发当中有助于推动创新并改善用户体验。通过利用自然语言处理和计算机视觉等人工智能技术，工程师可以开发出更智能的、响应性的与个性化的用户界面，更好地满足用户的需求和偏好。

总的来说，人工智能进一步融入到前端开发的未来可以带来显著好处，提高生产力，解决人才短缺问题，提高质量和一致性，并推动行业创新。

超越前端开发

除了用 Fronty 等 AI 工具实现从设计到代码的自动化以外，前端和后端工程中运用AI还有很多其他的可能性。比方说，ChatGPT 可用来将后端任务自动化，比方说生成系统图、优化数据库设计，创建服务网格等。在人工智能的帮助下，工程师可以快速轻松地生成复杂的基础架构图及数据库设计，从而在开发过程中节省时间和精力。此外，人工智能还可用于自动化测试和部署等任务，令工程师能够专注于更高层次的问题解决和创新。比方说 GitHub Copilot 就能帮上大忙。它“利用了 OpenAI Codex 可以实时地在编辑器中为你建议代码和整个功能。”

问机器，它会给你答案。

那么这对于不久的将来意味着什么呢？

前端开发的未来发展迅速，令人兴奋，人工智能技术有望对行业产生重大影响。正如 Brad Frost 在他前面提到的文章《AI 时代的设计系统》里面所指出的那样，已经有一些例子说明 AI 如何自动化了这一工作的各个方面，比方说给图像删除背景。随着人工智能技术的不断进步，越来越多的前端工程流程可能都会被自动化。这不仅会带来更高的效率，还会改变前端开发人员所需的技能组合。因此，掌握了最新技术并不断发展技能的开发人员才最有可能在这个行业取得成功。

很明显，AI 在前端开发的未来将发挥重要作用，但仍有许多东西有待发现和探索。可以预期，未来几年会看到各种新工具和技术的出现，其中很多都将建立在 AI 原则之上。比方说，ChatGPT 和 Midjourney 只是人工智能如何用来简化前端开发流程的两个例子。随着越来越多的开发人员探索 AI 的潜力并将其纳入到自己的工作流，我们无疑将看到一系列会继续塑造行业的新创新。

不过，重要的是要注意前端开发里面人的因素永远都不会被机器完全取代。虽然人工智能可以自动执行许多任务，但人类设计师和开发者的创造力和独创性是它复制不了的。因此，对于开发者来说，拥抱新技术同时忠于自己独特的创意愿景就显得非常重要。

总之，前端开发的未来肯定令人兴奋，会充满创新的机会。许多其他角色也一样。我们不妨拭目以待，看看我们会以多快的速度迈向这个即将到来的未来。

译者：boxi。