Screenshot-To-Code 是一款免费的开源工具，它使用 GPT-4 Vision API 将任何网站或 UI 设计屏幕截图转换为代码。它从您那里获取屏幕截图图像，然后编写 HTML/CSS 代码来复制设计。它仔细分析给定的设计，决定 HTML 块，然后为其编写代码。对于许多设计，它还可以生成移动响应式代码。为了设计元素，它使用 Tailwind CSS，并在输出中为您提供生成的网页设计的完整代码。该工具是免费的，但它使用 GPT-4 Vision API，这需要一些付费积分。就我而言，1 次成功运行的成本为 0.05 美元。如果您是前端开发人员或 UI/UX 设计师，那么您会发现它很有用。您可以在自己的服务器上自行托管它，也可以在几秒钟内在个人计算机上运行它。什么是 GPT-4 视觉？GPT-4 Vision 是 OpenAI 的 SOTA 语言模型 GPT-4 的扩展！现在，它不仅可以理解文本，而且凭借其全新的视觉处理能力GPT-4 Vision，它还可以分析图像。想象一下：您可以输入图像并获得文本输出，这些输出完美地结合了文本和图像本身的相关信息。现有 GPT-4 功能的这一显着突破使其能够处理各种各样的任务，并提供更丰富、更全面、信息更丰富的响应。以下是 GPT-4 Vision 的一些关键功能：物体检测和识别。图像字幕：GPT-4 Vision 可以生成图像的自然语言描述。视觉问答：GPT-4 Vision 可以回答有关图像的开放式问题。这些是 GPT-4 可以做的几件最重要的事情。我在这里提到的 Screenshot to Code 工具通过从给定图像中学习来生成代码，从而在新的程度上利用了这些功能。如何安装和运行此屏幕截图到代码工具？您要做的第一件事是首先克隆项目的 GitHub 存储库。接下来，将目录更改为根目录，然后运行这些命令。但在此之前，您需要确保安装了 Docker 和 Git。git 克隆 https://github.com/abi/screenshot-to-codecd 屏幕截图到代码现在，您需要设置 OpenAPI 密钥。将其设置为环境变量。另外，启动 docker 容器。只需一一运行这两个命令即可。echo “OPENAI_API_KEY=sk-your-key” > .envdocker-compose up现在，当 UI 启动时，只需在地址栏中输入 http://localhost:5173，然后就会显示主 UI。如下图所示。此时，您已成功运行该工具并准备好完成其工作。在下一节中，您将看到如何使用它将图像转换为代码。使用此工具将屏幕截图转换为代码：只需上传屏幕截图即可。您可以为其提供网站或 Web 组件的任何屏幕截图。几秒钟后，它将向您显示最终生成的 UI。它看起来大多像输入图像。您还可以切换到代码视图以查看生成的 HTML 和 Tailwind CSS 代码。您也可以复制此代码并下载最终的 HTML 文件。您现在可以以这种方式使用此工具随时将屏幕截图转换为代码。只需上传一张图片，然后让它发挥魔力。每一代将花费您大约 0.05 美元，因此，您还需要检查 OpenAI 仪表板中的使用情况图表。关闭的思考：如果您正在寻找一种基于 AI 的工具，可以通过读取屏幕截图图像来生成代码，那么我在这里提到的工具将完美运行。有了这个，您可以将 GPT-4 视觉的功能提升到一个新的水平。除了屏幕截图之外，您只需将其导出的 Figma UI 设计作为图像提供，它就会为您生成代码。
