Brief an AI on Web Changes (Website)
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.
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.
-
Open MarkUp on any page
Click the extension icon. The annotation canvas overlays the live page — no devtools, no Figma.
-
Draw what needs to change
Drop callouts, sketch arrows, label what's wrong. Each marker is auto-numbered and added to a live changelog.
-
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.
-
Annotate the live page
No Figma, no re-screenshotting, no context-switching.
-
Export to your AI
Clipboard paste or workspace save — your call.
-
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.
Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi