截图生成网页代码教程:用 screenshot-to-code 把设计图转成 React 页面
- 2026-09-26 07:31:15
AI 实用教程
截图生成网页代码：把设计图推进到 React 页面
screenshot-to-code 上手指南：选技术栈、跑通本地环境，再把初稿改成可维护的页面。
CONTENTS
它不是替代前端开发，而是把重复的搭架子工作先做掉。
做前端时，最花时间的往往不是写出第一行代码，而是把一张设计图拆成可维护的页面结构。标题区怎么排、卡片怎么分组、移动端如何收缩，光是搭好第一版骨架，就够消耗半天。
开源项目 screenshot-to-code 提供了另一种起点：上传截图、设计稿、Figma 画面，甚至一段网页录屏，让 AI 生成可以继续修改的初版代码。
它的输入不只是一张网页截图。网页截图、UI mockup、Figma 设计画面和网页操作录屏，都可以拿来生成代码。
可选输出技术栈
HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap，以及 Ionic + Tailwind。
录屏模式的意义不只是还原静态页面，也可以尝试复现页面切换、弹窗这类流程，做出一个能继续开发的原型。不过别把它当成能直接上线的完整产品。数据接口、权限、异常状态、无障碍和响应式细节，仍要人工检查。
第一次用，建议先走在线体验。它省掉前后端环境配置，适合先判断自己的截图或设计稿能不能得到可用结果。
在线体验
适合先验证截图到代码的效果，不必先处理本地环境。
本地部署
适合接自己的 Key，调整模型和生成流程。
注意
本地部署不等于完全免费。项目至少要配置一个模型供应商的 API Key；素材提取、录屏和图片编辑等能力还可能产生额外服务成本。
官方项目分前端和后端。准备好 Git、Node.js、pnpm、Python 和 Poetry 后，先把仓库克隆到本机。
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code
启动后端
cd backend
poetry install
poetry run playwright install chromium
poetry run uvicorn main:app --reload --port 7001
另开终端，启动前端
cd frontend
pnpm install
pnpm dev
前端默认地址是 http://localhost:5173。启动前按项目环境变量说明填入至少一个模型供应商的 Key。先跑通一条生成链路，再按需要补其它服务，排错会轻松很多。
测试素材最好是一张自己拥有版权的落地页截图或设计稿，里面有标题、按钮、图片和两三组卡片就够了。不要一上来就扔进一个结构复杂的后台系统。
如果团队实际使用 React + Tailwind，就直接选这个输出目标，而不是先生成 HTML，再手工迁移一次。
根据截图生成 React + Tailwind 页面，保留布局层级、主要间距和按钮区域。图片使用占位内容，不要复制任何第三方品牌素材。
第一轮只看三件事
页面整体结构有没有拆对；重复卡片能不能变成组件；图片、图标和字体是否能替换成自己的合法素材。
比较稳妥的心态，是把生成结果当成一位初级前端同事交来的初稿。先用它省掉重复搭建，再回到工程质量本身。
先调布局。 处理容器宽度、栅格、留白、字体层级和移动端断点。
再整理组件。 把重复卡片、导航和按钮状态接入已有设计系统。
最后补功能。 表单校验、接口状态、错误提示、键盘操作和无障碍属性，都不能只靠截图猜。
若要参考已有网站，只参考信息架构和交互思路。Logo、图片、文案和受版权保护的设计素材不要直接搬运。它最适合自己的设计稿、获得授权的原型，或内部快速验证。
截图越复杂，结果不一定越完整
复杂页面里有大量隐藏状态和业务规则，单张截图根本看不出来。拆成多个清晰的局部截图，往往比上传一张长图更稳定。
模型成本要在测试前算进去
不同模型的价格和效果差异很大。先用少量素材测输出质量，再决定是否接入更昂贵的模型，别让反复重试变成一笔意外开销。
本地小模型不等于同样的还原度
项目文档也提示，使用 Ollama 这类本地开源模型时，输出质量通常不如推荐的云端模型。目标是快速得到可用页面，先从支持较好的模型开始，通常更省时间。
写在最后
最值得尝试的场景，是把自己的设计稿尽快推进到浏览器里能跑起来的阶段。
对独立开发者，它适合把想法快速做成可点、可改的原型；对产品和设计同学，它能让评审不只停在静态图；对前端团队，它可以减少重复搭界面的时间。
先拿一张简单页面试试。生成的代码未必完美，但它能让你更早开始修改和验证，这就已经很有价值了。
我是 Dennis
持续记录 AI 工具、Agent 工作流和可上手的开发实践。
你更常遇到设计稿转代码，还是已有页面重构？
