SpecPilot - Give AI Eyes

About

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.