pixels2flutter.dev ?

将截图转换为 Flutter 代码!

它是如何工作的

pixels2flutter.mp4

1. 上传截图

选择或拖放您要转换为 Flutter 的 UI 截图。它可以是真实应用、设计稿,甚至是手绘图!

2. 其他说明

您可以选择添加一些额外的指令来帮助 AI 生成代码。例如,当用户与 UI 交互时,UI 应如何响应。

3. 代码生成

该应用利用 OpenAI GPT-4V(ision) 多模态 LLM 的强大功能,将您的截图和说明转换为代码。

4. 运行代码

生成的代码存储在 GitHub Gist 中,并加载到 DartPad 中。这样您就可以直接在浏览器中运行生成的 Flutter 应用!

示例

截图 将真实应用的截图转换为 Flutter 代码。

线框图 将线框图转换为 Flutter 代码。

游戏 将游戏截图加上其逻辑描述转换为可玩的 Flutter 游戏。

致谢

该项目受到以下项目的启发

许可证

pixels2flutter.dev 在 AGPL-3.0 许可下授权使用。AGPL-3.0 许可证

GitHub

查看 Github