Back to Devoured - May 12, 2026
DEVOURED
Brief an AI on Web Changes (Website)

Brief an AI on Web Changes (Website)

Design MarkUp
Implement AI launched MarkUp, a Chrome extension that converts website annotations into AI briefs with CSS selectors—eliminating paragraph prompts for Claude Code and ChatGPT.
What: Implement AI launched MarkUp, a Chrome extension that annotates live web pages and exports PNG + markdown briefs with CSS selectors for Claude Code and other AI agents. Free during early access; first 500 testers earn lifetime access.
Why it matters: Shows the evolution of AI tooling toward visual interfaces—annotations with CSS selectors eliminate the ambiguity of text prompts and reduce token waste from lengthy descriptions.
Original article

Draw what you want changed. Let AI build it.

Annotate directly on your live website. Send it to your AI agent. Done.

The fastest way to brief an AI on web changes.

Draw on live pages. Label every change. Export a ready-to-paste brief.

Annotate live pages. Brief any AI in seconds.

MarkUp turns visual feedback into a structured AI prompt. Click the icon, draw on the page, send it to Claude, ChatGPT, or your local agent.

  1. Open MarkUp on any page

    Click the extension icon. The annotation canvas overlays the live page — no devtools, no Figma.

  2. Draw what needs to change

    Drop callouts, sketch arrows, label what's wrong. Each marker is auto-numbered and added to a live changelog.

  3. Send it to your AI

    One click copies a PNG and a markdown changelog with CSS selectors. Paste into Claude, or save to a folder your agent watches.

Build faster with real feedback.

Ship cleaner code with fewer review cycles and better briefs.

Built for speed. Save tokens.

MarkUp turns visual feedback into structured AI prompts. Less back-and-forth. Less guessing. Less wasted context.

  • 7 Annotation Tools
  • <2s From Draw to AI Brief
  • 0 Accounts. Setup. Friction. Free. Forever

Real-time changelog

Every marker you place updates the changelog instantly. No delay, no manual sync, no disconnected sticky notes.

Auto-numbered callouts

Place markers in any order. MarkUp numbers them automatically — your AI gets a clean, indexed brief.

Works every time

No login sessions to expire. No cloud sync to fail. Runs entirely in your browser, ready when you are.

Stop explaining everything to AI. Show it.

Long paragraphs of prompt instructions are the worst part of working with AI. MarkUp replaces them with what your eyes already see — pointed at, labeled, and ready to ship.

Make precise, pixel-perfect changes

Click any element. Label what's wrong. Your AI gets the exact selector — not "the button on the right somewhere."

Save time. Save tokens.

Skip the long descriptions. A drawn callout with three words beats a paragraph of context every time.

Works with Claude, ChatGPT, Copilot, and more

Universal export format — PNG screenshot plus markdown changelog. Paste anywhere your AI accepts files.

Works locally, right in your browser

No accounts. No cloud sync. Your annotations live in your browser. Your data stays yours.

Built for the way you actually work.

Every feature earns its place. No bloat. No upsells. No account gate.

Draw on any live page

Annotate the actual webpage — not a screenshot, not a Figma mockup. Seven tools, any page, any browser tab.

  • Seven annotation tools
  • Works on any website

Auto-numbered changelog

Every callout marker increments automatically and syncs its label to the side panel changelog in real time.

  • Real-time sync
  • Delete any marker

CSS selectors included

Every annotation exports the CSS selector of the element it targets. Claude Code gets a precise address — not a description.

  • Precise element targeting
  • No ambiguity for AI agents

Save to workspace folder

Write exports directly to a local project folder. Mode B drops a structured PNG and markdown file where your Claude Code expects.

  • Local file system access
  • Claude Code compatible

Works with any AI

Export format is PNG + markdown. Paste into Claude, ChatGPT, or Copilot — or drop files into Claude Code for agent workflows.

  • PNG + markdown export
  • Universal AI format

Works locally

Annotation data and settings live in your browser's local extension storage. No backend server, no network requests, no third parties.

  • No account required
  • Your data stays yours

For Agencies

Client feedback arrives as vague notes on old screenshots.

MarkUp replaces that. Annotate the live site, number every change, and export a clean, numbered brief — unambiguous and documented. Hand it to a developer or feed it to Claude directly.

For Developers

The loop from review to Claude Code should be as short as possible.

Annotate the live page, label what needs to change, and export to the folder your agent is watching. The markdown changelog includes CSS selectors — so Claude Code knows exactly which element.

Built for your AI development workflow.

The implementation details that matter when you're shipping real code.

CSS selectors included

Every annotation captures the CSS selector of the element it points to. Your AI agent doesn't guess "which button" — it knows the exact path.

.hero-section > .cta-button[data-variant="primary"]

Workspace integration

Save exports directly to a local folder. Your Claude Code or Cursor agent reads new files automatically — no file upload, no copy-paste, no friction.

~/projects/my-site/feedback/2026-04-25.png

Universal export

PNG image plus markdown changelog. Reads in any AI assistant that accepts files. No proprietary format, no lock-in.

# Change 1: Increase headline contrast
# Element: h1.hero-headline

From long paragraphs of prompts to visual AI briefs in seconds.

Stop typing "make the second card on the right slightly more prominent and maybe adjust the padding." Show it. Send it. Ship it.

  1. Annotate the live page

    No Figma, no re-screenshotting, no context-switching.

  2. Export to your AI

    Clipboard paste or workspace save — your call.

  3. Ship the changes

    Your AI has the image, the labels, and the selectors. It just needs to build.

Answers before you ask.

Everything you need to know about pricing, privacy, and what works where.

Is MarkUp free?

Yes. MarkUp is currently in Early Access. Free for everyone during the beta — all seven drawing tools, the callout and changelog system, clipboard export, and workspace file save. After Early Access ends, MarkUp will offer a free individual tier plus paid Pro for power users. The first 500 testers who share feedback earn lifetime free access at launch.

What browsers does it work on?

Chrome, Edge, Brave, and Arc — any Chromium-based browser. A Safari Web Extension is coming soon.

Does my data leave my computer?

No. MarkUp has no backend server and makes no network requests. All annotation data and settings are stored in your browser's local extension storage. Nothing is transmitted to Implement AI or any third party. Full details at markupextension.com/privacy.

Does it work with Claude, ChatGPT, or Copilot?

Yes. MarkUp exports a PNG image and a plain markdown file — readable by any AI assistant that accepts image or file input. Use clipboard export to paste directly, or workspace export to drop files into a Claude Code or other agent workflow folder.

Can I use it on iPad?

MarkUp for Chrome is a desktop extension. A Safari Web Extension with Apple Pencil support is on the roadmap — pen pressure will map to stroke width.

Is there a team or business version?

Not yet. If you're interested in team features, email [email protected] — we're tracking demand to decide what ships next.

Stop explaining. Start drawing.

MarkUp is in Early Access. Free for everyone.

Explore all 40 articles in today's digest

Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi