Tweaker: Visual editing that writes back to source
I spend most of my time in localhost, working alongside AI agents to build UIs. The loop was painful: spot something off in the browser, switch to chat, describe it in words, wait for the diff, check the result, repeat. There was no way to just point at an element and adjust it. Tweaker came out of that frustration. It's a Chrome extension that overlays your running app with a design panel. Click any element, drag handles to adjust spacing, pick colors, change typography. Every edit queues as a structured change that an AI agent picks up, writes back to your source files, and confirms with a toast.
Edits are bound to your project's design system, not raw CSS. If you've agreed on color tokens and a type scale with your agent, those are what Tweaker exposes. You tweak within the system first. If you need something outside it, you explicitly detach and create a new token.
One command to start: npx tweaker init. It detects your framework, finds your dev port, wires up the MCP config for your agent, and starts the server. Works with Claude Code out of the box, Cursor and Windsurf via REST.
How I built it
A browser extension means it works on any app you're running locally, no per-project setup. The overlay is sealed off from the host page's styles, so it looks the same everywhere.
One language across the extension, the local server, and the CLI. Types travel with every change so the agent and the browser can't disagree about what's being edited.
Every visual edit becomes a structured change waiting in a queue. The agent reads the queue, writes the change into your source files, and pings back whether it landed. You see a toast in the browser.
The browser and the local server stay connected, so edits stream through the moment you make them. A REST endpoint runs alongside for agents that don't speak MCP, so Cursor and Windsurf get the same pipeline.
Saves show up live, keeping the loop between tweak and test tight.
What I'd change
The handle-based padding and margin editing works well for simple layouts but gets fiddly on deeply nested components. A smarter selection mode that collapses wrapper elements would help.