AI Agent Visual Editor

AI Agent Visual Editor is for designers who work with AI coding agents. You design on the page itself — point at any element in your running app, adjust spacing, colour, type and layout by eye — and your agent turns those adjustments into real code changes in the right files. No screenshots to annotate, no describing a change in prose and hoping the result matches, no hunting for the component that owns a style. Your edits snap to the design tokens your project already defines, so what you change stays inside your system instead of drifting into one-off values. How it works: 1. Start your dev server (npm run dev or equivalent). 2. Run the companion MCP server: npx @nco-studio/web-editor-mcp@^0 3. Open your project in your AI coding agent (Claude Code) with the MCP server configured in .mcp.json. 4. Click the toolbar icon — a popup opens. Click Extension in the popup to toggle it On and activate the overlay. 5. Click any element to inspect it, adjust spacing/color/typography/layout visually — each edit queues automatically. Click Review changes in the toolbar (or Open Change Queue in the popup) to see your pending edits, then click Apply Changes — your agent receives a structured diff — file paths, line numbers, the exact change — and writes it into your source. What you can edit: - Spacing, dimensions, and position - Colors and backgrounds - Typography (font family, size, weight, line-height) - Flex and grid layout - CSS visual effects (filter, mix-blend-mode, clip-path) - Design token snapping (Tailwind, CSS variables) - Element insertion, deletion, reorder, and reparenting Requirements: - @nco-studio/web-editor-mcp npm package running locally (free, open-source) - An AI coding agent that speaks MCP (built and tested with Claude Code) - A locally-running dev server at localhost or 127.0.0.1 - @nco-studio/web-editor-plugin (optional, enables source-file mapping) Architecture: All processing is local. The extension communicates with a WebSocket server running on your own machine, and neither the extension nor that server sends your data anywhere else. The extension activates only on localhost pages; it never runs on public websites. One thing to be deliberate about: each edit carries the page's URL, the edited element's text and attributes, and your changed values to the local MCP server — and on to your agent, whose model provider then sees them, the same as any file you ask it to read. A dev server is not automatically harmless here: if yours is pointed at a seeded database or a production dump, that content goes with the edit. (Screenshots are the exception: they stay in the browser.)