nudge

Drag on the running page, then hand the measurements to Claude Code.

/plugin install nudge --marketplace g1d30nB/nudge

Use it

1. Open the page you are working on, in Claude Code's browser pane or your own browser, and run /nudge or click the bookmark. A panel appears in the bottom right corner.
2. Click an element, then drag it, resize it from its handles, or press Backspace to remove it. Double-click text to edit it; with text selected, adjust its type and colour in the panel.
3. Hold Option and press the up arrow to select the parent of what you clicked, for wrappers you cannot click directly. Option and the down arrow comes back. Command-Z undoes.
4. Click the panel's header to fold it out of the way while you work, or drag it elsewhere.
5. In Claude Code, run /nudge batch and press Enter. Elsewhere, press Copy for Claude Code and paste the batch into your agent as the whole message. It edits your source; nudge never does.
6. When your agent has applied it, press Clear preview to see the page as your code now renders it. nudge tells you what was applied and what was not.
7. Run /nudge or click the bookmark again to close the panel.

Commands, in Claude Code

After a batch is sent, the plugin checks the page when Claude's turn ends and prints the verdict under the answer. When the pane navigates to another page of your site, the plugin loads nudge there again.

New in v1.4.0, 12 October 2026

• Undo and redo. Command-Z undoes any change, Shift-Command-Z redoes it. Control-Z and Control-Y on Windows and Linux. Copying a batch is the commit point.
• One change per breakpoint. A preview belongs to the breakpoint range it was made in. Narrow the window past a breakpoint and it lifts, so you see your real mobile layout; correct the same element again there; widen and the desktop change returns. The batch carries each with its width and range.
• Resizing keeps the opposite corner fixed even when the layout anchors the element to the end of its cell.

New in v1.3.1, 12 October 2026

• Action row. Under the panel header, the selection's own buttons, only the ones that apply: Pin or Unpin, Match when something is pinned, Siblings when the change has siblings to go to, Measure, Remove. The keys still work.
• Measure button. Rulers and the gap drag without holding Option. Escape stops.
• x-ray button in the header, and the pinned element named in the crumbs with a × to remove it.
• Movable panel. Drag the header to put the panel anywhere in the window. A click still collapses it.

New in v1.3.0, 11 October 2026

The biggest release since launch. The plugin follows the current release; installed bookmarks are pinned to the release they came from, so reinstall the bookmark above to get it.

• Resize from any edge. Eight handles. Dragging the left or top edge moves that edge, and the batch reports the size and the move. Command resizes from the centre; Option locks the ratio. Width and height fields in the panel, with steppers that snap.
• Breakpoints. nudge reads your breakpoints from the page's stylesheets. A badge on the panel header shows the window width and the range it falls in; click it to draw the breakpoint lines. The batch says which range it was measured in, and flags an element that has different rules at other widths.
• Verify. Sending a batch records what the page should look like once the agent has applied it. After a reload, or when you press Clear preview, nudge measures again and tells you what was applied and what was not, with the value now and the value wanted.
• Find things. The header shows the selection's ancestry as clickable crumbs. The hover box names the element and its size. Press x to outline every container. Batches name the React or Vue component that rendered the element where dev mode leaves it readable.
• Measure and set gaps. Hold Option and hover another element to see the distance. Hold Option and drag it to change the gap: nudge edits the rule that made the space, the parent's gap or a margin, and the batch names it.
• Say what you mean. p pins an element, m makes the selection match it. a applies a change to all matching siblings. The batch carries the intent, so the agent changes the shared rule rather than copying values.
• Guardrails. A colour change that fails AA contrast is flagged with the ratio. A font size under 12px is flagged.
• Claude Code plugin. /nudge opens nudge in Claude Code's built-in browser, /nudge batch pulls the batch into the prompt, and the plugin checks the page after Claude's turn. See below.

Keys

The full list, with the buttons and the page API, is in the README.

If you cannot drag the button

Create a new bookmark by hand and paste this line as its URL.

javascript:(function(){if(window.__nudge){window.__nudge.destroy();return}var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/gh/g1d30nB/nudge@v1.4.0/nudge.js?t='+Date.now();document.documentElement.appendChild(s)})();

In your project, as a script tag

The third way, for a project the whole team works on: put nudge in the project itself and it loads as a small blue dot in the bottom left corner while you develop, in Claude Code's browser pane or any browser pointed at the dev server. Click the dot to open it. It is the same file, and it cannot reach your live site: the tag only exists in development, and nudge refuses to run anywhere but a local address.

Paste this into Claude Code as one message, in the project you are building:

Add nudge to this project so that it loads only while I am developing.

nudge is a design-correction tool: https://github.com/g1d30nB/nudge. It is one script file. Add this tag to the layout or entry point that every page shares, so it is present when I run the dev server and absent from any production build:

<script src="https://cdn.jsdelivr.net/gh/g1d30nB/nudge@v1.4.0/nudge.js" data-nudge-dormant></script>

Rules:
- Keep the data-nudge-dormant attribute exactly as written. Without it nudge opens a panel on every page load.
- Guard the tag with this framework's own development flag (for example import.meta.env.DEV, process.env.NODE_ENV === 'development', or import.meta.dev), so it cannot reach a production build. Do not rely on a runtime check instead.
- If this project has a Content-Security-Policy that blocks outside scripts, download nudge.js from https://github.com/g1d30nB/nudge/releases/tag/v1.4.0 into the public folder and point the tag at /nudge.js instead.
- Change nothing else.
- When you are done, start the dev server, tell me which file you changed, and remind me that the small blue dot in the bottom left corner of the page opens nudge.

To take it out again: Remove nudge from this project: delete the script tag and any code you added to load it. Details and snippets for each framework are in the README.