Learning Timeline
Key Insights
Benefits of Planning Mode
Use the 'Planning Mode' workflow to review the design strategy in the PRD first. Ensure the hierarchy and visual concepts are correct before clicking 'Go ahead' to generate the entire UI to avoid wasting time.
Canvas Flexibility
You can freely arrange the screen layouts on the canvas by simply dragging and dropping the screens to suit your workflow.
Cross-Device Preview
Always use the preview function to see how UI elements respond to different screen sizes such as mobile, tablet, and desktop.
Prompts
Habit Tracker App Design Prompt
Target:
Google Stitch / Google Gemini
Create an app for habit tracking. It's going to be gamified, but still it's going to be pretty minimalistic. I want it to be dark mode with neon accent.
Step by Step
How to Use Ideate Mode in Google Stitch
- Go to Google Stitch and click the 'Ideate' button (the 'Bring a problem to solve and see the solution' option).
- Choose the type of project you want to create, either 'Mobile App' or 'Website/Web App'.
- If needed, click the '+' icon to upload reference files or enter a website URL for design inspiration.
- Enter your design prompt into the provided text box. You can click 'Enhance prompt' to optimize the AI instructions.
- Click the 'Design System' menu to select color palettes, design presets, or interaction types in real-time.
- Sign in with your Google account if prompted (it's free).
- Review the 'Product Requirement Document' (PRD) automatically generated by Stitch to see the visual direction of the design.
- Click the 'Go ahead and design it' button, or adjust the 'Color palette' or 'Home screen hierarchy' first before generating the UI.
- Use the panel on the left to view the components created and navigate between different screens.
- Click options like 'Add the habit detail screen' (or other suggested screens) to add new pages to the canvas.
- Use the 'Direct edit' function on any element to change text manually or with AI assistance.
- Click the 'Preview' button to view an interactive prototype of your application.
- Switch the display mode at the top of the preview screen to see how the app looks on Tablet or Desktop devices.
