screenshot-to-code 是一个用于将截图转换成（HTML/Tailwind/React/Vue）简洁代码的工具。它刚上线的时候就🔥火爆全网，目前的 Star 数高达 52.7K。
最近它又上线了一个实验性的新功能，可将录制的网站操作视频转化为可交互的功能原型。
近期热文
超强 OCR 新秀：支持 90 多种语言，性能超越云服务！
当 AI 遇上爬虫：让数据提取变得前所未有的简单！
2024 年最完整的 AI Agents 清单来了，涉及 13 个领域，上百个 Agents！
7.8K Star RAG 引擎：基于深度文档理解，最大程度降低幻觉、无限上下文快速完成 “大海捞针” 测试！
screenshot-to-code 功能
支持的 AI 模型
GPT-4O（最好的模型）
GPT-4 Turbo (Apr 2024)
GPT-4 Vision (Nov 2023)
Claude 3 Sonnet
DALL-E 3（文生图模型）
支持的技术栈
HTML + Tailwind
React + Tailwind
Vue + Tailwind
Bootstrap
Ionic + Tailwind
SVG
screenshot-to-code 使用示例
NYTimes
Hacker News
screenshot-to-code 快速上手
该应用程序前端是使用 React/Vite 和后端是使用 FastAPI。您需要一个 OpenAI API 密钥，该密钥可访问 GPT-4 Vision API。如果您想使用 Claude Sonnet 或支持实验性的视频生成可交互原型的功能，还需要一个 Anthropic 密钥。
运行后端程序
cd backendecho "OPENAI_API_KEY=sk-your-key" > .envpoetry installpoetry shellpoetry run uvicorn main:app --reload --port 7001
如果要使用 Anthropic，请将 ANTHROPIC_API_KEY 添加到 backend/.env，并在其中加入 Anthropic 的 API 密钥。
运行前端程序
cd frontendyarnyarn dev
当成功启动后，你可以在浏览器打开 http://localhost:5173 地址来访问该应用。
如果后端使用的是不同的端口，请更新 frontend/.env.local 中的 VITE_WS_BACKEND_URL。
出于调试目的，如果您不想浪费 GPT4-Vision credits，可以在 Mock 模式下运行后端（该模式会流式传输预先录制的响应）：
MOCK=true poetry run uvicorn main:app --reload --port 7001
Docker 环境部署
如果系统上安装了 Docker，请在根目录下运行
echo "OPENAI_API_KEY=sk-your-key" > .envdocker-compose up -d --build
之后，应用程序将被启动并运行在 http://localhost:5173。
注意：您无法使用此设置开发应用程序，因为文件更改不会触发重建。
https://github.com/abi/screenshot-to-code
往期文章
自动化爬虫神器：把网页转成大模型所需数据，助力 AI 应用与大模型训练全面优化！
3 款强大的开源低代码 LLM 编排工具，可视化定制专属 AI Agent 和 AI 工作流！
25.4K Star 低代码LLM编排工具：终于支持 Multi Agent，内置 5 大 Multi Agent 开箱即用！
Kimi+麦肯锡，5 秒摸透一个行业！
Kimi 10 秒生成流程图，别再手动绘图了！
万字长文秒变精华！Kimi 的超强提示词秘籍
欢迎您与我交流 AI 技术/工具
关注 AI 真好玩，带你玩转各类 AI 工具，掌控数字未来！
如果这篇文章对您有所帮助，请点赞、关注，并分享给您的朋友。感谢您的支持！