abi/screenshot-to-code

screenshot‑to‑code

功能 – 擷取 UI 截圖、Figma 設計稿甚至短影片錄製，並藉助大語言模型的幫助，生成可以直接執行的整潔前端程式碼。生成的程式碼可以包含從截圖中提取的原始資產（Logo、圖片）。

支援的前端框架 – HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind。

AI 後端 – 預設情況下，它會嘗試最新的 Google Gemini (3 Flash, 3.1 Pro)、OpenAI GPT-5.5/5.4 Mini、Anthropic Claude Opus 4.6-4.8 以及 Replicate 圖像模型 (z-image-turbo)。你可以混合使用不同的提供商；應用程式會為每個步驟選擇最強大的可用模型。

工作原理

1. 資產提取 – Gemini 分析截圖，提取真實的 Logo 與圖片，並可以透過 Replicate 移除背景。
2. 程式碼生成 – 選定的 LLM 接收佈局與目標技術棧的描述，並回傳相應的標記、CSS/Tailwind 類別與組件程式碼。
3. 選配預覽 – 透過 Playwright 使用無頭 Chromium 實例渲染生成的頁面，以便系統將輸出結果與原始截圖進行比較並標記明顯的差異。
4. 影片模式 – 當你上傳短影片錄製時，後端會提取關鍵影格並建構一個模擬互動流程的原型。

執行方式

• 託管演示 – 訪問 https://screenshottocode.com 進行即時試用。
• 自行託管 – 克隆儲存庫，提供至少一個 API 金鑰（OpenAI、Anthropic 或 Gemini），並啟動 FastAPI 後端 (poetry install && poetry run uvicorn main:app …)。接著啟動 Vite-React 前端 (pnpm install && pnpm dev)。
• Docker – 在放置包含金鑰的 .env 檔案後，執行 docker-compose up --build。

關鍵配置

變數	必要用途	啟用功能
OPENAI_API_KEY	所有情況	GPT-5.5 / 5.4-Mini 程式碼生成
ANTHROPIC_API_KEY	所有情況	Claude 程式碼生成
GEMINI_API_KEY (推薦)	所有情況	Gemini 程式碼生成、資產提取、影片模式
REPLICATE_API_KEY (推薦)	選項	圖像編輯、背景移除、圖像生成

常見問題與疑難排解 – README 中包含指向疑難排解指南與問題追蹤器中常見錯誤修復的連結。如果你位於防火牆後，可以透過 OPENAI_BASE_URL 設定 OpenAI 代理。

範例 – 該儲存庫展示了 NYTimes、Instagram 與 Hacker News 頁面的並排對比，證明了此工具可以重現複雜的新聞文章佈局、社群媒體動態與討論版介面。

適用對象 – 希望從設計稿中快速構建腳手架的前端開發人員、需要為 UI 想法製作原型的產品團隊，以及任何對 AI 輔助程式碼生成感興趣的人。