Screenshot-to-Code AI设计图转代码工具，支持多技术栈与实时预览

Screenshot-to-Code：将设计图一键转换为干净代码的AI工具

你是否曾经为了将设计稿转换为前端代码而耗费大量时间手动编写HTML和CSS？Screenshot-to-Code的出现，旨在彻底解决这个问题。它是一个基于AI的智能代码生成工具，可以将截图、设计稿和Figma文件快速转换为干净、可用的前端代码。本文将带你全面了解这个革命性的开发工具。

截至收录：
Screenshot-to-Code项目stars数：71233
Screenshot-to-Code项目forks数：8806

Screenshot-to-Code项目目录截图

Screenshot-to-Code项目核心亮点

🚀 AI驱动转换：采用先进的Claude Sonnet 3.7和GPT-4o模型，能够智能识别设计元素并生成高质量的代码。
🎯 多技术栈支持：支持HTML + Tailwind、React + Tailwind、Vue + Tailwind、Bootstrap、Ionic + Tailwind、SVG等多种前端技术栈。
🔄 实时预览调试：提供实时代码预览功能，支持在生成过程中进行调整和优化，确保代码质量。
📹 视频转原型：创新性地支持将网站操作视频转换为功能原型，大大扩展了应用场景。

Screenshot-to-Code项目快速开始

只需几步，你就能在本地运行起 Screenshot-to-Code：

1. 环境准备：

   # 克隆项目
   $ git clone https://github.com/abi/screenshot-to-code.git
   cd screenshot-to-code

2. 配置API密钥：

   # 在backend目录下创建.env文件
   cd backend
   echo "OPENAI_API_KEY=sk-your-key" > .env
   echo "ANTHROPIC_API_KEY=your-key" > .env

3. 启动服务：

   # 启动后端服务
   $ poetry run uvicorn main:app --reload --port 7001
   # 另开终端启动前端
   $ cd frontend
   $ yarn dev

1. 开始使用：
   打开 http://localhost:5173，上传设计图即可体验AI代码生成。

Screenshot-to-Code项目应用场景

UI设计转开发：设计师可以将Figma或Sketch设计稿直接转换为可用的前端代码，大幅提升开发效率。
快速原型开发：产品经理和创业者可以通过截图快速创建产品原型，加速产品验证过程。
代码重构辅助：开发者可以将现有网站的截图转换为现代技术栈代码，辅助进行代码重构和升级。
教育学习工具：前端学习者可以通过观察AI如何将设计转换为代码，加深对前端开发的理解。

用户案例：该项目已在开发者社区中获得广泛认可，被众多前端开发者和设计团队用于提升工作效率，其创新的AI代码生成能力正在改变传统的开发工作流。

Screenshot-to-Code项目链接

abi / screenshot-to-code项目地址：https://github.com/abi/screenshot-to-code

本文地址：https://www.tgoos.com/30649