- A+
所属分类：Web前端
这段时间来，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 让人看到一种全新的开发模式，只需点击几下鼠标，它就能将以前密集的手动流程自动化。
项目提供了一个在线环境，可以直接上传图片并执行
