Screenshot to Code

活跃
GitHub Python MIT

简介

利用 AI 模型将截图、设计稿和 Figma 文件转换为干净的代码，支持 HTML/Tailwind、React 和 Vue 等多种前端框架。

核心特性

  • 多格式输入支持 — 支持截图、UI 设计稿、Figma 文件和屏幕录制转换为可运行代码
  • 多技术栈输出 — 生成 HTML+Tailwind、React+Tailwind、Vue+Tailwind、Bootstrap、Ionic 等框架代码
  • 多 AI 模型集成 — 内置 Gemini、GPT-5 系列、Claude Opus 等顶级视觉模型，支持模型对比
  • 实时预览与迭代 — 前端 React/Vite 应用支持实时预览生成结果并进行修改调整
  • FastAPI 后端架构 — 后端基于 FastAPI 构建，支持 WebSocket 实时通信与热重载开发
  • Docker 一键部署 — 提供 docker-compose 配置，快速完成本地完整环境搭建

适用场景

💡 前端开发者将设计师提供的截图或 Figma 设计稿快速转换为可运行的前端页面代码
💡 产品原型验证时，将竞品或灵感截图转化为可交互原型进行功能演示
💡 通过屏幕录制将现有网站的操作流程转换为可复用的前端代码模板
💡 学习前端开发时，通过逆向分析优秀网站的截图理解其布局与实现方式

标签

screenshot-to-code multimodal code-generation design frontend

分类

💻 编码 Agent ⚡ Agent 工具

快速开始

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

# 配置 API 密钥并启动后端
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install && poetry run uvicorn main:app --reload --port 7001

# 启动前端
cd ../frontend && yarn && yarn dev
# 访问 http://localhost:5173
访问 GitHub

相关项目