共计 5743 个字符，预计需要花费 15 分钟才能阅读完成。
腾小云导读
随着 AI 技术的日益倒退，前端开发模式和提效工具也在一直地变动。作为一名前端工程师，如何应答 AI 带来的挑战和时机？在这篇文章中，作者将介绍什么是 AIGC，并深入探讨 AI 在低代码平台的利用。心愿开发者通过本文对前端开发的提效和 AI 在低代码平台的利用有更多的意识。
目录
1 什么是 AIGC
1.1 文字
2.2 图片
2.3 音乐 + 视频
2 AI + 前端
2.1 前端提效现状
2.2 AI 在低代码平台的利用
3 总结
01、什么是 AIGC
AIGC 即 AI Generated Content，是指利用人工智能技术来生成内容，它被认为是继 PGC、UGC 之后的新型内容创作形式。近两年 AIGC 倒退速度惊人，迭代速度更是出现指数级暴发。
从 AI 模型性能上辨别，目前 AIGC 可分为 文字、图片、音乐和视频 的生成。
1.1 文字
文字模型景象级利用当属 OpenAI 的 ChatGPT。聊天、创作故事、写代码、写诗、翻译等等，你能设想到的与文字相干的内容它都能做。
案例 1: 与 ChatGPT 聊天。
案例 2: 应用 ChatGPT 写代码，进步开发效率。
1.2 图片
AI 生成图片是 AIGC 畛域倒退最快的赛道。
2022 年初，Disco Diffusion 横空出世引发了第一波 AIGC 爆点，然而画面不够清晰，作图速度慢。同年 7 月份 Midjourney 凋谢公测，应用 Discord 端作画，1 分钟之内能够同时出 4 张图。8 月份，Stable Diffusion 正式公布，作图速度缩短至 10 秒之内。
| AI 绘画工具 | 绘画格调 | 公布工夫 | 平台 | 成图工夫 |
|---|---|---|---|---|
| Disco Diffusion | 偏差油画 | 22 年 1 月份 | Google Colab | 画面不够清晰，作图速度慢 |
| MidJourney | 重视细节的构建和表白 | 22 年 3 月份 | Discord | 均匀一分钟能同时出 4 张图 |
| Stable-Diffusion | 偏差写实 | 22 年 8 月份 | Google Colab | 作图工夫 10 秒内 |
现在 AI 作图畛域出现 Midjourney + Stable Diffusion 的双巨头局势。以下各类 AI 绘画工具绘画示例：
MidJourney，重视细节的构建和表白；
Stable-Diffusion，画风更偏写实；
Disco Diffusion，笔触显著，适宜油画格调；
1.3 音乐 + 视频
AI 生成音乐 + 视频是一个倒退绝对较慢的赛道，至今还没有景象级利用，市场上存在的产品均不太成熟。
AI 生成音乐的产品有 Riffusion，用户输出一段文字，模型依据内容输入一段音乐。
AI 生成视频的产品有 QuickVid，用户输出一段文字描述，模型会生成一段晦涩的视频，还能够抉择视频的格调和背景音乐等。
02、AI + 前端
因为 ChatGPT 的火爆出圈使得 LLM(Large Language Model, 大型语言模型)也被宽泛熟知。尽管利用 LLM 辅助编码还处于十分晚期阶段，但基于此模型的工具 Copilot X、Cursor、ChatGPT 等还是极大地震撼到了开发者。
AI 让程序员就业 的论调也甚嚣尘上。
作为一名前端工程师，咱们也不能再安于现状了。
如何利用好 AI 的能力去晋升前端团队的研发效率？
2.1 前端提效现状
要想利用好 AI 的能力晋升前端团队的研发效率，咱们先想一下，以后研发提效的形式都有什么？
- 单点提效
绝大部分前端团队都在不遗余力地去封装本人的工具库、UI 组件库、脚手架、构建工具、利用开发框架、低代码搭建平台等。
- 链路提效。
同工种提效的天花板清晰可见，很容易就会达到瓶颈。要想更进一步，必须要跳出本人所处角色的视角，横向寻求上下游间的买通，独特提效。
以前端为核心，与其余环节进行买通的话，有如下几种形式：
从上文咱们理解了现阶段已有的一些前端提效形式。
AI 如何给现有的提效工具赋能？
接下来咱们一起摸索如何在已有的低代码平台接入 AI 的能力让其效率倍增。
2.2 AI 在低代码平台的利用
大家能够带着这三个疑难浏览上面的文章。
| 如何解决现有低代码平台利用搭建和组件研发效率低的痛点？如何通过 “Prompt Engineering” 将聊天型 AIGC 转换为低代码平台的生产力？如何将 ChatGPT 集成到现有的低代码平台？ |
|---|
2.2.1 背景
低代码平台的底层逻辑有两个，一是晋升利用的开发效率，降低成本；二是促成人人开发，让非开发者也能疾速搭建利用。
但现有的低代码平台还是存在效率低的 痛点：
| · 利用搭建效率低。非开发者在搭建利用前须要相熟低代码平台的应用和各类组件的配置项。· 组件研发效率低。新的组件研发流程还是传统的产品出需要文档，开发出具体设计、编码实现。 |
|---|
如何解决现有低代码平台存在的利用搭建和组件研发效率低的痛点？
解决思路：
| 针对利用搭建效率低的痛点：让非开发者不需理解低代码平台的应用和组件的配置等，讲出需要，AI 辅助疾速搭建利用。针对组件研发效率低的痛点：AI 辅助需要文档到实现编码整个阶段的提效。 |
|---|
指标： 将现有的低代码平台降级为 “AI 驱动利用开发平台”，针对三类不同的应用人群进行赋能提效，实现平台全局 AI 驱动。
| 面向产品经理的需要形象：帮助产品将描述性的需要文档，转换成标准数据结构。面向开发者的辅助编码：作为程序员的开发助手，实现确定性功能函数编程。面向非开发者的利用搭建辅助：讲出需要，疾速搭建利用。 |
|---|
2.2.2 低代码 + AI 计划调研
基于以上的背景，咱们从 AI 辅助搭建、批改页面、辅助开发编程、辅助产品需要形象 等维度对市面上的 AI 低代码平台调研。
综上，目前市面上的 AI 低代码平台大部分都是依赖于 OpenAI 团队的 ChatGPT 凋谢接口，所以咱们也抉择基于 ChatGPT 凋谢接口降级现有的低代码平台。
2.2.3 实现成果演示
案例 1: 页面生成 & 布局能力。需要：页面分为三局部，顶部是题目“合金弹头首发”，两头是一张图片，底部是一个按钮，按钮文案是云游跳转。
视频可移步至腾讯云开发者公众号中查看
案例 2: 页面批改能力。需要：删除图片，题目的文案改为“明天首发”，按钮的文案改为“立刻试玩”，按钮色彩改为“红色”。
视频可移步至腾讯云开发者公众号中查看
案例 3: 产品需要形象 & 辅助编程能力。
2.2.4 具体实现
上文讲到咱们要基于 ChatGPT 的凋谢接口 将现有的低代码平台降级为 AI 驱动利用开发平台，即 AI 辅助搭建、批改页面、辅助开发编程、辅助产品需要形象。
但因为篇幅无限，下文次要会介绍如何实现讲出需要，AI 辅助疾速搭建和批改页面。
AI 辅助搭建和批改页面繁难流程图如下：
用户讲出需要，ChatGPT 将 自然语言形容的需要 转化为 低代码平台的页面 DSL，用户可通过 传统的利落拽形式 /AI 对话 对页面二次编辑。
那是如何通过 “Prompt Engineering” 将聊天型 AIGC 转换为低代码平台的生产力？
2.2.4.1 Prompt Engineering
ChatGPT 是一个通用型聊天机器，它能够答复任何问题，然而它的答复并不总是合乎咱们的预期。因而，咱们须要通过 Prompt Engineering 来提醒 AI 如何进行输入。
在 ChatGPT 中，提醒是由一组聊天音讯组成的，每个音讯都是由一个特定角色说的话，这些角色包含：
| user：用户角色，即咱们本人。assistant：助手角色，即 ChatGPT。system: 零碎角色，即 ChatGPT 的上下文，在这里咱们能够形容它在以后会话中表演的角色，并能够通过逻辑规定限定它的输入。 |
|---|
以下是用官网工具 Playground 发问的一个示例。
2.2.4.2 为 ChatGPT 制订表演角色
先从最根本的开始，首先咱们须要为 ChatGPT 制订表演的角色。
# SYSTEM
你是一个页面 JSON 翻译程序，你能够将人类自然语言形容的指令翻译成对应的页面 JSON
# USER 生成一个空页面这时，咱们能够看到 ChatGPT 给出后果，然而存在一些问题：
| 答复中有多余的介绍性语句。起因是咱们没有对 ChatGPT 的输入进行限定。每一次 Submit 都会返回不同的后果。起因是 ChatGPT 的 Temperature 参数默认是 0.7，Temperature 的数值越大 ChatGPT 的答复更加富裕创造性。反之在页面 JSON 翻译器这个场景里，咱们心愿它具备稳固的输入，因而咱们须要将其设置为 0。 |
|---|
2.2.4.3 增加第一个限定条件
咱们从新设计 Prompt，增加第一个限定条件，让其只输入页面 JSON。
# SYSTEM
你是一个页面 JSON 翻译程序，你能够将人类自然语言形容的指令翻译成对应的页面 JSON
1. 你只须要将页面 JSON 间接输入，而不须要对其进行任何的解释。# USER 生成一个空页面这时，咱们会发现，无论咱们 Submit 多少次，ChatGPT 都会 返回雷同的后果 ，并且 不再会有注解阐明。
但目前 ChatGPT 返回的 页面 JSON 是不能形容咱们的低代码页面 的，所以须要教会它咱们业务的页面 JSON 构造。
2.2.4.4 教会 ChatGPT 辨认页面 JSON
减少第二个限定条件，空页面的 JSON 构造。
# SYSTEM
你是一个页面 JSON 翻译程序，你能够将人类自然语言形容的指令翻译成对应的页面 JSON
1. 你只须要将页面 JSON 间接输入，而不须要对其进行任何的解释。2. 空页面的 JSON 为 {"id":1,"children":[{"id":"Page1","type":"page","name":"@tencent/nutty-components/NuttyPage","props":{},"style":{"width":"375px","height":"600px","backgroundColor":"#fff"},"actions":{},"children":[],"editor":{}}],"name":"My Project”}
# USER 生成一个空页面这时 ChatGPT 曾经学会了生成一个空页面的 JSON。
并且还能死记硬背，本人还偷偷学会了批改页面的背景色彩和给页面减少一个按钮组件（尽管按钮组件的 dsl 不肯定正确）。
通知 ChatGPT 更多形容页面 JSON 构造的信息。
要想 ChatGPT 生成齐全可用的页面 JSON，咱们须要通知 chatGPT 更多页面 JSON 形容的信息。
案例：通知 ChatGPT 页面 JSON 的一些属性形容和按钮组件的根底配置。
# SYSTEM
你是一个页面 JSON 翻译程序，你能够将人类自然语言形容的指令翻译成对应的页面 JSON
1. 你只须要将页面 JSON 间接输入，而不须要对其进行任何的解释。2. 空页面的 JSON 为 {"id":1,"children":[{"id":"Page1","type":"page","name":"@tencent/nutty-components/NuttyPage","props":{},"style":{"width":"375px","height":"600px","backgroundColor":"#fff"},"actions":{},"children":[],"editor":{}}],"name":"My Project”}。3. 页面 JSON 中的 id 为节点在以后节点树中的惟一标识，type 为节点类型，type 能够是 page 和 normal，page 代表页面节点且只能作为根节点。normal 代表一般节点且该节点不能蕴含子节点, 只能作为叶子节点。props 为节点属性，在渲染时会被间接作为对应组件的属性应用，style 为节点款式，在渲染时会转换为 CSS 增加到组件上，name 为节点所对应的组件名称。4. 按钮组件的 name 为 @tencent/nutty-components/NuttyButton，props 有 text 和 jumpUrl。# USER
生成一个空页面，空页面蕴含一个按钮，按钮的文案为去玩云游戏，跳转链接是 https://www.baidu.com/。按钮的宽为 158px，高为 40px，背景色彩是 rgba(255, 255, 255, 0.12)，圆角是 8px。当初 ChatGPT 曾经学会依据咱们的形容生成一个蕴含按钮的页面 JSON 了，咱们将页面的 JSON 复制到低代码平台，完满还原。
如果想要 ChatGPT 能辨认更多组件，咱们只须要给 ChatGPT 喂更多形容组件的数据。tip: 将限定上下文翻译为英文，ChatGPT 辨认更精准。
️ 如何将 ChatGPT 集成到现有的低代码平台？
2.2.4.5 ChatGPT 集成到低代码平台
现有的低代码平台 Rebone 架构图如下：
集成 ChatGPT 后的残缺流程图如下：
次要会波及两大模块的变更：
新增基于 OpenAI SDK 封装的 Node 服务。
Prompt 的生成器。因为各类组件的形容数据都是存在文件中的，所以须要 Prompt 的生成器将文件加载为 system messages (零碎上下文)。
翻译器。将用户的输出和 system messages 转化为 Prompt Messages，发送给 OpenAI，最初将页面 DSL 返回。
低代码平台的编辑器适配。
承受用户的自然语言需要的输出，申请 ChatLowCode 服务，获取页面 DSL。
新旧页面 DSL Diff，差异化更新编辑器画布中的页面。
03、总结
下面次要介绍了 AIGC 的概念 以及 AI 在低代码平台利用。能够发现，AI 技术在前端畛域的利用，不仅可能帮忙开发者缩小重复性工作，晋升开发效率，还进步了用户的体验。
随着 AI 技术的日益倒退，能够预感将来绝大部分的编码工作会被 AI 代替。当大家技术水平旗鼓相当时，更懂业务、更会利用 AI 的能力 会成为咱们的外围竞争力。
本篇文章的分享到这里就完结了，如果喜爱的话无妨点个赞吧。
参考文献：
用 ChatGPT 开发一个能听懂人话的命令行工具。
预测 2024 年之后的前端开发模式。
ChatGPT+ 低代码：5 秒实现 AI 主动建模与图形化编程。
奥哲徐平俊：低代码 +AI，迈向企业数智时代。
生成式 AI 颠覆前端，你该何去何从？
聊聊中后盾产研一体化：引子。
手把手教你用 AIGC 赋能 Web3 我的项目。
来自腾讯外围设计团队的分享：使用 AIGC 人工智能生产内容。
-End-
原创作者|yerui
技术责编|腾讯 MoonWebTeam
各位开发者还有其余应用低代码开发的教训吗？欢送在腾讯云开发者公众号评论区探讨。咱们将选取 1 则最有意义的分享，送出腾讯云开发者 - 手段垫 1 个（见下图）。6 月 19 日中午 12 点开奖。
