PICK · TWEAK · SHIP

Edit any site’s CSSand hand the diff to Claude.

A Chrome extension that turns visual CSS edits into a structured patch. Your AI agent applies it on the first try, which still feels like cheating.

The DevTools-edit-and-grep-and-pray loop, retired.

VIEW ON GITHUB

·01PICK

Pick any element. Keyboard-navigable DOM walker. Works on any page. The fancy ones too.

·02PREVIEW

Live preview via injected style + unique class. Wins specificity wars without asking.

·03PATCH

Markdown-fenced JSON on your clipboard. Versioned. Agent-ready. Boringly stable.

THE PATCH FORMAT · v1.0

{
  "version": "1.0",
  "source": "css-wrangler",
  "url": "https://example.com",
  "capturedAt": "2026-05-03T17:42:11.000Z",
  "stylingSystem": "tailwind",
  "breakpoints": {
    "mobile": 375,
    "tablet": 768,
    "desktop": 1280
  },
  "edits": [
    {
      "siblingGroup": null,
      "element": {
        "tag": "button",
        "text": "Get started",
        "role": "button",
        "ariaLabel": null,
        "selectors": [
          {
            "type": "class",
            "value": ".hero-cta",
            "stability": "high"
          }
        ],
        "domPath": "main > section.hero > button.hero-cta"
      },
      "changes": [
        {
          "state": "default",
          "breakpoint": "desktop",
          "property": "padding-top",
          "from": "12px",
          "to": "16px"
        }
      ]
    }
  ]
}

Versioned at 1.0. We’re optimistic. Pattern-matched downstream by Claude Code; the shape doesn’t change without a major bump.

INSTALL · v0.1 ALPHA

·01pnpm install && pnpm build
·02chrome://extensions → developer mode → load unpacked → pick dist/
·03click the toolbar icon, side panel opens, click PICK ELEMENT

When CSS Wrangler ships to the Chrome Web Store, this section becomes a single button. Until then, three steps. You’ll live.