← 返回工具库

AI 与产品构建

Screenshot to Code

截图一键生成前端代码

访问官方网站

工具简介

Screenshot to Code 是开源的界面复刻辅助项目:输入网页截图或视觉参考,模型尝试生成相应的前端页面代码。它主要解决“从视觉稿得到可继续编辑的代码草稿”这一环节。

核心能力

  • 根据截图生成 HTML、Tailwind、React 或 Vue 等形式的页面草稿。
  • 支持上传图像并通过迭代提示继续调整生成结果。
  • 可选择连接受支持的模型服务进行视觉理解和代码生成。
  • 提供自托管代码,便于开发者本地运行和改造。

适合场景

适合把静态参考图快速转成原型、比较不同模型的视觉还原能力,或作为手工搭建页面的起点。生成结果可帮助节省初始布局时间,但通常还需人工组件化和细节修整。

使用前须知

运行方式和模型接口依仓库版本而定,部署时要自行配置 API 凭证并承担相应使用成本。截图转代码并非像素级保证;检查字体、素材授权、断点、语义结构和交互行为。

官方资料