一張截圖，讓 AI 把整個網頁重做出來：開源工具 Screenshot to Code 完整教學

我在 Reels 裡讓 AI 看一張我們自己官網的截圖，它就把整頁重做出來，上面是原版，下面是 AI 重建的。用的是開源工具 Screenshot to Code：丟一張截圖，它會讀版面、間距、字型和顏色，直接寫出 HTML 加 Tailwind（也可以選 React、Vue 等）程式碼。這篇是完整版，會教你怎麼在自己電腦裝起來、要準備什麼 API key、怎麼用，還有把網站錄影變成原型的功能。先講清楚一件事：Reels 裡那張「AI 重建」的圖，是我請 Claude 照這個工具的提示詞做的，不是這個工具自己畫面的截圖，下面會再說一次。圖片都是我們 Reels 的畫面，主角是我們的橘色小方塊吉祥物。

01先看結果：一張截圖，整頁重做

上面是我們自己的官網（hobbyland-group.com），下面是 AI 只看一張截圖重做出來的版本。版面、間距、字型、顏色都很接近，整頁用不到你自己慢慢刻。

兩個瀏覽器視窗上下排列，上面是原版官網，下面標著「AI 重建」，兩頁幾乎一樣，旁邊貼著「只用 1 張截圖」的標籤 — Reels 開頭：上面是我們自己的官網，下面是 AI 只看一張截圖重做的頁面。

很多人以為仿一個網頁要自己一行一行寫，其實不用。這個工具會先讀懂截圖，再寫出程式碼，你只要檢查、微調。

桌上堆著一疊手寫程式碼紙，旁邊的時鐘在趕時間，畫面蓋上紅色「不用」印章 — 「自己慢慢刻？」不用。

往下讀可以看到：這個工具是什麼、本機安裝的完整指令、怎麼丟截圖、錄影轉原型怎麼用，還有最後一定要看的注意事項。

02這個工具是什麼，開始前要準備什麼

Screenshot to Code 是 GitHub 用戶 abi 做的開源專案，授權是 MIT，我 2026 年 10 月 20 日查的時候有 80.5k 顆星。README 的介紹是：把截圖、設計稿、Figma 設計和螢幕錄影，用 AI 轉成程式碼。

GitHub 上 abi/screenshot-to-code 的頁面右側，顯示 About 簡介、MIT license、80.5k stars 和 9.8k forks — 官方 GitHub 頁面（2026-10-20 截圖）：MIT 授權、80.5k stars。

它支援的輸出有：HTML＋Tailwind、HTML＋CSS、React＋Tailwind、Vue＋Tailwind、Bootstrap、Ionic＋Tailwind。

一個 AI 服務的 API key：OpenAI、Anthropic（Claude）或 Gemini，至少要有一個。用量是你自己付，費用跟你選的服務和用量有關。
想用錄影轉原型：要有 Gemini 的 key，README 寫 Gemini 是影片模式必要的。
本機安裝需要 Python（專案設定寫 3.10 以上）、Poetry、Node.js 和 pnpm。不想裝這些，可以看後面的 Docker 或官方線上版。
一張你自己的網頁或設計的截圖。

03本機安裝（照 README，約 10 分鐘）

先把專案下載下來：到 https://github.com/abi/screenshot-to-code，用 git clone 或下載 ZIP 解壓。之後分兩個視窗，一個跑 backend，一個跑 frontend。以下指令抄自 README，我 2026 年 10 月 20 日對過；專案會更新，有出入時以 README 為準。

打開第一個終端機，進到專案裡的 backend 資料夾。
在 backend 資料夾建一個叫 .env 的檔案，貼上下面的內容，把［］換成你自己的 key。只有一個 key 就只寫那一行。

backend/.env（把［］換成你的 key）

OPENAI_API_KEY=［你的 OpenAI key，沒有就整行不寫］
ANTHROPIC_API_KEY=［你的 Anthropic key，沒有就整行不寫］
GEMINI_API_KEY=［你的 Gemini key，沒有就整行不寫］

依序跑下面的指令。第一行是裝 Poetry，已經有的話可以略過；cd backend 是從專案根目錄開始算。
playwright install chromium 那行是給「截圖預覽」用的，選填，沒裝的話工具會自己略過這個功能。

終端機 1：backend

pip install --upgrade poetry
cd backend
poetry install
poetry run playwright install chromium
poetry run uvicorn main:app --reload --port 7001

打開第二個終端機，回到專案根目錄，跑下面的指令。
瀏覽器打開 http://localhost:5173，就是工具的畫面。
如果後端不是跑在 7001，要到 frontend/.env.local 改 VITE_WS_BACKEND_URL。

終端機 2：frontend

cd frontend
pnpm install
pnpm dev

想用 Docker 的話，在專案根目錄跑下面這兩行就行，一樣開 http://localhost:5173。README 提醒這種方式不能邊改程式邊測，因為改檔案不會自動重建。

Docker（把［］換成你的 key）

echo "OPENAI_API_KEY=［你的 key］" > .env
docker-compose up -d --build

04怎麼用：丟截圖，看它讀什麼，再寫出程式碼

打開 http://localhost:5173，選你要的輸出，例如 HTML＋Tailwind。
把截圖拖進去（建議是你自己的網站或設計）。
等它生成，可以看預覽和程式碼。
不滿意就用追問的方式改，下面有範本。

桌上的筆電顯示被分析的網頁，旁邊的清單勾起「版面」「間距」「字型」，第四項「顏色」還沒勾 — Reels 裡的示意：它會讀的 4 件事，版面、間距、字型、顏色。

Reels 裡我用打勾清單表示它「讀到」的 4 件事：版面、間距、字型、顏色。這是我的示意畫法，不是工具真的跳出這樣一張清單，工具實際的畫面請以你自己跑出來的為準。

輸出室裡的螢幕顯示 HTML 程式碼，下方貼著 HTML、Tailwind、React、Vue 四個標籤 — 直接寫出 HTML 加 Tailwind，也可以選 React、Vue。（程式碼畫面為示意）

官網寫它可以「不滿意再追問」，例如把 header 固定、換深色配色、補手機版選單。你可以用這個格式追問，一次只改一件事：

追問範本（把［］換成你要改的）

請只修改［header／頁尾／按鈕］，其他地方保持不變：［例如：讓 header 固定在頂端、把間距收緊一點、加一個手機版選單］。

05更狠的：丟一段網站錄影，變成能點的原型

除了截圖，它還能處理螢幕錄影。官網（screenshottocode.com）的 Video to Code 寫的是：錄下你的畫面，展示一個完整的網站、App 或介面互動，AI 會把它轉成功能性的程式碼，條列的重點有「擷取複雜互動和動畫」「理解 hover 狀態、轉場和流程」「生成完整的互動元件」。

screenshottocode.com 官方頁面的 Video to Code 區塊：錄下你的螢幕，AI 轉成功能性的程式碼 — 官方頁面（2026-10-20 截圖）：Video to Code。

攝影機架在腳架上，螢幕顯示 Video to Code 的介紹，旁邊的紅色 REC 燈亮著 — Reels 裡的示意：錄下操作，變成能點的原型。

先準備好 Gemini 的 key（影片模式必要）。
錄一段你自己的網站或 App 操作，短一點，把要做的互動走過一次。
在工具裡用影片模式上傳。我這篇沒有逐個按鈕走過，確切的介面請看 README 和官網的說明。

06不想安裝：用官方線上版

README 說最快的方式是用官方線上版 https://screenshottocode.com，不用自己裝任何東西。我 2026 年 10 月 20 日打開，頁面可以正常看，有 Sign in 和 Get Started。線上版怎麼收費我沒有查到明確的頁面，所以我不跟你說它免費，請點進去看它自己的說明。

07要注意

一個寫著「API KEY・你自己的」的黃色鑰匙牌，前面蓋著白色卡片「只仿自己的設計」，下面有「用量自付」標籤 — Reels 裡的提醒：用你自己的 API key，只仿自己的設計。

只仿自己的網站或自己的設計。別人的品牌、文字、圖片和排版有版權，截圖丟進去重做也一樣。我在 Reels 示範的是我們自己的官網。
API key 是你自己的，用量你自己付。key 等於密碼：不要貼到別人看得到的地方，.env 檔不要上傳到 GitHub。建議在服務商那邊設用量上限。
本機安裝的話，檔案和 key 都只在你的電腦。用線上版的話，你的截圖會傳到對方的服務，敏感內容不要丟。
AI 重建不會一模一樣，字型、圖片和互動常常要你修。把它當成幫你省掉大部分起手工作，不是一鍵完成。
專案持續更新（我查的時候最後一次更新是 2026 年 10 月 9 日），指令和支援的模型可能會變，遇到問題先看 README。
前面說過，再提醒一次：Reels 裡的「AI 重建」是 Claude 照工具的提示詞做的，不是這個工具自己畫面的截圖。