Twiq - Visual feedback for AI agents

Description

Tweak any element and get structured context that AI coding tools can act on. Stop describing UI bugs to your AI. Just point at them. 🎯 Twiq is a zero-setup Chrome Extension that acts as the ultimate visual context bridge between human developers and AI coding agents like Cursor, Claude Code, and GitHub Copilot. Instead of manually typing out which button is broken, figuring out its CSS classes, searching for the React file it lives in, and copying the console errors—Twiq does it all for you in a single click. It instantly translates visual pixels into structured, machine-readable Markdown that AI agents understand perfectly. 🚀 CORE FEATURES: 🔍 Deep DOM Forensics: Click any element to instantly extract its exact CSS bounding box coordinates (x, y, width, height), outerHTML, computed styles, and strict CSS selector paths. ⚛️ React Fiber Tracing: Twiq hooks directly into the Chrome Debugger Protocol to reverse-engineer minified React code. It extracts the actual Component Name and traces it back to your local source file and line number (e.g., Hero.tsx:42:15). Your AI will know exactly which file to edit. 🚨 Live Error Sniffing: Stop copying from the dev console. Twiq silently buffers the last 60 seconds of console.error logs and unhandled promises. If you click a broken UI element, Twiq automatically attaches the relevant error trace to your bug report. 📱 Responsive Context: Automatically tags your viewport (Mobile, Tablet, or Desktop) so your AI writes accurate, layout-specific media queries (like Tailwind's md: or sm: classes). 🔌 Zero Setup Required: No npm install, no local MCP servers, and zero modifications to your repository. Just install the extension and start annotating on any localhost or staging site. 🛠️ HOW IT WORKS: Activate: Press Alt + S to toggle Inspect Mode. Annotate: Click any element on the screen and type a simple instruction (e.g., "Make this button blue"). Copy: Press Alt + C to compile the DOM, React, and Error data into structured Markdown. Execute: Paste it into Cursor or Claude. The AI reads the rich context and writes the perfect fix on the first try. Protect your flow state, save thousands of tokens, and solve UI problems at the speed of thought. Note: Twiq runs 100% locally in your browser. No data is collected, stored, or sent to third-party servers.

Details & SEO