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