Wingman

About

Wingman lets you identify problems in your web application by pointing, clicking, and providing feedback - then automatically generates an AI-ready prompt that will fix the issue.

🎯 One-Click Capture
Press ⌘⇧K (Mac) or Ctrl+Shift+K (Windows/Linux) to instantly activate feedback mode. Click any element on the page to select it and add your feedback.

📸 Smart Screenshots
Automatically captures the visible tab area with your selected element highlighted. No need for external screenshot tools.

🔍 Precise Element Selection
Click any element to generate robust CSS selectors and capture its properties. Works with complex web applications including React, Vue, and Angular.

📝 Rich Context Collection
Captures everything developers need:
• Screenshot with visual markers
• CSS selectors for precise targeting
• Console logs and errors
• Network timing data
• React component metadata (when available)
• Page URL and viewport size

📋 Flexible Output Modes
• Clipboard: Copy formatted feedback instantly
• Local Server: Send to localhost for development
• Remote: Share with your team via secure tunnel

✨ Beautiful Interface
Modern, polished UI with Geist font and gradient themes. Clean animations and thoughtful interactions make feedback capture a pleasure.

Perfect For:
• Designers: Quickly flag visual issues and UX problems
• Developers: Get precise bug reports with full technical context
• Product Teams: Streamline feedback collection and prioritization
• QA Teams: Create detailed, reproducible bug reports

How It Works:
1. Press the keyboard shortcut or click the extension icon
2. Click any element on the page to select it
3. Add your feedback in the annotation panel
4. Generate an AI-ready prompt with full context