Chrome Extension 100% Free Works Everywhere

Visual context. For AI agents.

Point
Hover over
any element
Click
Select &
annotate it
Describe
Tell AI what
to change
Ship
Watch it
go live
Install Free Extension See how it works
No signup · No tracking · Open source · Free forever
🔒 localhost:3000/dashboard
S

Dashboard

Total Users
12,847
+12.5%
Revenue
$48.2K
+8.2%
Conversion
3.24%
-0.4%
NameStatusAmountDate
Sarah ConnorActive$2,400Apr 18
John WickPending$1,800Apr 17
Neo AndersonActive$3,100Apr 16
0
1
2
Add a note for AI agent
Claude Code
claude-sonnet-4-6
>

Everything you need to talk to AI about UI

One extension. Any website. Zero code changes. Completely free.

🌐

Any Website

React, Angular, Vue, Next.js, Svelte, WordPress, plain HTML — even sites you don't own.

Framework Internals

Extracts React props & state, Vue setup data, Angular component info automatically.

🎯

Smart Selectors

Generates unique CSS selectors + XPath for every annotated element.

📋

Copy for AI

One-click structured Markdown output for Claude, Cursor, GitHub Copilot.

🛠

Shadow DOM Safe

Toolbar lives in Shadow DOM — zero CSS conflicts with the host page.

Freeze Animations

Pause CSS animations and videos to capture the exact state you need.

What Shadowmark can do

Built in. No add-ons. No limits.

Feature
Shadowmark
Framework Support
React — props & state
Yes
Angular component info
Yes
Vue setup data
Yes
Next.js / Nuxt / Remix / Svelte
Yes
Any website you don't own
Yes
Element Data
CSS selector + XPath
Yes
Computed styles capture
Yes
ARIA & accessibility info
Yes
Multi-element selection
Yes
Developer notes per element
Yes
Freeze animations
Yes
Export & Integration
Markdown export for AI
Yes
JSON export
Yes
Shadow DOM safe
Yes
Zero code changes needed
Yes
Free forever
Yes
COMING SOON

MCP Server Integration

Direct tool calls from Claude Code via localhost:3141 — no copy-paste needed. Annotate visually, let the agent read it natively.

How it works

Three steps. That's it.

1

Click the Shadowmark toolbar

A floating pill appears on every page. Click it and hit "Select" to enter annotation mode.

2

Click any element & describe what you want

Hover to see highlights. Click to annotate. Type what the AI should change. Repeat for as many elements as you need.

3

Paste into Claude Code — watch it happen

Hit "Copy for AI" — paste into Claude Code. It reads your code, makes the changes, and your app updates live.

Get Shadowmark

No signup. No tracking. Free forever.