ScreenshottoCode

ScreenshottoCode是什么？

ScreenshottoCode是一个开源AI设计转代码工具，能把设计截图、Figma 设计图、屏幕录屏等变成可以直接用的前端代码。它使用 GPT-4 Vision、Claude Sonnet等多模态模型，可让开发者把可交互的设计瞬间转成可以直接上线使用的代码。

ScreenshottoCode主要功能

• 多源输入转换：上传 Screenshot、Figma 链接、录屏等，AI从Screenshot中提取出UI元素、页面、样式等，可以生成前端代码。
• 多技术栈输出：可输出前端代码 HTML/CSS、React、Vue、Bootstrap、Ionic、SVG 等等十几种前端代码，适用于不同的项目。
• 迭代式优化：生成前端代码后，还可以继续跟进提示词，进一步修改代码。比如修改颜色、间距、增加事件等。
• 本地部署支持：项目完全是开源的，部署到自己的服务器上用即可，能保护设计稿隐私。

适用场景

• 快速原型验证：产品经理或者创业者可以把自绘草图或者设计图转为可交互的网页原型用来演示和验证。
• 设计开发协作：设计师把 UI 截图译成代码就可交给开发，省去了手工切图、写代码的动作。
• 代码迁移与重构：把旧项目的页面截图译成新代码（如由 Bootstrap 译到 Tailwind/React）便于改版。
• 编程学习辅助：学习编程的初学者从设计稿与译码对比中可知某次前端的 layout 和 style 实现过程。 

ScreenshottoCode怎么使用？

1. 访问ScreenshottoCode官网（https://screenshottocode.com/）并登录，登录之后进入workshop页面即可。
2. 上传你的设计图片截图、Figma的导出图片或网页链接（ScreenshottoCode支持输入URL），AI会识别这个界面UI元素的布局。
3. 然后界面上方选中你准备生成的代码框架（HTML+Tailwind、React+Tailwind、Vue+Tailwind、Bootstrap、Ionic均可）。
4. 点击“Generate Code”按钮，等待几秒至几十秒，AI便会基于GPT-4 Vision或者Claude模型将图片转为代码。
5. 生成完成以后，右侧代码框就会展示代码全貌，你可以直接复制粘贴使用，也可以点“Download”下载项目文件包。