无主之地2配置高吗|看真人裸体BBBBB|秋草莓丝瓜黄瓜榴莲色多多|真人強奷112分钟|精品一卡2卡3卡四卡新区|日本成人深夜苍井空|八十年代动画片

網(wǎng)易首頁 > 網(wǎng)易號(hào) > 正文 申請(qǐng)入駐

Google Stitch神了,我做周杰倫《太陽之子》播放器,2分鐘后感嘆前端徹底涼了

0
分享至



摘要:AI設(shè)計(jì)領(lǐng)域的TIP(技術(shù)產(chǎn)品轉(zhuǎn)折點(diǎn))產(chǎn)品

AI帶來最大的驚喜,是幫助你完成很多夢(mèng)。

最近被Google Stitch的驚喜到了,這不是個(gè)AI玩具,而是個(gè)真正的生產(chǎn)力工具。

要知道,鯨哥并不是UI出身,但現(xiàn)在從打開網(wǎng)頁Google Stitch到完成新產(chǎn)品制作,只用了2 分鐘,而且效果很驚艷。

這是鯨哥做的一個(gè)周杰倫《太陽之子》專輯的音樂播放器網(wǎng)站。

能交互,能播放,有推薦頁、分類頁、收藏頁、播放頁。深色主題,專輯封面,播放控制,進(jìn)度條,全都有。

看著屏幕上那個(gè)界面,我的第一反應(yīng)是:前端真的要涼了,普通人也能實(shí)現(xiàn)產(chǎn)品夢(mèng)。

Google Stitch 到底有多猛

傳統(tǒng)的設(shè)計(jì)工具,你要拖組件、調(diào)樣式、連線做交互。Stitch 不用。你用自然語言描述,它直接生成高保真 UI。不是那種粗糙的線框圖,是真正可以交互的界面。

我這次做周杰倫《太陽之子》的音樂網(wǎng)站,就是這么來的。

我打開 Stitch,直接說:

“做一個(gè)音樂播放器,深色主題,帶播放控制和專輯展示。”

2 分鐘后,四個(gè)頁面全部生成。

因?yàn)槲沂莻€(gè)杰迷,想為周杰倫今天新發(fā)布的專輯做宣傳,把相關(guān)的圖片素材丟給Stitch,一個(gè)《太陽之子》的音樂網(wǎng)站就整體成型。


推薦頁:《太陽之子》的專輯封面居中,周杰倫站在金色光芒里,下面是青色的“立即播放”按鈕。左側(cè)是“為你推薦”標(biāo)題,右上角是“查看全部”鏈接。底部是“最近播放”模塊,橫向滾動(dòng)顯示專輯卡片。


分類頁:頂部是搜索框,下面是“瀏覽分類”標(biāo)簽。流行、電子、爵士、古典等分類以膠囊按鈕形式排列,當(dāng)前選中“搖滾”高亮顯示。下方是“熱門趨勢(shì)”模塊,顯示《太陽之子》等歌曲列表,每首歌顯示封面、標(biāo)題、藝術(shù)家和時(shí)長。


用戶頁:頂部顯示用戶頭像和名稱“鯨哥”,142 個(gè)歌單。粉色的愛心圖標(biāo),顯示“我喜歡的音樂”有 842 首,根據(jù)喜好自動(dòng)更新。下方是“最近播放”列表,《太陽之子》排在第一位。


播放頁:全屏顯示專輯封面,歌曲名稱《太陽之子(主打歌)》,演唱者周杰倫。進(jìn)度條顯示 1:26/4:35,下方是播放、暫停、上一曲、下一曲、循環(huán)按鈕。底部導(dǎo)航欄包含首頁、搜索、我的庫和設(shè)置圖標(biāo)。


是不是整體UI組件很豐富,關(guān)鍵你還能手動(dòng)調(diào)節(jié)元素之間的PX間距。

而且它還能能交互,點(diǎn)擊“立即播放”,跳轉(zhuǎn)到播放頁。點(diǎn)擊分類標(biāo)簽,切換到對(duì)應(yīng)列表。

這些功能實(shí)現(xiàn),我沒寫一行代碼。

這不是魔法,這是降維打擊

Stitch 2.0 的背后,是 Google 的整套 AI 原生開發(fā)生態(tài)。

Stitch 負(fù)責(zé)設(shè)計(jì),F(xiàn)irebase Studio 負(fù)責(zé)開發(fā),AI Studio 負(fù)責(zé)快速原型。三個(gè)工具形成閉環(huán),全在 Google 生態(tài)內(nèi)完成。

你在 Stitch 里設(shè)計(jì)好界面,可以直接導(dǎo)出到 Firebase Studio,生成后端代碼、數(shù)據(jù)庫結(jié)構(gòu)、API 接口。然后用 AI Studio 測試原型,調(diào)整邏輯,最后一鍵部署。

這不是工具的升級(jí),這是整個(gè)開發(fā)流程的重構(gòu)。

以前,設(shè)計(jì)師和開發(fā)者是兩個(gè)角色。設(shè)計(jì)師用 Figma 畫圖,開發(fā)者用代碼實(shí)現(xiàn)。中間有溝通成本、理解偏差、反復(fù)修改。

現(xiàn)在,Stitch 把這兩個(gè)角色合并了。你不需要懂代碼,只需要懂需求。AI 幫你把需求變成設(shè)計(jì),把設(shè)計(jì)變成代碼,把代碼變成產(chǎn)品。

這就是降維打擊。

Figma 被逼到墻角了

先說一個(gè)時(shí)間線。

2026 年 3 月 18 日,Google Labs 發(fā)布 Stitch 2.0。

Stitch 2.0 發(fā)布后,F(xiàn)igma 股價(jià)下跌 8.8%。

一周后的今天,2026 年 3 月 25 日,F(xiàn)igma 宣布向 AI Agent 開放畫布,推出 MCP 服務(wù)器測試版。Claude Code、Codex 等外部 AI 編碼助手可以直接操作 Figma 設(shè)計(jì)文件,讀取組件、變量、布局?jǐn)?shù)據(jù),生成代碼,也可以將代碼實(shí)現(xiàn)回寫到畫布。

Figma MCP 公告后,股價(jià)又跌了 1.5%。

從時(shí)間線上看,F(xiàn)igma 的開放策略很難不讓人聯(lián)想到 Google 的步步緊逼——Stitch 2.0 發(fā)布后一周,F(xiàn)igma 就推出了 MCP。一個(gè)先手,一個(gè)后手。

Google 走的是閉環(huán)路線:Stitch 負(fù)責(zé)設(shè)計(jì),F(xiàn)irebase Studio 負(fù)責(zé)開發(fā),AI Studio 負(fù)責(zé)快速原型。三款工具形成從設(shè)計(jì)到開發(fā)的閉環(huán),全在 Google 生態(tài)內(nèi)完成。

Figma 則選擇開放路徑,不自建大模型,允許外部 AI 接入。它不做大模型,專注做畫布——讓所有 AI 都能進(jìn)來,但數(shù)據(jù)留在 Figma。

這一招未必是壞棋。但問題是,用戶會(huì)買賬嗎?

如果 Google 的閉環(huán)足夠好用,為什么還要用 Figma + 外部 AI 的組合?如果 Figma 的開放生態(tài)足夠強(qiáng)大,Google 的閉環(huán)又能堅(jiān)持多久?

這是一場對(duì)賭。

前端真的要涼了嗎?

我們總說AI讓前端涼了,但Gemini等大模型直出前端網(wǎng)頁,其實(shí)效果并沒有那么好。

Stitch帶來的答案是:前端開發(fā)的門檻徹底消失了。

以前,做一個(gè)網(wǎng)站需要學(xué) HTML、CSS、JavaScript。想做得好看,還得學(xué)設(shè)計(jì)。想做得高效,還得學(xué)框架、工程化、性能優(yōu)化。

現(xiàn)在,只需要會(huì)說話。

“做一個(gè)音樂播放器。”
“深色主題。”
“帶播放控制和專輯展示。”

說完,就有了。

這意味著什么?

產(chǎn)品經(jīng)理可以直接做原型,不需要等設(shè)計(jì)師。設(shè)計(jì)師可以直接做交互,不需要等開發(fā)。創(chuàng)業(yè)者可以直接做 MVP,不需要找技術(shù)合伙人。

前端工程師的價(jià)值,從“實(shí)現(xiàn)需求”變成了“優(yōu)化細(xì)節(jié)”。從“做出來”變成了“做得更好”。

但這不代表前端工程師會(huì)失業(yè)。

Stitch 生成的界面是 80 分,但從 80 分到 95 分,還需要人來調(diào)。性能優(yōu)化、無障礙適配、邊界情況處理、復(fù)雜交互邏輯,這些 AI 目前還做不好。

真正的問題是:初級(jí)前端的生存空間被壓縮了

以前,初級(jí)前端的工作是“把設(shè)計(jì)稿還原成代碼”。現(xiàn)在,這個(gè)工作 AI 2 分鐘就能完成。初級(jí)前端要么向上走,學(xué)會(huì)架構(gòu)設(shè)計(jì)、性能優(yōu)化、工程化,要么向下走,學(xué)會(huì)產(chǎn)品思維、用戶體驗(yàn)、商業(yè)理解。

純粹的“切圖仔”,確實(shí)要涼了。

AI 帶來的真正改變

這次體驗(yàn) Stitch,最大的感受不是“AI 取代了前端”,而是“AI 降低了創(chuàng)造的門檻”。

以前,很多想法因?yàn)闀r(shí)間成本太高,只能停留在腦子里。現(xiàn)在,想法可以立刻實(shí)現(xiàn)。

這是 AI 帶來的最大改變:不是取代人類,而是讓人類的想法,更容易變成現(xiàn)實(shí)。

產(chǎn)品經(jīng)理可以在開會(huì)前,用 2 分鐘做一個(gè)可交互的原型,直接演示給團(tuán)隊(duì)看。

設(shè)計(jì)師可以快速生成多個(gè)設(shè)計(jì)方案,讓用戶測試后再?zèng)Q定哪個(gè)方向。

創(chuàng)業(yè)者可以在融資前,用一天時(shí)間做出一個(gè)完整的 MVP,直接給投資人看產(chǎn)品。

這些場景,以前需要團(tuán)隊(duì)協(xié)作、多輪溝通、反復(fù)修改。現(xiàn)在,一個(gè)人就能完成。

效率提高了,試錯(cuò)成本降低了,創(chuàng)新的速度加快了。

最后

如果你也想試試 Google Stitch,直接搜索進(jìn)入。

如果你是前端工程師,不要慌。AI 不會(huì)讓你失業(yè),但會(huì)改變你的工作方式。學(xué)會(huì)和 AI 協(xié)作,把時(shí)間花在更有價(jià)值的事情上。

如果你是設(shè)計(jì)師、產(chǎn)品經(jīng)理、創(chuàng)業(yè)者,恭喜你。你的想法,現(xiàn)在可以更快地變成現(xiàn)實(shí)。

如果你是普通用戶,也可以試試。你不需要懂代碼,只需要會(huì)說話。

2026 年,AI 原生開發(fā)的時(shí)代,已經(jīng)來了。

前端會(huì)不會(huì)涼,我不知道。

但我知道,做東西,從來沒有這么簡單過。

產(chǎn)品交流群:

特別聲明:以上內(nèi)容(如有圖片或視頻亦包括在內(nèi))為自媒體平臺(tái)“網(wǎng)易號(hào)”用戶上傳并發(fā)布,本平臺(tái)僅提供信息存儲(chǔ)服務(wù)。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相關(guān)推薦
熱點(diǎn)推薦
人財(cái)兩得!安東尼疑似喜結(jié)新歡,女友為已故NFL巨星遺孀

人財(cái)兩得!安東尼疑似喜結(jié)新歡,女友為已故NFL巨星遺孀

小匠說個(gè)球
2026-06-12 20:57:59
一夜打擊,俄軍通往克里米亞的四座橋梁,現(xiàn)在全斷了!

一夜打擊,俄軍通往克里米亞的四座橋梁,現(xiàn)在全斷了!

葉葉夜
2026-06-13 08:27:05
為什么去過朝鮮回來就沉默的人,不是隱瞞,是真的說不出

為什么去過朝鮮回來就沉默的人,不是隱瞞,是真的說不出

老特有話說
2026-05-12 15:41:08
不要錯(cuò)過!6月13日晚20:30比賽!中央5套CCTV5、CCTV5+直播表

不要錯(cuò)過!6月13日晚20:30比賽!中央5套CCTV5、CCTV5+直播表

生活新鮮市
2026-06-14 01:24:21
南京一大學(xué)生凌晨溺亡河道,官方回應(yīng)

南京一大學(xué)生凌晨溺亡河道,官方回應(yīng)

新浪財(cái)經(jīng)
2026-06-13 19:11:43
于娜不再隱瞞!首次公開丈夫去世細(xì)節(jié),網(wǎng)友:難怪她胖到面目全非

于娜不再隱瞞!首次公開丈夫去世細(xì)節(jié),網(wǎng)友:難怪她胖到面目全非

老吳教育課堂
2026-06-13 06:26:10
在華經(jīng)商的8102家日本企業(yè),集體“攤牌”了:

在華經(jīng)商的8102家日本企業(yè),集體“攤牌”了:

果媽聊娛樂
2026-06-13 07:48:37
接送初中生?老教師坦言:小學(xué)接安全,初中接的是孩子的整個(gè)人生

接送初中生?老教師坦言:小學(xué)接安全,初中接的是孩子的整個(gè)人生

金哥說新能源車
2026-06-13 06:40:40
名嘴呼吁B費(fèi)拒戰(zhàn)除非棄用C羅

名嘴呼吁B費(fèi)拒戰(zhàn)除非棄用C羅

體壇周報(bào)
2026-06-13 21:57:10
這組全是許晴年輕舊照!

這組全是許晴年輕舊照!

草莓解說體育
2026-06-05 14:04:24
鵝腿阿姨的麻煩越來越大了

鵝腿阿姨的麻煩越來越大了

大張的自留地
2026-06-13 20:34:31
中方接到日媒消息,日本已找上巴基斯坦,要跟中國主張打擂臺(tái)

中方接到日媒消息,日本已找上巴基斯坦,要跟中國主張打擂臺(tái)

健身狂人
2026-06-13 03:32:16
小心!北京多人被叮咬,已有死亡病例!專家緊急提醒——

小心!北京多人被叮咬,已有死亡病例!專家緊急提醒——

BRTV新聞
2026-06-12 21:38:43
2026事業(yè)編迎來大調(diào)整,五類崗位必須轉(zhuǎn)企,編制從此退出歷史舞臺(tái)

2026事業(yè)編迎來大調(diào)整,五類崗位必須轉(zhuǎn)企,編制從此退出歷史舞臺(tái)

芳姐侃社會(huì)
2026-06-12 23:43:24
摩根士丹利:更多跡象顯示中國二手房銷售走弱

摩根士丹利:更多跡象顯示中國二手房銷售走弱

新浪財(cái)經(jīng)
2026-06-13 18:15:03
全家被拉黑!還有更慘的馬上來,特奧多羅或?qū)⒆屢粌|人丟掉飯碗?

全家被拉黑!還有更慘的馬上來,特奧多羅或?qū)⒆屢粌|人丟掉飯碗?

李云飛Afey
2026-06-14 03:01:04
7月起嚴(yán)查退休返聘,這幾條紅線你觸碰了嗎?

7月起嚴(yán)查退休返聘,這幾條紅線你觸碰了嗎?

笑熬漿糊111
2026-06-13 00:30:09
1996年,武警在轉(zhuǎn)彎時(shí)出現(xiàn)的一個(gè)疏忽,釀成新中國最嚴(yán)重越獄事件

1996年,武警在轉(zhuǎn)彎時(shí)出現(xiàn)的一個(gè)疏忽,釀成新中國最嚴(yán)重越獄事件

明月清風(fēng)閣
2026-06-13 07:25:10
炸了!2026高考作文竟出自四年級(jí)課本!說回歸課本,沒說回小學(xué)啊

炸了!2026高考作文竟出自四年級(jí)課本!說回歸課本,沒說回小學(xué)啊

娛樂的宅急便
2026-06-13 14:00:00
直降10萬元!特斯拉新車突然降價(jià),13.4 萬元,全球最低

直降10萬元!特斯拉新車突然降價(jià),13.4 萬元,全球最低

科技堡壘
2026-06-12 09:37:51
2026-06-14 06:00:49
鯨選AI incentive-icons
鯨選AI
最新AI產(chǎn)品化與商業(yè)化案例速遞
168文章數(shù) 38關(guān)注度
往期回顧 全部

科技要聞

SpaceX上市首日破2萬億美元,馬斯克再封神

頭條要聞

特朗普:美伊協(xié)議計(jì)劃周日簽署 如不順利還有終極手段

頭條要聞

特朗普:美伊協(xié)議計(jì)劃周日簽署 如不順利還有終極手段

體育要聞

美國4比1巴拉圭:這統(tǒng)治力真是美國隊(duì)?!

娛樂要聞

鄧超曬孫儷親手織的帽子,笑瘋?cè)W(wǎng)!

財(cái)經(jīng)要聞

梁文鋒向左,楊植麟向右

汽車要聞

深藍(lán)S07華為乾崑激光版增程車型上市 限時(shí)15.49萬元起

態(tài)度原創(chuàng)

家居
本地
房產(chǎn)
親子
公開課

家居要聞

空間微調(diào) 移形換境

本地新聞

AK劉彰邂逅河北南大港濕地

房產(chǎn)要聞

海南最賺錢行業(yè)曝光!最快4年半,海口全款買三房!

親子要聞

真正覺醒的家庭

公開課

李玫瑾:為什么性格比能力更重要?

無障礙瀏覽 進(jìn)入關(guān)懷版