你是否曾经希望可以直接将设计图转化为代码，所见即所得，节省大量的时间和精力？本期为大家介绍代码转换工具——screenshot-to-code，它可以将截图、原型图和Figma设计无缝转换为干净、功能齐全的代码。

项目简介

screenshot-to-code 是一个强大图片转代码工具，通过Ai将各种设计图直接转化为代码。不管是静态图像，还是网站的操作录屏，它都能轻松搞定。开发者们希望通过这个工具，简化前端开发流程，让设计师和开发者的合作更加高效和愉快。

功能特点

• 1、多技术栈支持：不管你喜欢用HTML + Tailwind，还是喜欢用React、Vue，这个工具都能满足你。
• 2、AI模型助力：内置多个强大AI模型，不仅能生成你需要的代码，还能处理视觉任务。
• 3、视频录屏支持：实验性功能，可以将网站的操作录屏转化为功能原型，绝对是个大杀器。
• 4、自定义配置：灵活的配置选项，让你可以调整后端连接、代理设置等，适应不同的开发环境。

使用步骤

1. 获取密钥：

• 需要OpenAI API密钥（访问GPT-4）。
• 可选：Anthropic密钥（用于Claude Sonnet或视频支持）。

2. 启动后端：

   cd backend
   echo "OPENAI_API_KEY=sk-your-key" > .env
   poetry install
   poetry shell
   poetry run uvicorn main:app --reload --port 7001

3. 启动前端

cd frontend
npm install
npm run dev

4. 其他配置

• 配置OpenAI代理：设置 OPENAI_BASE_URL。
• 调整前端连接的后端地址：配置 VITE_HTTP_BACKEND_URL 和 VITE_WS_BACKEND_URL。

项目地址

https://github.com/abi/screenshot-to-code

总结

screenshot-to-code 作为一个极具潜力的工具，大大简化设计到开发的转化过程。无论你是前端开发者还是设计师，这个工具都能为你带来极大的便利。未来，随着AI技术的进步，我们可以期待更多类似工具的出现，进一步提升我们的开发效率。