SlimSnap
<p> Your AI doesn't know which button you mean </p> <p> <a href="https://www.producthunt.com/products/slimsnap?utm_campaign=producthunt-atom-posts-feed&utm_medium=rss-feed&utm_source=producthunt-atom-posts-feed">Discussion</a> | <a href="https://www.producthunt.com/r/p/1168276?app_id=339">Link</a> </p>
Last verified:
What is SlimSnap?
SlimSnap is an innovative AI-powered tool designed for UI/UX designers, product managers, and developers who frequently work with screenshots and annotations. The core problem it solves is that when you paste a screenshot into an AI tool like Claude Code, Cursor, or ChatGPT, the AI often doesn't know which specific button or element you're referring to, even when you've annotated it with arrows.
Unlike traditional image recognition tools, SlimSnap reads your screenshots as pixel blobs and intelligently guesses which button or element you are referring to, based on your annotations. It then converts the visual input into structured JSON, detailing element coordinates (bounding boxes), unique IDs for every element, and specific points of interest like arrows. This means your arrow annotation points at exactly one element with a target_ref field that the AI can use as a strong anchor.
The structured JSON output is around 700 tokens compared to 1,568 tokens for raw image processing on Sonnet, making it more efficient for AI agents. Every element gets a unique ID regardless of how visually similar it is to others, with OCR text plus bounding box coordinates plus parent context disambiguating duplicates. For example, if there are five
SlimSnap pricing
Pricing model: Freemium
SlimSnap is free to use during launch for personal and commercial work. The Mac app is currently closed-source but will be free at launch. The schema and Claude Code skill are open MIT-licensed, meaning core schema and code are freely available. There we grant a non-exclusive, non-transferable license to install and use. Potential paid plans may exist for advanced features or enterprise use, but core functionality is free.
SlimSnap pros
- On-device processing ensures privacy and speed
- Converts screenshots and annotations into structured JSON automatically
- Open MIT-licensed schema for customization and extensibility
- Free Mac app available for quick adoption
- Reduces manual data entry and improves accuracy
- Unique element IDs disambiguate visually similar buttons
- OCR text plus bounding boxes plus parent context disambiguates duplicates
- Around 700 tokens vs 1,568 raw on Sonnet for efficiency
- target_ref field gives AI a strong anchor for what to touch
- Claude Code skill auto-loads latest capture without pasting
- Works perfectly for complex layouts with 40+ overlapping components
- No cloud dependency for processing
- Fast on-device OCR and element detection
- Annotated arrows point at exactly one specific element
- Streamlines UI flow documentation and bug reports
SlimSnap cons
- Limited to Mac platform only, no Windows support yet
- Windows port not in short-term roadmap due to Mac-native OCR layer
- New and niche tool with limited user community
- Limited integrations beyond Claude Code skill
- May require learning curve for advanced schema customization
- Cursor-native skill not available yet, only on wishlist
- For Cursor or claude.ai it's manual paste step, not auto-loader
- Struggles with identical floating elements with no surrounding container
- Demo form is too clean, doesn't show real-world complexity
Frequently asked questions about SlimSnap
What problem does SlimSnap solve?
SlimSnap solves the problem that when you paste a screenshot into AI tools like Claude Code, Cursor, or ChatGPT, the agent usually understands the general UI but still touches the wrong element. The AI doesn't know which specific button you mean even when you've annotated it with arrows. SlimSnap converts the screenshot plus your annotation into structured JSON where every element has coordinates, an ID, and your arrow points at a specific one via the target_ref field.
Does SlimSnap work with multiple similar buttons on the same screen?
Yes, exactly the case the schema was built for. Each element gets a unique ID regardless of how visually similar it is to others. OCR text plus bounding box coordinates plus parent context disambiguate duplicates. So if there are five 'Submit' buttons on the screen, they show up as e_button_5, e_button_8, e_button_11, and your arrow annotation points at exactly one of them.
What AI tools does SlimSnap integrate with?
SlimSnap has a native Claude Code skill that auto-loads the latest capture so you don't even paste the JSON. For Cursor or claude.ai it's a manual paste step—SlimSnap exports the JSON and you drop it into chat with your prompt. Element refs still work, but the agent doesn't auto-grab the latest capture. A Cursor-native skill is on the wishlist if demand shows up.
Is SlimSnap free to use?
Yes, SlimSnap is free to use during launch for both personal and commercial work. The Mac app is closed-source but will be free at launch. The schema and Claude Code skill are open MIT-licensed, so core schema and code are freely available for customization.
Does SlimSnap work on Windows?
No, Windows port is not in the short-term roadmap because the OCR layer is Mac-native and needs a different pipeline. If there's enough signal from Windows users who would actually use it, it moves up the list. You can email [email protected] to express interest.
How token-efficient is SlimSnap's JSON output?
SlimSnap's structured JSON output is around 700 tokens compared to 1,568 tokens for raw image processing on Sonnet. This makes it significantly more efficient for AI agents to process, saving tokens and potentially reducing costs.
What's the edge case where SlimSnap still struggles?
The edge case where it still struggles is identical floating elements with no surrounding container or distinguishing text. This is rare but possible in canvas-based apps. For 95% of UI work, the ID plus bounding box plus annotation combo holds up perfectly.
How does the target_ref field help AI agents?
The target_ref field addresses the failure mode where an agent might rewrite the whole component instead of fixing just the misaligned element. When you annotate a button and the agent sees annotation.target_ref = e_button_3, it has a stronger anchor for what to touch and what to leave alone. This shifts the default from 'rewrite the whole component' toward 'fix the specific element referenced,' though it doesn't eliminate scope creep entirely.
Where can I get the Claude Code skill?
The Claude Code skill is at github.com/bickov/slimsnap-skill, MIT licensed, with install instructions in the README. It automatically identifies the latest capture through ~/.slimsnap/config.json, so you can just type 'fix what I marked' and the agent reads the spec without you pasting anything.
What's the best use case for SlimSnap?
The real wedge is complex layouts with 40 overlapping components where 'the second input in the third card' is the only useful way to point at an element. A simple form demo is too clean—anyone would just open DevTools for that. SlimSnap lands harder on gnarly real-world UIs like dashboards with many overlapping components where precise element targeting is essential.