Visual Companion
Visual Companion is a browser-based visual guide for brainstorming with Alex. It allows Alex to display mockups, diagrams, and visual comparisons directly in your browser — and you can select options by clicking.
What Is Visual Companion
Visual Companion is part of the brainstorming skill (see Superpowers). It activates automatically when Alex needs to present options visually — e.g., UI wireframe layouts, architecture diagrams, or design comparisons.
It is not a standalone feature you activate manually. Alex launches it when appropriate.
When It’s Used
Visual Companion activates when the content is visual in nature:
| Situation | Example |
|---|---|
| UI mockups | Wireframes, layouts, navigation structures |
| Architecture diagrams | System components, data flows, relationships |
| Visual comparison | Two layouts, two color schemes |
| Design feedback | Spacing, visual hierarchy, look and feel |
| Spatial relationships | State machines, flowcharts, ER diagrams |
It is not used for text or tabular questions — “which framework to choose?”, “which features are in scope?” — where Alex uses interactive questions instead.
How It Works
- Alex starts a local HTTP server on a random port
- Generates HTML content (mockup, diagram, comparison)
- Sends you a URL to open in your browser
- You see the visual content and select options by clicking
- Alex reads your selections and continues working
Interface
Visual Companion displays an interactive page in the browser with:
- Clear content — mockup, diagram, or comparison
- Clickable elements — select an option by clicking
- Selection indicator — highlights the chosen option
- Dark OLED theme — consistent with CoreSynth design
Technical Details
| Parameter | Value |
|---|---|
| Protocol | HTTP (localhost) |
| Port | Dynamic (automatically assigned) |
| Content format | HTML (fragments or full documents) |
| Persistence | Saved in .superpowers/brainstorm/ project directory |
| Interaction | Click on elements, select options |
Fragments vs. Full Documents
Alex can generate:
- Fragments (default) — content only, the server automatically adds header, CSS, and interactive elements
- Full documents — when Alex needs full page control (starts with
<!DOCTYPE)
Security
- Server runs on localhost only — not accessible from the internet
- Content is generated locally, no external communication
- Server is automatically stopped when the session ends
Next Steps
- Superpowers — Skills and workflows
- Interactive Questions — How Alex asks for decisions
- Alex AI — Introduction to Alex
Need help? Open a support ticket or ask Alex in your panel.