From installation to AI-ready Markdown in six seconds. Everything you need to know.
Twiq is an AI-native Chrome extension that turns visual clicks into deep, structured Markdown context. Instead of describing bugs with vague words or screenshots, you point at the element, click, and Twiq extracts the exact DOM snapshot, CSS bounding box, React component name, source file and line number, viewport metadata, and live console errors — all compiled into a Markdown report ready to paste into Cursor, Claude Code, Copilot, or any AI coding agent.
Installing Twiq takes under 10 seconds:
From broken UI to AI-ready Markdown context in six seconds.
Press Alt+S to enter Inspect Mode. A status badge appears in the top-right corner confirming Twiq is active.
Move your cursor over any element on the page. A blue dashed bounding box highlights the target. The element is now ready for inspection.
Click the element. A modal appears where you can type your instruction, e.g. "Make this button rounded and blue" or "Fix the alignment on mobile".
Confirm the marker. Twiq pins a numbered lime-green badge on the element. Repeat steps 2–4 for as many elements as you need to document.
Press Alt+C to compile all markers into a structured Markdown report. It's automatically copied to your clipboard.
Open Cursor, Claude Code, Copilot, or any AI agent. Paste the Markdown. The AI reads exact context and writes the fix — right the first time.
No npm install. No local MCP servers. No codebase modifications. Runs entirely in the browser. Just install and click.
Extracts outerHTML, bounding box coordinates, computed styles, and exact selector paths on every click.
Hooks into Chrome Debugger Protocol to reverse-engineer minified React. Extracts real component names and source locations.
Silently buffers 60 seconds of console.error logs and unhandled Promise rejections. Auto-attaches to your report.
Auto-detects viewport (Mobile / Tablet / Desktop) so your AI writes accurate Tailwind md: and sm: media queries.
Dark-mode glassmorphic interface. Four detail levels: Compact, Standard, Detailed, Forensic. Custom marker colors.
Every click produces a rich data snapshot. Here is everything included in your report:
No mouse acrobatics. No context menus. Every action has a shortcut.
Control how much context Twiq includes in each report. Choose the right level for your workflow.
Minimal output. Selector path and component name only. Quick captures.
Adds bounding box, viewport info, and primary computed styles. Default.
Full DOM snapshot, all computed styles, console errors, and component tree.
Everything including React fiber tree, network logs, full CSS cascade, and accessibility tree.
Twiq generates structured Markdown that every AI agent understands natively.
Designers and PMs click around staging, leave notes, and ship structured Markdown to devs. No more Figma comments lost in translation.
Click a "Submit" button that's silently failing. Twiq auto-attaches the hidden 500 network error from the console to your report.
Open mobile view, click a misaligned card, tell AI to fix it. Twiq tags viewport as "Mobile" so AI edits the right Tailwind classes.
Working on a massive React codebase? Click any element and Twiq tells you the exact .tsx file and line it lives in. No more Ctrl+Shift+F marathons.
Twiq's Markdown output works with every major AI coding agent. Paste and go.
Instead of "fix this button", write "Make this button's border-radius 12px, add a hover scale effect, and change text color to white". The more specific your instruction, the better the AI output.
Toggle DevTools to mobile view, drop markers, then repeat on desktop. Twiq tags each marker with the correct viewport, so your AI knows which breakpoint to target.
Twiq buffers the last 60 seconds of console errors. Before dropping a marker, trigger the bug so the error log captures the issue. It will be auto-attached to your report.
If a bug spans multiple elements (a broken form with a bad button and missing validation), drop separate markers on each and copy them all at once. The AI sees the full picture.
Use Compact for quick CSS tweaks. Standard (default) for most bug fixes. Detailed for complex React issues. Forensic when you need the full picture including fiber tree and network logs.