The visual layer for vibe coding.
Retune lets you select and tweak any element right in the browser. Your AI agent writes the code. No more prompting for pixels.
Retune is a desktop tool. Try it on a larger screen to see the live demo.
How it works
From visual tweak to committed code in seconds.
Select an element
Click anything on your page. Retune identifies the component, its styles, and where it lives in your codebase.
Tweak visually
Adjust spacing, colors, typography, and layout in the browser. Changes preview instantly. What you see is what your agent gets.
Apply with your agent
Retune connects to Claude Code, Cursor, or any MCP client. Your agent writes the changes to source.
What your agent sees
Not vague descriptions, structured data. Component names, selector paths, styling approach, and exact before/after values your agent can act on immediately.
Get started
Install the package
Add to your layout
Automatically hidden in production. Use <Retune force /> for live demos.
Connect your AI tool
Auto-detects Claude Code and Cursor. Configures the MCP server and installs the Retune skill that teaches your agent how to resolve design tokens, utility classes, and CSS variables.
Works with 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 walks document.styleSheets at runtime to detect utility CSS vs semantic CSS without hardcoded framework patterns. It also scans for CSS custom properties and categorizes them by which CSS properties actually use each variable, not by naming convention.
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, so there's 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.
