Screenshot to Code 能够将屏幕截图、模型图或Figma设计自动转换成干净、可用的代码。该工具支持多种技术栈，包括HTML + Tailwind、React + Tailwind、Vue + Tailwind等。
标签：Screenshot to Code
什么是Screenshot to Code
Screenshot to Code 能够将屏幕截图、模型图或Figma设计自动转换成干净、可用的代码。该工具支持多种技术栈，包括HTML + Tailwind、React + Tailwind、Vue + Tailwind等。它利用AI技术，特别是最新的GPT-4O模型，提高代码生成的精确度和速度。此外，该项目还实验性地支持将视频或屏幕录像直接转化为功能性原型，为开发者提供极大的便利和效率提升。
项目链接：https://github.com/abi/screenshot-to-code
支持的技术栈：
HTML + Tailwind
React + Tailwind
Vue + Tailwind
Bootstrap
Ionic + Tailwind
SVG支持的大语言模型：
GPT-4O - 最佳模型！
GPT-4 Turbo（2024年4月）
GPT-4 Vision（2023年11月）
Claude 3 Sonnet
DALL-E 3 用于图像生成
还新增了对录制网站动态视频/屏幕录像并将其转化为功能性原型的实验性支持
Screenshot to Code使用
该应用使用了React/Vite前端和FastAPI后端。如果你想使用Claude Sonnet，或者实验性的视频支持，你将需要一个拥有访问GPT-4 Vision API权限的OpenAI API密钥，或者一个Anthropic密钥。
运行后端（使用Poetry进行包管理 - 如果你没有安装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密钥添加到 backend/.env 中的 ANTHROPIC_API_KEY。
运行前端：
cd frontend
yarn
yarn dev
打开 http://localhost:5173 使用。
如果你希望在不同的端口上运行后端，更新 frontend/.env.local 中的 VITE_WS_BACKEND_URL。
出于调试目的，如果你不想浪费GPT4-Vision的额度，你可以在模拟模式下运行后端（这将流式传输预录制的响应）：
MOCK=true poetry run uvicorn main:app --reload --port 7001
Docker
如果你的系统中安装了Docker，在根目录下运行：
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
应用在 http://localhost:5173 上运行。
注意，使用这种设置无法开发应用，因为文件更改不会触发重建。
