The Sea Room
The Garden Room
The LoftDesign system
h1color.accent#23465C
Aafont.displayIowan · Avenir
Every website is your design playground.
Inspect any live page like a design file. Tweak it in place, check it for accessibility and usability, and send your coding agent the exact change.
- Free to start
- Runs locally
- No account needed
From “how did they build that?”
to a change you can see.
01Inspect
Inspect it like a design file.
Change it where it lives.Click anything on a live page. Read its measured values, then change them in place.
- Measured type, color, spacing and contrast
- Rewrite text, resize, move, duplicate
- Spacing per side, row or column, full width or fit
img · 307 × 230 → 307 × 26402Responsive
Every width, side by side.
Scrolling together.See every device size at once.
- Up to six devices, side by side
- Scroll one and all follow
- Real layout and media queries
1280 → 768 → 390 → 37503Localize
Ship it in Arabic.
Check it first.Open the site’s Arabic version, then check how it holds up.
- Uses the site’s own language version when it has one
- Mirrors the layout when it doesn’t
- Checks direction, clipping and fonts
lang="ar" dir="rtl"04Extract and Audit
Read it as a system.
Then audit it.Values read from the rendered page. Findings checked against WCAG 2.2 and the ten usability heuristics.
- Colors, fonts, assets and tokens in seven formats
- HEX, RGB, HSL or OKLCH, in px or rem
- A free audit: preview fixes, export PDF or Markdown
--color-accent: #2554C7;05AI mode
Ask about anything on the page.
With your own AI.Pick an element and ask. Its measured styles go along as context.
- Paste a key, or use your own server
- Pin comments or paste a screenshot, then ask
- The answer changes the page, with one Undo
Our AI, with no key, is coming soon.
- Recreate this animationCreate prompt
- Build a card like this oneCreate prompt
- Make this button easier to tapAI mode
- Fix these audit findingsAudit
- Turn my edits into codePrompt from edits
button · padding 12px 20px → ask06And more
The details
you reach for.Pick a color and know everything about it.
- Layout grid and color-vision previews
- Copy an element, paste it on another site, match its style
- Copy the working code of any element
- The extension in Arabic, right to left
- VInspect
- KScale
- IPick a color
- ⌥Alt↑Parent layer
- ⌘CtrlDDuplicate
- ⌥AltRLay out in a row
- ⌘CtrlZUndo
- ?All shortcuts
Press ? for all 48 shortcuts.
#A797FF → 50 to 950 · 5.06:1
Enough watching.
Make your move.
Three example sites with the real toolbar on top. Click anything to change it, press K to scale, or open any tool. Each change is written below as code.
Your edits, as code
Change something above and it shows up here.
Inspecting needs a mouse or trackpad, so on a phone this demo is a preview. Open this page on a computer to select and edit the example site, or add the extension to try it on any site.
The extension’s real tools, on example sites. Nothing is sent, and edits reset when you reload.
Pick your role.
See what you take away.
Turn a reference into a decision.
- Read real type, color, spacing and radius values instead of eyeballing a screenshot.
- Check contrast on the element, then try a better value on the live page.
- Compare responsive states before the handoff.
- Copy an element from one site, paste it on another, and match its style in one click.
- AaHeadingIowan Old Style 64px · #221D18
- Body on surface#463F37 on #F4EFE79.05:1 AAA
- BookButton#23465C · radius 999px
Start from measured values.
- Export tokens in seven formats, in your colors and units.
- See the technologies a site uses, and download its assets.
- Copy a prompt written for your coding agent: Claude Code, Cursor, Codex, Copilot and more.
- Copy the working code of any element, with notes on what the page does with it.
@theme {:root { --color-accent: #23465C; --color-surface: #F4EFE7; --color-text: #221D18; --font-display: "Iowan Old Style"; --radius-button: 999px;}Make the review something you can see.
- Audit a page against WCAG 2.2 and the ten usability heuristics; each finding is linked to its element.
- Preview a fix on the page before anyone writes a ticket.
- Turn the finding into a prompt for the tool your team already uses, or share the report as a PDF.
Reassurance only at the end of the pageRepeat “Free cancellation up to 7 days” beside Check availability.
Prompt forClaude Code
Take the design
out of the browser.
A spec, tokens and a prompt: the work leaves the browser as code.
Get the spec
One scan reads the rendered page into six tabs, with measured values. Below: the scan of Halden, the example site.
- Colors10 colors · 4 roles
- Fonts3 familiesAa
- Assets10 assets
- Tech2 found
JS - Audit1 medium · free98
- Tokens7 formats
CSS
Drop the tokens into your stack
What step 1 read, as tokens in the format your project uses. This is real exporter output for Halden.
/* color */
--color-accent: #23465C;
--color-surface: #F4EFE7;
--color-text: #221D18;Let your tool build it
Prompt from edits writes what you changed on the live page as a prompt tuned for the tool that builds it, with the exact before and after values. Pick a tool to see exactly what it gets.
Your edits
3 edits on Halden
- color accent
#23465C#2F6B57 h1.hero__titlefont-size64px72pxa.button--primaryradius4px999px
Example edits on the Halden demo site.
Prompt from edits
Written for Claude Code
Your tool
7 DAYS OF EVERYTHING · THEN FREE OR PRO
Try it all for 7 days.
Keep the free tools forever.
Every install starts with the full extension and no card. After day 7, Free stays free and Pro unlocks the full power of each tool.
Free
$0free forever
The essentials, with limited options in each tool.
Add to Chrome- Inspect any element and read its size, spacing, colors and type
- Color picker with contrast checks
- Extract colors, fonts, images and the tech stack; copy single values and JSON tokens
- Audit score with the top issues
- Responsive view with two devices side by side
- Live edits to color, text and font size, with undo and redo
- AI mode, Audit with AI and prompts
- Localize a site
Pro
$12every 3 months
$49$39once · first 100 buyers
Cancel any time. Pro keeps working until the period you paid for ends.
One payment, every Pro feature as it grows. Then $49.
Start your 7 days- Everything in Free, without the limits
- Every edit: spacing, layout, scale, drag and multi-select; prompt from your edits
- All token formats, including Figma variables, and bulk asset download
- The whole audit: every finding, heuristic walkthroughs, performance, fix preview and the evidence report
- Responsive with up to six devices of your choice and synced scroll
- AI mode and Audit with AI, on your own key or server
- Prompts for any section, edit or audit
- Localize a site, Arabic and right to left included
Prices are in US dollars. Payments, receipts and tax are handled by Polar. A license works on up to 3 browsers. Refunds within 14 days of the first payment: write to support. Lifetime covers Pro features of the extension; a hosted AI, if we ever offer one, would be priced separately. “Add to Chrome” opens the Chrome Web Store listing.
What stays with you,
and what leaves.
Pages stay in your browser
Scans, edits, audits and prompts run on the page in your tab. No account, and unless you use Your AI, nothing about the pages you open is uploaded.
Usage counts, never content
Anonymous feature counts are on by default, after a notice: never URLs, page content or what you type. Switch them off in Settings, under Privacy.
Your AI, only when you ask
AI mode and Audit with AI send your message and the context you keep on straight to your provider or server, after you agree once. Localize uses your AI only if you choose it.
A little clarity
before you start.
Still curious?
Get in touch
What does the extension analyze?
Visible page structure, colors, typography, spacing, radii, shadows, visual assets, design tokens, technology signals, and detectable UX and accessibility concerns, the ten usability heuristics, and loading and stability measured on the page you have open. Results depend on what the browser can access: a very large page is read from its first 1,200 elements, and frames from other sites aren’t read. The extension says so wherever this applies.
Can I edit websites?
Yes. The live inspector supports temporary, browser-side visual experiments. It does not change a website’s server, repository, or published content. Playground changes are contained in this page and reset on reload.
Can I copy an element from one site to another?
Yes. Copy element takes one element, with its look, from a site you open with Inspect, and Paste element puts it on another site, in your tab only. One click makes the paste take on that site’s colors, type and buttons, and another brings back the style it was copied with. Copy code gives you the element’s working HTML and CSS instead, with notes on what the page does with it. Nothing leaves your device.
Can I generate a prompt after editing the site?
Yes. Prompt from edits, in the panel, lists each change you made with the inspector, before and after, written for the AI tool you choose. In the playground it reads your edits to the example sites.
Can AI change the page for me?
Yes, in your tab, never on the site itself. With your own key (Anthropic, OpenAI or Google Gemini) or your own server, pin notes or pick an element and ask. Your AI’s edits apply at once and one Undo reverts them all; it asks first when more than 10 elements would change or content would be hidden. If a model is busy, another from your key answers, and the answer says which. Copy as CSS or Create prompt takes the change to your code. Where your provider lists prices, Settings can limit AI to free models, and for OpenRouter it can ask for providers that don’t keep what you send, which leaves fewer free ones. Page details go only to the provider you choose, after you confirm. The playground here sends nothing: it previews the answers locally.
Which browsers and languages does it support?
It is made and tested for Google Chrome 116 or later on a computer. Other Chromium browsers that install extensions from the Chrome Web Store may work but aren’t tested. Firefox and Safari aren’t supported. The interface is in English and Arabic (right to left).
Is it free?
Yes. Everything on this page is free today, including AI mode and Audit with AI on your own key or server. Our AI, which needs no key, is coming soon.
What does the extension send, and can I turn it off?
Anonymous usage counts are on by default, after a notice: which features you use, never URLs, page content or what you type. Switch them off in Settings, under Privacy. With Your AI, your message and the context you keep on go straight to your provider, only when you send. The privacy policy has the details.
Does the accessibility audit guarantee compliance?
No. Each finding is checked against a WCAG 2.2 criterion or a usability heuristic and linked to its element, but automated findings are assistance, not certification. Manual testing, assistive-technology testing, and contextual human review are still needed.
Your next idea
is already in view.
Open a page. Notice a detail. Try a direction.
Make Browser Extractor part of how you work.