從創(chuàng)意到產(chǎn)品的“最后一公里”

UX 設(shè)計師的核心目標(biāo)是確保用戶體驗可落地，但傳統(tǒng)設(shè)計流程存在斷層。你是否經(jīng)常會遇見這些問題：

AI 低代碼發(fā)展至今工具已從“玩具級”生產(chǎn)力輔助，進(jìn)化為足以重構(gòu)設(shè)計-開發(fā)工作流的底層引擎。其核心價值不僅在于降低技術(shù)門檻和加速創(chuàng)意落地，更在于打通了從創(chuàng)意到產(chǎn)品的“最后一公里”。

我們先不管這一變革背后的技術(shù)演進(jìn)與躍遷。就最終結(jié)果來說，它切實的讓設(shè)計師得以聚焦于體驗創(chuàng)新而非像素調(diào)整，開發(fā)者則從重復(fù)勞動中解放，轉(zhuǎn)向架構(gòu)設(shè)計與算法優(yōu)化。

低代碼 AI 工具本身承擔(dān)了“翻譯者”與“執(zhí)行者”的角色，人與技術(shù)的協(xié)作模式正在經(jīng)歷一場靜默卻深遠(yuǎn)的范式轉(zhuǎn)移。

本文將與大家分享近期我們集中課題研究與探索的結(jié)果，并深入解析：如何高效合理的在實際的設(shè)計流中使用 AI 低代碼工具。

更多相關(guān)干貨：

為什么使用 AI 低代碼工具將成為設(shè)計師必備技能？

AI 低代碼開發(fā)工具通過可視化界面和 AI 輔助編程，大大降低了研發(fā)門檻。讓單獨的設(shè)計師角色，也可完成從“設(shè)計”到“上線”的全流程。

那么 UX 設(shè)計師的 AI 低代碼能力，能在我們的工作中能帶來哪些變化？下面我們將通過具體的實例，手把手的帶各位了解 AI 低代碼工具在實際設(shè)計中的實戰(zhàn)效果。

案例 1

通過純自然語言驅(qū)動的體驗優(yōu)化 Demo ——弧墻繪制“手感”體驗優(yōu)化

應(yīng)用工具：Cursor

設(shè)計工具內(nèi)的弧墻繪制功能存在顯著體驗缺陷，我們發(fā)現(xiàn)核心痛點之一在于用戶繪制時常常產(chǎn)生“失控感”。

但是單純的靜態(tài)展示，又過于單薄。沒有實際的感受（使用），很難去評估這種“手感”的狀態(tài)，評估優(yōu)化是否正向。

那怎樣才能更好地表述這種看不見的問題呢？

于是我通過 AI 低代碼工具，模擬這種弧墻繪制的場景，生成了一份 Html demo 文檔。

它完整的支持了這個階段弧線繪制的能力，也讓交互方案從原來的靜態(tài)圖和憑空想象，變成可直接操作試用的功能 Demo。同時研發(fā)可以直接從 Html 文檔中獲取繪制流程涉及參數(shù)的具體內(nèi)容。

讓“看不見的交互”不僅能夠被感知，也讓設(shè)計產(chǎn)出從“過程物”變成可直接交付開發(fā)的內(nèi)容，有效提升設(shè)計協(xié)作效率以及設(shè)計產(chǎn)出價值。

AI 低代碼工具可以幫助我們解決“看不見”的問題，對于那些“看得見”的問題效果如何呢？

案例 2

通過低代碼構(gòu)建真實 Demo 交互 ，完成 POC 階段概念驗證——產(chǎn)品核心路徑改造

使用工具：V0

公司某工具（以下簡稱“工具”），被高頻使用的亮點功能卻不在核心路徑中。

對于這種直接影響產(chǎn)品整體架構(gòu)的改造成本極高、影響巨大。但僅靠設(shè)計提案，又無法有效評估它的改造成本與方案有效性。

畢竟自己都沒有用過，誰又敢拍板說用戶一定會買單呢？

常規(guī)的小步快走式迭代，很容易導(dǎo)致整體項目節(jié)奏拉長、或錯失市場先機(jī)。那怎樣可以快速實現(xiàn)從“設(shè)計構(gòu)想”到“可驗證假設(shè)落地”，更快速的為產(chǎn)品 POC 階段提供決策依據(jù)呢？

于是我們嘗試把部分設(shè)計稿投喂給 V0，讓「改造后的路徑」嵌入用戶核心操作鏈路。

確認(rèn)了 AI 低代碼工具進(jìn)行復(fù)雜場景實現(xiàn)的可行性后，接著構(gòu)建 3 大核心驗證場景：

（注：以上界面均為效果示意圖示例展示，并非公司產(chǎn)品的最終呈現(xiàn)版本）

此階段的工具 Demo 已經(jīng)完成核心路徑。我們用該 Demo 直接邀請用戶進(jìn)行可用性測試，并進(jìn)行反饋回收。

原本 1~2 個月周期才能獲取的用戶反饋，直接壓縮至 9 天，時間效率提升 76%。

利用 AI 低代碼工具，增加設(shè)計在各個節(jié)點滲透。在減少整個產(chǎn)研成本的基礎(chǔ)上直面用戶，幫助業(yè)務(wù)完成快速驗證。

它的整體產(chǎn)出設(shè)計可以自己投放，減少研發(fā)成本和等待周期；同時投放產(chǎn)出物比原來純設(shè)計 Demo 效果更直觀，回收的反饋偏差更小。

當(dāng)然，我們還可以再進(jìn)一步。直接達(dá)成「設(shè)計支持交付」效果：設(shè)計提供內(nèi)容，支持內(nèi)部產(chǎn)品使用或直接上線。

案例 3

快速搭建新應(yīng)用（網(wǎng)站/網(wǎng)頁/App），生成可用性代碼

使用工具：Cursor、Bolt

對于偏營銷類的網(wǎng)站/網(wǎng)頁，可以嘗試通過低代碼工具進(jìn)行基礎(chǔ)框架的設(shè)計，并生成可用代碼。

基礎(chǔ)網(wǎng)頁/網(wǎng)站搭建：通過輸入提示詞來創(chuàng)建應(yīng)用。提示詞中需要包含應(yīng)用的布局結(jié)構(gòu)、主體內(nèi)容、功能矩陣、交互視覺效果等內(nèi)容?？紤]加入斷點機(jī)制的描述，即可實現(xiàn)準(zhǔn)確的響應(yīng)式布局和多端適配。

將設(shè)計稿還原并生成可用性網(wǎng)站代碼：提供 Figma 鏈接或設(shè)計稿圖片讓 AI 還原并生成可用性代碼，可以輔以提示文案來確保還原效果。獲取完整的基礎(chǔ)框架以后，對于功能模塊與設(shè)計稿偏離的地方可以通過對話進(jìn)行針對性校準(zhǔn)與修復(fù)，最后生成可落地應(yīng)用的代碼給到開發(fā)側(cè)直接使用。

那么除了利用 AI 低代碼工具幫助我們在工作流中解決和消化部分成本問題。我們是否可以用它做更多的事情？

案例 4

基于現(xiàn)有功能打磨優(yōu)化，生成前端組件 —— 「偏好設(shè)置」功能優(yōu)化與組件封裝

使用工具：V0

業(yè)務(wù)跨海過程中，我們發(fā)現(xiàn)工具內(nèi)部的「偏好設(shè)置」在多語言場景會發(fā)生水土不服的情況。

針對這個場景我們需要先確定：根據(jù)不同語言去呈現(xiàn)不同的布局的可行性。

確定方向可行后，下一步還需要盡可能解決新設(shè)置項的實現(xiàn)需要脫離人工、通過代碼控制的問題。組件封裝正是最有效的辦法之一。

將 V0 生成的文件配合設(shè)計稿進(jìn)行交付，避免了信息鴻溝造成的溝通成本與實現(xiàn)偏差。對于研發(fā)伙伴來說，也極大減少了信息理解的成本和部分研發(fā)實現(xiàn)成本。

未來趨勢：UX 工作范式的顛覆性演進(jìn)

通過以上幾個 Demo，相信大家已經(jīng)可以較為深入的了解 AI 低代碼工具在實際設(shè)計流程中的可用性。它確實可以重塑 UX 設(shè)計師的核心能力。

目前主流的 AI 低代碼工具有很多，針對市面上比較火的幾款 AI 低代碼工具，我們進(jìn)行了多維度分析測試與差異化對比總結(jié)，供大家參考。

AI 低代碼工具還在不停發(fā)展與迭代：對自然語言的理解能力越來越好/實現(xiàn)的內(nèi)容越來越符合預(yù)期、產(chǎn)出物越來越豐富……當(dāng)越來越多的人擁抱 AI，AI 回饋給我們的也將更多。

雖然目前的 AI 低代碼工具依然有一些瑕疵，如 AI 生成的代碼可能存在冗余，需結(jié)合人工審查優(yōu)化性能；復(fù)雜功能實現(xiàn)如涉及支付、數(shù)據(jù)庫等后端邏輯時，仍需與傳統(tǒng)開發(fā)團(tuán)隊協(xié)作等等……

但是，它是一個切實的「設(shè)計師創(chuàng)造力加速器」，并且已經(jīng)給我們帶來了不小的改變。

我們也需要開放、積極的心態(tài)去迎接它帶來的改變。學(xué)習(xí)與運用它，從思維出發(fā)、到能力落地。

用架構(gòu)為基底，體驗作調(diào)配，讓設(shè)計的落地像點一杯奶茶一樣靈活而精準(zhǔn)——「少糖、去冰、加個數(shù)據(jù)庫，謝謝?！?/p>

最后

AI 雖好，但是想要進(jìn)步還需要避免依賴，合理使用哦～

歡迎關(guān)注作者微信公眾號：「群核科技用戶體驗設(shè)計」