DEVOURED
Modify Website Elements Directly in the Browser (Website)
Retune allows designers to visually tweak website elements directly in the browser, with an AI agent (like Claude Code) automatically generating the corresponding source code changes.
What: Retune is a desktop tool by Sujan Khadgi that enables direct-in-browser visual editing of websites, like adjusting padding or colors. It generates structured diffs that AI coding tools such as Claude Code or Cursor then use to write and commit the changes to source code (Next.js, Vite, Remix, Tailwind, CSS Modules).
Why it matters: This indicates a significant step towards "vibe coding" where designers can intuitively manipulate interfaces, abstracting away the code-writing process to AI agents, potentially accelerating frontend development workflows.
Takeaway: Developers can npm install retune and integrate it with AI coding tools like Claude Code or Cursor to enable visual-first design iteration on web projects.
Deep dive
- Retune is a visual design tool that runs locally on the user's desktop.* It allows users to select any element on a live webpage and adjust its styling (e.g., padding, border-radius, color) directly in the browser.* Changes are previewed instantly without requiring code modifications first.* Instead of writing code, Retune generates a "structured diff" detailing the visual changes.* This structured diff is then sent to an AI coding assistant, such as Claude Code or Cursor (via an MCP client).* The AI agent is responsible for translating these visual changes into actual code (e.g., modifying CSS, Tailwind classes, or component properties) and writing them to the source files.* Retune supports popular frontend frameworks and styling methods including Next.js, Vite, Remix, Tailwind CSS, CSS Modules, and plain CSS.* It automatically detects the styling approach and identifies React components for better context for the AI agent.* The tool integrates via a component added to the layout, which automatically hides in production builds.* Users can review and approve code changes before they are committed by the AI tool, maintaining human oversight.* Sujan Khadgi developed Retune.
Decoder
- MCP Client: Stands for "Model-agnostic Communication Protocol" client, a generalized interface allowing different AI coding models (like Claude Code, Cursor) to communicate with development tools like Retune.* Structured diff: A detailed, machine-readable description of changes, not just a plain text difference, providing context like component names, selector paths, and exact before-and-after values for properties.
Original article
Full article content is not available for inline reading.
Explore all 61 articles in today's digest
Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi