1 of 2 designers / Q3 of 2025 / ui design & design systems
ANDROID MOBILE DESIGN · AI TRAINING DATASETS
AI Training Interface Design for Gemini
Designed 130+ high-fidelity Android screens as training datasets for Gemini's UI-to-code generation model.
1 of 2 designers / Q3 of 2025 / ui design & design systems
1 of 2 designers / Q3 of 2025 / ui design & design systems
Gemini needed to learn how to generate Android UI code from screenshots.
But to do that well, it needed training data that looked like real apps.
I worked with one other designer and a development team to design 130+
high-fidelity Android screens as UI datasets to help train Gemini's UI-to-code generation capabilities.
ROLE
ux designer
3 months (2025)
mobile UI design
responsive design
design systems
TIMELINE
SKILLS
The user isn't human
Most design work is about how something feels to use, but this project had a different target user: a machine learning model that needed to recognize and reproduce Android UI from screenshots.
Instead of designing for a person, we were designing for how well a model could learn from it. A screen that used invented components would teach the model the wrong patterns. One that was visually repetitive would create blind spots, and a screen that only worked at one size would leave gaps in what the model could handle. For this project, we needed quality designs that were also realistic, varied, and structurally sound.
The decisions that shaped the dataset deliverables
Before jumping into screens, we had to think through what would actually make the data useful to the model.
PICKING APP CATEGORIES
We landed on 12 categories — financial dashboards, social feeds, health trackers, e-commerce flows, and more — to reflect the range of real-world Android apps Gemini would encounter.
Each category had its own UI patterns, which we designed intentionally to match how those apps actually look and behave.
DECIDING ON DESIGN SYSTEMS
We worked across Material 3, Material You, and Salesforce component libraries, because Gemini needed to recognize systems that actually exist in production.
Inventing our own visual language would have been faster, but it would have taught the model patterns that don't exist in the real world.
We included a lightweight style guide for each category of screens showing how components adapted across product contexts.
ENSURING RESPONSIVE COVERAGE
We made sure to design for screens across compact, medium, and expanded breakpoints, with adjusted spacing, alignment, and component behavior at each size to reflect how real Android apps adapt across devices.
Building 130+ screens
130+ screens under a tight timeline meant moving fast without losing quality. The bigger challenge was the design-to-code handoff. We worked closely with developers to make sure the Jetpack Compose code matched our designs closely enough to be packaged as valid datasets. Small discrepancies in layout or component behavior mattered in ways they usually don't in typical product work.
What Gemini can now do
The datasets helped train Gemini to generate Android UI code from screenshots, match layouts to target images, iterate designs with natural language prompts, and detect UI quality issues.
Key takeaway
This project changed how I think about design quality. When the output is training data, every decision has downstream consequences. A careless pattern choice or inconsistent component doesn't just look wrong, it teaches wrong. It made me more deliberate about the decisions I make and why.