而這張火遍全網(wǎng)的梗圖，竟然是用一個(gè)叫 Glif 的小網(wǎng)站，花 5 分鐘就做出來(lái)的。

更神奇的是，它的創(chuàng)始人發(fā)布這個(gè)梗圖生成器后，在 X 上的瀏覽量直接突破 190 萬(wàn)。一個(gè)名不見(jiàn)經(jīng)傳的小網(wǎng)站，就這樣一炮而紅，徹底破圈。

為什么Glif能火？關(guān)鍵就在于它拋棄了傳統(tǒng)的對(duì)話框交互，改用了圖形化界面（GUI）。

用戶用起來(lái)簡(jiǎn)單，就是低門(mén)檻，甚至連我這樣不懂代碼的菜鳥(niǎo)都可以，直接拖拽、點(diǎn)擊、調(diào)整，簡(jiǎn)單到就像玩積木一樣把創(chuàng)意變成現(xiàn)實(shí)。

作為一個(gè)應(yīng)用愛(ài)好者，總會(huì)有一些想法想做成應(yīng)用。但現(xiàn)實(shí)很殘酷：我不懂編程。

雖然現(xiàn)在有了AI，但跟它溝通就像在DOS時(shí)代對(duì)著黑框框輸命令 —— 我說(shuō)需求，它回應(yīng)，我繼續(xù)問(wèn)，它繼續(xù)答，反復(fù)循環(huán)。這種單一對(duì)話框的交互方式效率實(shí)在太低。

AI看似無(wú)所不能，但用戶需要的是清晰的指向、可見(jiàn)的交互和可控的結(jié)果。說(shuō)白了，就是需要一個(gè)友好的界面?？蓪?duì)不懂代碼的人來(lái)說(shuō)，做界面簡(jiǎn)直是天方夜譚。

不過(guò)最近的一個(gè)發(fā)現(xiàn)，讓我又燃起了折騰的欲望。

國(guó)內(nèi)的扣子平臺(tái)（）重磅更新， ProjectIDE 上線了 UlBuilder功能。

顧名思義啊，那就是做 UI 的工具。我打開(kāi)試了一下，我去，現(xiàn)在做個(gè)界面可以這么簡(jiǎn)單嗎，拖拖拽拽，跟玩樂(lè)高一樣就行。

簡(jiǎn)單研究了一下，照著官方的一個(gè)應(yīng)用模板，于是，我也搞定了人生第一個(gè)正式的 AI 應(yīng)用：一個(gè)名畫(huà)風(fēng)格轉(zhuǎn)換器。

最近我還了解到扣子還將在 12 月 19 日在上海舉辦開(kāi)發(fā)者日活動(dòng)，會(huì)邀請(qǐng)眾多開(kāi)發(fā)者和行業(yè)內(nèi)人士一起交流，感興趣的可以掃碼預(yù)約直播，到時(shí)我一定要看一下。

下面我挑個(gè)最簡(jiǎn)單的例子給大家展示一下，過(guò)程可能看起來(lái)復(fù)雜，那是因?yàn)槲冶M量講得詳細(xì)，但實(shí)際上操作，連 5 分鐘都不要。

登錄扣子平臺(tái)：https://www.

在左側(cè)點(diǎn)擊工作空間，選擇一個(gè)工作空間，然后在項(xiàng)目開(kāi)發(fā)頁(yè)面，點(diǎn)擊右上角的創(chuàng)建按鈕，在彈出的頁(yè)面可以發(fā)現(xiàn)有兩個(gè)選項(xiàng)，創(chuàng)建智能體和應(yīng)用，我們直接選擇創(chuàng)建應(yīng)用。

注意：左邊的智能體就是傳統(tǒng)的對(duì)話形式，右邊的就是這次的重點(diǎn)。

這里因?yàn)槲覀円罱ㄒ粋€(gè)新的應(yīng)用，所以選擇「創(chuàng)建空白應(yīng)用」。

然后填寫(xiě)應(yīng)用的基本信息。

接下來(lái)直接進(jìn)入到 AI 應(yīng)用的集成開(kāi)發(fā)環(huán)境，這也是扣子最近發(fā)布的  Project IDE  開(kāi)發(fā)工具，可以 0 代碼開(kāi)發(fā)具備前后端能力的 AI 應(yīng)用。

首先需要準(zhǔn)備一個(gè)工作流來(lái)完成應(yīng)用的主要功能。這里我從官方的工作流模板復(fù)制過(guò)來(lái)給大家展示一下這個(gè)流程。

在工作空間中，點(diǎn)擊左側(cè)的資源庫(kù)，再點(diǎn)擊右側(cè)的+資源按鈕下的工作流。

我這里就直接使用了官方的「名畫(huà)寫(xiě)真工作流模版」，在創(chuàng)建工作流這個(gè)界面，選擇「模版」。

在搜索框搜索「名畫(huà)照相館」，然后點(diǎn)擊「復(fù)制」按鈕。

這樣這個(gè)工作流就被復(fù)制到了資源庫(kù)中了。

這樣工作流就搭建好了，這是工作流的整體。

接下來(lái)就需要設(shè)計(jì)用戶的使用界面，好玩的地方來(lái)了。

首先把剛剛在上一步中創(chuàng)建的工作流引入進(jìn)來(lái)。

點(diǎn)擊「復(fù)制到項(xiàng)目」，把這個(gè)工作流復(fù)制到當(dāng)前的項(xiàng)目。

復(fù)制好以后，可以發(fā)現(xiàn)，工作流被引入進(jìn)來(lái)了。

再切換到「用戶界面」菜單，可以發(fā)現(xiàn)扣子最新發(fā)布的 UI Builder 能力真的強(qiáng)，搭載了 17 個(gè)UI組件，包括布局組件、展示組件、輸入組件。

在操作之前我們需要明確這個(gè)應(yīng)用需要輸入三個(gè)組件，分別是：用戶照片、名畫(huà)風(fēng)格和用戶性別。

查看工作流，支持的名畫(huà)有多個(gè)風(fēng)格，根據(jù)風(fēng)格來(lái)選擇就行。

所以這里需要?jiǎng)?chuàng)建一個(gè)表單，并在表單中創(chuàng)建這三個(gè)選項(xiàng)。

選項(xiàng)左側(cè)的表單，雙擊或拖拽，表單就會(huì)被加入到面板中了，表單中默認(rèn)會(huì)有為以下三個(gè)組件，文本，數(shù)字和選擇框。

因?yàn)檫€需要一個(gè)上傳照片的組件，所以還得先把上傳組件拖入進(jìn)來(lái)，多余的元素可以刪掉，反正怎么方便怎么來(lái)。

因?yàn)檩敵鍪且粋€(gè)圖片，所以也需要加一個(gè)圖片添加進(jìn)來(lái)。

怎么樣，這個(gè)用戶界面操作起來(lái)是不是很直觀，只需要將對(duì)應(yīng)的組件拖入到界面中，再進(jìn)行相應(yīng)的設(shè)置即可，就像搭積木一樣，非常直觀，這種交互設(shè)計(jì)比對(duì)話式創(chuàng)建要進(jìn)步很多。

最重要的是無(wú)需編寫(xiě)額外代碼，對(duì)于我這種文科生不要太友好。

三個(gè)組件準(zhǔn)備好后，就需要修改一下各組件的標(biāo)題和對(duì)應(yīng)的值。

這里比較簡(jiǎn)單，我就不細(xì)說(shuō)了。

這是設(shè)計(jì)好后整體的界面。