Stylecast
Visual element editor that supercharges your vibecoding skills...
Style any website element visually in your browser and send changes directly to AI Chat - no copy/paste, no context switching.
🎯 How It Works
- Browser → Right-click any element on any website to open the visual editor
- Style → Edit typography, colors, layout, borders, and shadows in real-time
- Send → Click "Send to VS Code/Cursor"
- AI Chat → Opens automatically with formatted prompt ready to apply changes to your source code
✨ Features
- Visual Element Editor with comprehensive styling controls
- Live Preview - see changes in real-time
- Auto AI Chat Integration - works with GitHub Copilot (VS Code) and Cursor Chat (Cursor)
- WebSocket Bridge - instant communication between browser and editor
- Smart Detection - automatically detects VS Code or Cursor and routes to the right AI chat
🚀 Usage
- Click the Stylecast icon in your browser toolbar
- Click "Start Inspector"
- Click any element to open the visual editor
- Make your style changes
- Click "Send to VS Code/Cursor"
- AI Chat opens automatically with your changes ready to apply!
⚙️ Settings
- Auto-start server - Launch WebSocket server on startup (default: on)
- Auto-send to AI Chat - Automatically paste to chat (default: on)
- Enable AI Chat Integration - Auto-open chat panel (default: on)
- Port - WebSocket server port (default: 47823)
🎯 Vibecoding Efficiency
Stylecast eliminates the friction between visual design and code:
- No more copy/pasting between DevTools and your editor
- No more typing out CSS properties manually
- No more context switching between browser and IDE
- Just vibe, style, and let AI handle the code updates
🛡️ Privacy
- 100% local - all communication stays on localhost
- No external servers - direct connection between browser and editor
- No data collection - your code never leaves your machine
🔧 Troubleshooting
Browser can't connect?
- Check status bar shows "🟢 Stylecast: 0"
- Restart the extension if needed
AI Chat not opening?
- VS Code: Make sure GitHub Copilot is installed
- Cursor: Built-in chat, no extra setup needed
- Content is always copied to clipboard as fallback
Want to see what's happening?
- View → Output → "Stylecast" for detailed logs
📄 License
MIT License - see LICENSE
| |
