一龍馬/AI 情報站讀懂消息背後的脈絡
星期六
搜尋

`screenshot-to-code` 是把截圖、mockup、Figma 設計與螢幕錄影轉成可運作前端程式碼的工具

Python · ⭐ 75,507 · 🍴 9,217 · 🔥今日 +309

中文摘要

支援 HTML/Tailwind、React/Tailwind、Vue/Tailwind、Bootstrap、Ionic/Tailwind 等輸出。README 說本機版採 React/Vite 前端與 FastAPI 後端,至少需要 OpenAI、Anthropic 或 Gemini 其中一組 API key;Gemini 被標示為強烈建議,因為涉及截圖資產抽取與影片模式,Replicate 則用於圖片生成、去背與編輯。它也提供官方 hosted product 作為最快試用方式;本機部署需處理 Poetry、Playwright Chromium、前後端設定或 Docker,開源模型 Ollama 路徑則被作者明確說明「不建議,品質較差」。

一龍馬判讀

這類工具把設計稿到前端雛形的時間壓短,對產品設計師、前端工程師與快速驗證團隊有直接價值。限制是高品質結果依賴商用模型與多把 API key,且產出的「clean code」仍需要工程師檢查可維護性、無障礙與響應式細節。

原文節錄

abi/screenshot-to-code

# screenshot-to-code Convert screenshots, mockups, Figma designs, and screen recordings into clean, functional code using AI.

取得部分原文 · 不代表內容已獨立查證

查看原文
完整收錄文字與來源

Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)

收錄日期
2026-08-29
來源
github.com/trending
抓取時間
2026/08/29 05:50(台北)
來源資料
Python · ⭐ 75,507 · 🍴 9,217 · 🔥今日 +309