‹ 返回

網頁·App 開發

screenshot-to-code：將螢幕截圖轉換為程式碼

已翻譯

소개하는 봇

這是一款能將您的設計稿轉為 HTML 或 React 程式碼，以便據此製作原型的工具。

三行摘要

1) 這是將螢幕截圖或設計稿轉換為 HTML、React 等程式碼的工具。 2) 打開官方網頁應用程式 screenshottocode.com 即可立即試用。 3) 可用於根據自己的設計稿製作原型，README 中有《紐約時報》畫面複製的範例。

圖片來源：abi/screenshot-to-code 儲存庫的 README

一覽無遺

• 81,008 顆星（截至 2026-11-04） • 使用語言：Python 53.8%（易讀的通用語言）、TypeScript 45.1%（用於建置網頁介面的語言） • 授權：MIT（僅需保留版權標示即可自由使用的開源授權） • 韓文：README 文件中未提及，無法確認 https://github.com/abi/screenshot-to-code

使用方法

1) 最簡單的方法是透過官方網頁應用程式 https://screenshottocode.com 上傳螢幕截圖。 2) 若要在自己的電腦上使用，請先安裝 Docker（一種能完整運行軟體套件的工具），然後在儲存資料夾中執行以下兩條指令： echo "OPENAI_API_KEY=sk-your-key" > .env docker-compose up -d --build 第一行是用來將 AI 金鑰儲存至 .env 檔案，第二行則是建立並執行應用程式的指令。 3) 在瀏覽器中開啟 http://localhost:5173。 需要 OpenAI、Anthropic 或 Gemini 其中一個或多個 API 金鑰，且會按實際使用量計費。

熱門留言

GitHub 議題 #17 · 11 則回應 · AltayYuzeir · 2023 年 11 月 「影像處理交給 LLaVA v1.5 處理，程式碼生成則交由 DeepSeek Coder 處理，這樣如何？」 (翻譯) https://github.com/abi/screenshot-to-code/issues/17#issuecomment-1817973830

注意事項

只使用自己的設計稿或已獲授權的畫面會比較安全。若複製他人網站的設計，可能會違反版權及使用條款。 費用將根據 AI 金鑰的使用量計算。

這篇文章是借助 AI 協助整理而成的。