Visual Controller

Click any element on any page, edit its CSS and classes, copy a Claude Code prompt to apply the changes.

Visual Controller is a visual editing layer for designers and developers working alongside Claude Code. Click any element on any page, tweak its spacing, fill, stroke, typography, and CSS classes in a Figma-style panel, then copy a ready-to-run Claude Code prompt that applies your changes directly to your codebase. HOW IT WORKS 1. Pick — click the toolbar icon (or ⌘. / ⌘\) to open Visual Controller, then click any element on the page. 2. Edit — adjust spacing, fill, stroke, typography, and CSS classes. The color picker surfaces design tokens already defined on the page. 3. Copy prompt — hit "Copy prompt" to get a Claude Code prompt with all your changes. Paste it into your Claude Code session and the changes land in your codebase. WHY DESIGNERS LIKE IT - Works on any page — no setup, no config. - Surfaces the design tokens (CSS custom properties) already on the page so your edits stay on-system. - The whole panel runs in an isolated Shadow DOM, so it never conflicts with the host page's styles. - Built-in feedback widget for bug reports and feature requests. Visual Controller collects anonymous, aggregated usage analytics to improve the product. The automatic analytics never include page content, URLs, CSS values, or class names. The optional feedback form sends the current page URL, the element you selected, and your edits — but only when you choose to submit it. See the privacy policy for details.