Accidental Discovery: Figma / Screenshot – Clone UI to Code

Here's an accidental discovery.

I created screenshots of my app showing the user flow. Numbered them 1. to 7. with instructions in the filename (instructions probably not necessary). I wanted Gemini to create an infographic explaining how to use my app.

I went to aistudio.google.com with the prompt "Given these images and the step instructions in the filename, generate a color infographic on how to use <app name> to <app purpose>."

I should have used the Nano Banana prompt but I used the Build prompt.

It reproduced my app's UI in a new AI Studio app.

From there it's just a matter of taking the code for the screens and asking Gemini to translate it into your coding language's UI and tweaking it slightly.

[ The screenshots are not my app but a sample from Figma. And the AI Studio app it works too. "Based on this image make an app called 'Liquid Glass Editor' to simulate MacOS 26 Liquid Glass Buttons." https://ai.studio/apps/drive/1xTWGlG9QuZmzsM6oJHRkpikkfNH6rrgi ]

https://preview.redd.it/1igsu3ncn03g1.png?width=1080&format=png&auto=webp&s=a5bb03f82c43a223c3b3ce7143d8f7c343281f10

Leave a Reply