Design Mode
Add to Chrome
Frontend developers

Tailwind component tuning

Tailwind makes building UI fast and tuning it slow — once you have utility classes, you're guessing at numeric increments. Design Mode gives you a visual handle on every Tailwind class and emits the diff your AI agent can translate back to utilities.

The problem

Adjusting `space-y-4` to something between 16 and 20 pixels means editing classes, refreshing, and eyeballing. Multiply that across a real component and the loop kills momentum.

The workflow

  1. Step 1

    Open the component in the browser

    Open your storybook or your live page. Open the side panel.

  2. Step 2

    Tune visually

    Drag handles, change colours, adjust spacing in pixel increments.

  3. Step 3

    Hand the diff to your agent

    Claude Code or Cursor reads the structured diff and translates the pixel/colour values into the closest Tailwind utility classes (or your tokens) in your source.

The outcome

Visual control of a utility-class UI. Your design system constraints are respected; you just spec from the rendered surface.

Try the live demoSet up your AI agent

Related use cases

Vibe coding with Claude Code

Vibe coding is the loop where you describe a UI change in plain English to an AI agent, see the result on the real page, and refine visually.

Visual editing with Cursor

Cursor is fantastic at code; less ideal as a design canvas.

Design-system audit on a deployed app

Design systems decay.