Learning Timeline
Key Insights
Icon Automation Tip
Google Stitch doesn't just arrange layouts; it can also automatically generate relevant 'custom icons' based on the topic (e.g., a racket icon for a tennis prompt).
The 'On-Demand Application' Era
Use these tools for rapid prototyping. You don't have to draw every single box; let the AI act as your first designer, and then you just need to fine-tune the results in Figma.
Prompts
Photo Gallery Design Generation
Target:
Google Stitch
A personal photo library
Sports App Design Generation
Target:
Google Stitch
Tennis app planner with custom icons and leaderboard
Step by Step
How to Create UI Designs Using Google Stitch
- Visit the official Google Stitch website and log in to your account.
- Select the type of project you want to create (Mobile App or Web App) from the main dashboard.
- Locate the 'Prompt' text input box in the center of the screen.
- Type a specific description of the application you want to build (Example: 'A personal photo library').
- Press 'Enter' or click the 'Generate' button to start the AI generation process.
- Wait for the AI to automatically generate several user interface (UI) screens based on design concepts.
- Click on any component or screen to view the design details and the generated code.
- Use the 'Export' or 'Import into Figma' buttons to transfer the design into a professional design tool.
- Click the 'Code' button if you want to copy the source code for each UI element.
Modifying Designs Using Existing Templates
- Select any application example displayed in the Stitch gallery (Example: 'Board game app planner').
- Click on the original prompt used by the template to activate edit mode.
- Replace the keywords in the prompt with your own requirements (Example: Change 'Board games' to 'Tennis').
- Press the 'Run' or 'Regenerate' button to see the AI update the icons, text, and layout according to the new topic.
- Check the 'Leaderboard' view or profile screens dynamically generated by the AI.
