Key Features:
- Inspect Any Site: Visually target exact UI elements on any website (production, staging, or localhost). Hover to inspect fonts, colors, spacing, and assets.
- Copy Components: Extract UI components like buttons, cards, or entire sections as clean HTML, CSS, or JSX.
- Pick Colors: Capture exact color values from any element, image, or background with a simple hover-and-click workflow.
- Detect Fonts: Inspect font family, size, weight, line height, and other typography details instantly.
- Download Assets: Quickly find and download SVGs, PNGs, and JPGs directly from the page.
- Annotation Mode: Add notes for specific changes directly on the UI.
- Click to Edit: Make style changes directly on an element before copying the context.
- Change-Aware Copy: Exported context includes edits and annotations made.
- Precise Targeting: Send exact classes, selectors, and surrounding context for the chosen element to AI.
- Client Feedback: Clients can install Qursor to annotate UI elements and send precise, AI-ready feedback.
- Faster Handoffs: Streamline communication between design, product, and engineering with shared visual context.
- AI Token & Credit Savings: Reduce AI misfires and wasted credits by providing exact UI context instead of vague screenshots.
How it Works:
Qursor is a Chrome extension designed to provide your AI coding assistant with precise UI context. Instead of relying on screenshots or lengthy descriptions, you can visually inspect any website, point to specific UI elements, and copy clean, structured code-aware context. This allows AI agents to understand the exact element, the desired changes, and the surrounding code, leading to faster fixes and reduced AI spending.
The workflow is simple: install the extension, open any site, click the Qursor bubble, and start inspecting. You can annotate changes, edit styles directly, or simply copy the element's context. This structured output is compatible with any AI coding tool, making your development process more efficient.