AIGC时代 低代码+AI

一、前言

随着人工智能技术的不断进步，前端开发模式和提效工具也在不断地变化。作为一名前端工程师，如何应对AI带来的挑战和机遇？在这篇文章中，我们将介绍什么是AIGC，并深入探讨AI在低代码平台的应用。希望读者通过本文对前端开发的提效和AI在低代码平台的应用有更多的认识。

二、什么是AIGC

AIGC（即AI Generated Content）是指利用人工智能技术来生成内容的一种新型内容创作方式，被认为是继PGC（专业生产）和UGC（用户生产）之后的第三种内容创作形式。近两年来，AIGC的发展速度惊人，迭代速度更是呈现指数级爆发。

互联网形态Web 1→ Web 2 → Web ? 各类内容生产模式

1. **Web 1**：简单信息交互

2. **Web 2**：用户参与内容创建

3. **Web ?**：用户与AI互动创作的内容

AIGC的主要特点：

- 内容质量高

- 内容丰富度高

- 生产效率高

从人工智能模型的功能上区分，目前AIGC可以分为以下几种类型：

1. **文字**

- 重要现象级应用：OpenAI的ChatGPT。聊天、创作故事、写代码、写诗、翻译等，你能想象到的内容它都能做。

2. **图片**：例如生成艺术作品或商品设计图

3. **音乐**：如旋律和歌词的创作

4. **视频**：包括短片制作和特效合成

三、AIGC与低代码平台的应用

在低代码开发工具中，AI技术已经逐渐融入到各个功能模块。例如：

- **智能设计组件**：利用AI自动生成或优化UI元素，提高设计效率。

- **自动化脚本生成器**：基于AI的算法生成简洁易用的自动执行流程，减少重复工作量。

- **数据分析模型**：通过AI分析数据模式和趋势，为决策提供依据。

四、结论

随着人工智能技术在低代码平台上的应用日益广泛，前端开发将面临更多挑战与机遇。面对未来，我们不仅要掌握新技术，还要不断学习新的技能，以适应这个快速变化的时代。

eg2: 使用 ChatGPT 写代码，提高开发效率。

AI生成图片是AIGC领域发展最快的赛道之一。从2022年初，Disco Diffusion横空出世引发了第一波AIGC热点，但其画面不够清晰且作图速度较慢。同年7月，Midjourney开放公测，并采用Discord端进行绘画，1分钟内可同时生成4张图片。8月份，StableDiffusion正式发布，作图时间缩短至10秒以内。

如今，AI作图领域呈现出Midjourney和Stable Diffusion的双巨头竞争态势。以下是各类AI绘画工具示例：

2.2.1 MidJourney注重细节的构建和表达

2.2.2 Stable-Diffusion

画风更偏写实

在“Disco Diffusion”风格中，笔触较为显著，非常适合呈现油画般的质感和效果。这种风格的特点在于强烈的色彩对比、丰富的光影效果以及笔触的动感，使作品呈现出一种充满活力和节奏感的画面。

### 2.2.3 Disco Diffusion

#### 笔触较明显

- **特点**：在“Disco Diffusion”风格中，笔触较为显著。

- **适合**：这种风格非常适合呈现油画般的质感和效果。

- **适用场景**：

- 油画作品

- 艺术装置

- 视觉艺术展览

#### 应用示例

在“Disco Diffusion”中，笔触可以是粗犷的线条或是细腻的提花，色彩对比强烈，光影效果丰富。这种风格往往给人一种强烈的视觉冲击感，适合用于表达自由、激情和活力的主题。

### 结论

“Disco Diffusion”是一种充满活力的艺术风格，通过突出笔触的效果，使得作品具有油画般的质感。无论是绘画、装置艺术还是展览设计，都能利用这一风格来展现强烈的情感和动感。

2.3 音乐与视频结合

目前，在音乐与视频结合方面的发展相对缓慢，尚未出现现象级的典型应用。市场上现有的相关产品大多不够成熟。

其中，AI生成音乐的产品之一是Riffusion。用户输入文字后，模型会根据内容自动生成一段音乐。

QuickVid 是一款基于 AI 技术的视频生成产品。它允许用户通过输入一段文字描述来创建一个流畅且个性化的视频内容。在 QuickVid 中，用户可以自由选择视频的风格、背景音乐以及其他元素，使得生成的视频更加符合他们的需求和喜好。

三、AI + 前端

由于 ChatGPT 的火爆出圈使得 LLM (Large Language Model, 大型语言模型) 也被广泛熟知。虽然利用 LLM 辅助编码还处于非常早期阶段，但基于此模型的工具 Copilot X、Cursor、ChatGPT 等还是极大的震撼到了开发者。AI 让程序员失业的论调也甚嚣尘上。作为一名前端工程师，我们也不能再安于现状了。🤔️

如何利用好 AI 的能力去提升前端团队的研发效率？

3.1 前端提效现状

要想利用好 AI 的能力提升前端团队的研发效率，我们先想一下，当前研发提效的方式都有什么？

3.1.1 单点提效

绝大部分前端团队都在不遗余力地去封装自己的工具库、UI 组件库、脚手架、构建工具、应用开发框架、低代码搭建平台等。

3.1.2 链路提效

同工种提效的天花板清晰可见，很容易就会达到瓶颈。要想更进一步，必须跳出自己所处角色的视角，横向寻求上下游间的打通，共同提效。

以前端为中心，与其它环节进行打通的话，有如下几种方式：

1. **跨部门合作**：例如，前端开发人员可以与后端开发人员、数据库管理员等沟通，了解他们的需求和痛点，从而优化整个系统架构，减少重复工作。

2. **项目协调**：通过组织项目会议，明确各个团队之间的任务分工和时间节点，确保每个环节都能高效执行。

3. **技术培训**：投资于员工的技术培训，提升全链路的技能水平，从而提高整体效率。

3.2 AI 在低代码平台的应用

大家带着三个疑问阅读下面的文章：

- 如何通过 "Prompt Engineering" 将聊天型 AIGC 转换为低代码平台的生产力？

- 如何解决现有低代码平台应用搭建和组件研发效率低的痛点？

- 如何将 ChatGPT 集成到现有的低代码平台？

在低代码平台上，有两个主要的底层逻辑：一是提升应用开发效率，降低成本；二是促进人人开发，让非开发者也能快速搭建应用。然而，现有的低代码平台仍面临应用搭建和组件研发效率较低的问题：

- 应用搭建效率低下。非开发者在搭建应用前需要熟悉低代码平台的使用及各类组件的配置项。

- 组件研发效率低下。新的组件研发流程仍然依赖于传统的产品出需求文档、设计详细、编码实现的过程。

如何解决现有低代码平台存在的这些问题？

解决思路：

1. 针对应用搭建效率低的问题：让非开发者不需要了解低代码平台的使用和组件配置等，只需描述需求，AI将自动快速搭建应用。

2. 针对组件研发效率低的问题：AI将辅助需求文档到完成编码整个阶段的提效。

目标：

1. 将现有的低代码平台升级为“AI驱动应用开发平台”，针对产品经理、开发者和非开发者的使用人群进行赋能提效，实现平台全局AI驱动。

2. 面向产品经理的需求抽象：协助产品将描述性的需求文档转换成规范数据结构。

3. 面向开发者的需求辅助编码：作为程序员的开发助手完成确定性功能函数编程。

4. 面向非开发者的应用搭建辅助：讲出需求，快速搭建应用。

# 低代码 + AI 方案调研

基于以上背景信息，我们对市面上的AI低代码平台进行了深入研究，从**AI辅助搭建、修改页面、辅助开发编程以及辅助产品需求抽象等维度**出发。

## 研究公司/团队及功能

### AI 辅助搭建

- 易鲸云：管理端页面搭建（✓）

- 娃娃动：未公布

- 一刀云：脚本编写（✘）

### AI 修改页面

- 跳叨编程小助手：一刀云（✗）

- 无开放接口

### AI 辅助编程

- ChatGPT 开放接口：易鲸云、Thor（✓/✗，部分公司未公布）

- Informat next：织信（✓）

### AI 辅助需求抽象

- 不适用

## 核心模型能力

- 易鲸云：管理端页面搭建（✓）

# 实现效果演示

### eg1: 页面生成 & 布局能力

**需求**: 页面分为三部分，顶部是标题“合金弹头首发”，中间是一张图片。图片链接是“cdn.yyb.gtimg.com/co-page-img…”

- 结果：生成了页面并包含了所需的内容。

### eg2: 页面修改能力

**需求**: 删除图片，并将标题的文案改为"今天首发"，按钮的文案改为"立即试玩"，按钮颜色改为红色。

- 结果：成功实现了对现有页面的修改和更新。

### eg3: 产品需求抽象 & 辅助编程能力

- 需求：AI辅助团队在进行产品需求抽象时提供了编程指导。通过ChatGPT接口，生成了相关的代码片段并进行了优化。

- 结果：成功完成了产品的初步需求抽象，并且得到了相关编程支持。

### 总结

目前市面上的AI低代码平台大部分依赖于OpenAi团队的ChatGPT开放接口进行功能实现。因此，我们选择基于此升级现有的低代码平台。

为了更具体地阐述我们如何在基于ChatGPT的开放接口的基础上将低代码平台升级为一个AI驱动的应用开发平台，我们将重点介绍AI辅助的需求提出、快速页面搭建以及编程辅助等方面。

首先，关于需求提出，我们可以通过集成多种语言和工具的能力，让AI能够理解和提炼用户需求。这意味着我们可以直接从文本或语音输入获取具体功能或界面设计的要求，并将其转换成技术实现的目标。这种灵活性使得系统能够在用户提供初步的模糊描述时迅速生成详细的解决方案建议。

接下来是页面快速搭建部分。通过结合深度学习模型和网页构建工具，AI可以自动完成大量基本元素（如按钮、表单）的设计和布局配置。这一步骤依赖于AI在视觉识别和理解方面的能力，使得系统能够准确地从图像或视频中提取关键信息，从而实现直观的界面设计。

页面修改环节同样值得关注，这里AI将能通过模型学习来自动化部分元素（如文本、图标）的更新工作，甚至在一定程度上替代人工进行一些复杂的调整。这不仅提高了效率，也降低了错误率，使团队能够更专注于业务逻辑和用户体验的设计。

最后是编程辅助方面，借助自然语言处理技术，AI可以理解并提取用户提供的代码片段或设计思路，并通过智能推荐帮助开发人员选择合适的库、框架或工具来实现功能。此外，AI还能提供实时的反馈和错误提示，确保程序开发过程更加高效和可靠。

以上就是我们如何基于ChatGPT的开放接口将现有的低代码平台升级为一个AI驱动的应用开发平台的主要实现步骤。通过这些技术手段，我们可以更快速、准确地交付高质量的AI辅助应用开发解决方案。

ChatGPT 是一个通用型聊天机器，它可以回答任何问题，但是它的回答并不总是符合我们的预期。因此，我们需要通过 Prompt Engineering 来提示 AI 如何进行输出。在 ChatGPT 中，提示是由一组聊天消息组成的，每个消息都是由一个特定角色说的话，这些角色包括：

- user：用户角色，即我们自己。

- assistant：助手角色，即 ChatGPT。

- system: 系统角色，即 ChatGPT 的上下文，在这里我们可以描述它在当前会话中扮演的角色，并可以通过逻辑规则限定它的输出。

以下是用官方工具 Playground 提问的一个示例。

3.2.4.2 从零开始

首先，我们需要为 ChatGPT 设定扮演的角色。我们将使用以下结构：

```json

{

"system": {

"role": "translator",

"description": "将人类自然语言描述的指令翻译成对应的页面 JSON"

}

}

```

接下来，我们生成一个空页面。

```javascript

let pageJSON = {

"system": {

"role": "translator",

"description": "将人类自然语言描述的指令翻译成对应的页面 JSON"

}

};

console.log(pageJSON);

```

这样我们就从最基本的开始，为 ChatGPT 制定了扮演的角色。

这时，我们可以看到ChatGPT给出的结果，但存在一些问题：

1. 输出中包含冗余的介绍性语句。这是因为我们在ChatGPT的输出限制范围内没有进行限定。

2. 每次提交都会返回不同的结果。这主要是因为ChatGPT的温度参数默认值为0.7，温度越大意味着ChatGPT的回答更加富有创意。而在这个页面JSON翻译器场景中，我们希望它能提供稳定的输出，因此我们需要将其设置为0。

3.2.4.3 添加第一个限制条件

我们重新设计Prompt，使其仅输出页面JSON。

在提交多次请求后，ChatGPT仍会返回相同的结果，并且不再给出注解说明。目前ChatGPT返回的JSON无法描述我们的低代码页面，因此需要教会它业务页面的JSON结构。

3.2.4.4 教会 ChatGPT 识别页面 JSON

增加一个限定条件，空页面的JSON结构。

这时ChatGPT已经学会了生成一个空页面的JSON。

而且还能融会贯通，自己偷偷学会了修改页面的背景颜色和添加按钮组件（尽管按钮组件的 DSL 未必正确）。

为了使ChatGPT能够生成一个功能齐全的JSON结构的页面，请告知它关于该页面的一些细节信息。

以下是一些可以提供给ChatGPT的JSON描述信息：

1. **页面的基本描述**：请详细说明页面的主题、目标或用途，这有助于确保生成的内容符合您的需求。

2. **页面组件列表**：列举所有需要使用的HTML元素（如标题、正文、按钮等），以及它们各自的属性和配置细节。例如，您可以提供标题的字体大小、颜色等设置，按钮的类型、链接地址等信息。

3. **响应式设计要求**：如果您的网站需要支持多种设备或屏幕尺寸，请告知ChatGPT相关的样式规则或使用哪些CSS类来实现这些需求。

通过以上描述，可以让ChatGPT更好地理解您所需页面的内容，并生成一个与之完全符合的JSON结构。

首先，ChatGPT 已经能够基于我们提供的描述自动生成包含按钮的页面的JSON格式数据。然后，我们将这些JSON复制到低代码平台中，以便创建出完全符合预期效果的产品。

To make ChatGPT recognize more components, we need to feed it with data describing the components.

tip: Translate "限定上下文" into English as "Contextual Limitation". For accuracy, make ChatGPT's recognition more precise.

🤔️ How can I integrate ChatGPT into a low-code platform?

3.2.4.5 Integration of ChatGPT into Low-Code Platforms

The current architecture diagram for Rebone is as follows:

集成 ChatGPT 后的完整流程图如下：

主要涉及两个模块的变更：

1. 新增基于 OpenAI SDK 的 Node 服务

Prompt 生成器：由于各类组件的描述数据都存储在文件中，因此需要一个 Prompt 生成器来加载这些文件作为系统上下文。

翻译器：将用户的输入和系统消息转化为 Prompt Messages，并发送给 OpenAI，最后返回页面 DSL。

2. 编辑器适配

接受用户自然语言需求的输入，请求 ChatLowCode 服务以获取页面 DSL。新旧页面 DSL 的差异更新编辑器画布中的页面。

总结：

本文介绍了 AIGC（人工智能生成内容）的概念以及 AI 在低代码平台的应用。可以看出，AI 技术在前端领域的应用不仅能够帮助开发者减少重复性工作、提升开发效率，还提升了用户体验。随着 AI 技术的不断发展，可以预见未来绝大部分的编码工作会被 AI 替代。当大家技术水平旗鼓相当时，更懂业务、更会利用 AI 的能力将成为我们的核心竞争力。

阅读完毕，觉得文章不错，请点赞、转发和关注我们公众号，每周都有优质的文章推送。