Add one line to the site running on your localhost and it becomes a canvas. Click any layer, set padding and spacing, drag the handles. When it looks right, copy the changes as instructions your coding agent can apply.
<script src="https://sitetuner.design/v1/sitetuner.js"></script>
A free prototype. Runs only on your machine and never edits your files.
Nudging a heading up eight pixels should not cost a prompt.
Describing a visual fix in words is slow, and the agent has to guess what you meant. Here you make the change with your hands, see it on the real page, and only talk to the agent once, at the end.
The hand-off is plain text on your clipboard. Paste it into Claude Code, Cursor or whichever agent you already use. There is no account, no credits and no agent built in.
Put one script tag on your site while you are developing. Your site loads as usual in your own browser. Your page appears on a canvas, with a Layers panel on the left and Properties on the right.
<script src="https://sitetuner.design/v1/sitetuner.js"></script>Select layers and change them the way you would in a design tool. Edits are temporary overrides kept in your browser, so you can undo any of them or reset the lot.
One button copies every change as instructions: the element, before and after values, and the CSS rule that sets the value today. Paste it to your agent and it edits the source.
Hover to outline, click to select, double-click to edit text. The panel shows position, size, auto layout, padding, margin, typography, fill, stroke and effects for whatever you picked.
24*2. Clear a field to reset it.Shift and click a second layer. The distance between the two appears in red, on the page and in the panel. Type the number you want and the layers move.
Corner and edge handles resize the layer. Pink bars inside it change padding or gap. Hold Alt and hover another layer to read the distance to it.
The Changes tab lists every edit with its before and after value, each with its own undo. Copy for agent turns the list into instructions written for a coding agent.
Apply these design changes to the codebase. They were made visually in the browser on http://localhost:4391/demo/ (viewport 1280×760) and exist only as temporary overrides. Make them permanent in the source styles. ## 1. `a.btn` — "Start free" - Selector: `body > main > section:nth-of-type(1) > div > a:nth-of-type(1)` - Applies to: this one element only - Classes on the element: `btn` | Property | Before | After | Currently set by | | --- | --- | --- | --- | | `border-radius` | 8px | 24px | `.btn` in site.css as `border-radius: var(--radius-md)` | ## 2. `h1` — "Write it down in the field. Find it again at your " - Selector: `body > main > section:nth-of-type(1) > h1` - Applies to: this one element only | Property | Before | After | Currently set by | | --- | --- | --- | --- | | `font-size` | 48px | 56px | `h1` in site.css as `var(--text-5xl)` | ## 3. `article.card` — "Works offline Every note is saved on the device fi" - Selector: `.card` - Applies to: every element matching `.card` (5 on this page) - Classes on the element: `card` | Property | Before | After | Currently set by | | --- | --- | --- | --- | | `padding` | 24px | 32px | `.card` in site.css as `padding: calc(var(--spacing) * 6)` | ## How to apply 1. Find each element in the source using its selector, classes, text and component name. 2. Change the style where it is defined today (see "Currently set by"). Do not add inline styles or `!important`. 3. If the project uses Tailwind or another utility framework, change the utility classes. Use the nearest value on the existing scale when it matches, and an arbitrary value only when it does not. 4. If a value comes from a design token or CSS variable and the change is for one element only, do not edit the token. Override it on that element instead. 5. For "this one element only", do not edit a rule shared by other elements. For "every element matching", edit the shared rule. 6. When you are done, the page should look the same as it does with the overrides.
Nothing to download and no account to make. Sitetuner only starts on localhost, so it does nothing if the line ever reaches your live site.
Paste this into Claude Code, Cursor or the agent you use, in your project. That is the whole install.
Add Sitetuner to this project. Load <script src="https://sitetuner.design/v1/sitetuner.js"></script> at the end of the body in the root layout or main HTML file, in development only (for example behind NODE_ENV === "development" or import.meta.env.DEV) so it never ships to production. Change nothing else, then tell me which file you added it to.
Add this line before </body> in your layout or main HTML file. Keep it to development.
<script src="https://sitetuner.design/v1/sitetuner.js"></script>
Prefer not to load a script from another site? Download the file, put it in your site's public folder and point the script tag at it. A downloaded copy does not update itself.
<script src="/sitetuner.js"></script>
Open it in your browser as you always do. Your page appears on a canvas with Layers on the left and Properties on the right. Press ⌘ \ to tuck Sitetuner away and get your full page back, and again to bring it back.
If your hands know Figma, most of these will work first time. On Windows, use Ctrl where it says ⌘.
This is an early prototype. These are the edges you will find.
position: fixed on your site does not shrink with the page.No. Edits are temporary style overrides stored in your browser for that page. They stay through a reload until you undo or reset them. Your source changes only when your agent applies the copied instructions.
Any that takes pasted text. The hand-off is Markdown on your clipboard, so it works with Claude Code, Cursor and others without a plugin.
It reads the rendered page, so it does not depend on a framework. It has been used on a plain HTML page and on a Next.js site with Tailwind. Testing on other stacks has not been done yet.
No. The file makes no network requests. It reads the page in your browser and writes to your clipboard when you press Copy for agent.
Only if you leave the script tag in. Load it in development only, or use the try-on-site option, which never touches your project.
Nothing. There is no pricing and no account.