screenshot-to-code 是 Abi Raja 開源的「截圖轉程式碼」工具：丟一張網站截圖、Figma 稿或一段 30 秒內的螢幕錄影，它叫 LLM 產出 HTML + Tailwind、React、Vue 等前端程式碼。2026-10-12 我查的時候是 80,255 顆星、MIT 授權，三天前還有新 commit。
我是在 IG 滑到 傅子杰（@jarrenpoh）的介紹影片，他 9 月 16 日發的時候，標題寫它有 7.4 萬顆星、能直接復刻網站，要留言「給我」才傳連結。連結在這：github.com/abi/screenshot-to-code。
影片講的是「它能做什麼」。這篇補另一半：我把它 clone 到自己的 Mac 上，前後端都跑起來，再把原始碼讀過一輪，整理出自架之前該知道的事。
懶人包
- 它是什麼：React/Vite 前端 + FastAPI 後端，本身不含模型，靠你自己的 OpenAI、Anthropic 或 Gemini API key 生成程式碼。
- 最快試用：官方託管版 screenshottocode.com。要客製或資料不想經過第三方，才需要自架。
- 自架門檻：至少一把模型 API key。沒有 key 也跑得起來，但按下 Generate 會直接失敗，而且畫面上的錯誤訊息不會告訴你原因。
- 成本要先算：一次 Create 會同時跑 4 個 variant，等於同一張截圖打 4 次模型。
- 影片模式只認 Gemini，貼網址自動截圖要另外申請 ScreenshotOne key。
screenshot-to-code 能做什麼？
README 列的輸入方式有四種，我在本機介面上看到的分頁也一致：
| 分頁 | 輸入 | 備註 |
|---|---|---|
| Upload | 最多 5 張截圖，或 1 段影片 | PNG／JPG／MP4／MOV／WebM，單檔 20MB、影片 30 秒內 |
| URL | 網址 | 後端呼叫 ScreenshotOne 截圖，需要它的 API key |
| Text | 文字描述 | 沒有截圖、直接用描述生頁面 |
| Import | 既有程式碼 | 匯入後再請它改 |
生成之後還能繼續用對話改（介面上叫 Update），或用「Select & edit」點選畫面上的元素指定要改哪一塊。
它不是「一次 prompt」，而是一個會自己檢查的 agent
讀 backend/agent/tools/definitions.py，後端給模型的工具有這些：
| 工具 | 用途 |
|---|---|
create_file / edit_file | 寫出、修改生成的頁面 |
extract_assets | 從原始截圖裁出真的 logo 和圖片重用（要 Gemini） |
generate_images / edit_images / remove_backgrounds | 生圖、改圖、去背（要 Replicate） |
screenshot_preview | 用 headless Chromium 把自己生的頁面截圖回來，對照原圖修版面 |
retrieve_option | 取用其他 variant 的程式碼 |
screenshot_preview 是我覺得最實用的一個：模型生完頁面後，會在無頭瀏覽器裡看一次自己的成果再修。後端啟動時 log 會告訴你這個工具有沒有開：
Backend startup complete. Debug mode is DISABLED.
[screenshot_preview] Chromium available — tool enabled.前提是你有跑過 playwright install chromium。沒裝的話它會自動跳過這個工具，不會報錯，只是少了自我檢查這一步。
自架要準備什麼？
README 的最低條件是至少一把模型 key：
| Key | 必要性 | 解鎖什麼 |
|---|---|---|
OPENAI_API_KEY | 三擇一 | GPT 系列 variant |
ANTHROPIC_API_KEY | 三擇一 | Claude 系列 variant |
GEMINI_API_KEY | 三擇一，官方強烈建議 | Gemini variant、從截圖抽真實素材、影片模式必備 |
REPLICATE_API_KEY | 強烈建議 | 生圖、改圖、去背；只能寫在 backend/.env |
.env，直接在前端 Settings 填。介面上寫「Only stored in your browser」，會覆蓋 .env 的設定。
OpenAI Base URL 那一欄可以換成相容 OpenAI API 的代理或自架端點。README 也提到可以接 Ollama 的開源模型，但作者自己標註品質差、不推薦。
實際安裝步驟
我的環境：macOS、Node.js v24.18.0、pnpm 10.32.1、Poetry 跑在 Python 3.11.2（pyproject.toml 要求 ^3.10）。clone 的是 2026-10-09 的 a813977 這個 commit。
後端：
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code/backend
echo "ANTHROPIC_API_KEY=your-key" > .env # 至少放一把
poetry install
poetry run playwright install chromium # screenshot_preview 工具要用
poetry run uvicorn main:app --port 7001前端另開一個終端機：
cd screenshot-to-code/frontend
pnpm install
pnpm dev我機器上 poetry install 跑了 6 分 03 秒，pnpm install 只要 8 秒。後端有 moviepy、numpy、playwright 這些依賴，第一次裝慢是正常的。
驗證後端有起來：
curl http://localhost:7001/<h3>Your backend is running correctly. Please open the front-end URL (default is http://localhost:5173) to use screenshot-to-code.</h3>然後開 http://localhost:5173。專案自己的 CLAUDE.md 有特別註明：Vite 只綁 localhost，用 127.0.0.1:5173 會連不上。
不想裝 Python 環境的話，根目錄有 docker-compose.yml：
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --buildREADME 說這條路適合純使用，改了程式碼不會自動重建。
沒有 API key 會怎樣？
我手邊這台機器沒有放模型 key，所以順便測了「沒 key」的行為。上傳一張首頁截圖，Stack 選 HTML + Tailwind：
按下 Generate Code 之後，四個 Option 全部紅燈：
畫面上只寫「Error generating code. Check the Developer Console AND the backend logs」。真正的原因在後端 log：
No OpenAI, Anthropic, or Gemini API key found. Please add the environment variable OPENAI_API_KEY, ANTHROPIC_API_KEY, or GEMINI_API_KEY to backend/.env or in the settings dialog. If you add it to .env, make sure to restart the backend server.
[GENERATE_CODE] Unexpected error: No API key自架遇到生成失敗，第一步看跑 uvicorn 的那個終端機，不要盯著前端猜。改了 .env 記得重啟後端，這點 log 自己也提醒了。
這次沒有 key，所以「生出來的頁面像不像」我沒有實測。這篇談的是安裝、架構與成本結構，品質請以 README 的範例和你自己的試用為準。
一次 Create 會打幾次模型？
這是自架前我最想先搞清楚的一件事。backend/config.py 開頭兩行：
NUM_VARIANTS = 4
NUM_VARIANTS_VIDEO = 2routes/generate_code.py 裡的規則是：Create 跑 NUM_VARIANTS（4 個），Update 固定 2 個，影片模式 2 個。四個 variant 是同時跑的，所以介面上才會出現 Option 1 到 Option 4 讓你挑。
每個 variant 用哪個模型，看你有哪幾把 key。routes/model_choice_sets.py 寫死了組合，摘幾種：
| 你有的 key | 圖片 Create 的模型組合 |
|---|---|
| 三把都有 | Claude Opus 5.5（medium）、Gemini 3 Flash（high）、Claude Opus 5.5（xhigh）、GPT-6.1 Sol（high） |
| 只有 Anthropic | Claude Opus 4.8（medium）、Claude Sonnet 4.6，輪流湊滿 4 個 |
| 只有 OpenAI | GPT-5.5（high）、GPT-5.5（low），輪流湊滿 4 個 |
| 只有 Gemini | Gemini 3 Flash 與 3.1 Pro 的 minimal／low／high 組合 |
| 影片模式 | 一律 Gemini 3 Flash（minimal）+ Gemini 3.1 Pro（high） |
models[i % len(models)] 循環補滿。只有 Anthropic key 的話，同一張截圖會被 Opus 4.8 和 Sonnet 4.6 各跑兩次。
換算成帳單：你按一次 Generate，模型端是 4 次帶圖的生成請求，加上 agent 自己截圖檢查的來回。repo 裡 backend/costs/pricing.py 有各模型的單價表，作者也在註解記錄了評測結果，例如文字模式的 Gemini 3 Flash minimal「48s median，$0.05/brief」。圖片模式每次實際花多少，我沒有 key 沒辦法量，建議先在供應商後台設預算上限再開始玩。
README 和程式碼有落差
README 開頭的「Default AI models」寫的是 Claude Opus 4.6、Opus 4.8、GPT-5.5 這一批。但 2026-10-09 的兩個 commit 已經把預設組合換成 Opus 5.5 和 GPT-6.1 Sol：
2026-10-09 Use GPT-6.1 Sol low for the edit variant
2026-10-09 Switch image-create defaults to Opus 5.5 and GPT-6.1 Sol這個 repo 更新很勤，模型組合幾週就調一次。要知道現在實際用哪些模型，看 backend/routes/model_choice_sets.py，README 會晚一步。
影片模式與網址模式的額外條件
IG 影片裡提到它推出了 Video to Code：錄一段網站操作的螢幕影片，它就能做出會動的原型。程式碼裡這條路寫得很硬：
if input_mode == "video":
if not gemini_api_key:
raise Exception(
"Video mode requires a Gemini API key. "
"Please add GEMINI_API_KEY to backend/.env or in the settings dialog"
)所以影片模式只有 Gemini key 能用，OpenAI 和 Anthropic 的 key 再多都沒用。
URL 分頁也不是後端自己去開瀏覽器截圖，而是呼叫 api.screenshotone.com。Settings 頁寫的是要填 ScreenshotOne 的 API key，免費額度每月 100 張。沒有這把 key 就自己截圖再上傳。
什麼時候不該用它？
- 拿去複製別人的網站上線：工具做得到，不代表該這樣用。我會把它用在自己的設計稿、Figma mockup、內部系統改版的參考畫面，別人的品牌與設計就留在參考的位置。
- 期待生出能直接接後端的專案：它輸出的是單一前端頁面（HTML 或元件），資料串接、路由、狀態管理還是要自己來。
- 不想讓截圖離開公司：自架只代表前後端在你機器上，截圖仍然會送到你設定的模型供應商。內網機密畫面要先確認公司對外部 API 的規範。
我的建議
只想看看效果：直接用 screenshottocode.com，不用裝任何東西。
想自架：先準備一把 Gemini key（影片模式和抽素材都靠它），在供應商後台設好月預算，再照上面的步驟裝。第一次生成失敗就看後端 log。
想挑模型或控成本：直接改 config.py 的 NUM_VARIANTS 和 model_choice_sets.py，這兩個檔案就是它的成本開關。