從 3 月 ChatGPT 火熱以來，發(fā)現(xiàn)它能夠通過文字生成代碼，并進(jìn)一步渲染成頁面，展現(xiàn)出了解決部分 UI、UX、測試和前端工作的能力。所以零零散散地進(jìn)行了一些關(guān)于 Design To Code、AI 生成頁面、動(dòng)效等方面的學(xué)習(xí)與嘗試。在本文中，我將在工作業(yè)務(wù)脫敏的基礎(chǔ)上，梳理這些想法。目的之一是進(jìn)行總結(jié)，其二是遇到一些疑問點(diǎn)，希望有機(jī)會(huì)與大家相互溝通學(xué)習(xí)。

本篇內(nèi)容主要討論如何用 AI 生成設(shè)計(jì)稿，以及如何在實(shí)際項(xiàng)目開發(fā)流程中運(yùn)用，同時(shí)設(shè)計(jì)、開發(fā)組件在其中扮演很重要的角色。（全文預(yù)計(jì) 6 分鐘）

更多AI實(shí)戰(zhàn)案例：

一、chatGPT生成設(shè)計(jì)的原理

1. 流程介紹

先看一個(gè) chatGPT 生產(chǎn)頁面的演示，通過與 chatGPT 對(duì)話的形式，引導(dǎo)它搭建出一個(gè)任務(wù)列表頁面，不僅僅是靜態(tài)頁面，同時(shí)還支持用戶的交互效果。

可以查看生成的頁面，chatGPT 理解我的需求，并結(jié)合我要的 UiKit 樣式表，輸出了對(duì)應(yīng)的內(nèi)容，但是有些紕漏，例如我說了按鈕要右側(cè)對(duì)齊，它卻放置在底部，下面讓我們通過對(duì)話嘗試調(diào)整。

可以看到，調(diào)整后的頁面，把按鈕改為右對(duì)齊，并新增了布局的代碼，改為了彈性寬度自適應(yīng)布局。

2. 這里有一些 chatGPT 對(duì)話的技巧：

①指定 chatGPT 的身份

便于它基于你需要的職業(yè)身份，對(duì)內(nèi)容進(jìn)行合適的產(chǎn)出。例如涉及操作邏輯時(shí)可以說：“假設(shè)你是交互設(shè)計(jì)師”。涉及代碼輸出時(shí)，可以說：“假設(shè)你是前端工程師“。這樣會(huì)有不錯(cuò)的效果。

②足夠的背景信息

告訴它你需要它做什么，以及現(xiàn)在的背景信息，有足夠的背景信息供它理解，能減少它出錯(cuò)的概率。

③設(shè)定明確的輸出目標(biāo)

對(duì)它的輸出內(nèi)容需要明確，并最好是拆分成有結(jié)構(gòu)的。

③嘗試給出范例

讓它更好地了解你的訴求。

④適當(dāng)指示（鼓勵(lì)/指出錯(cuò)誤）

可以及時(shí)指出，避免 GPT 將問題帶到下一個(gè)環(huán)節(jié)，正向的會(huì)促使它縮小方向，精準(zhǔn)輸出；反向的會(huì)促使它改變方向，避免將錯(cuò)誤帶入下次對(duì)話中。

在靜態(tài)頁面完成后，我讓它去補(bǔ)充「觀看 10 秒任務(wù)」任務(wù)的代碼，它也順利完成，這點(diǎn)超出我的預(yù)期，請(qǐng)查看下方演示視頻。

任務(wù)簡介：通過點(diǎn)擊領(lǐng)取一個(gè)觀看 XX 頁面 3 秒的任務(wù)，例如某 PDD、某寶購物網(wǎng)站，（“不是.jpg”，領(lǐng)取后，瀏覽頁面，倒計(jì)時(shí) 3s 后，提醒你完成任務(wù)，點(diǎn)擊可領(lǐng)取獎(jiǎng)勵(lì)。

正如上述演示，通過簡單的與 chatGPT 對(duì)話 2-3 次，即可生成一個(gè)可交互的頁面。它似乎能將原本的設(shè)計(jì)至研發(fā)的流程進(jìn)行一些壓縮，達(dá)到減少溝通成本、降低設(shè)計(jì)還原驗(yàn)收工作量的效果。當(dāng)開發(fā)同學(xué)不需要人為的還原 UI 界面時(shí)，設(shè)計(jì)還原的成本必然降低，同時(shí)節(jié)省 UI 以及測試同學(xué)的工作量。

3. AI 生成頁面的重要點(diǎn)

上述內(nèi)容表明目前 AI 可以生成頁面和交互事件，但要穩(wěn)定輸出，關(guān)鍵是需要擁有自己的業(yè)務(wù)組件庫。只有擁有了自己的組件庫，AI 才能使用它來構(gòu)建所需的頁面。換言之，我們不能用 Ant Design 的 B 端組件來設(shè)計(jì)支付寶營銷活動(dòng)頁面，因?yàn)樗鼈兊臉邮讲煌ㄓ谩?/p>

二、在實(shí)際項(xiàng)目中如何運(yùn)用

1. 開發(fā)組件（Vue）和設(shè)計(jì)組件（Figma）的異同點(diǎn)

只有比較開發(fā)、設(shè)計(jì)組件的異同，才能了解如何使兩類組件拉通，才好實(shí)現(xiàn)相互的轉(zhuǎn)化，進(jìn)而輔助 AI 生成頁面。

①兩類組件分別是什么？

1. Vue 中的組件是可復(fù)用的 Vue 實(shí)例，它由 Vue 組件系統(tǒng)構(gòu)建，可以包含布局結(jié)構(gòu)、腳本和樣式，并且能夠封裝特定的功能和外觀。Vue 組件可以通過 props 和 events 進(jìn)行通信，從而實(shí)現(xiàn)數(shù)據(jù)的傳遞和交互。
2. Figma 中的組件是設(shè)計(jì)系統(tǒng)中的重要組成部分，它包括可復(fù)用的設(shè)計(jì)元素，如按鈕、輸入框、卡片等。這些組件在 Figma 中可以被復(fù)制并多次使用，使得設(shè)計(jì)的一致性和可維護(hù)性更加容易。

②相同點(diǎn)

Vue 中的組件和 Figma 中的組件都具備可重用性和組件化的特點(diǎn)，能夠在不同的上下文中被重復(fù)使用。

③當(dāng)前拉通的部分：

1. 布局結(jié)構(gòu)：部分布局結(jié)構(gòu)可以在設(shè)計(jì)中體現(xiàn)，并在前端實(shí)現(xiàn)中對(duì)應(yīng)相似的結(jié)構(gòu)。
2. 樣式：設(shè)計(jì)系統(tǒng)中的顏色、字體、邊距等可以與前端樣式表中的樣式進(jìn)行對(duì)應(yīng)和轉(zhuǎn)化。

這部分內(nèi)容，由于是靜態(tài)資源，比較容易實(shí)現(xiàn)開發(fā)和設(shè)計(jì)的拉通，從告別手動(dòng)標(biāo)注后，zeplin、藍(lán)湖、figma 都能實(shí)現(xiàn)查看開發(fā)元素的功能，能夠準(zhǔn)確的捕捉邊距、間距、色值等內(nèi)容。

④不同點(diǎn)

Vue 中的組件是前端開發(fā)中的一部分，額外包含了交互邏輯，而 Figma 中的組件是設(shè)計(jì)工具中的一部分，主要包含了設(shè)計(jì)元素和樣式。

1. 交互邏輯：Figma 中的交互設(shè)計(jì)無法直接轉(zhuǎn)化為前端實(shí)現(xiàn)的交互邏輯，需要在前端開發(fā)中重新實(shí)現(xiàn)。
2. 動(dòng)態(tài)數(shù)據(jù)：Figma 中的靜態(tài)設(shè)計(jì)數(shù)據(jù)無法直接映射到前端的動(dòng)態(tài)數(shù)據(jù)，因此在前端開發(fā)中需要重新處理數(shù)據(jù)的加載和交互。

交互邏輯和動(dòng)態(tài)數(shù)據(jù)，這部分內(nèi)容是 Figma 組件暫時(shí)無法替代的，F(xiàn)igma 未來肯定也會(huì)往 Design To Code 繼續(xù)深入，經(jīng)過測試，在 figma 的原型制作一個(gè)點(diǎn)擊后跳轉(zhuǎn)的事件，那么在代碼查看區(qū)，也能看到此點(diǎn)擊事件被記錄下來。

下方我們以彈窗舉例：嘗試說明兩類組件在實(shí)際中，有哪些不同。

目前有許多低代碼平臺(tái)可以執(zhí)行部分功能，比如將簡單的事件綁定到按鈕上。舉例來說，開發(fā)人員通常會(huì)編寫關(guān)閉彈窗的代碼，而用戶可以在低代碼平臺(tái)上將“取消”按鈕與關(guān)閉彈窗的功能進(jìn)行綁定。

都是建立在組件、事件都準(zhǔn)備好的基礎(chǔ)上，由用戶牽線去配置，所以低代碼平臺(tái)，暫時(shí)也不適用于能夠自動(dòng)生成頁面。

2. 未來趨勢(shì)

最近在試用阿里的通義靈碼，有一個(gè)功能是自然語言生成代碼，通過自然語言描述你想要的功能，根據(jù)你的描述和上下文，直接生成代碼。

那么，在這類功能的加持下，也不需要使用低代碼平臺(tái)固定的點(diǎn)擊事件，結(jié)合獨(dú)特的業(yè)務(wù)自定義的組件，是否能完成簡單的前端頁面部署？

以上述彈窗舉例，是否可以先利用 AI 生成彈窗，再利用自然語言生成代碼的功能，為按鈕綁定事件，例如：“將取消按鈕，綁定一個(gè)關(guān)閉彈窗事件，點(diǎn)擊后關(guān)閉當(dāng)前彈窗”，是否可以完成簡單的全流程功能，由于用的組件、所以簡單的界面不需要交互、UI。只需要測試和前端同學(xué)稍加把關(guān)，檢查功能是否有 bug 即可，感興趣的同學(xué)可以嘗試。

這方面有經(jīng)驗(yàn)或者想法的朋友，歡迎交流！

歡迎關(guān)注作者微信公眾號(hào)：「瞎說研究所」