Every website is your designlet audience = "design";real type & colorlive editscontrast checksdesign playground.

A free Chrome extension for designers, front-end developers and product teams. It turns any live web page into a playground: inspect and edit its elements, compare up to six screen widths side by side, check its Arabic, right-to-left version, extract its colors, fonts, assets and design tokens, audit it for UX and accessibility, and turn your changes into a prompt for your coding agent. It runs in your browser and needs no account.

DevTools shows the code behind one element and is built for debugging. Browser Extractor reads the page the way a designer does: measured type, color and spacing, the whole page’s colors, fonts and tokens, several widths at once, and an audit whose findings link to their elements. You edit with design controls instead of writing CSS, and each change can become a prompt for your coding agent. For network requests, scripts and performance profiling, DevTools is still the tool.

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.

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.

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.

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.

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.

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).

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.

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.

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.