前端這個東西,正在被AI重新畫出來

作者:X0後的回憶
日期:2026年6月5日 下午10:14
來源:WeChat 原文

整理版優先睇

速讀 5 個重點 高亮

生成式UI有三種模式,選擇關鍵在控制權嘅取捨

整理版摘要

呢篇文章係作者刷到Shubham Saboo一條推文之後嘅思考。Saboo話,前端曾經係固定嘅,但呢個時代完咗。作者認同呢個判斷,並想解釋清楚生成式UI(Generative UI)係點樣改變我哋用軟件嘅方式。文章背景係作者留意到AI令到界面可以即時生成,而唔係預先畫死。佢想幫讀者理解生成式UI嘅底層邏輯、三種實現方式,同埋點樣根據場景選擇。整體結論係:控制權由開發者轉向AI,但唔係全部放曬手,而係要識得分場合決定放幾多控制權出去。

作者先用「組件」概念解釋點解AI可以生成界面,再引入AG-UI協議作為傳送指令嘅標準管道。然後重點講三種模式:受控(Controlled)似點菜單,AI只負責揀你預先整好嘅組件;聲明式(Declarative)似俾配方,AI只輸出描述,你嘅前端照單拼裝;開放式(Open-ended)似俾曬廚房AI,直接寫HTML,你只可以隔住沙箱睇住。三種模式控制權由開發者到AI遞增,靈活性越高越難控制。

最後Saboo俾咗個好實用嘅決策樹,仲提醒好多團隊根本冇主動揀模式,只係俾框架默認推住行,呢種「漂移」先係最大問題。作者反思,控制同放手之間嘅度,就係未來最值錢嘅判斷力。

  • 前端由固定變成動態生成,控制權由開發者轉向AI,呢個時代已經開始。
  • 生成式UI有三種模式:受控(點菜單)、聲明式(俾配方)、開放式(俾廚房),控制權逐級遞增。
  • 受控模式適合設計精準嘅場景,但組件多咗會撞牆;聲明式平衡靈活同可控,係生產環境首選;開放式只適合一次性、用完即棄嘅交互。
  • 大多數團隊嘅選擇係「漂移」——默認用框架自帶受控模式,見到限制就跳去開放式,而冇主動按場景決策。
  • 用Saboo嘅決策樹:有像素級設計稿就用受控;幾十種卡片就用聲明式;一次性可視化就用開放式;冇主意就用聲明式做默認。
整理重點

前端曾經係固定嘅,而家唔係啦

前幾日刷推,刷到 Shubham Saboo 一條推文,有過千個讚。佢開頭就話:前端曾經係個固定嘅嘢。設計師畫出嚟,工程師搭出嚟,用戶用到咩就係咩。然後下一句就係:That's over。我承認俾呢句話㯫住咗,因為佢講中咗我呢年幾隱隱約約感覺到、但一直講唔清楚嘅嘢。

前端曾經係個固定嘅嘢——That's over

我哋呢代人用軟件,習慣嘅係咩?打開一個App,入面點樣早就定好,邊個掣喺左上角、邊張卡片顯示咩、邊個列表點排,全部係產品經理同設計師喺你下載之前拍板嘅。你只係喺佢哋畫好嘅框框入面點嚟點去。界面係死嘅,你係生嘅,但你只能喺死嘅界面入面鬱。呢件事幾十年都係咁,直到大模型嚟咗。

界面係死嘅,你係生嘅

整理重點

生成式UI係咩?組件同AG-UI協議

首先要解釋一個詞Generative UI,生成式UI。聽落好玄,其實拆開好簡單。你問AI上海今日天氣點樣,舊方法佢會回一段字:「上海今日晴,28度,濕度60%,東南風3級。」一段話,你自己讀。生成式UI係點?佢唔俾字你,直接掉張天氣卡片出嚟,有圖標、有未來七日温度曲線,你可以㩒嚇切換攝氏華氏,仲可以滑動睇後面幾日。界面本身,變成AI吐出來嘅嘢。

Ask for a table, get a table. Not a paragraph describing one.

Saboo 呢句我好鍾意:你要一張表,就俾一張表你,而唔係一段描述張表嘅廢話。點解做得到?因為前端世界有個叫「組件」嘅嘢,React組件就好似一個會接收數據、然後吐出畫面嘅小函數。寫一次,到處複用。以前係寫代碼嘅人決定邊個組件用咩數據,而家生成式UI將呢個決定權交俾AI:AI話要渲染天氣卡片,數據係上海28度。呢行原本由人寫死嘅代碼,AI幫你寫咗。

Nielsen Norman Group 呢個可用性研究權威俾嘅定義更產品:由AI實時動態生成嘅、為每個用戶量身定做嘅界面。佢哋話:從為平均用戶設計,轉向為每一個具體嘅個體、喺佢此時此刻嘅處境裏設計。過去廿年所有產品都係為想像中嘅平均用戶做,一個界面幾百萬人用,一模一樣。而家AI可以做到:你係你,我係我,打開同一個App,見到嘅嘢可以完全唔同。

從為平均用戶設計,轉向為每一個具體嘅個體

技術上,AI點樣將界面傳到你個mon?就要講到三套協議:MCPAnthropic搞,Agent靠佢調工具查數據)、A2AGoogle搞,Agent之間對話)、同埋 AG-UI。AG-UI 係 Agent 同你前端之間嘅管道,Agent決定渲染天氣卡片,卡片要顯示喺你瀏覽器,中間就靠呢條管將渲染指令加數據流過去,仲係雙向嘅,你喺界面改咗嘢,Agent即刻知。呢個協議俾人低估咗,因為佢變咗公共標準,唔理你用LangGraph、Google ADK定Microsoft框架,只要識講AG-UI,任何前端都可以接住Agent吐出嚟嘅界面。

AG-UI係讓生成式UI跨框架跑嘅路

整理重點

三種模式,控制權由你到AI

鋪墊咁耐,終於到最精彩嘅部分。Saboo話,大家都講生成式UI,但其實根本冇統一做法,有三種,而且最要命係多數團隊揀咗其中一種,自己都唔知。呢三種由你揸得最實、到完全放俾AI,排成一條線。佢用做菜比喻,一講就明。

三種做法:受控、聲明式、開放式

第一種叫受控(Controlled),即係點菜單。餐廳有固定菜單,AI係服務員,你話想食辣,佢就從菜單揀條水煮魚俾你。菜係廚房早就整好,AI淨係負責揀,唔使做。擺盤次次一樣,你話事。呢個模式最常見,但好快會撞牆——Saboo計咗筆數:每個組件加說明大約400 token,你有25個組件,每輪對話就先食一萬 token,仲要組件多咗AI會揀錯。所以受控只適合十幾個核心流程、對設計精度要求極高嘅場景。

每個組件400 token,25個就一萬,每輪都要交税

第二種叫聲明式(Declarative),即係俾配方清單。AI唔直接俾菜,而係俾張單:要一個盤,入面放魚、辣椒、香菜,擺成圓形。廚房(即你嘅前端)照單組裝。AI淨係描述要咩,唔掂具體樣貌。呢個模式抹平咗token問題——你有50種卡片定500種,AI永遠淨係見到一個工具、一份清單嘅格式,token消耗紋絲不動。Saboo話,聲明式係多數真正上咗生產嘅Agent應用最後會行嗰條路,天生為長尾場景準備。但代價係佈局交咗俾AI,同樣清單每次可能生得唔一樣,如果係像素級必需要精準嘅法律免責聲明或營銷頁面,就唔適合。

聲明式:抹平token消耗,天生為長尾場景

第三種叫開放式(Open-ended),即係直接將廚房鎖匙掉俾AI,你愛做咩做咩。AI直接寫原始HTML,你掉入一個隔離嘅沙箱(iframe)渲染,免得佢炸咗成個頁面。聽落超爽,最自由,乜都得。但Saboo親身試過,同一個prompt,星期一畫咗個清清爽爽嘅綠色柱狀圖,星期二變橙色密密麻麻儀表盤,星期三竟然出咗個Windows 95復古藍色像素風,品牌天天變,產品顯得唔正經。所以開放式真正嘅用途係一次性、用完即棄嘅交互——用戶唔在意界面靚唔靚,睇完一次以後唔會再睇。例如Google AI概覽入面臨時生成嘅小嘢,就係呢個路數。

開放式:將廚房鎖匙掉俾AI,你只可以隔住沙箱睇

整理重點

點樣揀最啱?抄Saboo個決策樹

三種模式嘅分別根本唔係技術細節,而係一個樸素問題:呢個界面,到底邊個話事?受控你話事,聲明式清單話事,開放式AI話事。控制權呢支桿由左至右,由你手一路滑到AI手。越右越靈活,亦越不可控。Saboo俾咗條好乾脆嘅決策樹,可以直接抄作業:

  • 設計師手上有像素級完整稿?用受控。
  • 要上幾十種卡片、幾十種小組件?用聲明式。
  • 一次性、用完即棄嘅可視化?用開放式。
  • 拿唔定主意?默認聲明式,將最重要嘅三條流程升級做受控,但永遠唔好將開放式做默認。

佢仲教咗個自檢辦法:如果你已經喺度做,但唔肯定自己係邊種模式,就數一數你嘅渲染工具有幾多個。超過15個,你就在受控模式,而且離嗰堵牆已經唔遠,呢個禮拜就要開始接入聲明式。

超過15個渲染工具?你已經喺受控模式,準備撞牆

整理重點

控制同放手之間,最值錢嘅判斷力

寫到呢度,諗起Saboo推文最扎心一句:真正嘅錯誤唔係揀錯模式,而係你根本唔知自己揀咗。呢件事邊個只係寫程式先發生?我哋呢一年用AI,有幾多選擇係真係諗清楚先做,有幾多隻係工具默認擺喺嗰度,你就順手用咗?默認用某個模型、默認用某種工作流、默認叫佢幫你做某件事。我哋以為自己喺度揀,其實大部分時間係被框架推住行,被默認值推住行。漂移——呢個詞我琢磨咗好耐。

漂移:被默認值推住行,以為自己喺揀

喺AI呢個新世界,舊有嘅確定性正在土崩瓦解。過去買個軟件,佢長咩樣係固定嘅,確定的,你心入面踏實。而家唔係,界面係生嘅,會變嘅,每個人睇到嘅都唔同。呢種唔確定令好多人慌,但我一直覺得,真正嘅能力唔係消滅唔確定,而係搞清楚你喺咩場景,願意將幾多控制權讓出去。需要分毫不差嘅地方,你揸緊,用受控;海量長尾嘅地方,你鬆手,用聲明式;無所謂嘅地方,你乾脆全放,用開放式。

需要分毫不差,用受控;海量長尾,用聲明式;無所謂,用開放式

呢啲就係我哋同AI相處應有嘅樣。唔係要麼全控制,要麼全撒手,而係諗清楚每件事,你到底企喺控制權嗰支桿嘅邊個位。回返開頭,前端曾經係固定嘅嘢,嗰個時代結束咗。我而家越嚟越信呢個判斷。界面正由一張設計師畫死嘅圖,變成AI睇住你、為你呢一刻嘅需求即場畫出來嘅嘢。佢會越嚟越懂你,越嚟越貼合你此時此刻想做的事。而我哋要學嘅,唔係點樣將呢一切重新揸返喺手,而係學識喺合適嘅時候,優雅咁放手。


前幾日碌推,碌到一條推文,有成1000幾個讚。

發嗰個人叫 Shubham Saboo,開頭第一句說話,我望住睇咗好幾秒。

佢話,前端曾經係一個固定嘅嘢。設計師畫出嚟,工程師砌出嚟,用戶收到咩就用咩。

然後下一句,The frontend used to be a fixed thing. That's over.

完咗。

生成式UI就是新前端

我承認我被呢句嘢撳住咗。唔係因為佢有幾咁石破天驚,而係因為佢講中咗一件我呢一年多嚟隱隱約約感覺到、但一直未講得清楚嘅事。

我哋呢代人用軟件,習慣嘅係咩?

你打開一個 App,裏面生咩樣,係一早定好嘅。邊個掣喺左上角,邊張卡片顯示咩,邊個列表點排,全部都係產品經理同設計師喺你下載之前就決定好嘅。你只係喺佢哋畫好嘅框框入面,㩒嚟㩒去。

界面係死嘅。你係生嘅,但你只可以喺死嘅界面入面鬱。

呢件事天經地義,幾十年都係咁。直至大模型嚟咗。

講到呢度,我要先解釋一個詞,Generative UI,生成式 UI。

聽落好玄,其實你拆開嚟睇就好簡單。

你問 AI,上海今日天氣點樣。

舊方法,佢回你一段字,上海今日晴,28 度,濕度 60%,東南風 3 級。一段說話,你自己讀。

生成式 UI 係咩呢,佢唔俾字你,佢直接掉一張天氣卡片俾你。有圖標,有未來七日嘅温度曲線,你仲可以㩒一下切換攝氏華氏,可以滑動睇後面幾日。

界面本身,變咗 AI 吐出嚟嘅嘢。

你細味一下呢兩者嘅差別。前者係 AI 喺描述一樣嘢,後者係 AI 直接將嗰樣嘢做出嚟俾你睇。一個係講,一個係做。

Saboo 嗰條推入面有句說話我好鍾意,Ask for a table, get a table. Not a paragraph describing one. 你要一張表,就俾你一張表,唔係俾你一段描述呢張表生咩樣嘅廢話。

呢度要插一句更底層嘅嘢,如果唔係有啲朋友可能會迷茫。

你所講嘅呢張卡片,喺前端世界入面有個名,叫組件,React 組件。

點理解組件呢,你當佢係一個會接收數據、然後吐出畫面嘅小函數。我傳個城市叫上海畀佢,傳個温度叫 28,佢就渲染出一張上海 28 度嘅卡片。我換個北京 15 度傳入去,佢就變成北京嘅卡片。同一個模,餵唔同嘅數據,出唔同嘅畫面。

寫一次,周圍重用。呢個就係組件。

咁以前係邊個決定將邊個組件、用咩數據渲染出嚟?係寫 code 嘅人,係我。我喺 code 入面老老實實寫低,渲染一張上海嘅天氣卡片。

生成式 UI 做嘅嘢,就係將呢個決定權,由我手上面,交咗畀 AI。

而家變成 AI 話,我要渲染一張天氣卡片,數據係上海 28 度。呢行原本由人寫死嘅 code,AI 幫你寫咗。

想通呢一層,你再回頭睇 Saboo 嗰句 That's over,就明佢感慨緊咩。

界面呢樣嘢,第一次,唔再係人事前畫死,而係 AI 睇住你當下問嘅問題,現場幫你畫出嚟。

設計圈有個機構叫 Nielsen Norman Group,業界搞可用性研究嘅老牌權威。佢哋俾生成式 UI 嘅定義更加偏產品視角,叫由 AI 實時動態生成、為每個用戶量身訂做嘅界面。

佢哋話咗一句說話,我覺得好入肉,叫從為平均用戶設計,轉向為每一個具體嘅個體、喺佢此時此刻嘅處境入面設計。

你諗嚇,過去幾十年,所有產品都係為咗個想像中嘅平均用戶而做嘅。一個界面,幾百萬人用,生得一模一樣。因為冇辦法,人手畫唔曬。

而家 AI 可以做到。你係你,我係我,我哋打開同一個 App,見到嘅嘢可以完全唔同。

講到呢度,可能識技術嘅朋友會問,呢樣嘢 AI 係點將界面傳到我個 mon 上面?

呢個就要講到 2026 年 Agent 世界入面好重要嘅一套基建,三個協議。

Agent時代的三大協議

你當 Agent 係一個大腦,佢要同外面三個方向打交道。

向工具同數據庫嗰個方向,行嘅係 MCP,呢個係 Anthropic 搞嘅,Agent 靠佢去叫工具、查數據。

向第二個 Agent 嗰個方向,行嘅係 A2A,Google 搞嘅,一個 Agent 將啲嘢分俾另一個 Agent 做,佢哋對話用呢個。

向用戶呢個方向,行嘅係 AG-UI,Agent 要將界面遞到你眼前,行嘅就係呢條路。

頭兩個同我哋今日講嘅關係唔大,我列曬出嚟只係想俾你睇清呢個分工。真正同生成式 UI 有關嘅,係 AG-UI 呢條線。

佢係 Agent 同你嘅前端之間嗰條喉管。Agent 喺 server 上面決定咗要渲染天氣卡片,但係卡片要顯示喺你個 browser 入面㗎,中間隔咗十萬八千里,呢條喉管就負責將渲染指令加數據,穩穩陣陣咁流過去。而且係雙向嘅,你喺界面上面改咗啲咩,Agent 嗰邊都會即刻知道。

講真,我覺得 AG-UI 呢樣嘢被低估咗。喺佢出嚟之前,各家框架自己造各自嘅喉管,邊個都駁唔到邊個。佢出咗之後,變成一個公共標準,理得你係 LangGraph 定 Google 嘅 ADK 定 Microsoft 嘅框架,只要識講 AG-UI,任何前端都可以接住你吐出嚟嘅界面。

生成式 UI 係嗰個目標,AG-UI 係令呢個目標可以跨框架運行嗰條路。

好,鋪墊咗咁多,終於到 Saboo 嗰條推入面最令我拍大脾嘅部分。

佢話,個個都喺度講生成式 UI,但其實根本冇一種統一嘅做法。有三種。而且最致命嘅係,絕大部分團隊都已經揀咗其中一種,但係根本唔知自己揀咗。

呢句說話有啲刺耳,但我覺得佢講嘅係事實。

呢三種做法,由你揸得最實、到完全放曬手俾 AI,排成一條線。

三種模式,三種架構

最左邊叫受控,Controlled,組件你預先整好,AI 只負責揀邊個。

中間叫聲明式,Declarative,AI 發出一份描述清單,你個應用跟住張清單去砌組件。

最右邊叫開放式,Open-ended,AI 直接寫原始 HTML,你個應用掉入一個沙箱入面渲染。

齋係咁講你可能冇感覺,我用煮飯打個比喻,一下就明。

受控模式,就係點菜單。

餐廳有一份固定菜單,AI 係嗰個侍應。你話「我想食辣」,侍應就由菜單入面揀一道水煮魚出嚟俾你。餸係廚房一早整好嘅,AI 只負責揀,唔負責煮。擺盤係點樣,次次都一模一樣,全部由餐廳話事。

受控模式,前端掌控UI

你睇呢張圖,右邊一格一格,就係你預先整好嘅組件庫,圖表、按鈕、表格、日曆、搜尋框、開關、頭像、鈴鐺,一格一個,都係現成嘅。AI 做咩呢,佢由入面揀中一個,就係嗰個虛線框住嘅格,然後渲染出嚟,飄上去俾用戶睇。

你整組件,Agent 只負責揀。就係咁簡單。

呢個係絕大部分團隊起步嘅地方,亦係絕大部分團隊卡死嘅地方。

點解會卡死?Saboo 計咗條數,我睇完背脊有啲涼。

你註冊嘅每一個組件,喺用戶未開聲之前,就已經霸佔緊 AI 嘅上下文窗口。一個組件連佢嘅說明,大概 400 個 token。你有 25 個組件,就係一萬個 token,每一輪對話都要先食咗呢一萬。呢個係每次 request 都要交嘅税。

更致命嘅係,組件一多,AI 仲會揀錯。餅圖同環形圖,喺佢眼中都係展示比例嘅,佢就會開始估。

所以受控呢條路,適合嗰啲你得十幾個核心流程、對設計精度要求極高嘅場景。組件一多,你嘅 code 量就跟住用例線性暴漲,牆就喺前面等緊你。

咁撞牆點算?向右行一步,聲明式。

都係煮飯嘅比喻,聲明式係俾配方清單。AI 唔直接俾餸你,佢俾你一張紙,要一個碟,裏面放魚、辣椒、芫茜,擺成圓形。廚房,即係你嘅前端,跟住呢張紙現場組裝。

AI 淨係描述要咩,佢根本唔掂具體生咩樣。

聲明式模式,agent發出schema

呢張圖將成個過程畫得好清楚,由左到右三段。

最左邊,AI 吐出一份 JSON,就係嗰份配方清單,裏面寫住出發地、目的地、價錢、航空公司,全部係結構化嘅描述。

中間,係一堆散落嘅組件零件,textbox、日曆、數字、飛機圖標,清單入面嘅每一項,對應到呢啲零件上面。

最右邊,啪,渲染出嚟,三張實實在在嘅航班卡片,SFO 飛 JFK,312 美金,LAX 飛 ORD,276 美金。

一個工具,無數種 UI。呢個係佢最正嘅地方。

仲記唔記得受控模式嗰筆嚇人嘅 token 數?聲明式呢度,呢筆數被抹平咗。

你有 50 種卡片定 500 種,AI 見到嘅永遠就係一個工具、一份清單嘅格式。組件庫隨便大,每一輪嘅 token 消耗,紋風不動。

呢個就係點解 Saboo 話,聲明式係大多數真正上咗 production 嘅 Agent 應用,最後都會行到嗰條路。佢天生就係為長尾場景而設,各種 dashboard、結果頁、表單、卡片、小組件,你有幾多種花樣佢都接得住。

當然佢都有代價。佈局呢家嘢,你交咗俾 AI。同一份清單,今次行出嚟同下次行出嚟,可能喺你嘅組件庫範圍入面生得有啲唔同。如果你做嘅係法律免責聲明、係營銷頁面、係嗰啲 pixel 級要分毫不差嘅嘢,咁聲明式唔啱你,乖乖地返去用受控。

天下冇白來嘅靈活。

最右邊,開放式。呢個就刺激喇。

煮飯嘅比喻行到盡頭,開放式係直接將廚房鎖匙掉俾 AI,你鍾意煮咩就煮咩。冇菜單,冇配方,食材做法全部你自己定。你個老闆,只可以喺廚房外圍圍一圈防火牆,即係個沙箱,唔好俾佢成棟樓燒咗就得。

AI 直接寫原始 HTML,你掉入一個隔離嘅 iframe 入面渲染,費事佢騎劫你成個頁面。

聽落好爽係咪,最自由,乜都做到。但你估下點。

開放式模式,沒有目錄沒有規則

呢張圖我第一眼見到就笑咗,因為太真實。

同一個 prompt,留意,係同一個,右邊個大括號標得好清楚。

星期一,AI 幫你畫咗個清清爽爽嘅綠色柱狀圖,極簡,好剋制。

星期二,同一個需求,佢幫你整咗個橙色嘅密密麻麻嘅儀錶板,一堆圖表一堆數字,28.6K、47.3K,逼到實。

星期三,好嘢,佢同你嚟咗個復古藍色像素風,活脱脱一個 Windows 95 嘅界面,FLIGHT OVERVIEW v1.0。

三日,三種完全唔同嘅風格。

Saboo 自己話,佢試過將開放式當成一個 Agent 嘅主界面嚟用,一個禮拜就撤咗。星期二變新野獸主義,星期三變 iOS 4 復刻版,品牌日日變,產品顯得好唔正經。

但開放式唔係冇用,係用錯咗地方。

佢真正嘅命門場景只得一個,一次性、用完即棄嘅交互。用戶根本唔 care 界面生咩樣,睇完呢一次,成世都唔會再睇第二次。

同我講下電子係點鬱嘅。將我最近十次查詢畫成一張奇怪嘅柱狀圖。可視化一下呢個 API 返回嘅數據。

就係呢啲。你睇 Google 嘅 AI 概覽入面啲臨時生成嘅小嘢,就係呢條路。一次性,拋棄式,沙箱入面玩嚇,但永遠唔好攞佢做門面。

三種模式講完,你大概都咀嚼出味道嚟。

佢哋嘅分別,根本唔係技術細節嘅分別,而係一個好樸素嘅問題,呢個界面,到底邊個話事。

受控,你話事,組件你整、樣你定,AI 只有揀權。 聲明式,清單話事,AI 填內容,但係要喺你定嘅嗰套食材庫入面填。 開放式,AI 話事,由內到外佢全包,你只可以喺出面拉個防火牆。

控制權呢支棍,由左到右,一路由你手入面,滑到 AI 手入面。越右邊越靈活,亦越難控制。

咁到底點揀?Saboo 俾咗個好爽脆嘅決策樹,我覺得可以直接抄功課。

設計師手上面有 pixel 級嘅完整稿?用受控。 要上幾十種卡片、幾十種小組件?用聲明式。 一次性、用完即棄嘅可視化?用開放式。 揸唔定主意?默認聲明式,將最重要嘅三個流程升級做受控,但永遠唔好將開放式當默認。

佢仲教咗個好實用嘅自查方法。如果你已經做緊,但唔肯定自己到底係邊種模式,就數下你嘅渲染工具有幾多個。超過 15 個,你就係喺受控模式入面,而且離嗰堵牆已經唔遠,今個星期就要開始接聲明式。

寫到呢度,我想起 Saboo 嗰條推入面最扎心嘅一句。

佢話,真正嘅錯,唔係你揀錯咗模式。而係你根本唔知自己揀咗。

大部分團隊一開波就默認用受控,點解,因為框架默認就係受控。撞上 25 個組件嗰堵牆之後,佢哋一睇 demo 入面開放式咁靚,轉頭就撲過去。

呢兩步,都唔係決策。都係漂移。

我見到呢度突然有啲感觸。呢件事邊係淨係發生喺寫 code 嗰度㗎。

我哋呢一年用 AI,有幾多選擇,係真係諗清楚先做嘅,又有幾多,只係因為工具默認擺咗喺度,你就順手用咗。默認用某個模型,默認用某種工作流,默認叫佢幫你做某件事。我哋以為自己喺揀,其實大部分時間係俾框架推住行,俾默認值推住行。

漂移。呢個詞我琢磨咗好耐。

喺 AI 呢個新世界入面,舊嗰套確定性正在瓦解。以前你買一個軟件,佢生咩樣係固定、確定嘅,你心入面踏實。而家唔係喇,界面係生嘅,會變嘅,每個人見到嘅都唔同。呢種不確定,令好多人慌。

但我一路覺得,真正嘅能力,唔係去消滅呢種不確定,而係搞清楚你喺咩場景之下,願意將幾多控制權讓出去。

需要分毫不差嘅地方,你揸緊,用受控。海量長尾嘅地方,你鬆手,用聲明式。無所謂嘅地方,你乾脆全放,用開放式。

呢個唔就係我哋同 AI 相處應有嘅樣咩。唔係要唔係全部控制,就係全部放手,而係諗清楚每一件事,你到底企喺嗰支棍嘅邊個位。

返去開頭 Saboo 嗰句說話,前端曾經係一個固定嘅嘢,嗰個時代完咗。

我而家越來越信呢個判斷。

界面呢樣嘢,正在由一張設計師畫死嘅圖,變成 AI 望住你、為你呢一刻嘅需求當場畫出嚟嘅嘢。佢會越來越明你,越來越貼合你此時此刻想做嘅事。

而我哋要學嘅,唔係點樣將呢一切都重新揸返喺手,而係學識喺合適嘅時候,優雅咁放手。

控制同放手之間嗰個度,可能就係未來好長一段時間入面,最值錢嘅判斷力。


以上,既然睇到呢度,如果覺得唔錯,隨手點個讚、睇緊、轉發三連啦,如果想第一時間收到推送,都可以俾我個關注⭐~ 多謝你睇我篇文章,我哋,下次再見。



前幾天刷推,刷到一條推文,1000多個贊。

發的人叫 Shubham Saboo,開頭第一句話,我盯着看了好幾秒。

他說,前端曾經是個固定的東西。設計師把它畫出來,工程師把它搭出來,用戶拿到什麼用什麼。

然後下一句,The frontend used to be a fixed thing. That's over.

結束了。

生成式UI就是新前端

我承認我被這句話鈎住了。倒不是因為它多麼石破天驚,而是因為,它說中了一件我這一年多來隱隱約約感覺到、但一直沒能講清楚的事。

我們這代人用軟件,習慣的是什麼?

你打開一個App,裏面長什麼樣,是早就定好的。哪個按鈕在左上角,哪張卡片顯示什麼,哪個列表怎麼排,全是產品經理和設計師在你下載它之前就拍板了的。你只是在他們畫好的框框裏,點來點去。

界面是死的。你是活的,但你只能在死的界面裏動。

這事兒天經地義,幾十年都這樣。直到大模型來了。

說到這個,我得先解釋一個詞,Generative UI,生成式UI。

聽着挺玄乎,其實你拆開看就特別簡單。

你問AI,上海今天天氣咋樣。

老辦法,它給你回一段字,上海今天晴,28度,濕度60%,東南風3級。一段話,你自己讀。

生成式UI是啥呢,它不給你字了,它直接給你甩出來一張天氣卡片。有圖標,有未來七天的温度曲線,你還能點一下切換攝氏華氏,能滑動看後面幾天。

界面本身,成了AI吐出來的東西。

你品一下這兩者的差別。前者是AI在描述一個東西,後者是AI直接把那個東西做出來給你看。一個是說,一個是做。

Saboo那條推裏有句話我特別喜歡,Ask for a table, get a table. Not a paragraph describing one. 你要一張表,就給你一張表,而不是給你一段描述這張表長啥樣的廢話。

這裏得插一句更底層的東西,不然有些朋友可能會懵。

你說的這個卡片,在前端世界裏有個名字,叫組件,React組件。

怎麼理解組件呢,你就把它想成一個會接收數據、然後吐出畫面的小函數。我給它傳個城市叫上海,傳個温度叫28,它就渲染出一張上海28度的卡片。我換個北京15度傳進去,它就變成北京的卡片。同一個模子,喂不同的數據,出不同的畫面。

寫一次,到處複用。這就是組件。

那以前是誰決定把哪個組件、用什麼數據渲染出來的?是寫代碼的人,是我。我在代碼里老老實實寫下,渲染一張上海的天氣卡片。

生成式UI乾的事,就是把這個決定權,從我手裏,交給了AI。

現在變成AI說,我要渲染一張天氣卡片,數據是上海28度。這行原本由人寫死的代碼,AI替你寫了。

想明白這一層,你再回頭看Saboo那句That's over,就懂他在感慨什麼了。

界面這東西,第一次,不再是人提前畫死的,而是AI看着你當下問的問題,現場給你畫出來的。

設計圈有個機構叫Nielsen Norman Group,業界搞可用性研究的老牌權威。他們給生成式UI下的定義更偏產品視角,叫由AI實時動態生成的、為每個用戶量身定做的界面。

他們說了一句話,我覺得特別戳,叫從為平均用戶設計,轉向為每一個具體的個體、在他此時此刻的處境裏設計。

你想想看,過去幾十年,所有產品都是為那個想象中的平均用戶做的。一個界面,幾百萬人用,長得一模一樣。因為沒辦法,人手畫不過來。

現在AI可以了。你是你,我是我,我們打開同一個App,看到的東西可以完全不一樣。

聊到這,可能有技術的朋友要問了,這玩意兒AI是怎麼把界面傳到我屏幕上的?

這就得說到2026年Agent世界裏很重要的一套基建,三個協議。

Agent時代的三大協議

你就把Agent想成一個大腦,它要跟外面三個方向打交道。

往工具和數據庫那個方向,走的是MCP,這是Anthropic搞的,Agent靠它去調工具、查數據。

往別的Agent那個方向,走的是A2A,谷歌搞的,一個Agent把活兒分給另一個Agent幹,它倆對話用這個。

往用戶這個方向,走的是AG-UI,Agent要把界面遞到你眼前,走的就是這條道。

前兩個跟咱今天聊的關係不大,我列出來只是讓你看清這個分工。真正跟生成式UI相關的,是AG-UI這條線。

它是Agent和你的前端之間那根管子。Agent在服務器上決定了要渲染天氣卡片,可卡片得顯示在你的瀏覽器裏啊,中間隔着十萬八千里,這根管子就負責把渲染指令加數據,穩穩地流過去。而且是雙向的,你在界面上改了什麼,Agent那頭也能立刻知道。

說真的,我覺得AG-UI這東西被低估了。在它出來之前,各家框架自己造各自的管子,誰也接不上誰。它出來之後,變成了一個公共標準,管你是LangGraph還是谷歌的ADK還是微軟的框架,只要會說AG-UI,任何前端都能接住你吐出來的界面。

生成式UI是那個目標,AG-UI是讓這個目標能跨框架跑起來的那條路。

好,鋪墊了這麼多,終於到了Saboo那條推裏最讓我拍大腿的部分。

他說,大家都在聊生成式UI,但其實根本沒有一種統一的做法。有三種。而且最要命的是,絕大多數團隊都已經選了其中一種,卻根本不知道自己選了。

這話有點刺耳,但我覺得他說的是事實。

這三種做法,從你抓得最死、到完全放手給AI,排成一條線。

三種模式,三種架構

最左邊叫受控,Controlled,組件你提前搭好,AI只負責挑哪個。

中間叫聲明式,Declarative,AI發出一份描述清單,你的應用照着清單去拼組件。

最右邊叫開放式,Open-ended,AI直接寫原始HTML,你的應用扔進一個沙箱裏渲染。

光這麼說你可能沒感覺,我用做菜給你打個比方,一下就通了。

受控模式,就是點菜單。

餐廳有一份固定菜單,AI是那個服務員。你說我想吃辣的,服務員從菜單裏給你挑一道水煮魚端上來。菜是廚房早就做好的,AI只管選,不管做。擺盤什麼樣,每次都一模一樣,全是餐廳說了算。

受控模式,前端掌控UI

你看這張圖,右邊那一格一格的,就是你提前搭好的組件庫,圖表、按鈕、表格、日曆、搜索框、開關、頭像、鈴鐺,一格一個,都是現成的。AI幹嘛呢,它從裏頭挑中一個,就是那個虛線框出來的格子,然後渲染出來,飄到上面給用戶看。

你構建組件,Agent只負責挑選。就這麼簡單。

這是絕大多數團隊起步的地方,也是絕大多數團隊卡死的地方。

為啥會卡死?Saboo算了筆賬,我看完有點後背發涼。

你註冊的每一個組件,在用戶還沒開口之前,就已經佔着AI的上下文窗口了。一個組件帶上它的說明,大概400個token。你有25個組件,那就是一萬個token,每一輪對話都得先吃掉這一萬。這是筆每次請求都要交的税。

更要命的是,組件一多,AI還會選錯。餅圖和環形圖,在它眼裏都是展示比例的,它就開始猜。

所以受控這條路,適合那種你就十來個核心流程、對設計精度要求極高的場景。組件一多,你的代碼量跟着用例線性暴漲,牆就在前面等着你。

那撞牆了怎麼辦?往右走一步,聲明式。

還是做菜的比方,聲明式是給配方清單。AI不直接給你菜了,它給你一張單子,要一個盤子,裏面放魚、辣椒、香菜,擺成圓形。廚房,也就是你的前端,照着這張單子現場組裝。

AI只描述要什麼,它壓根不碰具體長啥樣。

聲明式模式,agent發出schema

這張圖把整個過程畫得特別清楚,從左到右三段。

最左邊,AI吐出一份JSON,就是那份配方清單,裏面寫着出發地、目的地、價格、航空公司,全是結構化的描述。

中間,是一堆散落的組件零件,文本框、日曆、數字、飛機圖標,清單裏的每一項,對應到這些零件上。

最右邊,啪,渲染出來了,三張實實在在的航班卡片,SFO飛JFK,312刀,LAX飛ORD,276刀。

一個工具,無數種UI。這是它最騷的地方。

還記得受控模式那筆嚇人的token賬嗎?聲明式這兒,這筆賬被抹平了。

你有50種卡片還是500種,AI看到的永遠就是一個工具、一份清單的格式。組件庫隨便長,每一輪的token消耗,紋絲不動。

這就是為啥Saboo說,聲明式是大多數真正上了生產的Agent應用,最後都會走到的那條路。它天生就是為長尾場景準備的,各種儀表盤、結果頁、表單、卡片、小組件,你有多少種花樣它都接得住。

當然它也有代價。佈局這事兒,你交給了AI。同樣一份清單,這次跑出來和下次跑出來,可能在你的組件庫範圍內長得不太一樣。要是你做的是法律免責聲明、是營銷頁面、是那種像素級必須分毫不差的東西,那聲明式不適合你,老老實實回去用受控。

天下沒有白來的靈活。

最右邊,開放式。這個就刺激了。

做菜的比方走到頭,開放式是直接把廚房鑰匙扔給AI,你愛做啥做啥。沒菜單,沒配方,原料做法全你自己定。你這個當老闆的,只能在廚房外頭圍一圈防火牆,就是那個沙箱,別讓它把整棟樓燒了就行。

AI直接寫原始HTML,你扔進一個隔離的iframe裏渲染,免得它劫持你整個頁面。

聽起來很爽對吧,最自由,啥都能做。但你猜怎麼着。

開放式模式,沒有目錄沒有規則

這張圖我第一眼看到就笑了,因為它太真實了。

同一個prompt,注意,是同一個,右邊那個大括號標得清清楚楚。

週一,AI給你畫了個清清爽爽的綠色柱狀圖,極簡,很剋制。

週二,同一個需求,它給你整了個橙色的密密麻麻的儀表盤,一堆圖表一堆數字,28.6K、47.3K,擠得滿滿當當。

週三,好傢伙,它給你來了個復古藍色像素風,活脱脱一個Windows 95的界面,FLIGHT OVERVIEW v1.0。

三天,三種八竿子打不着的風格。

Saboo自己說,他試過把開放式當成一個Agent的主界面來用,一個禮拜就給撤了。週二是新野獸主義,週三變iOS 4復刻版,品牌天天在變,產品顯得特別不正經。

但開放式不是沒用,是被用錯了地方。

它真正的命門場景只有一個,一次性的、用完就扔的交互。用戶壓根不在乎界面長啥樣,看完這一次,這輩子也不會再看第二次。

給我講講電子是怎麼運動的。把我最近十次查詢畫成一張奇怪的柱狀圖。可視化一下這個API返回的數據。

就這種。你看谷歌的AI概覽裏那些臨時生成的小東西,就是這個路子。一次性,拋棄式,沙箱裏玩玩,但永遠別拿它當門面。

三種模式聊完,你大概也咂摸出味兒來了。

它們的差別,根本不是技術細節的差別,而是一個特別樸素的問題,這個界面,到底誰說了算。

受控,你說了算,組件你搭、樣子你定,AI只有挑選權。 聲明式,清單說了算,AI填內容,但得在你定的那套食材庫裏填。 開放式,AI說了算,從裏到外它全包,你只能在外面拉個防火牆。

控制權這根杆子,從左到右,一路從你手裏,滑到了AI手裏。越往右越靈活,也越不可控。

那到底怎麼選?Saboo給了個特別乾脆的決策樹,我覺得可以直接抄作業。

設計師手裏有像素級的完整稿?用受控。 要上幾十種卡片、幾十種小組件?用聲明式。 一次性的、用完就扔的可視化?用開放式。 拿不定主意?默認聲明式,把最重要的三個流程升級成受控,但永遠別把開放式當默認。

他還教了個特別實用的自檢辦法。如果你已經在做了,但不確定自己到底落在哪種模式,那就數一數你的渲染工具有多少個。超過15個,你就是在受控模式裏,而且離那堵牆已經不遠了,這周就該開始接聲明式了。

寫到這,我想起Saboo那條推裏最扎心的一句。

他說,真正的錯誤,不是你選錯了模式。而是你根本不知道自己選了。

大多數團隊一上來就默認用了受控,為啥,因為框架默認就是受控。撞上25個組件那堵牆之後,他們一看demo裏開放式那麼炫,轉頭就撲過去。

這兩步,都不是決策。都是漂移。

我看到這突然有點感觸。這事兒哪是隻發生在寫代碼裏啊。

我們這一年用AI,有多少選擇,是真的想清楚了才做的,又有多少,只是因為工具默認給你擺在那兒,你就順手用了。默認用某個模型,默認用某種工作流,默認讓它幫你幹某件事。我們以為自己在選,其實大部分時候是在被框架推着走,被默認值推着走。

漂移。這個詞我琢磨了好久。

在AI這個新世界裏,舊的那套確定性正在土崩瓦解。過去你買一個軟件,它長什麼樣是固定的,確定的,你心裏踏實。現在不是了,界面是活的,會變的,每個人看到的都不一樣。這種不確定,讓很多人慌。

但我一直覺得,真正的能力,不是去消滅這種不確定,而是搞清楚你在什麼場景下,願意把多少控制權讓出去。

需要分毫不差的地方,你攥緊,用受控。海量長尾的地方,你鬆手,用聲明式。無所謂的地方,你乾脆全放,用開放式。

這不就是我們和AI相處該有的樣子嗎。不是要麼全控制,要麼全撒手,而是想清楚每一件事,你到底站在那根杆子的哪個位置上。

回到開頭Saboo那句話,前端曾經是個固定的東西,那個時代結束了。

我現在越來越信這個判斷。

界面這東西,正在從一張設計師畫死的圖,變成AI看着你、為你這一刻的需求當場畫出來的東西。它會越來越懂你,越來越貼合你此時此刻想幹的事。

而我們要學的,不是怎麼把這一切重新攥回手裏,而是學會在合適的時候,優雅地放手。

控制和放手之間那個度,可能就是接下來很長一段時間裏,最值錢的判斷力。


以上,既然看到這裏了,如果覺得不錯,隨手點個贊、在看、轉發三連吧,如果想第一時間收到推送,也可以給我個關注⭐~ 謝謝你看我的文章,我們,下次再見。