Skip to content

davidmigloz/pixels2flutter

Repository files navigation

tests AGPL-3.0

Convert a screenshot to Flutter code!

How does it work

pixels2flutter.mp4

1. Upload a screenshot

Select or drag and drop a screenshot of the UI you want to convert to Flutter. It can be from a real app, a design, or even a drawing!

2. Additional instructions

Optionally, add some extra instructions to help the AI generate the code. For example, how the UI should behave when the user interacts with it.

3. Code generation

The app leverages the power of OpenAI GPT-4o multimodal LLM to transform your screenshot and instructions into Flutter code.

4. Run the code

The generated code is stored in a GitHub Gist and loaded into DartPad. So you can run the resulting Flutter app right from the browser!

Examples

Screenshot
Convert a screenshot of a real app to Flutter code.

Wireframe
Convert a wireframe to Flutter code.

Game
Convert a screenshot of a game plus a description of its logic to a playable Flutter game.

Acknowledgements

This project is inspired by:

License

pixels2flutter.dev is licensed under the AGPL-3.0 license.