# Tuna

> The visual layer for vibe coding.

Tuna is a browser overlay for developers that lets you visually edit any element in your running web app — spacing, colors, typography, layout, and more — with instant preview. Your AI coding tool, such as Codex, Claude Code, or Cursor, then writes the changes to source code via MCP (Model Context Protocol).

## How It Works

1. Add `<Tuna />` to your app (development only, hidden in production)
2. Run `npx @suryanewa/tuna setup` to configure your AI tool (auto-detects Codex, Claude Code, and Cursor, installs MCP server and skill)
3. Click any element to select it
4. Tweak properties visually with instant live preview
5. Your AI agent picks up structured diffs and applies them to source files

## Key Features

- Visual editing of CSS properties (spacing, colors, typography, layout, shadows, filters, gradients)
- CSS variable detection: scans your stylesheets for custom properties and categorizes them by actual usage, not naming convention
- Variable picker for applying, swapping, and unlinking design variables on any property
- Target scoping: choose how broadly changes apply, from a base class (all buttons) to a compound selector (just ghost buttons) to a specific element
- Smart element identification using CSS selectors, React component hierarchy, and source file locations
- Styling approach detection (Tailwind, CSS Modules, plain CSS) by analyzing document.styleSheets
- Gradient editor with per-stop change tracking and variable support
- Font picker with project fonts, system fonts, and category filtering
- Pseudo-state editing (:hover, :focus, :active)
- Undo/redo with coalescing for scrub gestures
- Built-in skill (tuna-visual-changes) that teaches AI agents how to resolve design tokens, utility classes, and CSS variables when applying changes
- MCP server for AI tool integration, plus clipboard fallback

## Compatibility

- Frameworks: Next.js, Vite, Remix
- Styling: Tailwind CSS, CSS Modules, plain CSS, any atomic CSS framework
- AI Tools: Codex, Claude Code, Cursor (via MCP); clipboard fallback for others

## Installation

```
npm install @suryanewa/tuna
npx @suryanewa/tuna setup
```

## Links

- Website: https://tuna.dev
- GitHub: https://github.com/khadgi-sujan/tuna
- npm: https://www.npmjs.com/package/@suryanewa/tuna
- License: PolyForm Shield 1.0.0
- Author: Sujan Khadgi (@___sujan)