Media
5 items
Description
Click any element on any website to edit its CSS visually — no code required. NudgeCSS turns any webpage into a live design canvas. Click any element, and a clean side panel opens with full control over typography, spacing, color, borders, and more. Every change renders instantly on the page; no DevTools, no guessing, no refreshing. When you're done, export your changes as a CSS patch, a structured JSON file, or a ready-to-paste prompt for any AI coding assistant. Or go further: rebuild the whole page as clean HTML/CSS, or download an exact, ready-to-host copy ; real fonts, real images, everything for migrating off a platform like Squarespace or Wix entirely. NudgeCSS Bridge connects the editor straight to Claude Code or any AI browser agent, so a change can move between you and the AI without ever leaving the browser. Built for developers and designers who work in code but think visually. FEATURES ───────────────────────────────────────── Visual CSS editor Click any element to inspect and edit its styles in real time. Typography controls Font family, size, weight, line height, letter spacing, text color, transform, and alignment; all in one panel. Direct text editing Double-click any text on the page to edit the words themselves, not just how they look. Format with bold, italic, and links. Spacing and layout Sliders for padding, margin, border radius, border width, and opacity with live preview. Color picker Swatch + hex input with live preview as you drag. Layer tree Navigate parent and child elements without leaving the panel. Multi-select Shift+click to select multiple elements and edit them together. Export your changes Copy a CSS diff, download a JSON patch, or copy/download a prompt for any AI coding assistant to write the changes back into your project files. NudgeCSS Bridge Send a change straight to a local Claude Code session with one click; no copy-paste. Also works the other direction: an AI browser agent like Claude in Chrome can drive NudgeCSS directly. Website Clone Rebuild the current page as clean, semantic HTML and CSS; ready for an AI agent to implement, or to use as your own starting point. Exact Clone Download a byte-for-byte, self-contained copy of the current page; real fonts, images, CSS, and JS included as a ready-to-host.zip. Built for migrating a site off a platform like Squarespace. Dark mode The editor panel matches your preference, light or dark. Change log Every edit is tracked in the session. Undo individual changes or reset an element to its original state at any time. WHO IS IT FOR ───────────────────────────────────────── • Developers building with Astro, Next.js, or any static site • Designers who want to prototype directly in the browser • Anyone migrating a site off a page builder like Squarespace or Wix • Anyone who has ever wished they could just click a thing and change it. PRIVACY ───────────────────────────────────────── NudgeCSS does not collect or transmit any data to NudgeCSS or any third party. All edits stay in your browser. Two exceptions: the optional Exact Clone feature re-downloads the current page's own already-loaded images, fonts, CSS, and JS so it can package them into a local .zip file; the same files your browser already requested to render the page, sent nowhere but your own downloads folder. And the optional "Send to Claude Code" feature (NudgeCSS Bridge) sends your own edit data to a small relay server running on your own computer; not a NudgeCSS server, not any third party so a local Claude Code session can pick it up; this only happens when you click that button. See the full privacy policy at nudgecss.com/privacy