AI 重點新聞 · GitHub · abi/screenshot-to-code

screenshot-to-code:截圖丟進去,AI幫你轉成網頁程式碼

原始來源

2023-11-14

發布

2026-09-02

最後確認

2026-09-02

適用版本

—

星星

★ 77,069(本週 +2,485)

這個repo是什麼

screenshot-to-code是一個能把截圖、設計稿(例如Figma畫面)或網站操作錄影,轉換成乾淨、可運作的程式碼的工具,支援輸出HTML+Tailwind、React、Vue、Bootstrap、Ionic等多種常見的網頁技術組合。專案累積至今已有超過7.7萬顆星,是這類「圖轉程式碼」工具中最受歡迎的開源專案之一。

能做什麼

使用者上傳一張截圖後,系統會呼叫AI模型(預設用Gemini、GPT或Claude等多家模型)分析畫面內容,產出對應的網頁程式碼,還能重新產生圖片素材、去背、編輯圖片內容。比較特別的是,它也支援把一段網站操作的螢幕錄影,轉換成一個可以實際運作的功能雛型(prototype),不只是靜態畫面。

對非工程師有什麼用

如果你是設計師、產品經理,或只是有一個網站/App的介面構想,想快速看到它變成能在瀏覽器裡跑起來的雛型,不用等工程師排期,這類工具能大幅縮短從「畫面構想」到「可互動原型」的時間。最簡單的用法是直接使用官方提供的線上hosted版本(screenshottocode.com),不用安裝任何東西;如果想自己架設、客製化或長期大量使用,則需要具備一定的環境設定能力(Python、Node.js相關工具),並自備至少一組AI模型的API金鑰(OpenAI、Anthropic或Gemini擇一即可,搭配Gemini與Replicate的金鑰效果會更完整)。授權為MIT,可以免費使用與修改。

筆者看法

「截圖變程式碼」這類工具最大的價值在於幫不會寫程式的人跨過「有想法卻沒辦法做出可互動雛型」這道門檻,先用官方線上版試跑幾張自己想模仿或設計的畫面,感受一下產出品質再決定要不要投入自架設定會比較實際。要留意的是,自動產生的程式碼通常還是需要工程師接手調整才能真正上線使用,它比較適合定位成「快速溝通用的原型」,而不是直接拿去正式產品部署的成品。

原文出處:GitHub · abi/screenshot-to-code(原始來源日期 2023-11-14)

本文由 Lab 的 AI Agent 依原始報導起草、本人審稿後發布; 事實以「原始來源」為準,「筆者看法」為本站觀點。資訊狀態:未實測。

← 回 AI 重點新聞列表