In the first article, I laid out the goal for this series: building an entire cross-platform app with AI generating most of the code. Before diving into it though, there was a critical step. I needed to know if Gemini Pro was up to the task.

Why the Skepticism? 🤨

As mentioned previously, I leverage LLMs extensively in my daily work and personal life. I use them for brainstorming, reasoning through problems, and to help with generating content. It is a very powerful tool in those domains.

But, and there’s always a but, my experience always suffers when trying to do more complex things. Sure, I hadn’t tried a “pro“ model before, but I believe in better safe than sorry.

For instance, asking an LLM to reason between a specific document structure and then put a bunch of data into that structure is not always great and usually requires a lot of guiding and back and forth. LLMs often come up with their own thing, frequently missing the exact structure that was requested of them.

So, moving into having an LLM build an actual, functional product that involved managing everything from architecture to UI… Yes you could say I was skeptical to start with. Could it truly handle the complexity, and especially the consistency, required to achieve a project like this? Time to put it to the test.

Round 1: The “Soft” Screening Stage 💬

“Soft” as in, no code yet, just questioning. But deep questioning. My initial validation involved a series of direct conversations discussing my overall product idea, details on the type of user experience I envisioned, the technology I wanted to use, and long architecture discussions.

I asked high-level questions about Gemini Pro’s capabilities:

Can you handle cross-platform Flutter development?

What are your limitations?

Is it feasible to rely on you for an end-to-end product build?

The quality and confidence of its initial responses was very positive but I wanted more.

Tell me more about Flutter as a cross-platform development solution.

How well do you support the implementation of native features like reminders for example?

The app will require cloud syncing, is Firebase Firestore a good way forward? What are the alternatives?

How are we architecturing our app to work in such a model?

What happens when we want to monetise, can you help plan for that?

And so much more…

I was impressed and actually enjoyed some of the back and forth on the different topics. I was already winning with learning a bunch of new stuff. I was ready to proceed to the next stage of validation.

Round 2: The Technical Stage 💻

Confidence from conversation is one thing. We already know LLMs are pretty strong at it. Practical proof is another. I needed some practical tests, especially in areas where I knew I’d need the most help.

As a user, an app without good visuals, smooth interactions, and even subtle animations never really stays in my memory. So, a hard requirement from the start was that this app needed to look nice and have a clean, modern look.

As an engineer though, one of my weakest skills was always working with any UI that required custom drawing. I was, and still am, terrible at it 😅. So, naturally, I chose to test Gemini Pro with some UI coding challenges.

CodePen for Flutter/Dart? 🗒️

This was even before I set up my developer environment. My skepticism was still running strong. I honestly thought we wouldn’t get to start this project because the LLM would fail me at some point. So I needed a quick, low-friction way to test Gemini Pro’s code output and capabilities.

My thought process led me to ask it for a CodePen like tool to play with its generated code. It immediately suggested Zapp!, an online editor specifically for Dart and Flutter. It was exactly what I needed for rapid prototyping and testing the generated code. Another positive sign: the LLM was up for the challenge and understood the need for a quick feedback loop.

Test 1: I want a badge 🏅

With Zapp! ready, it was time for the real tests. UI stuff, remember? I knew I didn’t want Gemini or another LLM designing graphic assets for the app. Image generation is not yet at a level that suits that purpose. It would be a struggle to maintain a consistent design language across multiple image assets let alone generating actual usable assets. But I thought, why not have Gemini drawing some of the assets with code if they’re not too complex? So, that’s why I asked it to do.

Draw me a badge that I can use in a potential rewards feature. I want a medal with a ribbon and the ability to display a number like 10, 20, or 30, representing a day streak.

The initial result, let’s be fair, wasn’t amazing, but if we ignore the ribbon, it wasn’t that bad for a first pass. Especially given how fast it generated the code to draw it. A few more prompts, some tweaks, and even offering an image of a medal for visual context, led us to something far more interesting. I was particularly impressed with the shimmer effect and how easy it was to build something like this simply by describing it. That was a strong demonstration of its capabilities.

Test 2: The Animated Droplet 💧

Next, I raised the stakes. I’m building a water reminder app, right? So, for a visual progress indicator, I wanted an asset that would serve as the main screen widget to show water intake progress: an empty droplet that animates to being full was my initial thought.

This process was painful, to put it mildly. It was easy to draw a rectangle that did that, or even a circle. A droplet is a different story. While the LLM understood clearly what a droplet was, it failed to produce anything resembling one, especially when it came to the animation.

So, I tried, and failed many times to explain in words what the shape of a droplet looks like in an attempt for it to draw something on command.

Draw a circle with a perimeter that is only 70% closed, then from those edges draw two curved lines facing outwards. Those lines should then meet together above the circle, aligned with the center of it.

Confusing even for a human, right? 😅 My prompting skills are definitely being put to the test on this journey, too!

I can’t even properly describe the type of things it produced. From triangles to trapezoids, to unknown geometric figures. Everything you can imagine was rendered on top of the “incomplete“ circle that also had multiple variants, each worse than the previous. See below some my favourites 🤪

If you’re reading this and feel like taking a shot, test it out and let me know if you’re luckier at prompting an LLM to draw an animated non-regular geometric shape from scratch!

Animated Icons to the RescueRescue ✨

At this point, I was getting frustrated and my motivation was slowly disappearing. I couldn’t even get one of the most important visual aspects of the app right. After seeing that last attempt deviating even further from anything remotely close to the desired outcome, I honestly thought I wouldn’t go ahead. Then I remembered icons. Can we use icons for this? So, I asked Gemini Pro:

Can you animate icons? Specifically, can you display an outlined icon on top of a filled one and somehow control the display of the filled one so it looks like the outlined one is filling up?

Magic! Not exactly how I described it, and it required a bit more back-and-forth playing with details, with the LLM trying a couple of alternatives. But it built something, and something that I decided straight away was going to be the starting point for my home screen hydration progress widget.

Gemini Pro Hired - Full Steam Ahead 🚂

These practical tests, particularly the challenging UI elements, were really insightful and re-assuring. My skepticism calmed down and I was ready to move forward with using Gemini Pro as my primary AI partner. While it wasn’t always smooth sailing, its ability to iterate, understand complex requests (like my unintelligible prompts 👀), and ultimately deliver functional code for tricky UI challenges, confirmed its strong potential for this project. Not perfect for sure, but I can work with this.

Stay tuned for the next article. We’ll dive into how Gemini Pro and I began translating the raw idea of a water reminder app into a concrete product vision and set of features!