{"id":23960956,"url":"https://github.com/davidmigloz/pixels2flutter","last_synced_at":"2025-04-04T08:08:20.681Z","repository":{"id":210602271,"uuid":"720166817","full_name":"davidmigloz/pixels2flutter","owner":"davidmigloz","description":"Convert a screenshot to a working Flutter app.","archived":false,"fork":false,"pushed_at":"2025-03-01T14:34:38.000Z","size":18686,"stargazers_count":196,"open_issues_count":9,"forks_count":39,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-28T07:09:11.213Z","etag":null,"topics":["flutter","gpt-4-vision","llms","openai"],"latest_commit_sha":null,"homepage":"https://pixels2flutter.dev","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidmigloz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"davidmigloz"}},"created_at":"2023-11-17T18:14:17.000Z","updated_at":"2025-03-26T09:38:48.000Z","dependencies_parsed_at":"2024-06-01T21:27:18.360Z","dependency_job_id":"04e383f2-03e0-4a47-aff0-3dd50ce47751","html_url":"https://github.com/davidmigloz/pixels2flutter","commit_stats":null,"previous_names":["davidmigloz/pixels2flutter"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidmigloz%2Fpixels2flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidmigloz%2Fpixels2flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidmigloz%2Fpixels2flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidmigloz%2Fpixels2flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidmigloz","download_url":"https://codeload.github.com/davidmigloz/pixels2flutter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247142066,"owners_count":20890652,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","gpt-4-vision","llms","openai"],"created_at":"2025-01-06T19:58:30.422Z","updated_at":"2025-04-04T08:08:20.652Z","avatar_url":"https://github.com/davidmigloz.png","language":"Dart","funding_links":["https://github.com/sponsors/davidmigloz"],"categories":[],"sub_categories":[],"readme":"# [pixels2flutter.dev](https://pixels2flutter.dev) 🦋\n\n[![tests](https://img.shields.io/github/actions/workflow/status/davidmigloz/pixels2flutter/deploy.yaml?logo=github\u0026label=deploy)](https://github.com/davidmigloz/pixels2flutter/actions/workflows/deploy.yaml)\n[![](https://dcbadge.vercel.app/api/server/x4qbhqecVR?style=flat)](https://discord.gg/x4qbhqecVR)\n[![AGPL-3.0](https://img.shields.io/badge/license-AGPL--3.0-purple.svg)](https://github.com/davidmigloz/pixels2flutter/blob/main/LICENSE)\n\nConvert a screenshot to Flutter code!\n\n## How does it work\n\nhttps://github.com/davidmigloz/pixels2flutter/assets/6546265/a6e4101c-98eb-4adf-b0b9-ae37af3f2ccc\n\n**1. Upload a screenshot**\n\nSelect or drag and drop a screenshot of the UI you want to convert to Flutter.\nIt can be from a real app, a design, or even a drawing!\n\n**2. Additional instructions**\n\nOptionally, add some extra instructions to help the AI generate the code.\nFor example, how the UI should behave when the user interacts with it.\n\n**3. Code generation**\n\nThe app leverages the power of multimodal LLMs (OpenAI GPT-4o or Google Gemini 1.5 Pro)\nto transform your screenshot and instructions into Flutter code.\n\n**4. Run the code**\n\nThe generated code is stored in a GitHub Gist and loaded into DartPad.\nSo you can run the resulting Flutter app right from the browser!\n\n## Examples\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd colspan=\"2\"\u003e\u003cp align=\"center\"\u003e\u003cstrong\u003eScreenshot\u003c/strong\u003e\u003cbr\u003e Convert a screenshot of a real app to Flutter code.\u003c/p\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cp align=\"center\"\u003e\u003cimg width=\"200\" src=\"https://github.com/davidmigloz/pixels2flutter/assets/6546265/4670669a-7617-49b8-9521-0c42907110e9\"\u003e\u003c/p\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cp align=\"center\"\u003e\u003cimg width=\"200\" src=\"https://github.com/davidmigloz/pixels2flutter/assets/6546265/d83cd79e-fdf2-419f-a8de-a22ef2c9d576\"\u003e\u003c/p\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd colspan=\"2\"\u003e\u003cp align=\"center\"\u003e\u003cstrong\u003eWireframe\u003c/strong\u003e\u003cbr\u003e Convert a wireframe to Flutter code.\u003c/p\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cp align=\"center\"\u003e\u003cimg width=\"400\" src=\"https://github.com/davidmigloz/pixels2flutter/assets/6546265/467736e6-b01a-4ea2-b63b-d8f3228e79a3\"\u003e\u003c/p\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cp align=\"center\"\u003e\u003cimg width=\"200\" src=\"https://github.com/davidmigloz/pixels2flutter/assets/6546265/bf00a7f8-797e-4667-b36f-75a1269e90c8\"\u003e\u003c/p\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd colspan=\"2\"\u003e\u003cp align=\"center\"\u003e\u003cstrong\u003eGame\u003c/strong\u003e\u003cbr\u003e Convert a screenshot of a game plus a description of its logic to a playable Flutter game.\u003c/p\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cp align=\"center\"\u003e\u003cimg width=\"350\" src=\"https://github.com/davidmigloz/pixels2flutter/assets/6546265/643ad122-af6e-4b59-8ce0-001a1c7e5c66\"\u003e\u003c/p\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cp align=\"center\"\u003e\u003cimg width=\"350\" src=\"https://github.com/davidmigloz/pixels2flutter/assets/6546265/0d2aa09c-0efb-40bb-b4d8-e7986d17c48b\"\u003e\u003c/p\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Acknowledgements\n\nThis project is inspired by:\n- [tldraw/make-real](https://github.com/tldraw/make-real)\n- [abi/screenshot-to-code](https://github.com/abi/screenshot-to-code)\n- [emilwallner/screenshot-to-code](https://github.com/emilwallner/screenshot-to-code)\n\n## License\n\npixels2flutter.dev is licensed under the [AGPL-3.0 license](https://github.com/davidmigloz/pixels2flutter/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidmigloz%2Fpixels2flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidmigloz%2Fpixels2flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidmigloz%2Fpixels2flutter/lists"}