電腦王阿達
  • 首頁
  • 科技新聞
    • 最新科技新聞
    • AI 新聞與教學
      • AI 工具分享與教學
      • AI 趨勢與相關新聞
    • 產品評測
      • GPS/行車記錄器評測
      • iOS周邊
      • Android周邊
    • 通訊達人
    • 科技廠商專訪報導
    • 電腦硬體周邊情報
    • 相機
  • 酷品開箱
  • 阿達自製工具
    • 非記不可:絕不會錯過重要事件
    • LINE貼圖裁切去背神器
    • Nano Banana Pro 去浮水印工具
    • 最愛提示詞收集站
    • 簡繁轉換工具
    • 表情與特殊符號速查表
  • APP/軟體/教學
    • 電腦應用與其他教學
      • 網路與軟體應用
      • 多媒體轉檔/運用
      • 其他文章
    • 跨平台App
    • iPhone/iPad相關
      • iPhone/iPad 軟體介紹
      • iPhone/iPad 使用教學
      • iOS JB/CYDIA應用
    • Android相關資訊
      • Android App分享介紹
      • Android 基礎教學
      • 智慧手機韌體更新
      • Windows Mobile手機相關文章
    • Mac 軟體分享與教學
    • LINE
    • Telegram
    • 攝影教學
    • 語文學習
    • 轉貼好文
    • WordPress 架站教學分享
    • 未分類文章
  • 休閒/懶人包
    • 新聞台直播 頻道大集合!想看新聞不用辦第四台!
    • 遊戲電玩
    • 動漫、玩具、敗家
      • 老弟紙模型作品集
    • KUSO
      • 有趣影片
    • 圖文創作
    • 生活與旅遊
    • 超好用懶人包
    • 最新抽獎情報公告
    • Pokemon GO攻略
  • 電腦王團隊
No Result
View All Result
  • 首頁
  • 科技新聞
    • 最新科技新聞
    • AI 新聞與教學
      • AI 工具分享與教學
      • AI 趨勢與相關新聞
    • 產品評測
      • GPS/行車記錄器評測
      • iOS周邊
      • Android周邊
    • 通訊達人
    • 科技廠商專訪報導
    • 電腦硬體周邊情報
    • 相機
  • 酷品開箱
  • 阿達自製工具
    • 非記不可:絕不會錯過重要事件
    • LINE貼圖裁切去背神器
    • Nano Banana Pro 去浮水印工具
    • 最愛提示詞收集站
    • 簡繁轉換工具
    • 表情與特殊符號速查表
  • APP/軟體/教學
    • 電腦應用與其他教學
      • 網路與軟體應用
      • 多媒體轉檔/運用
      • 其他文章
    • 跨平台App
    • iPhone/iPad相關
      • iPhone/iPad 軟體介紹
      • iPhone/iPad 使用教學
      • iOS JB/CYDIA應用
    • Android相關資訊
      • Android App分享介紹
      • Android 基礎教學
      • 智慧手機韌體更新
      • Windows Mobile手機相關文章
    • Mac 軟體分享與教學
    • LINE
    • Telegram
    • 攝影教學
    • 語文學習
    • 轉貼好文
    • WordPress 架站教學分享
    • 未分類文章
  • 休閒/懶人包
    • 新聞台直播 頻道大集合!想看新聞不用辦第四台!
    • 遊戲電玩
    • 動漫、玩具、敗家
      • 老弟紙模型作品集
    • KUSO
      • 有趣影片
    • 圖文創作
    • 生活與旅遊
    • 超好用懶人包
    • 最新抽獎情報公告
    • Pokemon GO攻略
  • 電腦王團隊
No Result
View All Result
電腦王阿達
No Result
View All Result

首頁 » AI 新聞與教學 » AI 工具分享與教學

Tags: aiGoogleStitch人工智慧

Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁

這真的蠻強的,還免費用

Rocky by Rocky
2026 年 03 月 19 日
in AI 工具分享與教學
讀取中...

Google 在去年 Google I/O 2025  就已經推出 Stitch,讓使用者只要輸入文字描述或上傳草圖,即可快速產出 UI 介面設計,當時就引起不少關注。

而稍早 Google 在官方部落格宣布,Stitch 迎來一次大改版,導入全新的「Vibe Design(氛圍設計)」概念,加入無限畫布、AI 設計代理、語音互動、以及最重要的 React 程式碼匯出功能,從原本單純的「生成 UI 畫面」,進化成一個更完整的 AI 原生設計平台。

Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

Google Stitch 大改版!從文字生成 UI 進化到「Vibe Design」,還能直接輸出 React App

Stitch 是 Google Labs 旗下的一款實驗性 AI 工具,核心功能就是「文字轉 UI」和「圖片轉 UI」,只要用一段文字描述你想要的 App 介面,而這次改版的幅度可說非常大,以下是幾個重點變化。

首先是最重要的「Vibe Design」概念,過去透過 Stitch 設計通常是從線框圖、格線系統開始,但現在可以從更抽象的起點出發,如:一個目標、一種感覺、或一個產品想法,AI 會根據你的描述,產出高擬真度的 UI 設計,大幅降低不知道怎麼開始的門檻。

Today, we’re evolving @StitchbyGoogle from @GoogleLabs into an AI design canvas transforms natural language prompts into production-ready front-end code.

Some highlights from what’s new:

1. A complete redesign of the Stitch UI, which can now ingest multimodal references (text… pic.twitter.com/Ua0XbwLKyO

— Google AI (@GoogleAI) March 18, 2026

再來是全新的「AI 原生無限畫布」,跟以前固定面板式的操作不同,現在 Stitch 有一個可以自由延伸的畫布空間,你可以在上面放入各種素材,包括文字描述、截圖、UI 參考圖、甚至程式碼片段,AI 代理會根據這些內容來理解整個專案的脈絡,而不是單獨回應每一次的提示:
Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

第三為全新的「情境感知設計代理(context-aware design agent)」。跟以往一問一答的 AI 不同,這個設計代理能夠理解整個專案的演變過程,不只是回應你當下的提示,而是綜觀全局來給出建議,還會同時探索多個不同的設計方向。

第四是「互動式原型」,現在靜態設計稿也能直接轉換成可點擊的原型,AI 甚至會根據使用者的互動邏輯,主動建議你可能還缺少哪些畫面:
Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

第五是「語音互動功能」,你可以用語音對 AI 代理下指令,請它修改設計,或是一起腦力激盪,不用再靠打字:
Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

第六是 DESIGN.md 格式。這是一種專為 AI 代理設計的 markdown 檔案,可把你的設計系統規則(例如配色、字型、元件樣式等)匯出成一份文件,之後再匯入到其他設計或開發工具中使用。讓你在不同專案或工具之間,都能維持一致的視覺風格,不用每次重新設定。

最後也是最大亮點:React 程式碼匯出。以前 Stitch 只能輸出 HTML 和 CSS,但現在可以從設計稿直接生成完整可運行的 React 應用程式,程式碼甚至還能匯出到 Google AI Studio 或其他開發工具中繼續開發。

如何使用 Google Stitch?

Google Stitch 雖然是實驗性工具,但只要在 Gemini 能用的國家,就能使用這款工具,意味著台灣也可以,而且現階段還是免費,只是每日有額度限制。

前往 Google Stitch

在 Google Stitch 的設定中可以查到剩餘多少額度:
Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

使用方式很簡單,按上方連結進到 Stitch 後,登入你的 Google 帳號,就能開始跟 AI 聊天。右下角可切換模型,如果你只知道想做什麼,但不知怎麼給細節的話,可以使用新的「Ideate」模型。送出前,下方可以切換你要生成應用程式還是網頁:
Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

我要求生成一個能在 iPhone 運行的記帳 App:
Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

等待個幾分鐘的時間,我要求的功能就都生成出來了,介面非常有質感:
Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

有任何不滿意的地方,都能繼續要求 AI 修改,像我這個 App 不是中文語系:
Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

我就要求內容都使用繁體中文:
Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

AI 就幫我把介面都改成繁體中文,而且是新生成一個版本,不會修改原本的,代表說如果不滿意,都能回到上一個版本重新給指令:
Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

也能選擇單一介面來修改,我要求再新增交易裡添加「上傳圖片」:

Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

AI 也完美地做到:
Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

如果你想要看即時的畫面效果,選擇好介面後,打開上方選單,就能找到轉換「即時原型」的功能:
Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

就能體驗將這介面轉成實際 App 後,會是怎樣的操作畫面:
Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

也能選擇多個介面轉成原型,以及切換不同裝置的畫面,下圖是桌面版:
Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

上方切換到 Edit,可要求 AI 針對這個介面進行修改:
Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

一切都完成後,按右上方的匯出,就能選擇後續的開發方式,像是匯出到 AI Sutdio 繼續開發、匯出成 Stitch React 應用程式:
Google Stitch 全新改版!導入 Vibe Design,一句話就能生成高質感 UI 設計的手機 App 或網頁 - 電腦王阿達

Stitch 的功能還不只這些,這邊僅快速展示整個使用流程,大家可以花時間玩玩看。

Tags: aiGoogleStitch人工智慧

您也許會喜歡:

立達合法徵信社-讓您安心的選擇

網站搜尋

No Result
View All Result

廣告


歡迎手機廠商、iPhone 周邊產品業者、APP軟體開發商洽談合作或產品測試事宜 koc koc.com.tw |隱私政策 |主機維護:Fast Line 台灣速連,阿腸數位科技

No Result
View All Result
  • 最新科技新聞
  • 最新科技產品報導
    • 3C產品開箱/廠商邀測
      • GPS/行車記錄器評測
    • 通訊達人
    • 科技廠商專訪報導
      • 專題報導
    • 電腦硬體周邊情報
    • Android周邊
    • iOS周邊
  • 好用App介紹
    • Android App分享介紹
      • Android 基礎教學
    • iPhone/iPad 軟體介紹
      • iPhone/iPad 使用教學
      • iOS JB教學
      • iOS軟體與JB相關文章
      • iOS JB/CYDIA應用
    • 跨平台App
    • Telegram
  • 電腦應用與其他教學
    • Mac OS 軟體分享與教學
    • 網路與軟體應用
    • WordPress 架站教學分享
    • 多媒體轉檔/運用
    • 語文學習
    • 轉貼好文
    • 其他文章
  • 旅遊與美食
    • 生活與旅遊
    • 圖文創作
    • 有趣影片
    • 動漫、玩具、敗家
    • 老弟紙模型作品集
    • KUSO
    • 阿達玩App
    • Pokemon Go攻略
  • 阿達自製工具
    • 超好用懶人包
    • Nano Banana Pro 去浮水印工具
    • 自製LINE 貼圖裁切去背神器
    • 阿達的提示詞收集站
    • 簡繁轉換工具
    • 表情與特殊符號速查表
  • 電腦王阿達團隊

歡迎手機廠商、iPhone 周邊產品業者、APP軟體開發商洽談合作或產品測試事宜 koc koc.com.tw |隱私政策 |主機維護:Fast Line 台灣速連,阿腸數位科技

No Result
View All Result
  • 最新科技新聞
  • 最新科技產品報導
    • 3C產品開箱/廠商邀測
      • GPS/行車記錄器評測
    • 通訊達人
    • 科技廠商專訪報導
      • 專題報導
    • 電腦硬體周邊情報
    • Android周邊
    • iOS周邊
  • 好用App介紹
    • Android App分享介紹
      • Android 基礎教學
    • iPhone/iPad 軟體介紹
      • iPhone/iPad 使用教學
      • iOS JB教學
      • iOS軟體與JB相關文章
      • iOS JB/CYDIA應用
    • 跨平台App
    • Telegram
  • 電腦應用與其他教學
    • Mac OS 軟體分享與教學
    • 網路與軟體應用
    • WordPress 架站教學分享
    • 多媒體轉檔/運用
    • 語文學習
    • 轉貼好文
    • 其他文章
  • 旅遊與美食
    • 生活與旅遊
    • 圖文創作
    • 有趣影片
    • 動漫、玩具、敗家
    • 老弟紙模型作品集
    • KUSO
    • 阿達玩App
    • Pokemon Go攻略
  • 阿達自製工具
    • 超好用懶人包
    • Nano Banana Pro 去浮水印工具
    • 自製LINE 貼圖裁切去背神器
    • 阿達的提示詞收集站
    • 簡繁轉換工具
    • 表情與特殊符號速查表
  • 電腦王阿達團隊

歡迎手機廠商、iPhone 周邊產品業者、APP軟體開發商洽談合作或產品測試事宜 koc koc.com.tw |隱私政策 |主機維護:Fast Line 台灣速連,阿腸數位科技