精華筆記 看到喜歡的網站不用再自己刻：開源神器 screenshot-to-code，丟張截圖就生出程式碼
逛網站的時候，你一定遇過這種時刻：這個版面好漂亮、這個動線好順，如果我的專案也能長這樣就好了。
接下來通常有兩條路。第一條，打開開發者工具一個一個元素去看，慢慢把 HTML 和 CSS 刻出來，刻了兩小時，間距還是怪怪的。第二條，放棄，繼續用自己那個陽春的版面。
其實現在有第三條路：把畫面截下來，丟給 AI，讓它直接幫你產出一份可以改的程式碼。這篇要介紹的 screenshot-to-code，就是專門做這件事的開源專案，到 2026 年 10 月在 GitHub 上已經累積 約 8 萬顆星（2026 年 10 月）。
這篇會說明它是什麼、怎麼用、自己架需要準備什麼，最後也會老實講它的限制，以及一個很重要的版權提醒。
screenshot-to-code 是什麼？
簡單說，它是一個「截圖轉程式碼」的工具。你把網頁截圖、設計稿、Figma 畫面，甚至是一段螢幕錄影丟進去，它會呼叫 AI 模型，產出對應的前端程式碼。
先看關鍵資訊：
| 項目 | 內容 |
|---|---|
| 專案 | abi/screenshot-to-code |
| GitHub 星數 | 約 8 萬顆星（2026 年 10 月） |
| 授權 | MIT（可自由使用、修改） |
| 輸入 | 截圖、設計稿、Figma 畫面、螢幕錄影 |
| 輸出 | HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap、Ionic + Tailwind |
| 支援模型 | Gemini、GPT、Claude 等（以 README 為準） |
| 線上版 | screenshottocode.com |
它的核心流程很單純：你給它一張圖，選一個你想要的技術組合，它就幫你把畫面「翻譯」成程式碼。你拿到的不是一張圖，而是真正可以複製進專案、繼續修改的原始碼。
對前端新手來說，這可以當成學習工具：看 AI 怎麼把一個版面拆成元件、怎麼用 Tailwind 寫出間距和顏色。對有經驗的人來說，則是快速做出原型的捷徑，先拿到八成像的版本，再自己微調。
怎麼用？分成兩種玩法
玩法一：直接用線上版
最省事的方式，是到官方的線上版 screenshottocode.com 試用。不需要在自己電腦上裝任何東西，打開瀏覽器就能開始。
不過要先說清楚：線上版的收費方式，我們這邊沒有查到能確認的公開資訊，所以這篇不會講價格。如果你打算長期用，請直接到官網看最新的方案說明。
玩法二：自己架在電腦上（開源版）
程式碼是 MIT 授權，所以你可以自己 clone 下來跑。這條路的好處是資料在自己手上，也可以依需求改功能。
自己架之前，要先準備 AI 金鑰：
- 至少需要一把 OpenAI、Anthropic（Claude）或 Gemini 的 API 金鑰。
- README 特別建議同時準備 Gemini 和 Replicate 的金鑰，效果比較好。
- 如果你要用「螢幕錄影轉程式碼」的影片模式，Gemini 的金鑰是必要的。
架設方式有兩種。
方式 A：前後端分開跑
後端用 FastAPI，前端用 React 搭配 Vite。大致流程是：
git clone https://github.com/abi/screenshot-to-code.git
後端使用 poetry 管理套件，並用 uvicorn 在 7001 埠啟動；前端用 pnpm 啟動開發伺服器，預設在 5173 埠。金鑰可以寫在 backend/.env，也可以在介面的設定（齒輪）裡填。要注意 Replicate 的金鑰只能放在 .env。
方式 B：用 Docker 一次搞定
如果你的電腦有 Docker，更簡單：
docker-compose up -d --build
跑起來之後，用瀏覽器打開前端網址，把截圖拖進去，選好技術組合，就可以看 AI 生成結果。
實際操作的小流程
- 挑一張你想參考的畫面，截成圖（或錄一小段螢幕）。
- 打開 screenshot-to-code，把圖片拖進去。
- 選擇你想要的輸出，例如 React + Tailwind，或單純的 HTML + Tailwind。
- 等它生成，預覽結果。
- 覺得哪裡不對，可以再用文字請它調整。
- 把程式碼複製出來，貼進自己的專案繼續改。
它好在哪？
- 省下刻版的時間。 最耗時的那段「從零把版面拼出來」，它幫你做掉。
- 輸出選擇多。 從單純 HTML 到 React、Vue 都有，不用被綁死在某個框架。
- 螢幕錄影也能轉。 不只靜態畫面，連有互動的流程也能拿來當參考。
- 開源可改。 MIT 授權，想自己客製、塞進公司內部工具都行（當然前提是你處理好金鑰和成本）。
要注意的地方（請認真看）
一、自己架要自己付 AI 用量
程式碼本身免費，但每次生成都是在呼叫你自己的 AI 金鑰，費用算在你的帳單上。README 沒有公開每次生成大概多少錢，所以我們沒辦法給你一個數字。建議第一次先用小張的圖測試，再看你的用量後台。
二、產出是「草稿」，不是成品
AI 產生的程式碼，通常只能做到大致像，不會像素等級完全一致。字體、間距、動畫細節常需要人工修。而且它只還原畫面長相，不包含後端邏輯，按鈕按下去要做什麼、資料從哪裡來，還是得你自己寫。
三、版權與商標風險
這點最重要。拿別人的網站來學習、練習版面、做內部原型，一般來說沒問題。但如果你把別人的設計、品牌、Logo、文字、圖片，原封不動拿去做商業用途，就會有版權或商標上的風險。
比較安全的用法是：把它當作「理解版面結構」的參考，最後換成你自己的配色、文案和素材。
四、別被舊數字誤導
網路上有些介紹寫的星數比較舊，也有一些「某某大廠工程師都在用」的說法，我們在 README 和 repo 裡找不到能佐證的內容，所以這篇不採用。以專案頁面現況為準。
適合誰用？
- 想學前端、想看 AI 怎麼拆版面的新手。
- 需要快速做出產品原型給團隊或客戶看的人。
- 手上有設計稿、想先拿到一份程式碼骨架的工程師。
不太適合的是：想要一鍵複製整個網站拿去賣的人。那既做不到，也有法律風險。
新手第一次用，可以這樣安排
如果你是第一次接觸這類工具，不建議一開始就拿很複雜的網站來試。先挑一個結構單純的畫面，例如一個登入頁、一張價格表，或是一個簡單的首頁區塊，截圖後丟進去看結果。這樣你比較容易判斷 AI 到底還原了多少，哪些地方需要自己補。
等你熟悉它的脾氣之後，再慢慢挑戰比較複雜的版面。你會發現，AI 對於「整體排版、區塊順序、基本配色」通常抓得不錯，但對於細緻的字距、漸層、陰影層次，以及響應式在不同螢幕寬度下的表現，常常需要你親手調整。
另外有一個實用的做法：同一張圖，用不同的模型各生成一次，再比較結果。因為不同模型的強項不太一樣，有的版面還原比較準，有的程式碼比較乾淨。README 裡有列出目前推薦的模型，可以照著挑，不過模型清單會隨版本更新，實際以專案頁面為準。
最後提醒一點：生成出來的程式碼，上線之前一定要自己看過一遍。檢查有沒有多餘的外部連結、有沒有引用不明的圖片來源，也確認無障礙與效能這類基本品質。AI 給你的是起點，不是終點。
常見問題
一定要會寫程式才能用嗎？ 不用。線上版打開就能試；但要把結果放進真正的專案，還是需要基本的前端知識，才知道怎麼調整和部署。
生成的結果不滿意怎麼辦？ 先換一張更清晰、範圍更小的截圖，一次只拍一個區塊，通常比整頁長截圖準確。也可以換模型再試一次。
可以拿來做公司的正式網站嗎？ 可以拿來當骨架，但文案、圖片、品牌元素請換成自己的，並由人檢查過，再上線。
參考連結
更多 AI 工具，追蹤 IG @aihub.tw。