Building a Pomodoro App with AI • YoungLee's Journal

This page was translated by AI

This is a record of building a Pomodoro app with AI.

A few days ago, I saw people on Coolapk discussing WeChat’s native HarmonyOS development and its use of Flutter. Since we have been learning Android development recently, I looked up the Flutter framework.

I was soon drawn in by this cross-platform framework from Google: “write once, deploy everywhere.”

Around the same time, I saw a Bilibili creator build an app with Cursor and Claude that reached the top of the App Store charts.

I wanted to build software of my own with AI, which led to this Pomodoro app project. I also want to share a few lessons from developing software with AI.

For the IDE and model, I recommend Cursor + Claude Sonnet 3.7 Thinking. At the moment, this model is the best fit for software development.
Before developing an app, you should have a design mockup of your own, perhaps made in Figma, or ask AI to create one. Here is a prompt you can adapt and give to an AI:

I want to use {a programming language} to develop a {type of} app. I now need high-fidelity prototypes. Please create prototypes for every screen in the following way, and make sure they can be used directly for development:

User-experience analysis: Analyze the app’s main features and user needs first, then define the core interaction flow.
Product interface planning: Act as a product manager and define the key screens while keeping the information architecture sound.
High-fidelity UI design: Act as a UI designer and create screens that follow real iOS/Android design guidelines. Use modern UI elements for a strong visual experience, and ensure the screens and features can be implemented in Flutter.
HTML prototype implementation: Generate all prototype screens with HTML + Tailwind CSS (or Bootstrap). Use FontAwesome (or other open-source UI components) to make the screens polished and close to a real app design.

Split the code into separate files and keep the structure clear:

Store each screen in an independent HTML file, such as home.html, profile.html, and settings.html. - Use index.html as the main entry point. Do not put the HTML for every screen directly in it. Instead, embed those HTML fragments with iframes and display every page side by side on the index page rather than linking between them. - Improve realism: - Make the screen dimensions resemble {a specified size or device model}, with rounded corners so they look more like real phone screens. - Use real UI images rather than placeholders. You can choose from Unsplash, Pexels, or official Flutter UI resources.

Generate the complete HTML code according to these requirements and make sure it is suitable for actual development.

Next, create the project folder and import it into Cursor so it can generate the app for you:

Do not use mock data. While completing the design, make sure the features work as well. I recommend listing the features first, then checking them off one by one after implementation.

At this point, the app’s overall structure is mostly in place.

That is roughly how the process went. Building an app with AI is not as easy as it sounds. Even if you cannot code, it helps to understand everything else. I study computer science, so I had some background. Beginners will certainly run into more problems, but I hope you stay patient.

Maybe the age of AI coding has really arrived.

Finally, here is the app I built. I hope you like it: TomatoTime - a Pomodoro app for better focus