Google Stitch AI設計課程

Google Stitch AI 設計課程：兩小時精華班
本課程專為零基礎設計師、產品經理、前端開發者與 AI 愛好者設計，透過 Google Stitch（stitch.withgoogle.com）這款免費 AI 工具，學會用自然語言快速生成專業 UI 介面與程式碼。兩小時內，從入門操作到實戰專案，掌握 Text-to-UI、迭代編輯與多頁面原型技巧，提升設計效率 5-10 倍。無需 Figma 經驗，適合初創團隊、教育工作者與內容創作者。課程包含實作練習、範例檔案與 Q&A，完成後能獨立製作 App/Web 原型。

課程目標：

• 理解 Stitch 核心功能與 Gemini 模型應用

• 實作 3 個完整 UI 專案（行動 App、網頁儀表板、電商頁面）

• 學會匯出程式碼與 Figma 整合，加速從想法到上線

適合對象：無設計基礎者、AI 教育工作者、企業內容團隊
上課時長：120 分鐘（線上直播或錄播）
工具需求：Google 帳號、瀏覽器

課程大綱

第一模塊：快速入門與工具認識

• Stitch 介紹與帳號設定
  Google Stitch 背景、免費配額（Standard 350 次/月、Experimental 50 次/月）、登入 stitch.withgoogle.com 與隱私設定。

• 介面導覽與首次生成
  畫布操作、模式切換（Flash 快速 vs Pro 高保真）、輸入提示技巧（具體描述 + 風格關鍵詞）。實作：生成簡單登入頁面。

• 基本概念
  Text-to-UI、Image-to-UI、Vibe Design 原理；常見錯誤與 Prompt 優化（如「極簡北歐風行動 App 首頁」）。

成果：產生第一個 UI 變體並預覽。

第二模塊：核心功能實作

• 文字與圖像生成
  Text-to-UI 進階：指定佈局（導航、卡片、圖表）；Image-to-UI：上傳草圖轉數位介面。實作：設計健身追蹤 App 首頁（多變體選擇）。

• 對話式迭代與主題編輯
  聊天調整（顏色、字體、間距）；Voice Canvas 語音輸入；批量修改多畫面。實作：優化 App 介面為暗黑模式。

• 自動畫面串聯
  生成關聯頁面（首頁 → 設定 → 個人資料）；Auto Screen 工作流。

成果：完成 3 頁面 App 原型並串聯互動。

第三模塊：進階應用與匯出

• 風格指南與團隊協作
  DESIGN.md 規則共享、品牌一致性應用；A/B 測試變體生成。實作：套用企業品牌風格於 SaaS 儀表板。

• 程式碼與工具整合
  匯出 HTML/CSS/React/Tailwind；Figma 一鍵貼上（Auto Layout）；SDK/MCP 開發者應用。實作：下載電商頁面程式碼並預覽。

• 應用場景討論
  初創 MVP、行銷落地頁、教育原型；與 Firebase/Gemini 生態聯動。

成果：匯出生產級檔案並分享連結。

第四模塊：實戰專案與最佳實踐

• 完整專案實作
  挑戰：從需求描述生成電商 App（首頁 + 產品詳情 + 購物車），全程迭代與匯出。

• 常見問題排除
  生成偏差修正、配額管理、複雜互動補強（轉 Figma）。

成果：學員獨立產出個人專案檔案。

第五模塊：總結 Q&A 與進階資源

• 課程回顧與技巧清單
  5 大 Prompt 模板、生產力工作流圖解。

• Q&A 與延伸學習
  解答疑問；推薦資源（Google AI 課程、Stitch 更新日誌、社群分享）。