先看结论
- 软件免费，token 不免费。abi/screenshot-to-code 是 MIT 协议，自己装自己跑不花钱，但它至少需要一个模型密钥——OpenAI、Anthropic 或 Gemini，按 token 向那家付费。
- DeepSeek 不在它的模型清单里。README 的默认模型是 Gemini 3 Flash / 3.1 Pro、GPT-5.5 / 5.4 Mini 和 Claude Opus 4.6 / 4.8，整个仓库里搜不到 "deepseek" 这个字符串。
- DeepSeek 的视觉模型就是 deepseek-flash：官方定价表里 Vision 一栏，flash 打勾，deepseek-v4-pro 写着「Not supported」。图片可以用 base64、公网链接或 Files API 的 file_id 三种方式送进去。
- 两条路的终点一样——一个双击就能在浏览器打开的 HTML 文件。按 DeepSeek 公布的 Flash 价格，一张截图加几千 token 的代码，成本远不到一美分。
Install Screenshot-to-Code Locally — Convert Screenshot to Functional Code
频道:Fahd Mirza9:38
DeepSeek R1 Coding — Testing Screenshot to Code Conversion
频道:United Top Tech3:06
abi/screenshot-to-code README — supported stacks, required keys, Docker
文档:github.com/abi/screenshot-to-codeDocs
DeepSeek API Docs — Vision (base64, external URL, Files API)
文档:api-docs.deepseek.comDocs
DeepSeek API Docs — Models & Pricing (the Vision row)
文档:api-docs.deepseek.comDocs
配图来自两支干净的屏幕录制（无摄像头浮窗、无烧录字幕）；支持的技术栈、所需密钥、Docker 命令和 DeepSeek 图片限制，均对照 abi/screenshot-to-code 的 README、仓库源文件与 api-docs.deepseek.com 核实。
截图署名录制频道，每一步都深链到对应时间戳。两支录屏都早于 DeepSeek 现行的模型命名，因此画面里的旧标签与正文不一致时，正文以官方文档为准。
全部 15 步：从一张截图到一个能打开的页面
先有一张截图
- 1
截下你要还原的那块界面
任何静态图都行——转换器自己的演示用的是一个 YouTube 频道页，下文 DeepSeek 那条路用的是一张 68 KB、存成 log.PNG 的登录框设计稿。截图比文字描述强，因为间距、配色和层级已经定好了，模型是去读而不是去猜。只截你在意的那个组件，整屏截图等于把 token 花在待会儿要删掉的边框上。
起点：一张存成 PNG 的登录卡片设计稿，还没开始转换。看这一段 1:02 - 2
打开转换器，看清它的四种输入方式
本地装好后访问 http://localhost:5173，你会看到一个上传框加三条捷径：Record Screen（录一段正在跑的网页）、Enter URL 配 Capture（让工具自己去截图）、以及 Import from Code（贴进已有 HTML 继续改）。Generating 下拉框选输出栈——HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap 或 Ionic + Tailwind。全程不需要账号，工具直连你自己的模型服务商。
自托管版本的门面：拖拽区、录屏、URL 截图和代码导入。看这一段 4:00
装好免费的开源转换器
- 3
装之前先确认系统环境
这个应用是 React/Vite 前端加 FastAPI 后端，走 Docker 这条路需要一个能用的 Docker Engine。Fahd Mirza 先用 cat /etc/*release 确认机器——这里是 Ubuntu 22.04.4 LTS——因为后面的命令都假设有 POSIX shell 和可用的 docker compose。macOS 和 Windows 一样行，只要 Docker Desktop 在跑。
两秒钟的环境确认：Ubuntu 22.04.4 LTS，背后是 Docker Desktop。看这一段 2:12 - 4
克隆仓库，把一个密钥写进 backend/.env
执行 git clone https://github.com/abi/screenshot-to-code，进入目录，把密钥写进 compose 读取的 .env 文件——README 原文那行就是 echo "OPENAI_API_KEY=sk-your-key" > .env。起步一个密钥就够；README 认的是 OpenAI、Anthropic、Gemini 三家，多配几家能让工具在每次生成时挑更强的模型组合。DeepSeek 不在这个名单里，原因见常见问题第 2 条。
照 README 原样写入占位密钥，后端启动时就读这个文件。看这一段 2:55 - 5
一条命令构建并启动两个容器
在仓库根目录执行 docker compose up -d --build，它会拉基础镜像、给后端装 Poetry、给前端装 yarn 依赖，然后把两个服务挂在后台。冷缓存要等几分钟：compose 文件把后端映射到 7001 端口、前端映射到 5173 端口。README 提醒这条路径是用来跑而不是用来开发的，改文件不会触发重新构建。
整个安装就一条命令；加 -d 可以后台运行，终端关掉也没事。看这一段 3:25 - 6
盯着前后端的构建日志
出问题时有用的正是这段日志：backend 2/7 RUN pip install "poetry==1.4.1" 和 frontend 4/5 RUN yarn install 这两层，最容易在代理或内网环境里挂掉。如果卡在这里，要修的通常是 Docker 的 DNS 或者 npm 镜像，而不是应用本身。最后一层跑完，localhost:5173 就有响应了。
构建 20 秒，两个镜像都已经过了依赖安装那一层。看这一段 3:45
转换、保存、继续改
- 7
把截图拖进去
把文件拖到虚线框上，或者点一下弹出选择器；图片会以 ORIGINAL SCREENSHOT 出现在左侧栏，并在后面每一次改版时都留在那里当参照。深色还是浅色是齿轮图标里的偏好设置，不影响功能。那个齿轮弹窗也可以直接贴密钥、不用改 .env——README 写明在这里填的密钥只存在你的浏览器里，并且会覆盖 .env 的配置。
同一个应用的深色主题，正等文件拖进来——拖拽区几乎就是全部界面。看这一段 4:45 - 8
生成，并对比多个变体
工具对同一个提示会跑多个模型，这样你是挑一个结果而不是被迫接受第一个：Option 1 和 Option 2 就是同一张截图的两个标签页，而变体数量由 backend/config.py 里的 NUM_VARIANTS 决定——图片输入是 4 个，视频输入是 2 个。代码是一边生成一边流进侧栏的，方向不对可以按 Cancel 中止。每一次生成都存在 Versions 里，随便试不会丢东西。
同一张截图的两个变体，正在流式输出，下面钉着原图。看这一段 5:00 - 9
三种看法：桌面、手机、源码
预览区上方有三个开关——Desktop、Mobile 和 Code，交接时真正要用的是 Code，它给你能直接复制的原始标记。Reset 丢弃这次结果，Download 导出，变体下方还有 Update（再下一条指令）、Regenerate（重跑同一条）和 Select and update（框选要改的区域）。到这一步，截图转代码才从演示变成一个可反复修改的编辑循环。
还原出来的页面，旁边就是继续改它的那排控件。看这一段 5:20 - 10
把代码存成一个普通的 .html 文件
从 Code 标签页里把代码复制到文件——这里就是 mycode 目录下的 test.html——整个「构建」过程到此为止。输出是自包含的 HTML 加 Tailwind 类名，中间既不需要装包也不需要起开发服务器。如果你想把它放进真实的组件树，就改成贴进 React 或 Vue 文件，并在那边重新对接类名。
一个文件，3.1 kB，右键用 Firefox 打开。看这一段 5:40 - 11
直接从本地打开，看看什么留住了
用文件系统路径直接加载，就能证明产物不需要任何后端服务。然后诚实地拿它和左侧的 ORIGINAL SCREENSHOT 对比：布局、字体层级和间距通常还原得不错，被「近似」处理的是第三方 logo 和照片——这正是 README 强烈建议配 Gemini 密钥的原因（它负责素材抽取，把截图里真实的图片抠出来复用），以及建议配 Replicate 密钥的原因（图像生成与去背景）。缺什么就再补一条指令，不必推倒重来。
页面在本地文件系统里跑起来了，频道横幅和头部都重建了出来。看这一段 6:12 - 12
用追加指令微调，而不是重新生成
在变体下方的输入框里写清楚要改什么——这里是「change the background color to deep blue」——工具产出的是新版本而不是新页面，于是 Versions 里同时留着 Create v1 和作为 v2 的这次修改。勾上 Include screenshot of current version? 会把当前渲染结果一起发过去，这正是防止一次微调把布局拽回通用样式的方法。这个循环才是值得装它的理由。
一条指令之后，修改版存成了 v2，v1 仍然一键可回。看这一段 6:45
第二条路：让 DeepSeek 看图
- 13
第二条路：把截图交给 DeepSeek
如果你什么都不想装，DeepSeek 的聊天产品可以直接收图：回形针按钮加上 log.PNG，输入框里显示它是一个 68.14KB 的附件，指令就一句话——「give me html and css code for this image in a single html file」。这段录屏里的模型标签写着 DeepThink (R1)；选择器里的名字改得比教程快，所以请相信机制而不是标签。拿回来的就是一个能直接粘贴打开的文件。
截图已经附在 DeepSeek 聊天框里，下面写着「合成一个 HTML 文件」的要求。看这一段 1:22 - 14
先看它的计划，再看代码
思考面板是判断模型到底看没看图的地方：它逐条列出 Login 标题、User Name 和 Password 两个标签、两个输入框和 Submit 按钮，然后决定用 flexbox 配 justify-content 与 align-items 居中、高度设成 100vh。还原结果不对时，要看的就是这一段——跳过标签的模型，交回来的表单也不会有标签。展开它，如果描述有偏差，就重新裁一次截图再发。
十秒思考：模型把它打算复现的每个元素都点了一遍名。看这一段 1:45 - 15
预览完，把代码取出来
DeepSeek 会用自己的预览弹窗渲染答案——重建出的登录卡片是标签在上、两个输入框、一个通栏蓝色 Submit 按钮，底下标着「AI-generated, for reference only」。它是简化版而不是复刻：设计稿里的渐变光斑和输入框图标都没了。把 HTML 复制出来存成 index.html 打开就行，和第 10、11 步完全一样。也要说清楚：DeepSeek 的聊天产品和它的 API 都收图片，但纯文本的生成器——包括本站自己的 artifact 生成器——不收，在那类工具里请用文字描述界面，别指望它看见你的截图。
DeepSeek 预览里的重建卡片：够接近可以接着做，也够简化需要你去核对。看这一段 2:48