Learning Timeline
Key Insights
Benefits of 'Select and Ask'
Similar to how the Nano Banana model handles image editing, this feature allows you to maintain consistency within your existing code without drastically altering the overall application structure.
Selection Accuracy Tips
For best results, make sure to highlight the entire code block of the element (from the start tag to the end tag) so Gemini understands the full scope of the changes required.
Prompts
Visual Element Edit Prompt
Target:
Gemini Canvas
Add a logo to this header and ensure it is centered on mobile view.
Add New Element Prompt
Target:
Gemini Canvas
Add a 'cat with a hat' icon next to the search bar using a standard SVG placeholder.
Step by Step
How to Use 'Select and Ask' in Gemini Canvas
- Open Gemini Canvas containing your web application code.
- Use your cursor to highlight or select the specific code snippet you want to modify, such as a <button>, <div>, or text element.
- Click on the 'Select and Ask' icon (usually a floating icon next to the selected text).
- Enter your visual instruction prompt in the input box that appears (e.g., 'Change this button to a blue gradient and give it rounded corners').
- Press Enter and wait for Gemini to generate the updated code based on your instructions.
- Click the 'Apply' button to automatically replace the old code with the new version without needing to copy and paste manually.
