截圖轉程式碼工具 Screenshot to Code，自架與雲端先分清楚

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

丟一張網頁或 App 的截圖進去，拿到一份可以直接打開執行的前端程式碼，這就是 Screenshot to Code 在做的事。它也吃螢幕錄影和純文字描述：錄一段網站操作過程，它能還原出帶互動的原型；只用文字描述想要的版面，它也能直接生成。輸出端支援 HTML、Tailwind、React、Vue、Bootstrap、Ionic 六種前端技術組合。從官方示範介面看，單次上限是五張截圖或一段影片，每個檔案 20MB、影片 30 秒。2023 年 11 月上線時它靠「畫面變程式」的演示在開發者圈一夜爆紅，到 2026 年 10 月，GitHub 上的星星數已經累積到將近 8 萬（79,930 顆，9,766 個分支）。

不過這個工具實際上是兩個產品共用一個名字。GitHub 上以 MIT 授權開源的，是給你自己架、自己接 AI 模型的那一半；官方網站 screenshottocode.com 提供的雲端服務，則是接了另一套閉源後端的訂閱制產品，沒有免費層，點開就是註冊頁。兩條路的成本結構、資料流向、能用到的功能都不一樣，先分清楚再選，才不會誤把「開源」當成「官方服務免費可用」。

一張截圖配四個模型，模型清單是評測出來的

Screenshot to Code 最特別的地方，不是把截圖丟給某一個模型，而是一次生成其實是四個模型並行、各出一版讓你對照挑選。三把模型金鑰（OpenAI、Anthropic、Gemini）都設好的時候，預設上場的是 Claude Opus 5、Gemini 3 Flash、Gemini 3.1 Pro 與 GPT-5.6 Sol 的組合。只有一把金鑰也能玩，程式會自動改用該家模型的不同等級湊出兩到四個版本，只是少跨廠對照的樂趣。

這份名單會定期換血。程式碼裡的模型清單檔案留著 2026 年 7 月 27 日的更新紀錄：作者用自己的評測集替每個模型評分，GPT-5.6 Sol 拿最高均分 8.2，Claude Opus 5 拿 7.8，Gemini 3.1 Pro 拿 7.2，Gemini 3 Flash 則因為整套測資零失敗而佔住快速位置。評測方法也留在 repo 裡：一組固定的截圖基準集、一組文字描述題庫、一套 1 到 4 分的評分介面，每個模型與提示詞組合跑三輪取平均。換句話說，這個專案把「用哪個模型」當成一件要持續做實驗的事，而不是寫死一個答案。各家模型競爭越快，它的預設組合就越常翻新，想自己顧好模型選擇與成本的讀者，可以參考站上的AI 模型比較表抓個量級感。

有個細節值得注意：GitHub README 上寫的預設模型還停留在 GPT-5.5 與 Claude Opus 4.6、4.8 這一代，程式碼裡實際跑的已經是 Opus 5 與 GPT-5.6 Sol。文件落後程式碼一個世代，要確認現況以 repo 為準。另外兩個模式有各自的脾氣：錄影轉原型固定走 Gemini 系列不吃其他家，單次也是出兩版對比。

生成過程也走向代理式（agentic）：模型在生成時最多可以呼叫九種工具，包括建立檔案、改檔案、抽換截圖裡的真實圖片素材、去背、生圖，甚至把自己剛寫出來的頁面渲染成截圖再檢查一次。這個自動截圖檢查需要裝 Chromium，沒裝的話功能會自動停用，其他流程照走。等於每個模型交卷前，有機會先自己批改一遍。

Pin

開源的是自架那一半，官方雲端是另一套產品

repo 裡的專案說明檔有一句關鍵自述：雲端版本走另一條 hosted 分支，連接到一個獨立的 SaaS 後端，那是另外一份程式碼，不在這個開源庫裡。也就是說，你付費使用的官方雲端，與你 clone 下來自己架的引擎，後端並不是同一套東西。這在商業上很常見（開源核心養社群、閉源服務賺訂閱，Sindre Sorhus 的 App 生態是另一個「名字開源、產品兩半」的案例），但對使用者的意義是：開源授權保護的是自架那一半，雲端的體驗與功能由公司說了算。

時間軸可以看出這個產品的商業化速度。repo 建立於 2023 年 11 月 14 日，首頁至今還嵌著 2023 年 11 月底到 12 月初那波病毒式轉發的推文當社交證明；官方雲端服務的網域在 11 月 29 日就出現了歷史快照，距離開源只隔十五天。爆紅兩週內就把雲端服務架起來，這是標準的開源走紅變現劇本。

專案本身是單人主導。作者 Abi Raja 一個人佔了 1,274 次提交，第二名貢獻者是一個名為 claude 的帳號，貢獻 41 次。開發流程大量依賴 AI 協作這件事，在分支清單上一目了然：數十條進行中的分支，多半掛在作者與 AI 帳號名下。

還有一個小但誠實的細節：官方網站首頁的星星徽章顯示 72,929 顆，落後 GitHub 實際數字約七千顆。行銷頁與 repo 各自為政，這類數字看看就好，不必當即時資訊。

自架路線：程式碼免費，模型的帳單自己付

自架的第一道門檻是 API 金鑰。三選一即可啟用：OpenAI、Anthropic 或 Gemini 的金鑰，填一把就能跑，而且金鑰可以直接在網頁介面的設定視窗填，不必改環境變數檔。但官方強烈建議補齊 Gemini 與 Replicate：Gemini 負責從截圖裡抽取出真實的圖片素材，logo 與照片直接沿用原圖，而不是讓模型憑空重畫；影片模式也必須靠它。Replicate 負責圖片生成、去背與圖片編輯，缺了這把金鑰，這幾個工具就不可用。這種「工具開源、引擎自帶鑰匙」的結構，與站上介紹過的開源 Logo 產生器是同一個路數：免費的是軟體本身，模型用量另計。

成本可控但並非免費。程式碼裡寫死了一個單一版本的花費上限：3 美元，超過就中止那個版本的生成。這個數字本身就是最有用的成本錨點：一次生成是四個版本並行、每個版本又可能反覆疊代多輪，整輪成本是以美元計的量級，而非幾分錢。repo 內建了一份對照官方定價頁的價目表，例如 GPT-5.6 Sol 每百萬 token 輸入 5 美元、輸出 30 美元；Claude Opus 5 輸出 25 美元；Gemini 3 Flash 最便宜，輸出 3 美元。拿它大量轉換頁面之前，先想一下自己的模型帳單。

安裝本身不難，但要有開發環境：後端是 Python（FastAPI，用 Poetry 管理），前端是 Node（pnpm），照 README 用 Docker 一鍵起也可以。想省 API 費走 Ollama 的本機開源模型？官方文件自己也寫了但書：因為效果差，不建議。

台灣的使用環境沒有額外障礙。README 提到無法直連 OpenAI 時可以設定代理位址，那段是寫給有防火牆的環境看的，台灣直連即可。介面與文件全是英文，這點先有心理準備。

雲端路線：月費 15 美元起，credit 用不完就消失

官方雲端沒有免費方案，也沒有匿名試用。按 Get Started 會直接跳出註冊視窗，用 GitHub、Google 或電子郵件建立帳號後才能進到工具。

計價用 credit 制：Hobby 方案每月 15 美元給 100 個 credit，Pro 方案每月 40 美元給 500 個，付費頁上有年繳半價的切換選項。付款走 Stripe，支援信用卡、支付寶、Amazon Pay 與 Cash App Pay。關鍵規則在 FAQ 裡寫得明白：不管從截圖生成還是文字描述生成，一次吃一個 credit，之後的每一次編輯疊代，也各吃一個。想用「生成一次、修十次」的方式打磨頁面，credit 消耗就是十一個。拿 100 個 credit 換算，雲端路線每次生成加編輯的平均單價約 0.15 美元，和自架路線「單次以美元計、上限 3 美元」相比，等於是把模型成本與便利性打包成一個固定月費，量小的人吃這個價不虧，量大的自然會想自架。

Pin

credit 每月一號重置，用不完不保留，而且條款與 FAQ 都寫明：不退款。

條款裡還有幾件事值得在上傳前知道。版權責任在你：服務不檢查你有沒有權利上傳那張設計稿，條款直接要求你保證自己擁有必要授權。原創性也不保證，條款明說產出可能與其他使用者的生成結果相似。經營主體 WhimsyWorks, Inc. 的聯絡地址在紐約，客服走電子郵件。

把公司設計稿丟上去之前，先看造訪層掛了什麼

官方網站的行銷頁熱鬧歸熱鬧，實際打開官網數一數網路請求就知道它掛了不少追蹤器：TikTok 的廣告像素光在首頁就發了 7 個，連定價頁一起逛完共 13 個，Google 的再行銷與 Bing 的轉換追蹤也在場，另外有 Sentry 錯誤追蹤與 Plausible 統計。一邊掛著隱私友善的 Plausible、一邊讓 TikTok 像素跑好跑滿，這種組合本身就是訊號：一個開發者工具掛 TikTok 廣告像素、付費頁支援支付寶，行銷投放瞄準哪些市場，已經很清楚。

隱私政策倒是更新得很勤，最近一次修訂在 2026 年 9 月 29 日。政策寫明：你上傳的截圖、提示詞與生成的程式碼都會進到服務，並分享給協助運作的 AI 模型供應商（OpenAI、Anthropic、Google）；用 Google 登入時拿到的姓名與信箱，承諾不用於訓練 AI 模型，也不拿去投放廣告。

對個人練習專案來說，這些邊界大概夠用。但如果你手上是公司未公開的設計稿或內部系統截圖，「會送到第三方模型供應商」這一條就值得停下來想。這正好是自架路線的價值所在：金鑰在自己手裡、內容只往自己選的那家模型 API 送，資料邊界自己畫。

按金鑰與生成量切路線，兩種人各走一邊

適合的場景很明確：前端工程師想幫舊專案或設計稿快速起一個可動的骨架、設計師想驗證自己的版面想法、非工程背景的人想做互動原型。它給的是四個版本挑一個的起點，生成的程式碼仍要人工清理與檢查才能上線，這一點官方條款自己也承認：不保證正確、不保證安全。如果你要的是把整個既有網站搬下來重製，站上先前介紹過的網站克隆工具是更對口的品類；Screenshot to Code 的強項在於從「一張畫面」長出可編輯的程式碼，整站搬運另有工具。

路線選擇可以這樣切：已經有任一家模型的 API 金鑰、且會用 Docker 或 Node 加 Python 環境，走自架，免軟體費、按用量付模型帳單；不想碰環境設定、量不大（每月生成加編輯在一百次上下），雲端 Hobby 方案是合理價格；公司機密素材，優先自架。

第一步很簡單：先開 GitHub 上的 abi/screenshot-to-code 儲存庫讀 README，看著自己的金鑰清單決定要不要補 Gemini 與 Replicate；只想先看看成品長什麼樣，官方首頁的示範影片與範例對照就夠了。順帶一提，首頁那句「快十倍」是行銷標語，把它當廣告詞看就好，實際速度與品質，以你自己那一輪的生成結果為準。

授權與專案狀態

Screenshot to Code 的儲存庫以 MIT 授權釋出，商用與修改都允許。專案狀態方面，主分支最後一次提交停在 2026 年 7 月 30 日，其後的活動都還在作者的工作分支上進行，issue 與合併請求至 9 月下旬仍有往來，屬於「主幹暫停、開發未死」的狀態。它從未發過帶版本號的正式 Release，自架沒有穩定版可鎖，跟著主分支走就要接受偶爾的變動。單人主導加 AI 協作的開發模式很有效率，但也意味著關鍵決策集中在一位作者身上，長期依賴的話，把這個風險算進去。