SpecPilot - Give AI Eyes

SpecPilot is a developer tool that bridges the gap between UI and AI coding agents. 🎯 What it does: Point at any UI element on a webpage, and SpecPilot instantly extracts its complete context — computed styles, colors, fonts, assets, and structural information — then formats it into a clean prompt you can paste directly into Claude, Cursor, or any AI coding assistant. ✨ Key Features: • Hover & Click Inspection — Hover to highlight, click to select. It's that simple. • Computed Styles — Extracts all CSS properties with inheritance lookup • Color Picker — View colors in HEX, RGB, HSL, and Tailwind formats • Asset Extraction — Images, SVGs, and fonts used by the element • AI-Ready Prompts — One click to copy a structured prompt for your AI assistant • JSON Export — Raw data for developers who prefer working with structured output • History — Keeps your last 10 inspections for quick access • Keyboard Shortcut — ⌘⇧E (Mac) / Ctrl+Shift+E (Windows) for power users • Side Panel UI — Clean, dark-themed interface that stays out of your way 🛠️ How to use: 1. Click the SpecPilot icon in your toolbar (or press the shortcut) 2. Hover over any element — it highlights in real-time 3. Click to select — a popup appears with format options 4. Choose "AI Prompt" or "JSON" — it's copied to your clipboard 5. Paste into your AI coding assistant and describe what you want to change 👨‍💻 Built for: • Frontend developers using AI coding assistants • Designers who need to inspect and communicate UI specs • Anyone who spends time describing UI elements to AI 🔒 Privacy: SpecPilot runs entirely in your browser. No data is sent to any server. Your inspections stay on your device. 💡 Pro tip: Use the keyboard shortcut ⌘⇧E (Mac) or Ctrl+Shift+E (Windows) to quickly toggle inspection mode without touching the mouse.