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

它是什么

screenshot-to-code 是 Abi Raja 做的开源应用。它的 README 说，它用 AI 把截图、设计稿、Figma 设计和屏幕录像转成干净、可用的代码。README 列出六种技术栈：HTML 加 Tailwind、HTML 加 CSS、React 加 Tailwind、Vue 加 Tailwind、Bootstrap，以及 Ionic 加 Tailwind。应用由 React 和 Vite 前端加 FastAPI 后端组成。两部分都由你自己运行，并加上你自己的模型密钥。制作方还运营一个托管产品，地址是 screenshottocode.com。

1. 你给它一张截图、设计稿、Figma 设计或录像
2. 后端请求你的密钥能用的那些模型
3. 它为某一种支持的技术栈写出代码
4. 装了 Chromium 的话，它能渲染页面并检查

适合谁

想从一张图得到页面初稿的前端开发者和设计师，以及想自己托管这个应用、再动手改它的人，适合用它。README 说，如果你想自定义、自己托管或参与贡献，本地运行最合适。如果你不想管理模型密钥，可以不用它。README 说托管版是不用在本地安装、最快的试用方式。

用在哪里

制作方的文档写了下面这些途径，工具包里每一种都有一页说明。

• 你的电脑：用 Poetry 和 uvicorn 运行的 FastAPI 后端，以及用 pnpm 运行的 React 前端
• Docker：docker-compose 构建并启动两部分
• 托管应用：制作方自己的产品，地址是 screenshottocode.com，工具包只给出指向它的说明

工具包还有 API 密钥与模型、Linux、Windows 和排错的页面。

如何设置

点“获取”会把一个装有 Mindket 安装说明的 zip 压缩包存进你的下载文件夹，上面每条途径都有一页。主要途径是在两个终端里分别运行后端和前端。

1. 从 GitHub 取得这个仓库。README 没有给克隆命令。
2. 在 backend 文件夹里，把密钥写进 .env，用 Poetry 安装，再启动 uvicorn。
3. 在第二个终端里，用 pnpm 安装前端并启动它。
4. 打开 http://localhost:5173。

README 的后端命令块，从仓库的根文件夹运行。只写你有密钥的那几行，并把每个占位符换成你的真实密钥。

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
echo "ANTHROPIC_API_KEY=your-key" >> .env
echo "GEMINI_API_KEY=your-key" >> .env
echo "REPLICATE_API_KEY=r8_your-key" >> .env
poetry install
# Install the Chromium browser used by the screenshot preview tool.
# On Linux, use `poetry run playwright install --with-deps chromium` to also
# install the required system libraries (needs sudo/apt).
poetry run playwright install chromium
poetry env activate
# run the printed command, e.g. source /path/to/venv/bin/activate
poetry run uvicorn main:app --reload --port 7001

前端命令块，同样从根文件夹运行，放在第二个终端里。

cd frontend
pnpm install
pnpm dev

如何使用

打开 http://localhost:5173。README 没有给出一步步点击的使用说明。它说，你可以在设置对话框里（齿轮图标后面）添加 OpenAI、Anthropic 和 Gemini 的密钥，这个对话框还会显示你的后端能不能用截图预览。仓库的简介说了这个应用的用途：放进一张截图，把它转成干净的代码。

示例

你有一张页面截图，想要它的代码。在你自己运行的几条途径里，Docker 步骤最少。在仓库的根文件夹里运行，把占位符换成你真实的 OpenAI 密钥：

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

打开 http://localhost:5173，把你的截图交给应用。README 说，这种方式下不能做开发，因为文件改动不会触发重新构建。它的示例展示了 NYTimes 页面、Instagram 页面和 Hacker News 页面。

新手与专家

新手：模型读你的图片，写出代码。screenshot-to-code 是围着这一步搭的应用，本身不带模型。你要加上 OpenAI、Anthropic 或 Gemini 这类提供商的密钥。Troubleshooting 页面是为 GPT-4 Vision 的使用权限写的，它说要先买点数（最少 5 美元），并升到 Tier 1。你的账号现在需要什么，请看 OpenAI 自己的页面。来源里没有写其他提供商的价格。密钥是和你账号绑定的一长串秘密字符，别把它放进任何你要分享的东西里。.env 文件是每行为 KEY=value 的纯文本文件：本地途径放在 backend 文件夹里，Docker 途径放在仓库的根文件夹里。先用一个密钥、一张截图开始。

专家：后端是 FastAPI 应用，由 uvicorn 在 7001 端口提供服务，README 的命令里带着 --reload。前端通过 VITE_WS_BACKEND_URL 连接它，frontend/.env.example 把它设为 ws://127.0.0.1:7001，另外还有 VITE_HTTP_BACKEND_URL。后端运行在别处时，把两个都设在 frontend/.env.local 里。

密钥越多，应用为每个变体挑选的模型组合越强。只有一个密钥时，它只用那家提供商的模型。Gemini 负责资源提取，也就是复用你截图里真实的 logo 和图片。没有 Replicate 密钥的话，edit_images 和 remove_backgrounds 这两个工具就不能用。

要用 OpenAI 代理，就在 backend/.env 或设置对话框里设置 OPENAI_BASE_URL，路径里要带 v1。README 说 Ollama 模型也能运行它，但因为效果不好而不推荐，并附了一条 issue 评论的链接，步骤在那里。

注意事项

你的截图会从后端发给你添加了密钥的那些模型提供商。

• 密钥：保存在设置对话框里的 OpenAI 密钥，按 Troubleshooting 页面的话说，“only stored in your browser”，也就是只存在你的浏览器里。Replicate 的密钥不能在设置对话框里设置：README 说它“must be configured in backend/.env as REPLICATE_API_KEY”
• 使用数据：README 没有说应用会不会发送。后端的 pyproject.toml 列了 langfuse，README 没有解释它
• 托管应用：Troubleshooting 页面说，想用托管版的话，建议在 screenshottocode.com 买付费订阅（“we recommend getting a paid subscription on screenshottocode.com”）。工具包没有读过它自己的页面，所以不会给出具体价格、条款，也不会说它怎么处理你的截图
• 模型：README 在两处列了模型，两份列表不一样。模型名称变得很快，请看它当前的列表
• Docker：文件改动不会触发重新构建，所以这条途径只用来运行应用，不用来开发
• 平台：README 没有给 macOS 的步骤。它唯一的 Windows 事项是：运行后端时遇到 UTF-8 错误，就用 Notepad++ 打开 .env 文件，在 Encoding 菜单里选 UTF-8
• 版本：README 描述的是 main 分支。工具包读它的日期是 2026 年 11 月 3 日
• 支持：Troubleshooting 页面说，支持只覆盖开源版本，因为托管版没有调试日志
• 卸载：README 没有给出更新或卸载的步骤
• 许可证：MIT。LICENSE 文件写的是“Copyright (c) 2023 Abi Raja”