Learning Timeline
Key Insights
The Concept of Vibe Coding in Design
Google Stitch brings the 'vibe coding' concept to the world of design. You don't need to arrange elements manually; simply describe the 'vibe' or style you want, and the AI will build the entire visual system for you.
Use Follow-up Prompts for Iteration
Don't worry if the first result isn't perfect. Google Stitch's main strength is its ability to accept additional instructions (follow-up) to modify specific elements without having to regenerate the entire project from scratch.
Prompts
Productivity App UI Generation
Target:
Google Stitch
Create a productivity app with a dashboard page, a calendar page, a note page, and a progress tracker. Make the design very clean and minimalistic.
Modification Prompt (Follow-up)
Target:
Google Stitch
Change the primary colors to emerald green and add a user profile settings page.
Step by Step
How to Generate UI/UX Designs with Google Stitch
- Open the Google Stitch platform in your browser.
- Identify the type of application you want to build (Mobile or Web).
- Select available design 'Presets' on the main screen if you want a specific style, or leave it at 'Default' settings.
- Enter a text prompt describing the app's functionality and desired visual style into the input field (Example: 'Clean and minimalistic productivity app').
- Click the 'Send' button to start the AI generation process.
- Wait a few minutes for Google Stitch to generate the entire design system, including typography, color selection, and page mockups.
- Review the generated designs, such as the Dashboard, Calendar page, Note page, and Progress tracker.
- Use the 'Follow-up prompts' section at the bottom of the screen to make specific changes, such as changing the primary colors or adding new pages.
