Learning Timeline
Key Insights
Advantages of Visual Context (Multimodal)
AI understands specific UI issues much more easily when provided with a screenshot compared to text descriptions alone. This reduces 'hallucination' errors where the AI might misinterpret which element you are referring to.
Element Selection Tip
While you can use the 'Visual Edits tool' to select elements, combining element selection with a screenshot attachment is the most accurate way to ensure the AI edits the code for the correct component.
Prompts
Prompt for Fixing Visual Map
Target:
AI Coding Assistant (V0/Cursor/Claude)
The map only partially loads sometimes. I want you to add the night-day overlay to this element and fix the loading issue.
Step by Step
How to Provide Visual Context to AI for UI Fixes
- Identify the UI element or visual bug that needs fixing on the application dashboard.
- Use the 'Command + Shift + 4' keyboard shortcut (for Mac) to take a screenshot of the problematic area.
- Click on the chat input area in your AI development tools (such as V0 or Cursor).
- Press 'Command + V' to 'Paste' the screenshot directly into the chat.
- Click the 'Select Element' button (pointer icon) if available to select the specific component you want to modify visually.
- Type a prompt explaining the desired changes, for example, adding a 'night/day overlay'.
- Ensure the image is fully uploaded (Add image) before pressing 'Enter' or clicking 'Send' to generate the fix code.
