AI 的不断进化给代码开发带来了革命性的效率提升，同时大大降低了编程开发的门槛。

给出一张设计图，甚至只是一张网站的截图，就能一键生成对应的前端代码，这在以前是仿佛天方夜谭一般。但如今在 AI 大模型的加持下，这一切都有可能成为现实。

Screenshot-to-Code 项目借助 LLM 的强大能力，为人们提供了一种前端开发的全新可能。

简介

Screenshot-to-Code 是一个能够将截图、线框图以及 Figma 设计转换为可用代码的工具，代码仓库位于
https://github.com/abi/screenshot-to-code。该项目支持 Claude Sonnet 3.5、GPT-4o、Gemini 2.0 Flash 等模型，并利用 DALL-E 3 或 Flux Schnell 进行图像生成。

Screenshot-to-Code 涵盖了多种前端技术栈，包括 HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap、Ionic + Tailwind 以及 SVG 等。此外，该项目还增加了对视频 / 屏幕录制转换为功能原型的实验性功能的支持，为开发者提供了更多的可能性。

使用

Screenshot-to-Code 可以在本地运行，应用由一个 React/Vite 的前端和一个 FastAPI 后端组成。运行应用需要 API Key，可以提供能访问 GPT-4 的 OpenAI 的 API Key。对于使用 Ollama 开源模型的，也可以改变环境变量来实现，把以下命令加入到 backend/.env 中：

export OPENAI_BASE_URL="http://localhost:11434/v1"
export OPENAI_API_KEY=fake-key

然后创建模型的别名给 Screenshot-to-Code 使用：

for model in \
   claude-3-5-sonnet-20240620 \
   gpt-4o-2024-05-13 \
   gpt-4-turbo-2024-04-09 \
   gpt_4_vision \
   claude_3_sonnet; do
   ollama cp x/llama3.2-vision $model
done

可以把 x/llama3.2-vision 修改为任意的本地模型使用。

配置 Key 或模型后，运行后端。后端是 Python 的 FastAPI，可以使用 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

后端运行起来后，再运行前端，使用 yarn：

cd frontend
yarn
yarn dev

前后端都运行起来后，在浏览器访问 http://localhost:5173，就能使用该工具了。

如果需要进行 Debug，则可以使用 mock 模式了避免对 GPT 模型的调用：

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

如果想要更为独立的部署，也可以使用 Docker：

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

工具使用简单，只需上传一张网站的截图，或者录制一段网页的使用视频，然后选择所需的前端技术栈，以及使用的 LLM 模型，点击 “Generate”，稍等片刻，就能产出所需的前端代码，能几乎完美复刻原有的网页。

总结

Screenshot-to-Code 项目为前端开发提供了一种高效、便捷的代码生成方式，大大减少了开发者手动编写代码的工作量，更为没有太多前端开发经验的人们大大降低了开发门槛，使网页开发变得不再遥不可及。

Screenshot-to-Code 不仅适用于个人开发者快速实现原型，也适用于企业团队提高开发效率。在未来，随着 AI 技术的不断发展，Screenshot-to-Code 有望在更多领域得到应用，为网页前端开发带来更多的便利和创新。