Google Stitch 是Google Labs 推出的一款實驗性 AI 驅動 UI/UX 設計工具。目前為免費使用，目前每月約有 350 次生成額度限制。
- 文字生成介面 (Text-to-UI)：輸入一段話描述你想要的 App 功能，AI 會自動長出包含多個頁面的 UI 設計稿。
- Vibe Design（氛圍設計）：Google 推出了「Vibe Design」概念，使用者不需精確的設計術語，只需描述「氛圍」或「感受」，AI 就能產出對應的風格。
- 語音控制與互動原型：支援語音指令修改設計，並能快速生成可點擊、可操作的 Demo 互動原型。
- 程式碼匯出：可直接匯出 HTML、CSS、React 等前端程式碼，加速從設計到開發的流程。
- 無縫整合 Figma：支援一鍵匯出至 Figma，方便專業設計師在熟悉的環境中進行後續細部微調。
- AI 原生畫布與 Agent：具備「AI 原生畫布」讓創意直接呈現，並有升級版的設計 Agent 提供更精準的對話式調整。
本篇內容要以設計 SDGs 教學的互動式網頁為例，先在 Stitch 中設計網頁的界面，再到 Claude 中網頁建立。
SDGs 網頁設計實作
以下以製作 SDGs 互動式教學為例，使用提示詞：
設計一個適合高中學生使用的互動式學習網頁，內容是學習SDGs 17個永續目標，背景使用具溫暖有氛圍感的色彩，圖示具扁平化設計，整體色彩配合SDGs 各個指標的色彩，頁面有導覽列，並能呈現網頁閱讀軌跡，介面所有文字使用繁體中文，專有名詞附英文。
結果：Stitch 以 SDG 4 為範例做了幾個網頁的頁面。
你可以繼續下指令，選用不同模型。
也以切換至 Live Mode，直接使用語音來操控：
可以設定網頁的配色：
接著可以將 Stitch 完成的結果匯出，如果匯出至 AI Studio 可以進行預覽，如果匯出至 ZIP 檔，可以移轉至其他 AI 繼續製作。
本例來到 Claude，並且上傳在 Stitch 輸出的 ZIP 檔。並使用提示詞：
根據檔案內的設計內容，補充並優化文字內容後，設計成一個完整的網頁站。
Claude 產生的網頁，是完整的內容喔！已經將 SDG 1 - SDG 17 的內容都建立好。
學習歷程網頁：
也有挑戰測驗網頁：
我在 Stitch 中將 SDG 1 - SDG 17 的每一個議題都做出來，並且下載 ZIP 檔。
再次使用 Claude，並且上傳在 Stitch 輸出的 ZIP 檔。並使用提示詞：
根據檔案內的設計內容，補充並優化文字內容後，設計成一個完整的網頁站。
其中的內容是 Stitch + Claude 的結果：
教學應用
教師在教學上可能可以使用下幾種應用方式：
- 資訊科技與設計教育
- 快速原型製作：教師在教授 UI/UX 設計或 App 開發課程時，可引導學生使用 Stitch 快速將創意轉化為視覺初稿，大幅縮短從想法到視覺化的過程。
- 設計流程教學：輔助學生理解 AI 如何與傳統設計工作流程（如一鍵匯出至 Figma 進行細部調整）進行協作。
- 數位教材與工具開發
- 設計教學輔具介面：教師若想為特定學科（如語言學習、測驗系統）開發簡易的數位教學工具，可利用 Stitch 生成專業的介面模板，降低技術門檻。
- 美化課程網頁：教師在製作互動式教材或班級網頁時，可利用 Stitch 產出的設計靈感提升視覺品質。
- 跨學科邏輯訓練
- 精準指令練習：訓練學生如何撰寫精確的文字描述來引導 AI 產出預期結果，這能強化邏輯思考與表達能力。
