跳到主要內容

建議修改

告訴我們哪裡有錯或缺了什麼。每一則建議我們都會對照工具的官網查證。

方便的話,附上官網上寫明這一點的連結。

想收到回覆再填寫。

從文字提示、草圖與螢幕截圖產生 UI 設計與前端程式碼。

查證於 2026年11月3日

你是 Stitch 的開發者嗎?認領工具廣告合作
Stitch 官網截圖

Stitch 是什麼?

Stitch 是 Google Labs 的實驗性工具,使用 Gemini 2.5 Pro,從文字或圖片產生使用者介面設計與前端程式碼。它協助設計師與開發者將應用程式的初步構想轉成視覺介面,方便後續調整並進入開發階段。

使用者可以用日常英文描述應用程式,包括配色與預期的使用者體驗,也可以上傳草圖、螢幕截圖或線框圖作為起點。Stitch 會根據這些輸入產生介面設計,並支援透過互動式對話、圖片輸入與主題選擇器進一步修改。使用者也能產生多個版本,比較不同的版面配置、元件與風格。

交付設計時,可以將產生的介面貼到 Figma,繼續編輯與協作。Stitch 也能根據設計匯出前端程式碼。它著重於介面的產生與調整,而非建置應用程式的後端。

Stitch 能做什麼?

  • 文字轉 UI

    描述應用程式、配色與預期體驗,即可產生視覺介面。

  • 以圖片產生設計

    上傳草圖、螢幕截圖或線框圖,產生對應的數位介面。

  • 透過對話調整

    透過互動式對話、圖片輸入與主題選擇器,調整產生的設計。

  • 多版本設計

    產生多個介面版本,探索不同的版面配置、元件與風格。

  • 貼到 Figma

    將產生的設計移至 Figma,繼續調整與協作。

  • 匯出前端程式碼

    根據產生的介面匯出前端程式碼,接續開發工作。

Stitch 適合誰?

UI 設計師
探索介面構想,並將產生的設計移至 Figma 繼續編輯。
前端開發者
將應用程式描述或視覺參考轉成介面設計與前端程式碼。

常見問題

可以用哪些輸入內容產生設計?

你可以用日常英文描述,也可以上傳草圖、螢幕截圖與線框圖等圖片。

可以在 Figma 中編輯 Stitch 的設計嗎?

可以。Stitch 提供貼到 Figma 的功能,方便進一步調整設計與協作。

Stitch 能產生程式碼嗎?

可以。它能根據你的介面設計產生並匯出前端程式碼。

Stitch 的替代方案

比較替代方案
  1. 1Figma在共享工作空間中設計介面、打造應用程式與網站,並與 AI 協作。
  2. 2Canva運用 AI 輔助設計工具製作簡報、圖像、相片與影片。
  3. 3Claude Design用 Claude 製作並修改品牌視覺、簡報與介面模型。
  4. 4Converge.AI用 AI 代理打造應用程式,製作行銷圖片、設計與影片。
  5. 5SciDraw AI產生科學插圖與資料圖表,並匯出為可編輯格式。