Learning Timeline
Key Insights
Advantages of the Flash Model
The Flash model is ideal if you prioritize speed. It can generate high-quality visuals in under 60 seconds that are comprehensive enough to be directly processed by coding agents for conversion into actual code.
Design Exploration Without New Prompts
You don't need to rewrite your prompt from scratch to change styles. Simply by using the 'Variations' feature, the AI will provide alternative layouts and styles based on the original structure you selected.
Pro-Tip: Instant Prototype
Use the 'Instant Prototype' feature to automatically visualize how the user flow works without having to manually link pages together.
Step by Step
UI Prototyping Process with the Flash Model
- Open the Google Stitch dashboard and select the 'Web' category from the main menu.
- Select the 'Flash' model from the available AI model dropdown menu.
- Enter your prompt for the web design and wait for the generation process (typically takes less than 60 seconds).
- Click on the generated page preview to activate the top toolbar.
- Select the 'Variations' button to see different design versions of the same page.
- Set the desired number of variations (e.g., enter '2').
- Use the 'Refine', 'Explore', or 'Reimagine' fields if you want to provide specific instructions for the variations, or leave them blank for randomized results.
- Click the 'Generate' button to start creating the new variations.
- Use the 'Mobile App' button on the top toolbar to switch the web design to a smartphone view.
- Select the 'Annotate' or 'Edit' button to make manual changes or add notes to specific design elements.
- Click the 'Preview' button to view a simulation of the prototype's interactions before exporting.
- Use the 'Figma' option or the 'Export' button to transfer the design to external tools or coding agents for product development.
