The missing piece from AI prompting guides: Screenshots
I went from getting mediocre results from AI after starting to do one thing. I’ll tell you the main tricks so you don’t have to waste a day reading the 80th propting guide.
Prompting is about context, nothing else. The primary goal is to maximize the information density of relevant data.
Screenshots are incredibly information-dense if done well.
Why screenshots are awesome?
Text is prone to misinterpretation. When you say "make the button bigger," the AI might not understand:
- How much bigger?
- Bigger in width, height, or both?
- What style should it maintain?
- Should I make the font bigger as well?
A screenshot with a prompt "make the button like this" eliminates all this ambiguity.
How to take good screenshots?
First, you will need a good screenshot tool:
- For Mac: CleanShot X is delightful
- For Windows: The default "Snipping tool" does the job
Just show the relevant part
If you want to change the navigation menu based on the one you like, don't screenshot your full screen, but just the navigation itself.
Attaching the whole screen is confusing, as it can have multiple navigations (i.e., the OS, browser, or website), and depending on the prompt, focus on the wrong one.
Draw a lot
Notice how you didn't look at the article being written, I've made sure to highlight what you needed to see, AIs work the same way.
- Circle elements you want modified
- Draw arrows pointing to specific areas
- Add text labels explaining what each part should do
- Use different colors to categorize different types of changes
Do before and after
If you're looking for specific changes, make separate screenshots showing the current state and your desired outcome. This eliminates ambiguity about what exactly needs to change.
Show the user journey
For complex interfaces, take a series of screenshots showing the user flow. This helps AI understand the context and relationships between different screens or states.
Include relevant context
Sometimes you need to show slightly more than just the target element. Include enough surroundings so the AI understands where this element fits in the overall design or functionality.
TL;DR: An image is worth a thousand words.
Hit me up on X at @jvrsanch if you want a CleanShot X discount.