proto-buddy

Proto Buddy

Visual design companion for Claude Code. Click-to-annotate feedback on HTML mockups with tabbed comparison, live hot reload, and a history panel.

Install

/plugin marketplace add eighteyes/proto-buddy
/plugin install proto-buddy@proto-buddy

Or via the eighteyes collection:

/plugin marketplace add eighteyes/eighteyes-plugins
/plugin install proto-buddy@eighteyes-plugins

Features

• Tabbed comparison — each HTML file is a switchable tab
• DevTools-style inspector — hover to see element outlines
• Click-to-annotate — click any element, leave a comment, pick a quick action
• Quick actions — keep, remove, size-up, size-down (extensible)
• Annotation badges — numbered circles on annotated elements
• Live/Batch modes — comments fire immediately or accumulate for batch apply
• Hot reload — Claude updates a file, tab reloads instantly
• History panel — all annotations with click-to-navigate and element highlighting
• "NEW" indicators — tabs show when Claude has pushed changes you haven't seen
• Keyboard shortcuts — 1-9 tabs, L/B mode, H history, Enter submit

Usage

The skill triggers on: /proto-buddy, "design companion", "visual review", "compare designs".

You: /proto-buddy
Claude: starts server, opens browser, writes design options, watches for annotations
You: click elements in browser, leave comments
Claude: reads annotations, updates HTML, tabs hot reload

How It Works

1. Node.js server watches a directory for .html files
2. Each file becomes a tab in the browser UI
3. Inspector script injected into each tab enables click-to-annotate
4. Annotations written to .events JSONL file
5. Claude reads events via watch-one.sh (file watcher that exits on new events)
6. Claude modifies HTML, server detects change, WebSocket pushes reload to browser

Zero Dependencies

Raw Node.js stdlib only — http, fs, crypto, path. No npm install needed.

Requirements

• Node.js (v18+)
• fswatch (for the watch-one.sh watcher — brew install fswatch on macOS)

License

MIT