screenshot-to-code - 截图转代码工具

一、关于 screenshot-to-code

一款基于AI的简单工具，可将截图、线框图和Figma设计稿转换为简洁、可运行的代码。现已支持Claude Sonnet 3.5和 Gemini 2.0 Flash模型！

演示视频

相关链接资源

• github : https://github.com/abi/screenshot-to-code
• 官网：https://screenshottocode.com
• 官方文档：https://github.com/abi/screenshot-to-code/wiki/Screen-Recording-to-Code
• Twitter : https://twitter.com/_abi_
• 在线体验点击体验托管版（付费）: https://screenshottocode.com

关键功能特性

• 支持的技术栈：
  • HTML + Tailwind
  • HTML + CSS
  • React + Tailwind
  • Vue + Tailwind
  • Bootstrap
  • Ionic + Tailwind
  • SVG
• 支持的AI模型：
  • Claude Sonnet 3.5（最佳推荐）
  • GPT-4o（同样推荐）
  • DALL-E 3或Flux Schnell（通过Replicate实现图像生成）
• 新增实验性功能：可将网站操作视频/屏幕录像转换为可运行的原型

查看详情：https://github.com/abi/screenshot-to-code/wiki/Screen-Recording-to-Code

二、快速开始

该应用采用React/Vite前端和FastAPI后端架构。

需要准备的密钥：

• 支持GPT-4的OpenAI API密钥 或Anthropic密钥（可选）
• 建议同时准备两种密钥，以便对比Claude和GPT4o的生成结果

如需使用Ollama开源模型运行（不推荐，效果较差），查看详情：https://github.com/abi/screenshot-to-code/issues/354#issuecomment-2435479853

运行后端（使用Poetry进行包管理，若无则执行pip install 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

也可在前端设置对话框中配置密钥（加载前端后点击齿轮图标）。

运行前端：

cd frontend
yarn
yarn dev

访问 http://localhost:5173 使用应用。

如需更改后端端口，修改frontend/.env.local中的VITE_WS_BACKEND_URL。

调试模式下运行（避免消耗GPT4-Vision额度，使用预录响应）：

MOCK=true poetry run uvicorn main:app --reload --port 7001

三、Docker部署

在项目根目录执行：

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

应用将运行在 http://localhost:5173。注意此方式不支持开发模式，文件变更不会触发重建。

四、常见问题

1、后端设置报错如何解决？
参考方案：https://github.com/abi/screenshot-to-code/issues/3#issuecomment-1814777959，若仍无法解决请提交issue

2、如何获取OpenAI API密钥？
查看详情：https://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md

3、如何配置OpenAI代理？
若因地区限制无法直接访问OpenAI API，可尝试VPN或通过以下方式配置代理：

• 在backend/.env中设置OPENAI_BASE_URL
• 或在前端设置对话框中直接配置
• 确保URL路径包含"v1"，例如：https://xxx.xxxxx.xxx/v1

4、如何修改前端连接的后端地址？
配置front/.env.local中的：

• VITE_HTTP_BACKEND_URL
• VITE_WS_BACKEND_URL
  例如：VITE_HTTP_BACKEND_URL=http://124.10.20.1:7001

5、运行后端时出现UTF-8编码错误？
Windows系统请用Notepad++打开.env文件，选择Encoding → UTF-8

6、如何提交反馈？
可通过issue或Twitter联系：https://twitter.com/_abi_

五、示例展示

纽约时报页面

原图	生成结果

Instagram页面（非Taylor Swift图片）

https://github.com/abi/screenshot-to-code/assets/23818/503eb86a-356e-4dfc-926a-dabdb1ac7ba1

Hacker News页面
初次生成颜色有误，经调整后修正

https://github.com/abi/screenshot-to-code/assets/23818/3fec0f77-44e8-4fb3-a769-ac7410315e5d

伊织 xAI 2025-04-19（六）