🧰 MockuRATOR Companion — Snap · Grab · Log
One Chrome extension, three powers on every page, all on a right-click:
📸 Full-page snap — the whole page top to bottom as one seamless PNG. No scrolling, no stitching.
🎯 Element grab — hover highlights, click downloads it pre-cut. Works even on strict-CSP sites that block the bookmarklet.
🪲 One-click MockuLog — arms the recorder instantly (badge shows REC); right-click again saves the log. No bookmarklet, no reload ritual.
Install once (30 seconds): unzip → chrome://extensions → Developer mode → Load unpacked → pin it. Yours forever; a Web Store submission kit is inside if you ever want one-click installs for others.
📷 MockuGrab — the capture bookmarklet
Setup: drag the MockuGrab button to your bookmarks bar (once).
Use: on any page, click it, hover the element you want — it highlights — then click. A pre-cut PNG downloads, named after the page, ready to paste here. Esc cancels.
Works on most sites; some strict sites block injected scripts — for those, use the Companion's 🎯 element grab instead.
🪲 MockuLog — F12 without F12
Your app knows why it's broken — MockuLog writes the confession down so you never open DevTools again.
How: drag the 🪲 button to your bookmarks bar once. On any misbehaving page: click it (a small counter pill appears), reload the page so it hears everything, do the thing that breaks, then click the pill — a .txt log downloads.
Then: drop that .txt onto this board. It lists under Items, rides inside your Export Package, and the report tells the AI to read it. Errors, failed requests, timings — all named, all timestamped.
For your own apps there's a drop-in version: mockulog.js — one script tag and every dev build records itself (the install prompt below has any AI wire it in, dev-only).
MockuRATOR shortcuts
Slice it. Mark it. Send it.
Tools
| S | Slice — drag a box around a section to cut it out |
| V | Move — drag pieces; click any piece, box, or arrow to edit it |
| H / hold Space | Pan the view |
| B / A / P / T | Box / Arrow / Pen / Text |
| 📸 Capture | Grab any window, browser tab, or whole screen via the system picker — desktop apps included (HTTPS site only) |
Marks
| Click a mark (in Move) | Caption it, recolour it, toggle box fill — in the Selected mark panel |
| Fill the box | Translucent fill for highlighting a whole region |
| Widgets | Pick a chip, drag to place (click = default size); double-click renames; the note = what it does; the report becomes a build spec |
| Drag / corners / ends | Move a selected mark, resize a box by its corners, re-aim an arrow by its endpoints; Reverse flips an arrow |
Canvas
| Mouse wheel | Zoom |
| Space-drag | Pan |
| Del | Delete selected piece |
| Ctrl+Z | Undo |
| Ctrl+D | Duplicate selected piece |
Hand it to your AI
- With an Export Package: “Read report.md first — every mark and issue is explained there. Then study board.png. Address each issue and tell me exactly what you changed, per issue.”
- With a MockuLog capture (.txt): the analysis prompt tells the AI what the file should look like and to stop if it got the wrong one — then errors, causes, fixes by severity.
- Installing the recorder: the install prompt has any AI vendor mockulog.js into your app, loaded in development only.
- With both together: “Cross-reference them: which of the visual issues I marked are explained by errors in the log? Then fix each, telling me what you changed.”
Tips
Export
| Export PNG | The annotated board as an image, copied to clipboard |
| Export Package | ZIP: PNG + an AI-readable report.md + reload JSON |
Saved you some time? ☕🍺 Buy me a coffee or a beer on Ko-fi