53.4K Star!将截图转代码:让设计变为现实
你是否曾经希望可以直接将设计图转化为代码，所见即所得，节省大量的时间和精力？本期为大家介绍代码转换工具——screenshot-to-code，它可以将截图、原型图和Figma设计无缝转换为干净、功能齐全的代码。
项目简介
screenshot-to-code 是一个强大图片转代码工具，通过Ai将各种设计图直接转化为代码。不管是静态图像，还是网站的操作录屏，它都能轻松搞定。开发者们希望通过这个工具，简化前端开发流程，让设计师和开发者的合作更加高效和愉快。
功能特点
- 1、多技术栈支持：不管你喜欢用HTML + Tailwind，还是喜欢用React、Vue，这个工具都能满足你。
- 2、AI模型助力：内置多个强大AI模型，不仅能生成你需要的代码，还能处理视觉任务。
- 3、视频录屏支持：实验性功能，可以将网站的操作录屏转化为功能原型，绝对是个大杀器。
- 4、自定义配置：灵活的配置选项，让你可以调整后端连接、代理设置等，适应不同的开发环境。
使用步骤
- 获取密钥：
- 需要OpenAI API密钥（访问GPT-4）。
- 可选：Anthropic密钥（用于Claude Sonnet或视频支持）。
- 启动后端：
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001- 启动前端
cd frontend
npm install
npm run dev- 其他配置
- 配置OpenAI代理：设置 OPENAI_BASE_URL。
- 调整前端连接的后端地址：配置 VITE_HTTP_BACKEND_URL 和 VITE_WS_BACKEND_URL。
项目地址
https://github.com/abi/screenshot-to-code
总结
screenshot-to-code 作为一个极具潜力的工具，大大简化设计到开发的转化过程。无论你是前端开发者还是设计师，这个工具都能为你带来极大的便利。未来，随着AI技术的进步，我们可以期待更多类似工具的出现，进一步提升我们的开发效率。
