这段时间来，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 让人看到一种全新的开发模式，只需点击几下鼠标，它就能将以前密集的手动流程自动化。

项目提供了一个在线环境，可以直接上传图片并执行