Back to AI & LLM Tools

Page Scrawl

Draw on any web page and type a note on each mark. Every mark is tied to the element under it: its selector, text and styles, plus the component and source file on development builds. It works two ways. With the Claude in Chrome extension, Claude reads the marks straight from the page. Without it, you copy or save the marks and paste or attach them in any chat.

Page Scrawl is inspired by Scrawl, the macOS menu-bar app by Kit Langton. Scrawl records your screen, voice and on-screen markings and packages them for an AI agent, on the idea that showing an agent a problem beats describing it. Many thanks to Kit for the idea. This is a much simpler implementation: no app and no recording, only marks drawn on one web page in the browser. It uses the same ⌥⇧S shortcut. For the full version, use Kit's app.

Bookmarklet

Drag this link to your bookmarks bar:

✎ Scrawlloading the script…

Clicking it here works as a demo. The script is overlay.js from the marking-up-pages-v0.2.0 tag of oaustegard/claude-skills, fetched when this page loads, so the link always matches that release.

Using it

  1. Click the bookmarklet on the page you want to mark up, then circle, underline, point at or cross out what is wrong.
  2. A note box opens after each mark. Type or dictate what should change, then press Enter.
  3. ⌥⇧S turns drawing off so you can click around the page, and on again to keep marking.
  4. Press Done, then share the marks one of two ways:
    • With Claude in Chrome running on that tab: tell Claude to look at your marks. Claude reads them from the page directly.
    • Without it: press Copy to put the marks on the clipboard as text, or Save to download a .scrawl.json file, and paste or attach it in any chat. Claude then works from the selectors, text and styles in the file, and cannot see the page or take screenshots.

Marks stay in the tab until you reload it. Sites with a strict Content-Security-Policy may block bookmarklets.

The Claude skill

The skill requires the Claude in Chrome extension, because Claude has to run the overlay inside your browser tab to open it, read the marks and take screenshots. Without that extension, use the bookmarklet's Copy and Save buttons instead. With it, the marking-up-pages skill lets Claude in Chrome open the overlay itself, read the marks, find the source for each one and make the changes, or write up the edits when the site is someone else's. Download marking-up-pages.zip from the v0.2.0 release and upload it under Customize, Skills in Claude.ai.