Creating Mobile App UI Designs with Google Stitch Ideate Mode

Habit Tracker App Design Prompt

How to Use Ideate Mode in Google Stitch

1. Go to Google Stitch and click the 'Ideate' button (the 'Bring a problem to solve and see the solution' option).
2. Choose the type of project you want to create, either 'Mobile App' or 'Website/Web App'.
3. If needed, click the '+' icon to upload reference files or enter a website URL for design inspiration.
4. Enter your design prompt into the provided text box. You can click 'Enhance prompt' to optimize the AI instructions.
5. Click the 'Design System' menu to select color palettes, design presets, or interaction types in real-time.
6. Sign in with your Google account if prompted (it's free).
7. Review the 'Product Requirement Document' (PRD) automatically generated by Stitch to see the visual direction of the design.
8. Click the 'Go ahead and design it' button, or adjust the 'Color palette' or 'Home screen hierarchy' first before generating the UI.
9. Use the panel on the left to view the components created and navigate between different screens.
10. Click options like 'Add the habit detail screen' (or other suggested screens) to add new pages to the canvas.
11. Use the 'Direct edit' function on any element to change text manually or with AI assistance.
12. Click the 'Preview' button to view an interactive prototype of your application.
13. Switch the display mode at the top of the preview screen to see how the app looks on Tablet or Desktop devices.