Limno

A visual layer for coding agents

Fix UI visually.Let AI write the code.

Stop explaining pixel-level changes in prompts. Select anything in your running app, adjust spacing, colors, radius and states, then hand the exact visual intent to your coding agent.

Try LimnoSee how it works

Visual feedback shouldn't be a translation exercise.

The usual way

  1. Spot the issue
  2. Take a screenshot
  3. Annotate it
  4. Write an explanation
  5. Send it to an engineer
  6. They interpret it
  7. The change ships
  8. You check again

With Limno

  1. 01Select
  2. 02Adjust
  3. 03Review
  4. 04Implement
Done, and checked on the page.

How it works

Just make the change.

Instead of describing what needs to change, change the implemented UI directly.

01

Select

Hover over anything in your running app. Limno names the element and, where it can, the component and the line of code behind it.

Needs your attention

Tenant booking form awaiting review

Jenny Willson-Block B, Unit 2C

Ownership verification pending

Alan Smith-Block A, Unit 4B

AttentionRow

Lease renewal in 12 days

Brooklyn Simmons-Block A, Unit 11A

Sale agreement awaiting signature

Arlene McCoy-Block C, Unit 3D

02

Adjust

Use the controls you already know from design tools. You don't need to know how the change should be built. Just make it look right.

$16,546

Outstanding payments

14 accounts overdue
03

Review

Every adjustment lands in a change set. Nothing touches your code until you've looked it over and decided what goes.

DesignChanges 3Comments
RevenueCardRadiusradius-2xl→radius-xl
RevenueCardGapspace-12→space-8
View all units · HoverFillbg/primary→bg/tertiary
3 of 3 changesSend to Claude Code
04

Implement

Your coding agent receives the exact elements, components, states, tokens and scope, plus before and after screenshots.

limno_get_changes3 changes
RevenueCard  src/components/RevenueCard.tsx:12
  radius   radius-2xl → radius-xl
  gap      space-12 → space-8
  scope    this component

Button  “View all units” · hover
  fill     bg/primary → bg/tertiary
  scope    all 6 buttons

+ before/after screenshots, page, viewport

Design-system aware

Use the tokens you already have.

Limno reads your design tokens, so a change is recorded as var(--radius-xl) rather than another one-off value. Your coding agent then builds it with your own components and conventions.

Try it: pick a radius.

$352,834

Due in 30 days

42 upcoming payments

Radius

border-radius: 24px;border-radius: var(--radius-xl);

Component states

Fix the state, not just the screenshot.

Switch any element to hover, focus, pressed or disabled and correct it right there, instead of explaining state-specific behaviour through screenshots.

Try it: switch states.

Button · Hover
Fill
bg/tertiarybg/primary→bg/tertiary

Multiple selection

Pixel pushing, without the pixel pushing.

Select several elements and align or distribute them. Limno records the relationship you want, “align these three to the top”, not just a CSS property.

Try it: use the align tools.

Outstanding$16,546
Due in 30 days$352,834
Portfolio87 units
3 selected

Before and after

What you move on screen is what your agent changes in code.

$125,000

Collected this month

+12% vs last month

Rent

$100,000

Service charge & dues

$25,000

$16,546

Outstanding payments

14 accounts overdue

$352,834

Due in 30 days

42 upcoming payments
BeforeAfter
Radius32 → 24
Padding16 → 24
Gap48 → 32
Fills→
Claude CodeWorking…
  • RevenueCard and StatCard identifiedsrc/components/
  • Existing tokens resolvedradius-xl · space-6 · tints
  • Component scope confirmed3 cards, 6 changes
  • Changes implemented3 files edited
  • Checked on the page by Limno6 of 6 verified

Review before you ship

Every visual change becomes a change set.

Limno never turns a click into an irreversible code change. Changes collect in one place, where you can switch any of them off, preview the result and compare before and after. You approve the set; your agent does the rest.

DesignChanges 3Comments
RevenueCardRadiusradius-2xl→radius-xl
RevenueCardGapspace-12→space-8
View all units · HoverFillbg/primary→bg/tertiary
3 of 3 changesSend to Claude Code

Works wherever you review

Review anywhere. Implement where the code lives.

Where you find the problem doesn't have to be where you fix it.

Localhost

Edit & implement

Working against your dev server. Limno hands the change set straight to your coding agent, then checks the result on the page.

Visual changesCoding agentCode

Staging

Edit & propose

Review a deployed build with the Chrome extension, make the changes, then copy them for your agent or export a fix request.

Visual changesChange setAgent or engineer

Production

Inspect & propose

The live site stays untouched. Try the fix on the real page, then send it to whoever owns the code.

InspectAdjustFix request

Your coding agent

Limno isn't another coding agent.

It gives the one you already use something it doesn't naturally have: precise visual intent.

Visual change set
Claude CodeCursorCodexAny MCP client

Share with engineering

No repo access? Send the fix.

Export a fix request an engineer can open and build from directly.

Visual fix requestDashboard · Staging · 3 changes
  1. RevenueCard Radius 32px → 24px
  2. RevenueCard Gap 48px → 32px
  3. View all units · hover Fill bg/primary → bg/tertiary

Try Limno

Two minutes to your first change.

Run one command in your app's folder. Limno only runs in development and never ships in your production build.

npx @limno/cli init
  1. Detects your framework and package manager
  2. Shows the config changes, then applies them
  3. Runs Claude Code or Codex for you on Send

Then start your dev server and press ⌥E on Mac or Alt+E on Windows.

Or set it up by hand
Install
npm i -D @limno/next
Wrap your config
next.config.ts
import { withLimno } from "@limno/next";

export default withLimno({
  // your Next.js config
});
Add the editor to your root layout
app/layout.tsx
import { Limno } from "@limno/next/client";

// inside <body>, after {children}
<Limno />
Run your dev server and press ⌥E (Alt+E on Windows)

Chrome extension

Review staging and production sites, no install in the codebase. Coming soon to the Chrome Web Store.

Stop describing pixels.Start moving them.

Limno turns visual feedback into implementation-ready changes, wherever you review your product.

Try LimnoSee how it works
Nothing leaves your machine. Read the privacy policy