← ClaudeAtlas

visualizing-optionslisted

Use when a design discussion needs visual options shown in a browser: mockups, layout comparisons, wireframes, or architecture diagrams that the user can click to choose between. Spawns a local server and renders content fragments.
pgoell/pgoell-claude-tools · ★ 0 · Web & Frontend · score 68
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