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.
## Divergent Directions
When the user cannot describe what they want in words (signals: "make it look nice", "I have no visual taste", "I'll know it when I see it", repeated "I don't know" on visual questions), stop asking and show. Render 3-4 deliberately divergent directions on one screen. Each option commits to a different aesthetic pole (for example minimal, illustrated, playful, editorial); never show variations of one theme that differ only in accent color or spacing