Local · open-source · MIT

webtweak

Edit by eye. Claude writes the CSS.

A local visual editor for hand-coded HTML / CSS. You drag, resize and restyle an existing page by eye; webtweak captures what you changed as machine-readable patches; Claude reconciles those patches into clean source.

View on GitHub npm package
localhost:8723/page.html

Video not playing? Open the demo (MP4).

It's deliberately half a loop

webtweak never rewrites your source — it only captures intent. The judgment-heavy work of locating elements and writing clean CSS is done by Claude on reconcile.

  1. 1

    Edit by eye

    Run webtweak page.html, then click, drag, resize and restyle in the browser. Your source is never touched.

  2. 2

    webtweak captures patches

    On Save it writes a page.webtweak.json next to the page — each element fingerprinted, each change recorded as intent.

  3. 3

    Claude reconciles to clean CSS

    Tell Claude “reconcile page.html”. It locates each element and writes clean CSS in your house conventions — then stops at source.

Install

Node.js 18+. No npm packages required to run it.

Run without installing 
npx webtweak page.html
Or install globally 
npm install -g webtweak

The reconcile step ships as a Claude Code skill — reconcile/SKILL.md documents the full process for any Claude conversation. Read the reconcile skill →