screenshot-to-code 图片生成html代码的AI项目

介绍

项目名: screenshot-to-code — 将截图转换为 HTML 代码

Github 开源地址： https://github.com/abi/screenshot-to-code

在线测试地址： https://screenshottocode.com/

Screenshot to Code是一个在线图片转代码AI生成网页制作网站工具，它能够将设计师的视觉作品——无论是屏幕截图、模型图片还是Figma设计——转换成干净、可用的代码。这不仅仅是一个简单的转换工具，它背后的强大AI模型能够理解设计的细节，并生成符合最新web标准的代码。对于追求效率和精确度的开发者来说，这个工具无疑是一项福音。

从HTML + Tailwind到React、Vue、Bootstrap，再到Ionic，Screenshot to Code支持多种流行的技术栈，满足不同开发需求。更令人兴奋的是，它还支持SVG格式，为图形设计的实现提供了更多可能性。

但Screenshot to Code并不满足于现状，它不断进化，最近的更新中增加了将视频或屏幕录像转换为功能性原型的实验性功能。这意味着，开发者可以更直观地从动态设计中提取代码，进一步提升工作效率。

在使用上，Screenshot to Code提供了托管服务和本地运行两种选择。虽然托管服务是付费的，但它为用户提供了便捷的使用体验。而对于希望完全控制自己数据的用户来说，本地运行则是一个不错的选择。只需配置好OpenAI API密钥和Anthropic密钥，就可以在本地启动服务，享受Screenshot to Code带来的便利。

无法播放请点击

点击播放

无法播放请点击

点击播放

安装

如果你没有安装过Python或者Yarn，那就用下面两条命令来安装Python，Node或者Yarn

brew install python
brew install node
brew install yarn
brew install git

并且通过一下两个命令来确认，安装是否成功

node --version
npm --version
python --version
yarn --version

Node: v18.12.1
npm: 8.19.2
Python: 3.11.5
Yarn: 1.22.19

这个软件对版本要求并不高，所以最新版的就行，我用的版本如下，你可以对照一下

然后Clone这个软件包

git clone https://github.com/abi/screenshot-to-code
# 进入软件目录
cd screenshot-to-code
# 进入后台目录
cd backend
# GPT4 的API key
echo "OPENAI_API_KEY=sk-your-key" > .env
# 安装Poetry 依赖包管理器
pip install poetry
# 安装依赖包
poetry install
# 激活命令行
poetry shell
# 运行程序
poetry run uvicorn main:app --reload --port 7000

后台运行好之后，再打开另外一个命令行

来运行前段程序

# 同样的进入软件目录
cd screenshot-to-code
# 进入前台目录
cd frontend
# 安装前台依赖包
yarn
yarn dev

打开浏览器地址，就可以使用了

http://localhost:5173/

Screenshot to Code优缺点

优点

• 1. 提高开发效率：Screenshot to Code最大的优点是显著提高了从设计到代码的转换效率。对于前端开发者来说，这意味着更快的项目交付速度和更高的工作效率。
• 2. 支持多种技术栈：工具支持HTML + Tailwind、React + Tailwind、Vue + Tailwind、Bootstrap和Ionic + Tailwind等多种技术栈，这使得它能够适应不同开发者的需求。
• 3. 强大的AI模型：背后的AI模型不仅能够理解设计的视觉元素，还能理解其中的逻辑关系，这使得生成的代码不仅外观上与设计一致，而且在功能上也能够符合预期。
• 4. 实时更新和技术支持：订阅用户可以享受到实时的功能更新和优先的技术支持，这对于需要持续维护和更新项目的开发者来说非常重要。
• 5. 数据安全：对于注重数据安全的用户，Screenshot to Code提供了本地运行的选项，确保所有数据都在用户的控制之下。
• 6. 用户友好：工具提供了直观的用户界面和详细的文档，使得即使是初学者也能够快速上手。

缺点

• 1. 学习曲线：对于那些习惯于传统开发流程的开发者来说，初次使用Screenshot to Code可能需要一段时间来适应。
• 2. 功能限制：免费试用版本有一定的功能限制，比如转换次数和速度的限制，这可能会影响用户的体验。
• 3. 价格：虽然Screenshot to Code提供了多种付费选项，但对于个人开发者或小型团队来说，成本可能仍然是一个考虑因素。
• 4. 依赖性：过度依赖工具可能会导致开发者在没有工具的情况下难以手动编写代码。
• 5. 实验性功能：新加入的实验性功能，如视频转换，虽然展示了巨大潜力，但仍在完善中，可能会存在不稳定性。

Screenshot to Code常见问题

Q1: Screenshot to Code 支持哪些设计软件的导入？

A1: Screenshot to Code支持从多种设计软件导入设计图，包括但不限于Figma、Sketch和Adobe XD。用户可以直接上传设计文件或屏幕截图，工具将自动识别并转换为代码。

Q2: 转换生成的代码需要手动调整吗？

A2: 虽然Screenshot to Code力求生成高质量且可用的代码，但根据设计的复杂程度和特定的项目需求，可能仍需要进行微调。工具提供了良好的代码结构，以便开发者可以轻松进行调整。

Q3: Screenshot to Code 是否支持响应式设计？

A3: 是的，Screenshot to Code生成的代码支持响应式设计。工具能够识别不同的布局元素，并生成适应不同屏幕尺寸的代码。

Q4: 如果我遇到技术问题，应该如何获得帮助？

A4: Screenshot to Code为用户提供了多种获取帮助的方式，包括详细的文档、教程视频和社区论坛。此外，订阅用户还可以获得专门的技术支持服务。

Q5: Screenshot to Code 是否适合初学者使用？

A5: 是的，Screenshot to Code设计了直观的用户界面和详细的指导文档，使得即使是初学者也能够快速上手。此外，免费试用版可以让初学者在没有经济压力的情况下尝试和学习。

Q6: 使用 Screenshot to Code 是否有数据安全的风险？

A6: Screenshot to Code非常重视用户的数据安全。除了提供本地运行的选项，确保数据不离开用户的设备外，即使是托管服务，也采用了加密和安全措施来保护用户数据。

Q7: Screenshot to Code 是否支持动态内容的转换？

A7: 目前，Screenshot to Code主要支持静态设计的转换。对于动态内容，如交互和动画，工具提供了实验性的视频转换功能，但可能需要进一步的开发来完善。

Q8: Screenshot to Code 的更新频率如何？

A8: Screenshot to Code定期进行更新，以引入新功能和改进现有功能。订阅用户会自动获得最新的更新。

Q9: Screenshot to Code 是否提供API接口？

A9: 是的，Screenshot to Code为开发者提供了API接口，使得它可以集成到自动化的工作流程中，进一步提高效率。