Gemini 3 終於來了，它迅速引爆網路。人們紛紛討論 Gemini 的前端功能。於是，我也決定親自體驗一番。試想一下，如果你提供一張截圖，AI 就能自動編寫程式碼來模擬圖片中的 UI，那該有多棒？這種級別的前端開發需要極高的精準度和耐心。開發者常常要花費數小時才能將靜態設計轉化為響應式程式碼。我希望藉助 Gemini 3 Pro 的 Vibe 編碼功能來加速這一過程。
為此，我構建了一個 AI 代理，用於自動將設計轉換為程式碼。本專案旨在測試 Gemini 3 Pro 的多模態 AI 和 Vibe 編碼功能。我的目標是建立一個只需兩個提示即可完成截圖到程式碼轉換的工具。
我為什麼選擇Gemini 3 Pro
谷歌在 Grok 4.1 釋出僅一天後就推出了 Gemini 3 Pro，兩者都聲稱進行了重大升級。然而，谷歌的模型在推理和技術任務方面領先業界。它在 WebDev Arena 的程式碼準確率排行榜上名列前茅。我選擇它的原因在於它在“感覺編碼”（vibe coding）方面的優勢。這種方法讓開發者能夠專注於應用的“感覺”，而由 AI 處理語法。
Gemini 3 Pro 為這個特定專案提供了顯著優勢：
- 多模態 AI：該模型能夠以開發者級別的洞察力解讀畫素。它比純文字模型更能理解佈局層級、內邊距和元件關係。
- 智慧體功能：它能夠管理多檔案架構。它可以跨不同檔案跟蹤狀態，而不會丟失上下文。
- 上下文視窗：該模型將整個程式碼庫儲存在記憶體中。這可以防止在更新特定元件時出現邏輯錯誤。
我們正在構建什麼？
我需要一個強大的原型工具。目標是將靜態螢幕截圖轉換為可編輯的即時 React 專案。為此，AI 智慧體需要構建以下核心功能：
- 一鍵解析：使用者上傳圖片，系統即可生成結構化程式碼。
- 即時預覽：介面必須並排顯示程式碼和視覺效果。
- 隱私：應用程式必須在瀏覽器中處理資料，不得將影像儲存在伺服器上。
- 匯出：使用者必須能夠將最終專案下載為 ZIP 檔案。
我擔任產品經理。Gemini 3 Pro 擔任高階工程師。
實踐操作：構建智慧體
我分兩步構建了這個複雜的應用程式。我依靠模型來做出架構決策。
首先，訪問 https://aistudio.google.com/apps。
現在，選擇 Gemini 3 Pro 作為您的模型。
第一階段：“上帝提示”
許多開發者編寫簡單的提示。他們要求構建一些獨立的元件，例如導航欄。我採取了不同的方法，向 Gemini 3 Pro 提供了一份完整的產品需求文件 (PRD)。
為此，我詳細描述了截圖轉程式碼工具，並列出了主要使用者，例如設計師和前端工程師。然後，我明確定義了安全需求，並告訴 AI 智慧體：“這是規範。構建整個應用程式。”
別擔心，這也不是我自己寫的。我藉助了 ChatGPT，向它解釋了整個應用程式，然後讓它生成一份簡短的 PRD。
第一個提示：
Screenshot→Code is a rapid prototyping tool that converts a single app screenshot into a live, editable UI and downloadable React+Tailwind project. Users upload a PNG/JPG, the system analyzes the layout and components, generates clean HTML/React code, and renders a faithful preview in a device frame. Users can edit visually (text, images, color, reposition) or edit source code; changes sync immediately to the preview. Final artifacts can be exported as an edited screenshot and a runnable code ZIP for local development.
Core capabilities
- One-click screenshot parsing → structured UI model (components + styles).
- Auto-generated HTML (Tailwind CDN) for instant preview + full React+Tailwind project for download.
- Two editing modes: Visual (WYSIWYG) and Code (live editor). Edits sync both ways.
- Export: edited high-fidelity PNG and downloadable project archive (ZIP).
- Lightweight, privacy-first defaults: work in browser by default; persistent cloud storage optional with explicit consent.
Primary users
- Designers who want to extract UI into code.
- Frontend engineers accelerating component creation.
- Product teams making quick interactive prototypes.
Security & privacy
Uploaded images remain in user session by default; explicit opt-in required for server storage. PII warning and purge controls provided.
結果：
Gemini 3 Pro 生成了完整的檔案結構。它建立了主應用程式邏輯和預覽視窗元件。它選擇了一套現代技術棧，包括 React、Tailwind CSS 和用於圖示的 Lucide React。AI 代理正確實現了在“程式碼”和“視覺化”選項卡之間切換的邏輯。
第二階段：“白屏”事件
我使用以下螢幕截圖測試了我們的應用程式，並將其放在應用程式的“Upload a Screenshot”頁面中。
第一次測試效果不錯，但並不完善。我載入了應用程式並上傳了同一應用程式的螢幕截圖，但視覺化選項卡仍然空白。這是動態應用程式中 iframe 渲染的常見問題。程式碼邏輯沒有問題，但瀏覽器無法執行。
我沒有手動修復此問題。我使用 Gemini 3 Pro 來診斷此錯誤。
第二提示：
Why can’t I see anything on the Visual tab and it is white even after GeneratedComponent.tsx is generated. FIx it
修復方案：
模型立即識別出了缺失的依賴項。iframe 需要特定的資料預設才能解析 TypeScript。
Gemini 3 Pro 更新了 PreviewWindow.tsx 檔案，修復了以下問題：
- 新增了 env、react 和 typescript 的資料預設。
- 改進了程式碼清理邏輯，移除了 export default 語句。
- 新增了全域性錯誤處理程序，用於捕獲父視窗中的指令碼錯誤。
- 實現了回退機制。
此修復方案立即生效。截圖轉程式碼工具渲染 UI 時沒有出現任何錯誤。
最終潤色
應用功能已經可以正常使用，但我想要一些個性化的元素。最初的輸出包含一個通用的“由 Gemini 2.5 Flashi 提供技術支援”徽章。我希望能夠真正表明這是我的作品。
我指示 AI 代理更新“描述更改”文字欄位中的文字。它將徽章更改為顯示“Powered by Harsh Mishra”，並帶有一個黃色閃電圖示。
最終的 UI 介面非常專業。它採用深色主題，對比度很高。上傳區域使用虛線邊框和清晰的字型。漸變效果符合我要求的現代美學風格。這種細節處理充分證明了 Gemini 3 Pro 的動態編碼功能強大。
我的看法：應用開發的未來
構建這個螢幕截圖到程式碼的工具改變了我的視角。通常，如此複雜的專案需要幾天時間才能完成。而我只用了幾分鐘就完成了。Gemini 3 Pro 與其說像一個聊天機器人，不如說更像一個動態編碼的合作伙伴。
動態編碼改變了開發者的角色。我們現在管理的是智慧體，而不是編寫語法。您只需提供願景，多模態 AI 即可執行邏輯。這種轉變使我們能夠專注於使用者體驗和產品價值。
Gemini 3 Pro 證明了 AI 工具能夠處理生產級別的複雜性。它能夠保持上下文資訊，修復隱蔽的錯誤，並交付流暢的使用者介面。
您可以在這裡試用截圖轉程式碼應用：https://ai.studio/apps/drive/1PfOYRLP-QAAepG128DvJIt18Vofbbrx2
小結
我使用 Gemini 3 Pro 僅用了兩個提示就成功構建了一個 React 應用。AI 智慧體負責架構、樣式和除錯。該專案展示了多模態 AI 在實際工作流程中的高效性。像截圖轉程式碼這樣的工具僅僅是個開始。軟體開發的門檻正在降低。Vibe 編碼讓任何擁有清晰想法的人都能構建軟體，而像 Gemini 3 Pro 這樣的 AI 模型則可按需提供技術專長。
程式設計的未來不在於編寫冗長的程式碼，而在於操控智慧體。現在，前往 AI Studio，免費構建您自己的應用程式。
評論留言