Tuna

Visual edits your agents can ship.

Tuna lets you select UI elements, fine-tune their visual details, and instruct your agents directly from your browser. Make changes visually and ship them frictionlessly.

$npm install @suryanewa/tuna

How it works

A short loop for visual tuning.

Speak

Dictate visual feedback and instructions in your browser. Tuna turns your spoken notes into targeted comments that reference selected elements as context.

Select

Click on any element to capture selector, text, classes, bounds, and React ancestry context. Supports multiple selections.

Draw

Sketch directly over the page to mark areas, call out alignment issues, and capture visual annotations your agents can reference.

Comment

Quickly leave targeted notes on elements and drawn areas. Comments contain selector and component context alongside written visual changes.

Tune

Adjust parameters including spacing, color, layout, opacity, and shadows with live previewing. Quickly alter individual elements, classes, and grouped selections.

Handoff

Copy or stream a structured diff through MCP with enough context for your coding agent to cleanly enact changes.

Seamless handoff

No more tedious UI descriptions. Tuna gives your agents structured, actionable context so you can move from visual intent to shipped code faster.

Apply these Tuna visual changes to the source code:

**Environment:**
- URL: http://localhost:3000/
- Viewport: 1440×900
- Scroll: (0, 0)
- Timestamp: 2026-06-17T01:20:00.000Z

> **Framework:** Tailwind CSS detected. Apply all changes using Tailwind utility classes — do NOT use inline styles or raw CSS values. When a class swap is suggested, replace the old class with the new one in the JSX/HTML.

# Visual Changes (1 element)

## `<button>` "Get Started"

**Source:** `src/components/HeroSection.tsx:42:10`
**Component:** HeroSection → Button
**Styling:** Tailwind CSS (modify utility classes)
**DOM Path:** `body > main > section.hero > div > button.btn-primary`
**Selector:** `main > section.hero > button.btn-primary` (element-specific)
**Classes:** `btn btn-primary px-6 py-3 rounded-lg bg-blue-600 text-sm`

### Changes

| Property | Before | After | Token |
|----------|--------|-------|-------|
| `padding` | `12px 24px` | `16px 32px` | — |
| `border-radius` | `8px` | `12px` | — |
| `background-color` | `#2563eb` | `#1d4ed8` | `.bg-blue-700` |
| `font-size` | `14px` | `16px` | `.text-base` |

Get started

1. Install Tuna on your device

$ npm install @suryanewa/tuna

2. Add Tuna to your codebase

import { Tuna } from "@suryanewa/tuna"

// Add anywhere in your component tree
<Tuna />

3. Connect Tuna to your agent(s)

Auto-detects Codex, Claude Code, and Cursor. Automatically configures the Tuna MCP server and installs a skill that teaches your agents how to handle design-related code.

$ npx @suryanewa/tuna setup

Works with Next.js, Vite, and Remix. Tailwind, CSS Modules, and plain CSS. Codex, Claude Code, Cursor, plus manual MCP configuration for other compatible agents.

FAQ