Chrome extension

Tweak any website's CSS, then hand the exact changes to your AI.

Pick any element, edit it with real controls, and export a structured brief your AI assistant applies straight to your codebase. The tool below is the real thing. Have a play with it.

Get CSS Tweaker, €15
One time, no subscription 14-day refund No account
How it works

From the browser to your codebase, in three steps.

01

Pick an element

Hover to highlight, click to lock on. The picker reaches into deep component trees, not just the surface of the page.

02

Tweak it live

Drag sliders, pick colours and fonts, set spacing. The page updates as you go, and you can edit hover and active states too.

03

Export the handoff

One click turns every change into a structured brief: selectors, before and after values, your intent. Ready for your AI.

The point

A CSS inspector shows you a value. It will not tell you where that value lives in your code.

You nudge the padding, swap a colour, resize a heading. Then the real work starts: finding where that lives across components and stylesheets. CSS Tweaker writes that brief for you, so your AI assistant can apply it for real.

Try a slice of it

Drag the controls. Watch it respond.

This is the same kind of live editing CSS Tweaker does on a real page, pulled out so you can feel it.

Design happens in the browser.

But the code lives somewhere else entirely. CSS Tweaker is the bridge between the two, so a quick visual change becomes an exact instruction your AI can follow.

What's in the box

A real inspector, not a toy.

Works on any page

A Shadow-DOM panel mounts on every site with zero style bleed. No React or Vue conflicts.

Around a hundred properties

Scrub-drag numbers, a colour picker, a font picker with live preview, spacing and shadow editors.

Edits persist per URL

Changes save locally and reapply on reload, even after React or Next hydration.

Hover and active states

Edit interaction states, not just the base. The handoff keeps them on the right rules.

No account, no tracking

The extension talks to nothing. Everything you do stays inside your browser.

One-time purchase

Fifteen euros, once. No subscription, no seat counting. Yours to keep.

Installing

Up and running in about thirty seconds.

CSS Tweaker is not on the Chrome Web Store yet, so you install the packaged build directly. Full instructions come with the download.

Works in Chrome, Edge, Brave, Arc and other Chromium browsers.

  • 1Unzip the file you receive after checkout.
  • 2Open chrome://extensions and turn on Developer mode.
  • 3Click Load unpacked and select the folder.
  • 4Pin CSS Tweaker to your toolbar. Done.

A structured brief describing every change you made: selectors, DOM paths, old and new values, and instructions for applying them in your styling system. You paste it into Claude, Cursor, Copilot or your editor's AI, and it edits your real source files.

Chrome and any Chromium-based browser: Edge, Brave, Arc, Opera and others. It is a Manifest V3 extension.

It will be. Store review takes time, and this is the early release. For now you install the packaged build directly, which also means no forced auto-updates. Buy once and it is yours.

No. The extension has no account and no analytics. Every edit stays in your browser's local storage. This website uses privacy-friendly analytics to count visits; the extension itself does not.

Email within 14 days for a full refund, no questions asked. It is a 15 euro one-time purchase, so there is no subscription to cancel.

Get CSS Tweaker

Stop hand-translating your own design changes.

Tweak it in the browser. Let your AI ship it to the code.

Get CSS Tweaker, €15
One-time payment 14-day refund Instant download