作者：張昊然，Motiff 妙多 Co-Founder、副總裁
編輯：Cage
曾被專業設計師看成“玩具”的生成式 UI，如今正在和 vibe coding 一起改寫開發和設計工作流，需求->程式碼->設計的新工作流開始出現。本文回溯了這場演變：從早期「拼樂高」式的模板化設計，到 Claude Sonnet 3.5 更新開始模型有了創造力、直接寫出高美感和風格化的前端程式碼，到如今 AI 展現出理解並遵循特定“設計系統”的能力。
AI 設計的表達力和風格多樣性這兩個維度上實現了躍遷式進步，讓我們開始期待未來有 AI-native 的設計編輯器，設計中的 70%+ 工作由 AI 完成，類似設計領域的 Cursor 甚至 Devin。設計師的價值不再是操作設計工具進行構建，而是迴歸設計本身進行更多的思考、呈現更多的創意方案、推進更高質量的決策。
本文是一篇讀者投稿，來自 Motiff 妙多的 Cofounder 昊然。他基於這兩年打造 AI-native 設計工具的經驗，對 AI+設計領域的未來可能性進行了推演，尤其是如何在模型能力的飛速進展下對業務方向和技術路線作出決策。相信來自優秀讀者朋友的實踐和觀點能給大家帶來啟發，請跟隨他的第一手觀察，一起想象下一代 UI 生產力工具。
💡 目錄 💡
01 無處不在的 UI
02 初代生成式 UI： “玩具” 初稿，“套模版” 技術路線
03 技術革新： 表達力從簡單到複雜，靈感湧現
04 基於設計系統的 UI 生成： 是拐點，也是開始 05 自問自答和四種假設：AI-native 的 「介面設計編輯器」是怎樣的？06 設計與研發的角色的變化， 未來的我們是誰？ 07 彩蛋：作者與編輯問答
01.
無處不在的 UI
UI, User Interface, where interactions between humans and machines occur.
每天清晨，當你聽到手機鬧鐘，睡眼惺忪又極不情願地用指尖點觸“稍後提醒”時，那可能是你新的一天和 UI 介面互動的開始；午休時對著咖啡機猶豫該選美式還是卡布奇諾，液晶屏上跳動圖示和提示也屬於 UI 介面的一部分；深夜打車回家，閃爍著幽藍光的車載螢幕還是 UI 介面。當然，最常見的是你拿出手機後的每一次操作，都是在和 UI 介面打一次照面。
你可能習慣了讓 AI 生成朋友圈文案、插畫甚至短影片，卻未曾注意到——每當我們開啟一個應用，那些精心排布的介面，都是這個數字世界下龐大的 “基礎隱形設施”。據統計，全世界單日新增的 UI 介面已達千萬量級，這個數字對應了一類巨大的生產資料需求。當生成式 AI 已席捲文字、圖片、影片領域時，它在 UI 領域，正在和即將帶來哪些變革？
02.
初代生成式 UI：“玩具” 初稿，“套模板” 技術路線
大約在 9 個月前，Motiff 推出了 AI 生成 UI 介面的功能。這個功能的互動簡易明瞭：使用者透過描述一段對產品介面的提示詞，由 AI 生成對應的 UI 介面。
Motiff 在 24 年對 AI 生成功能給出的一個樣例
Motiff 並非這個方向的首創。要追溯最早推出這類功能併產生影響力的，應該是 Galileo AI，他們在 2023 年 2 月首次預告了利用 AI 生成介面的功能。2024 年 6 月，Galileo AI 宣佈平臺生成的介面總數達到 160 萬，同一個月內 Motiff 和 Figma 都推出了 AI 設計生成功能。當時我們曾評測過在同一時間針對相同的提示詞，各家的生成結果：
儘管在那時網上對“ UI 設計是否已被顛覆”有一些討論，但大多的專業設計師普遍將這些生成功能視為 “玩具” 。他們認為，生成結果最多隻能作為快速視覺化初步想法的參考圖。
為什麼這麼說？要評價生成的 UI 介面是否達到可用性標準，基礎的下限是 “介面美觀、佈局合理”。在下限可滿足後，可有兩個維度評估可用性：
•表達力：UI 介面是一種文字、圖片、樣式資訊的混編表達。依據不同產品需求和場景，表達有簡單和複雜之分。
同一款產品下兩個不同介面的表達。左側的場景是相對簡單的表達，右側的場景則是相對複雜的表達。
特定風格：我們日常使用一款產品，包含不同的介面，這些介面從整體看視覺風格是一致的，或是使用者單看其中一個介面，容易透過視覺標識識別這是哪一款產品。在專業領域術語裡，這種一致性是依賴“設計系統” 約束設計師達成的。
“設計系統” 是一套複雜實踐，它不僅定義了一個業務和品牌顯性的視覺元素，也闡述了這些元素的實踐規範。
初代生成式 UI 在這兩個維度：
• 表達力：受限的簡單。這種狀態，有點像將英語作為外語的初學者，能表達出 big，卻表達不出 massive， enormous。
• 特定風格：雖然生成的介面也有特定風格，但種類一般固定為很少的一類或幾類。就像演員如果只能穿一套或兩套固定風格的服裝，就無法滿足多樣化的舞臺要求。
雙重受限下的“玩具”
表達力和風格支援都受限，原因歸結於技術路線。我們不難理解，UI 並不只是一張如插畫般的圖片，它更像有邏輯與結構的 “資訊容器”。生成式 UI 變得可能，則主要得益於 LLM 技術提供了一套有邏輯和結構的表述。
在 LLM 擅長的領域裡，AI 生成程式碼一直是被基礎模型廣泛評測和落地的重要能力。因此，一種很直覺的思路是讓 AI 先生成產品介面對應的前端程式碼，再把程式碼呈現為介面。有趣的是，原有生產流程都是先有介面再有程式碼，在 AI 擅長的領域這個流程被逆向了。依據這個思路我們進行了一些實驗，以下是我們曾經使用 GPT4 生成一些程式碼後再還原為介面的例子：
我們進行了不少生成實驗，但這些生成的介面在美觀、佈局合理性上距離預期的下限甚遠。我們猜測，可能是那時的大模型在預訓練上，前端程式碼或是關係到樣式的程式碼的資料規模量不夠，或是並沒有在訓練中激發模型對 UI 介面的“審美”能力。
出於對“美”的底線有要求，我們決定嘗試新的技術路線。雖然大模型直接生成前端程式碼轉化為 UI 效果不佳，但它在理解人的設計意圖，以及識別 UI 本身兩方面都表現出不錯的能力。我們拆分這兩項能力：
• AI 理解設計意圖：當用戶用自然語言表述時，AI 可以理解使用者的需求是什麼，並需要哪些模組來展示這些需求。
1）如果使用者只是很簡單表述需求，AI 可以一定程度“擴寫”來完善需求，並陳列展示的模組。
2）如果使用者詳細地表述需求，AI 也可以較好地把不同的需求內容歸類到不同的模組。
• AI 識別 UI：上一步，AI 理清了哪些模組展示，這裡 AI 則是能識別使用哪些 UI 模組適合展示這些資訊。我們可以給定較多美觀的模組讓 AI 來選擇。
基於以上思路，一種“套模板”的技術路線應運而生。
意圖 —> 自上而下的頁面結構 —> “套模板”後的 UI 介面
這個“套模板” 路線一方面需要 AI 將使用者的意圖梳理成可表達的結構，另一方面需要 AI 從已經預製好的模板庫中挑選合適的模板元件，自上而下的“拼裝”。為了簡化這個技術路線的執行機制，我們用上圖表達了原理。但是，由於 AI 在梳理如何表達結構的同時，它已經“知道”什麼是可以表達的，所以上面過程中的後兩步並非是分步完成的，而是“一氣呵成”的。我們透過對開源模型的微調，最終使得這個技術路線可行。
“套模板”的過程有點像拼樂高，你已經知道你有哪些樂高元件了，你基於這些元件來組裝你的創意。而因為模板是提前繪製好的，所以生成介面的美觀度和佈局都比較可控，透過這種方式守住了“美“的下限標準。
但是，這條技術路徑的侷限性是：並非所有的使用者描述都能真的尋找到匹配效果適宜的模板，尋找不到時只能盡力降級處理。有時候，即使找到了不錯的匹配模板，模板的粒度不夠細，也無法完全滿足使用者的表達需求。換句話說，這條路徑在表達力的上限，受限於我們提前預製模板的豐富程度和細緻粒度。
24 年 7 月，使用者 Andy Allen 在 X 上質疑了 Figma 的 Make Design 功能，指出使用 AI 生成的天氣介面，和 iOS 原生的天氣介面非常雷同。
事實上，更大的問題未必是過分相似，而是在模板豐富度有限的情況下，“套模板”路徑下的每次生成結果都不會有太大變化
這引發了設計圈熱烈的討論，大家在辯論 AI 會不會讓更多的設計無比趨同。 Figma 的 CEO，Dylan Field 澄清了這個錯誤，坦誠這是 “Ultimately it is my fault for not insisting on a better QA process for this work and pushing our team hard to hit a deadline for Config. 為了趕工功能上線而沒有進行充分的 QA 工作” 而造成的。Figma 快速下線了 Make Design 功能，並在整改 2 個多月後重新上線，並把功能更名為 First Draft。
如果你理解了初代生成式 UI 的技術路線，應該不難理解，為什麼 Figma 會出現這樣的問題 —— 生成功能的背後包含了大量設計師繪製的模板，一方面”天氣“這個品類的 UI 介面總量就不多，而可能這位繪製天氣元件模板的設計師偷了點懶，過多地借鑑了蘋果原生的介面。
初代生成式 UI 距離真正改變生產力的差距，或許就是“玩具” 版 First Draft 和真正 Make Design 的差距。
03.
技術革新：表達力從簡單到複雜，靈感湧現
有一種技術預判的假設是：如果基礎模型進步沒那麼快，“套模板”這個技術方案持續的時間足夠長，依靠不斷的擴充模板會不會成為可行的產品道路？畢竟每擴充一些新模板，就能多滿足使用者的部分需求。我們甚至考慮過要不要組建一支專業的設計師內容生產隊伍，來提升模板數量和豐富性。
我將這條發展路徑稱為“模板商店”。我們透過不斷提供更多模板，一方面可以提供更多的風格讓使用者選擇，另一方面也一定程度增強了表達力。這個思路類似無程式碼搭建網站的產品，如 Wix，Shopify 等，它們都有自己的“模板商店”。
對這個技術預判的糾結持續了四個月，我們最終並沒有選擇這條道路，但同時我們在生成 UI 上進展緩慢。在這進展緩慢的四個月裡，我們的產品研發團隊對 “程式碼轉 UI” 的技術路線一直念念不忘。這也使得每一次基礎模型有較大更新時，無論開源還是閉源，我們都很熱衷測試一把。
上面兩個例子都是在 Claude 3.5 Sonnet 釋出之初的測試。它確實有一些驚豔：例如生成“天氣”的卡片時它甚至帶上了一些與眾不同的創意。但它和我們劃定的“美”的下限仍有差距，且生成的內容中有很多不符合 UI 設計最基礎規範的問題。
事情的轉機大約出現在 24 年 11 月， Claude 3.5 Sonnet 在程式碼生成領域的重大革新，對產研領域具有里程碑意義。我們也在這個時間後，見證了其他一些基礎模型，如 Qwen 等在程式碼生成領域長足的進步。當我們持續不斷地在“生成程式碼轉 UI”路線上進行實驗時（包括提示詞工程和微調），某一天，驚奇的事情發生了：
“某一次” 突變的實驗結果
再來看看 “表達力” 呢？AI 爆發出無限的表達潛力。上面的例子中（第二張圖），我們甚至生成了一個有模有樣的 “3D Map 編輯器” —— 這並不是一個常見的介面設計。如果使用原來“套模板”的思路，除非我們自己預製了這麼一個不常見的模板，否則 AI 絕無可能生成這樣的介面。
從此，生成式 UI 進入了一個新的階段：由 AI 生成的介面不再只是一個表達力簡單的“玩具”初稿。它可以呈現出更復雜的設計，也支援了更自由的風格。即使這些設計結果還無法匹配業務的設計風格，但它可以充分地向產品設計者提供多樣的設計方案作為參考，這個價值提升是巨大的。這個階段的到來是突變的，又蘊藏無限的能量，我稱其為 “靈感湧現”。
靈感湧現下，AI 能豐富表達出各種 UI。使用者再也沒有相同的提示詞，多次生成雷同介面的問題。
04.
基於設計系統的 UI 生成：是拐點，也是開始
生成式 UI 還面臨著另一個關鍵問題：每個業務都有自己的設計風格，如何滿足不同業務個性化的風格（也就是如何遵循業務的設計系統）。
當我們還在走“套模板” 技術路線時，有一些中大型企業的設計團隊和我們一起共創想法，他們提出過兩個有意思的見解：
• “表達力” 受限對於我們不是障礙，反而是一種需求！我們一點也不希望我們的設計師百花齊放，我們就希望他們完全遵循我們已有的元件模板。（這一刻，我更理解了為什麼設計領域常有觀點批判“設計系統”，企業的這種控制慾是反感的根源。)
• Motiff 既然已經實現了 AI 基於特定設計風格的生成，那如果我們授權資料給你們訓練，是不是你們就可以基於我們自己的風格進行生成了？
這是一種另類的“模板商店”的思路，意味著我們的商店要經營不錯，還需要完成客戶的私人定製。我認為，這個思路至今也仍具備一定可行性，或是說對一類設計團隊行之有效。但是，過去一年的產品開發經驗讓我們也進行了反思：我們究竟是應該匹配已成熟的技術（Technology），打磨產品（Product）以實現 Product-Technology-Fit；還是，我們應該更信仰模型最終會快速進化，用動態的思維去看待問題，時刻準備承接未來新模型技術溢位的能力？ 這一次，我們更堅定地選擇了後者，暫緩了“模板商店”這條並不適應 AI 能力進化的方向，全力轉向生成程式碼路線。
轉變路線後，我們在生成實驗過程中，發現了一個有趣的現象：如果你告訴 AI 直接生成大眾的產品介面，它似乎“懂得”這款產品的設計系統。觀察下面兩個介面：
“bnb 外賣”
乍一看，你是不是有些恍惚，這是 Airbnb 開設的外賣業務嗎？以上兩個介面，是我們在 Motiff 中讓 AI 參照其它外賣產品的介面生成的。在生成介面的提示詞裡，我們提到了“請遵循 Airbnb 的風格進行設計”，除此之外並沒有額外在風格上進行其它提示或訓練。因此，我們推斷大模型在預訓練過程中，“見到過” 這些大眾產品的介面並一定程度“學會了”，使得生成結果可以匹配風格。
當然，如果仔細考究，它在遵循風格規範上並不嚴格。同時，更多的產品是非“大眾”的，基礎模型並未“學過”。但這個發現，讓我們轉向對一條新技術路線的探索：如果我們把模型也看作一個設計師，為什麼不試著讓他在做設計時 “讀懂”你的設計系統？
打個比方，我們做的像是一種 “解碼式翻譯” 工作，向大模型輸出一套它能夠讀懂、也能較好遵循的設計系統。
截止今日，我們在這條路線上已有一些不錯的收穫。我們的“翻譯”工作已能讓模型基於一些通用大型的設計系統，穩定準確地生成介面。同時，我們還搞定了風格的配置，意味著使用者也可以個性化的改編風格。例如：
基於 Ant Design 生成的一套風格統一的健身房後臺介面
以上這一套介面設計是基於開源的設計系統 Ant Design 生成的。你可以看出，我們定製化了風格樣式，輸出的介面樣式風格也保持了很好的一致性。全球有大量的中後臺產品都是使用 Ant Design 的設計系統搭建的，這意味著這部分介面的生產流程已經被極大的改變。
除了讓這些大眾的設計系統被 AI 可控、穩定地“讀懂”，我們也在探索如何“翻譯”不同業務的設計系統讓大模型理解。根據目前試驗的進展，我相信這一天的到來不會太遠。
而當生成式 UI 技術既可以突破錶達力的限制，又可以可控地遵循豐富多樣的風格時，UI 設計領域的重大拐點已然到來。這意味著：
• 大部分設計中需花費大量時間才能構建高保真介面的流程即將被徹底地顛覆。設計者的價值不再是操作設計工具進行構建，而是迴歸設計本身進行更多的思考、呈現更多的創意方案、推進更高質量的決策。
• 過去多年，中大型設計團隊花費巨量時間構建、維護設計系統以保持團隊設計的一致性。當 AI 能以它的方式讀懂並維護設計系統時，是否會產生另一類維度描述的 “新設計系統”？它甚至在大部分時間裡，不需要人為進行定義或維護。當下所定義的“設計系統” 是否會成為不必要的實踐？
這不僅是一個拐點，也將是一個全新的開始。
05.
自問自答和四種假設：AI 時代主流的「介面設計編輯器」是怎樣的？
大模型日新月異，產品設計與研發領域各種新的應用也層出不窮，身為“局中人”，我們幾乎每天都在觀察這個行業新的提問，並進行新的思考。這一章的開頭，我選擇使用自問自答模式， “由小及大” 整理了幾個問題，並提出我的看法。
問題 1：Figma、Motiff 這類專業又精細化的介面設計工具，在 AI 生成邁過拐點後，會演進為怎樣的形態？
我認為會演進成 “專業編輯器 + AI 助理” 的一個普遍故事。
我們已經看到，一個精細的文件編輯器加生成式 AI，使 AI 成為了你的文件助手，Office 稱之為 Copilot，Notion 則擬人化地展現助手形象。IDE （Integrated Development Environment）是程式設計師日常使用的程式碼編輯器，VS Code 加上 AI 後，演進成了 Cursor。在這些例子中，原有的專業編輯器加入 AI 後，並沒有被削弱，而是增強。本身擁有專業編輯器技術壁壘的玩家並不多，競爭有限，他們可以依靠 AI 提升的使用者價值形成商業增值，或是打造一款新的產品。
我覺得介面設計領域也會演進到這一步，AI 會成為介面設計工具中的個人助理，如果產品做得好，它甚至可以無處不在。不過似乎“個人助理”的顯性化在這個領域發展要慢一些，原因可能包括：本身擁有精細化編輯器的玩家不多，以及介面設計領域的生成式 AI 要理解和輸出的格式不如文字、程式碼這麼直接。Motiff 正向這個方向演進，新的形態應該很快就會面向用戶。
我覺得專業編輯器更長遠的競爭也會聚焦在 AI 能力，以及 AI 和專業編輯場景的融合。商業上，只依靠專業編輯器本身的壁壘獲得長期利潤的預期會下降。開源會極大促進這個方向的繁榮，例如，如果不是因為 VS Code 開源，也就不會有 Cursor、Windsurf。
問題 2：介面設計工具領域會出現如 Devin 一樣的 Agent 嗎？
雖然短期有各種挑戰，但保持樂觀，或許產生變化的那一天不會太久。由於 Agent 需要相對閉環地完成一個場景下的任務，人們對專業領域的 Agent 的完成質量預期比通用領域高很多。換句話說，通用領域的 Agent 或許只需要一些場景完成質量比 80% 的泛受眾好，它就產生可觀的價值（有一類說法是覆蓋 90% 的領域，代理 90%的人的 90% 工作，這就是 AGI）；但在專業領域，比較物件發生了變化。如介面設計的 Agent，它可能需要完成一個任務的質量超過 80% 專業設計師才算良好。Devin 面臨同類的挑戰。
另一方面，介面設計 Agent 最終交付的產物大機率和設計師一樣，需要交付到專業的設計工具上，因此 AI Agent 也需要掌握使用專業設計工具。雖然 Figma、Motiff 這些閉源產品可提供 API 在畫布上建立設計，還有 Penpot 這樣的開源產品，但開發者需要深刻理解介面設計的領域知識才可上手構建 AI Agent 。這種理解上的門檻也可能會延緩這個領域的進展，或是開發 Agent 仍是擁有專業編輯器玩家的特權。當然，這個領域的思考和探索會非常有趣，Agent 也可以先從相對簡單可行的任務開始。例如我們最近就在思考能否做一個 Agent，完成設計領域的調研，並讓 AI 直接將調研結果呈現在 Motiff 上。
問題 3：當我們去看一個更通用的“設計類產品” PowerPoint 時，微軟加入 AI Copilot 後使之增強，但似乎並沒有贏得廣泛的好評。反而是這個領域 AI Native 的產品，例如 Gamma，它顛覆了 Presentation 的建立流程，也迅速獲得了使用者和口碑。下一代介面設計工具會是一款顛覆 Figma 的 AI Native 產品嗎？
這是個值得長期思考和觀察的問題。作為 Figma 的挑戰者，Motiff 起初花了兩年時間去打造一個能和 Figma 在功能和效能上相當的介面編輯器，然後我們期望 AI 賦予我們機會做出越來越差異化的產品。嚴格定義下，我們不是一款 AI Native 的產品。另一方面：
• 有產品設計想法的人如此之多，他們都需要這麼複雜的編輯器嗎？—— 我經常聽到身邊的產品經理抱怨 Figma 或 Motiff 的編輯器上手門檻高，甚至要系統地學習兩天的影片課才算入門。
• 當設計者意圖上希望用 “五彩斑斕”的漸變色作為介面設計背景時，他們究竟是需要一個複雜的漸變色設定面板，還是隻是期望挑選酷炫的設計結果？
• 世界上的介面大多是“演進”而創造的，有多少介面設計工作一定需要從 0 到 1？
以上這些問題都導向了一款 AI Native 的產品設計工具是可能的。事實上，我們可觀察到很多 AI 創業團隊的產品經理已經直接使用 V0 進行產品介面的設計。Lovable 這類產品雖然最終目標是生成應用，但它們給出大量的使用案例都是在生成產品設計原型 —— 有意思的是，Lovable 團隊自己說他們最終大部分 Coding 的完成還是在 Cursor 上。它們現在共性的問題是，當用戶對生成結果需要進一步修改時，僅僅依靠 AI 對話編輯是不便利的。
我個人看法是：一類 AI 技術的變化在同一時間賦予了兩種機會：第一種是原有的介面設計工具可以在 AI 加持下增強；第二種是 AI Native 重新打造的產品和工作流，對某類使用者、某些場景的效率更高。前者會被後者在效率革新上衝擊，但後者也會因為“不易精確又完備的表達” 難以完成長途奔跑的最後一公里。拉長時間看，你甚至很難說兩者會不會“相遇”：前者可以在融入 AI 後不斷簡化原有的產品形態，而後者則為了實現更廣泛的需求需要完善精細化的功能。這件事對 Figma 或許有更大挑戰，他們在協同時代積累的巨大使用者資產可能會成為他們在 AI 時代簡化的阻礙。
問題 4：我們觀察到 Vibe Coding 類工具的流行，例如， Bolt.new，Lovable 這類產品，當用戶有產品設計意圖後，能借助這些工具直接生成最終的應用。產品介面的設計似乎只是這些產品流程中的一個環節。以及，不少使用者也在曬出透過提示詞直接在 Claude 3.7 中建立精美的介面。這類直接面向最終結果的生產工具，甚至是基礎模型本身，會不會更為“本質”，讓最終的專業介面設計工具價值大大降低？
首先，部分設計工具正從單點需求向一站式平臺演進。例如，Bolt.new 支援從輸入意圖生成網站，並能即時編輯和部署。Figma 最近也被曝光出了一個“水下專案”，可以直接幫助使用者搭建網站，我猜測這會是一個直接從設計到釋出部署的產品，會和現在市面上 Webflow、Framer 這類產品直接競爭。Canva 最近釋出了新能力 Canva Code。這個邏輯聽起來有點新奇， 畢竟 Canva 以“大眾版 Photoshop”著稱，用於製作平面的視覺海報等物料。但這也不難理解，據我所知，部分海外設計師日常使用 Canva 來設計網站介面。哪裡有介面編輯器，哪裡就有把這些介面直接釋出或是互動化的需求，平臺響應需求、拓展功能也就不足為奇。我們可能忽略 Canva 現如今已是一個使用簡單、卻“並不簡單”的介面編輯器。
但是，這些“新物種”的出現究竟是刺激了新需求的產生，還是抑制了原有專業編輯器的場景？這個問題換個角度看，也在探討 “更通用會不會擊敗更專用？” 歷史上有一些有趣的例子。Sketch 在介面設計領域因為更專用，它搶走了 Photoshop 曾經在 UI 領域的市場，但 Photoshop 因數字化進一步深化發展得更大。Canva 是更通用的，但它似乎並不是去擊敗 Photoshop。Cursor 本質也是因為更專用，它和 Claude 某種程度相互成就 —— 雖然早期也有很多質疑在說 Cursor 只是一個 Claude 的“套殼”，但我相信這樣的聲音越來越少。更專用的工具可長期存在，是因為“專業使用者”的存在。隨著技術發展，“專業使用者” 鮮有最終消失，但專業使用者群體的定義可能因需求變化而變化。“專業使用者”長期存在背後更本質的意義或許在於：他們所從事和追求的工作，是否代表人類在不斷追求更完美、更好。似乎“設計”也屬於這類無止境追求的工作之一。
此外，產品設計領域還有一些其它屬性的問題：
• 人們在做產品設計時，究竟是針對產品原型進行討論從而達成共識更為敏捷，還是針對可以執行的應用進行討論更為充分？
• 如果生成式 AI 讓今後大部分的產品設計基於“生成 – 選擇 – 生成式編輯”，那些跳脫傳統的設計方式或風格該如何達成？那些“匠人精神”的手動調整式設計，雖然佔比很小，但會不會成為產品設計最核心的價值之一？
基於以上，我對介面設計領域長期存在有價值的專業工具是樂觀的。
結合對上面幾個問題的思考，我們向大家分享一下 Motiff 團隊對未來的 「介面設計編輯器」如何演進提出的四種假設：
1）手動介面編輯器 + AI 助理：手動編輯器解決 70% 工作，AI 助理解決 30% 工作。
2）手動介面編輯器 + AI 助理：手動編輯器解決 30% 工作，AI 助理解決 70% 工作。
3）一種更為簡化的 AI 原生的設計編輯器，AI 生成和編輯解決 80% 工作甚至更多，手動編輯解決剩下工作。
4）幾乎不存在獨立的介面編輯器工具價值了。介面編輯器只是一站式 AI 原生的應用生成軟體的一個功能。
• 假設 1 ：這像是我們對 Figma 和 Motiff 未來的預測，AI 若能佔比當下生產流程中 30% 的生產力，就已是一次顛覆。
• 假設 2 ：假設 1 的更樂觀版本，它的終極目標是 AI 助手也是一個專業 Agent，它能代理大部分的設計工作並在設計工具中呈現。也有另一個視角，如果我們觀察 Wix，Webflow 這類傳統的建站工具，介面編輯器本身是他們的一部分且面向非專業使用者，它們在介面編輯器這部分被 AI 融入的佔比理論會更高。
• 假設 3：一種新的定義，近半年湧現的創新產品有很多。我們看到 V0， Magic Patterns，Onlook 都處在這個定義下的雛形階段，雖然瞄向了截然不同的發展方向。
• 假設 4：可能是 Replit，Lovable，Bolt 這類產品所追求的“終局”。
我們並無法線性地演繹未來，發展之中有諸多變數。以上四種假設也不是非此即彼，這四種形態的產品可能會同時存在和演進。而有趣的是，我們正參與其中，我們既是這個演進中的變數，又可以觀察和思考它們長期在介面設計領域的佔比變化。
06.
設計與研發的角色的變化，未來的我們是誰？
最後，我們從技術和工具的視角迴歸到生產者本身，觀察產品設計和研發領域的生產流程從過去到現在的變化，以及趨勢。
上圖展現了一個“古老”的產品研發團隊的分工模式。我們用一個通俗的例子來解釋他們的分工與協作—— 想象你最常用的打車軟體的首頁：
• Product Manager（產品經理）：使用者在叫車時有哪些核心需求？我需要哪些功能或是元素滿足這些需求？
• UX Designer（互動設計師）：使用者要開始叫車了，如何讓使用者輕鬆又明晰的操作？輸入地址的輸入框要放在螢幕什麼位置？如何讓使用者更容易確認出發的精確位置？
• UI Designer（介面設計師）：介面中的卡片需要怎樣的陰影呈現什麼樣的風格？地圖上當前位置的展示用什麼形狀和顏色更適宜？我的 icon 應該使用線性還是面性？
• Frontend Developer（前端工程師）：他們都催我何時開發完成上線……
如今還在這樣分工的團隊已經不多了。過去 10 年，這種傳統分工發生的最顯著的變化是 UX Designer 和 UI Designer 的 “合併”。現在大部分的產品設計師的職位稱呼都統稱為 UX Designer，或是使用更概括的稱呼：Product Designer。
“合併” 直觀的代表了產研領域分工的變化。例如 UX Designer 和 UI Designer 的合併背後，我認為本質上深受“設計系統” 普及化的影響。對應也有兩種說法：
• 說法 1 “設計統一論”：可能是更普遍的說法。原來大多數 UI Designer 日常處理的問題，是一種邊際產出，這些邊際被逐步被固定為了設計系統中的規範。 因此，UI Designer 那部分工作更少被需要，只需要 UX Designer 懂得如何運用設計系統即可。這種說法支援設計系統促進了介面設計領域的效率。
• 說法 2 “設計消亡論”：與 1 相反，認為 UI Designer 在視覺上的創造性更大，無法被固定化的價值更大。而 UX Designer 則是在不斷用重複性的互動方案解決類似問題。這個邏輯也對應了行業中對設計系統的批判：在設計系統越來越固定化的今天，設計師變成那些只會拼樂高的人，“真正的設計” 走向消亡。
“設計統一論”一定程度表明了隨著工具的發展，原有生產流程中由人完成的 “不確定性”的邊際產出，變成了工具可支援的 “確定性”的固定產出，從而人在使用工具後，能力邊界被拓寬，“多能” 勝過了“單能”。Noah Levin（Figma 的 Design VP）用形象的圖例，表述了趨勢的變化：
可見，在技術巨大的變革下，分工後的具體崗位職責非常脆弱。假設我們將產品研發比作要建造一棟房子，我們宏觀的概括現在產品研發領域的分工，我願用 “3D” 來簡述：
• Definer：這座房子滿足使用者什麼需求？為什麼可以創造價值？如何獲得利潤？
• Designer：如何讓居住者有更好的居住體驗？如何讓這座房子的外觀和內部都更漂亮？
• Developer：如何規劃和實施建造這座房子？
”3D“ 一定程度對應了 Noah 圖例中的 PM，Design 和 Eng。
而這“脆弱”的分工方式，未來又會如何呢？
對應“設計統一論”，工具會提供越來越多“確定性”的能力。未來的 Maker 有能力一個人完成一站式的定義、設計、開發。他們可能來自於“3D”中的 Definer，Designer 和 Developer 任何一方，唯一重要的是 Maker 們都需要善於使用最先進的、可提供 “確定性”的工具。
而“設計消亡論”，則讓我們反思：當工具提供太多“確定性” 時，人類追求更美、更好的創意是否會被抹殺？
在我描述 “3D” 角色中，似乎越靠前的角色需要越多的創意，面臨更加“不確定性”的工作。 而這類面對 “不確定性”工作的能力，是否會成為 AI 時代最重要的反脆弱能力？
畢竟，人們會想方設法的用 AI 逐步代理那些 “確定性” 的工作，而面向 “不確定” 的能力可能是我們區別於 AI Agent，可堅守價值的最後陣地。
07.
彩蛋：作者與編輯回答
在看完文章後，Cage 和昊然做了一組快問快答，再次延伸了文章中的部分討論。內容如下：
Cage ：接下來 AI 驅動的設計，是不是工作流一直會保持：文字需求 -> 程式碼生成 –> 前端介面生成？
昊然：是。當前難以想象有另外一條道路不是這樣，或者新正規化也需要基於此。
原因可能是， User Interface 的本質是前端程式碼誕生才有的“物種”。若干年前，沒有 UI 設計師這個職位時，都是“具備審美的研發來一站式完成設計和開發”，例如張小龍做 Foxmail，扎克伯格做校園內的 Facebook。
Cage ：文章提到 Claude 3.5 Sonnet 的更新是程式碼生成領域的重大革新，對產研領域具有里程碑意義。如果直接用 bolt.new 這類前端生成產品，UI 設計的質量如何呢？
昊然：他們在 UI 設計的質量上的效果部分場景是不錯的。或許達不到專業設計師水平，但可能比普通的產品經理、獨立開發者這類 Maker 原來自己鼓搗出的上限要高。
這三家目前在 UI 上最大的問題，主要是修改時的編輯能力。有一個通俗的例子：
右圖是使用 Claude 原生能力形成了一個計算器的介面，參照是左圖的照片。可以發現“加號” 這個按鈕沒有按照預期還原，再用對話的方式讓 Claude 把這個問題改好是有點費勁的。
我覺得以上例子一定程度解釋了“質量”的問題。這好比外賣送到小區門口能力達到了，但送到家門口的最後 100 米不好解決。
Cage ：從靈感湧現到新的正規化是什麼帶來的？是 AI-Native 的設計系統教會給 LLM 的嗎？如果 LLM 能力再進步一個階梯，是否還會需要這樣的設計系統？
昊然：這個新的正規化，關鍵是將 AI-Native （或者說 Friendly for AI to read）的設計系統，以及相關的典型介面作為 Context 輸入給 AI 。
LLM 能力持續進步，還需要這樣的設計系統嗎？這是個好問題，我認為長期看不需要這樣的系統，但要達到近乎完美的設計還原，短期也需要設計工具本身的互動能力，或者一些功能（也可能是小模型）等來彌補。
Cage ：如果 Bolt.new 等產品未來帶來很多長尾個性化軟體，對高質量 UI 設計的需求未來是否會變少？哪些軟體的 UI 是即時變化的，可能和現在對 UI 互動設計的固定需求不一樣？
昊然：這是個令人深思的問題。我把它分拆為兩個問題。
分拆問題 a：我們怎麼去 Bet Cursor 的市場？也會被掀翻嗎？
我們需要關注 Cursor 的上游其實是需要【Define & Design】的設計交付的，目前這塊佔主導的還是 Figma。
我有種觀點是：需要交付給研發來完成的【Define & Design】需求並不會減少，應該會因為世界數字化的程序還會有增量。但這類需求其實代表的是“複雜、高質量的研發需求”，未必代表“複雜、高質量的 UI 需求”。
從這個視角，我 Bet Cursor 一類還是個長期市場（即世界還需要更多的專業程式設計師）。但我對配合 Cursor 的上游是否還是 Figma 主導（或是 Motiff +AI）有懷疑或者擔憂。
複雜 UI 是有可能減少的。因此，我當下信心指數高的是假設 3——這裡還有個原因是假設 3 更 AI-Native 的產品，設計對接 AI Coding 工具其實也更絲滑。
以上，AI Native 的 Product Design 工具有望蠶食 Figma 市場。但是這個工具和 Bolt 不是一類，因為它的主要交付目標是 AI Coding 產品。
分拆問題 b：Bolt.new、Lovable 長期解決到底是怎樣的需求？ 他們和上述假設 3 的產品是一種怎樣的關係？
這些產品解決的問題在上一個時代就一直存在 —— 例如建站工具、低程式碼或無程式碼工具。只是 AI 讓這個事情門檻更低、上限更高，它會帶來一批增量，世界上更多的人有權利成為產品 Maker。
這種從 ideas 到 app 的一站式產品會面臨的一個挑戰是，人類設計產品的本質是一定要設計出可應用的，還是完成設計後再變成應用？
如果要直接是可執行的應用，這裡可能會存在不少“浪費”，以及除錯層面的效率損失——無論是人除錯，還是 AI 除錯。
另一個角度來說，產品設計的過程其實是個不易共識的過程和無法標準化的過程，而研發是個容易標準化（或者 AI 產出標準化）的過程。
因此，我認為這類產品有可能會長期受限兩個因素：
1）組織不能大。（人多了，每個東西都要做到執行才能共識不實際）
2）應用本身複雜度不能高。（難度會很大）
上述的 1） 和 2） 其實有個“敵人”是業務天然的發展。或者業務大到一定規模，最終可能大家還是會走向更多 Design 和 Develop 分離的實踐。
這裡還有一些問題，我淺淺思考過，但沒想太明白。這些都是對未來整體 UI 介面增量的“更樂觀主義”：
觀點 1：如果 AI Coding 的基礎能力足夠的牛逼，人類會不會進入軟體的產能過剩？那更大的價值卷什麼？是不是應該卷設計和使用者體驗？那更精細化的設計工具（AI 也未必搞得出來的）有了更大商業價值？
觀點 2：如果 AI Coding 讓產品個性化的效率顯著提升，人們的預期是什麼？
會不會一個 1000 人的企業用飛書，有 100 個團隊，每個團隊希望自己的飛書介面不一樣？每一個人希望自己的飛書介面不一樣？
或者說那時候的 IM 並不需要一體化，而是前端設計都可以使用者自主定義，服務端提供一套 SaaS 服務？
Cage ：Motiff 團隊對未來的 「介面設計編輯器」提出了四種假設：
1）手動介面編輯器 + AI 助理：手動編輯器解決 70% 工作，AI 助理解決 30% 工作。
2）手動介面編輯器 + AI 助理：手動編輯器解決 30% 工作，AI 助理解決 70% 工作。
3）一種更為簡化的 AI 原生的設計編輯器，AI 生成和編輯解決 80% 工作甚至更多，手動編輯解決剩下工作。
4）幾乎不存在獨立的介面編輯器工具價值了。介面編輯器只是一站式 AI 原生的應用生成軟體的一個功能。
是否有對這四種 scenario 預估的機率分佈？
昊然：如果到 2030 年，我大膽猜測：
2）佔比 20%，3）佔比 60%，4）佔比 20%（比例指的是，工具分別參與客觀世界需要產品介面的產研工作的佔比）。
我比較看好 AI 作為設計助理最終在執行層面做的事情比人更多，人的主要價值會在創意提供上，所以 1）和 2）中更傾向達到 2）的狀態。同時，我認為複雜 UI 工具在高要求場景下的能力不易被短期取代，我們不必低估“古典設計師”會長期使用它們的意願。
4）所對應的賽道，一方面是 AI 會革命現有的低程式碼/無程式碼產品（存量），另一方面是低門檻會讓獨立動手做產品的人變多（增量）。可能很多人會非常看好這個假設，但我沒那麼激進。
我最看好 3），原因是：一個定位 Define+Design、交付給研發 Devlop 的產品設計工具，比較本質，是長期品類，它的終局就是一個專業產品設計 Agent。它比今天的 Figma 上手容易很多，會蠶食今天覆雜 UI 工具的市場，成為真正意義上 AI 時代設計工具。同時，我還有一個猜想是“釋出設計，部署上線”可能是這類產品的一個附加值，它也會蠶食一部分今天 Website Build 的市場。以上，我對這個型別工具期待最高。
排版：楊樂樂
延伸閱讀