The visual layer for vibe coding.

Click any element in your running app, adjust spacing, colors, typography, and more, and your AI agent writes the changes to source. No more prompting for pixels.

Retune is a desktop tool — try it on a larger screen to see the live demo.

How it works

Three steps from visual change to committed code.

Select an element

Click anything on your page — Retune identifies the component, its styles, and where it lives in code.

Tweak visually

Adjust spacing, colors, typography, and layout. Changes preview instantly in the browser.

Apply via AI

Your AI tool (Claude Code, Cursor) picks up exact before/after values and applies them to your source files.

What your agent sees

Not just what changed — exactly where to find it. Component names, selector paths, styling approach (Tailwind, CSS Modules, plain CSS), and exact values.

retune output
# Visual Changes (1 element) ## `<button>` "Get Started" Component: HeroSection > Button Selector: .btn-primary Styling: Tailwind CSS Classes: btn-primary px-6 py-3 rounded-lg bg-blue-600 ### Changes | Property | Before | After | |----------------|-------------|-------------| | padding | 12px 24px | 16px 32px | | border-radius | 8px | 12px | | font-size | 14px | 16px | > Suggested Tailwind: px-8 py-4 rounded-xl text-base

Get started

Install the package

$ npm install retune

Add to your layout

import { Retune } from "retune"
// Add anywhere in your component tree
<Retune />

Automatically hidden in production. Use <Retune force /> for live demos.

Connect your AI tool

Add to .mcp.json (Claude Code) or MCP settings (Cursor):

{
"mcpServers": {
"retune": {
"command": "npx",
"args": ["-y", "retune"]
}
}
}

Next.js, Vite, and Remix. Tailwind, CSS Modules, and plain CSS. Claude Code and Cursor via MCP.

FAQ

No. Retune sends a structured diff of your visual changes to your AI coding tool (Claude Code, Cursor, etc.), which makes the actual code changes. You always review and approve before anything is committed.

No. The <Retune /> component automatically hides itself in production builds. It only activates in development mode unless you explicitly pass the force prop.

It combines CSS selectors, React component hierarchy, class names, and text content to give your AI agent enough context to locate the exact element. No build plugin needed.

Next.js, Vite, and Remix for build tools. Tailwind CSS, CSS Modules, and plain CSS for styling. Any AI tool that supports MCP (Claude Code, Cursor), plus clipboard fallback for others.

Yes. Changes are previewed live in the browser regardless. If no MCP server is connected, you can copy the structured diff to your clipboard and paste it into any tool.

It analyzes your actual stylesheet rules at runtime — not class names. It walks document.styleSheets to count CSS properties per rule and check selector complexity. Single-property, single-class rules are identified as utility CSS. This works for Tailwind, Bootstrap, Tachyons, UnoCSS, or any atomic framework without hardcoded patterns.

Yes. It traverses the React fiber tree to find the component hierarchy and identifies the nearest component name for the selected element. This context helps your AI agent locate the right file without a build plugin.

Yes. Retune is a client-side component that hydrates after page load. It works with Next.js App Router, Pages Router, Remix, and other SSR/SSG frameworks without affecting server rendering.

Minimal impact. It only activates when you enter edit mode — no overhead during normal development. Style analysis runs once per element selection, not continuously.

Not currently. Only elements in the main document are accessible due to browser security restrictions. Shadow DOM support is planned.