Vibe Coding 時代來臨：用 Google Stitch 把草圖變成真實 App
還記得以前開發 App 時，設計師丟來一張 Figma 設計稿，你就要開始一個像素一個像素地刻畫面嗎？那些日子已經過去了。現在，我們進入了 Vibe Coding 的時代——你只需要畫個草圖，AI 就能幫你生成完整的 UI 代碼。 今天要介紹的 Google Stitch ，就是這個新時代的完美代表。 什麼是 Google Stitch？ Google Stitch 是 Google 最新推出的 AI 工具，基於強大的 Gemini 2.5 模型。它的核心特色是 Image-to-UI （圖像轉 UI）功能，讓你可以直接把手繪草圖轉換成可用的代碼。 為什麼 Stitch 比傳統工具更好？ 你可能會問：「市面上不是已經有 V0.dev 或類似的文字生成 UI 工具了嗎？為什麼還需要 Stitch？」 答案是： 視覺直覺 。 傳統方式的限制 V0.dev / 純文字生成 ：你需要用文字描述你想要什麼，但「一個圓形的按鈕，放在右上角，顏色是藍色」這樣的描述，往往無法精確傳達你的視覺想法，你需要花大量時間描述佈局、間距、顏色等細節。 Stitch 的優勢 手繪草圖直接轉換 ：你畫什麼，它生成什麼。視覺想法直接轉換，不需要中間的「翻譯」過程。 理解設計意圖 ：Stitch 能理解你的草圖中的設計邏輯，而不只是像素級別的複製。 無縫匯出 ：生成的代碼可以直接匯出到 Figma 或 HTML ，無縫整合到你的工作流程中。 🚀 一鍵匯出至 AI Studio ：最新功能！無需手動複製貼上，直接將完整上下文（HTML 程式碼 + 螢幕截圖）匯出到 AI Studio，立即使用 Gemini 3 進行進一步開發。 實際使用場景 想像一下這個場景： 你在白板上畫了一個 App 登入頁面的草圖 用手機拍下來，上傳到 Stitch 幾秒鐘後，你得到完整的 React 組件代碼 代碼可以直接在瀏覽器中運行，或者匯出到 Figma 進一步設計 這就是 Vibe Coding 的魅力——從想法到實現，幾乎沒有摩擦。 Google Stitch + Cursor 的黃金組合 雖然 Stitch 能生成漂亮的 UI 代碼，但一個完整的 App 還需要後端邏輯、API ...