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 的優勢

  1. 手繪草圖直接轉換：你畫什麼，它生成什麼。視覺想法直接轉換，不需要中間的「翻譯」過程。
  2. 理解設計意圖：Stitch 能理解你的草圖中的設計邏輯，而不只是像素級別的複製。
  3. 無縫匯出：生成的代碼可以直接匯出到 Figma 或 HTML，無縫整合到你的工作流程中。
  4. 🚀 一鍵匯出至 AI Studio：最新功能！無需手動複製貼上，直接將完整上下文（HTML 程式碼 + 螢幕截圖）匯出到 AI Studio，立即使用 Gemini 3 進行進一步開發。

實際使用場景

想像一下這個場景：

  1. 你在白板上畫了一個 App 登入頁面的草圖
  2. 用手機拍下來，上傳到 Stitch
  3. 幾秒鐘後，你得到完整的 React 組件代碼
  4. 代碼可以直接在瀏覽器中運行，或者匯出到 Figma 進一步設計

這就是 Vibe Coding 的魅力——從想法到實現，幾乎沒有摩擦。


Google Stitch + Cursor 的黃金組合

雖然 Stitch 能生成漂亮的 UI 代碼，但一個完整的 App 還需要後端邏輯、API 整合、狀態管理等。這時候，Cursor 就派上用場了。

為什麼是 Cursor？

Cursor 是目前最強大的 AI 程式編輯器，它能夠：

  • 理解整個專案的上下文
  • 自動補完代碼邏輯
  • 協助重構和優化
  • 整合多種 AI 模型（包括 Claude、GPT-4 等）

完整工作流程

步驟 1：用 Stitch 生成 UI

  1. 訪問 stitch.withgoogle.com
  2. 上傳你的手繪草圖或設計稿
  3. 等待 Stitch 生成代碼（通常只需要幾秒鐘）
  4. 預覽生成的 UI，確認是否符合預期
  5. 複製生成的 HTML/React 代碼

步驟 2：在 Cursor 中建立專案

# 建立新的 React 專案
npx create-react-app my-app
cd my-app
 
# 或者使用 Vite（推薦，更快）
npm create vite@latest my-app -- --template react
cd my-app

步驟 3：貼上 Stitch 生成的代碼

將 Stitch 生成的組件代碼貼到 Cursor 中，例如：

// App.jsx - 從 Stitch 生成的代碼
import React from 'react';
import './App.css';
 
function LoginPage() {
return (
<div className="login-container">
<div className="login-card">
<h1>歡迎回來</h1>
<input type="email" placeholder="電子郵件" />
<input type="password" placeholder="密碼" />
<button>登入</button>
</div>
</div>
);
}
 
export default LoginPage;

步驟 4：用 Cursor AI 補完後端邏輯

現在，在 Cursor 中開啟 AI 對話（Cmd+K 或 Ctrl+K），告訴它：

「幫我為這個登入頁面添加表單驗證、錯誤處理，並整合 Firebase Authentication。同時添加 loading 狀態和成功/失敗的提示訊息。」


Cursor 會自動添加表單驗證邏輯、整合 Firebase SDK、處理非同步操作、添加錯誤處理並優化用戶體驗。

步驟 5：整合 Firecrawl（可選）

如果你需要從網頁抓取資料或內容，可以整合 Firecrawl。在 Cursor 中讓 AI 幫你寫好抓取代碼，然後告訴 AI：「幫我把 Firecrawl 抓取的內容整合到這個組件中，並添加適當的 loading 和錯誤處理。」

進階技巧

1. 迭代優化

Stitch 生成的第一版代碼可能不是完美的。在 Cursor 中，你可以要求 AI 優化樣式、添加響應式設計、改善可訪問性（a11y）或優化性能。

2. 組件化

將 Stitch 生成的大組件拆分成更小的可重用組件。

3. 狀態管理

要求 Cursor 幫你整合 Redux 或 Zustand 來管理複雜的用戶狀態。

🚀 最新功能：一鍵匯出至 AI Studio + Gemini 3

如果你覺得 Stitch + Cursor 的組合已經很強大了，那麼這個新功能會讓你更加興奮。

天時地利人和的完美結合

昨天：AI Studio 獲得 Gemini 3 版本。
今天：Stitch 獲得一鍵匯出至 AI Studio 的功能。
結果：這是天時地利人和的完美結合。

為什麼這個功能如此重要？

這是 Stitch 用戶呼聲最高的功能。以前，你需要手動複製代碼、截圖，然後重新上傳到 AI Studio 並重新描述需求，過程繁瑣且容易丟失上下文。

新功能的優勢

現在，只需要點擊 Stitch 的「匯出至 AI Studio」按鈕，Stitch 會自動開啟 AI Studio，並將你的 HTML 程式碼和螢幕截圖作為完整上下文自動附加，讓你立即使用 Gemini 3 進行進一步開發。


實際使用場景

想像這個工作流程：

草圖 → Stitch 生成 UI → 一鍵匯出至 AI Studio → Gemini 3 增強 → 完整 App

因為 AI Studio 已經有了完整的上下文（代碼 + 截圖），Gemini 3 能夠更準確地理解你的設計意圖，提供更精確的建議，並生成更符合你需求的代碼。從原本的

留言

張貼留言

這個網誌中的熱門文章

【重磅】諾貝爾獎得主 David Baker 再出招！RFdiffusion3 全原子蛋白質設計模型問世，成本狂降 90%

-
圖片
【重磅】諾貝爾獎得主 David Baker 再出招！RFdiffusion3 全原子蛋白質設計模型問世，成本狂降 90% AI 生物科技 蛋白質設計 前沿科技 如果你以為 2024 年已經是 AI 改變生物學的巔峰，那麼 2025 年的發展可能會讓你大吃一驚。就在近期，剛獲得諾貝爾獎殊榮的蛋白質設計先驅 David Baker 及其團隊，再次向科學界投下了一枚震撼彈——全新一代的蛋白質設計模型 RFdiffusion3 (RFD3) 正式發布！ 這不僅僅是一次例行的版本更新，而是一場徹底的「全原子（All-Atom）」革命。根據最新的技術報告與新聞披露，RFdiffusion3 不僅能夠精確到每一個原子來設計蛋白質，更令人瞠目結舌的是，它的 計算成本降低了 90% ，推理速度卻比前代快了 10 倍以上 。這意味著，過去只有大型藥廠或頂尖實驗室才能負擔的精準藥物設計，現在可能即將普及到更多研究機構，甚至開啟「全民蛋白質設計」的時代。 今天，我們就來深入剖析這項技術突破，解讀 Kiin Bio 與相關科技新聞背後的細節，並探討這對人類未來意味著什麼。 為什麼「全原子（All-Atom）」設計這麼重要？ 在深入了解 RFdiffusion3 之前，我們得先搞懂一個概念： 蛋白質設計的解析度 。 早期的蛋白質設計工具（如第一代的 RFdiffusion 或 BindCraft），其運作邏輯大多是基於「氨基酸殘基（Residue）」或是「骨架（Backbone）」來進行的。如果把設計蛋白質想像成蓋房子，過去的 AI 工具就像是在畫建築結構圖，它能告訴你柱子在哪裡、橫樑在哪裡（骨架），但對於牆壁上的磁磚花紋、門把的形狀（側鏈原子）往往處理得不夠精細，需要後續再用其他軟體去「修補」或「猜測」。 然而，在真實的生物世界裡，藥物分子與蛋白質的結合，往往取決於極其微小的細節——比如一個氫鍵（Hydrogen Bond）的形成，或者幾個原子之間的凡德瓦力。如果你無法精確控制每一個原子，設計出來的藥物可能就無法與目標結合，或者效率極低。 RFdiffusion3 的出現，正是為了解決這個問題。 它是首個真正意義上的「全原子擴散模型」。它不再只是先生成骨架再填補細節，而是...
閱讀完整內容

Google Antigravity 全新開發環境震撼登場

-
圖片
前往 https://antigravity.google/ ，你會發現 Google 正在重新定義我們對 IDE 的認知。隨著 Gemini 3 模型的發布，Google 推出了名為 Google Antigravity 的全新開發環境。這不僅僅是一個加入了 AI 聊天視窗的程式碼編輯器，它是一個「代理人優先」(Agent-first) 的開發平台。在這裡，工程師的角色不再只是逐行輸入程式碼的打字員，更像是運籌帷幄的「指揮官」，指派 AI Agent 自主規劃、執行並驗證複雜的開發任務。 產品核心特色：透明、協作與記憶 Google Antigravity 與傳統 IDE 最大的不同，在於它賦予了 AI 更高的自主權，同時保持了人類的可控性。以下是它的幾大核心亮點： 真正的 Agentic Workflow (代理人工作流) 在 Antigravity 中，你可以直接給出一個高層次的指令（例如：「幫我建立一個具有登入功能的個人部落格首頁」）。AI 不會只吐出一堆程式碼給你複製貼上，而是會像一個真實的員工一樣，列出「任務清單」、規劃實作步驟，並開始在背景執行。你可以看到它開啟檔案、編輯代碼、甚至執行終端機指令的過程。 透明化與可驗證性 (不再是黑盒子) 以往使用 AI 寫程式，最怕不知道它改了哪裡導致專案壞掉。Antigravity 強調「證據」與「報告」。AI 在執行任務時，會提交測試截圖、執行 log 和修改摘要。這建立了人類與 AI 間的信任——你不需要盲目相信它，而是審核它的工作成果。 強大的「專案記憶」 它具有長期記憶能力。當你在專案中修正了 AI 的錯誤，或者教導了它特定的 coding style，Antigravity 會將這些經驗存入「記憶庫」。下次遇到類似問題或新任務時，它會自動調用這些最佳實踐，變得越來越懂你的習慣，宛如一位資深工程師在帶領團隊。 指揮官模式 (Commander Mode) 你可以同時指派多個 AI Agent 進行不同的任務。例如，Agent A 正在重構後端 API，而 Agent B 正在修正前端的 CSS 樣式。你作為「指揮官」，只需在儀表板上監控各個 Agent 的進度，並在它們卡關（例如完成度...
閱讀完整內容

透過AI自動化打造月入數萬美元的「助眠影片」事業：完整步驟教學

-
您是否曾想過，僅憑一己之力，利用免費AI工具就能開創月入數萬美元的事業？答案是肯定的，而且這個機會就在眼前——「AI助眠影片」事業。這項創新模式正迅速席捲YouTube，創作者們透過生成數小時長的利基內容影片，並搭配舒緩的AI語音旁白，吸引數百萬觀看次數，成為人們睡前或背景播放的理想選擇。本文將帶您深入了解這個商業模式的瘋狂潛力，並提供一套完整的AI工具工作流程，助您一步步打造屬於自己的高收益頻道。 為什麼「AI助眠影片」是當前最瘋狂的商機？ 這個AI驅動的助眠影片事業模式之所以令人震驚，主要有兩大原因： 快速變現的驚人速度 我們觀察到許多此類頻道在極短時間內就達到YouTube的營利標準（1,000訂閱者與4,000小時觀看時數）。以下是幾個令人印象深刻的案例： 哲學與心理學頻道： 僅上傳影片約8個月，已累積超過800萬次觀看。 科學利基頻道： 在影片發布後不到4個月，短短一個月內就獲得超過380萬次月觀看。 中世紀歷史頻道： 啟動僅8個月，一個月內即衝上1,100萬次月觀看。 這些案例證明，選對利基市場並善用AI工具，能以驚人的速度實現頻道變現。 豐厚收益的巨大潛力 一旦頻道符合營利條件，就能透過YouTube的廣告收益分享計畫賺取收入。YouTube一般每千次觀看收益（RPM）約為3至8美元。然而，助眠影片因其長度通常超過2小時，並可設定中場廣告，其RPM遠高於平均水準。 有創作者分享，其長篇角色扮演遊戲故事影片在3個月內獲得47.2萬次觀看，賺取超過1萬美元，平均RPM高達 21.51美元 。 對於內容超過一小時的影片，若能妥善利用中場廣告，RPM甚至能飆升至 80美元以上 。 以「助眠歷史學家」頻道為例，過去6個月累積超過3,100萬次觀看，若以相似的RPM估算，收益可能已突破 65萬美元 。 這些數據清楚顯示，AI助眠影片不僅能快速變現，更有著令人難以置信的營收潛力。 AI助眠影片工作流程：一步步打造您的頻道 現在，讓我們深入探討如何利用免費AI工具，從零開始製作一部AI助眠影片。 步驟一：精準選擇無競爭的利基主題 選擇一個高需求但低競爭的利基主題是成功的關鍵。我們將利用Google旗下的AI工具Gemini來完成這一步，因為它能直接存取YouTube的數據。 運用 Gemini 探索 YouTu...
閱讀完整內容