Appwrite
Dashboard
Settings
Help
StatCard.tsx:12
Spacing
padding
16px
gap
8px
radius
10px
Revenue
$12,480
+14%
Acme CorpActive$2,400
Globex IncPending$1,800
InitechActive$960
StatCard.tsx:12
padding
12px
→
16px
NavBar.tsx:4
gap
16px
→
24px
Badge.tsx:6
radius
2px
→
3px
StatCard.tsx:12
Describe a change...
┌─────────────────────────────────────────────────┐
│ Chrome extension │
│ Select · Drag · Type natural language │
└──────────────────────┬──────────────────────────┘
│ websocket
┌──────────────────────┴──────────────────────────┐
│ tweaker serve │
│ WebSocket :7890 · REST :7891 · MCP stdio │
└──────────────────────┬──────────────────────────┘
│ changes
┌──────────────────────┴──────────────────────────┐
│ Your AI agent │
│ Claude Code · Cursor · Windsurf · custom │
└─────────────────────────────────────────────────┘
Select
Click any element on your localhost dev server. Handles appear for padding, margin, font-size, colors.
Drag
Drag handles to adjust values visually. Or use the natural language bar — "make this bolder", "add 8px gap".
Sync
Changes route to your AI agent, which edits actual source files. Tailwind classes, CSS modules, inline styles — whatever your project uses.
Get started
01
Run init in your project directory. Detects your framework, configures your agent, starts the server.
$ npx @dowdavid/tweaker init
02
Install the Chrome extension.
$ git clone https://github.com/dowdavid/tweaker.git
$ cd tweaker && npm run build
Then open chrome://extensions → enable Developer mode → Load unpacked → select the dist/ folder.
03
Start your dev server. Click the extension icon. Start tweaking.
Auto-detected frameworks
Next.js/Vite/CRA/Gatsby/Nuxt/SvelteKit/Astro/Angular/Remix