完蛋,GitHub 70000+ star,我把你(AI)当朋友,你却要代替我,前端同学这下彻底蹦不住了,真的不留一点活路!!!

简介: Screenshot-to-Code 是一款 AI 驱动的开源工具,能将截图、Figma 设计稿或录屏内容快速转化为前端代码。支持 HTML、React、Vue 等多种技术栈,适配 GPT-4 Vision、Claude Sonnet 等 AI 模型,具备视频转原型、本地部署、高精度识别等功能,助力设计快速迭代与开发提效。

嗨,我是小华同学,专注解锁高效工作与前沿AI工具!每日精选开源技术、实战技巧,助你省时50%、领先他人一步。👉免费订阅,与10万+技术人共享升级秘籍!

Screenshot to Code 是一个 AI 驱动的开源工具,用于将截图、Figma 设计稿甚至屏幕录制内容,迅速转换为干净的、可用的前端代码。它支持多种技术栈,搭配 GPT‑4 Vision、Claude Sonnet、DALL‑E 3,实现了从视觉到代码的桥梁 。

应用场景

  • 设计快速迭代:UI 产出图快速成型页面,缩短设计开发交接周期。
  • Hackathon 快速建站:临时展示页、Demo、PPT 页面生成利器。
  • 样式迁移改造:将 Bootstrap 布局改为更现代的 Tailwind/React 版本。
  • 教育学习辅助:了解前端结构,拿到示例代码模仿练习。
  • UI设计→一键代码转换:从 Figma、Photoshop 或手绘 mockup,快速产出页面原型。
  • 旧站改版复原:将已有页面截图,重构现代前端框架版本。
  • 快速原型验证:从产品经理图纸直接生成可运行 HTML,以便快速演示。
  • 开源作品参考学习:获取干净示例代码,学习排版结构。

核心功能

  • 多语言多框架支持:HTML + Tailwind、React + Tailwind、Vue + Tailwind、Bootstrap、Ionic、SVG 等
  • AI 模型多选:支持 Claude Sonnet 3.7、GPT‑4o;可对比输出效果
  • 视频转原型:可将 30s 录屏拆帧,生成动态原型代码
  • 本地运行 & Mock 模式:离线部署,不怕费用无限制;并支持 mock 模式节省调用成本
  • 高精度输出:经实测表单、Bootstrap 布局辨识率高,视觉识别准确
  • 自定义 Prompt 轻松上手:改写 prompts.py 支持如 Ant Design、Tailwind 混搭格式
  • 生成 SVG 协助占位图形:内置 DALL‑E 3 随机占位图生成
  • 适配 UI 复杂度高:实测多控件表单、电商卡片等布局切图效果优异

技术架构图

架构及优势

模块 技术栈 优势总结
前端 React + Vite 热重载、实时预览,UX 流畅
后端 FastAPI + Python + Poetry 快速启动、自包含依赖管理
AI 模型 GPT‑4 Vision / Claude Sonnet 超强视觉 + 代码理解能力
支持架构 多种前端栈输出 满足不同开发者需求
视频支持 录屏拆帧分析输入 原型生成更生动
可扩展 prompts prompts.py 模块化编写 DIY 干预能力强

界面演示

与同类项目对比

项目 输入形式 输出技术栈 本地运行 视频支持 AI 模型 优势
abi/screenshot-to-code 截图、mockup、录屏 HTML/CSS/Tailwind/React/Vue/Bootstrap/Ionic/SVG GPT4‑Vision / Claude Sonnet 覆盖面广、支持视频、AI 模型强、易扩展、社区活跃(70K★)
emilwallner 扩展版 截图 HTML + Bootstrap pix2code NN 专注 Bootstrap,精度高(~97%)
OmniGPT / Veo3 类型 截图 + 设计优化建议 HTML/CSS + Tailwind ❌(服务型) 私有 GPT/LLM 帮助设计优化,非本地开源

小结

Screenshot‑to‑Code 真正实现了“AI 助力前端开发”的落地:上手简单、功能强大、可本地部署、自定义方便,尤其视频转原型功能填补了空白。 即便只是开发者工具,也能帮助快速生成干净结构,用来学习、制作 Demo、提效改版都非常给力。

项目地址

https://github.com/abi/screenshot-to-code

相关文章
|
1月前
|
人工智能 安全 文件存储
炸裂!Github 6000+ star 开源免费易用,支持1000+格式转换,值得收藏!
ConvertX 是一款开源免费的在线文件转换工具,支持超过 1000 种格式转换,涵盖视频、文档、图像、3D 模型等。基于 FFmpeg、Pandoc 等强大组件,提供高效、私密的转换服务。支持 Docker、NAS 自托管部署,界面简洁,操作便捷,适合多场景使用,已在 GitHub 收获 6000+ Star,值得收藏和使用。
213 0
|
1月前
|
JSON Kubernetes 安全
找到啦,我们已上车,Github 27000+ star,研发团队必备开源工具项目,真丝滑!!!
Trivy 是一款高效灵活的开源安全扫描工具,支持容器镜像、文件系统、Kubernetes 等多目标扫描,具备快速、易用、集成性强等特点,适用于 DevSecOps 全流程安全检测。
|
1月前
|
自然语言处理 数据可视化 C++
Github 68000+ star,一款提升论文写作效率的黑科技,挖掘大语言模型的学术潜能,为什么gpt_academic能成为你论文写作的秘密武器?
binary-husky/gpt_academic 是一款集成 GPT/GLM 类大模型的学术写作优化神器,学术界和科研领域都在快速拥抱大语言模型 (LLM),但真正能助力论文阅读、润色、写作的工具却少之又少。gpt_academic(GPT 学术优化)正是为此诞生:聚焦论文生产全流程,从阅读理解、翻译润色、结构优化,到理工项目剖析,提供一站式解决方案。
|
2月前
|
Rust 安全 前端开发
Github 轻松斩获30k+ Star,桌面应用开发太丝滑啦,Tauri框架能重塑桌面App开发?别错过,抓紧上车
Tauri 是一个基于 Rust 的开源框架,用于构建轻量级、高性能、安全的跨平台桌面及移动应用。它利用系统 WebView 渲染前端界面,后端由 Rust 编写,具备出色的性能和安全性。相比 Electron,Tauri 应用体积更小、启动更快,且默认权限更安全。它支持 React、Vue、Svelte 等主流前端框架,并提供自动更新、CLI 工具链、资源注入优化等功能,适用于生产力工具、开发者工具、数据分析、AI 应用等多种场景。目前 Tauri 在 GitHub 上已获得超过 30,000 Star,社区活跃,是现代桌面应用开发的理想选择。
179 0
|
2月前
|
人工智能 自然语言处理 并行计算
Github 12k star ,Shap‑E 深度解析:秒生成 3D 模型,一文掌握应用与技巧
Shap-E 是 OpenAI 开源的创新工具,能将文本或图片秒级转换为高质量 3D 模型,支持 Mesh 与 NeRF 格式输出。具备快速生成、双模态输入、本地部署等优势,适用于游戏原型、3D 打印、内容创作等场景,GitHub 已获 12k+ 星标。
185 0
|
1月前
|
人工智能 编解码 JSON
不看后悔!GitHub 开源 MultiTalk .8k star 强大的人语音+图像绑定项目
MultiTalk 是 GitHub 上的开源项目,具备音频驱动、多人对话视频生成功能。支持多路音频与图像绑定,实现高同步唇动与角色互动,适用于教学、虚拟人及短视频创作,已获 8k 星标。
153 0
|
1月前
|
数据挖掘 调度 开发工具
Github 2.3k star 太牛x,京东(JoyAgent‑JDGenie)这个开源项目来得太及时啦,端到端多智能体神器!!!
JoyAgent-JDGenie是京东开源的端到端产品级多智能体系统,支持自然语言生成报告、PPT、网页等内容,准确率达75.15%。具备开箱即用、多智能体协同、高扩展性及跨任务记忆能力,支持多种文件格式输出,部署灵活,不依赖私有云平台。适合企业自动化报告生成、数据分析与行业定制化应用,是高效、实用的开源AI工具。
272 0
|
1月前
|
安全 数据可视化 项目管理
精品,Github 5000+ star,小型研发团队必备商业开源项目
DooTask 是一款开源在线项目任务管理工具,具备文档协作、流程图、任务分发、IM沟通等功能,支持私有部署与数据加密,已在 GitHub 获得 5000+ 星标,适合中小团队提升协作效率。
|
1月前
|
人工智能 自然语言处理 JavaScript
Github又一AI黑科技项目,打造全栈架构,只需一个统一框架?
Motia 是一款现代化后端框架,融合 API 接口、后台任务、事件系统与 AI Agent,支持 JavaScript、TypeScript、Python 多语言协同开发。它提供可视化 Workbench、自动观测追踪、零配置部署等功能,帮助开发者高效构建事件驱动的工作流,显著降低部署与运维成本,提升 AI 项目落地效率。
171 0
|
1月前
|
数据采集 人工智能 搜索推荐
完蛋啦,爆火Github项目,用微信聊天记录打造专属AI数字分身,我都不敢相信!!
WeClone 是一个基于微信或 Telegram 聊天记录微调大语言模型的开源项目,可打造专属 AI 数字分身。支持文本、图片等多模态数据,具备语言风格迁移和语音克隆功能,实现“说话像你”的AI角色。项目提供完整训练流程,支持本地部署,保护隐私,适用于个人数字分身、纪念机器人、客服助手等场景。
215 0