Generate Balsamiq-style wireframes instantly with AI and share them with your team.
Transform natural language descriptions into professional wireframes in seconds. Perfect for rapid prototyping, client presentations, and collaborative design.
- ⚡ Instant Generation - Wireframes in < 3 seconds
- 🔗 Shareable Links - Share with team/clients instantly
- 💬 Collaborative Feedback - Comment on components
- 📊 Version History - Track all changes
- 🎨 Visual Editor - Drag-and-drop editing (coming soon)
- 🎯 Production Code - Convert to React/HTML/Vue
npm install -g @hypersketcher/clihypersketcher auth loginclaude plugin install hypersketcherIn Claude Code:
/sketch login form with email and password
| Command | Description | Example |
|---|---|---|
/sketch <description> |
Generate wireframe | /sketch dashboard with sidebar |
/sketch-pro <description> |
High-quality wireframe (5-8s) | /sketch-pro e-commerce product page |
/sketch-feedback <changes> |
Modify last wireframe | /sketch-feedback move button to center |
/sketch-to-prototype [framework] |
Create production code | /sketch-to-prototype react |
/sketch mobile app home screen
/sketch-feedback add search bar at top
/sketch-feedback make cards larger
/sketch-pro enterprise dashboard
# Returns shareable link: https://hypersketcher.app/w/abc123
# Share with client for instant feedback
/sketch e-commerce checkout flow
/sketch-to-prototype react
# Generates React components with Tailwind CSS
HyperSketcher creates professional Balsamiq-style wireframes with:
- 15 Component Types: Headers, buttons, inputs, cards, navbars, sidebars, images, icons, lists, links, dividers, and more
- Smart Layout: Automatic positioning with 8px grid alignment
- Visual Hierarchy: Size ratios, spacing, and component sizing standards
- Professional Quality: No overlaps, proper bounds, balanced composition
- 8px Grid System for consistent spacing
- 1.5-2x Size Ratios for clear hierarchy
- Standard Component Sizes (280px, 320px, 360px for inputs)
- Semantic Colors (blue for primary, red for destructive)
- Responsive Presets (Desktop 1200×800, Mobile 375×812)
Authenticate with hypersketcher auth login to unlock:
- ✅ Shareable URLs -
https://hypersketcher.app/w/abc123 - ✅ Persistent Storage - Access from any machine
- ✅ Version History - Track all iterations
- ✅ Collaborative Comments - Team feedback
- ✅ Visual Editor - Browser-based drag-and-drop (coming soon)
Without authentication, the plugin works locally:
- ✅ Generates wireframes instantly
- ✅ Opens in browser
- ✅ Saves to
~/.hypersketcher/cache/
Claude Code Plugin → HyperSketcher CLI → Cloud Platform
(commands) (generation) (storage & sharing)
The plugin delegates all logic to the CLI, which:
- Generates wireframe JSON using AI (GPT-5 Nano via OpenRouter)
- Applies professional design principles automatically
- Uploads to cloud (if authenticated) or saves locally
- Returns shareable link or local HTML file
- Opens in browser
- Getting Started: docs.hypersketcher.app/getting-started
- CLI Reference: docs.hypersketcher.app/cli
- Component Library: docs.hypersketcher.app/components
- Examples: docs.hypersketcher.app/examples
We welcome contributions! See CONTRIBUTING.md for guidelines.
# Clone the repo
git clone https://github.com/hypersocialinc/hypersketcher-plugin.git
cd hypersketcher-plugin
# Test locally
claude plugin validate .
claude --plugin-dir . --dangerously-skip-permissionsMIT © HyperSocial Inc
- Platform: hypersketcher.app
- CLI Package: @hypersketcher/cli
- Main Repo: github.com/hypersocialinc/hypersketcher
- Issues: github.com/hypersocialinc/hypersketcher-plugin/issues
Give a ⭐ if this project helped you!
Made with ❤️ by the HyperSketcher team