這段時間來，AI已經逐步走進我們的工作和生活，作為程式員來說，讓AI寫代碼已經成為稀鬆平常的操作了，今天給大家介紹一個更牛逼的操作，屏幕截屏轉化為代碼，從此前端開發更簡單

screenshot-to-code

screenshot-to-code可以將任何屏幕截圖或設計轉換為乾凈的代碼，它是一個簡單的工具，使用 AI 將屏幕截圖、模型和 Figma 設計轉換為乾凈、實用的代碼。

目前已經有47K start的收藏了

支持的技術棧

• HTML + Tailwind
• React + Tailwind
• Vue + Tailwind
• Bootstrap
• Ionic + Tailwind
• SVG
• GPT-4 Vision
• Claude 3 Sonnet
• DALL-E 3 for image generation

使用

該應用程式有一個 React/Vite 前端和一個 FastAPI 後端。如果您想使用 Claude Sonnet，您將需要一個可以訪問 GPT-4 Vision API 的 OpenAI API 密鑰，或者一個 Anthropic 密鑰

後端

後端使用 Poetry 進行包管理 - pip install poetry

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001

如果要使用 Anthropic，請使用 Anthropic 中的 API 密鑰添加 ANTHROPIC_API_KEY to backend/.env

前端

cd frontend
yarn
yarn dev

打開 http://localhost:5173 可以訪問

藉助GPT-4 Vision的突破性能力，Screenshot to Code 讓人看到一種全新的開發模式，只需點擊幾下滑鼠，它就能將以前密集的手動流程自動化。

項目提供了一個線上環境，可以直接上傳圖片並執行