单片机综合项目实战：超声波测距与实时时钟报警系统设计
2026/8/29 12:07:57
Screenshot to Code 截图转代码完整指南：5分钟把一张界面图变成可运行的 HTML/React
【免费下载链接】screenshot-to-codeDrop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)项目地址: https://gitcode.com/GitHub_Trending/sc/screenshot-to-code
Screenshot to Code（screenshot-to-code）是一个免费开源项目，核心功能就一句话：丢进一张界面截图，它自动还你一份干净的 HTML/Tailwind、React 或 Vue 代码。支持 HTML+Tailwind、HTML+CSS、React+Tailwind、Vue+Tailwind、Bootstrap 等 6 种技术栈，连录屏都能转成可交互原型。适合"照着别人的界面做一个同款"或"把设计稿快速落成页面"这类需求。
场景钩子：设计稿躺在桌面三天没动的时刻
你大概经历过这种循环：产品给了张截图，说"就按这个做"；你打开编辑器，从<!DOCTYPE html>开始，量间距、猜字号、对齐按钮，一小时过去了，页面还差一半。如果对方是竞品页面或者一张 Figma 导出图，这种"手工临摹"的活一天能干三份——而它本来可以压缩到一杯咖啡的时间。下面这个开源项目，干的就是这件事。
一句话定位：一个"看得懂设计稿的翻译官"
把 Screenshot to Code 想成一位翻译：你递给它一张图片（"外语"），它还你一段能跑的代码（"中文"）。它靠多模态视觉模型识别截图里的布局、文字、颜色和图标位置，再按你选的框架输出代码。和手写相比，它的产出约九成可复现原始布局，剩下的一成——交互逻辑、真实文案、图片素材——仍需你自己补，但骨架和样式这块最磨人的活儿它包了。
最快跑通步骤：三步，约 5 分钟
你拿到的是一个本地可跑的前后端应用：FastAPI 后端 + React/Vite 前端。前提只有一条——至少申请一个模型服务商的 API Key（OpenAI、Anthropic、Gemini 三选一，Gemini 官方最推荐，能复用截图里的真实图片资产，视频模式也依赖它）。
第 1 步：克隆仓库并写入 Key
git clone https://gitcode.com/GitHub_Trending/sc/screenshot-to-code cd screenshot-to-code/backend echo "GEMINI_API_KEY=your-key" > .env # 换成你的任意一个 Key第 2 步：启动后端
cd backend poetry install poetry run python start.py # 默认监听 7001 端口第 3 步：启动前端，打开浏览器
cd frontend pnpm install pnpm dev浏览器访问http://localhost:5173即可。上传截图 → 右侧设置面板选输出格式（HTML/React/Vue）和 Tailwind 版本 → 点生成，十几秒到半分钟出代码，右边预览窗直接渲染效果。
实战效果：一张登录页截图变成 200 行 Tailwind 代码
举个贴近日常的例子：竞品改了登录页，产品让你"先复刻一版"。你截一张登录页的图丢进去，选 HTML + Tailwind，30 秒后得到的不是截图那种死板还原，而是一份结构化的代码：左栏品牌区用 flex 布局、右栏表单用w-96固定宽度、按钮圆角和阴影的 class 都对应上了原始间距。再切到 React + Tailwind 生成一遍，同样的界面变成了带useState的组件，表单输入框已经拆成可控组件。
值得留意的是，后端还会把 agent 生成的页面在 headless 浏览器里渲染一次、"看一眼自己的作业"再修正（poetry run playwright install chromium即可启用），所以输出的排版错乱率比"盲写"低不少。想继续深挖模型与生成链路，可以看 backend/agent/providers/（各模型适配层）和 backend/routes/generate_code.py（核心生成接口）。
避坑清单：问题 → 对策
新手最容易卡在这几处，按"现象 → 处理"整理：
- 后端起不来或提示端口占用：
start.py会自动在 7001 起往上找空闲端口；若换过端口导致前端连不上，在frontend/.env.local里设VITE_HTTP_BACKEND_URL和VITE_WS_BACKEND_URL指向新地址。 - 生成失败或报权限错误：检查
.env里 Key 是否写对、账号是否有余额；Windows 下.env被存成非 UTF-8 会直接报错，用编辑器转存为 UTF-8 再试。 - 生成代码不完整、元素缺失：截图别贪大，裁到关键区域重新传；元素边界清晰、界面干净的图，还原度明显更高。
- 样式错乱：优先在设置里确认 Tailwind 版本与目标项目一致；仍不对就手动微调 class。AI 生成的是"外观"，交互逻辑（点击、请求、校验）需要自己补——这是所有同类工具的通病。
- 本地跑得慢或想换模型对比：复杂页面可以分区域生成再拼；多配几个服务商的 Key，工具会自动为不同变体挑选更强的模型组合。更详细的排查步骤见 Troubleshooting.md。
值不值得试：给新手的一个判断
判断标准很简单：如果你一周里有哪怕一次"照着截图/设计稿手搓页面"的活，这个工具就回本了——省下的不是 100% 时间（补交互、换素材还是你的活），而是最枯燥的那 70%：量布局、写 class、对间距。它免费、开源、本地自托管，Key 成本按调用计费，对低频用户几乎可以忽略。现在就 clone 下来，挑一张你最近想复刻的界面截图，5 分钟跑通，效果如何你自己看。
【免费下载链接】screenshot-to-codeDrop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)项目地址: https://gitcode.com/GitHub_Trending/sc/screenshot-to-code
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考