visualizing-optionslisted
Install: claude install-skill pgoell/pgoell-claude-tools
# Visualizing Design Options
Browser-based visual companion for showing mockups, layouts, wireframes, and diagrams during a design discussion. The user opens a local URL; you write HTML content fragments to a session directory; clicks are recorded back as JSON events.
## When to Use
Decide per question, not per session. The test: would the user understand this better by seeing it than reading it?
Use the browser when the content itself is visual:
- UI mockups: wireframes, layouts, navigation structures, component designs.
- Architecture diagrams: system components, data flow, relationship maps.
- Side-by-side visual comparisons: two layouts, two color schemes.
- Design polish: look and feel, spacing, visual hierarchy.
Use the terminal otherwise: requirements, scope, conceptual A/B/C choices, tradeoff lists, technical decisions.
A question about a UI topic is not automatically a visual question. "What kind of wizard do you want?" is conceptual. "Which of these wizard layouts feels right?" is visual.
## Quick Start
```bash
scripts/start-server.sh --project-dir /path/to/project
```
The script returns startup JSON with `url`, `screen_dir`, and `state_dir`. Save those values for the loop.
If you launched the server in the background and did not capture stdout, read `$STATE_DIR/server-info` to recover them.
Pass `--project-dir` so mockups persist in `.workbench/brainstorm/`. Without it, files go to `/tmp` and get cleaned up on stop. Add `.workbench/` to `.gitignore` if