I'm the creator of vibe. I built this because I was tired of describing UI bugs to Claude Code when I could just show them.
The problem: When debugging with AI assistants, visual context gets lost. You end up typing "the button is misaligned by about 3 pixels" when you could just show a screenshot.
What it does:
- Captures screen regions using macOS's native screencapture
- Bundles the screenshot with git status, diffs, and terminal logs
- Feeds everything to Claude Code for analysis and fixes
How I built it:
The core insight was that Claude Code supports custom commands via markdown files in ~/.claude/commands/. So I created two commands:
1. /vibe-select - Calls screencapture -i, saves to .vibedbg/region.png, records metadata
2. /vibe-ask - Constructs a prompt with:
- Screenshot file path (Claude Code can read images)
- git status and git diff output
- Last N lines of terminal logs
- User's debug instruction
The whole thing is ~200 lines of JS + shell scripts. I deliberately kept it minimal—no frameworks, no dependencies beyond Node.js.
Technical details:
- Uses Node.js for the CLI
- Integrates with Claude Code via custom commands
- Stores debug sessions in .vibedbg/ directory
- Works from subdirectories (finds nearest .vibedbg/ or git root)
- MIT licensed
It's made my debugging workflow much faster, especially for frontend issues. The workflow is now:
1. See bug → /vibe-select
2. Capture screen → /vibe-ask "fix this"
3. Claude analyzes, proposes fix, applies it
4. Done
I'd love feedback on the approach and any ideas for improvements. Happy to answer questions about the implementation!
Some questions I'm thinking about:
- Should I add Linux/Windows support? (Would need different screenshot tools )
- Is there value in video capture instead of just screenshots?
- Would this work better as a VSCode extension?
blurjp•3w ago
I'm the creator of vibe. I built this because I was tired of describing UI bugs to Claude Code when I could just show them.
The problem: When debugging with AI assistants, visual context gets lost. You end up typing "the button is misaligned by about 3 pixels" when you could just show a screenshot.
What it does: - Captures screen regions using macOS's native screencapture - Bundles the screenshot with git status, diffs, and terminal logs - Feeds everything to Claude Code for analysis and fixes
How I built it:
The core insight was that Claude Code supports custom commands via markdown files in ~/.claude/commands/. So I created two commands:
1. /vibe-select - Calls screencapture -i, saves to .vibedbg/region.png, records metadata 2. /vibe-ask - Constructs a prompt with: - Screenshot file path (Claude Code can read images) - git status and git diff output - Last N lines of terminal logs - User's debug instruction
The whole thing is ~200 lines of JS + shell scripts. I deliberately kept it minimal—no frameworks, no dependencies beyond Node.js.
Technical details: - Uses Node.js for the CLI - Integrates with Claude Code via custom commands - Stores debug sessions in .vibedbg/ directory - Works from subdirectories (finds nearest .vibedbg/ or git root) - MIT licensed
Demo video (2:43): https://youtu.be/tCvOZ0IUxm0
It's made my debugging workflow much faster, especially for frontend issues. The workflow is now: 1. See bug → /vibe-select 2. Capture screen → /vibe-ask "fix this" 3. Claude analyzes, proposes fix, applies it 4. Done
I'd love feedback on the approach and any ideas for improvements. Happy to answer questions about the implementation!
Some questions I'm thinking about: - Should I add Linux/Windows support? (Would need different screenshot tools ) - Is there value in video capture instead of just screenshots? - Would this work better as a VSCode extension?
GitHub: https://github.com/Blurjp/vibe