Screenshot to Code：使用 AI 將截圖轉換為乾淨的 UI 程式碼

每個開發者都經歷過將設計稿轉換為程式碼的挫折。像素在 Figma 中看起來正確，但將視覺版面轉換為響應式 HTML、在斷點之間保持設計一致性，以及確保適當的間距和對齊，可能需要耗費數小時的繁瑣工作。Screenshot to Code 由開發者 Abe（abi）創建，以一個看似簡單的前提解決了這個問題：如果你可以直接向 AI 展示設計，然後拿回可運作的程式碼呢？

擁有超過 72,000 個 GitHub 星標和龐大的使用者社群，Screenshot to Code 已成為「設計轉程式碼」領域中最受歡迎的開源工具。工作流程如其聽起來一樣簡單：上傳截圖、設計稿或 UI 照片，選擇目標輸出框架，然後 AI 生成對應的前端程式碼。

該工具利用了前沿 AI 模型的視覺能力——GPT-4o、Claude、Gemini——這些模型可以分析圖片的視覺結構並推斷底層的版面、排版、色彩方案、間距和互動元素。隨著每一代視覺模型的發展，輸出品質已大幅提升，該工具也已演進到支援多種輸出框架和樣式方法。

Screenshot to Code 如何將圖片轉換為程式碼？

轉換過程涉及從圖片前處理到程式碼合成的多個階段。

流程圖 TD
    A[輸入圖片\n截圖 / 設計稿 / 照片] --> B[圖片前處理\n縮放與最佳化]
    B --> C[視覺 LLM 分析\n版面與元素偵測]
    C --> D{目標框架\n選擇}

    D -->|HTML/CSS| E[HTML 生成器\n語意標籤 + CSS]
    D -->|React + Tailwind| F[React 生成器\nJSX + Tailwind 類別]
    D -->|Vue + Tailwind| G[Vue 生成器\nSFC + Tailwind 類別]
    D -->|Bootstrap| H[Bootstrap 生成器\nBS 類別 + HTML]

    E --> I[程式碼輸出\n+ 預覽面板]
    F --> I
    G --> I
    H --> I

    I --> J[迭代\n優化提示或模型]

視覺 LLM 首先分析輸入圖片，識別不同的 UI 元素——按鈕、文字區塊、圖片、輸入欄位、導航欄——及其空間關係。然後它使用選定的框架和樣式方法生成重現視覺版面的程式碼，包括適當的元素巢狀、響應式行為和互動狀態。

支援哪些 AI 模型和輸出格式？

該工具的靈活性來自於其對多種 AI 後端和輸出配置的支援。

AI 模型的選擇會顯著影響輸出品質。對於大多數使用場景，GPT-4o 和 Claude 3.5 Sonnet 是推薦選項，提供最佳的精確度、速度和成本平衡。對於簡單的版面，Gemini Pro Vision 提供了一個經濟實惠的替代方案。

有哪些可用的輸出框架和樣式方法？

該工具以幾種流行的前端框架生成生產級品質的程式碼。

React + Tailwind 輸出是最受歡迎的組合，因為它產生乾淨、模組化的元件，可自然整合到現代網頁開發工作流程中。該工具生成功能完整的 React 元件，具有適當的 Tailwind 類別組合，用於版面、間距、排版和響應式行為。

技術棧如何支撐該應用程式？

Screenshot to Code 本身使用現代開發技術構建。

程式碼預覽元件尤其設計精良。它使用 Sandpack（來自 CodeSandbox）在應用程式內部提供生成程式碼的即時互動預覽，讓使用者可以即時查看截圖轉程式碼的結果。

常見問題

什麼是 Screenshot to Code？ Screenshot to Code 是一款開源工具，擁有超過 72,000 個 GitHub 星標，使用 AI 視覺模型將截圖、設計稿和設計檔案轉換為乾淨、功能完整的前端程式碼。

Screenshot to Code 支援哪些輸出格式？ 該工具可以生成多種輸出格式的程式碼，包括標準 HTML/CSS、React（JSX 元件）、Vue（單檔案元件）和基於 Bootstrap 的 HTML，以及 Tailwind CSS 變體。

Screenshot to Code 使用哪些 AI 模型？ Screenshot to Code 支援多種 AI 視覺模型，包括 OpenAI GPT-4 Vision、GPT-4o、Anthropic Claude（3.5 Sonnet、3 Opus）和 Google Gemini Pro Vision。

該工具使用什麼技術棧？ 前端使用 React 和 TypeScript 構建，後端使用 Python（FastAPI），圖片處理利用 AI 視覺 API 來理解視覺版面並生成對應的程式碼。

有託管版本可用嗎？ 是的，託管版本可在 screenshottocode.com 使用，提供額外功能，包括無限生成、團隊協作和優先使用新的 AI 模型。

延伸閱讀

• Screenshot to Code GitHub 倉庫 – 原始碼、問題和社群
• Screenshot to Code 託管版本 – 雲端託管版本，附帶高級功能
• OpenAI GPT-4 Vision API – 驅動該工具的視覺模型
• Anthropic Claude API – 替代視覺模型支援