1 of 2 designers / Q3 of 2025 / ui design & design systems
ANDROID UI / AI TRAINING DATA
Designing Android screens to train Gemini
Designed 130+ Android screens across 12 app categories as training data for Gemini’s UI-to-code model.
1 of 2 designers / Q3 of 2025 / ui design & design systems
1 of 2 designers / Q3 of 2025 / ui design & design systems
ROLE
ux designer,
1 of 2 designers
TIMELINE
3 months, 2025
SCOPE
mobile UI design,
responsive design,
design-to-code handoff
THE CHALLENGE
The user wasn't human – it was a model.
Most design work is about how something feels to use, but this project had a different target user. Gemini needed to learn how to generate Android UI code from screenshots, and to do that well, it needed training data that looked like real apps.
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.
MY ROLE
Setting up our design files, and how we shared them with the team
As I started on the project before my design colleague, I set up how we organized our design files and shared them with our developers and PM, and created the structure for how we picked colors and built a style guide for each type of app we designed.
We included a lightweight style guide for each category of screens showing how components adapted across product contexts.
DESIGN DECISIONS
Every decision came back to reflecting the range of real-world Android apps.
Before designing any 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.
Each category had its own UI patterns, which we designed intentionally to match how those apps actually look and behave.
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.
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.
Designing 130+ screens and ensuring a smooth design-to-code handoff
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.
To make the handoff easy to follow, each screen we designed came with notes on the components, images, and alt text it used.
A step tracker screen with its component, image, and alt text notes for developers.
IMPACT
Gemini can now generate Android UI code from screenshots.
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.
