随着 AI 技術的日益發展，前端開發模式和提效工具也在不斷地變化。作為一名前端工程師，如何應對 AI 帶來的挑戰和機遇？在這篇文章中，作者将介紹什麼是 AIGC，并深入探讨 AI 在低代碼平台的應用。希望開發者通過本文對前端開發的提效和 AI 在低代碼平台的應用有更多的認識。
一、什麼是 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，使用者輸入一段文字描述，模型會生成一段流暢的視訊，還可以選擇視訊的風格和背景音樂等。
二、AI +前端
由于 ChatGPT 的火爆出圈使得 LLM(Large Language Model, 大型語言模型)也被廣泛熟知。雖然利用 LLM 輔助編碼還處于非常早期階段，但基于此模型的工具 Copilot X、Cursor、ChatGPT 等還是極大地震撼到了開發者。
AI 讓程式員失業的論調也甚嚣塵上。
作為一名前端工程師，我們也不能再安于現狀了。
如何利用好 AI 的能力去提升前端團隊的研發效率？
2.1 前端提效現狀
要想利用好 AI 的能力提升前端團隊的研發效率，我們先想一下，目前研發提效的方式都有什麼？
- 單點提效
絕大部分前端團隊都在不遺餘力地去封裝自己的工具庫、UI 元件庫、腳手架、建構工具、應用開發架構、低代碼搭建平台等。
- 鍊路提效。
同工種提效的天花闆清晰可見，很容易就會到達瓶頸。要想更進一步，必須要跳出自己所處角色的視角，橫向尋求上下遊間的打通，共同提效。
以前端為中心，與其他環節進行打通的話，有如下幾種方式：
從上文我們了解了現階段已有的一些前端提效方式。
AI 如何給現有的提效工具賦能？
接下來我們一起探索如何在已有的低代碼平台接入 AI 的能力讓其效率倍增。
2.2 AI 在低代碼平台的應用
大家可以帶着這三個疑問閱讀下面的文章。
|
2.2.1 背景
低代碼平台的底層邏輯有兩個，一是提升應用的開發效率，降低成本；二是促進人人開發，讓非開發者也能快速搭建應用。
但現有的低代碼平台還是存在效率低的痛點：
| · 應用搭建效率低。非開發者在搭建應用前需要熟悉低代碼平台的使用和各類元件的配置項。 · 元件研發效率低。新的元件研發流程還是傳統的産品出需求文檔，開發出詳細設計、編碼實作。 |
如何解決現有低代碼平台存在的應用搭建群組件研發效率低的痛點？
解決思路：
|
目标：将現有的低代碼平台更新為 “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 中，提示是由一組聊天消息組成的，每個消息都是由一個特定角色說的話，這些角色包括：
|
以下是用官方工具 Playground 提問的一個示例。
2.2.4.2 為 ChatGPT 制定扮演角色
先從最基本的開始，首先我們需要為 ChatGPT 制定扮演的角色。
# SYSTEM
你是一個頁面 JSON 翻譯程式，你可以将人類自然語言描述的指令翻譯成對應的頁面 JSON
# USER
生成一個空頁面 這時，我們可以看到 ChatGPT 給出結果，但是存在一些問題：
|
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，差異化更新編輯器畫布中的頁面。
總結
上面主要介紹了 AIGC 的概念以及 AI 在低代碼平台應用。可以發現，AI 技術在前端領域的應用，不僅能夠幫助開發者減少重複性工作，提升開發效率，還提高了使用者的體驗。
随着 AI 技術的日益發展，可以預見未來絕大部分的編碼工作會被 AI 替代。當大家技術水準旗鼓相當時，更懂業務、更會利用 AI 的能力會成為我們的核心競争力。
文章來源：https://mp.weixin.qq.com/s?__biz=MzI2NDU4OTExOQ==&mid=2247638431&idx=1&sn=c97c0d04534a80f82b30eace512c87d6&chksm=eaa6c7cfddd14ed95c9138956a65c30050d8b3dc011d293a367f1486594f6082a5aedf2e426d&scene=178&cur_album_id=2881988036140695557#rd