screenshot-to-code 使用指南截圖、文字、視頻三大輸入模式實操教程【免費(fèi)下載鏈接】screenshot-to-codeDrop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)項目地址: https://gitcode.com/GitHub_Trending/sc/screenshot-to-codescreenshot-to-code 是一款免費(fèi)的開源 AI 工具核心功能是Drop in a screenshot and convert it to clean code——把一張截圖、一段文字描述或一段屏幕錄屏轉(zhuǎn)換成干凈、可運(yùn)行的代碼HTML/Tailwind、React、Vue、Bootstrap 等。本指南面向新手帶你快速掌握它的截圖、文字、視頻三大輸入模式幾分鐘就能把手繪稿變成真實網(wǎng)頁。一、快速開始如何本地部署 screenshot-to-code準(zhǔn)備工作只有兩樣一個 AI 模型 API KeyOpenAI、Anthropic、Gemini 三選一官方強(qiáng)烈建議 Gemini因為它支持視頻模式并能自動提取截圖中的真實 Logo/圖片資產(chǎn)和Docker。最簡單的方式是用 Docker 一鍵啟動項目根目錄提供 docker-compose.ymlecho OPENAI_API_KEYsk-your-key .env docker-compose up -d --build啟動后打開瀏覽器訪問http://localhost:5173即可使用。如果你想在界面里配置 API Key點擊加載后的齒輪圖標(biāo)Settings即可無需重啟。想跳過部署直接體驗也可以 clone 倉庫后按 backend/README.md 的方式分別啟動 FastAPI 后端與 React 前端。 新手建議Key 配得越多每次生成時會自動挑選更強(qiáng)的模型組合只配一個 Key 也能完整跑通全部三大模式。二、模式一上傳截圖——一張設(shè)計稿變完整代碼這是最核心的功能對應(yīng)界面中的Upload標(biāo)簽頁源碼見 frontend/src/components/unified-input/tabs/UploadTab.tsx。操作步驟拖入或點選截圖/設(shè)計稿圖片最多支持5 張多頁設(shè)計一次傳入AI 會生成帶頁面跳轉(zhuǎn)的完整站點可選在下方文本框補(bǔ)充一句要求例如把配色換成深色主題選擇技術(shù)棧HTML Tailwind、React Tailwind、Vue Tailwind、Bootstrap、Ionic 等點擊生成右側(cè)實時預(yù)覽 代碼視圖同步輸出兩個實用小開關(guān)資產(chǎn)提取Asset ExtractionGemini 會自動識別截圖里的真實 Logo、圖片并直接復(fù)用而不是用占位圖糊弄你附加文字提示給 AI提需求控制配色、布局、組件風(fēng)格適合場景復(fù)刻競品頁面、把 Figma 導(dǎo)出的設(shè)計稿變代碼、把手繪 UI 草圖落地。 另外兩個標(biāo)簽頁同樣好用URL標(biāo)簽UrlTab.tsx可直接輸入網(wǎng)址自動截圖再生成Import標(biāo)簽ImportTab.tsx可粘貼現(xiàn)有 HTML 代碼導(dǎo)入后繼續(xù)迭代。三、模式二文字生成——用一句話描述生成頁面沒有設(shè)計稿沒關(guān)系。界面底部提供Generate from text prompt [BETA]按鈕源碼見 frontend/src/components/generate-from-text/GenerateFromText.tsx展開后輸入一句話即可。操作技巧描述越具體效果越好。推薦格式頁面類型 主要模塊 風(fēng)格例如A SaaS 管理后臺包含圖表、用戶列表和側(cè)邊導(dǎo)航淺色極簡風(fēng)格輸入后按Cmd/Ctrl Enter快速觸發(fā)生成文字模式本質(zhì)上是讓大模型憑空畫頁面所以它對品牌色、具體排版沒有參照適合快速出 Demo 和原型適合場景靈感一閃時快速出原型、給老板/客戶演示概念、生成測試頁面。四、模式三視頻錄屏——把交互演示變成可運(yùn)行原型這是 screenshot-to-code 的殺手級功能錄一段網(wǎng)站操作視頻AI 不僅還原頁面外觀還會讓生成結(jié)果真的能交互源碼見 frontend/src/components/recording/ScreenRecorder.tsx。操作步驟在 Upload 標(biāo)簽頁點擊Record Screen瀏覽器會彈出共享此屏幕選中要展示的網(wǎng)頁標(biāo)簽像做產(chǎn)品演示一樣操作點擊按鈕、切換頁面、展開菜單、滾動列表……把想還原的交互都走一遍點擊Finish Recording結(jié)束錄制視頻會以 base64 編碼提交給后端后端按 backend/prompts/create/video.py 中的提示詞要求模型逐幀理解交互與 UI 狀態(tài)變化并用 JavaScript 實現(xiàn)同樣的行為最終產(chǎn)出可交互原型注意事項視頻模式必須配置 GEMINI_API_KEYGemini 是唯一能理解視頻流的模型演示要干凈利落少停頓、少切屏鏡頭始終聚焦在應(yīng)用界面上視頻里的后端數(shù)據(jù) AI 會用 mock 數(shù)據(jù)模擬無需擔(dān)心接口問題適合場景把競品/靈感站點的交互邏輯快速復(fù)刻成自己的可交互原型做技術(shù)可行性驗證。五、三大輸入模式對比該用哪個模式輸入優(yōu)點適合人群截圖1~5 張圖片最準(zhǔn)外觀 1:1 還原設(shè)計師/復(fù)刻競品文字一句話描述最快無需素材快速出 Demo視頻一段屏幕錄屏唯一能還原交互行為原型/可行性驗證六、常見問題FAQQ1生成的代碼質(zhì)量如何官方默認(rèn)使用 Gemini 3 Flash/Pro、GPT-5.x、Claude Opus 4.x 等多模型并行為每個變體生成代碼多 Key 配置下會自動挑選更強(qiáng)組合。Q2為什么設(shè)置里提示截圖預(yù)覽不可用截圖預(yù)覽Screenshot Preview依賴 Chromium本地運(yùn)行需執(zhí)行poetry run playwright install chromiumDocker 鏡像已內(nèi)置。缺失也不影響主功能只是 AI 無法自測渲染效果。Q3如何微調(diào)已生成的頁面生成后支持選擇并編輯在預(yù)覽中點選元素用自然語言下達(dá)修改指令也可上傳新的局部截圖繼續(xù)迭代歷史版本會保留在 frontend/src/components/history/HistoryDisplay.tsx 中可回溯。結(jié)語screenshot-to-code 用截圖、文字、視頻三種輸入打通了從靈感到代碼的最短路徑設(shè)計稿用截圖模式、一句話點子用文字模式、需要交互的原型用視頻模式。把它 clone 到本地git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code配好一個 Gemini Key今天就能把第一張截圖變成可運(yùn)行的代碼。【免費(fèi)下載鏈接】screenshot-to-codeDrop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)項目地址: https://gitcode.com/GitHub_Trending/sc/screenshot-to-code創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考