編者按：也許現(xiàn)在還不是時候探討 UI/UX 設(shè)計當(dāng)中 AI 工具的使用比例有多高，畢竟目前絕大多數(shù)的 AI-UI 設(shè)計工具還不是那么的成熟。之前 Figma 的 AI 功能就因為太像 iOS 的設(shè)計而引發(fā)了爭論，那么現(xiàn)在情況如何呢？Saadia Minhas 今天的這篇文章，基于一個設(shè)計主題，快速驗證了一下當(dāng)前基于 AI 的 4 款 UI 設(shè)計工具，也許能給你一點參考。以下是正文。

隨著 AI 技術(shù)的興起，UI/UX設(shè)計已經(jīng)進入一個新時代。AI 工具讓創(chuàng)建令人驚嘆且用戶友好的 UI 變得更加容易。這些工具對 UX 設(shè)計師、產(chǎn)品經(jīng)理和銷售人員同樣有用。團隊可以在頭腦風(fēng)暴會議中使用這些工具來快速輕松地驗證他們的想法。

我編寫了文本提示詞，并使用完全相同的提示詞來測試目前領(lǐng)先的 4 款基于 AI 的 UI 生成工具（Uizard、Galileo.ai、UX Pilot、Figma）。我想從質(zhì)量方面分析它們生成的 UI。讓我們一起探索這些工具，看看它們是如何生成我們想要的 UI 的。

提示詞：

Design a food delivery app UI. Users should browse food items, filter by cuisine, price, or ratings. They can add items to a cart, place orders, and track delivery. Include an easy checkout process.

設(shè)計一款外賣應(yīng)用的 UI 。用戶應(yīng)瀏覽食品，按菜系、價格或評分進行篩選。他們可以將商品添加到購物車、下訂單并跟蹤配送情況。其中包含一個簡單的結(jié)賬流程。

1、Uizard

https://uizard.io/

Uizard 是一款簡單易用的工具。它有一個有趣的功能，是能夠?qū)⑹掷L草圖轉(zhuǎn)換為高保真原型。此功能可讓你立即將想法轉(zhuǎn)化為可用的視覺設(shè)計。

Uizard 為網(wǎng)頁和移動端APP提供了預(yù)先設(shè)計的模板，方便用戶快速上手。

當(dāng)你剛剛開始使用它的 AI 自動設(shè)計的時候，只需要用簡單的文本提示詞來描述你的項目需求。你還可以從預(yù)設(shè)的案例參考入手，通過微調(diào)這些案例來貼合自己的需求。此外，你還可以選擇你所設(shè)計的 UI 要適配的硬件平臺。

第二步，該工具會要求你選擇設(shè)計的起點。你可以從現(xiàn)有的屏幕截圖、文本提示、URL 或品牌套件（僅限付費版本）開始。

第三步，你可以描述這個項目所需要的視覺樣式。可以用純文本編寫，也可以先體驗一下已有的范例。如需進一步自定義，你可以從系統(tǒng)提供的篩選器中選擇你所偏好的。

單擊「生成我的項目」即可根據(jù)你的輸入開始生成設(shè)計。

Uizard 會生成多個供你備選的界面，以原型的形式相互鏈接的界面。它還會為你提供一些額外的設(shè)計方案。不過有一些設(shè)計方案在免費版本中是被鎖定的，付費會員可用。

Uizard 通過盡可能包含高需求的功能，為項目生成盡可能詳細(xì)的設(shè)計方案。視覺設(shè)計也很好。它提供了一個很好的設(shè)計起點，你可以在此基礎(chǔ)上進行一些自定義，使其成為功能齊全且專業(yè)的界面。

2、Galileo.ai

https://www.galileo.ai/

用戶能夠使用簡單的文本提示詞，在 Galileo.ai 中生成吸引人的 UI 界面。它使得測試設(shè)計構(gòu)想，然后集思廣益進一步迭代變得更加容易。這款工具與 Figma 集成，這進一步增強了其功能，使用戶可以在熟悉的平臺內(nèi)，完善其 AI 生成的設(shè)計。

Galileo.ai 還提供了設(shè)計見解和優(yōu)化建議，確保輸出美觀，且符合可用性的標(biāo)準(zhǔn)。

這款 AI 工具采用了簡單的用戶界面，用戶可以在其中快速編寫與所需設(shè)計相關(guān)的提示詞。你可以選擇為移動端設(shè)備還是網(wǎng)頁創(chuàng)建設(shè)計。

Galileo 內(nèi)置了一個聊天機器人，用于溝通，可以借此確認(rèn)其對提示詞的理解。它在生成設(shè)計之前，會提供了將要生成的 UI 界面和功能的摘要。你必須明確確認(rèn)這一點，以便 AI 可以開始生成，這是避免對需求產(chǎn)生誤解的好方法。

Galileo 在短時間內(nèi)生成了上述界面。

Galileo 生成的 UI 設(shè)計外觀美觀、整潔，并涵蓋了詳細(xì)的用戶流程。通過更新提示詞，可以進一步增強功能。你可以將此設(shè)計帶到 Figma 當(dāng)中，并進行二次編輯和調(diào)整。

總體上來看，Galileo 似乎是在探索和設(shè)計過程的初始階段，驗證你的想法的絕佳工具。

3、UX Pilot

https://uxpilot.ai/

UX Pilot 采用數(shù)據(jù)驅(qū)動的方法進行 UI 設(shè)計。它將 AI 線框圖和原型設(shè)計，以及分析驅(qū)動的建議，結(jié)合到了一起。這項獨特功能使設(shè)計團隊能夠根據(jù)數(shù)據(jù)創(chuàng)建以用戶為中心的設(shè)計。

UX Pilot 提供了易于使用的 UI 界面，你可以在其中編寫文本提示詞來描述所需的設(shè)計。

UX Pilot 生成的 UI 設(shè)計是極簡設(shè)計的一個很好的案例，生成的結(jié)果看起來更接近真實的 APP 。你可以通過強化提示詞為設(shè)計添加更多細(xì)節(jié)。

4、Figma

https://www.figma.com/

Figma 毫無疑問是領(lǐng)先的 UI/UX 設(shè)計和協(xié)作平臺，F(xiàn)igma 與 AI 的整合，進一步增強了它的功能。Figma 的 Ai 功能經(jīng)歷了若干次的迭代和修改，目前才算穩(wěn)定下來。

你同樣可以編寫文本提示詞，然后在 Figma 內(nèi)生成相關(guān)的設(shè)計。這個過程更簡單，生成的設(shè)計可以作為一個有用的起點。當(dāng)然，作為 UI/UX 協(xié)作工具，F(xiàn)igma 提供了較為靈活多變的編輯功能，因此用戶可以在同一編輯器中輕松地優(yōu)化和自定義生成的設(shè)計。

Figma 在幾秒鐘內(nèi)生成所需的 UI 設(shè)計。

Figma 生成的設(shè)計是一個很好的設(shè)計起點，它不是從空白屏幕開始，而是給你一個想法，讓你從某個地方開始并進一步完善。

總結(jié)

總而言之，Uizard 生成了更為詳細(xì)的功能和對應(yīng)的設(shè)計，Galileo 提供了視覺吸引人的設(shè)計，UX Pilot 使用接近真實功能的簡約設(shè)計，F(xiàn)igma 允許你完全自定義最初生成的概念。

這些工具是 UX/UI 設(shè)計流程的一個很好的補充，可幫助你快速將想法變?yōu)榭梢暤脑O(shè)計，并在開發(fā)之前對其進行完善。這些工具對非設(shè)計師（包括產(chǎn)品經(jīng)理和開發(fā)人員）也很有幫助，他們可以快速將自己的想法轉(zhuǎn)化為視覺設(shè)計并探索不同的選擇。

作者：陳子木