Learning Timeline
Key Insights
Visual Iteration Without Coding
You don't need to explain changes for the entire app. Use the 'Select and Ask' feature to highlight specific elements (like buttons or charts) and tell Gemini exactly what needs to be changed in that section only.
The Importance of Mock Data
Always ask Gemini to include 'Mock Data' in your initial prompt so your prototype doesn't look empty and features like filters or search can be tested immediately.
Prototyping Speed
Compared to the traditional process that takes weeks with a Product Manager, Gemini Canvas allows you to get a clickable 'working prototype' in just a few minutes.
Prompts
L&D App Prototype Template
Target:
Gemini
Build a single page app with all the features accessible. Include mock data that demonstrates each feature working and make all interactive elements clickable. App Name: 9x Learning. Target User: L&D managers and company CEOs. Core features: 1. Dashboard and reporting (progress tracking), 2. Student management (filter by department), 3. Engagement and communication (identify at-risk employees and send nudges), 4. Settings. Build this prototype so I can click through and test each feature.
Step by Step
How to Build Interactive Prototypes with Gemini Canvas
- Open the Gemini interface in your browser.
- Click on the 'Tools' menu located at the top or side of the chat area.
- Ensure 'Canvas Mode' is enabled to allow for visual code generation.
- Copy the prompt template containing your specific app requirements (such as structure, key features, and mock data) into the chat box.
- Make sure to include the instruction 'Build this prototype so I can click through and test each feature' at the end of your prompt.
- Press 'Enter' or click the 'Send' button to start the generation process.
- Wait for Gemini to plan the structure, design the prototype layout, and write the code.
- Once the prototype appears on the right (Canvas area), click on any tab or button (such as Dashboard, Student Management, or Settings) to test the interactivity.
- Use the 'Select and Ask' feature by hovering over specific elements in the prototype to make changes without having to write code manually.
