Google Stitch 大升級 + AI Studio Build 實測:設計到應用一條龍,太強了

作者:kate人不錯
日期:2026年3月20日 上午10:59
來源:WeChat 原文

整理版優先睇

速讀 5 個重點 高亮

Google Stitch更新設計系統+AI Studio Build一鍵整合:設計到應用一條龍實測

整理版摘要

呢篇文章係Kate分享佢對Google Stitch同AI Studio Build嘅最新升級嘅實測體驗。佢係一個鍾意試新AI工具嘅創作者,之前已經拍過相關影片,今次想帶出呢兩個工具點樣幫手由設計直接做到應用,大幅縮短產品開發時間。

Stitch嘅界面而家好接近Figma,最值得留意係佢構建咗一套DESIGN.md設計系統,可以快速將靜態設計轉成交互式原型。Kate仲示範咗點樣用參考截圖生成新風格,雖然批量應用有啲bug,但整體設計效果好好。佢特別強調DESIGN.md可以獨立匯出,交比其他AI工具(例如Claude Code)嚟統一應用風格,呢個係好實用嘅價值。

至於AI Studio Build,新版支援數據庫、身份驗證、實時多人遊戲,而且一鍵整合Firebase,連之前麻煩嘅Google服務連接而家都變得好簡單。Kate用佢整咗個「時光郵局」應用,語音輸入、信紙風格、時光軸等功能都係一次提示就完成。最後佢提醒大家部署時要留意環境變數同Firebase嘅計費方案,整體結論係呢兩個工具令設計到應用嘅門檻大大降低。

  • Stitch嘅界面更新到好接近Figma,並建立咗DESIGN.md設計系統,可以快速生成交互原型,仲支援MCP、SDK同Skills倉庫。
  • Stitch可以透過參考截圖生成新風格,但批量應用主題有時會失效,需要逐個頁面處理。
  • DESIGN.md設計系統可以獨立匯出畀其他AI工具(例如Claude Code)使用,統一應用風格,提升開發效率。
  • AI Studio Build新增數據庫、身份驗證同實時多人遊戲功能,一鍵整合Firebase等服務,將原型直接變成完整應用。
  • 實戰中,Build一次提示就完成「時光郵局」應用,包括語音輸入、信紙風格、時光軸,並可透過Cursor部署到Cloudflare,不過要注意用量計費。
值得記低
連結 stitch.withgoogle.com

Stitch 官網

Stitch 嘅最新版本,可以喺網頁直接試用設計功能。

連結 github.com

Stitch Skills 倉庫

包含多個 Skills 範例,可以參考或直接使用。

連結 aistudio.google.com

AI Studio Build

Google AI Studio 嘅 Build 功能,可以直接創建應用。

連結 firebase.google.com

Firebase 定價

留意 Spark 計劃會自動升級到 Blaze,用量超出免費額度會收費。

整理重點

Stitch 重新設計:界面與設計系統

Stitch 嘅界面迎來咗一次重大更新,整體風格好接近 Figma。佢仲構建咗一套 DESIGN.md 設計系統,可以將靜態設計快速轉化成交互式原型。

Stitch 而家支援 MCPSDK,仲有一個 Skills 倉庫,好值得去睇下。

Kate 用英文提示 Stitch 做一個適合摺疊屏嘅 AI 閲讀安卓應用,佢好快就顯示出思考過程,中間區域展示顏色、字體同圖標設計嘅預覽。

  • 生成咗多個頁面,設計風格同排版都幾好。右上角有播放按鈕,可以生成交互式原型。
  • 可以依次點擊 LibraryDiscover、AI Research 等板塊預覽,但 Profile 頁面冇連結好,要手動添加屏幕。
  • 切換平板樣式後,左邊係文章內容,右側係 AI Research 助手,左上角可以回到主頁。
整理重點

實際操作體驗:從生成到風格調整

Kate 跟住揾咗一張 Exa 網站嘅截圖發過去,想令 AI 複製 Exa 嘅風格。Stitch 好快就幫佢生成咗一套全新風格。

點擊頁面後,最上方有個 Modify 按鈕,再點擊就會出現 Design Systems 面板,可以對任意主題嘅顏色同字體做詳細更改。

但佢嘗試全選之前生成嘅頁面批量應用新主題,冇成功。於是用對話框輸入「apply style to 某個頁面」,透過 @ 符號逐個應用。最終生成嘅頁面同 Exa 網站元素好相似,但底部按鈕由四個變咗三個。

整理重點

Stitch 對產品設計嘅價值:Design System 導出與協作

Kate 認為 Stitch 一方面可以固定設計風格,另一方面,佢生成模擬界面時融入咗 Gemini 嘅智慧,有時會令你眼前一亮。可以嘗試一次過生成多個不同頁面嚟優化產品功能。

選中頁面後,右側有 Direct Edit 功能,可以輸入提示修改,亦支援上傳圖片。

  • 右側嘅調色盤圖標點擊後係 Design Systems 面板,可以查看 DESIGN.md 文檔。
  • 文檔定義咗設計語言:高對比度基礎色、無邊線規則、表面層級與嵌套、玻璃與漸變規則等。
  • 即使唔用 Stitch 平台,呢份 Design System 都好有價值,可以下載複製畀其他 AI 工具使用。

有博主分享咗一個思路:先用 Claude Code 做設計,然後叫 AI 根據設計總結出類似 Design System,再發畀 Codex 生成,因為 Codex 嘅編程能力而家被認為最強。

Stitch 支援導出到 AI StudioFigmaJules,Jules 係類似 Codex 嘅雲端 Agent,每日有慷慨使用額度。

整理重點

AI Studio Build 全面升級:從原型到應用

AI StudioBuild 功能迎來重大升級,而家支援創建實時多人遊戲、協作工作空間同共享工具,新增咗數據庫同身份驗證功能。

谷歌之前嘅 Firebase Studio 將於明年三月棄用,所以要轉到 AI Studio 創建應用。

  • 如果想要流暢動畫或專業圖標,Agent 會自動幫你揾合適方案。
  • Build 支援自行引入 API,集成數據庫、支付等功能,仲支援 Next.js 構建。
  • 谷歌計劃將 DriveSheets 連接到應用,並一鍵將應用轉移到 Antigravity

Kate 示範咗點樣用 Build 做出「時光郵局」應用:可以提筆寫信,支援語音輸入,右側選擇信紙風格,下方選拆信日期同心情標籤,封存時有精美動畫,用咗 Firebase 儲存,任何有網絡嘅地方都可以登錄查看。

整理重點

實戰案例與部署注意事項

Kate 將程式下載後用 CursorComposer 2 模型分析技術棧:前端 React 19、Vite 6、Tailwind CSS v4、Framer Motion 等。佢要求 Build 增加 Google 登錄同 Firebase 儲存,Build 彈出 Firebase 設定窗口,一鍵整合成功。

之前 AI 編程工具連接 Google 服務好麻煩,而家真係一鍵整合,Kate 測試一次就成功。

  • 如果只係做演示,可以透過 Publish 直接發佈。
  • 想用 Cloudflare 部署,就要先解決環境變數問題,改用標準環境變數。
  • Build 會更新環境變數模板同說明文檔,仲要檢查 .gitignore 有冇遺漏文件同其他安全問題。

Kate 嘗試叫 Build 直接 push 到 GitHub 再透過 Cloudflare 部署,但佢話唔得。最終方案係將 Build 生成嘅應用下載落嚟,再用 AI 工具完成部署。

大家好,我係 Kate。今日我會介紹 Google 兩個好正嘅產品升級——一個係 Stitch,另一個係 AI Studio 裏面嘅 Build。

Stitch:全新嘅設計體驗

Stitch 嘅界面迎來咗一次重大更新,整體風格好接近 Figma。更加值得留意嘅係,佢建立咗一套 DESIGN.md 設計系統,而且支援將靜態設計快速轉做互動原型。

https://stitch.withgoogle.com

圖片


最近,Stitch 仲推出咗 MCP 同 SDK,同時有一個 Skills 倉庫,好推薦大家去睇下。

https://github.com/google-labs-code/stitch-skills

實際使用體驗

我用英文提示 Stitch,叫佢做一個適合摺疊屏嘅 AI 閲讀 Android 應用。好快,左邊就顯示咗佢嘅思考過程,中間區域就展示咗顏色、字體同圖標設計嘅預覽。佢迅速幫我生成咗多個頁面,設計風格同排版都相當唔錯。

圖片


右上角有一個播放掣,㩒落去之後揀唔同嘅頁面,就可以生成互動原型。我可以跟住㩒 Library、Discover、AI Research 等板塊去預覽。不過最後一個 Profile 頁面冇連結好,但左邊有一個「加屏幕」嘅掣,㩒落去就可以將 Profile 導入。揀右邊第二個掣之後,畫面就會切換成平板樣式——左邊係文章內容,右邊係 AI Research 助手,㩒左上角就可以返到主頁。

圖片


參考截圖生成新風格

之後,我揾咗一張 Exa 網站嘅截圖 send 過去,想叫 AI 複製 Exa 嘅風格。Stitch 好快就幫我生成咗一套全新嘅風格。㩒某個頁面之後,最上方有一個 Modify 掣,再㩒就會出現 Design Systems 面板,我哋可以對任何主題嘅顏色同字體進行詳細更改。

圖片


之後我嘗試全選之前生成嘅頁面,想批量應用新主題,但今次冇成功。於是我直接喺 Stitch 嘅對話框輸入「apply style to 某個頁面」,用 @ 符號揀唔同嘅頁面逐個應用。最後生成嘅頁面同我提供嘅 Exa 網站元素好相似。不過仔細睇會發現啲小問題,例如原本應用底部有四個掣,新生成嘅頁面得三個。遇到呢種情況,通常直接 delete 咗叫佢重新生成就得。

另外要注意,由於 Stitch 係畫布式設計,有時就算你揀咗某個位置,生成嘅內容可能會走去畫布嘅其他區域,嗰陣時只要縮細畫面去揾就得。

官方示範係支援批量更換主題嘅,但我第一次試嗰陣冇成功,後來就改為逐張更換。應用咗新風格之後,我叫佢重新生成互動原型,Library、Discover、Research 等頁面嘅展示效果都幾好。尤其係平板模式嘅 AI 對話界面,我個人好鍾意呢種設計風格。

圖片


Stitch 對產品設計嘅價值

如果你哋有睇過我上一條片就會知道,之前做嘅 Android 應用功能都係比較簡單。有咗 Stitch 呢啲工具幫手,一方面佢可以幫我哋固定設計風格,另一方面,佢喺生成模擬界面嘅時候融入咗 Gemini 嘅智慧,有時生成嘅頁面會令你眼前一亮,覺得呢個功能好新穎。所以我哋可以嘗試叫佢一次性生成多個唔同頁面,用嚟優化產品功能。

喺頁面嘅步驟上面,可以睇到 Stitch 當時做咗啲乜嘢同諗過啲乜。揀中某個頁面之後,右邊有一個 Direct Edit 功能,可以喺下面輸入提示去修改,都支援上傳圖片。右邊嘅調色盤圖標㩒落去就係 Design Systems 面板,入去之後可以睇 DESIGN.md 文件。

圖片
圖片


DESIGN.md 設計系統

我翻譯咗呢份文件嘅內容:佢定義咗呢個應用嘅設計語言,摒棄咗陳腔濫調嘅設計風格,採用高對比度嘅基礎色、無邊線規則、表面層級與嵌套、玻璃與漸變規則等。文件入面詳細規定咗展示標題嘅字母間距、正文字號、背景嘅環境陰影等設計規範,仲包含咗主鍵同可摺疊適應性,以及應做同禁止事項。

圖片


就算唔用 Stitch 平台去做每個頁面嘅展示,呢份 Design System 都相當有價值。我哋可以直接下載並複製佢,然後交俾其他 AI 編程工具(例如 Claude Code),叫佢根據呢份 Design System 做出風格統一嘅應用界面。

我見到有博主分享咗一個思路:先用 Claude Code 做一套設計,但唔係直接將 HTML send 俾 Codex,而係叫 AI 根據呢套設計總結出一份類似嘅 Design System,再 send 俾 Codex 去生成。因為而家好多人認為 Codex 嘅編程能力係最強。

我尋日叫 Codex 做咗一個 macOS 應用,但佢嘅設計非常混亂,包括右邊三個片段生成失敗、對齊問題好差。

圖片


有咗 Stitch 之後,我哋就可以通過複製 Design System send 俾 Codex,叫佢幫我哋生成設計更好嘅應用。

Stitch 嘅導出能力

Stitch 支援多種導出方式:可以導出到 AI Studio,又可以導出到 Figma 同 Jules。Jules 可以理解為類似 Codex 嘅雲端 Agent,佢每日有非常慷慨嘅使用額度,好多人容易忽略呢個工具。如果揀 ZIP 導出,會得到一張截圖同 HTML 檔案。

圖片


當揀喺 AI Studio 裏面 Build 嗰陣,Stitch 會自動生成一句提示詞,並將圖片同 HTML 頁面一齊放進去,最終 AI Studio 好快就會幫你生成對應嘅頁面。

圖片
圖片

圖片

AI Studio Build:從原型到完整應用

AI Studio 裏面嘅 Build 都迎來咗重大升級。新版 Build 支援創建實時多人遊戲、協作工作空間同共享工具,新增咗數據庫同身份驗證功能。

https://aistudio.google.com/apps

呢度要提一提,Google 之前推出嘅 Firebase Studio 會喺出年三月停用,所以而家要轉去 AI Studio 裏面創建應用。如果你想要流暢嘅動畫或專業圖標,Agent 會自動幫你揾到合適嘅方案。Build 仲支援自行引入 API,整合數據庫、支付等功能,而且支援 Next.js 構建。

Google 仲計劃將 Drive 或 Sheets 連接到你嘅應用,並實現一鍵將應用從 AI Studio 轉移到 Antigravity。

實戰:打造「時光郵局」應用

跟住落嚟同大家展示我點樣通過 AI Studio Build 做出一個「時光郵局」應用,並最終通過 Cursor 部署到 Cloudflare。

圖片


圖片

圖片


喺呢個應用入面,我可以提筆寫信,支援語音輸入,右邊可以揀唔同嘅信紙風格,例如復古、牛皮、方格、稿紙等,左邊仲有三個簡單嘅格式調整掣。

下面可以揀拆信日期同心情標籤,之後就可以封存郵件。封存嗰陣仲會出現一段精美嘅動畫,應該係用 Framer Motion 做嘅。

呢個應用用咗 Firebase 儲存,所以我去邊度有網絡都可以登入睇信件。右邊仲有一個時光軸,記錄咗信件嘅開啟地點同寄出時間。成個應用嘅界面同基本功能,都係 Gemini 3.1 Pro 一次提示就完成。

構建過程

我俾佢嘅提示詞包含咗功能要求,其中特別要求數據持久化。一開始 Build 俾嘅方案係將數據保存喺本地。

圖片


構建好之後,佢會話俾我知已經實現咗啲乜嘢功能。

個項目連接咗去我嘅 GitHub,之後任何變動都可以同步。

我將程式下載之後,叫 Cursor 嘅 Composer 2 模型幫我分析技術棧同可以改進嘅地方。

前端用緊 React 19,透過 Vite 6 打包,樣式用 Tailwind CSS v4,動效採用 Framer Motion,圖標庫都係比較常見嘅方案。Composer 2 之後俾咗啲改進方向。

圖片


喺第二次提示中,我叫 Build 加埋 Google 登入功能,並要求淨係俾我一個人登入,數據要儲存喺 Firebase 度。

Build 即刻彈咗 Firebase 嘅設定視窗,配置完成之後就話俾我知已經成功整合咗 Firebase。

圖片


圖片


之前 AI 編程工具啱啱流行嘅時候,呢啲同 Google 服務嘅連接都幾麻煩,但而家真係一鍵整合,我測試咗一次就成功。

部署與注意事項

如果只係想做示範,可以直接透過 Publish 將應用發佈出去。

但我都想透過 Cloudflare 部署。我問 Build 可以透過咩方式部署,佢提示我部署前一定要先解決環境變數嘅問題,最正規嘅做法係改用標準嘅環境變數。跟住佢嘅建議操作之後,Build 更新咗環境變數模板同說明文件。

我仲叫佢檢查 .gitignore 有冇漏咗嘅檔案,以及有冇其他安全問題。另外我嘗試叫佢直接幫我 push 去 GitHub 再透過 Cloudflare 部署,但佢話唔得。最終嘅方案係將 Build 生成嘅應用透過 Git 下載落嚟,再用我嘅 AI 工具完成部署。

最後有個小提醒:喺將 Firebase 資料授權俾 Build 嘅時候,Google 寄電郵通知我 Firebase 嘅計劃已從 Spark 自動升級到 Blaze。

https://firebase.google.com/pricing

大家要留意自己嘅用量,因為 Blaze 雖然都有一定嘅免費額度,但如果你構建嘅應用使用人數好多,就要留意嚇你嘅計費方案喇。

以上就係今日介紹嘅 Stitch 同 AI Studio Build 嘅新體驗,我哋下次再見!

最近文章,請睇呢度:

MiniMax M2.7 深度實測:Agent 能力強,OpenClaw 搭配體驗拉滿

GPT-5.4 變強咗幾多?我實測後只想話:一邊驚豔,一邊抓狂

Qwen3.5 小模型實測:0.8B 到 35B-A3B,本地推理/視覺/OCR/編碼到底有幾強?

我點樣用 OpenClaw:真實體驗與進階技巧

大家好,我是 Kate。今天我將介紹谷歌兩個非常棒的產品升級——一個是 Stitch,另一個是 AI Studio 裏的 Build。

Stitch:煥然一新的設計體驗

Stitch 的界面迎來了一次重大更新,整體風格非常接近 Figma。更值得關注的是,它構建了一套 DESIGN.md 設計系統,並且支持將靜態設計快速轉化為交互式原型。

https://stitch.withgoogle.com

圖片


最近,Stitch 還推出了 MCP 和 SDK,同時擁有一個 Skills 倉庫,非常推薦大家去看一下。

https://github.com/google-labs-code/stitch-skills

實際使用體驗

我用英文提示 Stitch,讓它做一個適合摺疊屏的 AI 閲讀安卓應用。很快,左側就顯示出了它的思考過程,中間區域則展示了顏色、字體和圖標設計的預覽。它迅速幫我生成了多個頁面,設計風格和排版都相當不錯。

圖片


右上角有一個播放按鈕,點擊後選擇不同的頁面,就能生成交互式原型。我可以依次點擊 Library、Discover、AI Research 等板塊進行預覽。不過最後一個 Profile 頁面沒有連結好,但左側有一個"添加屏幕"的按鈕,點擊即可將 Profile 導入。選擇右側第二個按鈕後,畫面就會切換成平板樣式——左邊是文章內容,右側是 AI Research 助手,點擊左上角即可回到主頁。

圖片


參考截圖生成新風格

隨後,我找了一張 Exa 網站的截圖發過去,想讓 AI 複製 Exa 的風格。Stitch 很快就幫我生成了一套全新的風格。點擊某個頁面後,最上方有一個 Modify 按鈕,再點擊就會出現 Design Systems 面板,我們可以對任意主題的顏色和字體進行詳細更改。

圖片


之後我嘗試全選之前生成的頁面,想要批量應用新主題,但這次沒有成功。於是我直接在 Stitch 的對話框裏輸入"apply style to 某個頁面",通過 @ 符號選擇不同的頁面來逐個應用。最終生成的頁面和我提供的 Exa 網站元素非常相似。不過仔細看會發現一些小問題,比如原本應用底部有四個按鈕,新生成的頁面卻只有三個。遇到這種情況,一般直接刪掉讓它重新生成即可。

另外需要注意的是,由於 Stitch 是畫布式設計,有時候即使你選擇了某個位置,生成的內容可能會跑到畫布的其他區域,這時候只需要縮小畫面去找一下就好了。

官方演示裏是支持批量更換主題的,但我第一次嘗試時沒有成功,後來就改為逐張更換。在應用了新風格後,我讓它重新生成交互原型,Library、Discover、Research 等頁面的展示效果都很不錯。尤其是平板模式下的 AI 對話界面,我個人非常喜歡這樣的設計風格。

圖片


Stitch 對產品設計的價值

如果大家看過我上一期視頻就會知道,之前做的安卓應用功能還是比較簡單的。有了 Stitch 這樣的工具加持,一方面它可以幫我們固定設計風格,另一方面,它在生成模擬界面時融入了 Gemini 的智慧,有時生成的頁面會讓你眼前一亮,覺得這個功能很新穎。因此我們可以嘗試讓它一次性生成多個不同頁面,以此優化產品功能。

在頁面的步驟上方,可以看到 Stitch 當時做了哪些工作和思考。選中某個頁面後,右側有一個 Direct Edit 功能,可以在下方輸入提示進行修改,也支持上傳圖片。右側的調色盤圖標點擊後就是 Design Systems 面板,進入後可以查看 DESIGN.md 文檔。

圖片
圖片


DESIGN.md 設計系統

我翻譯了一下這份文檔的內容:它定義了這個應用的設計語言,摒棄了陳詞濫調的設計風格,採用高對比度的基礎色、無邊線規則、表面層級與嵌套、玻璃與漸變規則等。文檔中詳細規定了展示標題的字母間距、正文字號、背景的環境陰影等設計規範,還包含了主鍵與可摺疊適應性,以及應做與禁止事項。

圖片


即使不用 Stitch 平台來製作每個頁面的展示,這份 Design System 也非常有價值。我們可以直接下載並複製它,然後交給其他 AI 編程工具(比如 Claude Code),讓它根據這份 Design System 做出風格統一的應用界面。

我看到有博主分享了一個思路:先用 Claude Code 做一套設計,但不是直接把 HTML 發給 Codex,而是讓 AI 根據這套設計總結出一份類似的 Design System,再發給 Codex 去生成。因為目前很多人認為 Codex 的編程能力是最強的。

我昨天讓 Codex 做了一個 macOS 應用,但它的設計非常凌亂,包括右側三個片段生成失敗、對齊問題非常糟糕。

圖片


有了 Stitch 之後,我們就可以通過複製 Design System 發給 Codex,讓它幫我們生成設計更好的應用。

Stitch 的導出能力

Stitch 支持多種導出方式:可以導出到 AI Studio,也可以導出到 Figma 和 Jules。Jules 可以理解為類似 Codex 的雲端 Agent,它每天有非常慷慨的使用額度,很多人容易忽略這個工具。如果選擇 ZIP 導出,會得到一張截圖和 HTML 文件。

圖片


當選擇在 AI Studio 裏 Build 時,Stitch 會自動生成一句提示詞,並將圖片和 HTML 頁面一起放進去,最終 AI Studio 很快就能幫你生成對應的頁面。

圖片
圖片

圖片

AI Studio Build:從原型到完整應用

AI Studio 裏的 Build 也迎來了重大升級。新版 Build 支持創建實時多人遊戲、協作工作空間和共享工具,新增了數據庫和身份驗證功能。

https://aistudio.google.com/apps

這裏需要提一下,谷歌之前推出的 Firebase Studio 將於明年三月份棄用,因此現在需要轉到 AI Studio 裏創建應用。如果你想要流暢的動畫或專業圖標,Agent 會自動為你找到合適的方案。Build 還支持自行引入 API,集成數據庫、支付等功能,並且支持 Next.js 構建。

谷歌還計劃將 Drive 或 Sheets 連接到你的應用,並實現一鍵將應用從 AI Studio 轉移到 Antigravity。

實戰:打造"時光郵局"應用

接下來給大家展示我如何通過 AI Studio Build 做出一個"時光郵局"應用,並最終通過 Cursor 部署到 Cloudflare。

圖片


圖片

圖片


在這個應用裏,我可以提筆寫信,支持語音輸入,右側可以選擇不同的信紙風格,比如復古、牛皮、方格、稿紙等,左邊還有三個簡單的格式調整按鈕。

下方可以選擇拆信日期和心情標籤,之後就能封存郵件。封存時還會出現一段精美的動畫,應該是用 Framer Motion 做的。

這個應用用到了 Firebase 存儲,所以我在任何有網絡的地方都可以登錄查看信件。右側還有一個時光軸,記錄了信件的開啓地點和寄出時間。整個應用的界面和基本功能,都是 Gemini 3.1 Pro 一次提示就完成的。

構建過程

我給它的提示詞包含了功能要求,其中特別要求數據持久化。一開始 Build 給的方案是將數據保存在本地。

圖片


構建好後,它會告訴我已經實現了哪些功能。

項目連接到了我的 GitHub,後續任何變動也都可以同步。

我將程序下載後,讓 Cursor 的 Composer 2 模型幫我分析技術棧和可改進的點。

前端使用的是 React 19,通過 Vite 6 打包,樣式用 Tailwind CSS v4,動效採用 Framer Motion,圖標庫也是比較常見的方案。Composer 2 隨後給出了一些改進方向。

圖片


在第二次提示中,我讓 Build 增加谷歌登錄功能,並要求只允許我一個人登錄,數據要存儲在 Firebase 裏。

Build 隨即彈出了 Firebase 的設置窗口,配置完成後就告訴我已經成功集成了 Firebase。

圖片


圖片


之前 AI 編程工具剛流行的時候,這種和谷歌服務的連接還是比較麻煩的,而現在真的是一鍵集成,我測試了一次就成功了。

部署與注意事項

如果只是想做演示,可以直接通過 Publish 將應用發佈出去。

但我還是想通過 Cloudflare 進行部署。我問 Build 可以通過哪些方式部署,它提示我部署前必須先解決環境變量的問題,最正規的做法是改用標準的環境變量。按照它的建議操作後,Build 更新了環境變量模板和說明文檔。

我還讓它檢查 .gitignore 裏有無遺漏的文件,以及是否存在其他安全問題。此外我嘗試讓它直接幫我 push 到 GitHub 再通過 Cloudflare 部署,但它告訴我不行。最終的方案是將 Build 生成的應用通過 Git 下載下來,再用我的 AI 工具完成部署。

最後有一個小提醒:在將 Firebase 信息授權給 Build 的時候,谷歌發郵件通知我 Firebase 的計劃已從 Spark 自動升級到了 Blaze。

https://firebase.google.com/pricing

大家需要留意自己的使用量,因為 Blaze 雖然也有一定的免費額度,但如果你構建的應用使用人數特別多,就需要注意一下你的計費方案了。

以上就是今天介紹的 Stitch 和 AI Studio Build 的新體驗,我們下次再見!

最近文章,請看這裏:

MiniMax M2.7 深度實測:Agent 能力強,OpenClaw 搭配體驗拉滿

GPT-5.4 變強了多少?我實測後只想說:一邊驚豔,一邊抓狂

Qwen3.5 小模型實測:0.8B 到 35B-A3B,本地推理/視覺/OCR/編碼到底有多強?

我怎麼用 OpenClaw:真實體驗與進階技巧