Give your AI coding agent eyes. Screenshot any page — or snapshot your entire app — annotate in Screenote, and let Claude Code read your feedback — all without leaving the terminal.
In Claude Code, run:
/plugin marketplace add ivankuznetsov/claude-screenote
/plugin install claude-screenote@screenote-marketplace
On first use, Claude Code will open a browser window to authorize access to your Screenote account.
Tell Claude Code to screenshot a page:
/screenote http://localhost:3000/login
You'll get a link to annotate the screenshot in Screenote. Draw on it, leave comments, then pull the feedback back:
/screenote feedback
Claude sees every annotation with its position and comment, and can start fixing things right away.
Take a visual snapshot of every page in your app at once:
/snapshot http://localhost:3000
The agent discovers all routes in your codebase, handles authentication, and screenshots each page. Every screenshot is tagged with the current date and last git commit hash.
You Claude Code Screenote
│ │ │
│ "fix the login page" │ │
│ ──────────────────────────►│ │
│ │── /screenote /login ──────►│
│ │ │
│ open link, draw annotations, leave comments │
│ ◄──────────────────────────────────────────────────────►│
│ │ │
│ "ok read my feedback" │ │
│ ──────────────────────────►│ │
│ │── /screenote feedback ────►│
│ │◄── annotations + regions ──│
│ │ │
│ │ (fixes code based on │
│ │ your visual feedback) │
│ │ │
│ │── /screenote /login ──────►│
│ │ (screenshot to verify) │
/screenote https://myapp.com/dashboard
Works with any URL your machine can reach — localhost, staging, production.
/snapshot http://localhost:3000
The snapshot workflow:
- Discovers routes — scans your codebase for route definitions (React Router, Next.js, Vue Router, Express, Django, Rails, etc.)
- Handles auth — logs in if needed so authenticated pages are captured
- Screenshots every page — navigates to each route and takes a full-page screenshot
- Tags with metadata — every screenshot title includes the date and last git commit hash (e.g.,
App Snapshot — 2025-06-15 — a1b2c3d — /dashboard) - Uploads to Screenote — all screenshots are uploaded for review and annotation
Use mobile for mobile viewport: /snapshot mobile http://localhost:3000
After you've annotated the screenshot in Screenote:
/screenote feedback
Claude matches your local project name to a Screenote project, lists recent screenshots by title, and lets you pick one. Each annotation is presented with its position and comment, then Claude offers to fix the issues.
You can also just describe what you want:
/screenote the signup page
Claude will figure out the URL from your project's routes.
The plugin automatically matches your local working directory name to a Screenote project. If no match is found, it asks you to pick an existing project or create a new one.
- A Screenote account
- Claude Code CLI
- Playwright plugin for browser screenshots
MIT