从截图到代码：3分钟搭建screenshot-to-code全栈开发环境
项目地址: https://gitcode.com/GitHub_Trending/sc/screenshot-to-code 还在为手动将设计稿转换为代码而烦恼？screenshot-to-code让你上传一张截图就能自动生成HTML/Tailwind/React/Vue代码。本文将带你3分钟完成开发环境配置，告别繁琐的手动编码，让AI为你代劳。
项目简介
screenshot-to-code是一个利用AI将截图、原型图和Figma设计转换为整洁功能代码的工具。支持多种技术栈，包括HTML + Tailwind、React + Tailwind、Vue + Tailwind等，同时兼容Claude Sonnet 3.7和GPT-4o等AI模型。
项目结构采用前后端分离架构：
环境准备
在开始配置前，请确保你的系统已安装以下工具：
- Git
- Python 3.8+
- Node.js 14+
- Yarn
- Docker（可选，用于容器化部署）
如果你需要获取OpenAI API密钥，请参考官方文档中的详细步骤。
快速开始
1. 克隆代码仓库
首先，克隆项目代码到本地：
git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code.git
cd screenshot-to-code
2. 配置后端服务
后端使用Poetry进行依赖管理，进入后端目录并安装依赖：
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
echo "ANTHROPIC_API_KEY=your-key" >> .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001
如果你没有API密钥或想测试功能，可以使用模拟模式运行后端：
MOCK=true poetry run uvicorn main:app --reload --port 7001
后端源码结构：
3. 配置前端服务
打开新的终端，进入前端目录并安装依赖：
cd frontend
yarn
yarn dev
前端启动后，访问 http://localhost:5173 即可使用应用。
前端主要组件：
- App.tsx：应用主组件
- ImageUpload.tsx：图片上传组件
- CodePreview.tsx：代码预览组件
Docker部署
如果你更倾向于使用Docker，可以通过以下命令一键部署：
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
docker-compose配置文件定义了后端和前端服务的部署参数，具体可查看docker-compose.yml。
服务启动后，访问 http://localhost:5173 即可使用应用。
常见问题
端口冲突
如果后端端口7001已被占用，可以修改启动命令中的端口号：
poetry run uvicorn main:app --reload --port 7002
同时，需要更新前端配置文件frontend/.env.local中的后端地址：
VITE_WS_BACKEND_URL=http://localhost:7002
API密钥配置
除了在.env文件中设置API密钥，你也可以通过前端界面的设置对话框（点击齿轮图标）配置密钥，这些设置只会保存在本地浏览器中。
中文字符显示问题
如果生成的代码中出现中文乱码，请确保你的编辑器和终端使用UTF-8编码。Windows用户可能需要特别设置.env文件的编码格式，具体方法可参考Troubleshooting.md。
总结
通过本文的步骤，你已经成功搭建了screenshot-to-code的开发环境。现在，你可以：
- 上传设计截图，自动生成代码
- 在前端界面实时预览代码效果
- 切换不同的技术栈（HTML/Tailwind/React/Vue）
- 比较不同AI模型的生成结果
如果你在使用过程中遇到任何问题，可以查阅项目的README.md或提交issue寻求帮助。
祝你的开发工作更加高效！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
