你有沒有遇過這種情況
設計稿看起來很清楚
但真的要把它切成可以跑的網頁
又是另一件事
screenshot-to-code
想解的就是把一張截圖變成可以跑的
網頁原型
真正痛的是時間
Demo前一天要補頁面
舊系統要重做UI
設計師想看互動版本
工程師卻還卡在第一版切版
這種時候
先有一個可改的原型
比從空白檔案開始好很多
screenshot-to-code
的定位很直白
你丟截圖
mockup Figma設計稿
甚至螢幕錄影
它嘗試輸出前端程式
它支援HTML
Tailwind
React
Vue也支援Bootstrap和
Ionic這類常見stack
流程大概是先看畫面
判斷版面
文字圖片和元件
再把它寫成程式
新版本很重視真素材
像logo
照片icon
如果能從截圖裡抓出來
就盡量保留
不是全部重畫成假的
背後可以接Gemini
GPT Claude
README也特別建議Gemini
因為它對截圖理解和素材擷取比較關
鍵Replicate則負責圖片編
輯去背和生成
換句話說
這不是單一模型秀肌肉
而是一條把多個能力接起來的工作流
它也能吃螢幕錄影
這點很有意思
因為很多產品畫面不是靜態的
按鈕點下去
tab切換
modal彈出
才是使用者真正感受到的UI
如果要本機跑
架構是React加Vite前端
搭配FastAPI後端
至少要準備一組模型金鑰
OpenAI Anthropic或Gemini
其中之一都可以
如果想要更完整的圖片處理
Replicate也要設定
可選的screenshot preview
是另一個重點
工具可以把自己產出的頁面丟進Chromium
截圖讓agent回頭看結果像不像
這一步不會保證完美
但比只相信文字輸出可靠很多
它適合三種場景
做landing page草稿
把舊畫面快速翻成新版
或讓設計和工程在會議前先看到互動
原型你不一定要直接把產物上線
但你可以少花很多時間在第一版
但它不是魔法
截圖裡的小字
陰影間距
響應式狀態
還有真正的資料流
都可能需要人修
QA要看三件事
畫面是不是像
互動是不是對
程式是不是能長期維護
開源的好處是你可以自架
也可以改提示詞
換模型加自己的設計系統
成本也要算
模型越強
畫面越可能接近
但速度和費用通常也會上去
另外別把敏感畫面直接丟進去
內部後台
客戶資料
金鑰未公開設計
都要先遮掉
AI工具越方便
資料邊界越要自己守住
對工程師來說
這是省掉第一版草稿時間的工具
對設計師來說
它可以把看起來像更快推到點起來像
我會把它放在團隊流程的前段
截圖進來
原型出來
接著才是人工整理
測試和重構
真正交付前還是要跑起來
看錯誤改狀態
補可及性
可是如果你的任務是先把UI想法變
成能討論的東西
screenshot-to-code
已經很接近那個入口
所以這個專案值得看
不是因為它讓工程師消失
而是它把第一版畫面這件事變得便宜
很多我的結論很簡單
快但要有QA
省時間但不要省檢查
如果你想看更多像這樣的開源工具
我會繼續在Github雷達幫你拆
解喜歡這種題材
記得訂閱
我們下一支影片見