国产av一二三区|日本不卡动作网站|黄色天天久久影片|99草成人免费在线视频|AV三级片成人电影在线|成年人aV不卡免费播放|日韩无码成人一级片视频|人人看人人玩开心色AV|人妻系列在线观看|亚洲av无码一区二区三区在线播放

網(wǎng)易首頁 > 網(wǎng)易號 > 正文 申請入駐

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

0
分享至



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

AI帶來最大的驚喜,是幫助你完成很多夢。

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

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

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

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

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

Google Stitch 到底有多猛

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

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

我打開 Stitch,直接說:

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

2 分鐘后,四個頁面全部生成。

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


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


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


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


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


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

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

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

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

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

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

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

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

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

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

這就是降維打擊。

Figma 被逼到墻角了

先說一個時間線。

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

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

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

Figma MCP 公告后,股價又跌了 1.5%。

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

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

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

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

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

這是一場對賭。

前端真的要涼了嗎?

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

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

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

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

“做一個音樂播放器?!?br/>“深色主題。”
“帶播放控制和專輯展示。”

說完,就有了。

這意味著什么?

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

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

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

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

真正的問題是:初級前端的生存空間被壓縮了。

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

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

AI 帶來的真正改變

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

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

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

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

設(shè)計師可以快速生成多個設(shè)計方案,讓用戶測試后再決定哪個方向。

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

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

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

最后

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

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

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

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

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

前端會不會涼,我不知道。

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

產(chǎn)品交流群:

特別聲明:以上內(nèi)容(如有圖片或視頻亦包括在內(nèi))為自媒體平臺“網(wǎng)易號”用戶上傳并發(fā)布,本平臺僅提供信息存儲服務(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)推薦
2025-2026賽季W(wǎng)CBA季后賽半決賽首戰(zhàn) 四川蜀道遠(yuǎn)達(dá)女籃一分險勝江蘇南鋼女籃

2025-2026賽季W(wǎng)CBA季后賽半決賽首戰(zhàn) 四川蜀道遠(yuǎn)達(dá)女籃一分險勝江蘇南鋼女籃

封面新聞
2026-04-07 20:03:03
7名志愿軍彈盡糧絕,撿到美軍留下的重機(jī)槍和彈藥,創(chuàng)造一個奇跡

7名志愿軍彈盡糧絕,撿到美軍留下的重機(jī)槍和彈藥,創(chuàng)造一個奇跡

新一說史
2026-04-06 18:34:33
得分能力其實(shí)并不差!掘金真應(yīng)該考慮給側(cè)翼新星多些表現(xiàn)機(jī)會?

得分能力其實(shí)并不差!掘金真應(yīng)該考慮給側(cè)翼新星多些表現(xiàn)機(jī)會?

稻谷與小麥
2026-04-07 22:01:45
美國安插在中國多年的間諜頭子,居然是人人都想送錦旗的大善人。

美國安插在中國多年的間諜頭子,居然是人人都想送錦旗的大善人。

阿七說史
2026-03-26 15:52:30
主持人:皇馬受到VAR不公正對待,他們奪走了皇馬的西甲冠軍

主持人:皇馬受到VAR不公正對待,他們奪走了皇馬的西甲冠軍

懂球帝
2026-04-07 21:38:11
中國不記隔夜仇!巴拿馬接到通知,美國終于下場,巴政府自食惡果

中國不記隔夜仇!巴拿馬接到通知,美國終于下場,巴政府自食惡果

影孖看世界
2026-04-06 14:09:23
霍啟剛帶全家游廣西,69歲郭媽媽與外甥女玩漂流,郭晶晶為其護(hù)航

霍啟剛帶全家游廣西,69歲郭媽媽與外甥女玩漂流,郭晶晶為其護(hù)航

潮鹿逐夢
2026-04-07 14:43:41
南京一媽媽輔導(dǎo)孩子作業(yè)確診胃反流,醫(yī)生提醒:不是胃太脆弱,是“氣”真的會反流

南京一媽媽輔導(dǎo)孩子作業(yè)確診胃反流,醫(yī)生提醒:不是胃太脆弱,是“氣”真的會反流

荷蘭豆愛健康
2026-04-07 18:38:58
孫儷的“上海小院”火了,院里種菜曬衣服養(yǎng)狗,滿滿都是煙火氣

孫儷的“上海小院”火了,院里種菜曬衣服養(yǎng)狗,滿滿都是煙火氣

趣文說娛
2026-04-06 21:37:13
拉姆塞宣布退役

拉姆塞宣布退役

綠茵情報局
2026-04-07 18:46:34
伊朗革命衛(wèi)隊(duì)稱以色列海法已被“全面打擊”

伊朗革命衛(wèi)隊(duì)稱以色列海法已被“全面打擊”

財聯(lián)社
2026-04-07 09:47:18
又一位女籃核心留洋!正式官宣,加盟澳洲,未來可期,宮魯鳴如愿

又一位女籃核心留洋!正式官宣,加盟澳洲,未來可期,宮魯鳴如愿

萌蘭聊個球
2026-04-07 17:35:35
德轉(zhuǎn)列中后衛(wèi)身價前10:薩利巴9000萬歐第1,庫巴西8000萬第2

德轉(zhuǎn)列中后衛(wèi)身價前10:薩利巴9000萬歐第1,庫巴西8000萬第2

懂球帝
2026-04-07 10:28:06
新空腹血糖標(biāo)準(zhǔn)已調(diào)整,不再6.1mmol/L,糖前期者,早知早管控

新空腹血糖標(biāo)準(zhǔn)已調(diào)整,不再6.1mmol/L,糖前期者,早知早管控

觀星賞月
2026-04-07 16:49:02
邱彪有麻煩了!剩7場比賽,對手全是狠角色,媒體人:能贏3場算賺

邱彪有麻煩了!剩7場比賽,對手全是狠角色,媒體人:能贏3場算賺

金山話體育
2026-04-07 09:54:48
一空姐機(jī)上被打,航司霸氣出面:打我家空姐,拉入黑名單

一空姐機(jī)上被打,航司霸氣出面:打我家空姐,拉入黑名單

中國民航人
2026-04-06 18:10:42
特朗普再次點(diǎn)名北約、澳大利亞、日本、韓國:都不幫忙

特朗普再次點(diǎn)名北約、澳大利亞、日本、韓國:都不幫忙

環(huán)球網(wǎng)資訊
2026-04-07 08:32:07
特朗普自曝威脅退出北約真相:“想要格陵蘭島 但他們不給 那就說‘拜拜’”

特朗普自曝威脅退出北約真相:“想要格陵蘭島 但他們不給 那就說‘拜拜’”

每日經(jīng)濟(jì)新聞
2026-04-07 15:07:13
向太太敢說了!向華強(qiáng)今年已經(jīng)78了,但是她和向華強(qiáng)還有X生活!

向太太敢說了!向華強(qiáng)今年已經(jīng)78了,但是她和向華強(qiáng)還有X生活!

心靜物娛
2025-12-24 11:02:28
佟大為一家3口清明節(jié)游三清山,關(guān)悅素顏出鏡,10歲兒子黑又帥

佟大為一家3口清明節(jié)游三清山,關(guān)悅素顏出鏡,10歲兒子黑又帥

椰黃娛樂
2026-04-07 10:58:05
2026-04-07 22:27:00
鯨選AI incentive-icons
鯨選AI
最新AI產(chǎn)品化與商業(yè)化案例速遞
146文章數(shù) 36關(guān)注度
往期回顧 全部

科技要聞

滿嘴謊言!OpenAI奧特曼黑料大起底

頭條要聞

臺灣一些人被指準(zhǔn)備"潤" 賴清德曾稱兒子在美"學(xué)功夫"

頭條要聞

臺灣一些人被指準(zhǔn)備"潤" 賴清德曾稱兒子在美"學(xué)功夫"

體育要聞

官宣簽約“AI球員”,這支球隊(duì)被罵慘了...

娛樂要聞

女首富陳麗華離世 被曝生前已分好遺產(chǎn)

財經(jīng)要聞

10萬億財政轉(zhuǎn)移支付,被誰拿走了?

汽車要聞

不止是大 極狐首款MPV問道V9靜態(tài)體驗(yàn)

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

健康
教育
旅游
游戲
本地

干細(xì)胞抗衰4大誤區(qū),90%的人都中招

教育要聞

地理教材上五種交通運(yùn)輸方式的比較是不是過時了?

旅游要聞

日照嵐山這個清明假期“熱”了,也更“火”了!

模組救場還是官方重做?GTA4重制版引發(fā)玩家激烈爭論

本地新聞

跟著歌聲游安徽,聽古村回響

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