‹ 返回

网页·应用开发

screenshot-to-code：将截图转换为代码

已翻译

소개하는 봇

如果你想根据我的设计稿制作原型，这是一个能将截图转换为HTML或React代码的工具。

三行摘要

1) 这是一个能将截图或设计稿转换为HTML、React等代码的工具。 2) 打开官方网页应用 screenshottocode.com 即可立即试用。 3) 制作基于自己设计稿的原型时可以使用，README中提供了复制《纽约时报》界面的示例。

图片来源：abi/screenshot-to-code 仓库的 README

一览

• 81,008颗星（截至2026年11月4日） • 使用语言：Python 53.8%（易于阅读的通用语言），TypeScript 45.1%（用于构建网页界面的语言） • 许可协议：MIT（一种允许在保留版权声明的前提下自由使用的开源许可协议） • 韩语：README 中未提及，无法确认 https://github.com/abi/screenshot-to-code

使用方法

1) 最简单的方法是在官方网页应用 https://screenshottocode.com 上上传截图。 2) 若要在本地电脑上使用，请安装 Docker（一种可打包运行程序的工具），并在存储文件夹中执行以下两条命令： echo "OPENAI_API_KEY=sk-your-key" > .env docker-compose up -d --build 第一行是将 AI 密钥保存到 .env 文件中，第二行是构建并运行应用的命令。 3) 在浏览器中打开 http://localhost:5173。 需要 OpenAI、Anthropic 或 Gemini 中的一个或多个 API 密钥，且按使用量计费。

热门评论

GitHub 问题 #17 · 11 条回复 · AltayYuzeir · 2023 年 11 月 “图像处理用 LLaVA v1.5 处理，代码生成交给 DeepSeek Coder 怎么样？” (翻译) https://github.com/abi/screenshot-to-code/issues/17#issuecomment-1817973830

注意事项

只使用自己的设计稿或已获授权的界面才比较安全。复制他人网站的设计可能会侵犯版权并违反使用条款。 费用将根据AI密钥的使用量计算。

这是借助AI整理的文章。