screenshot-to-code｜截图与设计稿转前端代码

工具介绍

screenshot-to-code把截图、设计稿或录屏交给模型生成前端代码草稿，官方列出HTML、Tailwind、React和Vue等技术栈。生成结果需要开发者审查与适配，不应直接替换生产代码。

解决什么问题

把视觉稿手工还原成前端代码，重复、耗时且容易走样。该工具用 AI 把截图、mockup、Figma 设计、屏幕录制直接转成可用代码，减少重复劳动。

核心功能

截图与设计稿转代码；按技术栈生成页面草稿；录屏转交互原型；多模型选择；可自托管的前后端与Docker路线。模型可用性及输出能力以当前版本和接口权限为准。

适用人群

有前端代码审查能力的开发者，以及需要快速表达原型的设计师和产品人员。

使用场景

将自己的设计稿转为页面原型；比较布局实现；制作内部评审演示。仅使用拥有权利的参考图，不能照搬品牌素材或把生成结果当作已验收成品。

安装与使用

根据官方README分别准备后端模型密钥、Python/Poetry环境和前端pnpm环境，或按官方Docker路线启动。密钥只保存在受控配置中，不提交到代码仓库。具体启动命令、模型版本与可选依赖按当前原文核对，本站未安装。

费用与许可说明

仓库软件为MIT许可；模型API、图像服务和官方托管产品的额度与费用另计，不保证零成本或无需账号。

国内使用条件

官方文档主要介绍第三方模型API；具体国内模型的兼容方式、国内网络与接口稳定性待核查。自托管前后端不等于推理已在本机运行。

使用限制与风险

参考图和代码可能传送到所选模型服务，需检查隐私与素材授权。生成代码需审查安全、依赖、可访问性和目标框架适配；不会自动成为Blade或Livewire组件。未查询到最新Release不等于没有更新，开发分支与模型名称应以当前原文核对。

常见问题

能直接用于正式网站吗？应先审查和测试。能直接当Blade组件吗？不能，应按目标技术栈重新适配。能完全离线吗？不作此保证，取决于所选模型与依赖。

来源与核验状态

原始仓库：https://github.com/abi/screenshot-to-code 官方资料采集时间：2026-11-10 07:06:59；README与许可证路径：README.md、LICENSE。 本次读取的软件许可：MIT；第三方组件、模型、字体、素材及托管服务条款需分别核对。本文经AI辅助整理与文档复核，未进行安装、性能、国内网络或安全实测。