Google Stitch AI 設計速成班

實體AI教學課程內容

Google Stitch AI 設計速成班：兩小時實戰導引
這堂課針對初學者、產品負責人與程式開發人員量身打造，利用 Google Stitch（stitch.withgoogle.com）這套免費 AI 神器，教你靠日常語言輕鬆打造精美 UI 畫面與前端代碼。短短兩小時，從基礎上手到實際案子，精通文字轉介面、即時微調與多頁原型技巧，設計速度飆升 5-10 倍。不用碰 Figma，也適合創業小組、教學從業人員與內容團隊。內含動手練習、範例資源與互動問答，結束後你就能獨力完成 App 或網站原型。

學習目標：

• 搞懂 Stitch 主要功能及 Gemini 模型用法

• 動手做 3 款完整 UI 作品（手機應用、網頁面板、購物頁面）

• 掌握代碼導出與 Figma 串接，縮短構想到實作的路程

目標學員：設計新手、AI 教學專家、公司內容小組
總時數：120 分鐘（線上即時或錄製版）
所需設備：Google 帳號、網頁瀏覽器

課程架構

第一單元：入門概覽與平台熟悉

• Stitch 背景與註冊流程
  Google Stitch 來龍去脈、免費額度（Standard 每月 350 次、Experimental 每月 50 次）、進入 stitch.withgoogle.com 與資料保護配置。

• 面板瀏覽與初次創作
  工作區操控、模式轉換（Flash 速成 vs Pro 精細）、提示詞訣竅（詳細說明 + 風格詞彙）。實戰：製作基本登入畫面。

• 基礎知識
  文字生 UI、圖片轉 UI、氛圍設計原理；避開坑洞與提示優化（如「簡約北歐手機主頁」）。

收穫：做出首個 UI 方案並現場檢視。

第二單元：主要技巧動手操作

• 文字圖像轉換生成
  文字生 UI 深化：定義版面（選單、卡片、數據圖）；圖片生 UI：傳草稿變精緻版面。實戰：打造健身 App 主頁（多方案挑選）。

• 聊天微調與樣式調整
  對話修改（色調、字型、留白）；語音畫布輸入；多頁統一變更。實戰：將 App 轉暗色主題。

• 智能頁面連結
  產生連動頁面（主頁 → 選項 → 個人頁）；自動畫面流程。

收穫：建好 3 頁 App 原型並連動演示。

第三單元：高階用法與輸出應用

• 風格規範與團體合作
  DESIGN.md 規範傳遞、品牌統一執行；A/B 方案比對。實戰：套用公司風格到 SaaS 控制台。

• 代碼工具銜接
  輸出 HTML/CSS/React/Tailwind；Figma 快速導入（自動排版）；SDK/MCP 進階開發。實戰：抓取電商頁代碼並試跑。

• 實務情境探討
  創業 MVP、宣傳頁面、教育模型；連結 Firebase/Gemini 系統。

收穫：產生可用檔案並產生分享鏈。

第四單元：專案挑戰與實用秘訣

• 全案實操
  任務：依需求描述建電商 App（主頁 + 商品細節 + 結帳），全程微調到完成。

收穫：學員自製專屬作品集。

第五單元：回顧問答與後續資源

• 總結重點與訣竅彙整
  5 款提示模板、效率流程圖示。

• 互動問答與擴展路徑
  回應提問；推介資料（Google AI 學習、Stitch 動態、交流圈子）。