In the previous post, we demonstrated a Proof of Concept (PoC) for generating a functioning React app from multiple screenshots. In this PoC, we applied several prompting techniques to make the generated app resemble the screenshots as closely as possible. The structured code separates CSS, layout, and data, making it reusable and saving up to 20% of the development time by scaffolding an entire code base from scratch.

The prompts used in the PoC are adaptable enough to work with other tech stacks. We're considering expanding this to generate Flutter apps. Mobile applications pose unique challenges like the build pipeline, native functionalities and navigation. By modifying the prompts and incorporating rule-based logic to handle mobile builds, we've managed to generate Flutter apps from images.

We have tested this engine with popular mobile apps like Messenger, Whatsapp and Instagram, and the results are promising!

As with the previous approach, we aim to generate something other than pixel-perfect apps. Instead, we generate high-quality, modular code for developers to build upon. This code features reusable components and separates layout and data. We're excited to share some initial results with you!

Below, you can see the original image on the left and the generated view on the right. It prompted the use of placeholder images in the generated app.

Figure 1: Messenger profile view

Figure 2: Messenger chat view

Figure 3: Whatsapp chat view

Figure 4: Whatsapp profile view

Figure 5: Instagram feed view

Figure 6: Instagram profile view

We'll soon add this feature to our PoC, available at codest.ai. If you're interested in ReactJS apps, we encourage you to visit the website and experience it yourself!

Given the promising results with ReactJS and Flutter, we believe this approach should work well with React Native, too. We'll test this idea and update you with the results. Please stay tuned!