Nudge UI

A design panel for any web page. Click an element, adjust it live, and hand the result to your coding agent as a structured prompt.

The tools and speed of a design tool, brought to the web. Edit your live site • Click any element to see its styles • Adjust layout, flex and grid, spacing, size, typography, color, borders, corner radius and opacity, and watch the page respond instantly. • See design tokens and variables • Drag spacing handles directly on the page. Hold Shift to snap to 8px steps. • Select several elements at once with Shift-click to edit them together. • Hold Cmd/Ctrl and click to select the deepest element under the pointer. • Hold Alt to measure the distance between elements. • Hold \ to peek at the original, unedited page at any time. Comment and sketch • Pin comments to elements to explain what should change and why. • Draw sketches and annotations directly on the page when words aren't enough. Implement • Copy a structured prompt to your agent KEYBOARD SHORTCUTS • Alt+Shift+N: show or hide Nudge UI on the current tab • V: select elements • C: comment tool • P: pencil tool • Hold A: interact with the page normally • Esc: clear the selection • Delete / Backspace: delete the selected element • Cmd/Ctrl+Z: undo • Cmd/Ctrl+\: show or hide the inspector panel FOR DEVELOPERS Source and documentation: https://github.com/charlessmart/nudge-ui